|
|
@@ -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>
|
