feat(ui): enhance cintas calendar summary page with modern styling and dark mode support

app/cintas-calendar-summary/page.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+
 "use client";
 
 import { useState } from 'react';
@@ -165,230 +165,232 @@ export default function CintasCalendarSummaryPage() {
   };
 
   return (
-    <div className="container mx-auto py-6 px-4 max-w-6xl">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Cintas Install Calendar Summary</h1>
-        <p className="text-muted-foreground">
-          Follow the workflow steps to upload and process the installation calendar data
-        </p>
-      </div>
-
-      {error && (
-        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-          <p className="text-sm text-red-800">{error}</p>
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto py-6 px-4 max-w-6xl">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Cintas Install Calendar Summary</h1>
+          <p className="text-muted-foreground dark:text-gray-300">
+            Follow the workflow steps to upload and process the installation calendar data
+          </p>
         </div>
-      )}
-
-      {/* Workflow Steps */}
-      <div className="mb-8">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          {steps.map((step) => {
-            const Icon = step.icon;
-            return (
-              <Card
-                key={step.id}
-                className={`border-2 ${getStepStatusColor(step.status)}`}
-              >
-                <CardHeader className="pb-3">
-                  <div className="flex items-center space-x-2">
-                    <Icon className="h-5 w-5" />
-                    <div>
-                      <CardTitle className="text-sm font-medium">
-                        Step {step.id}: {step.title}
-                      </CardTitle>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <CardDescription className="text-xs">
-                    {step.description}
-                  </CardDescription>
-                </CardContent>
-              </Card>
-            );
-          })}
-        </div>
-      </div>
 
-      {/* Step Content */}
-      <div className="grid gap-6">
-        {currentStep === 1 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Step 1: Upload Excel File</CardTitle>
-              <CardDescription>
-                Upload your Cintas Install Calendar Excel file to begin processing
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <UploadForm onFileUploaded={handleFileUploaded} />
-
-                {uploadedFile && (
-                  <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+        {error && (
+          <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-800">{error}</p>
+          </div>
+        )}
+
+        {/* Workflow Steps */}
+        <div className="mb-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {steps.map((step) => {
+              const Icon = step.icon;
+              return (
+                <Card
+                  key={step.id}
+                  className={`border-2 ${getStepStatusColor(step.status)}`}
+                >
+                  <CardHeader className="pb-3">
                     <div className="flex items-center space-x-2">
-                      <CheckCircle className="h-5 w-5 text-green-600" />
+                      <Icon className="h-5 w-5" />
                       <div>
-                        <p className="text-sm font-medium text-green-800">File uploaded successfully!</p>
-                        <p className="text-sm text-green-600">
-                          {uploadedFile.filename} ({(uploadedFile.size / 1024 / 1024).toFixed(2)} MB)
-                        </p>
+                        <CardTitle className="text-sm font-medium">
+                          Step {step.id}: {step.title}
+                        </CardTitle>
                       </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        )}
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription className="text-xs">
+                      {step.description}
+                    </CardDescription>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
 
-        {currentStep === 2 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Step 2: Create Import Record</CardTitle>
-              <CardDescription>
-                Creating import record with Cintas Install Calendar layout configuration
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <p className="text-sm text-muted-foreground">
-                  File: {uploadedFile?.filename}
-                </p>
-                <Button
-                  onClick={handleCreateImportRecord}
-                  disabled={isProcessing}
-                  className="w-full"
-                >
-                  {isProcessing ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Creating Import Record...
-                    </>
-                  ) : (
-                    'Create Import Record'
-                  )}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+        {/* Step Content */}
+        <div className="grid gap-6">
+          {currentStep === 1 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Step 1: Upload Excel File</CardTitle>
+                <CardDescription>
+                  Upload your Cintas Install Calendar Excel file to begin processing
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <UploadForm onFileUploaded={handleFileUploaded} />
 
-        {currentStep === 3 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Step 3: Import Data</CardTitle>
-              <CardDescription>
-                Processing Excel file and importing data into database
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <p className="text-sm text-muted-foreground">
-                  Import ID: {importRecord?.id}
-                </p>
-                <Button
-                  onClick={handleProcessImportData}
-                  disabled={isProcessing}
-                  className="w-full"
-                >
-                  {isProcessing ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Processing Import...
-                    </>
-                  ) : (
-                    'Process Import'
+                  {uploadedFile && (
+                    <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+                      <div className="flex items-center space-x-2">
+                        <CheckCircle className="h-5 w-5 text-green-600" />
+                        <div>
+                          <p className="text-sm font-medium text-green-800">File uploaded successfully!</p>
+                          <p className="text-sm text-green-600">
+                            {uploadedFile.filename} ({(uploadedFile.size / 1024 / 1024).toFixed(2)} MB)
+                          </p>
+                        </div>
+                      </div>
+                    </div>
                   )}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+                </div>
+              </CardContent>
+            </Card>
+          )}
 
-        {currentStep === 4 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Step 4: Generate Summary</CardTitle>
-              <CardDescription>
-                Running summary calculations and displaying results
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <p className="text-sm text-muted-foreground">
-                  Import ID: {importRecord?.id}
-                </p>
-                <Button
-                  onClick={handleGenerateSummary}
-                  disabled={isProcessing}
-                  className="w-full"
-                >
-                  {isProcessing ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      {summaryExists ? 'Loading Summary...' : 'Generating Summary...'}
-                    </>
-                  ) : (
-                    summaryExists ? 'Load Summary' : 'Generate Summary'
-                  )}
-                </Button>
-
-                {summaryData.length > 0 && (
-                  <div className="mt-6">
-                    <h3 className="text-lg font-semibold mb-4">Summary Results</h3>
-                    <div className="overflow-x-auto">
-                      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                        <thead className="bg-gray-50 dark:bg-gray-800">
-                          <tr>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Week</th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">TRR Total</th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">4 Week Avg</th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">TRR + 4Wk</th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Power Adds</th>
-                          </tr>
-                        </thead>
-                        <tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
-                          {summaryData.map((item, index) => (
-                            <tr
-                              key={`${item.id}-${index}`}
-                              className={index % 2 === 0
-                                ? 'bg-white dark:bg-gray-800'
-                                : 'bg-gray-50 dark:bg-gray-700/50'
-                              }
-                            >
-                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.week}</td>
-                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.trrTotal}</td>
-                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.fourWkAverages}</td>
-                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.trrPlus4Wk}</td>
-                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.powerAdds}</td>
+          {currentStep === 2 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Step 2: Create Import Record</CardTitle>
+                <CardDescription>
+                  Creating import record with Cintas Install Calendar layout configuration
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    File: {uploadedFile?.filename}
+                  </p>
+                  <Button
+                    onClick={handleCreateImportRecord}
+                    disabled={isProcessing}
+                    className="w-full"
+                  >
+                    {isProcessing ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Creating Import Record...
+                      </>
+                    ) : (
+                      'Create Import Record'
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {currentStep === 3 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Step 3: Import Data</CardTitle>
+                <CardDescription>
+                  Processing Excel file and importing data into database
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    Import ID: {importRecord?.id}
+                  </p>
+                  <Button
+                    onClick={handleProcessImportData}
+                    disabled={isProcessing}
+                    className="w-full"
+                  >
+                    {isProcessing ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Processing Import...
+                      </>
+                    ) : (
+                      'Process Import'
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {currentStep === 4 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Step 4: Generate Summary</CardTitle>
+                <CardDescription>
+                  Running summary calculations and displaying results
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    Import ID: {importRecord?.id}
+                  </p>
+                  <Button
+                    onClick={handleGenerateSummary}
+                    disabled={isProcessing}
+                    className="w-full"
+                  >
+                    {isProcessing ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        {summaryExists ? 'Loading Summary...' : 'Generating Summary...'}
+                      </>
+                    ) : (
+                      summaryExists ? 'Load Summary' : 'Generate Summary'
+                    )}
+                  </Button>
+
+                  {summaryData.length > 0 && (
+                    <div className="mt-6">
+                      <h3 className="text-lg font-semibold mb-4">Summary Results</h3>
+                      <div className="overflow-x-auto">
+                        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                          <thead className="bg-gray-50 dark:bg-gray-800">
+                            <tr>
+                              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Week</th>
+                              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">TRR Total</th>
+                              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">4 Week Avg</th>
+                              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">TRR + 4Wk</th>
+                              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Power Adds</th>
                             </tr>
-                          ))}
-                        </tbody>
-                      </table>
+                          </thead>
+                          <tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
+                            {summaryData.map((item, index) => (
+                              <tr
+                                key={`${item.id}-${index}`}
+                                className={index % 2 === 0
+                                  ? 'bg-white dark:bg-gray-800'
+                                  : 'bg-gray-50 dark:bg-gray-700/50'
+                                }
+                              >
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.week}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.trrTotal}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.fourWkAverages}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.trrPlus4Wk}</td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{item.powerAdds}</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        )}
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          )}
 
-        {/* Navigation */}
-        <div className="flex justify-between">
-          <Button
-            variant="outline"
-            onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
-            disabled={currentStep === 1}
-          >
-            Previous
-          </Button>
-          <Button
-            onClick={() => setCurrentStep(Math.min(4, currentStep + 1))}
-            disabled={currentStep === 4 || (currentStep === 1 && !uploadedFile)}
-          >
-            {currentStep === 4 ? 'Complete' : 'Next'}
-          </Button>
+          {/* Navigation */}
+          <div className="flex justify-between">
+            <Button
+              variant="outline"
+              onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
+              disabled={currentStep === 1}
+            >
+              Previous
+            </Button>
+            <Button
+              onClick={() => setCurrentStep(Math.min(4, currentStep + 1))}
+              disabled={currentStep === 4 || (currentStep === 1 && !uploadedFile)}
+            >
+              {currentStep === 4 ? 'Complete' : 'Next'}
+            </Button>
+          </div>
         </div>
       </div>
     </div>