feat(ui): add new-summary view mode for enhanced cintas calendar workflow

- Introduce 'new-summary' view mode alongside existing modes for improved navigation
- Add proper TypeScript typing for ImportRecord interface with comprehensive mapping
- Update view mode transitions to use new-summary for better user flow
- Enhance import record creation with proper data mapping and type safety
- Refactor conditional rendering to support new view mode across workflow steps

app/cintas-calendar-summary/page.tsx

@@ -45,11 +45,11 @@ interface ImportRecord {
 
 export default function CintasCalendarSummaryPage() {
   const { user } = useKindeBrowserClient();
-  const [viewMode, setViewMode] = useState<'imports' | 'new-import' | 'summary'>('imports');
+  const [viewMode, setViewMode] = useState<'imports' | 'new-import' | 'summary' | 'new-summary'>('imports');
   const [currentStep, setCurrentStep] = useState(1);
   const [uploadedFile, setUploadedFile] = useState<FileData | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [importRecord, setImportRecord] = useState<any>(null);
+  const [importRecord, setImportRecord] = useState<ImportRecord | null>(null);
   const [summaryData, setSummaryData] = useState<CintasSummary[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [summaryExists, setSummaryExists] = useState(false);
@@ -115,8 +115,27 @@ export default function CintasCalendarSummaryPage() {
     try {
       const result = await createCintasImportRecord(uploadedFile.id, uploadedFile.filename);
 
-      if (result.success) {
-        setImportRecord(result.data);
+      if (result.success && result.data) {
+        const importData = result.data;
+
+        // Map the data to match the ImportRecord interface
+        const importRecordData: ImportRecord = {
+          id: importData.id,
+          name: importData.name,
+          importDate: importData.importDate.toISOString(),
+          fileId: importData.fileId,
+          file: importData.fileId ? {
+            filename: uploadedFile.filename,
+            createdAt: importData.createdAt?.toISOString() || new Date().toISOString()
+          } : undefined,
+          layout: {
+            name: importData.layout?.name || 'Cintas Install Calendar'
+          },
+          cintasSummaries: []
+        };
+
+        setImportRecord(importRecordData);
+        setSelectedImport(importRecordData);
         setCurrentStep(3);
       } else {
         setError(result.error || 'Failed to create import record');
@@ -165,7 +184,7 @@ export default function CintasCalendarSummaryPage() {
 
         if (result.data.summaryGenerated || summaries.length > 0) {
           setCurrentStep(4);
-          setViewMode('summary');
+          setViewMode('new-summary');
         }
       } else {
         throw new Error(result.error || 'Failed to generate summary');
@@ -319,7 +338,7 @@ export default function CintasCalendarSummaryPage() {
         )}
 
         {/* New Import Workflow */}
-        {viewMode === 'new-import' && (
+        {(viewMode === 'new-import' || viewMode === 'new-summary') && (
           <div className="space-y-6">
             {/* Workflow Steps */}
             <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
@@ -523,7 +542,7 @@ export default function CintasCalendarSummaryPage() {
         )}
 
         {/* Summary Results View */}
-        {viewMode === 'summary' && selectedImport && (
+        {(viewMode === 'summary' || viewMode === 'new-summary') && selectedImport && (
           <Card>
             <CardHeader>
               <div className="flex justify-between items-start">
@@ -593,4 +612,4 @@ export default function CintasCalendarSummaryPage() {
       </div>
     </div>
   );
-}
+}