From f3927b4686f29bdeb2c66d3bbbf58e2fd3acf8f4 Mon Sep 17 00:00:00 2001
From: laxmanhalaki <laxman.halaki@tech4biz.org>
Date: Tue, 28 Apr 2026 08:17:23 +0530
Subject: [PATCH] progress track isue for interview level 1 fixed

---
 .../ApplicationDetailsExtendedModals.tsx      | 60 ++++++++++---------
 .../hooks/useApplicationDetailsStageData.ts   | 40 +++++--------
 2 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/features/onboarding/components/application-details/ApplicationDetailsExtendedModals.tsx b/src/features/onboarding/components/application-details/ApplicationDetailsExtendedModals.tsx
index 42bf2c3..6b60cef 100644
--- a/src/features/onboarding/components/application-details/ApplicationDetailsExtendedModals.tsx
+++ b/src/features/onboarding/components/application-details/ApplicationDetailsExtendedModals.tsx
@@ -157,10 +157,10 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
                 </div>
               ))}
               <div className="space-y-2 border-t border-border pt-6">
-                <Label htmlFor="kt-matrix-remarks" className="text-sm font-medium">Notes <span className="font-normal text-muted-foreground">(optional)</span></Label>
+                <Label htmlFor="kt-matrix-remarks" className="text-sm font-medium">Remarks <span className="text-red-500">*</span></Label>
                 <Textarea 
                     id="kt-matrix-remarks" 
-                    placeholder="Optional remarks…" 
+                    placeholder="Enter remarks..." 
                     className="min-h-[96px] resize-y text-sm leading-relaxed" 
                     value={ktMatrixRemarks} 
                     onChange={(e) => setKtMatrixRemarks(e.target.value)} 
@@ -186,7 +186,7 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
             <p className="text-sm text-muted-foreground">Weighted total <span className="font-semibold tabular-nums text-foreground" data-testid="onboarding-kt-matrix-total-score">{calculateKTScore()}</span><span className="text-muted-foreground"> / 100</span></p>
             <div className="flex gap-2 sm:shrink-0">
               <Button variant="outline" onClick={() => setShowKTMatrixModal(false)} data-testid="onboarding-kt-matrix-cancel">Cancel</Button>
-              <Button onClick={handleSubmitKTMatrix} disabled={isSubmittingKT || ktCriteria.length === 0 || Object.keys(ktMatrixSelectedValues).length < ktCriteria.length} data-testid="onboarding-kt-matrix-submit">{isSubmittingKT ? 'Saving…' : 'Submit'}</Button>
+              <Button onClick={handleSubmitKTMatrix} disabled={isSubmittingKT || ktCriteria.length === 0 || Object.keys(ktMatrixSelectedValues).length < ktCriteria.length || !ktMatrixRemarks?.trim()} data-testid="onboarding-kt-matrix-submit">{isSubmittingKT ? 'Saving…' : 'Submit'}</Button>
             </div>
           </div>
         </DialogContent>
@@ -208,19 +208,7 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
                 <SelectContent><SelectItem value="10">Outstanding (9-10)</SelectItem><SelectItem value="8">Excellent (7-8)</SelectItem><SelectItem value="6">Good (5-6)</SelectItem><SelectItem value="4">Average (3-4)</SelectItem><SelectItem value="2">Below Average (1-2)</SelectItem></SelectContent>
               </Select>
             </div>
-            <div>
-              <Label>Recommendation <span className="text-red-500">*</span></Label>
-              <Select value={level2Recommendation} onValueChange={setLevel2Recommendation}>
-                <SelectTrigger className="mt-2" data-testid="onboarding-level2-recommendation-select">
-                  <SelectValue placeholder="Select recommendation" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Approve">Approve</SelectItem>
-                  <SelectItem value="Reject">Reject</SelectItem>
-                  <SelectItem value="Hold">Hold</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+
             <Separator />
             {l2Fields.length === 0 && (
               <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
@@ -255,6 +243,19 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
                 )}
               </div>
             ))}
