Преглед на файлове

feat(ui): add cintas install calendar summary page and dashboard tile

- Created new CintasCalendarSummaryPage component with responsive layout
- Added summary statistics cards for total installations, weekly, and completed counts
- Integrated new dashboard tile with Cintas branding and navigation
- Updated dashboard grid to include 7th application tile
- Added placeholder content for backend integration pending completion
vtugulan преди 6 месеца
родител
ревизия
0a040bb072
променени са 2 файла, в които са добавени 84 реда и са изтрити 1 реда
  1. 65 0
      app/cintas-calendar-summary/page.tsx
  2. 19 1
      app/dashboard/page.tsx

+ 65 - 0
app/cintas-calendar-summary/page.tsx

@@ -0,0 +1,65 @@
+import { Suspense } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function CintasCalendarSummaryPage() {
+  return (
+    <div className="container mx-auto py-6 px-4">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold tracking-tight">Cintas Install Calendar Summary</h1>
+        <p className="text-muted-foreground">
+          Overview of installation calendar activities and summary statistics
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Installation Calendar Summary</CardTitle>
+            <CardDescription>
+              Comprehensive overview of all scheduled installations
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium">Total Installations</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">--</div>
+                  </CardContent>
+                </Card>
+                
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium">This Week</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">--</div>
+                  </CardContent>
+                </Card>
+                
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-sm font-medium">Completed</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">--</div>
+                  </CardContent>
+                </Card>
+              </div>
+              
+              <div className="border rounded-lg p-4">
+                <p className="text-sm text-muted-foreground">
+                  Detailed calendar summary data will be displayed here once the backend integration is complete.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

+ 19 - 1
app/dashboard/page.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { FileText, Layout, Upload, BookOpen } from 'lucide-react';
+import Image from 'next/image';
 
 interface AppTile {
   id: string;
@@ -48,6 +49,23 @@ export default function DashboardPage() {
       icon: <BookOpen className="w-8 h-8" />,
       href: '/api-docs',
       color: 'bg-orange-500'
+    },
+    {
+      id: 'cintas-calendar-summary',
+      title: 'Cintas Install Calendar Summary',
+      description: 'View installation calendar summary and statistics',
+      icon: (
+        <div className="w-8 h-8 relative">
+          <Image
+            src="/Cintas-Blue.svg"
+            alt="Cintas"
+            fill
+            className="object-contain"
+          />
+        </div>
+      ),
+      href: '/cintas-calendar-summary',
+      color: 'bg-blue-600'
     }
   ];
 
@@ -75,7 +93,7 @@ export default function DashboardPage() {
               onClick={() => handleAppClick(app.href)}
             >
               <CardHeader className="text-center">
-                <div className={`${app.color} w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
+                <div className={`${app.id === 'cintas-calendar-summary' ? 'bg-white border-2 border-blue-500' : app.color} w-16 h-16 rounded-full flex items-center justify-center ${app.id === 'cintas-calendar-summary' ? '' : 'text-white'} mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
                   {app.icon}
                 </div>
                 <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">