From 3bab9c04815cde398ffa6f3e82ded20d5a487a05 Mon Sep 17 00:00:00 2001
From: laxmanhalaki <laxman.halaki@tech4biz.org>
Date: Thu, 5 Feb 2026 21:06:00 +0530
Subject: [PATCH] ui made stable for the non templatized and changed to support
 postman request submit

---
 src/components/modals/NewRequestModal.tsx     |   64 +-
 .../workflow/CreateRequest/DocumentsStep.tsx  |   81 +-
 .../components/UserAllRequestsFilters.tsx     |    4 +-
 .../DealerUserAllRequestsFilters.tsx          |   12 +-
 .../components/request-detail/WorkflowTab.tsx | 2575 +++++++++--------
 .../hooks/useCreateRequestSubmission.ts       |    2 +
 .../services/createRequestService.ts          |   16 +-
 .../types/createRequest.types.ts              |    2 +
 src/pages/Requests/Requests.tsx               |    4 +-
 src/pages/Requests/hooks/useUserSearch.ts     |    4 +-
 src/services/workflowApi.ts                   |    2 +
 src/utils/requestDetailHelpers.tsx            |    9 +-
 12 files changed, 1423 insertions(+), 1352 deletions(-)

diff --git a/src/components/modals/NewRequestModal.tsx b/src/components/modals/NewRequestModal.tsx
index 6d323b1..3729b20 100644
--- a/src/components/modals/NewRequestModal.tsx
+++ b/src/components/modals/NewRequestModal.tsx
@@ -12,12 +12,12 @@ import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 import { Switch } from '../ui/switch';
 import { Calendar } from '../ui/calendar';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import { 
-  ArrowLeft, 
-  ArrowRight, 
-  Calendar as CalendarIcon, 
-  Upload, 
-  X, 
+import {
+  ArrowLeft,
+  ArrowRight,
+  Calendar as CalendarIcon,
+  Upload,
+  X,
   FileText,
   Check,
   Users
@@ -42,6 +42,7 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
     spectators: [] as any[],
     documents: [] as File[]
   });
+  const [isDragging, setIsDragging] = useState(false);
 
   const totalSteps = 5;
 