+            <div>
+              <Label>Recommendation <span className="text-red-500">*</span></Label>
+              <Select value={level2Recommendation} onValueChange={setLevel2Recommendation}>
+                <SelectTrigger className="mt-2" data-testid="onboarding-level2-recommendation-select">
+                  <SelectValue placeholder="Select recommendation" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Approve">Approve</SelectItem>
+                  <SelectItem value="Reject">Reject</SelectItem>
+                  <SelectItem value="Hold">Hold</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
             <div className="flex gap-3">
               <Button variant="outline" className="flex-1" onClick={() => setShowLevel2FeedbackModal(false)} data-testid="onboarding-level2-feedback-cancel">Cancel</Button>
               <Button className="flex-1 bg-black hover:bg-zinc-800 text-white" onClick={handleSubmitLevel2Feedback} disabled={isSubmittingLevel2 || l2Fields.length === 0} data-testid="onboarding-level2-feedback-submit">{isSubmittingLevel2 ? 'Submitting...' : 'Submit Feedback'}</Button>
@@ -311,19 +312,7 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
                 <SelectContent><SelectItem value="10">Outstanding (9-10)</SelectItem><SelectItem value="8">Excellent (7-8)</SelectItem><SelectItem value="6">Good (5-6)</SelectItem><SelectItem value="4">Average (3-4)</SelectItem><SelectItem value="2">Below Average (1-2)</SelectItem></SelectContent>
               </Select>
             </div>
-            <div>
-              <Label>Recommendation <span className="text-red-500">*</span></Label>
-              <Select value={level3Recommendation} onValueChange={setLevel3Recommendation}>
-                <SelectTrigger className="mt-2" data-testid="onboarding-level3-recommendation-select">
-                  <SelectValue placeholder="Select recommendation" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Approve">Approve</SelectItem>
-                  <SelectItem value="Reject">Reject</SelectItem>
-                  <SelectItem value="Hold">Hold</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+
             <Separator />
             {l3Fields.length === 0 && (
               <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
@@ -358,6 +347,19 @@ export function ApplicationDetailsExtendedModals(props: ApplicationDetailsExtend
                 )}
               </div>
             ))}
+            <div>
+              <Label>Recommendation <span className="text-red-500">*</span></Label>
+              <Select value={level3Recommendation} onValueChange={setLevel3Recommendation}>
+                <SelectTrigger className="mt-2" data-testid="onboarding-level3-recommendation-select">
+                  <SelectValue placeholder="Select recommendation" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Approve">Approve</SelectItem>
+                  <SelectItem value="Reject">Reject</SelectItem>
+                  <SelectItem value="Hold">Hold</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
             <div className="flex gap-3">
               <Button variant="outline" className="flex-1" onClick={() => setShowLevel3FeedbackModal(false)} data-testid="onboarding-level3-feedback-cancel">Cancel</Button>
               <Button className="flex-1 bg-black hover:bg-zinc-800 text-white" onClick={handleSubmitLevel3Feedback} disabled={isSubmittingLevel3 || l3Fields.length === 0} data-testid="onboarding-level3-feedback-submit">{isSubmittingLevel3 ? 'Submitting...' : 'Submit Feedback'}</Button>
