feat(ui): add prior imports view and navigation to cintas calendar summary

app/cintas-calendar-summary/page.tsx

@@ -1,12 +1,12 @@
-
 "use client";
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Upload, FileText, Database, BarChart3, CheckCircle, Loader2 } from 'lucide-react';
+import { Upload, FileText, Database, BarChart3, CheckCircle, Loader2, History, PlusCircle } from 'lucide-react';
 import { UploadForm } from '@/app/components/uploadForm';
 import { createCintasImportRecord, processCintasImportData } from '@/app/actions/cintas-workflow';
+import { getImports } from '@/app/actions/imports';
 
 interface FileData {
   id: string;
@@ -27,7 +27,23 @@ interface CintasSummary {
   weekId: number;
 }
 
+interface ImportRecord {
+  id: number;
+  name: string;
+  importDate: string;
+  fileId: string | null;
+  file?: {
+    filename: string;
+    createdAt: string;
+  };
+  layout?: {
+    name: string;
+  };
+  cintasSummaries?: CintasSummary[];
+}
+
 export default function CintasCalendarSummaryPage() {
+  const [viewMode, setViewMode] = useState<'imports' | 'new-import' | 'summary'>('imports');
   const [currentStep, setCurrentStep] = useState(1);
   const [uploadedFile, setUploadedFile] = useState<FileData | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -35,6 +51,43 @@ export default function CintasCalendarSummaryPage() {
   const [summaryData, setSummaryData] = useState<CintasSummary[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [summaryExists, setSummaryExists] = useState(false);
+  const [priorImports, setPriorImports] = useState<ImportRecord[]>([]);
+  const [selectedImport, setSelectedImport] = useState<ImportRecord | null>(null);
+  const [loadingImports, setLoadingImports] = useState(true);
+
+  useEffect(() => {
+    loadPriorImports();
+  }, []);
+
+  const loadPriorImports = async () => {
+    try {
+      setLoadingImports(true);
+      const result = await getImports();
+      if (result.success && result.data) {
+        // Map the data to match our ImportRecord interface
+        const mappedData = result.data.map((item: any) => ({
+          id: item.id,
+          name: item.name,
+          importDate: item.importDate,
+          fileId: item.fileId,
+          file: item.file ? {
+            filename: item.file.filename,
+            createdAt: item.file.createdAt
+          } : undefined,
+          cintasSummaries: item.cintasSummaries || []
+        }));
+        setPriorImports(mappedData);
+      } else {
+        setError(result.error || 'Failed to load prior imports');
+        setPriorImports([]);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load prior imports');
+      setPriorImports([]);
+    } finally {
+      setLoadingImports(false);
+    }
+  };
 
   const handleFileUploaded = (file: FileData) => {
     setUploadedFile(file);
@@ -92,7 +145,6 @@ export default function CintasCalendarSummaryPage() {
     setError(null);
 
     try {
-      // Call the new POST endpoint to generate summary
       const response = await fetch(`/api/imports/${importRecord.id}/summary`, {
         method: 'POST',
         headers: {
@@ -106,9 +158,9 @@ export default function CintasCalendarSummaryPage() {
         setSummaryData(data.summary || []);
         setSummaryExists(true);
 
-        // If summary was just generated, mark as completed
         if (data.summaryGenerated) {
           setCurrentStep(4);
+          setViewMode('summary');
         }
       } else {
         throw new Error(data.error || 'Failed to generate summary');
@@ -120,57 +172,63 @@ export default function CintasCalendarSummaryPage() {
     }
   };
 
-  const steps = [
-    {
-      id: 1,
-      title: 'Upload Excel File',
-      description: 'Upload the Cintas Install Calendar Excel file to blob storage',
-      icon: Upload,
-      status: currentStep >= 1 ? (uploadedFile ? 'completed' : 'pending') : 'pending',
-    },
-    {
-      id: 2,
-      title: 'Create Import Record',
-      description: 'Create an import record with Cintas Install Calendar layout configuration',
-      icon: FileText,
-      status: currentStep >= 2 ? (importRecord ? 'completed' : 'pending') : 'disabled',
-    },
-    {
-      id: 3,
-      title: 'Import Data',
-      description: 'Read the Excel file and import data into PostgreSQL database',
-      icon: Database,
-      status: currentStep > 3 ? 'completed' : (currentStep === 3 ? 'pending' : 'disabled'),
-    },
-    {
-      id: 4,
-      title: 'Generate Summary',
-      description: 'Run summary calculations and display results',
-      icon: BarChart3,
-      status: currentStep >= 4 ? (summaryData.length > 0 ? 'completed' : 'pending') : 'disabled',
-    },
-  ];
-
-  const getStepStatusColor = (status: string) => {
-    switch (status) {
-      case 'completed':
-        return 'text-green-600 bg-green-50 border-green-200';
-      case 'pending':
-        return 'text-blue-600 bg-blue-50 border-blue-200';
-      case 'disabled':
-        return 'text-gray-400 bg-gray-50 border-gray-200';
-      default:
-        return 'text-gray-600 bg-gray-50 border-gray-200';
+  const handleLoadImportSummary = async (importRecord: ImportRecord) => {
+    try {
+      setIsProcessing(true);
+      setError(null);
+
+      const response = await fetch(`/api/imports/${importRecord.id}/summary`);
+      const data = await response.json();
+
+      if (response.ok) {
+        setSelectedImport(importRecord);
+        setSummaryData(data.summary?.cintasSummaries || []);
+        setSummaryExists(data.summaryExists);
+        setViewMode('summary');
+      } else {
+        throw new Error(data.error || 'Failed to load summary');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load summary');
+    } finally {
+      setIsProcessing(false);
     }
   };
 
+  const handleStartNewImport = () => {
+    setViewMode('new-import');
+    setCurrentStep(1);
+    setUploadedFile(null);
+    setImportRecord(null);
+    setSummaryData([]);
+    setSummaryExists(false);
+    setError(null);
+  };
+
+  const handleBackToImports = () => {
+    setViewMode('imports');
+    setSelectedImport(null);
+    setSummaryData([]);
+    loadPriorImports();
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
   return (
     <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
+            View prior imports or create new ones to process installation calendar data
           </p>
         </div>
 
@@ -180,218 +238,353 @@ export default function CintasCalendarSummaryPage() {
           </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>
+        {/* Navigation Buttons */}
+        <div className="mb-6 flex gap-4">
+          <Button
+            variant={viewMode === 'imports' ? 'default' : 'outline'}
+            onClick={handleBackToImports}
+            className="flex items-center gap-2"
+          >
+            <History className="h-4 w-4" />
+            Prior Imports
+          </Button>
+          <Button
+            variant={viewMode === 'new-import' ? 'default' : 'outline'}
+            onClick={handleStartNewImport}
+            className="flex items-center gap-2"
+          >
+            <PlusCircle className="h-4 w-4" />
+            New Import
+          </Button>
         </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>
+        {/* Prior Imports View */}
+        {viewMode === 'imports' && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Prior Imports</CardTitle>
+              <CardDescription>
+                Select an import to view its summary results
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loadingImports ? (
+                <div className="flex justify-center py-8">
+                  <Loader2 className="h-8 w-8 animate-spin" />
+                </div>
+              ) : priorImports.length === 0 ? (
+                <div className="text-center py-8">
+                  <p className="text-muted-foreground mb-4">No prior imports found</p>
+                  <Button onClick={handleStartNewImport}>
+                    Create First Import
+                  </Button>
+                </div>
+              ) : (
                 <div className="space-y-4">
-                  <UploadForm onFileUploaded={handleFileUploaded} />
-
-                  {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" />
+                  {priorImports.map((importRecord) => (
+                    <div
+                      key={importRecord.id}
+                      className="border rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+                      onClick={() => handleLoadImportSummary(importRecord)}
+                    >
+                      <div className="flex justify-between items-start">
                         <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)
+                          <h3 className="font-semibold">{importRecord.name}</h3>
+                          <p className="text-sm text-muted-foreground">
+                            {formatDate(importRecord.importDate)}
                           </p>
+                          {importRecord.file && (
+                            <p className="text-sm text-muted-foreground">
+                              File: {importRecord.file.filename}
+                            </p>
+                          )}
+                        </div>
+                        <div className="text-right">
+                          <span className="text-sm text-muted-foreground">
+                            {importRecord.cintasSummaries?.length || 0} weeks
+                          </span>
                         </div>
                       </div>
                     </div>
-                  )}
+                  ))}
                 </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {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"
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* New Import Workflow */}
+        {viewMode === 'new-import' && (
+          <div className="space-y-6">
+            {/* Workflow Steps */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {[
+                {
+                  id: 1,
+                  title: 'Upload Excel File',
+                  description: 'Upload the Cintas Install Calendar Excel file',
+                  icon: Upload,
+                  status: currentStep >= 1 ? (uploadedFile ? 'completed' : 'pending') : 'pending',
+                },
+                {
+                  id: 2,
+                  title: 'Create Import Record',
+                  description: 'Create import record with layout configuration',
+                  icon: FileText,
+                  status: currentStep >= 2 ? (importRecord ? 'completed' : 'pending') : 'disabled',
+                },
+                {
+                  id: 3,
+                  title: 'Import Data',
+                  description: 'Process Excel file and import data',
+                  icon: Database,
+                  status: currentStep > 3 ? 'completed' : (currentStep === 3 ? 'pending' : 'disabled'),
+                },
+                {
+                  id: 4,
+                  title: 'Generate Summary',
+                  description: 'Run summary calculations and display results',
+                  icon: BarChart3,
+                  status: currentStep >= 4 ? (summaryData.length > 0 ? 'completed' : 'pending') : 'disabled',
+                },
+              ].map((step) => {
+                const Icon = step.icon;
+                const getStatusColor = (status: string) => {
+                  switch (status) {
+                    case 'completed':
+                      return 'text-green-600 bg-green-50 border-green-200';
+                    case 'pending':
+                      return 'text-blue-600 bg-blue-50 border-blue-200';
+                    case 'disabled':
+                      return 'text-gray-400 bg-gray-50 border-gray-200';
+                    default:
+                      return 'text-gray-600 bg-gray-50 border-gray-200';
+                  }
+                };
+
+                return (
+                  <Card
+                    key={step.id}
+                    className={`border-2 ${getStatusColor(step.status)}`}
                   >
-                    {isProcessing ? (
-                      <>
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        Creating Import Record...
-                      </>
-                    ) : (
-                      'Create Import Record'
-                    )}
-                  </Button>
+                    <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>
+
+            {/* Step Content */}
+            <div className="space-y-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">
+                          <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>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {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>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Summary Results View */}
+        {viewMode === 'summary' && selectedImport && (
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle>Summary Results</CardTitle>
+                  <CardDescription>
+                    {selectedImport.name} - {formatDate(selectedImport.importDate)}
+                  </CardDescription>
                 </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>
+                <Button
+                  variant="outline"
+                  onClick={handleBackToImports}
+                  className="flex items-center gap-2"
+                >
+                  <History className="h-4 w-4" />
+                  Back to Imports
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {isProcessing ? (
+                <div className="flex justify-center py-8">
+                  <Loader2 className="h-8 w-8 animate-spin" />
                 </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'
-                    )}
+              ) : summaryData.length === 0 ? (
+                <div className="text-center py-8">
+                  <p className="text-muted-foreground mb-4">No summary data available</p>
+                  <Button onClick={() => handleGenerateSummary()}>
+                    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>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  )}
                 </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>
-          </div>
-        </div>
+              ) : (
+                <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>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
       </div>
     </div>
   );