@@ -78,9 +79,36 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
     updateFormData('spectators', formData.spectators.filter(s => s.id !== userId));
   };
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-    updateFormData('documents', [...formData.documents, ...files]);
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent) => {
+    let files: File[] = [];
+    if ('target' in event && event.target instanceof HTMLInputElement && event.target.files) {
+      files = Array.from(event.target.files);
+    } else if ('dataTransfer' in event && event.dataTransfer.files) {
+      files = Array.from(event.dataTransfer.files);
+    }
+
+    if (files.length > 0) {
+      updateFormData('documents', [...formData.documents, ...files]);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    handleFileUpload(e);
   };
 
   const removeDocument = (index: number) => {
@@ -150,7 +178,7 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
                 onChange={(e) => updateFormData('title', e.target.value)}
               />
             </div>
-            
+
             <div>
               <Label htmlFor="description">Description *</Label>
               <Textarea
@@ -215,9 +243,9 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
                 <Label htmlFor="workflow-sequential" className="text-sm">Parallel</Label>
               </div>
             </div>
-            
+
             <div className="p-3 bg-muted/50 rounded-lg text-sm text-muted-foreground">
-              {formData.workflowType === 'sequential' 
+              {formData.workflowType === 'sequential'
                 ? 'Approvers will review the request one after another in the order you specify.'
                 : 'All approvers will review the request simultaneously.'
               }
@@ -311,7 +339,7 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
                 </SelectTrigger>
                 <SelectContent>
                   {availableUsers
-                    .filter(user => 
+                    .filter(user =>
                       !formData.spectators.find(s => s.id === user.id) &&
                       !formData.approvers.find(a => a.id === user.id)
                     )
@@ -375,8 +403,14 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
               <p className="text-sm text-muted-foreground mb-2">
                 Attach supporting documents for your request. Maximum 10MB per file.
               </p>
-              <div className="border-2 border-dashed border-border rounded-lg p-6 text-center">
-                <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+              <div
+                className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${isDragging ? 'border-re-green bg-re-green/5' : 'border-border'
+                  }`}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <Upload className={`h-8 w-8 mx-auto mb-2 ${isDragging ? 'text-re-green' : 'text-muted-foreground'}`} />
                 <p className="text-sm text-muted-foreground mb-2">
                   Drag and drop files here, or click to browse
                 </p>
diff --git a/src/components/workflow/CreateRequest/DocumentsStep.tsx b/src/components/workflow/CreateRequest/DocumentsStep.tsx
index 27bb122..6e2f497 100644
--- a/src/components/workflow/CreateRequest/DocumentsStep.tsx
+++ b/src/components/workflow/CreateRequest/DocumentsStep.tsx
@@ -1,3 +1,4 @@
+import { useState, ChangeEvent, DragEvent, RefObject } from 'react';
 import { motion } from 'framer-motion';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -20,7 +21,7 @@ interface DocumentsStepProps {
   onDocumentsToDeleteChange: (ids: string[]) => void;
   onPreviewDocument: (doc: any, isExisting: boolean) => void;
   onDocumentErrors?: (errors: Array<{ fileName: string; reason: string }>) => void;
-  fileInputRef: React.RefObject<HTMLInputElement>;
+  fileInputRef: RefObject<HTMLInputElement>;
 }
 
 /**
@@ -47,8 +48,9 @@ export function DocumentsStep({
   onDocumentErrors,
   fileInputRef
 }: DocumentsStepProps) {
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const processFiles = (files: File[]) => {
     if (files.length === 0) return;
 
     // Validate files
@@ -69,7 +71,7 @@ export function DocumentsStep({
       // Check file extension
       const fileName = file.name.toLowerCase();
       const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
-      
+
       if (!documentPolicy.allowedFileTypes.includes(fileExtension)) {
         validationErrors.push({
           fileName: file.name,
@@ -90,6 +92,11 @@ export function DocumentsStep({
     if (validationErrors.length > 0 && onDocumentErrors) {
       onDocumentErrors(validationErrors);
     }
+  };
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    processFiles(files);
 
     // Reset file input
     if (event.target) {
@@ -97,6 +104,27 @@ export function DocumentsStep({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    processFiles(files);
+  };
+
   const handleRemove = (index: number) => {
     const newDocs = documents.filter((_, i) => i !== index);
     onDocumentsChange(newDocs);
@@ -111,16 +139,16 @@ export function DocumentsStep({
       const type = (doc.fileType || doc.file_type || '').toLowerCase();
       const name = (doc.originalFileName || doc.fileName || '').toLowerCase();
       return type.includes('image') || type.includes('pdf') ||
-             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
-             name.endsWith('.png') || name.endsWith('.gif') ||
-             name.endsWith('.pdf');
+        name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+        name.endsWith('.png') || name.endsWith('.gif') ||
+        name.endsWith('.pdf');
     } else {
       const type = (doc.type || '').toLowerCase();
       const name = (doc.name || '').toLowerCase();
       return type.includes('image') || type.includes('pdf') ||
-             name.endsWith('.jpg') || name.endsWith('.jpeg') ||
-             name.endsWith('.png') || name.endsWith('.gif') ||
-             name.endsWith('.pdf');
+        name.endsWith('.jpg') || name.endsWith('.jpeg') ||
+        name.endsWith('.png') || name.endsWith('.gif') ||
+        name.endsWith('.pdf');
     }
   };
 
@@ -156,8 +184,15 @@ export function DocumentsStep({
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors" data-testid="documents-upload-area">
-              <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
+            <div
+              className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${isDragging ? 'border-re-green bg-re-green/5' : 'border-gray-300 hover:border-gray-400'
+                }`}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              data-testid="documents-upload-area"
+            >
+              <Upload className={`h-12 w-12 mx-auto mb-4 ${isDragging ? 'text-re-green' : 'text-gray-400'}`} />
               <h3 className="text-lg font-semibold text-gray-900 mb-2">Upload Files</h3>
               <p className="text-gray-600 mb-4">
                 Drag and drop files here, or click to browse
@@ -172,10 +207,10 @@ export function DocumentsStep({
                 ref={fileInputRef}
                 data-testid="documents-file-input"
               />
-              <Button 
-                variant="outline" 
-                size="lg" 
-                type="button" 
+              <Button
+                variant="outline"
+                size="lg"
+                type="button"
                 onClick={() => fileInputRef.current?.click()}
                 data-testid="documents-browse-button"
               >
@@ -206,7 +241,7 @@ export function DocumentsStep({
                   const docId = doc.documentId || doc.document_id || '';
                   const isDeleted = documentsToDelete.includes(docId);
                   if (isDeleted) return null;
-                  
+
                   return (
                     <div key={docId} className="flex items-center justify-between p-4 rounded-lg border bg-gray-50" data-testid={`documents-existing-${docId}`}>
                       <div className="flex items-center gap-3">
@@ -222,9 +257,9 @@ export function DocumentsStep({
                       </div>
                       <div className="flex items-center gap-2">
                         {canPreview(doc, true) && (
-                          <Button 
-                            variant="ghost" 
-                            size="sm" 
+                          <Button
+                            variant="ghost"
+                            size="sm"
                             onClick={() => onPreviewDocument(doc, true)}
                             data-testid={`documents-existing-${docId}-preview`}
                           >
@@ -276,9 +311,9 @@ export function DocumentsStep({
                     </div>
                     <div className="flex items-center gap-2">
                       {canPreview(file, false) && (
-                        <Button 
-                          variant="ghost" 
-                          size="sm" 
+                        <Button
+                          variant="ghost"
+                          size="sm"
                           onClick={() => onPreviewDocument(file, false)}
                           data-testid={`documents-new-${index}-preview`}
                         >
diff --git a/src/custom/components/UserAllRequestsFilters.tsx b/src/custom/components/UserAllRequestsFilters.tsx
index 0199eff..a20d7ad 100644
--- a/src/custom/components/UserAllRequestsFilters.tsx
+++ b/src/custom/components/UserAllRequestsFilters.tsx
@@ -255,7 +255,7 @@ export function StandardUserAllRequestsFilters({
                 ) : (
                   <>
                     <Input
-                      placeholder="Search initiator..."
+                      placeholder="Use @ to search initiator..."
                       value={initiatorSearch.searchQuery}
                       onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
                       onFocus={() => {
@@ -325,7 +325,7 @@ export function StandardUserAllRequestsFilters({
                 ) : (
                   <>
                     <Input
-                      placeholder="Search approver..."
+                      placeholder="Use @ to search approver..."
                       value={approverSearch.searchQuery}
                       onChange={(e) => approverSearch.handleSearch(e.target.value)}
                       onFocus={() => {
diff --git a/src/dealer-claim/components/DealerUserAllRequestsFilters.tsx b/src/dealer-claim/components/DealerUserAllRequestsFilters.tsx
index 134383a..90afbc2 100644
--- a/src/dealer-claim/components/DealerUserAllRequestsFilters.tsx
+++ b/src/dealer-claim/components/DealerUserAllRequestsFilters.tsx
@@ -34,7 +34,7 @@ interface DealerUserAllRequestsFiltersProps {
   customStartDate?: Date;
   customEndDate?: Date;
   showCustomDatePicker: boolean;
-  
+
   // State for user search
   initiatorSearch: {
     selectedUser: { userId: string; email: string; displayName?: string } | null;
@@ -46,7 +46,7 @@ interface DealerUserAllRequestsFiltersProps {
     handleClear: () => void;
     setShowResults: (show: boolean) => void;
   };
-  
+
   approverSearch: {
     selectedUser: { userId: string; email: string; displayName?: string } | null;
     searchQuery: string;
@@ -57,7 +57,7 @@ interface DealerUserAllRequestsFiltersProps {
     handleClear: () => void;
     setShowResults: (show: boolean) => void;
   };
-  
+
   // Actions
   onSearchChange: (value: string) => void;
   onStatusChange: (value: string) => void;
@@ -70,7 +70,7 @@ interface DealerUserAllRequestsFiltersProps {
   onShowCustomDatePickerChange?: (show: boolean) => void;
   onApplyCustomDate?: () => void;
   onClearFilters: () => void;
-  
+
   // Computed
   hasActiveFilters: boolean;
 }
@@ -172,7 +172,7 @@ export function DealerUserAllRequestsFilters({
                 ) : (
                   <>
                     <Input
-                      placeholder="Search initiator..."
+                      placeholder="Use @ to search initiator..."
                       value={initiatorSearch.searchQuery}
                       onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
                       onFocus={() => {
@@ -242,7 +242,7 @@ export function DealerUserAllRequestsFilters({
                 ) : (
                   <>
                     <Input
-                      placeholder="Search approver..."
+                      placeholder="Use @ to search approver..."
                       value={approverSearch.searchQuery}
                       onChange={(e) => approverSearch.handleSearch(e.target.value)}
                       onFocus={() => {
diff --git a/src/dealer-claim/components/request-detail/WorkflowTab.tsx b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
index 4f16a3d..ffe8eb9 100644
--- a/src/dealer-claim/components/request-detail/WorkflowTab.tsx
+++ b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
@@ -13,7 +13,7 @@ import { Progress } from '@/components/ui/progress';
 import { TrendingUp, Clock, CheckCircle, CircleCheckBig, Upload, Mail, Download, Receipt, Activity, AlertTriangle, AlertOctagon, XCircle, History, ChevronDown, ChevronUp, RefreshCw, RotateCw, Eye } from 'lucide-react';
 import { formatDateTime, formatDateDDMMYYYY } from '@/utils/dateFormatter';
 import { formatHoursMinutes } from '@/utils/slaTracker';
-import { 
+import {
   AdditionalApproverReviewModal,
   DealerProposalSubmissionModal,
   InitiatorProposalApprovalModal,
@@ -107,6 +107,8 @@ const getStepIcon = (status: string) => {
   switch (status) {
     case 'approved':
       return <CircleCheckBig className="w-5 h-5 text-green-600" />;
+    case 'in_progress':
+      return <RotateCw className="w-5 h-5 text-purple-600 animate-spin-slow" />;
     case 'pending':
       return <Clock className="w-5 h-5 text-blue-600" />;
     case 'rejected':
@@ -123,6 +125,8 @@ const getStepBadgeVariant = (status: string) => {
   switch (status) {
     case 'approved':
       return 'bg-green-100 text-green-800 border-green-200';
+    case 'in_progress':
+      return 'bg-blue-100 text-blue-800 border-blue-200';
     case 'pending':
       return 'bg-purple-100 text-purple-800 border-purple-200';
     case 'rejected':
@@ -155,6 +159,8 @@ const getStepIconBg = (status: string) => {
   switch (status) {
     case 'approved':
       return 'bg-green-100';
+    case 'in_progress':
+      return 'bg-blue-100';
     case 'pending':
       return 'bg-purple-100';
     case 'rejected':
@@ -164,11 +170,11 @@ const getStepIconBg = (status: string) => {
   }
 };
 
-export function DealerClaimWorkflowTab({ 
-  request, 
-  user, 
-  isInitiator, 
-  onSkipApprover: _onSkipApprover, 
+export function DealerClaimWorkflowTab({
+  request,
+  user,
+  isInitiator,
+  onSkipApprover: _onSkipApprover,
   onRefresh,
   documentPolicy
 }: DealerClaimWorkflowTabProps) {
@@ -186,12 +192,12 @@ export function DealerClaimWorkflowTab({
   const [versionHistory, setVersionHistory] = useState<any[]>([]);
   const [showHistory, setShowHistory] = useState(false);
   const [expandedVersionSteps, setExpandedVersionSteps] = useState<Set<number>>(new Set());
-  const [viewSnapshot, setViewSnapshot] = useState<{data: any, type: 'PROPOSAL' | 'COMPLETION', title?: string} | null>(null);
-  
+  const [viewSnapshot, setViewSnapshot] = useState<{ data: any, type: 'PROPOSAL' | 'COMPLETION', title?: string } | null>(null);
+
   // Load approval flows from real API
   const [approvalFlow, setApprovalFlow] = useState<any[]>([]);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
-  
+
   // Reload approval flows whenever request changes or after refresh
   // Always fetch from API to ensure fresh data (don't rely on cached request.approvalFlow)
   // Also watch for changes in totalLevels to detect when approvers are added
@@ -222,7 +228,7 @@ export function DealerClaimWorkflowTab({
               }))
               // Sort by levelNumber to ensure correct order (critical for proper display)
               .sort((a: any, b: any) => (a.levelNumber || 0) - (b.levelNumber || 0));
-            
+
             // Only update if the data actually changed (avoid unnecessary re-renders)
             setApprovalFlow(prevFlows => {
               // Check if flows are different
@@ -233,11 +239,11 @@ export function DealerClaimWorkflowTab({
               // Status change is critical - when an approval happens, status changes from 'in_progress' to 'approved'
               const hasChanges = prevFlows.some((prev: any, idx: number) => {
                 const curr = flows[idx];
-                return !curr || 
-                       prev.levelNumber !== curr.levelNumber ||
-                       prev.levelName !== curr.levelName ||
-                       prev.approverEmail !== curr.approverEmail ||
-                       prev.status !== curr.status; // Check status change
+                return !curr ||
+                  prev.levelNumber !== curr.levelNumber ||
+                  prev.levelName !== curr.levelName ||
+                  prev.approverEmail !== curr.approverEmail ||
+                  prev.status !== curr.status; // Check status change
               });
               return hasChanges ? flows : prevFlows;
             });
@@ -260,7 +266,7 @@ export function DealerClaimWorkflowTab({
 
     loadApprovalFlows();
   }, [request?.id, request?.requestId, request?.totalLevels, refreshTrigger]);
-  
+
   // Also reload when request.currentStep or totalLevels changes (to catch step transitions and new approvers)
   useEffect(() => {
     if (request?.id || request?.requestId) {
@@ -286,7 +292,7 @@ export function DealerClaimWorkflowTab({
               }))
               // Sort by levelNumber to ensure correct order
               .sort((a: any, b: any) => (a.levelNumber || 0) - (b.levelNumber || 0));
-            
+
             // Update state with new flows
             setApprovalFlow(flows);
           }
@@ -297,7 +303,7 @@ export function DealerClaimWorkflowTab({
       loadApprovalFlows();
     }
   }, [request?.currentStep, request?.totalLevels]);
-  
+
   // Enhanced refresh handler that also reloads approval flows
   const handleRefresh = async () => {
     setRefreshTrigger(prev => prev + 1);
@@ -325,7 +331,7 @@ export function DealerClaimWorkflowTab({
   useEffect(() => {
     loadVersionHistory();
   }, [request?.id, request?.requestId, refreshTrigger]);
-  
+
   // Step title and description mapping based on actual step number (not array index)
   // This handles cases where approvers are added between steps
   const getStepTitle = (stepNumber: number, levelName?: string, approverName?: string): string => {
@@ -339,7 +345,7 @@ export function DealerClaimWorkflowTab({
       // Otherwise use the levelName from backend (preserved from original step)
       return levelName;
     }
-    
+
     // Fallback to mapping based on step number
     const stepTitleMap: Record<number, string> = {
       1: 'Dealer - Proposal Submission',
@@ -351,24 +357,24 @@ export function DealerClaimWorkflowTab({
       7: 'E-Invoice Generation',
       8: 'Credit Note from SAP',
     };
-    
+
     // If step number exists in map, use it
     if (stepTitleMap[stepNumber]) {
       return stepTitleMap[stepNumber];
     }
-    
+
     // For dynamically added steps, create a title from approver name or generic
     if (approverName && approverName !== 'Unknown' && approverName !== 'System') {
       return `Additional Approver - ${approverName}`;
     }
-    
+
     return `Additional Approver - Step ${stepNumber}`;
   };
 
   const getStepDescription = (stepNumber: number, levelName?: string, approverName?: string): string => {
     // Check if this is an "Additional Approver" (dynamically added)
     const isAdditionalApprover = levelName && levelName.toLowerCase().includes('additional approver');
-    
+
     // If this is an additional approver, use generic description
     if (isAdditionalApprover) {
       if (approverName && approverName !== 'Unknown' && approverName !== 'System') {
@@ -376,12 +382,12 @@ export function DealerClaimWorkflowTab({
       }
       return `Additional approver will review and approve this request.`;
     }
-    
+
     // Use levelName to determine description (handles shifted steps correctly)
     // This ensures descriptions shift with their steps when approvers are added
     if (levelName && levelName.trim()) {
       const levelNameLower = levelName.toLowerCase();
-      
+
       // Map level names to descriptions (works even after shifting)
       if (levelNameLower.includes('dealer') && levelNameLower.includes('proposal')) {
         return 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests';
@@ -408,7 +414,7 @@ export function DealerClaimWorkflowTab({
         return 'Got credit note from SAP. Review and send to dealer to complete the claim management process.';
       }
     }
-    
+
     // Fallback to step number mapping (for backwards compatibility)
     const stepDescriptionMap: Record<number, string> = {
       1: 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
@@ -420,16 +426,16 @@ export function DealerClaimWorkflowTab({
       7: 'E-invoice will be generated through DMS.',
       8: 'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
     };
-    
+
     if (stepDescriptionMap[stepNumber]) {
       return stepDescriptionMap[stepNumber];
     }
-    
+
     // Final fallback
     if (approverName && approverName !== 'Unknown' && approverName !== 'System') {
       return `${approverName} will review and approve this request.`;
     }
-    
+
     return `Step ${stepNumber} approval required.`;
   };
 
@@ -437,7 +443,7 @@ export function DealerClaimWorkflowTab({
   // Uses levelName to match history (consistent and doesn't change with step shifts or additional approvers)
   const getStepVersionHistory = (levelName: string) => {
     if (!versionHistory || versionHistory.length === 0 || !levelName) return { current: null, previous: null };
-    
+
     // Filter history by levelName (most reliable and consistent)
     // Level names are consistent: "Dealer Proposal Submission", "Department Lead Approval", etc.
     // Additional approvers have unique names like "Additional Approver - John Doe"
@@ -446,15 +452,15 @@ export function DealerClaimWorkflowTab({
       if (history.levelName && history.levelName.trim() === levelName.trim()) {
         return true; // Include all snapshot types for this level
       }
-      
+
       // Fallback: match by levelName from snapshotData (for approval snapshots)
       if (history.snapshotData?.levelName && history.snapshotData.levelName.trim() === levelName.trim()) {
         return true;
       }
-      
+
       return false;
     });
-    
+
     // Sort by version descending to get most recent first
     // Prioritize APPROVE snapshots over WORKFLOW snapshots for the same version
     // This ensures approval comments are shown instead of just workflow movement
@@ -468,14 +474,14 @@ export function DealerClaimWorkflowTab({
       const bPriority = b.snapshotType === 'APPROVE' ? 1 : b.snapshotType === 'PROPOSAL' ? 2 : b.snapshotType === 'COMPLETION' ? 2 : 3;
       return aPriority - bPriority;
     });
-    
+
     // Filter out WORKFLOW snapshots if there's an APPROVE snapshot for the same level
     // This ensures we show APPROVE snapshots (with comments) instead of WORKFLOW snapshots
     const filteredVersions = sortedVersions.filter((version, _index, arr) => {
       // If this is a WORKFLOW snapshot, check if there's an APPROVE snapshot with same or higher version
       if (version.snapshotType === 'WORKFLOW') {
-        const hasApproveSnapshot = arr.some(v => 
-          v.snapshotType === 'APPROVE' && 
+        const hasApproveSnapshot = arr.some(v =>
+          v.snapshotType === 'APPROVE' &&
           v.levelName === version.levelName &&
           v.version >= version.version
         );
@@ -485,44 +491,44 @@ export function DealerClaimWorkflowTab({
       // Keep all non-WORKFLOW snapshots
       return true;
     });
-    
+
     const current = filteredVersions.length > 0 ? filteredVersions[0] : null;
     const previous = filteredVersions.length > 1 ? filteredVersions[1] : null;
-    
+
     return { current, previous, all: filteredVersions };
   };
-  
+
 
   // Get backend currentLevel to determine which steps are active vs waiting
   // This needs to be calculated before mapping steps so we can use it in status normalization
   // Convert to number to ensure proper comparison
   const backendCurrentLevel = request?.currentLevel || request?.current_level || request?.currentStep;
-  const currentLevelNumber = backendCurrentLevel !== undefined && backendCurrentLevel !== null 
-    ? Number(backendCurrentLevel) 
+  const currentLevelNumber = backendCurrentLevel !== undefined && backendCurrentLevel !== null
+    ? Number(backendCurrentLevel)
     : null;
-  
+
   // Check request status - if rejected or closed, no steps should be active
   const requestStatus = (request?.status || '').toUpperCase();
   const isRequestRejected = requestStatus === 'REJECTED';
   const isRequestClosed = requestStatus === 'CLOSED';
-  const isRequestActive = !isRequestRejected && !isRequestClosed && 
+  const isRequestActive = !isRequestRejected && !isRequestClosed &&
     (requestStatus === 'PENDING' || requestStatus === 'IN_PROGRESS' || requestStatus === 'IN-PROGRESS');
-  
+
   // Find the rejected step level (if any) - all steps after rejection should be inactive
   const rejectedStepLevel = approvalFlow.find((level: any) => {
     const levelId = level.levelId || level.level_id;
     const approval = request?.approvals?.find((a: any) => a.levelId === levelId);
     return approval?.status?.toLowerCase() === 'rejected';
   });
-  const rejectedStepNumber = rejectedStepLevel 
+  const rejectedStepNumber = rejectedStepLevel
     ? Number(rejectedStepLevel.levelNumber || rejectedStepLevel.level_number || rejectedStepLevel.step || 0)
     : null;
-  
+
   // Transform approval flow to dealer claim workflow steps
   const workflowSteps: WorkflowStep[] = approvalFlow.map((step: any, index: number) => {
     // Get actual step number from levelNumber or step field - ensure it's a number
     const actualStepNumber = Number(step.levelNumber || step.level_number || step.step || index + 1);
-    
+
     // Get levelName from the approval level if available
     const levelName = step.levelName || step.level_name;
 
@@ -535,20 +541,20 @@ export function DealerClaimWorkflowTab({
     if (isDeptLeadStep || actualStepNumber === 3) {
       // Get IO details from dedicated internalOrder table
       const internalOrder = request?.internalOrder || request?.internal_order;
-      
+
       if (internalOrder?.ioNumber || internalOrder?.io_number) {
         ioDetails = {
           ioNumber: internalOrder.ioNumber || internalOrder.io_number || '',
           blockedAmount: internalOrder.ioBlockedAmount || internalOrder.io_blocked_amount || 0,
           availableBalance: internalOrder.ioAvailableBalance || internalOrder.io_available_balance || 0,
           remainingBalance: internalOrder.ioRemainingBalance || internalOrder.io_remaining_balance || 0,
-          organizedBy: 
+          organizedBy:
             internalOrder.organizer?.displayName ||
             internalOrder.organizer?.name ||
             internalOrder.organizedBy ||
             step.approver ||
             'N/A',
-          organizedAt: 
+          organizedAt:
             internalOrder.organizedAt ||
             internalOrder.organized_at ||
             step.approvedAt ||
@@ -582,13 +588,13 @@ export function DealerClaimWorkflowTab({
     // Normalize status - CRITICAL: Check request status first, then step position
     // If request is rejected/closed, no steps should be active after rejection point
     let normalizedStatus: string;
-    
+
     // FIRST: Check if request is rejected/closed - if so, handle accordingly
     if (isRequestRejected || isRequestClosed) {
       // If this step was rejected, mark it as rejected
       if (approval?.status?.toLowerCase() === 'rejected') {
         normalizedStatus = 'rejected';
-      } 
+      }
       // If there's a rejected step and this step comes after it, mark as waiting (inactive)
       else if (rejectedStepNumber !== null && actualStepNumber > rejectedStepNumber) {
         normalizedStatus = 'waiting';
@@ -658,7 +664,7 @@ export function DealerClaimWorkflowTab({
           }
         }
       }
-    } 
+    }
     // THIRD: No backend currentLevel or request status unclear - use approval status
     else {
       if (approval?.status) {
@@ -687,20 +693,20 @@ export function DealerClaimWorkflowTab({
     // Waiting steps (future steps) should have elapsedHours = 0
     // This ensures that when in step 1, only step 1 shows elapsed time, others show 0
     const isWaiting = normalizedStatus === 'waiting';
-    
+
     // Only calculate/show elapsed hours for active or completed steps
     // For waiting steps, elapsedHours should be 0 (they haven't started yet)
     const elapsedHours = isWaiting ? 0 : (step.elapsedHours || 0);
 
     const approverName = step.approver || step.approverName || 'Unknown';
-    
+
     // Get levelName for this step (consistent identifier, doesn't change with step shifts)
     // Level names are consistent: "Dealer Proposal Submission", "Department Lead Approval", etc.
     // Additional approvers have unique names like "Additional Approver - John Doe"
-    
+
     // Get version history for this step using levelName (consistent and reliable)
     const stepVersionHistory = levelName ? getStepVersionHistory(levelName) : { current: null, previous: null };
-    
+
     return {
       step: actualStepNumber,
       title: getStepTitle(actualStepNumber, levelName, approverName),
@@ -718,17 +724,17 @@ export function DealerClaimWorkflowTab({
       versionHistory: stepVersionHistory, // Add version history to step
     };
   });
-  
+
   // Calculate currentStep from approval flow - find the first pending or in_progress step
   // IMPORTANT: Use the workflow's currentLevel from backend (most accurate)
   // Fallback to finding first pending step if currentLevel not available
   // Note: Status normalization already handled in workflowSteps mapping above
   // backendCurrentLevel is already calculated above before the map function
-  
+
   // CRITICAL: If request is rejected or closed, no step should be active
   let activeStep = null;
   let currentStep = 1;
-  
+
   if (isRequestRejected || isRequestClosed) {
     // Request is rejected/closed - no active step
     // Find the rejected step to show as the "current" step for display purposes
@@ -742,30 +748,30 @@ export function DealerClaimWorkflowTab({
   } else if (isRequestActive) {
     // Request is active - find the active step
     // Find the step that matches backend's currentLevel
-    const activeStepFromBackend = currentLevelNumber !== null 
+    const activeStepFromBackend = currentLevelNumber !== null
       ? workflowSteps.find(s => s.step === currentLevelNumber)
       : null;
-    
+
     // If backend currentLevel exists and step is pending/in_progress, use it
     // Otherwise, find first pending/in_progress step
-    activeStep = activeStepFromBackend && 
-                       (activeStepFromBackend.status === 'pending' || activeStepFromBackend.status === 'in_progress')
+    activeStep = activeStepFromBackend &&
+      (activeStepFromBackend.status === 'pending' || activeStepFromBackend.status === 'in_progress')
       ? activeStepFromBackend
       : workflowSteps.find(s => {
-          const status = s.status?.toLowerCase() || '';
-          return status === 'pending' || status === 'in_progress' || status === 'in-review' || status === 'in_review';
-        });
-    
+        const status = s.status?.toLowerCase() || '';
+        return status === 'pending' || status === 'in_progress' || status === 'in-review' || status === 'in_review';
+      });
+
     currentStep = activeStep ? activeStep.step : (currentLevelNumber || request?.currentStep || 1);
   } else {
     // Request status unclear - use backend currentLevel or default
     currentStep = currentLevelNumber || request?.currentStep || 1;
   }
-  
+
   // Check if current user is the dealer (for steps 1 and 5)
   const userEmail = (user as any)?.email?.toLowerCase() || '';
   const dealerEmail = (
-    (request as any)?.dealerEmail?.toLowerCase() || 
+    (request as any)?.dealerEmail?.toLowerCase() ||
     (request as any)?.dealer?.email?.toLowerCase() ||
     (request as any)?.claimDetails?.dealerEmail?.toLowerCase() ||
     (request as any)?.claimDetails?.dealer_email?.toLowerCase() ||
@@ -774,7 +780,7 @@ export function DealerClaimWorkflowTab({
   const isDealer = dealerEmail && userEmail === dealerEmail;
 
   // Check if current user is the approver for the current step
-  const currentApprovalLevel = approvalFlow.find((level: any) => 
+  const currentApprovalLevel = approvalFlow.find((level: any) =>
     (level.step || level.levelNumber || level.level_number) === currentStep
   );
   const approverEmail = (currentApprovalLevel?.approverEmail || '').toLowerCase();
@@ -787,21 +793,21 @@ export function DealerClaimWorkflowTab({
     (request as any)?.initiatorEmail?.toLowerCase() ||
     ''
   );
-  
+
   // Find the step where the initiator is the approver
   // Check by: 1) approverEmail matches initiatorEmail, OR 2) levelName contains "Requestor Evaluation"
   const initiatorStepLevel = approvalFlow.find((l: any) => {
     const levelApproverEmail = (l.approverEmail || '').toLowerCase();
     const levelName = (l.levelName || '').toLowerCase();
     return (initiatorEmail && levelApproverEmail === initiatorEmail) ||
-           levelName.includes('requestor evaluation') ||
-           levelName.includes('requestor') && levelName.includes('confirmation');
+      levelName.includes('requestor evaluation') ||
+      levelName.includes('requestor') && levelName.includes('confirmation');
   });
-  
-  const initiatorStepNumber = initiatorStepLevel 
+
+  const initiatorStepNumber = initiatorStepLevel
     ? (initiatorStepLevel.step || initiatorStepLevel.levelNumber || initiatorStepLevel.level_number || 2)
     : 2; // Fallback to 2 if not found
-  
+
   // Check if user is approver for the initiator's step (requestor evaluation)
   const step2Level = initiatorStepLevel || approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 2);
   const step2ApproverEmail = (step2Level?.approverEmail || '').toLowerCase();
@@ -881,26 +887,26 @@ export function DealerClaimWorkflowTab({
       // Get approval levels to find the initiator's step levelId dynamically
       const details = await getWorkflowDetails(requestId);
       const approvals = details?.approvalLevels || details?.approvals || [];
-      
+
       // Find the initiator's step by checking approverEmail or levelName
       const initiatorEmail = (
         (request as any)?.initiator?.email?.toLowerCase() ||
         (request as any)?.initiatorEmail?.toLowerCase() ||
         ''
       );
-      
+
       const step2Level = approvals.find((level: any) => {
         const levelApproverEmail = (level.approverEmail || level.approver_email || '').toLowerCase();
         const levelName = (level.levelName || level.level_name || '').toLowerCase();
         const levelNumber = level.levelNumber || level.level_number;
-        
+
         // Check if this is the initiator's step
         return (initiatorEmail && levelApproverEmail === initiatorEmail) ||
-               levelName.includes('requestor evaluation') ||
-               (levelName.includes('requestor') && levelName.includes('confirmation')) ||
-               // Fallback: if initiatorStepNumber was found earlier, use it
-               (levelNumber === initiatorStepNumber);
-      }) || approvals.find((level: any) => 
+          levelName.includes('requestor evaluation') ||
+          (levelName.includes('requestor') && levelName.includes('confirmation')) ||
+          // Fallback: if initiatorStepNumber was found earlier, use it
+          (levelNumber === initiatorStepNumber);
+      }) || approvals.find((level: any) =>
         (level.levelNumber || level.level_number) === 2
       ); // Final fallback to level 2
 
@@ -936,26 +942,26 @@ export function DealerClaimWorkflowTab({
       // Get approval levels to find the initiator's step levelId dynamically
       const details = await getWorkflowDetails(requestId);
       const approvals = details?.approvalLevels || details?.approvals || [];
-      
+
       // Find the initiator's step by checking approverEmail or levelName
       const initiatorEmail = (
         (request as any)?.initiator?.email?.toLowerCase() ||
         (request as any)?.initiatorEmail?.toLowerCase() ||
         ''
       );
-      
+
       const step2Level = approvals.find((level: any) => {
         const levelApproverEmail = (level.approverEmail || level.approver_email || '').toLowerCase();
         const levelName = (level.levelName || level.level_name || '').toLowerCase();
         const levelNumber = level.levelNumber || level.level_number;
-        
+
         // Check if this is the initiator's step
         return (initiatorEmail && levelApproverEmail === initiatorEmail) ||
-               levelName.includes('requestor evaluation') ||
-               (levelName.includes('requestor') && levelName.includes('confirmation')) ||
-               // Fallback: if initiatorStepNumber was found earlier, use it
-               (levelNumber === initiatorStepNumber);
-      }) || approvals.find((level: any) => 
+          levelName.includes('requestor evaluation') ||
+          (levelName.includes('requestor') && levelName.includes('confirmation')) ||
+          // Fallback: if initiatorStepNumber was found earlier, use it
+          (levelNumber === initiatorStepNumber);
+      }) || approvals.find((level: any) =>
         (level.levelNumber || level.level_number) === 2
       ); // Final fallback to level 2
 
@@ -991,26 +997,26 @@ export function DealerClaimWorkflowTab({
       // Get approval levels to find the initiator's step levelId dynamically
       const details = await getWorkflowDetails(requestId);
       const approvals = details?.approvalLevels || details?.approvals || [];
-      
+
       // Find the initiator's step by checking approverEmail or levelName
       const initiatorEmail = (
         (request as any)?.initiator?.email?.toLowerCase() ||
         (request as any)?.initiatorEmail?.toLowerCase() ||
         ''
       );
-      
+
       const step2Level = approvals.find((level: any) => {
         const levelApproverEmail = (level.approverEmail || level.approver_email || '').toLowerCase();
         const levelName = (level.levelName || level.level_name || '').toLowerCase();
         const levelNumber = level.levelNumber || level.level_number;
-        
+
         // Check if this is the initiator's step
         return (initiatorEmail && levelApproverEmail === initiatorEmail) ||
-               levelName.includes('requestor evaluation') ||
-               (levelName.includes('requestor') && levelName.includes('confirmation')) ||
-               // Fallback: if initiatorStepNumber was found earlier, use it
-               (levelNumber === initiatorStepNumber);
-      }) || approvals.find((level: any) => 
+          levelName.includes('requestor evaluation') ||
+          (levelName.includes('requestor') && levelName.includes('confirmation')) ||
+          // Fallback: if initiatorStepNumber was found earlier, use it
+          (levelNumber === initiatorStepNumber);
+      }) || approvals.find((level: any) =>
         (level.levelNumber || level.level_number) === 2
       ); // Final fallback to level 2
 
@@ -1050,12 +1056,12 @@ export function DealerClaimWorkflowTab({
       // Get approval levels to find Department Lead step levelId dynamically
       const details = await getWorkflowDetails(requestId);
       const approvals = details?.approvalLevels || details?.approvals || [];
-      
+
       // Find Department Lead step by levelName (handles step shifts)
       const step3Level = approvals.find((level: any) => {
         const levelName = (level.levelName || level.level_name || '').toLowerCase();
         return levelName.includes('department lead');
-      }) || approvals.find((level: any) => 
+      }) || approvals.find((level: any) =>
         (level.levelNumber || level.level_number) === 3
       ); // Fallback to level 3
 
@@ -1184,12 +1190,12 @@ export function DealerClaimWorkflowTab({
       // Get approval levels to find Department Lead step levelId dynamically
       const details = await getWorkflowDetails(requestId);
       const approvals = details?.approvalLevels || details?.approvals || [];
-      
+
       // Find Department Lead step by levelName (handles step shifts)
       const step3Level = approvals.find((level: any) => {
         const levelName = (level.levelName || level.level_name || '').toLowerCase();
         return levelName.includes('department lead');
-      }) || approvals.find((level: any) => 
+      }) || approvals.find((level: any) =>
         (level.levelNumber || level.level_number) === 3
       ); // Fallback to level 3
 
@@ -1215,7 +1221,7 @@ export function DealerClaimWorkflowTab({
 
   // Extract proposal data from request
   const [proposalData, setProposalData] = useState<any | null>(null);
-  
+
   useEffect(() => {
     if (!request) {
       setProposalData(null);
@@ -1234,14 +1240,14 @@ export function DealerClaimWorkflowTab({
         const details = await getWorkflowDetails(requestId);
         const documents = details?.documents || [];
         const proposalDetails = request.proposalDetails || details?.proposalDetails || {};
-        
+
         // Find proposal document (category APPROVAL or type proposal)
-        const proposalDoc = documents.find((d: any) => 
+        const proposalDoc = documents.find((d: any) =>
           d.category === 'APPROVAL' || d.type === 'proposal' || d.documentCategory === 'APPROVAL'
         );
-        
+
         // Find supporting documents
-        const otherDocs = documents.filter((d: any) => 
+        const otherDocs = documents.filter((d: any) =>
           d.category === 'SUPPORTING' || d.type === 'supporting' || d.documentCategory === 'SUPPORTING'
         );
 
@@ -1277,7 +1283,7 @@ export function DealerClaimWorkflowTab({
         console.warn('Failed to load proposal data:', error);
         // Fallback to request data only
         const proposalDetails = request.proposalDetails || {};
-        
+
         // Ensure costBreakup is an array
         let costBreakup = proposalDetails.costBreakup || [];
         if (typeof costBreakup === 'string') {
@@ -1326,7 +1332,7 @@ export function DealerClaimWorkflowTab({
         // Get workflow details which includes all documents
         const details = await getWorkflowDetails(requestId);
         const documents = details?.documents || [];
-        
+
         // Filter and categorize documents
         const completionDocs: any[] = [];
         const activityPhotos: any[] = [];
@@ -1336,7 +1342,7 @@ export function DealerClaimWorkflowTab({
         documents.forEach((doc: any) => {
           const category = (doc.category || doc.documentCategory || doc.type || '').toUpperCase();
           const name = (doc.fileName || doc.file_name || doc.name || '').toLowerCase();
-          
+
           const docObj = {
             name: doc.fileName || doc.file_name || doc.name,
             id: doc.documentId || doc.document_id || doc.id,
@@ -1361,8 +1367,8 @@ export function DealerClaimWorkflowTab({
 
         // If documents came from the completionDetails directly (some backends might structure it this way)
         if (completionDocs.length === 0 && activityPhotos.length === 0 && request.completionDetails) {
-            // Try to extract from request.completionDetails if available/applicable
-            // This is a fallback in case documents aren't flattened in the main documents list yet
+          // Try to extract from request.completionDetails if available/applicable
+          // This is a fallback in case documents aren't flattened in the main documents list yet
         }
 
         setCompletionDocumentsData({
@@ -1382,1261 +1388,1260 @@ export function DealerClaimWorkflowTab({
   }, [request]);
 
   // Get dealer and activity info
-  const dealerName = request?.claimDetails?.dealerName || 
-                     request?.dealerInfo?.name || 
-                     'Dealer';
-  const activityName = request?.claimDetails?.activityName || 
-                       request?.activityInfo?.activityName || 
-                       request?.title || 
-                       'Activity';
+  const dealerName = request?.claimDetails?.dealerName ||
+    request?.dealerInfo?.name ||
+    'Dealer';
+  const activityName = request?.claimDetails?.activityName ||
+    request?.activityInfo?.activityName ||
+    request?.title ||
+    'Activity';
 
   return (
     <>
       <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="flex items-center gap-2">
-              <TrendingUp className="w-5 h-5 text-purple-600" />
-              Claim Management Workflow
-            </CardTitle>
-            <CardDescription className="mt-2">
-              Approval process for dealer claim management
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {/* Returned to Initiator Banner */}
-       
-        {(() => {
-          const isReturnedToInitiator = request?.status === 'rejected' &&
-                                       !(request?.closureDate || request?.closure_date) && isInitiator;
-          if (!isReturnedToInitiator) return null;
-
-          return (
-            <div className="mb-6 p-4 bg-amber-50 border-l-4 border-amber-500 rounded-lg flex items-start gap-4 shadow-sm">
-              <div className="p-2 bg-amber-100 rounded-full">
-                <AlertTriangle className="w-5 h-5 text-amber-600" />
-              </div>
-              <div className="flex-1">
-                <h3 className="text-sm font-bold text-amber-900 mb-1">Action Required: Request Returned</h3>
-                <p className="text-xs text-amber-800 leading-relaxed mb-3">
-                  This request has been returned to you by the department head. 
-                  {isInitiator ? 
-                    'You can choose to resubmit, discuss with the dealer, request a revision, or cancel the request.' : 
-                    'The initiator needs to take action to proceed.'}
-                </p>
-                {/* Actions are now in the step card itself - no need for separate button */}
-              </div>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <TrendingUp className="w-5 h-5 text-purple-600" />
+                Claim Management Workflow
+              </CardTitle>
+              <CardDescription className="mt-2">
+                Approval process for dealer claim management
+              </CardDescription>
             </div>
-          );
-        })()}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {/* Returned to Initiator Banner */}
 
-        <div className="space-y-4">
-          {workflowSteps.map((step, index) => {
-            // Step is active if:
-            // 1. Request is active (not rejected/closed)
-            // 2. It's pending or in_progress
-            // 3. AND it matches currentStep (from backend or calculated)
-            // 4. AND it's the actual current step (not a future step that happens to be pending)
-            const stepStatus = step.status?.toLowerCase() || '';
-            const isPendingOrInProgress = stepStatus === 'in_progress';
-            const matchesCurrentStep = step.step === currentStep;
-            
-            // Step is active only if:
-            // - Request is active (not rejected/closed)
-            // - AND it matches the current step 
-            // - AND is pending/in_progress
-            const isActive = isRequestActive && isPendingOrInProgress && matchesCurrentStep;
-            const isCompleted = step.status === 'approved';
-            
-            // Find approval data for this step to get SLA information
-            // First find the corresponding level in approvalFlow to get levelId
-            const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
-            const approval = stepLevel?.levelId 
-              ? request?.approvals?.find((a: any) => a.levelId === stepLevel.levelId || a.level_id === stepLevel.levelId)
-              : null;
-            
-            // Check if step is paused
-            const isPaused = approval?.status === 'PAUSED' || 
-                            (request?.pauseInfo?.isPaused && 
-                             (request?.pauseInfo?.levelId === approval?.levelId || 
-                              request?.pauseInfo?.level_id === approval?.levelId));
+          {(() => {
+            const isReturnedToInitiator = request?.status === 'rejected' &&
+              !(request?.closureDate || request?.closure_date) && isInitiator;
+            if (!isReturnedToInitiator) return null;
 
             return (
-              <div
-                key={index}
-                className={`relative p-5 rounded-lg border-2 transition-all ${getStepCardStyle(step.status, isActive)}`}
-              >
-                <div className="flex items-start gap-4">
-                  {/* Step Icon */}
-                  <div className={`p-3 rounded-xl ${getStepIconBg(step.status)}`}>
-                    {getStepIcon(step.status)}
-                  </div>
+              <div className="mb-6 p-4 bg-amber-50 border-l-4 border-amber-500 rounded-lg flex items-start gap-4 shadow-sm">
+                <div className="p-2 bg-amber-100 rounded-full">
+                  <AlertTriangle className="w-5 h-5 text-amber-600" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-sm font-bold text-amber-900 mb-1">Action Required: Request Returned</h3>
+                  <p className="text-xs text-amber-800 leading-relaxed mb-3">
+                    This request has been returned to you by the department head.
+                    {isInitiator ?
+                      'You can choose to resubmit, discuss with the dealer, request a revision, or cancel the request.' :
+                      'The initiator needs to take action to proceed.'}
+                  </p>
+                  {/* Actions are now in the step card itself - no need for separate button */}
+                </div>
+              </div>
+            );
+          })()}
 
-                  {/* Step Content */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-start justify-between gap-4 mb-2">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <h4 className="font-semibold text-gray-900">
-                            {step.title}
-                          </h4>
-                          <Badge className={getStepBadgeVariant(step.status)}>
-                            {step.status.toLowerCase()}
-                          </Badge>
-                          {/* Email Template Button - Show when step has emailTemplateUrl and is approved */}
-                          {step.emailTemplateUrl && step.status === 'approved' && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="h-6 w-6 p-0 hover:bg-blue-100"
-                              title="View email template"
-                              onClick={() => {
-                                setSelectedStepForEmail({ stepNumber: step.step, stepName: step.title });
-                                setShowEmailTemplateModal(true);
-                              }}
-                            >
-                              <Mail className="w-3.5 h-3.5 text-blue-600" />
-                            </Button>
-                          )}
-                          {/* E-Invoice Download Button (Step 7) */}
-                          {step.step === 7 && step.einvoiceUrl && isCompleted && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="h-6 w-6 p-0 hover:bg-green-100"
-                              title="Download E-Invoice"
-                              onClick={() => window.open(step.einvoiceUrl, '_blank')}
-                            >
-                              <Download className="w-3.5 h-3.5 text-green-600" />
-                            </Button>
-                          )}
-                        </div>
-                        <p className="text-sm text-gray-600">{step.approver}</p>
-                        <p className="text-sm text-gray-500 mt-2 italic">{step.description}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="text-xs text-gray-500">TAT: {formatHoursMinutes(step.tatHours)}</p>
-                        {/* Only show elapsed time for active or completed steps, not for waiting steps */}
-                        {step.elapsedHours && (isActive || isCompleted) && (
-                          <p className="text-xs text-gray-600 font-medium">
-                            Elapsed: {formatHoursMinutes(step.elapsedHours)}
-                          </p>
-                        )}
-                      </div>
+          <div className="space-y-4">
+            {workflowSteps.map((step, index) => {
+              // Step is active if:
+              // 1. Request is active (not rejected/closed)
+              // 2. It's pending or in_progress
+              // 3. AND it matches currentStep (from backend or calculated)
+              // 4. AND it's the actual current step (not a future step that happens to be pending)
+              const stepStatus = step.status?.toLowerCase() || '';
+              const isPendingOrInProgress = stepStatus === 'in_progress';
+              const matchesCurrentStep = step.step === currentStep;
+
+              // Step is active only if:
+              // - Request is active (not rejected/closed)
+              // - AND it matches the current step 
+              // - AND is pending/in_progress
+              const isActive = isRequestActive && isPendingOrInProgress && matchesCurrentStep;
+              const isCompleted = step.status === 'approved';
+
+              // Find approval data for this step to get SLA information
+              // First find the corresponding level in approvalFlow to get levelId
+              const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+              const approval = stepLevel?.levelId
+                ? request?.approvals?.find((a: any) => a.levelId === stepLevel.levelId || a.level_id === stepLevel.levelId)
+                : null;
+
+              // Check if step is paused
+              const isPaused = approval?.status === 'PAUSED' ||
+                (request?.pauseInfo?.isPaused &&
+                  (request?.pauseInfo?.levelId === approval?.levelId ||
+                    request?.pauseInfo?.level_id === approval?.levelId));
+
+              return (
+                <div
+                  key={index}
+                  className={`relative p-5 rounded-lg border-2 transition-all ${getStepCardStyle(step.status, isActive)}`}
+                >
+                  <div className="flex items-start gap-4">
+                    {/* Step Icon */}
+                    <div className={`p-3 rounded-xl ${getStepIconBg(step.status)}`}>
+                      {getStepIcon(step.status)}
                     </div>
 
-                    {/* Comment Section */}
-                    {step.comment && (
-                      <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
-                        <p className="text-sm text-gray-700">{step.comment}</p>
-                      </div>
-                    )}
-
-                    {/* Version History Section */}
-                    {step.versionHistory && step.versionHistory.all && step.versionHistory.all.length > 0 && (
-                      <div className="mt-3">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="w-full justify-between text-xs text-amber-700 hover:text-amber-800 hover:bg-amber-50"
-                          onClick={() => {
-                            const newExpanded = new Set(expandedVersionSteps);
-                            if (newExpanded.has(step.step)) {
-                              newExpanded.delete(step.step);
-                            } else {
-                              newExpanded.add(step.step);
-                            }
-                            setExpandedVersionSteps(newExpanded);
-                          }}
-                        >
-                          <div className="flex items-center gap-2">
-                            <History className="w-3.5 h-3.5" />
-                            <span className="font-medium">Version History</span>
-                            {step.versionHistory.all && step.versionHistory.all.length > 0 && (
-                              <Badge className="bg-amber-100 text-amber-800 text-[10px] px-1.5 py-0">
-                                {step.versionHistory.all.length} Versions
-                              </Badge>
+                    {/* Step Content */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-start justify-between gap-4 mb-2">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h4 className="font-semibold text-gray-900">
+                              {step.title}
+                            </h4>
+                            <Badge className={getStepBadgeVariant(step.status)}>
+                              {step.status.toLowerCase()}
+                            </Badge>
+                            {/* Email Template Button - Show when step has emailTemplateUrl and is approved */}
+                            {step.emailTemplateUrl && step.status === 'approved' && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 w-6 p-0 hover:bg-blue-100"
+                                title="View email template"
+                                onClick={() => {
+                                  setSelectedStepForEmail({ stepNumber: step.step, stepName: step.title });
+                                  setShowEmailTemplateModal(true);
+                                }}
+                              >
+                                <Mail className="w-3.5 h-3.5 text-blue-600" />
+                              </Button>
+                            )}
+                            {/* E-Invoice Download Button (Step 7) */}
+                            {step.step === 7 && step.einvoiceUrl && isCompleted && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 w-6 p-0 hover:bg-green-100"
+                                title="Download E-Invoice"
+                                onClick={() => window.open(step.einvoiceUrl, '_blank')}
+                              >
+                                <Download className="w-3.5 h-3.5 text-green-600" />
+                              </Button>
                             )}
                           </div>
-                          {expandedVersionSteps.has(step.step) ? (
-                            <ChevronUp className="w-4 h-4" />
-                          ) : (
-                            <ChevronDown className="w-4 h-4" />
+                          <p className="text-sm text-gray-600">{step.approver}</p>
+                          <p className="text-sm text-gray-500 mt-2 italic">{step.description}</p>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-xs text-gray-500">TAT: {formatHoursMinutes(step.tatHours)}</p>
+                          {/* Only show elapsed time for active or completed steps, not for waiting steps */}
+                          {step.elapsedHours && (isActive || isCompleted) && (
+                            <p className="text-xs text-gray-600 font-medium">
+                              Elapsed: {formatHoursMinutes(step.elapsedHours)}
+                            </p>
                           )}
-                        </Button>
-                        
-                        {expandedVersionSteps.has(step.step) && step.versionHistory.all && (
-                          <div className="mt-2 space-y-3 p-3 bg-amber-50/50 rounded-lg border border-amber-200 text-left">
-                            {step.versionHistory.all.map((version: any, vIndex: number) => (
-                              <div key={vIndex} className={`space-y-2 ${vIndex > 0 ? 'pt-2 border-t border-amber-200' : ''}`}>
-                                <div className="flex items-center justify-between">
-                                  <div className="flex items-center gap-2">
-                                    <Badge className={`${vIndex === 0 ? 'bg-amber-500' : 'bg-gray-400'} text-white text-[10px] px-2 py-0.5`}>
-                                      {vIndex === 0 ? 'Current' : 'Previous'}: v{version.version}
-                                    </Badge>
-                                    <span className="text-[10px] text-gray-600 font-medium">
-                                      {formatDateSafe(version.createdAt)}
-                                    </span>
-                                  </div>
-                                </div>
-                                <p className="text-xs text-gray-700 font-medium">
-                                  {version.changeReason || 'Version Update'}
-                                </p>
-                                <div className="flex items-center gap-1.5">
-                                  <div className={`w-3 h-3 rounded-full ${vIndex === 0 ? 'bg-blue-100' : 'bg-gray-100'} flex items-center justify-center`}>
-                                    <span className={`text-[8px] font-bold ${vIndex === 0 ? 'text-blue-600' : 'text-gray-600'}`}>
-                                      {version.changer?.displayName?.charAt(0) || 'U'}
-                                    </span>
-                                  </div>
-                                  <span className="text-[10px] text-gray-600">
-                                    By {version.changer?.displayName || version.changer?.email || 'Unknown User'}
-                                  </span>
-                                </div>
-                                
-                                {/* Show snapshot data if available - JSONB structure */}
-                                {version.snapshotType === 'PROPOSAL' && version.snapshotData && (
-                                  <div className="mt-2 p-2 bg-white rounded border border-amber-200">
-                                    <div className="flex justify-between items-start mb-2">
-                                      <div>
-                                        <p className="text-[10px] font-semibold text-gray-700">Proposal Snapshot</p>
-                                        <p className="text-[10px] text-gray-600">
-                                          Budget: ₹{Number(version.snapshotData.totalBudget || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                        </p>
-                                      </div>
-                                      <button 
-                                        className="text-[10px] text-blue-600 hover:text-blue-800 hover:underline font-medium flex items-center gap-1 transition-colors"
-                                        onClick={() => setViewSnapshot({
-                                          data: version.snapshotData,
-                                          type: 'PROPOSAL',
-                                          title: `Proposal (v${version.version})`
-                                        })}
-                                      >
-                                        <Eye className="w-3 h-3" />
-                                        View Details
-                                      </button>
-                                    </div>
-                                    
-                                    {version.snapshotData.comments && (
-                                      <p className="text-[10px] text-gray-600 mt-1 line-clamp-2">
-                                        Comments: {version.snapshotData.comments}
-                                      </p>
-                                    )}
-                                  </div>
-                                )}
-                                {version.snapshotType === 'INTERNAL_ORDER' && version.snapshotData && (
-                                  <div className="mt-2 p-2 bg-white rounded border border-amber-200">
-                                    <p className="text-[10px] font-semibold text-gray-700 mb-1">IO Block Snapshot:</p>
-                                    <p className="text-[10px] text-gray-600">
-                                      IO Number: {version.snapshotData.ioNumber || 'N/A'}
-                                    </p>
-                                    <p className="text-[10px] text-gray-600">
-                                      Blocked Amount: ₹{Number(version.snapshotData.blockedAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                    </p>
-                                    {version.snapshotData.sapDocumentNumber && (
-                                      <p className="text-[10px] text-gray-600">
-                                        SAP Doc: {version.snapshotData.sapDocumentNumber}
-                                      </p>
-                                    )}
-                                  </div>
-                                )}
-                                {version.snapshotType === 'COMPLETION' && version.snapshotData && (
-                                  <div className="mt-2 p-2 bg-white rounded border border-amber-200">
-                                    <div className="flex justify-between items-start mb-2">
-                                      <div>
-                                        <p className="text-[10px] font-semibold text-gray-700">Completion Snapshot</p>
-                                        <p className="text-[10px] text-gray-600">
-                                          Total: ₹{Number(version.snapshotData.totalExpenses || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                        </p>
-                                      </div>
-                                      <button 
-                                        className="text-[10px] text-blue-600 hover:text-blue-800 hover:underline font-medium flex items-center gap-1 transition-colors"
-                                        onClick={() => setViewSnapshot({
-                                          data: version.snapshotData,
-                                          type: 'COMPLETION',
-                                          title: `Completion (v${version.version})`
-                                        })}
-                                      >
-                                        <Eye className="w-3 h-3" />
-                                        View Details
-                                      </button>
-                                    </div>
+                        </div>
+                      </div>
 
-                                    {version.snapshotData.comments && (
-                                      <p className="text-[10px] text-gray-600 mt-1 line-clamp-2">
-                                        Comments: {version.snapshotData.comments}
-                                      </p>
-                                    )}
+                      {/* Comment Section */}
+                      {step.comment && (
+                        <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
+                          <p className="text-sm text-gray-700">{step.comment}</p>
+                        </div>
+                      )}
+
+                      {/* Version History Section */}
+                      {step.versionHistory && step.versionHistory.all && step.versionHistory.all.length > 0 && (
+                        <div className="mt-3">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="w-full justify-between text-xs text-amber-700 hover:text-amber-800 hover:bg-amber-50"
+                            onClick={() => {
+                              const newExpanded = new Set(expandedVersionSteps);
+                              if (newExpanded.has(step.step)) {
+                                newExpanded.delete(step.step);
+                              } else {
+                                newExpanded.add(step.step);
+                              }
+                              setExpandedVersionSteps(newExpanded);
+                            }}
+                          >
+                            <div className="flex items-center gap-2">
+                              <History className="w-3.5 h-3.5" />
+                              <span className="font-medium">Version History</span>
+                              {step.versionHistory.all && step.versionHistory.all.length > 0 && (
+                                <Badge className="bg-amber-100 text-amber-800 text-[10px] px-1.5 py-0">
+                                  {step.versionHistory.all.length} Versions
+                                </Badge>
+                              )}
+                            </div>
+                            {expandedVersionSteps.has(step.step) ? (
+                              <ChevronUp className="w-4 h-4" />
+                            ) : (
+                              <ChevronDown className="w-4 h-4" />
+                            )}
+                          </Button>
+
+                          {expandedVersionSteps.has(step.step) && step.versionHistory.all && (
+                            <div className="mt-2 space-y-3 p-3 bg-amber-50/50 rounded-lg border border-amber-200 text-left">
+                              {step.versionHistory.all.map((version: any, vIndex: number) => (
+                                <div key={vIndex} className={`space-y-2 ${vIndex > 0 ? 'pt-2 border-t border-amber-200' : ''}`}>
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2">
+                                      <Badge className={`${vIndex === 0 ? 'bg-amber-500' : 'bg-gray-400'} text-white text-[10px] px-2 py-0.5`}>
+                                        {vIndex === 0 ? 'Current' : 'Previous'}: v{version.version}
+                                      </Badge>
+                                      <span className="text-[10px] text-gray-600 font-medium">
+                                        {formatDateSafe(version.createdAt)}
+                                      </span>
+                                    </div>
                                   </div>
-                                )}
-                                {version.snapshotType === 'APPROVE' && version.snapshotData && (
-                                  <div className="mt-2 p-2 bg-white rounded border border-amber-200">
-                                    <p className="text-[10px] font-semibold text-gray-700 mb-1">
-                                      {version.snapshotData.action === 'APPROVE' ? 'Approval' : 'Rejection'} Snapshot:
-                                    </p>
-                                    <p className="text-[10px] text-gray-600">
-                                      By: {version.snapshotData.approverName || version.snapshotData.approverEmail || 'Unknown'}
-                                    </p>
-                                    {version.snapshotData.comments && (
-                                      <p className="text-[10px] text-gray-600 mt-1">
-                                        Comments: {version.snapshotData.comments.substring(0, 100)}
+                                  <p className="text-xs text-gray-700 font-medium">
+                                    {version.changeReason || 'Version Update'}
+                                  </p>
+                                  <div className="flex items-center gap-1.5">
+                                    <div className={`w-3 h-3 rounded-full ${vIndex === 0 ? 'bg-blue-100' : 'bg-gray-100'} flex items-center justify-center`}>
+                                      <span className={`text-[8px] font-bold ${vIndex === 0 ? 'text-blue-600' : 'text-gray-600'}`}>
+                                        {version.changer?.displayName?.charAt(0) || 'U'}
+                                      </span>
+                                    </div>
+                                    <span className="text-[10px] text-gray-600">
+                                      By {version.changer?.displayName || version.changer?.email || 'Unknown User'}
+                                    </span>
+                                  </div>
+
+                                  {/* Show snapshot data if available - JSONB structure */}
+                                  {version.snapshotType === 'PROPOSAL' && version.snapshotData && (
+                                    <div className="mt-2 p-2 bg-white rounded border border-amber-200">
+                                      <div className="flex justify-between items-start mb-2">
+                                        <div>
+                                          <p className="text-[10px] font-semibold text-gray-700">Proposal Snapshot</p>
+                                          <p className="text-[10px] text-gray-600">
+                                            Budget: ₹{Number(version.snapshotData.totalBudget || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                          </p>
+                                        </div>
+                                        <button
+                                          className="text-[10px] text-blue-600 hover:text-blue-800 hover:underline font-medium flex items-center gap-1 transition-colors"
+                                          onClick={() => setViewSnapshot({
+                                            data: version.snapshotData,
+                                            type: 'PROPOSAL',
+                                            title: `Proposal (v${version.version})`
+                                          })}
+                                        >
+                                          <Eye className="w-3 h-3" />
+                                          View Details
+                                        </button>
+                                      </div>
+
+                                      {version.snapshotData.comments && (
+                                        <p className="text-[10px] text-gray-600 mt-1 line-clamp-2">
+                                          Comments: {version.snapshotData.comments}
+                                        </p>
+                                      )}
+                                    </div>
+                                  )}
+                                  {version.snapshotType === 'INTERNAL_ORDER' && version.snapshotData && (
+                                    <div className="mt-2 p-2 bg-white rounded border border-amber-200">
+                                      <p className="text-[10px] font-semibold text-gray-700 mb-1">IO Block Snapshot:</p>
+                                      <p className="text-[10px] text-gray-600">
+                                        IO Number: {version.snapshotData.ioNumber || 'N/A'}
+                                      </p>
+                                      <p className="text-[10px] text-gray-600">
+                                        Blocked Amount: ₹{Number(version.snapshotData.blockedAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                      </p>
+                                      {version.snapshotData.sapDocumentNumber && (
+                                        <p className="text-[10px] text-gray-600">
+                                          SAP Doc: {version.snapshotData.sapDocumentNumber}
+                                        </p>
+                                      )}
+                                    </div>
+                                  )}
+                                  {version.snapshotType === 'COMPLETION' && version.snapshotData && (
+                                    <div className="mt-2 p-2 bg-white rounded border border-amber-200">
+                                      <div className="flex justify-between items-start mb-2">
+                                        <div>
+                                          <p className="text-[10px] font-semibold text-gray-700">Completion Snapshot</p>
+                                          <p className="text-[10px] text-gray-600">
+                                            Total: ₹{Number(version.snapshotData.totalExpenses || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                          </p>
+                                        </div>
+                                        <button
+                                          className="text-[10px] text-blue-600 hover:text-blue-800 hover:underline font-medium flex items-center gap-1 transition-colors"
+                                          onClick={() => setViewSnapshot({
+                                            data: version.snapshotData,
+                                            type: 'COMPLETION',
+                                            title: `Completion (v${version.version})`
+                                          })}
+                                        >
+                                          <Eye className="w-3 h-3" />
+                                          View Details
+                                        </button>
+                                      </div>
+
+                                      {version.snapshotData.comments && (
+                                        <p className="text-[10px] text-gray-600 mt-1 line-clamp-2">
+                                          Comments: {version.snapshotData.comments}
+                                        </p>
+                                      )}
+                                    </div>
+                                  )}
+                                  {version.snapshotType === 'APPROVE' && version.snapshotData && (
+                                    <div className="mt-2 p-2 bg-white rounded border border-amber-200">
+                                      <p className="text-[10px] font-semibold text-gray-700 mb-1">
+                                        {version.snapshotData.action === 'APPROVE' ? 'Approval' : 'Rejection'} Snapshot:
+                                      </p>
+                                      <p className="text-[10px] text-gray-600">
+                                        By: {version.snapshotData.approverName || version.snapshotData.approverEmail || 'Unknown'}
+                                      </p>
+                                      {version.snapshotData.comments && (
+                                        <p className="text-[10px] text-gray-600 mt-1">
+                                          Comments: {version.snapshotData.comments.substring(0, 100)}
+                                          {version.snapshotData.comments.length > 100 ? '...' : ''}
+                                        </p>
+                                      )}
+                                      {version.snapshotData.rejectionReason && (
+                                        <p className="text-[10px] text-red-600 mt-1">
+                                          Rejection Reason: {version.snapshotData.rejectionReason.substring(0, 100)}
+                                          {version.snapshotData.rejectionReason.length > 100 ? '...' : ''}
+                                        </p>
+                                      )}
+                                    </div>
+                                  )}
+                                  {version.snapshotType === 'WORKFLOW' && version.snapshotData && version.snapshotData.comments && (
+                                    <div className="mt-2 p-2 bg-white rounded border border-amber-200">
+                                      <p className="text-[10px] font-semibold text-gray-700 mb-1">Approval Comment:</p>
+                                      <p className="text-[10px] text-gray-600">
+                                        {version.snapshotData.comments.substring(0, 100)}
                                         {version.snapshotData.comments.length > 100 ? '...' : ''}
                                       </p>
-                                    )}
-                                    {version.snapshotData.rejectionReason && (
-                                      <p className="text-[10px] text-red-600 mt-1">
-                                        Rejection Reason: {version.snapshotData.rejectionReason.substring(0, 100)}
-                                        {version.snapshotData.rejectionReason.length > 100 ? '...' : ''}
-                                      </p>
-                                    )}
-                                  </div>
-                                )}
-                                {version.snapshotType === 'WORKFLOW' && version.snapshotData && version.snapshotData.comments && (
-                                  <div className="mt-2 p-2 bg-white rounded border border-amber-200">
-                                    <p className="text-[10px] font-semibold text-gray-700 mb-1">Approval Comment:</p>
-                                    <p className="text-[10px] text-gray-600">
-                                      {version.snapshotData.comments.substring(0, 100)}
-                                      {version.snapshotData.comments.length > 100 ? '...' : ''}
-                                    </p>
-                                  </div>
-                                )}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Active Approver - SLA Time Tracking (Only show for current active step) */}
+                      {isActive && approval?.sla && (
+                        <div className="mt-3 space-y-3">
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-gray-600">Due by:</span>
+                            <span className="font-medium text-gray-900">
+                              {approval.sla.deadline ? formatDateDDMMYYYY(approval.sla.deadline, true) : 'Not set'}
+                            </span>
+                          </div>
+
+                          {/* Current Approver - Time Tracking */}
+                          <div className={`border rounded-lg p-3 ${isPaused ? 'bg-gray-100 border-gray-300' :
+                              (approval.sla.percentageUsed || 0) >= 100 ? 'bg-red-50 border-red-200' :
+                                (approval.sla.percentageUsed || 0) >= 75 ? 'bg-orange-50 border-orange-200' :
+                                  (approval.sla.percentageUsed || 0) >= 50 ? 'bg-amber-50 border-amber-200' :
+                                    'bg-green-50 border-green-200'
+                            }`}>
+                            <p className="text-xs font-semibold text-gray-900 mb-3 flex items-center gap-2">
+                              <Clock className="w-4 h-4" />
+                              Current Approver - Time Tracking {isPaused && '(Paused)'}
+                            </p>
+
+                            <div className="space-y-2 text-xs mb-3">
+                              <div className="flex justify-between">
+                                <span className="text-gray-600">Time elapsed since assigned:</span>
+                                <span className="font-medium text-gray-900">{approval.sla.elapsedText || '0 hours'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span className="text-gray-600">Time used:</span>
+                                <span className="font-medium text-gray-900">
+                                  {approval.sla.elapsedText || '0 hours'} / {formatHoursMinutes(step.tatHours)} allocated
+                                </span>
                               </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    )}
-
-                    {/* Active Approver - SLA Time Tracking (Only show for current active step) */}
-                    {isActive && approval?.sla && (
-                      <div className="mt-3 space-y-3">
-                        <div className="flex items-center justify-between text-xs">
-                          <span className="text-gray-600">Due by:</span>
-                          <span className="font-medium text-gray-900">
-                            {approval.sla.deadline ? formatDateDDMMYYYY(approval.sla.deadline, true) : 'Not set'}
-                          </span>
-                        </div>
-                        
-                        {/* Current Approver - Time Tracking */}
-                        <div className={`border rounded-lg p-3 ${
-                          isPaused ? 'bg-gray-100 border-gray-300' :
-                          (approval.sla.percentageUsed || 0) >= 100 ? 'bg-red-50 border-red-200' :
-                          (approval.sla.percentageUsed || 0) >= 75 ? 'bg-orange-50 border-orange-200' :
-                          (approval.sla.percentageUsed || 0) >= 50 ? 'bg-amber-50 border-amber-200' :
-                          'bg-green-50 border-green-200'
-                        }`}>
-                          <p className="text-xs font-semibold text-gray-900 mb-3 flex items-center gap-2">
-                            <Clock className="w-4 h-4" />
-                            Current Approver - Time Tracking {isPaused && '(Paused)'}
-                          </p>
-                          
-                          <div className="space-y-2 text-xs mb-3">
-                            <div className="flex justify-between">
-                              <span className="text-gray-600">Time elapsed since assigned:</span>
-                              <span className="font-medium text-gray-900">{approval.sla.elapsedText || '0 hours'}</span>
                             </div>
-                            <div className="flex justify-between">
-                              <span className="text-gray-600">Time used:</span>
-                              <span className="font-medium text-gray-900">
-                                {approval.sla.elapsedText || '0 hours'} / {formatHoursMinutes(step.tatHours)} allocated
-                              </span>
+
+                            {/* Progress Bar */}
+                            <div className="space-y-2">
+                              {(() => {
+                                const percentUsed = approval.sla.percentageUsed || 0;
+                                const getActiveIndicatorColor = () => {
+                                  if (isPaused) return 'bg-gray-500';
+                                  if (percentUsed >= 100) return 'bg-red-600';
+                                  if (percentUsed >= 75) return 'bg-orange-500';
+                                  if (percentUsed >= 50) return 'bg-amber-500';
+                                  return 'bg-green-600';
+                                };
+                                const getActiveTextColor = () => {
+                                  if (isPaused) return 'text-gray-600';
+                                  if (percentUsed >= 100) return 'text-red-600';
+                                  if (percentUsed >= 75) return 'text-orange-600';
+                                  if (percentUsed >= 50) return 'text-amber-600';
+                                  return 'text-green-600';
+                                };
+                                return (
+                                  <>
+                                    <Progress
+                                      value={percentUsed}
+                                      className="h-3"
+                                      indicatorClassName={getActiveIndicatorColor()}
+                                    />
+                                    <div className="flex items-center justify-between">
+                                      <span className={`text-xs font-semibold ${getActiveTextColor()}`}>
+                                        Progress: {Math.min(100, percentUsed)}% of TAT used
+                                      </span>
+                                      <span className="text-xs font-medium text-gray-700">
+                                        {approval.sla.remainingText || '0 hours'} remaining
+                                      </span>
+                                    </div>
+                                  </>
+                                );
+                              })()}
+
+                              {approval.sla.status === 'breached' && (
+                                <p className="text-xs font-semibold text-center text-red-600 flex items-center justify-center gap-1.5">
+                                  <AlertOctagon className="w-4 h-4" />
+                                  Deadline Breached
+                                </p>
+                              )}
+                              {approval.sla.status === 'critical' && (
+                                <p className="text-xs font-semibold text-center text-orange-600 flex items-center justify-center gap-1.5">
+                                  <AlertTriangle className="w-4 h-4" />
+                                  Approaching Deadline
+                                </p>
+                              )}
                             </div>
                           </div>
-                          
-                          {/* Progress Bar */}
-                          <div className="space-y-2">
-                            {(() => {
-                              const percentUsed = approval.sla.percentageUsed || 0;
-                              const getActiveIndicatorColor = () => {
-                                if (isPaused) return 'bg-gray-500';
-                                if (percentUsed >= 100) return 'bg-red-600';
-                                if (percentUsed >= 75) return 'bg-orange-500';
-                                if (percentUsed >= 50) return 'bg-amber-500';
-                                return 'bg-green-600';
-                              };
-                              const getActiveTextColor = () => {
-                                if (isPaused) return 'text-gray-600';
-                                if (percentUsed >= 100) return 'text-red-600';
-                                if (percentUsed >= 75) return 'text-orange-600';
-                                if (percentUsed >= 50) return 'text-amber-600';
-                                return 'text-green-600';
-                              };
-                              return (
-                                <>
-                                  <Progress 
-                                    value={percentUsed} 
-                                    className="h-3"
-                                    indicatorClassName={getActiveIndicatorColor()}
-                                  />
-                                  <div className="flex items-center justify-between">
-                                    <span className={`text-xs font-semibold ${getActiveTextColor()}`}>
-                                      Progress: {Math.min(100, percentUsed)}% of TAT used
-                                    </span>
-                                    <span className="text-xs font-medium text-gray-700">
-                                      {approval.sla.remainingText || '0 hours'} remaining
-                                    </span>
-                                  </div>
-                                </>
-                              );
-                            })()}
-                            
-                            {approval.sla.status === 'breached' && (
-                              <p className="text-xs font-semibold text-center text-red-600 flex items-center justify-center gap-1.5">
-                                <AlertOctagon className="w-4 h-4" />
-                                Deadline Breached
-                              </p>
-                            )}
-                            {approval.sla.status === 'critical' && (
-                              <p className="text-xs font-semibold text-center text-orange-600 flex items-center justify-center gap-1.5">
-                                <AlertTriangle className="w-4 h-4" />
-                                Approaching Deadline
-                              </p>
-                            )}
-                          </div>
                         </div>
-                      </div>
-                    )}
+                      )}
 
-                    {/* IO Organization Details (Department Lead Approval) - Show when step is approved and has IO details */}
-                    {(() => {
-                      // Check if this is Department Lead Approval step by step title or levelName (handles step shifts)
-                      // Use levelName from the original step data if available, otherwise check title
-                      const stepLevelName = (step as any).levelName || (step as any).level_name;
-                      const isDeptLeadStep = 
-                        (stepLevelName && stepLevelName.toLowerCase().includes('department lead')) ||
-                        (step.title && step.title.toLowerCase().includes('department lead'));
-                      // Only show when step is approved and has IO details
-                      return isDeptLeadStep && step.status === 'approved' && step.ioDetails && step.ioDetails.ioNumber && (
-                        <div className="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                      {/* IO Organization Details (Department Lead Approval) - Show when step is approved and has IO details */}
+                      {(() => {
+                        // Check if this is Department Lead Approval step by step title or levelName (handles step shifts)
+                        // Use levelName from the original step data if available, otherwise check title
+                        const stepLevelName = (step as any).levelName || (step as any).level_name;
+                        const isDeptLeadStep =
+                          (stepLevelName && stepLevelName.toLowerCase().includes('department lead')) ||
+                          (step.title && step.title.toLowerCase().includes('department lead'));
+                        // Only show when step is approved and has IO details
+                        return isDeptLeadStep && step.status === 'approved' && step.ioDetails && step.ioDetails.ioNumber && (
+                          <div className="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                            <div className="flex items-center gap-2 mb-2">
+                              <Receipt className="w-4 h-4 text-blue-600" />
+                              <p className="text-xs font-semibold text-blue-900 uppercase tracking-wide">
+                                IO Organisation Details
+                              </p>
+                            </div>
+                            <div className="space-y-1.5">
+                              <div className="flex items-center justify-between">
+                                <span className="text-xs text-gray-600">IO Number:</span>
+                                <span className="text-sm font-semibold text-gray-900">
+                                  {step.ioDetails.ioNumber}
+                                </span>
+                              </div>
+                              {step.ioDetails.blockedAmount !== undefined && step.ioDetails.blockedAmount > 0 && (
+                                <div className="flex items-center justify-between pt-1.5 border-t border-blue-100">
+                                  <span className="text-xs text-gray-600">Blocked Amount:</span>
+                                  <span className="text-sm font-bold text-green-700">
+                                    ₹{step.ioDetails.blockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                  </span>
+                                </div>
+                              )}
+                              {step.ioDetails.remainingBalance !== undefined && step.ioDetails.remainingBalance !== null && (
+                                <div className="flex items-center justify-between pt-1.5 border-t border-blue-100">
+                                  <span className="text-xs text-gray-600">Remaining Balance:</span>
+                                  <span className="text-sm font-semibold text-blue-700">
+                                    ₹{step.ioDetails.remainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                  </span>
+                                </div>
+                              )}
+                              <div className="pt-1.5 border-t border-blue-100 text-xs text-gray-500">
+                                Organised by {step.ioDetails.organizedBy || step.approver || 'N/A'} on{' '}
+                                {step.ioDetails.organizedAt
+                                  ? formatDateSafe(step.ioDetails.organizedAt)
+                                  : (step.approvedAt ? formatDateSafe(step.approvedAt) : 'N/A')
+                                }
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })()}
+
+                      {/* DMS Processing Details (Step 6) */}
+                      {step.step === 6 && step.dmsDetails && step.dmsDetails.dmsNumber && (
+                        <div className="mt-3 p-3 bg-purple-50 rounded-lg border border-purple-200">
                           <div className="flex items-center gap-2 mb-2">
-                            <Receipt className="w-4 h-4 text-blue-600" />
-                            <p className="text-xs font-semibold text-blue-900 uppercase tracking-wide">
-                              IO Organisation Details
+                            <Activity className="w-4 h-4 text-purple-600" />
+                            <p className="text-xs font-semibold text-purple-900 uppercase tracking-wide">
+                              DMS Processing Details
                             </p>
                           </div>
                           <div className="space-y-1.5">
                             <div className="flex items-center justify-between">
-                              <span className="text-xs text-gray-600">IO Number:</span>
+                              <span className="text-xs text-gray-600">DMS Number:</span>
                               <span className="text-sm font-semibold text-gray-900">
-                                {step.ioDetails.ioNumber}
+                                {step.dmsDetails.dmsNumber}
                               </span>
                             </div>
-                            {step.ioDetails.blockedAmount !== undefined && step.ioDetails.blockedAmount > 0 && (
-                              <div className="flex items-center justify-between pt-1.5 border-t border-blue-100">
-                                <span className="text-xs text-gray-600">Blocked Amount:</span>
-                                <span className="text-sm font-bold text-green-700">
-                                  ₹{step.ioDetails.blockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                </span>
+                            {step.dmsDetails.dmsRemarks && (
+                              <div className="pt-1.5 border-t border-purple-100">
+                                <p className="text-xs text-gray-600 mb-1">DMS Remarks:</p>
+                                <p className="text-sm text-gray-900">{step.dmsDetails.dmsRemarks}</p>
                               </div>
                             )}
-                            {step.ioDetails.remainingBalance !== undefined && step.ioDetails.remainingBalance !== null && (
-                              <div className="flex items-center justify-between pt-1.5 border-t border-blue-100">
-                                <span className="text-xs text-gray-600">Remaining Balance:</span>
-                                <span className="text-sm font-semibold text-blue-700">
-                                  ₹{step.ioDetails.remainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                </span>
+                            {step.dmsDetails.pushedAt && (
+                              <div className="pt-1.5 border-t border-purple-100 text-xs text-gray-500">
+                                Pushed by {step.dmsDetails.pushedBy} on{' '}
+                                {formatDateSafe(step.dmsDetails.pushedAt)}
                               </div>
                             )}
-                            <div className="pt-1.5 border-t border-blue-100 text-xs text-gray-500">
-                              Organised by {step.ioDetails.organizedBy || step.approver || 'N/A'} on{' '}
-                              {step.ioDetails.organizedAt 
-                                ? formatDateSafe(step.ioDetails.organizedAt)
-                                : (step.approvedAt ? formatDateSafe(step.approvedAt) : 'N/A')
-                              }
-                            </div>
                           </div>
                         </div>
-                      );
-                    })()}
+                      )}
 
-                    {/* DMS Processing Details (Step 6) */}
-                    {step.step === 6 && step.dmsDetails && step.dmsDetails.dmsNumber && (
-                      <div className="mt-3 p-3 bg-purple-50 rounded-lg border border-purple-200">
-                        <div className="flex items-center gap-2 mb-2">
-                          <Activity className="w-4 h-4 text-purple-600" />
-                          <p className="text-xs font-semibold text-purple-900 uppercase tracking-wide">
-                            DMS Processing Details
-                          </p>
-                        </div>
-                        <div className="space-y-1.5">
-                          <div className="flex items-center justify-between">
-                            <span className="text-xs text-gray-600">DMS Number:</span>
-                            <span className="text-sm font-semibold text-gray-900">
-                              {step.dmsDetails.dmsNumber}
-                            </span>
-                          </div>
-                          {step.dmsDetails.dmsRemarks && (
-                            <div className="pt-1.5 border-t border-purple-100">
-                              <p className="text-xs text-gray-600 mb-1">DMS Remarks:</p>
-                              <p className="text-sm text-gray-900">{step.dmsDetails.dmsRemarks}</p>
-                            </div>
-                          )}
-                          {step.dmsDetails.pushedAt && (
-                            <div className="pt-1.5 border-t border-purple-100 text-xs text-gray-500">
-                              Pushed by {step.dmsDetails.pushedBy} on{' '}
-                              {formatDateSafe(step.dmsDetails.pushedAt)}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Action Buttons */}
-                    {/* Only show action buttons if:
+                      {/* Action Buttons */}
+                      {/* Only show action buttons if:
                         1. Step is active (pending/in_progress and matches currentStep)
                         2. AND current user is the approver for this step (or is dealer for dealer steps) */}
-                    {(() => {
-                      // Find the step level from approvalFlow to verify user is the approver
-                      const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
-                      const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
-                      const isUserApproverForThisStep = stepApproverEmail && userEmail === stepApproverEmail;
-                      
-                      // For dealer steps (1 and 5), also check if user is dealer
-                      const isDealerStep = step.step === 1 || 
-                        (stepLevel?.levelName && stepLevel.levelName.toLowerCase().includes('dealer'));
-                      const isUserAuthorized = isUserApproverForThisStep || (isDealerStep && isDealer);
-                      
-                      // Step must be active AND user must be authorized
-                      return isActive && isUserAuthorized;
-                    })() && (
-                      <div className="mt-4 flex gap-2">
-                        {/* Step 1: Submit Proposal Button - Only for dealer or step 1 approver */}
-                        {step.step === 1 && (isDealer || isStep1Approver) && (
-                          <Button
-                            className="bg-purple-600 hover:bg-purple-700"
-                            onClick={() => {
-                              setShowProposalModal(true);
-                            }}
-                          >
-                            <Upload className="w-4 h-4 mr-2" />
-                            Submit Proposal
-                          </Button>
-                        )}
+                      {(() => {
+                        // Find the step level from approvalFlow to verify user is the approver
+                        const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+                        const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
+                        const isUserApproverForThisStep = stepApproverEmail && userEmail === stepApproverEmail;
 
-                        {/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
-                        {/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
-                        {/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
-                        {/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
-                        {step.step === initiatorStepNumber && (isInitiator || isStep2Approver) && (
-                          <Button
-                            className="bg-blue-600 hover:bg-blue-700"
-                            onClick={() => {
-                              setShowApprovalModal(true);
-                            }}
-                          >
-                            <CheckCircle className="w-4 h-4 mr-2" />
-                            Review Request
-                          </Button>
-                        )}
+                        // For dealer steps (1 and 5), also check if user is dealer
+                        const isDealerStep = step.step === 1 ||
+                          (stepLevel?.levelName && stepLevel.levelName.toLowerCase().includes('dealer'));
+                        const isUserAuthorized = isUserApproverForThisStep || (isDealerStep && isDealer);
 
-                        {/* Initiator Action Step: Show action buttons (REVISE, REOPEN) - Direct actions, no modal */}
-                        {(() => {
-                          // Find the step level from approvalFlow
-                          const stepLevelForInitiator = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
-                          const stepLevelName = (stepLevelForInitiator?.levelName || step.title || '').toLowerCase();
-                          const isInitiatorActionStep = stepLevelName.includes('initiator action');
-                          const isUserInitiator = isInitiator || (userEmail === initiatorEmail);
-                          
-                          if (!isInitiatorActionStep || !isUserInitiator) return null;
-                          
-                          const handleDirectAction = async (action: 'REVISE' | 'REOPEN') => {
-                            try {
-                              if (!request?.id && !request?.requestId) {
-                                throw new Error('Request ID not found');
-                              }
-                              const requestId = request.requestId || request.id;
-                              
-                              // Call action directly without modal - comments are optional
-                              await handleInitiatorAction(requestId, action, { reason: '' });
-                              toast.success(`Action "${action === 'REVISE' ? 'Revision Requested' : 'Request Reopened'}" performed successfully`);
-                              handleRefresh();
-                            } catch (error: any) {
-                              console.error('Failed to perform initiator action:', error);
-                              const errorMessage = error?.response?.data?.message || error?.message || 'Failed to perform action';
-                              toast.error(errorMessage);
-                            }
-                          };
-                          
-                          return (
-                            <div className="flex flex-wrap gap-2">
+                        // Step must be active AND user must be authorized
+                        return isActive && isUserAuthorized;
+                      })() && (
+                          <div className="mt-4 flex gap-2">
+                            {/* Step 1: Submit Proposal Button - Only for dealer or step 1 approver */}
+                            {step.step === 1 && (isDealer || isStep1Approver) && (
                               <Button
-                                variant="outline"
-                                className="border-orange-500 text-orange-600 hover:bg-orange-50"
-                                onClick={() => handleDirectAction('REVISE')}
-                              >
-                                <RefreshCw className="w-4 h-4 mr-2" />
-                                Request Re-quotation
-                              </Button>
-                              <Button
-                                variant="outline"
-                                className="border-blue-500 text-blue-600 hover:bg-blue-50"
-                                onClick={() => handleDirectAction('REOPEN')}
-                              >
-                                <RotateCw className="w-4 h-4 mr-2" />
-                                Reopen
-                              </Button>
-                            </div>
-                          );
-                        })()}
-
-                        {/* Department Lead Step: Approve and Organise IO - Find dynamically by levelName */}
-                        {(() => {
-                          // Find Department Lead step dynamically (handles step shifts)
-                          const deptLeadStepLevel = approvalFlow.find((l: any) => {
-                            const levelName = (l.levelName || '').toLowerCase();
-                            return levelName.includes('department lead');
-                          });
-                          
-                          // Check if this is the Department Lead step
-                          const isDeptLeadStep = deptLeadStepLevel && 
-                            (step.step === (deptLeadStepLevel.step || deptLeadStepLevel.levelNumber || deptLeadStepLevel.level_number));
-                          
-                          if (!isDeptLeadStep) return null;
-                          
-                          // Check if user is the Department Lead approver
-                          const deptLeadApproverEmail = (deptLeadStepLevel?.approverEmail || '').toLowerCase();
-                          const isDeptLeadApprover = deptLeadApproverEmail && userEmail === deptLeadApproverEmail;
-                          
-                          if (!(isDeptLeadApprover || isStep3Approver || isCurrentApprover)) return null;
-                          
-                          // Check if IO number is available (same way as IO tab and modal)
-                          const internalOrder = request?.internalOrder || request?.internal_order;
-                          const ioNumber = internalOrder?.ioNumber || internalOrder?.io_number || request?.ioNumber || '';
-                          const hasIONumber = ioNumber && ioNumber.trim() !== '';
-                          
-                          return (
-                            <div className="space-y-1">
-                              <Button
-                                className="bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="bg-purple-600 hover:bg-purple-700"
                                 onClick={() => {
-                                  setShowIOApprovalModal(true);
+                                  setShowProposalModal(true);
+                                }}
+                              >
+                                <Upload className="w-4 h-4 mr-2" />
+                                Submit Proposal
+                              </Button>
+                            )}
+
+                            {/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
+                            {/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
+                            {/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
+                            {/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
+                            {step.step === initiatorStepNumber && (isInitiator || isStep2Approver) && (
+                              <Button
+                                className="bg-blue-600 hover:bg-blue-700"
+                                onClick={() => {
+                                  setShowApprovalModal(true);
                                 }}
-                                disabled={!hasIONumber}
                               >
                                 <CheckCircle className="w-4 h-4 mr-2" />
-                                Review and Approve
+                                Review Request
                               </Button>
-                              {!hasIONumber && (
-                                <p className="text-xs text-amber-600">
-                                  Please add an IO number in the IO tab before approving this step.
-                                </p>
-                              )}
-                            </div>
-                          );
-                        })()}
+                            )}
 
-                        {/* Step 5 (or shifted step): Upload Completion Documents - Only for dealer */}
-                        {/* Check if dealer is the approver for this step (handles step shifts) */}
-                        {(() => {
-                          // Find the step level from approvalFlow to verify dealer is the approver
-                          const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
-                          const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
-                          // Check if dealer is the approver for this step
-                          const isDealerForThisStep = isDealer && stepApproverEmail === dealerEmail;
-                          // Check if this is the Dealer Completion Documents step
-                          // by checking if the levelName contains "Dealer Completion" or "Completion Documents"
-                          const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
-                          const isDealerCompletionStep = levelName.includes('dealer completion') || 
-                                                         levelName.includes('completion documents');
-                          return isDealerForThisStep && isDealerCompletionStep;
-                        })() && (
-                          <Button
-                            className="bg-purple-600 hover:bg-purple-700"
-                            onClick={() => {
-                              setShowCompletionModal(true);
-                            }}
-                          >
-                            <Upload className="w-4 h-4 mr-2" />
-                            Upload Completion Docs
-                          </Button>
-                        )}
+                            {/* Initiator Action Step: Show action buttons (REVISE, REOPEN) - Direct actions, no modal */}
+                            {(() => {
+                              // Find the step level from approvalFlow
+                              const stepLevelForInitiator = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+                              const stepLevelName = (stepLevelForInitiator?.levelName || step.title || '').toLowerCase();
+                              const isInitiatorActionStep = stepLevelName.includes('initiator action');
+                              const isUserInitiator = isInitiator || (userEmail === initiatorEmail);
 
-                        {/* Requestor Claim Approval: Push to DMS - Find dynamically by levelName (handles step shifts) */}
-                        {(() => {
-                          // Find Requestor Claim Approval step dynamically (handles step shifts)
-                          const requestorClaimStepLevel = approvalFlow.find((l: any) => {
-                            const levelName = (l.levelName || '').toLowerCase();
-                            return levelName.includes('requestor claim') || levelName.includes('requestor - claim');
-                          });
-                          
-                          // Check if this is the Requestor Claim Approval step
-                          const isRequestorClaimStep = requestorClaimStepLevel && 
-                            (step.step === (requestorClaimStepLevel.step || requestorClaimStepLevel.levelNumber || requestorClaimStepLevel.level_number));
-                          
-                          if (!isRequestorClaimStep) return null;
-                          
-                          // Check if user is the initiator or the Requestor Claim Approval approver
-                          const requestorClaimApproverEmail = (requestorClaimStepLevel?.approverEmail || '').toLowerCase();
-                          const isRequestorClaimApprover = requestorClaimApproverEmail && userEmail === requestorClaimApproverEmail;
-                          
-                          if (!(isInitiator || isRequestorClaimApprover)) return null;
-                          
-                          return (
-                            <Button
-                              className="bg-indigo-600 hover:bg-indigo-700"
-                              onClick={() => {
-                                setShowDMSPushModal(true);
-                              }}
-                            >
-                              <Activity className="w-4 h-4 mr-2" />
-                              Push to DMS
-                            </Button>
-                          );
-                        })()}
+                              if (!isInitiatorActionStep || !isUserInitiator) return null;
 
-                        {/* Step 8: View & Send Credit Note - Only for finance approver or step 8 approver */}
-                        {step.step === 8 && (() => {
-                          const step8Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 8);
-                          const step8ApproverEmail = (step8Level?.approverEmail || '').toLowerCase();
-                          const isStep8Approver = step8ApproverEmail && userEmail === step8ApproverEmail;
-                          // Also check if user has finance role
-                          const userRole = (user as any)?.role?.toUpperCase() || '';
-                          const isFinanceUser = userRole === 'FINANCE' || userRole === 'ADMIN';
-                          return isStep8Approver || isFinanceUser;
-                        })() && (
-                          <Button
-                            className="bg-green-600 hover:bg-green-700"
-                            onClick={() => {
-                              setShowCreditNoteModal(true);
-                            }}
-                          >
-                            <Receipt className="w-4 h-4 mr-2" />
-                            View & Send Credit Note
-                          </Button>
-                        )}
+                              const handleDirectAction = async (action: 'REVISE' | 'REOPEN') => {
+                                try {
+                                  if (!request?.id && !request?.requestId) {
+                                    throw new Error('Request ID not found');
+                                  }
+                                  const requestId = request.requestId || request.id;
 
-                        {/* Additional Approvers: Show approve/reject buttons for steps that don't have specific workflow actions */}
-                        {(() => {
-                          // Check if this is an additional approver step (not one of the fixed workflow steps)
-                          const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
-                          const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
-                          const isAdditionalApprover = levelName.includes('additional approver');
-                          
-                          // Check if this step doesn't have any of the specific workflow action buttons above
-                          const hasSpecificWorkflowAction = 
-                            step.step === 1 || 
-                            step.step === initiatorStepNumber ||
-                            (() => {
+                                  // Call action directly without modal - comments are optional
+                                  await handleInitiatorAction(requestId, action, { reason: '' });
+                                  toast.success(`Action "${action === 'REVISE' ? 'Revision Requested' : 'Request Reopened'}" performed successfully`);
+                                  handleRefresh();
+                                } catch (error: any) {
+                                  console.error('Failed to perform initiator action:', error);
+                                  const errorMessage = error?.response?.data?.message || error?.message || 'Failed to perform action';
+                                  toast.error(errorMessage);
+                                }
+                              };
+
+                              return (
+                                <div className="flex flex-wrap gap-2">
+                                  <Button
+                                    variant="outline"
+                                    className="border-orange-500 text-orange-600 hover:bg-orange-50"
+                                    onClick={() => handleDirectAction('REVISE')}
+                                  >
+                                    <RefreshCw className="w-4 h-4 mr-2" />
+                                    Request Re-quotation
+                                  </Button>
+                                  <Button
+                                    variant="outline"
+                                    className="border-blue-500 text-blue-600 hover:bg-blue-50"
+                                    onClick={() => handleDirectAction('REOPEN')}
+                                  >
+                                    <RotateCw className="w-4 h-4 mr-2" />
+                                    Reopen
+                                  </Button>
+                                </div>
+                              );
+                            })()}
+
+                            {/* Department Lead Step: Approve and Organise IO - Find dynamically by levelName */}
+                            {(() => {
+                              // Find Department Lead step dynamically (handles step shifts)
                               const deptLeadStepLevel = approvalFlow.find((l: any) => {
-                                const ln = (l.levelName || '').toLowerCase();
-                                return ln.includes('department lead');
+                                const levelName = (l.levelName || '').toLowerCase();
+                                return levelName.includes('department lead');
                               });
-                              return deptLeadStepLevel && 
+
+                              // Check if this is the Department Lead step
+                              const isDeptLeadStep = deptLeadStepLevel &&
                                 (step.step === (deptLeadStepLevel.step || deptLeadStepLevel.levelNumber || deptLeadStepLevel.level_number));
-                            })() ||
-                            (() => {
+
+                              if (!isDeptLeadStep) return null;
+
+                              // Check if user is the Department Lead approver
+                              const deptLeadApproverEmail = (deptLeadStepLevel?.approverEmail || '').toLowerCase();
+                              const isDeptLeadApprover = deptLeadApproverEmail && userEmail === deptLeadApproverEmail;
+
+                              if (!(isDeptLeadApprover || isStep3Approver || isCurrentApprover)) return null;
+
+                              // Check if IO number is available (same way as IO tab and modal)
+                              const internalOrder = request?.internalOrder || request?.internal_order;
+                              const ioNumber = internalOrder?.ioNumber || internalOrder?.io_number || request?.ioNumber || '';
+                              const hasIONumber = ioNumber && ioNumber.trim() !== '';
+
+                              return (
+                                <div className="space-y-1">
+                                  <Button
+                                    className="bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    onClick={() => {
+                                      setShowIOApprovalModal(true);
+                                    }}
+                                    disabled={!hasIONumber}
+                                  >
+                                    <CheckCircle className="w-4 h-4 mr-2" />
+                                    Review and Approve
+                                  </Button>
+                                  {!hasIONumber && (
+                                    <p className="text-xs text-amber-600">
+                                      Please add an IO number in the IO tab before approving this step.
+                                    </p>
+                                  )}
+                                </div>
+                              );
+                            })()}
+
+                            {/* Step 5 (or shifted step): Upload Completion Documents - Only for dealer */}
+                            {/* Check if dealer is the approver for this step (handles step shifts) */}
+                            {(() => {
+                              // Find the step level from approvalFlow to verify dealer is the approver
                               const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
                               const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
+                              // Check if dealer is the approver for this step
                               const isDealerForThisStep = isDealer && stepApproverEmail === dealerEmail;
-                              const ln = (stepLevel?.levelName || step.title || '').toLowerCase();
-                              const isDealerCompletionStep = ln.includes('dealer completion') || ln.includes('completion documents');
+                              // Check if this is the Dealer Completion Documents step
+                              // by checking if the levelName contains "Dealer Completion" or "Completion Documents"
+                              const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
+                              const isDealerCompletionStep = levelName.includes('dealer completion') ||
+                                levelName.includes('completion documents');
                               return isDealerForThisStep && isDealerCompletionStep;
-                            })() ||
-                            (() => {
+                            })() && (
+                                <Button
+                                  className="bg-purple-600 hover:bg-purple-700"
+                                  onClick={() => {
+                                    setShowCompletionModal(true);
+                                  }}
+                                >
+                                  <Upload className="w-4 h-4 mr-2" />
+                                  Upload Completion Docs
+                                </Button>
+                              )}
+
+                            {/* Requestor Claim Approval: Push to DMS - Find dynamically by levelName (handles step shifts) */}
+                            {(() => {
+                              // Find Requestor Claim Approval step dynamically (handles step shifts)
                               const requestorClaimStepLevel = approvalFlow.find((l: any) => {
-                                const ln = (l.levelName || '').toLowerCase();
-                                return ln.includes('requestor claim') || ln.includes('requestor - claim');
+                                const levelName = (l.levelName || '').toLowerCase();
+                                return levelName.includes('requestor claim') || levelName.includes('requestor - claim');
                               });
-                              return requestorClaimStepLevel && 
+
+                              // Check if this is the Requestor Claim Approval step
+                              const isRequestorClaimStep = requestorClaimStepLevel &&
                                 (step.step === (requestorClaimStepLevel.step || requestorClaimStepLevel.levelNumber || requestorClaimStepLevel.level_number));
-                            })() ||
-                            step.step === 8;
-                          
-                          // Show "Review Request" button for additional approvers or steps without specific workflow actions
-                          // Similar to the requestor approval step
-                          if (isAdditionalApprover || !hasSpecificWorkflowAction) {
-                            const levelId = stepLevel?.levelId || stepLevel?.level_id;
-                            
-                            // Show review modal with both approve and reject options
-                            if (levelId) {
-                              const levelName = stepLevel?.levelName || stepLevel?.level_name || step.title || 'Approval Level';
-                              const approverName = stepLevel?.approverName || stepLevel?.approver_name || step.approver || 'Approver';
+
+                              if (!isRequestorClaimStep) return null;
+
+                              // Check if user is the initiator or the Requestor Claim Approval approver
+                              const requestorClaimApproverEmail = (requestorClaimStepLevel?.approverEmail || '').toLowerCase();
+                              const isRequestorClaimApprover = requestorClaimApproverEmail && userEmail === requestorClaimApproverEmail;
+
+                              if (!(isInitiator || isRequestorClaimApprover)) return null;
+
                               return (
                                 <Button
-                                  className="bg-blue-600 hover:bg-blue-700"
+                                  className="bg-indigo-600 hover:bg-indigo-700"
                                   onClick={() => {
-                                    setSelectedLevelForReview({ levelId, levelName, approverName });
-                                    setShowAdditionalApproverReviewModal(true);
+                                    setShowDMSPushModal(true);
                                   }}
                                 >
-                                  <CheckCircle className="w-4 h-4 mr-2" />
-                                  Review Request
+                                  <Activity className="w-4 h-4 mr-2" />
+                                  Push to DMS
                                 </Button>
                               );
-                            }
-                            
-                            // Fallback: Direct API call if levelId not available (shouldn't happen in normal flow)
-                            return (
-                              <>
+                            })()}
+
+                            {/* Step 8: View & Send Credit Note - Only for finance approver or step 8 approver */}
+                            {step.step === 8 && (() => {
+                              const step8Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 8);
+                              const step8ApproverEmail = (step8Level?.approverEmail || '').toLowerCase();
+                              const isStep8Approver = step8ApproverEmail && userEmail === step8ApproverEmail;
+                              // Also check if user has finance role
+                              const userRole = (user as any)?.role?.toUpperCase() || '';
+                              const isFinanceUser = userRole === 'FINANCE' || userRole === 'ADMIN';
+                              return isStep8Approver || isFinanceUser;
+                            })() && (
                                 <Button
                                   className="bg-green-600 hover:bg-green-700"
-                                  onClick={async () => {
-                                    try {
-                                      if (!request?.id && !request?.requestId) {
-                                        throw new Error('Request ID not found');
-                                      }
-                                      const requestId = request.id || request.requestId;
-                                      if (!levelId) {
-                                        toast.error('Approval level not found');
-                                        return;
-                                      }
-                                      await approveLevel(requestId, levelId, '');
-                                      toast.success('Request approved successfully');
-                                      handleRefresh();
-                                    } catch (error: any) {
-                                      console.error('Failed to approve:', error);
-                                      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
-                                      toast.error(errorMessage);
-                                    }
+                                  onClick={() => {
+                                    setShowCreditNoteModal(true);
                                   }}
                                 >
-                                  <CheckCircle className="w-4 h-4 mr-2" />
-                                  Approve
+                                  <Receipt className="w-4 h-4 mr-2" />
+                                  View & Send Credit Note
                                 </Button>
-                                <Button
-                                  variant="destructive"
-                                  onClick={async () => {
-                                    try {
-                                      if (!request?.id && !request?.requestId) {
-                                        throw new Error('Request ID not found');
-                                      }
-                                      const requestId = request.id || request.requestId;
-                                      if (!levelId) {
-                                        toast.error('Approval level not found');
-                                        return;
-                                      }
-                                      const comments = prompt('Please provide a reason for rejection:');
-                                      if (comments === null) return; // User cancelled
-                                      await rejectLevel(requestId, levelId, 'Request rejected', comments);
-                                      toast.success('Request rejected successfully');
-                                      handleRefresh();
-                                    } catch (error: any) {
-                                      console.error('Failed to reject:', error);
-                                      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
-                                      toast.error(errorMessage);
-                                    }
-                                  }}
-                                >
-                                  <XCircle className="w-4 h-4 mr-2" />
-                                  Reject
-                                </Button>
-                              </>
-                            );
-                          }
-                          return null;
-                        })()}
-                      </div>
-                    )}
+                              )}
 
-                    {/* Approved Date */}
-                    {step.approvedAt && (
-                      <p className="text-xs text-gray-500 mt-2">
-                        Approved on {formatDateSafe(step.approvedAt)}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
+                            {/* Additional Approvers: Show approve/reject buttons for steps that don't have specific workflow actions */}
+                            {(() => {
+                              // Check if this is an additional approver step (not one of the fixed workflow steps)
+                              const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+                              const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
+                              const isAdditionalApprover = levelName.includes('additional approver');
 
-    {/* Dealer Proposal Submission Modal */}
-    <DealerProposalSubmissionModal
-      isOpen={showProposalModal}
-      onClose={() => setShowProposalModal(false)}
-      onSubmit={handleProposalSubmit}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-      previousProposalData={versionHistory?.find(v => v.snapshotType === 'PROPOSAL')?.snapshotData}
-      documentPolicy={documentPolicy}
-    />
+                              // Check if this step doesn't have any of the specific workflow action buttons above
+                              const hasSpecificWorkflowAction =
+                                step.step === 1 ||
+                                step.step === initiatorStepNumber ||
+                                (() => {
+                                  const deptLeadStepLevel = approvalFlow.find((l: any) => {
+                                    const ln = (l.levelName || '').toLowerCase();
+                                    return ln.includes('department lead');
+                                  });
+                                  return deptLeadStepLevel &&
+                                    (step.step === (deptLeadStepLevel.step || deptLeadStepLevel.levelNumber || deptLeadStepLevel.level_number));
+                                })() ||
+                                (() => {
+                                  const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+                                  const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
+                                  const isDealerForThisStep = isDealer && stepApproverEmail === dealerEmail;
+                                  const ln = (stepLevel?.levelName || step.title || '').toLowerCase();
+                                  const isDealerCompletionStep = ln.includes('dealer completion') || ln.includes('completion documents');
+                                  return isDealerForThisStep && isDealerCompletionStep;
+                                })() ||
+                                (() => {
+                                  const requestorClaimStepLevel = approvalFlow.find((l: any) => {
+                                    const ln = (l.levelName || '').toLowerCase();
+                                    return ln.includes('requestor claim') || ln.includes('requestor - claim');
+                                  });
+                                  return requestorClaimStepLevel &&
+                                    (step.step === (requestorClaimStepLevel.step || requestorClaimStepLevel.levelNumber || requestorClaimStepLevel.level_number));
+                                })() ||
+                                step.step === 8;
 
-    {/* Initiator Proposal Approval Modal */}
-    <InitiatorProposalApprovalModal
-      isOpen={showApprovalModal}
-      onClose={() => {
-        setShowApprovalModal(false);
-      }}
-      onApprove={handleProposalApprove}
-      onReject={handleProposalReject}
-      onRequestRevision={handleProposalRevision}
-      proposalData={proposalData}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-      request={request}
-      previousProposalData={(() => {
-        const proposalSnapshots = versionHistory?.filter(v => v.snapshotType === 'PROPOSAL') || [];
-        // Since history is sorted descending (most recent first):
-        // proposalSnapshots[0] is the current proposal being reviewed
-        // proposalSnapshots[1] is the previous proposal (last iteration - 1)
-        return proposalSnapshots.length > 1 ? proposalSnapshots[1].snapshotData : null;
-      })()}
-    />
+                              // Show "Review Request" button for additional approvers or steps without specific workflow actions
+                              // Similar to the requestor approval step
+                              if (isAdditionalApprover || !hasSpecificWorkflowAction) {
+                                const levelId = stepLevel?.levelId || stepLevel?.level_id;
 
-    {/* Dept Lead IO Approval Modal */}
-    <DeptLeadIOApprovalModal
-      isOpen={showIOApprovalModal}
-      onClose={() => setShowIOApprovalModal(false)}
-      onApprove={handleIOApproval}
-      onReject={handleIORejection}
-      requestTitle={request?.title}
-      requestId={request?.id || request?.requestId}
-      preFilledIONumber={request?.internalOrder?.ioNumber || request?.internalOrder?.io_number || request?.internal_order?.ioNumber || request?.internal_order?.io_number || undefined}
-      preFilledBlockedAmount={request?.internalOrder?.ioBlockedAmount || request?.internalOrder?.io_blocked_amount || request?.internal_order?.ioBlockedAmount || request?.internal_order?.io_blocked_amount || undefined}
-      preFilledRemainingBalance={request?.internalOrder?.ioRemainingBalance || request?.internalOrder?.io_remaining_balance || request?.internal_order?.ioRemainingBalance || request?.internal_order?.io_remaining_balance || undefined}
-    />
+                                // Show review modal with both approve and reject options
+                                if (levelId) {
+                                  const levelName = stepLevel?.levelName || stepLevel?.level_name || step.title || 'Approval Level';
+                                  const approverName = stepLevel?.approverName || stepLevel?.approver_name || step.approver || 'Approver';
+                                  return (
+                                    <Button
+                                      className="bg-blue-600 hover:bg-blue-700"
+                                      onClick={() => {
+                                        setSelectedLevelForReview({ levelId, levelName, approverName });
+                                        setShowAdditionalApproverReviewModal(true);
+                                      }}
+                                    >
+                                      <CheckCircle className="w-4 h-4 mr-2" />
+                                      Review Request
+                                    </Button>
+                                  );
+                                }
 
-    {/* Dealer Completion Documents Modal */}
-    <DealerCompletionDocumentsModal
-      isOpen={showCompletionModal}
-      onClose={() => setShowCompletionModal(false)}
-      onSubmit={handleCompletionSubmit}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-      documentPolicy={documentPolicy}
-    />
-
-    {/* DMS Push Modal */}
-    <DMSPushModal
-      isOpen={showDMSPushModal}
-      onClose={() => setShowDMSPushModal(false)}
-      onPush={handleDMSPush}
-      completionDetails={{
-        activityCompletionDate: request?.completionDetails?.activityCompletionDate || request?.completionDetails?.activity_completion_date,
-        numberOfParticipants: request?.completionDetails?.numberOfParticipants || request?.completionDetails?.number_of_participants,
-        closedExpenses: request?.completionExpenses || request?.completion_expenses || request?.completionDetails?.closedExpenses || request?.completionDetails?.closed_expenses,
-        totalClosedExpenses: request?.budgetTracking?.closedExpenses || request?.budgetTracking?.closed_expenses || request?.completionDetails?.totalClosedExpenses || request?.completionDetails?.total_closed_expenses,
-        completionDescription: request?.completionDetails?.completionDescription || request?.completionDetails?.completion_description,
-      }}
-      ioDetails={{
-        ioNumber: request?.internalOrder?.ioNumber || request?.internalOrder?.io_number || request?.internal_order?.ioNumber || request?.internal_order?.io_number,
-        blockedAmount: request?.internalOrder?.ioBlockedAmount || request?.internalOrder?.io_blocked_amount || request?.internal_order?.ioBlockedAmount || request?.internal_order?.io_blocked_amount,
-        availableBalance: request?.internalOrder?.ioAvailableBalance || request?.internalOrder?.io_available_balance || request?.internal_order?.ioAvailableBalance || request?.internal_order?.io_available_balance,
-        remainingBalance: request?.internalOrder?.ioRemainingBalance || request?.internalOrder?.io_remaining_balance || request?.internal_order?.ioRemainingBalance || request?.internal_order?.io_remaining_balance,
-      }}
-      completionDocuments={completionDocumentsData}
-      requestTitle={request?.title}
-      requestNumber={request?.requestNumber || request?.request_number || request?.id}
-    />
-
-    {/* Credit Note from SAP Modal (Step 8) */}
-    <CreditNoteSAPModal
-      isOpen={showCreditNoteModal}
-      onClose={() => setShowCreditNoteModal(false)}
-      onDownload={async () => {
-        // TODO: Implement download functionality
-        toast.info('Download functionality will be implemented');
-      }}
-      onSendToDealer={async () => {
-        try {
-          const requestId = request?.requestId || request?.id;
-          if (!requestId) {
-            toast.error('Request ID not found');
-            return;
-          }
-          
-          await sendCreditNoteToDealer(requestId);
-          
-          toast.success('Credit note sent to dealer successfully. Step 8 has been approved.');
-          
-          // Refresh the request details to show updated status
-          if (onRefresh) {
-            onRefresh();
-          }
-        } catch (error: any) {
-          console.error('Failed to send credit note to dealer:', error);
-          const errorMessage = error?.response?.data?.message || error?.message || 'Failed to send credit note to dealer';
-          toast.error(errorMessage);
-        }
-      }}
-      creditNoteData={{
-        creditNoteNumber: (request as any)?.creditNote?.creditNoteNumber || 
-                         (request as any)?.creditNote?.credit_note_number ||
-                         (request as any)?.claimDetails?.creditNote?.creditNoteNumber ||
-                         (request as any)?.claimDetails?.creditNoteNumber || 
-                         (request as any)?.claimDetails?.credit_note_number,
-        creditNoteDate: (request as any)?.creditNote?.creditNoteDate || 
-                       (request as any)?.creditNote?.credit_note_date ||
-                       (request as any)?.claimDetails?.creditNote?.creditNoteDate ||
-                       (request as any)?.claimDetails?.creditNoteDate || 
-                       (request as any)?.claimDetails?.credit_note_date,
-        creditNoteAmount: (request as any)?.creditNote?.creditNoteAmount ? 
-                         Number((request as any)?.creditNote?.creditNoteAmount) :
-                         ((request as any)?.creditNote?.credit_note_amount ? 
-                          Number((request as any)?.creditNote?.credit_note_amount) :
-                         ((request as any)?.claimDetails?.creditNote?.creditNoteAmount ? 
-                          Number((request as any)?.claimDetails?.creditNote?.creditNoteAmount) :
-                         ((request as any)?.claimDetails?.creditNoteAmount ? 
-                          Number((request as any)?.claimDetails?.creditNoteAmount) : 
-                         ((request as any)?.claimDetails?.credit_note_amount ? 
-                          Number((request as any)?.claimDetails?.credit_note_amount) : undefined)))),
-        status: (request as any)?.creditNote?.status || 
-                (request as any)?.claimDetails?.creditNote?.status ||
-                ((request as any)?.creditNote?.creditNoteNumber ? 'CONFIRMED' : 'PENDING'),
-      }}
-      dealerInfo={{
-        dealerName: (request as any)?.claimDetails?.dealerName || (request as any)?.claimDetails?.dealer_name,
-        dealerCode: (request as any)?.claimDetails?.dealerCode || (request as any)?.claimDetails?.dealer_code,
-        dealerEmail: (request as any)?.claimDetails?.dealerEmail || (request as any)?.claimDetails?.dealer_email,
-      }}
-      activityName={(request as any)?.claimDetails?.activityName || (request as any)?.claimDetails?.activity_name}
-      requestNumber={request?.requestNumber || request?.id}
-      requestId={request?.requestId || request?.id}
-      dueDate={request?.dueDate}
-    />
-
-    {/* Email Notification Template Modal */}
-    <EmailNotificationTemplateModal
-      isOpen={showEmailTemplateModal}
-      onClose={() => {
-        setShowEmailTemplateModal(false);
-        setSelectedStepForEmail(null);
-      }}
-      stepNumber={selectedStepForEmail?.stepNumber || 4}
-      stepName={selectedStepForEmail?.stepName || 'Activity Creation'}
-      requestNumber={request?.requestNumber || request?.id || request?.request_number}
-      recipientEmail="system@royalenfield.com"
-    />
-
-    {/* Additional Approver Review Modal */}
-    {selectedLevelForReview && (
-      <AdditionalApproverReviewModal
-        isOpen={showAdditionalApproverReviewModal}
-        onClose={() => {
-          setShowAdditionalApproverReviewModal(false);
-          setSelectedLevelForReview(null);
-        }}
-        onApprove={async (comments: string) => {
-          try {
-            if (!request?.id && !request?.requestId) {
-              throw new Error('Request ID not found');
-            }
-            const requestId = request.id || request.requestId;
-            const levelId = selectedLevelForReview.levelId;
-            if (!levelId) {
-              toast.error('Approval level not found');
-              return;
-            }
-            await approveLevel(requestId, levelId, comments);
-            toast.success('Request approved successfully');
-            handleRefresh();
-            setShowAdditionalApproverReviewModal(false);
-            setSelectedLevelForReview(null);
-          } catch (error: any) {
-            console.error('Failed to approve:', error);
-            const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
-            toast.error(errorMessage);
-            throw error;
-          }
-        }}
-        onReject={async (comments: string) => {
-          try {
-            if (!request?.id && !request?.requestId) {
-              throw new Error('Request ID not found');
-            }
-            const requestId = request.id || request.requestId;
-            const levelId = selectedLevelForReview.levelId;
-            if (!levelId) {
-              toast.error('Approval level not found');
-              return;
-            }
-            await rejectLevel(requestId, levelId, 'Request rejected', comments);
-            toast.success('Request rejected successfully');
-            handleRefresh();
-            setShowAdditionalApproverReviewModal(false);
-            setSelectedLevelForReview(null);
-          } catch (error: any) {
-            console.error('Failed to reject:', error);
-            const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
-            toast.error(errorMessage);
-            throw error;
-          }
-        }}
-        requestTitle={request?.title || 'Request'}
-        requestDescription={request?.description || ''}
-        requestId={request?.id || request?.requestId}
-        levelName={selectedLevelForReview.levelName}
-        approverName={selectedLevelForReview.approverName}
-      />
-    )}
-
-    {/* Initiator Action Modal - Removed, actions are now direct buttons in step card */}
-
-    {/* Version History Section */}
-    {versionHistory && versionHistory.length > 0 && (
-      <Card className="mt-6 border-amber-100 bg-amber-50/30">
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-sm font-bold flex items-center gap-2 text-amber-900">
-              <Activity className="w-4 h-4" />
-              Revision History & Audit Trail
-            </CardTitle>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={() => setShowHistory(!showHistory)}
-              className="text-amber-700 hover:text-amber-800 hover:bg-amber-100"
-            >
-              {showHistory ? 'Hide History' : 'View History'}
-            </Button>
-          </div>
-          <CardDescription className="text-xs text-amber-700">
-            Records of all revisions and actions taken on this request
-          </CardDescription>
-        </CardHeader>
-        {showHistory && (
-          <CardContent>
-            <div className="space-y-4">
-              {versionHistory.map((item, idx) => (
-                <div key={item.historyId || idx} className="relative pl-6 pb-4 border-l-2 border-amber-200 last:border-0 last:pb-0">
-                  <div className="absolute left-[-9px] top-0 w-4 h-4 rounded-full bg-amber-500 border-2 border-white shadow-sm" />
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-xs font-bold text-amber-900">
-                          Version {item.version}
-                        </span>
-                        {item.snapshotType && (
-                          <Badge className="bg-blue-100 text-blue-700 text-[9px] px-1.5 py-0">
-                            {item.snapshotType}
-                          </Badge>
-                        )}
-                        {item.levelNumber && (
-                          <Badge className="bg-gray-100 text-gray-600 text-[9px] px-1.5 py-0">
-                            Step {item.levelNumber}
-                          </Badge>
-                        )}
-                      </div>
-                      <span className="text-[10px] text-amber-600 font-medium bg-amber-100 px-2 py-0.5 rounded-full">
-                        {formatDateSafe(item.createdAt)}
-                      </span>
-                    </div>
-                    <p className="text-xs font-medium text-gray-800">
-                      {item.changeReason || 'Version Update'}
-                    </p>
-                    <div className="flex items-center gap-1.5 mt-1">
-                      <div className="w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center">
-                        <span className="text-[8px] font-bold text-blue-600">
-                          {item.changer?.displayName?.charAt(0) || 'U'}
-                        </span>
-                      </div>
-                      <span className="text-xs text-gray-500">
-                        By {item.changer?.displayName || item.changer?.email || 'Unknown User'}
-                      </span>
-                    </div>
-                    {/* Show snapshot details based on type - JSONB structure */}
-                    {item.snapshotType === 'PROPOSAL' && item.snapshotData && (
-                      <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
-                        <p className="font-semibold text-gray-700 mb-1">Proposal:</p>
-                        {item.snapshotData.documentUrl && (
-                          <div className="flex items-center gap-2 mb-1">
-                            <Button
-                              variant="link"
-                              size="sm"
-                              className="h-auto p-0 text-blue-600 hover:text-blue-700 font-small flex items-center gap-1"
-                              onClick={() => setViewSnapshot({
-                                data: item.snapshotData,
-                                type: 'PROPOSAL',
-                                title: `Historical Proposal (Version ${item.version})`
-                              })}
-                            >
-                              View Details
-                              <Eye className="w-2 h-2" />
-                            </Button>
+                                // Fallback: Direct API call if levelId not available (shouldn't happen in normal flow)
+                                return (
+                                  <>
+                                    <Button
+                                      className="bg-green-600 hover:bg-green-700"
+                                      onClick={async () => {
+                                        try {
+                                          if (!request?.id && !request?.requestId) {
+                                            throw new Error('Request ID not found');
+                                          }
+                                          const requestId = request.id || request.requestId;
+                                          if (!levelId) {
+                                            toast.error('Approval level not found');
+                                            return;
+                                          }
+                                          await approveLevel(requestId, levelId, '');
+                                          toast.success('Request approved successfully');
+                                          handleRefresh();
+                                        } catch (error: any) {
+                                          console.error('Failed to approve:', error);
+                                          const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
+                                          toast.error(errorMessage);
+                                        }
+                                      }}
+                                    >
+                                      <CheckCircle className="w-4 h-4 mr-2" />
+                                      Approve
+                                    </Button>
+                                    <Button
+                                      variant="destructive"
+                                      onClick={async () => {
+                                        try {
+                                          if (!request?.id && !request?.requestId) {
+                                            throw new Error('Request ID not found');
+                                          }
+                                          const requestId = request.id || request.requestId;
+                                          if (!levelId) {
+                                            toast.error('Approval level not found');
+                                            return;
+                                          }
+                                          const comments = prompt('Please provide a reason for rejection:');
+                                          if (comments === null) return; // User cancelled
+                                          await rejectLevel(requestId, levelId, 'Request rejected', comments);
+                                          toast.success('Request rejected successfully');
+                                          handleRefresh();
+                                        } catch (error: any) {
+                                          console.error('Failed to reject:', error);
+                                          const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
+                                          toast.error(errorMessage);
+                                        }
+                                      }}
+                                    >
+                                      <XCircle className="w-4 h-4 mr-2" />
+                                      Reject
+                                    </Button>
+                                  </>
+                                );
+                              }
+                              return null;
+                            })()}
                           </div>
                         )}
-                        <p className="text-gray-600">Budget: ₹{Number(item.snapshotData.totalBudget || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
-                        {item.snapshotData.comments && (
-                          <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
-                        )}
-                      </div>
-                    )}
-                    {item.snapshotType === 'COMPLETION' && item.snapshotData && (
-                      <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
-                        <p className="font-semibold text-gray-700 mb-1">Completion:</p>
-                        {item.snapshotData.documentUrl && (
-                          <div className="flex items-center gap-2 mb-1">
-                            <Button
-                              variant="link"
-                              size="sm"
-                              className="h-auto p-0 text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1"
-                              onClick={() => setViewSnapshot({
-                                data: item.snapshotData,
-                                type: 'COMPLETION',
-                                title: `Historical Completion (Version ${item.version})`
-                              })}
-                            >
-                              View Details
-                              <Eye className="w-3 h-3" />
-                            </Button>
-                          </div>
-                        )}
-                        <p className="text-gray-600">Total Expenses: ₹{Number(item.snapshotData.totalExpenses || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
-                        {item.snapshotData.comments && (
-                          <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
-                        )}
-                      </div>
-                    )}
-                    {item.snapshotType === 'INTERNAL_ORDER' && item.snapshotData && (
-                      <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
-                        <p className="font-semibold text-gray-700 mb-1">IO Block:</p>
-                        <p className="text-gray-600">IO Number: {item.snapshotData.ioNumber || 'N/A'}</p>
-                        <p className="text-gray-600">Blocked: ₹{Number(item.snapshotData.blockedAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
-                        {item.snapshotData.sapDocumentNumber && (
-                          <p className="text-gray-600">SAP Doc: {item.snapshotData.sapDocumentNumber}</p>
-                        )}
-                      </div>
-                    )}
-                    {item.snapshotType === 'APPROVE' && item.snapshotData && (
-                      <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
-                        <p className="font-semibold text-gray-700 mb-1">
-                          {item.snapshotData.action === 'APPROVE' ? 'Approval' : 'Rejection'}:
+
+                      {/* Approved Date */}
+                      {step.approvedAt && (
+                        <p className="text-xs text-gray-500 mt-2">
+                          Approved on {formatDateSafe(step.approvedAt)}
                         </p>
-                        <p className="text-gray-600">By: {item.snapshotData.approverName || item.snapshotData.approverEmail || 'Unknown'}</p>
-                        {item.snapshotData.levelName && (
-                          <p className="text-gray-600">Level: {item.snapshotData.levelName}</p>
-                        )}
-                        {item.snapshotData.comments && (
-                          <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
-                        )}
-                        {item.snapshotData.rejectionReason && (
-                          <p className="text-red-600 mt-1">Rejection Reason: {item.snapshotData.rejectionReason.substring(0, 80)}{item.snapshotData.rejectionReason.length > 80 ? '...' : ''}</p>
-                        )}
-                      </div>
-                    )}
-                    {item.snapshotType === 'WORKFLOW' && item.snapshotData && (
-                      <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
-                        <p className="font-semibold text-gray-700 mb-1">Workflow:</p>
-                        <p className="text-gray-600">Status: {item.snapshotData.status || 'N/A'}</p>
-                        {item.snapshotData.currentLevel && (
-                          <p className="text-gray-600">Current Level: {item.snapshotData.currentLevel}</p>
-                        )}
-                      </div>
-                    )}
+                      )}
+                    </div>
                   </div>
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        )}
+              );
+            })}
+          </div>
+        </CardContent>
       </Card>
-    )}
-    
-    <SnapshotDetailsModal
-      isOpen={!!viewSnapshot}
-      onClose={() => setViewSnapshot(null)}
-      snapshot={viewSnapshot?.data}
-      type={viewSnapshot?.type || 'PROPOSAL'}
-      title={viewSnapshot?.title}
-    />
+
+      {/* Dealer Proposal Submission Modal */}
+      <DealerProposalSubmissionModal
+        isOpen={showProposalModal}
+        onClose={() => setShowProposalModal(false)}
+        onSubmit={handleProposalSubmit}
+        dealerName={dealerName}
+        activityName={activityName}
+        requestId={request?.id || request?.requestId}
+        previousProposalData={versionHistory?.find(v => v.snapshotType === 'PROPOSAL')?.snapshotData}
+        documentPolicy={documentPolicy}
+      />
+
+      {/* Initiator Proposal Approval Modal */}
+      <InitiatorProposalApprovalModal
+        isOpen={showApprovalModal}
+        onClose={() => {
+          setShowApprovalModal(false);
+        }}
+        onApprove={handleProposalApprove}
+        onReject={handleProposalReject}
+        onRequestRevision={handleProposalRevision}
+        proposalData={proposalData}
+        dealerName={dealerName}
+        activityName={activityName}
+        requestId={request?.id || request?.requestId}
+        request={request}
+        previousProposalData={(() => {
+          const proposalSnapshots = versionHistory?.filter(v => v.snapshotType === 'PROPOSAL') || [];
+          // Since history is sorted descending (most recent first):
+          // proposalSnapshots[0] is the current proposal being reviewed
+          // proposalSnapshots[1] is the previous proposal (last iteration - 1)
+          return proposalSnapshots.length > 1 ? proposalSnapshots[1].snapshotData : null;
+        })()}
+      />
+
+      {/* Dept Lead IO Approval Modal */}
+      <DeptLeadIOApprovalModal
+        isOpen={showIOApprovalModal}
+        onClose={() => setShowIOApprovalModal(false)}
+        onApprove={handleIOApproval}
+        onReject={handleIORejection}
+        requestTitle={request?.title}
+        requestId={request?.id || request?.requestId}
+        preFilledIONumber={request?.internalOrder?.ioNumber || request?.internalOrder?.io_number || request?.internal_order?.ioNumber || request?.internal_order?.io_number || undefined}
+        preFilledBlockedAmount={request?.internalOrder?.ioBlockedAmount || request?.internalOrder?.io_blocked_amount || request?.internal_order?.ioBlockedAmount || request?.internal_order?.io_blocked_amount || undefined}
+        preFilledRemainingBalance={request?.internalOrder?.ioRemainingBalance || request?.internalOrder?.io_remaining_balance || request?.internal_order?.ioRemainingBalance || request?.internal_order?.io_remaining_balance || undefined}
+      />
+
+      {/* Dealer Completion Documents Modal */}
+      <DealerCompletionDocumentsModal
+        isOpen={showCompletionModal}
+        onClose={() => setShowCompletionModal(false)}
+        onSubmit={handleCompletionSubmit}
+        dealerName={dealerName}
+        activityName={activityName}
+        requestId={request?.id || request?.requestId}
+        documentPolicy={documentPolicy}
+      />
+
+      {/* DMS Push Modal */}
+      <DMSPushModal
+        isOpen={showDMSPushModal}
+        onClose={() => setShowDMSPushModal(false)}
+        onPush={handleDMSPush}
+        completionDetails={{
+          activityCompletionDate: request?.completionDetails?.activityCompletionDate || request?.completionDetails?.activity_completion_date,
+          numberOfParticipants: request?.completionDetails?.numberOfParticipants || request?.completionDetails?.number_of_participants,
+          closedExpenses: request?.completionExpenses || request?.completion_expenses || request?.completionDetails?.closedExpenses || request?.completionDetails?.closed_expenses,
+          totalClosedExpenses: request?.budgetTracking?.closedExpenses || request?.budgetTracking?.closed_expenses || request?.completionDetails?.totalClosedExpenses || request?.completionDetails?.total_closed_expenses,
+          completionDescription: request?.completionDetails?.completionDescription || request?.completionDetails?.completion_description,
+        }}
+        ioDetails={{
+          ioNumber: request?.internalOrder?.ioNumber || request?.internalOrder?.io_number || request?.internal_order?.ioNumber || request?.internal_order?.io_number,
+          blockedAmount: request?.internalOrder?.ioBlockedAmount || request?.internalOrder?.io_blocked_amount || request?.internal_order?.ioBlockedAmount || request?.internal_order?.io_blocked_amount,
+          availableBalance: request?.internalOrder?.ioAvailableBalance || request?.internalOrder?.io_available_balance || request?.internal_order?.ioAvailableBalance || request?.internal_order?.io_available_balance,
+          remainingBalance: request?.internalOrder?.ioRemainingBalance || request?.internalOrder?.io_remaining_balance || request?.internal_order?.ioRemainingBalance || request?.internal_order?.io_remaining_balance,
+        }}
+        completionDocuments={completionDocumentsData}
+        requestTitle={request?.title}
+        requestNumber={request?.requestNumber || request?.request_number || request?.id}
+      />
+
+      {/* Credit Note from SAP Modal (Step 8) */}
+      <CreditNoteSAPModal
+        isOpen={showCreditNoteModal}
+        onClose={() => setShowCreditNoteModal(false)}
+        onDownload={async () => {
+          // TODO: Implement download functionality
+          toast.info('Download functionality will be implemented');
+        }}
+        onSendToDealer={async () => {
+          try {
+            const requestId = request?.requestId || request?.id;
+            if (!requestId) {
+              toast.error('Request ID not found');
+              return;
+            }
+
+            await sendCreditNoteToDealer(requestId);
+
+            toast.success('Credit note sent to dealer successfully. Step 8 has been approved.');
+
+            // Refresh the request details to show updated status
+            if (onRefresh) {
+              onRefresh();
+            }
+          } catch (error: any) {
+            console.error('Failed to send credit note to dealer:', error);
+            const errorMessage = error?.response?.data?.message || error?.message || 'Failed to send credit note to dealer';
+            toast.error(errorMessage);
+          }
+        }}
+        creditNoteData={{
+          creditNoteNumber: (request as any)?.creditNote?.creditNoteNumber ||
+            (request as any)?.creditNote?.credit_note_number ||
+            (request as any)?.claimDetails?.creditNote?.creditNoteNumber ||
+            (request as any)?.claimDetails?.creditNoteNumber ||
+            (request as any)?.claimDetails?.credit_note_number,
+          creditNoteDate: (request as any)?.creditNote?.creditNoteDate ||
+            (request as any)?.creditNote?.credit_note_date ||
+            (request as any)?.claimDetails?.creditNote?.creditNoteDate ||
+            (request as any)?.claimDetails?.creditNoteDate ||
+            (request as any)?.claimDetails?.credit_note_date,
+          creditNoteAmount: (request as any)?.creditNote?.creditNoteAmount ?
+            Number((request as any)?.creditNote?.creditNoteAmount) :
+            ((request as any)?.creditNote?.credit_note_amount ?
+              Number((request as any)?.creditNote?.credit_note_amount) :
+              ((request as any)?.claimDetails?.creditNote?.creditNoteAmount ?
+                Number((request as any)?.claimDetails?.creditNote?.creditNoteAmount) :
+                ((request as any)?.claimDetails?.creditNoteAmount ?
+                  Number((request as any)?.claimDetails?.creditNoteAmount) :
+                  ((request as any)?.claimDetails?.credit_note_amount ?
+                    Number((request as any)?.claimDetails?.credit_note_amount) : undefined)))),
+          status: (request as any)?.creditNote?.status ||
+            (request as any)?.claimDetails?.creditNote?.status ||
+            ((request as any)?.creditNote?.creditNoteNumber ? 'CONFIRMED' : 'PENDING'),
+        }}
+        dealerInfo={{
+          dealerName: (request as any)?.claimDetails?.dealerName || (request as any)?.claimDetails?.dealer_name,
+          dealerCode: (request as any)?.claimDetails?.dealerCode || (request as any)?.claimDetails?.dealer_code,
+          dealerEmail: (request as any)?.claimDetails?.dealerEmail || (request as any)?.claimDetails?.dealer_email,
+        }}
+        activityName={(request as any)?.claimDetails?.activityName || (request as any)?.claimDetails?.activity_name}
+        requestNumber={request?.requestNumber || request?.id}
+        requestId={request?.requestId || request?.id}
+        dueDate={request?.dueDate}
+      />
+
+      {/* Email Notification Template Modal */}
+      <EmailNotificationTemplateModal
+        isOpen={showEmailTemplateModal}
+        onClose={() => {
+          setShowEmailTemplateModal(false);
+          setSelectedStepForEmail(null);
+        }}
+        stepNumber={selectedStepForEmail?.stepNumber || 4}
+        stepName={selectedStepForEmail?.stepName || 'Activity Creation'}
+        requestNumber={request?.requestNumber || request?.id || request?.request_number}
+        recipientEmail="system@royalenfield.com"
+      />
+
+      {/* Additional Approver Review Modal */}
+      {selectedLevelForReview && (
+        <AdditionalApproverReviewModal
+          isOpen={showAdditionalApproverReviewModal}
+          onClose={() => {
+            setShowAdditionalApproverReviewModal(false);
+            setSelectedLevelForReview(null);
+          }}
+          onApprove={async (comments: string) => {
+            try {
+              if (!request?.id && !request?.requestId) {
+                throw new Error('Request ID not found');
+              }
+              const requestId = request.id || request.requestId;
+              const levelId = selectedLevelForReview.levelId;
+              if (!levelId) {
+                toast.error('Approval level not found');
+                return;
+              }
+              await approveLevel(requestId, levelId, comments);
+              toast.success('Request approved successfully');
+              handleRefresh();
+              setShowAdditionalApproverReviewModal(false);
+              setSelectedLevelForReview(null);
+            } catch (error: any) {
+              console.error('Failed to approve:', error);
+              const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
+              toast.error(errorMessage);
+              throw error;
+            }
+          }}
+          onReject={async (comments: string) => {
+            try {
+              if (!request?.id && !request?.requestId) {
+                throw new Error('Request ID not found');
+              }
+              const requestId = request.id || request.requestId;
+              const levelId = selectedLevelForReview.levelId;
+              if (!levelId) {
+                toast.error('Approval level not found');
+                return;
+              }
+              await rejectLevel(requestId, levelId, 'Request rejected', comments);
+              toast.success('Request rejected successfully');
+              handleRefresh();
+              setShowAdditionalApproverReviewModal(false);
+              setSelectedLevelForReview(null);
+            } catch (error: any) {
+              console.error('Failed to reject:', error);
+              const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
+              toast.error(errorMessage);
+              throw error;
+            }
+          }}
+          requestTitle={request?.title || 'Request'}
+          requestDescription={request?.description || ''}
+          requestId={request?.id || request?.requestId}
+          levelName={selectedLevelForReview.levelName}
+          approverName={selectedLevelForReview.approverName}
+        />
+      )}
+
+      {/* Initiator Action Modal - Removed, actions are now direct buttons in step card */}
+
+      {/* Version History Section */}
+      {versionHistory && versionHistory.length > 0 && (
+        <Card className="mt-6 border-amber-100 bg-amber-50/30">
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-bold flex items-center gap-2 text-amber-900">
+                <Activity className="w-4 h-4" />
+                Revision History & Audit Trail
+              </CardTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowHistory(!showHistory)}
+                className="text-amber-700 hover:text-amber-800 hover:bg-amber-100"
+              >
+                {showHistory ? 'Hide History' : 'View History'}
+              </Button>
+            </div>
+            <CardDescription className="text-xs text-amber-700">
+              Records of all revisions and actions taken on this request
+            </CardDescription>
+          </CardHeader>
+          {showHistory && (
+            <CardContent>
+              <div className="space-y-4">
+                {versionHistory.map((item, idx) => (
+                  <div key={item.historyId || idx} className="relative pl-6 pb-4 border-l-2 border-amber-200 last:border-0 last:pb-0">
+                    <div className="absolute left-[-9px] top-0 w-4 h-4 rounded-full bg-amber-500 border-2 border-white shadow-sm" />
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs font-bold text-amber-900">
+                            Version {item.version}
+                          </span>
+                          {item.snapshotType && (
+                            <Badge className="bg-blue-100 text-blue-700 text-[9px] px-1.5 py-0">
+                              {item.snapshotType}
+                            </Badge>
+                          )}
+                          {item.levelNumber && (
+                            <Badge className="bg-gray-100 text-gray-600 text-[9px] px-1.5 py-0">
+                              Step {item.levelNumber}
+                            </Badge>
+                          )}
+                        </div>
+                        <span className="text-[10px] text-amber-600 font-medium bg-amber-100 px-2 py-0.5 rounded-full">
+                          {formatDateSafe(item.createdAt)}
+                        </span>
+                      </div>
+                      <p className="text-xs font-medium text-gray-800">
+                        {item.changeReason || 'Version Update'}
+                      </p>
+                      <div className="flex items-center gap-1.5 mt-1">
+                        <div className="w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center">
+                          <span className="text-[8px] font-bold text-blue-600">
+                            {item.changer?.displayName?.charAt(0) || 'U'}
+                          </span>
+                        </div>
+                        <span className="text-xs text-gray-500">
+                          By {item.changer?.displayName || item.changer?.email || 'Unknown User'}
+                        </span>
+                      </div>
+                      {/* Show snapshot details based on type - JSONB structure */}
+                      {item.snapshotType === 'PROPOSAL' && item.snapshotData && (
+                        <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
+                          <p className="font-semibold text-gray-700 mb-1">Proposal:</p>
+                          {item.snapshotData.documentUrl && (
+                            <div className="flex items-center gap-2 mb-1">
+                              <Button
+                                variant="link"
+                                size="sm"
+                                className="h-auto p-0 text-blue-600 hover:text-blue-700 font-small flex items-center gap-1"
+                                onClick={() => setViewSnapshot({
+                                  data: item.snapshotData,
+                                  type: 'PROPOSAL',
+                                  title: `Historical Proposal (Version ${item.version})`
+                                })}
+                              >
+                                View Details
+                                <Eye className="w-2 h-2" />
+                              </Button>
+                            </div>
+                          )}
+                          <p className="text-gray-600">Budget: ₹{Number(item.snapshotData.totalBudget || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
+                          {item.snapshotData.comments && (
+                            <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
+                          )}
+                        </div>
+                      )}
+                      {item.snapshotType === 'COMPLETION' && item.snapshotData && (
+                        <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
+                          <p className="font-semibold text-gray-700 mb-1">Completion:</p>
+                          {item.snapshotData.documentUrl && (
+                            <div className="flex items-center gap-2 mb-1">
+                              <Button
+                                variant="link"
+                                size="sm"
+                                className="h-auto p-0 text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1"
+                                onClick={() => setViewSnapshot({
+                                  data: item.snapshotData,
+                                  type: 'COMPLETION',
+                                  title: `Historical Completion (Version ${item.version})`
+                                })}
+                              >
+                                View Details
+                                <Eye className="w-3 h-3" />
+                              </Button>
+                            </div>
+                          )}
+                          <p className="text-gray-600">Total Expenses: ₹{Number(item.snapshotData.totalExpenses || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
+                          {item.snapshotData.comments && (
+                            <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
+                          )}
+                        </div>
+                      )}
+                      {item.snapshotType === 'INTERNAL_ORDER' && item.snapshotData && (
+                        <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
+                          <p className="font-semibold text-gray-700 mb-1">IO Block:</p>
+                          <p className="text-gray-600">IO Number: {item.snapshotData.ioNumber || 'N/A'}</p>
+                          <p className="text-gray-600">Blocked: ₹{Number(item.snapshotData.blockedAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
+                          {item.snapshotData.sapDocumentNumber && (
+                            <p className="text-gray-600">SAP Doc: {item.snapshotData.sapDocumentNumber}</p>
+                          )}
+                        </div>
+                      )}
+                      {item.snapshotType === 'APPROVE' && item.snapshotData && (
+                        <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
+                          <p className="font-semibold text-gray-700 mb-1">
+                            {item.snapshotData.action === 'APPROVE' ? 'Approval' : 'Rejection'}:
+                          </p>
+                          <p className="text-gray-600">By: {item.snapshotData.approverName || item.snapshotData.approverEmail || 'Unknown'}</p>
+                          {item.snapshotData.levelName && (
+                            <p className="text-gray-600">Level: {item.snapshotData.levelName}</p>
+                          )}
+                          {item.snapshotData.comments && (
+                            <p className="text-gray-600 mt-1">Comments: {item.snapshotData.comments.substring(0, 80)}{item.snapshotData.comments.length > 80 ? '...' : ''}</p>
+                          )}
+                          {item.snapshotData.rejectionReason && (
+                            <p className="text-red-600 mt-1">Rejection Reason: {item.snapshotData.rejectionReason.substring(0, 80)}{item.snapshotData.rejectionReason.length > 80 ? '...' : ''}</p>
+                          )}
+                        </div>
+                      )}
+                      {item.snapshotType === 'WORKFLOW' && item.snapshotData && (
+                        <div className="mt-2 p-2 bg-white rounded border border-amber-200 text-[10px]">
+                          <p className="font-semibold text-gray-700 mb-1">Workflow:</p>
+                          <p className="text-gray-600">Status: {item.snapshotData.status || 'N/A'}</p>
+                          {item.snapshotData.currentLevel && (
+                            <p className="text-gray-600">Current Level: {item.snapshotData.currentLevel}</p>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          )}
+        </Card>
+      )}
+
+      <SnapshotDetailsModal
+        isOpen={!!viewSnapshot}
+        onClose={() => setViewSnapshot(null)}
+        snapshot={viewSnapshot?.data}
+        type={viewSnapshot?.type || 'PROPOSAL'}
+        title={viewSnapshot?.title}
+      />
     </>
   );
 }
diff --git a/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts b/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
index e4bcb9a..4f9ca01 100644
--- a/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
+++ b/src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts
@@ -139,6 +139,7 @@ export function useCreateRequestSubmission({
           user,
           documentsToDelete
         );
+        (updatePayload as any).isDraft = true;
 
         await updateWorkflowRequest(
           editRequestId,
@@ -164,6 +165,7 @@ export function useCreateRequestSubmission({
           selectedTemplate,
           user
         );
+        (createPayload as any).isDraft = true;
 
         const result = await createWorkflow(createPayload, documents);
 
diff --git a/src/pages/CreateRequest/services/createRequestService.ts b/src/pages/CreateRequest/services/createRequestService.ts
index 68c8cf1..a250a94 100644
--- a/src/pages/CreateRequest/services/createRequestService.ts
+++ b/src/pages/CreateRequest/services/createRequestService.ts
@@ -59,28 +59,22 @@ export async function submitWorkflowRequest(requestId: string): Promise<void> {
   await submitWorkflow(requestId);
 }
 
-/**
- * Create and submit a workflow in one operation
- */
 export async function createAndSubmitWorkflow(
   payload: CreateWorkflowPayload,
   documents: File[]
 ): Promise<{ id: string }> {
-  const result = await createWorkflow(payload, documents);
-  await submitWorkflowRequest(result.id);
-  return result;
+  // Pass isDraft: false (or omit) to trigger backend auto-submit
+  const res = await createWorkflow({ ...payload, isDraft: false }, documents);
+  return res;
 }
 
-/**
- * Update and submit a workflow in one operation
- */
 export async function updateAndSubmitWorkflow(
   requestId: string,
   payload: UpdateWorkflowPayload,
   documents: File[],
   documentsToDelete: string[]
 ): Promise<void> {
-  await updateWorkflowRequest(requestId, payload, documents, documentsToDelete);
-  await submitWorkflowRequest(requestId);
+  // Pass isDraft: false (or omit) to trigger backend auto-submit
+  await updateWorkflowRequest(requestId, { ...payload, isDraft: false }, documents, documentsToDelete);
 }
 
diff --git a/src/pages/CreateRequest/types/createRequest.types.ts b/src/pages/CreateRequest/types/createRequest.types.ts
index 25e5faa..4315570 100644
--- a/src/pages/CreateRequest/types/createRequest.types.ts
+++ b/src/pages/CreateRequest/types/createRequest.types.ts
@@ -67,6 +67,7 @@ export interface CreateWorkflowPayload {
     email: string;
   }>;
   participants: Participant[];
+  isDraft?: boolean;
 }
 
 export interface UpdateWorkflowPayload {
@@ -76,6 +77,7 @@ export interface UpdateWorkflowPayload {
   approvalLevels: ApprovalLevel[];
   participants: Participant[];
   deleteDocumentIds?: string[];
+  isDraft?: boolean;
 }
 
 export interface ValidationModalState {
diff --git a/src/pages/Requests/Requests.tsx b/src/pages/Requests/Requests.tsx
index eca56d4..cb9b970 100644
--- a/src/pages/Requests/Requests.tsx
+++ b/src/pages/Requests/Requests.tsx
@@ -665,7 +665,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   ) : (
                     <>
                       <Input
-                        placeholder="Search initiator..."
+                        placeholder="Use @ to search initiator..."
                         value={initiatorSearch.searchQuery}
                         onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
                         onFocus={() => {
@@ -735,7 +735,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
                   ) : (
                     <>
                       <Input
-                        placeholder="Search approver..."
+                        placeholder="Use @ to search approver..."
                         value={approverSearch.searchQuery}
                         onChange={(e) => approverSearch.handleSearch(e.target.value)}
                         onFocus={() => {
diff --git a/src/pages/Requests/hooks/useUserSearch.ts b/src/pages/Requests/hooks/useUserSearch.ts
index 78a66d4..9eeffe4 100644
--- a/src/pages/Requests/hooks/useUserSearch.ts
+++ b/src/pages/Requests/hooks/useUserSearch.ts
@@ -45,14 +45,14 @@ export function useUserSearch({ allUsers, filterValue, onFilterChange }: UseUser
       clearTimeout(searchTimer.current);
     }
 
-    if (!query || query.trim().length < 2) {
+    if (!query || !query.startsWith('@') || query.trim().length < 2) {
       setSearchResults([]);
       setShowResults(false);
       return;
     }
 
     searchTimer.current = setTimeout(() => {
-      const searchLower = query.toLowerCase().trim();
+      const searchLower = query.slice(1).toLowerCase().trim();
       const filtered = allUsers.filter((user) => {
         const email = (user.email || '').toLowerCase();
         const displayName = (user.displayName || '').toLowerCase();
diff --git a/src/services/workflowApi.ts b/src/services/workflowApi.ts
index 98064c5..cf1c0c5 100644
--- a/src/services/workflowApi.ts
+++ b/src/services/workflowApi.ts
@@ -102,6 +102,7 @@ export async function createWorkflowFromForm(form: CreateWorkflowFromFormPayload
     priority, // STANDARD | EXPRESS
     approvalLevels,
     participants: participants.length ? participants : undefined,
+    isDraft: (form as any).isDraft,
   };
 
   const res = await apiClient.post('/workflows', payload);
@@ -131,6 +132,7 @@ export async function createWorkflowMultipart(form: CreateWorkflowFromFormPayloa
         tatType: a.tatType || 'hours',
       };
     }),
+    isDraft: (form as any).isDraft,
   };
 
   // Add spectators if any (simplified - only email required)
diff --git a/src/utils/requestDetailHelpers.tsx b/src/utils/requestDetailHelpers.tsx
index 54ab7d5..4cef511 100644
--- a/src/utils/requestDetailHelpers.tsx
+++ b/src/utils/requestDetailHelpers.tsx
@@ -66,7 +66,9 @@ export const getPriorityConfig = (priority: string) => {
  * @returns Configuration object with Tailwind CSS classes
  */
 export const getStatusConfig = (status: string) => {
-  switch (status) {
+  switch (status?.toLowerCase()) {
+    case 'in-review':
+    case 'in_progress':
     case 'pending':
       return {
         color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
@@ -77,11 +79,6 @@ export const getStatusConfig = (status: string) => {
         color: 'bg-gray-400 text-gray-100 border-gray-500',
         label: 'paused'
       };
-    case 'in-review':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        label: 'in-review'
-      };
     case 'approved':
       return {
         color: 'bg-green-100 text-green-800 border-green-200',