diff --git a/src/features/onboarding/hooks/useApplicationDetailsStageData.ts b/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
index 5de2ff6..032e06a 100644
--- a/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
+++ b/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
@@ -38,33 +38,25 @@ export function useApplicationDetailsStageData({
     return (documents || []).some((d) => d.documentType === docType);
   };
 
-  const isInterviewScheduled = (level: number | string) => {
-    return (interviews || []).some((i) => (i.level === level || i.level === level.toString()) && i.status?.toLowerCase() === 'scheduled');
-  };
-
-  const getStageStatus = (stageName: string, fallbackLogic: () => ProcessStage['status']): ProcessStage['status'] => {
+  const getStageStatus = (stageName: string, fallbackStatus: ProcessStage['status'] = 'pending'): ProcessStage['status'] => {
     const backendStage = (application.progressTracking || []).find((ps: any) => ps.stageName === stageName);
-    if (backendStage && (backendStage.status === 'completed' || backendStage.status === 'active')) {
-      return backendStage.status as any;
-    }
-    return fallbackLogic();
+    return backendStage?.status ? (backendStage.status as any) : fallbackStatus;
   };
 
   const processStages: ProcessStage[] = [
     { id: 1, name: 'Submitted', status: 'completed', date: application.submissionDate, description: 'Application submitted', documentsUploaded: 3 },
     {
-      id: 2, name: 'Questionnaire', status: getStageStatus('Questionnaire', () =>
-        ['Questionnaire Completed', 'Shortlisted', 'Level 1 Interview Pending', 'Level 1 Approved', 'Level 2 Interview Pending', 'Level 2 Approved', 'Level 2 Recommended', 'Level 3 Interview Pending', 'Level 3 Approved', 'FDD Verification', 'LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'Questionnaire Pending' ? 'active' : 'pending'),
+      id: 2, name: 'Questionnaire', status: getStageStatus('Questionnaire'),
       date: application.questionnaireDate, description: 'Questionnaire completed', documentsUploaded: 0
     },
     {
-      id: 3, name: 'Shortlist', status: getStageStatus('Shortlist', () => ['Shortlisted', 'Level 1 Interview Pending', 'Level 1 Approved', 'Level 2 Interview Pending', 'Level 2 Approved', 'Level 2 Recommended', 'Level 3 Interview Pending', 'Level 3 Approved', 'FDD Verification', 'LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Rejected', 'Onboarded'].includes(application.status) ? 'completed' : 'pending'),
+      id: 3, name: 'Shortlist', status: getStageStatus('Shortlist'),
       date: application.shortlistDate, description: 'Application shortlisted by DD',
       evaluators: Array.from(new Set((application.participants || []).filter((p: any) => p.participantType === 'assignee').map((p: any) => `${p.user?.fullName || p.user?.name || 'User'} (${p.user?.roleCode || p.participantType})`))),
       documentsUploaded: 2
     },
     {
-      id: 4, name: '1st Level Interview', status: getStageStatus('1st Level Interview', () => ['Level 1 Approved', 'Level 2 Interview Pending', 'Level 2 Approved', 'Level 2 Recommended', 'Level 3 Interview Pending', 'Level 3 Approved', 'FDD Verification', 'LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : (application.status === 'Level 1 Interview Pending' && isInterviewScheduled(1)) ? 'active' : 'pending'),
+      id: 4, name: '1st Level Interview', status: getStageStatus('1st Level Interview'),
       date: application.level1InterviewDate, description: 'DD-ZM + RBM evaluation',
       evaluators: Array.from(new Set(
         (application.participants || [])
@@ -80,7 +72,7 @@ export function useApplicationDetailsStageData({
       documentsUploaded: 1
     },
     {
-      id: 5, name: '2nd Level Interview', status: getStageStatus('2nd Level Interview', () => ['Level 2 Approved', 'Level 2 Recommended', 'Level 3 Interview Pending', 'Level 3 Approved', 'FDD Verification', 'LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : (application.status === 'Level 2 Interview Pending' && isInterviewScheduled(2)) ? 'active' : 'pending'),
+      id: 5, name: '2nd Level Interview', status: getStageStatus('2nd Level Interview'),
       date: application.level2InterviewDate, description: 'DD Lead + ZBH evaluation',
       evaluators: Array.from(new Set(
         (application.participants || [])
@@ -96,7 +88,7 @@ export function useApplicationDetailsStageData({
       documentsUploaded: 1
     },
     {
-      id: 6, name: '3rd Level Interview', status: getStageStatus('3rd Level Interview', () => ['Level 3 Approved', 'FDD Verification', 'LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : (application.status === 'Level 3 Interview Pending' && isInterviewScheduled(3)) ? 'active' : 'pending'),
+      id: 6, name: '3rd Level Interview', status: getStageStatus('3rd Level Interview'),
       date: application.level3InterviewDate, description: 'NBH + DD Head evaluation',
       evaluators: Array.from(new Set(
         (application.participants || [])
@@ -111,23 +103,23 @@ export function useApplicationDetailsStageData({
       )),
       documentsUploaded: 2
     },
-    { id: 7, name: 'FDD', status: getStageStatus('FDD', () => ['LOI In Progress', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'FDD Verification' ? 'active' : 'pending'), date: application.fddDate, description: 'Financial Due Diligence', documentsUploaded: 5 },
+    { id: 7, name: 'FDD', status: getStageStatus('FDD'), date: application.fddDate, description: 'Financial Due Diligence', documentsUploaded: 5 },
     {
-      id: 8, name: 'LOI Approval', status: getStageStatus('LOI Approval', () => ['Security Details', 'Payment Pending', 'LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'LOI In Progress' ? 'active' : 'pending'),
+      id: 8, name: 'LOI Approval', status: getStageStatus('LOI Approval'),
       date: application.loiApprovalDate, description: 'Letter of Intent approval',
       evaluators: Array.from(new Set((application.participants || []).filter((p: any) => p.metadata?.stageCode === 'LOI_APPROVAL' || p.metadata?.allAssignments?.includes('LOI_APPROVAL')).map(participantLabel))),
       documentsUploaded: 1
     },
     {
-      id: 9, name: 'Security Details', status: getStageStatus('Security Details', () => ['LOI Issued', 'Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'Security Details' || application.status === 'Payment Pending' ? 'active' : 'pending'),
+      id: 9, name: 'Security Details', status: getStageStatus('Security Details'),
       date: application.securityDetailsDate, description: 'Security verification', documentsUploaded: 3
     },
     {
-      id: 10, name: 'LOI Issue', status: getStageStatus('LOI Issue', () => ['Statutory LOI Ack', 'Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'LOI Issued' ? 'active' : 'pending'),
+      id: 10, name: 'LOI Issue', status: getStageStatus('LOI Issue'),
       date: application.loiIssueDate, description: 'Letter of Intent issued', documentsUploaded: 1
     },
     {
-      id: 11, name: 'Dealer Code Generation', status: getStageStatus('Dealer Code Generation', () => (application.dealerCode || ['Dealer Code Generation', 'Architecture Work', 'Statutory Work', 'LOA Pending', 'LOA Issued', 'EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status)) ? 'completed' : 'pending'),
+      id: 11, name: 'Dealer Code Generation', status: getStageStatus('Dealer Code Generation'),
       date: application.dealerCodeDate, description: 'Dealer code generated and assigned', isParallel: true,
       branches: [
         { name: 'Architectural Work', color: 'green', stages: [
@@ -151,15 +143,15 @@ export function useApplicationDetailsStageData({
       ]
     },
     {
-      id: 12, name: 'LOA', status: getStageStatus('LOA', () => ['EOR In Progress', 'EOR Complete', 'Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'LOA Pending' ? 'active' : 'pending'),
+      id: 12, name: 'LOA', status: getStageStatus('LOA'),
       isLocked: application.status === 'LOA Pending' && getDeposit('FIRST_FILL')?.status !== 'Verified',
       lockMessage: 'First Fill (₹15L) must be verified by Finance before LOA Approval.',
       evaluators: Array.from(new Set((application.participants || []).filter((p: any) => p.metadata?.stageCode === 'LOA_APPROVAL' || p.metadata?.allAssignments?.includes('LOA_APPROVAL')).map(participantLabel))),
       description: 'Letter of Authorization'
     },
-    { id: 13, name: 'EOR Complete', status: getStageStatus('EOR Complete', () => ['Inauguration', 'Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'EOR Complete' ? 'active' : 'pending'), description: 'Essential Operating Requirements' },
-    { id: 14, name: 'Inauguration', status: getStageStatus('Inauguration', () => ['Approved', 'Onboarded'].includes(application.status) ? 'completed' : application.status === 'Inauguration' ? 'active' : 'pending'), description: 'Dealership inauguration' },
-    { id: 15, name: 'Dealership Active', status: getStageStatus('Onboarded', () => application.status === 'Onboarded' ? 'completed' : ['Inauguration', 'Approved'].includes(application.status) ? 'active' : 'pending'), description: 'Dealer profile active' },
+    { id: 13, name: 'EOR Complete', status: getStageStatus('EOR Complete'), description: 'Essential Operating Requirements' },
+    { id: 14, name: 'Inauguration', status: getStageStatus('Inauguration'), description: 'Dealership inauguration' },
+    { id: 15, name: 'Dealership Active', status: getStageStatus('Onboarded'), description: 'Dealer profile active' },
   ];
 
   const eorChecklist = [