diff --git a/src/App.tsx b/src/App.tsx
index f6c19fa..e75783f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import { SharedSummaries } from '@/pages/SharedSummaries/SharedSummaries';
 import { SharedSummaryDetail } from '@/pages/SharedSummaries/SharedSummaryDetail';
 import { WorkNotes } from '@/pages/WorkNotes';
 import { CreateRequest } from '@/pages/CreateRequest';
-import { ClaimManagementWizard } from '@/components/workflow/ClaimManagementWizard';
+import { ClaimManagementWizard } from '@/dealer-claim/components/request-creation/ClaimManagementWizard';
 import { MyRequests } from '@/pages/MyRequests';
 import { Requests } from '@/pages/Requests/Requests';
 import { UserAllRequests } from '@/pages/Requests/UserAllRequests';
@@ -297,25 +297,36 @@ function AppRoutes({ onLogout }: AppProps) {
 
       // Call API to create claim request
       const response = await createClaimRequest(payload);
+      
+      // Validate response - ensure request was actually created successfully
+      if (!response || !response.request) {
+        throw new Error('Invalid response from server: Request object not found');
+      }
+
       const createdRequest = response.request;
 
+      // Validate that we have at least one identifier (requestNumber or requestId)
+      if (!createdRequest.requestNumber && !createdRequest.requestId) {
+        throw new Error('Invalid response from server: Request identifier not found');
+      }
+
       // Close manager modal if open
       setManagerModalOpen(false);
       setManagerModalData(null);
 
+      // Only show success toast if request was actually created successfully
       toast.success('Claim Request Submitted', {
         description: 'Your claim management request has been created successfully.',
       });
 
-      // Navigate to the created request detail page
-      if (createdRequest?.requestId) {
-        const { navigateToRequest } = await import('@/utils/requestNavigation');
-        navigateToRequest({
-          requestId: createdRequest.requestId,
-          request: createdRequest,
-          navigate,
-        });
+      // Navigate to the created request detail page using requestNumber
+      if (createdRequest.requestNumber) {
+        navigate(`/request/${createdRequest.requestNumber}`);
+      } else if (createdRequest.requestId) {
+        // Fallback to requestId if requestNumber is not available
+        navigate(`/request/${createdRequest.requestId}`);
       } else {
+        // This should not happen due to validation above, but just in case
         navigate('/my-requests');
       }
     } catch (error: any) {
diff --git a/src/components/modals/ManagerSelectionModal.tsx b/src/components/modals/ManagerSelectionModal.tsx
index 2407729..40b554f 100644
--- a/src/components/modals/ManagerSelectionModal.tsx
+++ b/src/components/modals/ManagerSelectionModal.tsx
@@ -7,7 +7,6 @@
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { AlertCircle, CheckCircle2, User, Mail, Building2 } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
 
 interface Manager {
   userId: string;
diff --git a/src/components/workflow/ClaimManagementDetail/ClaimManagementDetail.tsx b/src/components/workflow/ClaimManagementDetail/ClaimManagementDetail.tsx
deleted file mode 100644
index 8a6d110..0000000
--- a/src/components/workflow/ClaimManagementDetail/ClaimManagementDetail.tsx
+++ /dev/null
@@ -1,794 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { toast } from 'sonner';
-import { DealerDocumentModal } from '@/components/modals/DealerDocumentModal';
-import { InitiatorVerificationModal } from '@/components/modals/InitiatorVerificationModal';
-import { Progress } from '@/components/ui/progress';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { CLAIM_MANAGEMENT_DATABASE } from '@/utils/claimManagementDatabase';
-import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
-import { 
-  ArrowLeft, 
-  Clock, 
-  FileText, 
-  MessageSquare, 
-  CheckCircle, 
-  XCircle, 
-  Download,
-  Eye,
-  Flame,
-  Target,
-  TrendingUp,
-  RefreshCw,
-  Activity,
-  MapPin,
-  Mail,
-  Phone,
-  Building,
-  Receipt,
-  Upload,
-  UserPlus,
-  ClipboardList,
-  DollarSign,
-  Calendar
-} from 'lucide-react';
-
-interface ClaimManagementDetailProps {
-  requestId: string;
-  onBack?: () => void;
-  onOpenModal?: (modal: string) => void;
-  dynamicRequests?: any[];
-}
-
-// Utility functions
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-    case 'urgent':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: Flame
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target
-      };
-  }
-};
-
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: Clock
-      };
-    case 'in-review':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Eye
-      };
-    case 'approved':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: CheckCircle
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: XCircle
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Clock
-      };
-  }
-};
-
-const getSLAConfig = (progress: number) => {
-  if (progress >= 80) {
-    return {
-      bg: 'bg-red-50',
-      color: 'bg-red-500',
-      textColor: 'text-red-700'
-    };
-  } else if (progress >= 60) {
-    return {
-      bg: 'bg-orange-50',
-      color: 'bg-orange-500',
-      textColor: 'text-orange-700'
-    };
-  } else {
-    return {
-      bg: 'bg-green-50',
-      color: 'bg-green-500',
-      textColor: 'text-green-700'
-    };
-  }
-};
-
-const getStepIcon = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return <CheckCircle className="w-5 h-5 text-green-600" />;
-    case 'rejected':
-      return <XCircle className="w-5 h-5 text-red-600" />;
-    case 'pending':
-    case 'in-review':
-      return <Clock className="w-5 h-5 text-blue-600" />;
-    default:
-      return <Clock className="w-5 h-5 text-gray-400" />;
-  }
-};
-
-const getActionTypeIcon = (type: string) => {
-  switch (type) {
-    case 'approval':
-    case 'approved':
-      return <CheckCircle className="w-5 h-5 text-green-600" />;
-    case 'rejection':
-    case 'rejected':
-      return <XCircle className="w-5 h-5 text-red-600" />;
-    case 'comment':
-      return <MessageSquare className="w-5 h-5 text-blue-600" />;
-    case 'status_change':
-      return <RefreshCw className="w-5 h-5 text-orange-600" />;
-    case 'assignment':
-      return <UserPlus className="w-5 h-5 text-purple-600" />;
-    case 'created':
-      return <FileText className="w-5 h-5 text-blue-600" />;
-    default:
-      return <Activity className="w-5 h-5 text-gray-600" />;
-  }
-};
-
-export function ClaimManagementDetail({
-  requestId,
-  onBack,
-  onOpenModal,
-  dynamicRequests = []
-}: ClaimManagementDetailProps) {
-  const [activeTab, setActiveTab] = useState('overview');
-  const [dealerDocModal, setDealerDocModal] = useState(false);
-  const [initiatorVerificationModal, setInitiatorVerificationModal] = useState(false);
-
-  // Get claim from database or dynamic requests
-  const claim = useMemo(() => {
-    // First check static database
-    const staticClaim = CLAIM_MANAGEMENT_DATABASE[requestId];
-    if (staticClaim) return staticClaim;
-    
-    // Then check dynamic requests
-    const dynamicClaim = dynamicRequests.find((req: any) => req.id === requestId);
-    if (dynamicClaim) return dynamicClaim;
-    
-    return null;
-  }, [requestId, dynamicRequests]);
-
-  if (!claim) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Not Found</h2>
-          <p className="text-gray-600 mb-4">The claim request you're looking for doesn't exist.</p>
-          <Button onClick={onBack}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Go Back
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  const priorityConfig = getPriorityConfig(claim.priority);
-  const statusConfig = getStatusConfig(claim.status);
-  const slaConfig = getSLAConfig(claim.slaProgress);
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto p-6">
-        {/* Header Section */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
-          <div className="flex items-start justify-between mb-4">
-            <div className="flex items-start gap-4">
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={onBack}
-                className="mt-1"
-              >
-                <ArrowLeft className="h-5 w-5" />
-              </Button>
-              
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
-                  <Receipt className="w-6 h-6 text-purple-600" />
-                </div>
-                
-                <div>
-                  <div className="flex items-center gap-3 mb-2">
-                    <h1 className="text-xl font-bold text-gray-900">{claim.id}</h1>
-                    <Badge className={`${priorityConfig.color}`} variant="outline">
-                      {claim.priority} priority
-                    </Badge>
-                    <Badge className={`${statusConfig.color}`} variant="outline">
-                      <statusConfig.icon className="w-3 h-3 mr-1" />
-                      {claim.status}
-                    </Badge>
-                    <Badge className="bg-purple-100 text-purple-800 border-purple-200" variant="outline">
-                      <Receipt className="w-3 h-3 mr-1" />
-                      Claim Management
-                    </Badge>
-                  </div>
-                  <h2 className="text-lg font-semibold text-gray-900">{claim.title}</h2>
-                </div>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-4">
-              {claim.amount && claim.amount !== 'TBD' && (
-                <div className="text-right">
-                  <p className="text-sm text-gray-500">Claim Amount</p>
-                  <p className="text-xl font-bold text-gray-900">{claim.amount}</p>
-                </div>
-              )}
-              <Button variant="outline" size="sm">
-                <RefreshCw className="w-4 h-4 mr-2" />
-                Refresh
-              </Button>
-            </div>
-          </div>
-
-          {/* SLA Progress */}
-          <div className={`${slaConfig.bg} rounded-lg border p-4 mt-4`}>
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <Clock className={`h-4 w-4 ${slaConfig.textColor}`} />
-                <span className="text-sm font-medium text-gray-900">SLA Progress</span>
-              </div>
-              <span className={`text-sm font-semibold ${slaConfig.textColor}`}>
-                {claim.slaRemaining}
-              </span>
-            </div>
-            <Progress value={claim.slaProgress} className="h-2 mb-2" />
-            <p className="text-xs text-gray-600">
-              Due: {formatDateDDMMYYYY(claim.slaEndDate, true)} • {claim.slaProgress}% elapsed
-            </p>
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-4 bg-gray-100 h-10 mb-6">
-            <TabsTrigger value="overview" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <ClipboardList className="w-3 h-3 sm:w-4 sm:h-4" />
-              Overview
-            </TabsTrigger>
-            <TabsTrigger value="workflow" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <TrendingUp className="w-3 h-3 sm:w-4 sm:h-4" />
-              Workflow (8-Steps)
-            </TabsTrigger>
-            <TabsTrigger value="documents" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <FileText className="w-3 h-3 sm:w-4 sm:h-4" />
-              Documents
-            </TabsTrigger>
-            <TabsTrigger value="activity" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <Activity className="w-3 h-3 sm:w-4 sm:h-4" />
-              Activity
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Overview Tab */}
-          <TabsContent value="overview">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              {/* Left Column - Main Content (2/3 width) */}
-              <div className="lg:col-span-2 space-y-6">
-                {/* Activity Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <Calendar className="w-5 h-5 text-blue-600" />
-                      Activity Information
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Name</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityName || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Type</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityType || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
-                          <MapPin className="w-4 h-4 text-gray-400" />
-                          {claim.claimDetails?.location || 'N/A'}
-                        </p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Date</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityDate || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Estimated Budget</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
-                          <DollarSign className="w-4 h-4 text-green-600" />
-                          {claim.claimDetails?.estimatedBudget || 'N/A'}
-                        </p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Period</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">
-                          {claim.claimDetails?.periodStart || 'N/A'} - {claim.claimDetails?.periodEnd || 'N/A'}
-                        </p>
-                      </div>
-                    </div>
-
-                    <div className="pt-4 border-t">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Description</label>
-                      <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-3 rounded-lg whitespace-pre-line">
-                        {claim.claimDetails?.requestDescription || claim.description || 'N/A'}
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Dealer Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <Building className="w-5 h-5 text-purple-600" />
-                      Dealer Information
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Code</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerCode || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Name</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerName || 'N/A'}</p>
-                      </div>
-                    </div>
-
-                    <div>
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Contact Information</label>
-                      <div className="mt-2 space-y-2">
-                        <div className="flex items-center gap-2 text-sm text-gray-700">
-                          <Mail className="w-4 h-4 text-gray-400" />
-                          <span>{claim.claimDetails?.dealerEmail || 'N/A'}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm text-gray-700">
-                          <Phone className="w-4 h-4 text-gray-400" />
-                          <span>{claim.claimDetails?.dealerPhone || 'N/A'}</span>
-                        </div>
-                        {claim.claimDetails?.dealerAddress && (
-                          <div className="flex items-start gap-2 text-sm text-gray-700">
-                            <MapPin className="w-4 h-4 text-gray-400 mt-0.5" />
-                            <span>{claim.claimDetails.dealerAddress}</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Initiator Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-base">Request Initiator</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-start gap-4">
-                      <Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
-                        <AvatarFallback className="bg-gray-700 text-white font-semibold text-lg">
-                          {claim.initiator?.avatar || 'U'}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-gray-900">{claim.initiator?.name || 'N/A'}</h3>
-                        <p className="text-sm text-gray-600">{claim.initiator?.role || 'N/A'}</p>
-                        <p className="text-sm text-gray-500">{claim.initiator?.department || 'N/A'}</p>
-                        
-                        <div className="mt-3 space-y-2">
-                          <div className="flex items-center gap-2 text-sm text-gray-600">
-                            <Mail className="w-4 h-4" />
-                            <span>{claim.initiator?.email || 'N/A'}</span>
-                          </div>
-                          <div className="flex items-center gap-2 text-sm text-gray-600">
-                            <Phone className="w-4 h-4" />
-                            <span>{claim.initiator?.phone || 'N/A'}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              {/* Right Column - Quick Actions Sidebar (1/3 width) */}
-              <div className="space-y-6">
-                {/* Quick Actions */}
-                <Card>
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">Quick Actions</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-2">
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 border-gray-300"
-                      onClick={() => onOpenModal?.('work-note')}
-                    >
-                      <MessageSquare className="w-4 h-4" />
-                      Add Work Note
-                    </Button>
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 border-gray-300"
-                      onClick={() => onOpenModal?.('add-spectator')}
-                    >
-                      <Eye className="w-4 h-4" />
-                      Add Spectator
-                    </Button>
-
-                    <div className="pt-4 space-y-2">
-                      <Button 
-                        className="w-full bg-green-600 hover:bg-green-700 text-white"
-                        onClick={() => onOpenModal?.('approve')}
-                      >
-                        <CheckCircle className="w-4 h-4 mr-2" />
-                        Approve Step
-                      </Button>
-                      <Button 
-                        variant="destructive"
-                        className="w-full"
-                        onClick={() => onOpenModal?.('reject')}
-                      >
-                        <XCircle className="w-4 h-4 mr-2" />
-                        Reject Step
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Spectators */}
-                {claim.spectators && claim.spectators.length > 0 && (
-                  <Card>
-                    <CardHeader className="pb-2">
-                      <CardTitle className="text-base">Spectators</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-3">
-                      {claim.spectators.map((spectator: any, index: number) => (
-                        <div key={index} className="flex items-center gap-3">
-                          <Avatar className="h-8 w-8">
-                            <AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
-                              {spectator.avatar}
-                            </AvatarFallback>
-                          </Avatar>
-                          <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-gray-900">{spectator.name}</p>
-                            <p className="text-xs text-gray-500 truncate">{spectator.role}</p>
-                          </div>
-                        </div>
-                      ))}
-                    </CardContent>
-                  </Card>
-                )}
-              </div>
-            </div>
-          </TabsContent>
-
-          {/* Workflow Tab - 8 Step Process */}
-          <TabsContent value="workflow">
-            <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">
-                      8-Step approval process for dealer claim management
-                    </CardDescription>
-                  </div>
-                  <Badge variant="outline" className="font-medium">
-                    Step {claim.currentStep} of {claim.totalSteps}
-                  </Badge>
-                </div>
-              </CardHeader>
-              <CardContent>
-                {claim.approvalFlow && claim.approvalFlow.length > 0 ? (
-                  <div className="space-y-4">
-                    {claim.approvalFlow.map((step: any, index: number) => {
-                      const isActive = step.status === 'pending' || step.status === 'in-review';
-                      const isCompleted = step.status === 'approved';
-                      const isRejected = step.status === 'rejected';
-
-                      return (
-                        <div
-                          key={index}
-                          className={`relative p-5 rounded-lg border-2 transition-all ${
-                            isActive
-                              ? 'border-purple-500 bg-purple-50 shadow-md'
-                              : isCompleted
-                              ? 'border-green-500 bg-green-50'
-                              : isRejected
-                              ? 'border-red-500 bg-red-50'
-                              : 'border-gray-200 bg-white'
-                          }`}
-                        >
-                          <div className="flex items-start gap-4">
-                            <div className={`p-3 rounded-xl ${
-                              isActive ? 'bg-purple-100' :
-                              isCompleted ? 'bg-green-100' :
-                              isRejected ? 'bg-red-100' :
-                              'bg-gray-100'
-                            }`}>
-                              {getStepIcon(step.status)}
-                            </div>
-
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-start justify-between gap-4 mb-2">
-                                <div>
-                                  <div className="flex items-center gap-2 mb-1">
-                                    <h4 className="font-semibold text-gray-900">Step {step.step}: {step.role}</h4>
-                                    <Badge variant="outline" className={
-                                      isActive ? 'bg-purple-100 text-purple-800 border-purple-200' :
-                                      isCompleted ? 'bg-green-100 text-green-800 border-green-200' :
-                                      isRejected ? 'bg-red-100 text-red-800 border-red-200' :
-                                      'bg-gray-100 text-gray-800 border-gray-200'
-                                    }>
-                                      {step.status}
-                                    </Badge>
-                                  </div>
-                                  <p className="text-sm text-gray-600">{step.approver}</p>
-                                  {step.description && (
-                                    <p className="text-sm text-gray-500 mt-2 italic">{step.description}</p>
-                                  )}
-                                </div>
-                                <div className="text-right">
-                                  {step.tatHours && (
-                                    <p className="text-xs text-gray-500">TAT: {step.tatHours}h</p>
-                                  )}
-                                  {step.elapsedHours !== undefined && step.elapsedHours > 0 && (
-                                    <p className="text-xs text-gray-600 font-medium">Elapsed: {step.elapsedHours}h</p>
-                                  )}
-                                </div>
-                              </div>
-
-                              {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>
-                              )}
-
-                              {step.timestamp && (
-                                <p className="text-xs text-gray-500 mt-2">
-                                  {isCompleted ? 'Approved' : isRejected ? 'Rejected' : 'Actioned'} on {step.timestamp}
-                                </p>
-                              )}
-
-                              {/* Workflow-specific Action Buttons */}
-                              {isActive && (
-                                <div className="mt-4 flex gap-2">
-                                  {step.step === 1 && step.role === 'Dealer - Document Upload' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setDealerDocModal(true)}
-                                      className="bg-purple-600 hover:bg-purple-700"
-                                    >
-                                      <Upload className="w-4 h-4 mr-2" />
-                                      Upload Documents
-                                    </Button>
-                                  )}
-                                  {step.step === 2 && step.role === 'Initiator Evaluation' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Approve & Continue
-                                    </Button>
-                                  )}
-                                  {step.step === 4 && step.role === 'Department Lead Approval' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Approve & Lock Budget
-                                    </Button>
-                                  )}
-                                  {step.step === 5 && step.role === 'Dealer - Completion Documents' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setDealerDocModal(true)}
-                                      className="bg-purple-600 hover:bg-purple-700"
-                                    >
-                                      <Upload className="w-4 h-4 mr-2" />
-                                      Upload Completion Docs
-                                    </Button>
-                                  )}
-                                  {step.step === 6 && step.role === 'Initiator Verification' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setInitiatorVerificationModal(true)}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Verify & Set Amount
-                                    </Button>
-                                  )}
-                                  {step.step === 8 && step.role.includes('Credit Note') && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Issue Credit Note
-                                    </Button>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500 text-center py-8">No workflow steps defined</p>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Documents Tab */}
-          <TabsContent value="documents">
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5 text-purple-600" />
-                    Claim Documents
-                  </CardTitle>
-                  <Button size="sm">
-                    <Upload className="w-4 h-4 mr-2" />
-                    Upload Document
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent>
-                {claim.documents && claim.documents.length > 0 ? (
-                  <div className="space-y-3">
-                    {claim.documents.map((doc: any, index: number) => (
-                      <div
-                        key={index}
-                        className="flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
-                      >
-                        <div className="flex items-center gap-3">
-                          <div className="p-2 bg-purple-100 rounded-lg">
-                            <FileText className="w-5 h-5 text-purple-600" />
-                          </div>
-                          <div>
-                            <p className="font-medium text-gray-900">{doc.name}</p>
-                            <p className="text-xs text-gray-500">
-                              {doc.size} • Uploaded by {doc.uploadedBy} on {doc.uploadedAt}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <Button variant="ghost" size="sm">
-                            <Eye className="w-4 h-4" />
-                          </Button>
-                          <Button variant="ghost" size="sm">
-                            <Download className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500 text-center py-8">No documents uploaded yet</p>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Activity Tab - Audit Trail */}
-          <TabsContent value="activity">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Activity className="w-5 h-5 text-orange-600" />
-                  Claim Activity Timeline
-                </CardTitle>
-                <CardDescription>
-                  Complete audit trail of all claim management activities
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {claim.auditTrail && claim.auditTrail.length > 0 ? claim.auditTrail.map((entry: any, index: number) => (
-                    <div key={index} className="flex items-start gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors border border-gray-100">
-                      <div className="mt-1">
-                        {getActionTypeIcon(entry.type)}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-start justify-between gap-2">
-                          <div>
-                            <p className="font-medium text-gray-900">{entry.action}</p>
-                            <p className="text-sm text-gray-600 mt-1">{entry.details}</p>
-                            <p className="text-xs text-gray-500 mt-1">by {entry.user}</p>
-                          </div>
-                          <span className="text-xs text-gray-500 whitespace-nowrap">{entry.timestamp}</span>
-                        </div>
-                      </div>
-                    </div>
-                  )) : (
-                    <div className="text-center py-12">
-                      <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                      <p className="text-sm text-gray-500">No activity recorded yet</p>
-                      <p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </div>
-
-      {/* Claim Management Modals */}
-      {dealerDocModal && (
-        <DealerDocumentModal
-          isOpen={dealerDocModal}
-          onClose={() => setDealerDocModal(false)}
-          onSubmit={async (_documents) => {
-            toast.success('Documents Uploaded', {
-              description: 'Your documents have been submitted for review.',
-            });
-            setDealerDocModal(false);
-          }}
-          dealerName={claim.claimDetails?.dealerName || 'Dealer'}
-          activityName={claim.claimDetails?.activityName || claim.title}
-        />
-      )}
-
-      {initiatorVerificationModal && (
-        <InitiatorVerificationModal
-          isOpen={initiatorVerificationModal}
-          onClose={() => setInitiatorVerificationModal(false)}
-          onSubmit={async (data) => {
-            toast.success('Verification Complete', {
-              description: `Amount set to ${data.approvedAmount}. E-invoice will be generated.`,
-            });
-            setInitiatorVerificationModal(false);
-          }}
-          activityName={claim.claimDetails?.activityName || claim.title}
-          requestedAmount={claim.claimDetails?.estimatedBudget || claim.amount || 'TBD'}
-          documents={claim.documents || []}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/src/components/workflow/ClaimManagementDetail/index.ts b/src/components/workflow/ClaimManagementDetail/index.ts
deleted file mode 100644
index 4e7a576..0000000
--- a/src/components/workflow/ClaimManagementDetail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ClaimManagementDetail } from './ClaimManagementDetail';
diff --git a/src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx b/src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx
deleted file mode 100644
index d505fdf..0000000
--- a/src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx
+++ /dev/null
@@ -1,684 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
-import { Calendar } from '@/components/ui/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  ArrowLeft,
-  ArrowRight,
-  Calendar as CalendarIcon,
-  Check,
-  Receipt,
-  Building,
-  MapPin,
-  Clock,
-  CheckCircle,
-  Info,
-  FileText,
-} from 'lucide-react';
-import { format } from 'date-fns';
-import { toast } from 'sonner';
-import { getAllDealers as fetchDealersFromAPI, getDealerByCode, type DealerInfo } from '@/services/dealerApi';
-
-interface ClaimManagementWizardProps {
-  onBack?: () => void;
-  onSubmit?: (claimData: any) => void;
-}
-
-const CLAIM_TYPES = [
-  'Marketing Activity',
-  'Promotional Event',
-  'Dealer Training',
-  'Infrastructure Development',
-  'Customer Experience Initiative',
-  'Service Campaign'
-];
-
-const STEP_NAMES = [
-  'Claim Details',
-  'Review & Submit'
-];
-
-export function ClaimManagementWizard({ onBack, onSubmit }: ClaimManagementWizardProps) {
-  const [currentStep, setCurrentStep] = useState(1);
-  const [dealers, setDealers] = useState<DealerInfo[]>([]);
-  const [loadingDealers, setLoadingDealers] = useState(true);
-  
-  const [formData, setFormData] = useState({
-    activityName: '',
-    activityType: '',
-    dealerCode: '',
-    dealerName: '',
-    dealerEmail: '',
-    dealerPhone: '',
-    dealerAddress: '',
-    activityDate: undefined as Date | undefined,
-    location: '',
-    requestDescription: '',
-    periodStartDate: undefined as Date | undefined,
-    periodEndDate: undefined as Date | undefined,
-    estimatedBudget: ''
-  });
-
-  const totalSteps = STEP_NAMES.length;
-
-  // Fetch dealers from API on component mount
-  useEffect(() => {
-    const fetchDealers = async () => {
-      setLoadingDealers(true);
-      try {
-        const fetchedDealers = await fetchDealersFromAPI();
-        setDealers(fetchedDealers);
-      } catch (error) {
-        toast.error('Failed to load dealer list.');
-        console.error('Error fetching dealers:', error);
-      } finally {
-        setLoadingDealers(false);
-      }
-    };
-    fetchDealers();
-  }, []);
-
-  const updateFormData = (field: string, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const isStepValid = () => {
-    switch (currentStep) {
-      case 1:
-        return formData.activityName && 
-               formData.activityType && 
-               formData.dealerCode && 
-               formData.dealerName && 
-               formData.activityDate && 
-               formData.location && 
-               formData.requestDescription;
-      case 2:
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  const nextStep = () => {
-    if (currentStep < totalSteps && isStepValid()) {
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    }
-  };
-
-  const handleDealerChange = async (dealerCode: string) => {
-    const selectedDealer = dealers.find(d => d.dealerCode === dealerCode);
-    if (selectedDealer) {
-      updateFormData('dealerCode', dealerCode);
-      updateFormData('dealerName', selectedDealer.dealerName);
-      updateFormData('dealerEmail', selectedDealer.email || '');
-      updateFormData('dealerPhone', selectedDealer.phone || '');
-      updateFormData('dealerAddress', ''); // Address not available in API response
-      
-      // Try to fetch full dealer info from API if available
-      try {
-        const fullDealerInfo = await getDealerByCode(dealerCode);
-        if (fullDealerInfo) {
-          updateFormData('dealerEmail', fullDealerInfo.email || selectedDealer.email || '');
-          updateFormData('dealerPhone', fullDealerInfo.phone || selectedDealer.phone || '');
-        }
-      } catch (error) {
-        // Ignore error, use basic info from list
-        console.debug('Could not fetch full dealer info:', error);
-      }
-    }
-  };
-
-  const handleSubmit = () => {
-    const claimData = {
-      ...formData,
-      templateType: 'claim-management',
-      submittedAt: new Date().toISOString(),
-      status: 'pending',
-      currentStep: 'initiator-review',
-      workflowSteps: [
-        {
-          step: 1,
-          name: 'Initiator Evaluation',
-          status: 'pending',
-          approver: 'Current User (Initiator)',
-          description: 'Review and confirm all claim details and documents'
-        },
-        {
-          step: 2,
-          name: 'IO Confirmation',
-          status: 'waiting',
-          approver: 'System',
-          description: 'Automatic IO generation upon initiator approval'
-        },
-        {
-          step: 3,
-          name: 'Department Lead Approval',
-          status: 'waiting',
-          approver: 'Department Lead',
-          description: 'Budget blocking and final approval'
-        },
-        {
-          step: 4,
-          name: 'Document Submission',
-          status: 'waiting',
-          approver: 'Dealer',
-          description: 'Dealer submits completion documents'
-        },
-        {
-          step: 5,
-          name: 'Document Verification',
-          status: 'waiting',
-          approver: 'Initiator',
-          description: 'Verify completion documents'
-        },
-        {
-          step: 6,
-          name: 'E-Invoice Generation',
-          status: 'waiting',
-          approver: 'System',
-          description: 'Auto-generate e-invoice based on approved amount'
-        },
-        {
-          step: 7,
-          name: 'Credit Note Issuance',
-          status: 'waiting',
-          approver: 'Finance',
-          description: 'Issue credit note to dealer'
-        }
-      ]
-    };
-
-    toast.success('Claim Request Created', {
-      description: 'Your claim management request has been submitted successfully.'
-    });
-
-    if (onSubmit) {
-      onSubmit(claimData);
-    }
-  };
-
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 1:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <Receipt className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Details</h2>
-              <p className="text-gray-600">
-                Provide comprehensive information about your claim request
-              </p>
-            </div>
-
-            <div className="max-w-3xl mx-auto space-y-6">
-              {/* Activity Name and Type */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <Label htmlFor="activityName" className="text-base font-semibold">Activity Name *</Label>
-                  <Input
-                    id="activityName"
-                    placeholder="e.g., Himalayan Adventure Fest 2024"
-                    value={formData.activityName}
-                    onChange={(e) => updateFormData('activityName', e.target.value)}
-                    className="mt-2 h-12"
-                  />
-                </div>
-
-                <div>
-                  <Label htmlFor="activityType" className="text-base font-semibold">Activity Type *</Label>
-                  <Select value={formData.activityType} onValueChange={(value) => updateFormData('activityType', value)}>
-                    <SelectTrigger className="mt-2 h-12">
-                      <SelectValue placeholder="Select activity type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {CLAIM_TYPES.map((type) => (
-                        <SelectItem key={type} value={type}>{type}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* Dealer Selection */}
-              <div>
-                <Label htmlFor="dealer" className="text-base font-semibold">Dealer Code / Dealer Name *</Label>
-                <Select value={formData.dealerCode} onValueChange={handleDealerChange} disabled={loadingDealers}>
-                  <SelectTrigger className="mt-2 h-12">
-                    <SelectValue placeholder={loadingDealers ? "Loading dealers..." : "Select dealer"}>
-                      {formData.dealerCode && (
-                        <div className="flex items-center gap-2">
-                          <span className="font-mono text-sm">{formData.dealerCode}</span>
-                          <span className="text-gray-400">•</span>
-                          <span>{formData.dealerName}</span>
-                        </div>
-                      )}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {dealers.length === 0 && !loadingDealers ? (
-                      <div className="p-2 text-sm text-gray-500">No dealers available</div>
-                    ) : (
-                      dealers
-                        .filter((dealer) => dealer.dealerCode && dealer.dealerCode.trim() !== '')
-                        .map((dealer) => (
-                          <SelectItem key={dealer.dealerCode} value={dealer.dealerCode}>
-                            <div className="flex items-center gap-2">
-                              <span className="font-mono text-sm font-semibold">{dealer.dealerCode}</span>
-                              <span className="text-gray-400">•</span>
-                              <span>{dealer.dealerName}</span>
-                            </div>
-                          </SelectItem>
-                        ))
-                    )}
-                  </SelectContent>
-                </Select>
-                {formData.dealerCode && (
-                  <p className="text-sm text-gray-600 mt-2">
-                    Selected: <span className="font-semibold">{formData.dealerName}</span> ({formData.dealerCode})
-                  </p>
-                )}
-              </div>
-
-              {/* Date and Location */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <Label className="text-base font-semibold">Date *</Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        className="w-full justify-start text-left mt-2 h-12"
-                      >
-                        <CalendarIcon className="mr-2 h-4 w-4" />
-                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'Select date'}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar
-                        mode="single"
-                        selected={formData.activityDate}
-                        onSelect={(date) => updateFormData('activityDate', date)}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-
-                <div>
-                  <Label htmlFor="location" className="text-base font-semibold">Location *</Label>
-                  <Input
-                    id="location"
-                    placeholder="e.g., Mumbai, Maharashtra"
-                    value={formData.location}
-                    onChange={(e) => updateFormData('location', e.target.value)}
-                    className="mt-2 h-12"
-                  />
-                </div>
-              </div>
-
-              {/* Request Detail */}
-              <div>
-                <Label htmlFor="requestDescription" className="text-base font-semibold">Request in Detail - Brief Requirement *</Label>
-                <Textarea
-                  id="requestDescription"
-                  placeholder="Provide a detailed description of your claim requirement..."
-                  value={formData.requestDescription}
-                  onChange={(e) => updateFormData('requestDescription', e.target.value)}
-                  className="mt-2 min-h-[120px]"
-                />
-                <p className="text-xs text-gray-500 mt-1">
-                  Include key details about the claim, objectives, and expected outcomes
-                </p>
-              </div>
-
-              {/* Period (Optional) */}
-              <div>
-                <div className="flex items-center gap-2 mb-3">
-                  <Label className="text-base font-semibold">Period (If Any)</Label>
-                  <Badge variant="secondary" className="text-xs">Optional</Badge>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div>
-                    <Label className="text-sm text-gray-600">Start Date</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          className="w-full justify-start text-left mt-2 h-12"
-                        >
-                          <CalendarIcon className="mr-2 h-4 w-4" />
-                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Start date'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={formData.periodStartDate}
-                          onSelect={(date) => updateFormData('periodStartDate', date)}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-
-                  <div>
-                    <Label className="text-sm text-gray-600">End Date</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          className="w-full justify-start text-left mt-2 h-12"
-                        >
-                          <CalendarIcon className="mr-2 h-4 w-4" />
-                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'End date'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={formData.periodEndDate}
-                          onSelect={(date) => updateFormData('periodEndDate', date)}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-                {(formData.periodStartDate || formData.periodEndDate) && (
-                  <p className="text-xs text-gray-600 mt-2">
-                    {formData.periodStartDate && formData.periodEndDate 
-                      ? `Period: ${format(formData.periodStartDate, 'MMM dd, yyyy')} - ${format(formData.periodEndDate, 'MMM dd, yyyy')}`
-                      : 'Please select both start and end dates for the period'}
-                  </p>
-                )}
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 2:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <CheckCircle className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Submit</h2>
-              <p className="text-gray-600">
-                Review your claim details before submission
-              </p>
-            </div>
-
-            <div className="max-w-3xl mx-auto space-y-6">
-              {/* Activity Information */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-blue-50 to-indigo-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <Receipt className="w-5 h-5 text-blue-600" />
-                    Activity Information
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Name</Label>
-                      <p className="font-semibold text-gray-900 mt-1">{formData.activityName}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Type</Label>
-                      <Badge variant="secondary" className="mt-1">{formData.activityType}</Badge>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Dealer Information */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-green-50 to-emerald-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <Building className="w-5 h-5 text-green-600" />
-                    Dealer Information
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Code</Label>
-                      <p className="font-semibold text-gray-900 mt-1 font-mono">{formData.dealerCode}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Name</Label>
-                      <p className="font-semibold text-gray-900 mt-1">{formData.dealerName}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Email</Label>
-                      <p className="text-gray-900 mt-1">{formData.dealerEmail}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Phone</Label>
-                      <p className="text-gray-900 mt-1">{formData.dealerPhone}</p>
-                    </div>
-                    {formData.dealerAddress && (
-                      <div className="col-span-2">
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Address</Label>
-                        <p className="text-gray-900 mt-1">{formData.dealerAddress}</p>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Date & Location */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-purple-50 to-pink-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <CalendarIcon className="w-5 h-5 text-purple-600" />
-                    Date & Location
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Date</Label>
-                      <p className="font-semibold text-gray-900 mt-1">
-                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'N/A'}
-                      </p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Location</Label>
-                      <div className="flex items-center gap-2 mt-1">
-                        <MapPin className="w-4 h-4 text-gray-500" />
-                        <p className="font-semibold text-gray-900">{formData.location}</p>
-                      </div>
-                    </div>
-                    {formData.estimatedBudget && (
-                      <div className="col-span-2">
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Estimated Budget</Label>
-                        <p className="text-xl font-bold text-blue-900 mt-1">{formData.estimatedBudget}</p>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Request Details */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-orange-50 to-amber-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5 text-orange-600" />
-                    Request Details
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div>
-                    <Label className="text-xs text-gray-600 uppercase tracking-wider">Brief Requirement</Label>
-                    <div className="mt-2 p-4 bg-gray-50 rounded-lg border">
-                      <p className="text-gray-900 whitespace-pre-wrap">{formData.requestDescription}</p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Period (if provided) */}
-              {(formData.periodStartDate || formData.periodEndDate) && (
-                <Card className="border-2">
-                  <CardHeader className="bg-gradient-to-br from-cyan-50 to-blue-50">
-                    <CardTitle className="flex items-center gap-2">
-                      <Clock className="w-5 h-5 text-cyan-600" />
-                      Period
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-4">
-                    <div className="grid grid-cols-2 gap-6">
-                      <div>
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Start Date</Label>
-                        <p className="font-semibold text-gray-900 mt-1">
-                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Not specified'}
-                        </p>
-                      </div>
-                      <div>
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">End Date</Label>
-                        <p className="font-semibold text-gray-900 mt-1">
-                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'Not specified'}
-                        </p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-
-              {/* Confirmation Message */}
-              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
-                <div className="flex items-start gap-3">
-                  <Info className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="font-semibold text-blue-900 mb-1">Ready to Submit</p>
-                    <p className="text-sm text-blue-800">
-                      Please review all the information above. Once submitted, your claim request will enter the approval workflow.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="w-full bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-6 overflow-y-auto">
-      <div className="max-w-6xl mx-auto pb-8">
-        {/* Header */}
-        <div className="mb-6 sm:mb-8">
-          <Button
-            variant="ghost"
-            onClick={onBack}
-            className="mb-3 sm:mb-4 gap-2 text-sm sm:text-base"
-          >
-            <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4" />
-            <span className="hidden sm:inline">Back to Templates</span>
-            <span className="sm:hidden">Back</span>
-          </Button>
-          
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
-            <div>
-              <Badge variant="secondary" className="mb-2 text-xs">Claim Management Template</Badge>
-              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">New Claim Request</h1>
-              <p className="text-sm sm:text-base text-gray-600 mt-1">
-                Step {currentStep} of {totalSteps}: <span className="hidden sm:inline">{STEP_NAMES[currentStep - 1]}</span>
-              </p>
-            </div>
-          </div>
-
-          {/* Progress Bar */}
-          <div className="mt-4 sm:mt-6">
-            <Progress value={(currentStep / totalSteps) * 100} className="h-2" />
-            <div className="flex justify-between mt-2 px-1">
-              {STEP_NAMES.map((_name, index) => (
-                <span 
-                  key={index} 
-                  className={`text-xs sm:text-sm ${
-                    index + 1 <= currentStep ? 'text-blue-600 font-medium' : 'text-gray-400'
-                  }`}
-                >
-                  {index + 1}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Step Content */}
-        <Card className="mb-6 sm:mb-8">
-          <CardContent className="p-4 sm:p-6 lg:p-8">
-            <AnimatePresence mode="wait">
-              {renderStepContent()}
-            </AnimatePresence>
-          </CardContent>
-        </Card>
-
-        {/* Navigation */}
-        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 pb-4 sm:pb-0">
-          <Button
-            variant="outline"
-            onClick={prevStep}
-            disabled={currentStep === 1}
-            className="gap-2 w-full sm:w-auto order-2 sm:order-1"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Previous
-          </Button>
-
-          {currentStep < totalSteps ? (
-            <Button
-              onClick={nextStep}
-              disabled={!isStepValid()}
-              className="gap-2 w-full sm:w-auto order-1 sm:order-2"
-            >
-              Next
-              <ArrowRight className="w-4 h-4" />
-            </Button>
-          ) : (
-            <Button
-              onClick={handleSubmit}
-              disabled={!isStepValid()}
-              className="gap-2 bg-green-600 hover:bg-green-700 w-full sm:w-auto order-1 sm:order-2"
-            >
-              <Check className="w-4 h-4" />
-              Submit Claim Request
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/workflow/ClaimManagementWizard/index.ts b/src/components/workflow/ClaimManagementWizard/index.ts
deleted file mode 100644
index d701aa9..0000000
--- a/src/components/workflow/ClaimManagementWizard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ClaimManagementWizard } from './ClaimManagementWizard';
diff --git a/src/dealer-claim/components/request-creation/ClaimManagementWizard.tsx b/src/dealer-claim/components/request-creation/ClaimManagementWizard.tsx
index 9e28513..492d839 100644
--- a/src/dealer-claim/components/request-creation/ClaimManagementWizard.tsx
+++ b/src/dealer-claim/components/request-creation/ClaimManagementWizard.tsx
@@ -1,9 +1,679 @@
-/**
- * Dealer Claim Request Creation Wizard
- * 
- * This component handles the creation of dealer claim requests.
- * Located in: src/dealer-claim/components/request-creation/
- */
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Calendar as CalendarIcon,
+  Check,
+  Receipt,
+  Building,
+  MapPin,
+  Clock,
+  CheckCircle,
+  Info,
+  FileText,
+} from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { getAllDealers as fetchDealersFromAPI, getDealerByCode, type DealerInfo } from '@/services/dealerApi';
 
-// Re-export the original component
-export { ClaimManagementWizard } from '@/components/workflow/ClaimManagementWizard';
+interface ClaimManagementWizardProps {
+  onBack?: () => void;
+  onSubmit?: (claimData: any) => void;
+}
+
+const CLAIM_TYPES = [
+  'Marketing Activity',
+  'Promotional Event',
+  'Dealer Training',
+  'Infrastructure Development',
+  'Customer Experience Initiative',
+  'Service Campaign'
+];
+
+const STEP_NAMES = [
+  'Claim Details',
+  'Review & Submit'
+];
+
+export function ClaimManagementWizard({ onBack, onSubmit }: ClaimManagementWizardProps) {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [dealers, setDealers] = useState<DealerInfo[]>([]);
+  const [loadingDealers, setLoadingDealers] = useState(true);
+  
+  const [formData, setFormData] = useState({
+    activityName: '',
+    activityType: '',
+    dealerCode: '',
+    dealerName: '',
+    dealerEmail: '',
+    dealerPhone: '',
+    dealerAddress: '',
+    activityDate: undefined as Date | undefined,
+    location: '',
+    requestDescription: '',
+    periodStartDate: undefined as Date | undefined,
+    periodEndDate: undefined as Date | undefined,
+    estimatedBudget: ''
+  });
+
+  const totalSteps = STEP_NAMES.length;
+
+  // Fetch dealers from API on component mount
+  useEffect(() => {
+    const fetchDealers = async () => {
+      setLoadingDealers(true);
+      try {
+        const fetchedDealers = await fetchDealersFromAPI();
+        setDealers(fetchedDealers);
+      } catch (error) {
+        toast.error('Failed to load dealer list.');
+        console.error('Error fetching dealers:', error);
+      } finally {
+        setLoadingDealers(false);
+      }
+    };
+    fetchDealers();
+  }, []);
+
+  const updateFormData = (field: string, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const isStepValid = () => {
+    switch (currentStep) {
+      case 1:
+        return formData.activityName && 
+               formData.activityType && 
+               formData.dealerCode && 
+               formData.dealerName && 
+               formData.activityDate && 
+               formData.location && 
+               formData.requestDescription;
+      case 2:
+        return true;
+      default:
+        return false;
+    }
+  };
+
+  const nextStep = () => {
+    if (currentStep < totalSteps && isStepValid()) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleDealerChange = async (dealerCode: string) => {
+    const selectedDealer = dealers.find(d => d.dealerCode === dealerCode);
+    if (selectedDealer) {
+      updateFormData('dealerCode', dealerCode);
+      updateFormData('dealerName', selectedDealer.dealerName);
+      updateFormData('dealerEmail', selectedDealer.email || '');
+      updateFormData('dealerPhone', selectedDealer.phone || '');
+      updateFormData('dealerAddress', ''); // Address not available in API response
+      
+      // Try to fetch full dealer info from API
+      try {
+        const fullDealerInfo = await getDealerByCode(dealerCode);
+        if (fullDealerInfo) {
+          updateFormData('dealerEmail', fullDealerInfo.email || selectedDealer.email || '');
+          updateFormData('dealerPhone', fullDealerInfo.phone || selectedDealer.phone || '');
+        }
+      } catch (error) {
+        // Ignore error, use basic info from list
+        console.debug('Could not fetch full dealer info:', error);
+      }
+    }
+  };
+
+  const handleSubmit = () => {
+    const claimData = {
+      ...formData,
+      templateType: 'claim-management',
+      submittedAt: new Date().toISOString(),
+      status: 'pending',
+      currentStep: 'initiator-review',
+      workflowSteps: [
+        {
+          step: 1,
+          name: 'Initiator Evaluation',
+          status: 'pending',
+          approver: 'Current User (Initiator)',
+          description: 'Review and confirm all claim details and documents'
+        },
+        {
+          step: 2,
+          name: 'IO Confirmation',
+          status: 'waiting',
+          approver: 'System',
+          description: 'Automatic IO generation upon initiator approval'
+        },
+        {
+          step: 3,
+          name: 'Department Lead Approval',
+          status: 'waiting',
+          approver: 'Department Lead',
+          description: 'Budget blocking and final approval'
+        },
+        {
+          step: 4,
+          name: 'Document Submission',
+          status: 'waiting',
+          approver: 'Dealer',
+          description: 'Dealer submits completion documents'
+        },
+        {
+          step: 5,
+          name: 'Document Verification',
+          status: 'waiting',
+          approver: 'Initiator',
+          description: 'Verify completion documents'
+        },
+        {
+          step: 6,
+          name: 'E-Invoice Generation',
+          status: 'waiting',
+          approver: 'System',
+          description: 'Auto-generate e-invoice based on approved amount'
+        },
+        {
+          step: 7,
+          name: 'Credit Note Issuance',
+          status: 'waiting',
+          approver: 'Finance',
+          description: 'Issue credit note to dealer'
+        }
+      ]
+    };
+
+    // Don't show toast here - let the parent component handle success/error after API call
+    if (onSubmit) {
+      onSubmit(claimData);
+    }
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className="space-y-6"
+          >
+            <div className="text-center mb-8">
+              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <Receipt className="w-8 h-8 text-white" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Details</h2>
+              <p className="text-gray-600">
+                Provide comprehensive information about your claim request
+              </p>
+            </div>
+
+            <div className="max-w-3xl mx-auto space-y-6">
+              {/* Activity Name and Type */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <Label htmlFor="activityName" className="text-base font-semibold">Activity Name *</Label>
+                  <Input
+                    id="activityName"
+                    placeholder="e.g., Himalayan Adventure Fest 2024"
+                    value={formData.activityName}
+                    onChange={(e) => updateFormData('activityName', e.target.value)}
+                    className="mt-2 h-12"
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="activityType" className="text-base font-semibold">Activity Type *</Label>
+                  <Select value={formData.activityType} onValueChange={(value) => updateFormData('activityType', value)}>
+                    <SelectTrigger className="mt-2 !h-12 data-[size=default]:!h-12" id="activityType">
+                      <SelectValue placeholder="Select activity type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {CLAIM_TYPES.map((type) => (
+                        <SelectItem key={type} value={type}>{type}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* Dealer Selection */}
+              <div>
+                <Label className="text-base font-semibold">Dealer Code / Dealer Name *</Label>
+                <Select value={formData.dealerCode} onValueChange={handleDealerChange} disabled={loadingDealers}>
+                  <SelectTrigger className="mt-2 !h-12 data-[size=default]:!h-12" id="dealer-select">
+                    <SelectValue placeholder={loadingDealers ? "Loading dealers..." : "Select dealer"}>
+                      {formData.dealerCode && (
+                        <div className="flex items-center gap-2">
+                          <span className="font-mono text-sm">{formData.dealerCode}</span>
+                          <span className="text-gray-400">•</span>
+                          <span>{formData.dealerName}</span>
+                        </div>
+                      )}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {dealers.length === 0 && !loadingDealers ? (
+                      <div className="p-2 text-sm text-gray-500">No dealers available</div>
+                    ) : (
+                      dealers.map((dealer) => (
+                        <SelectItem key={dealer.userId} value={dealer.dealerCode}>
+                          <div className="flex items-center gap-2">
+                            <span className="font-mono text-sm font-semibold">{dealer.dealerCode}</span>
+                            <span className="text-gray-400">•</span>
+                            <span>{dealer.dealerName}</span>
+                          </div>
+                        </SelectItem>
+                      ))
+                    )}
+                  </SelectContent>
+                </Select>
+                {formData.dealerCode && (
+                  <p className="text-sm text-gray-600 mt-2">
+                    Selected: <span className="font-semibold">{formData.dealerName}</span> ({formData.dealerCode})
+                  </p>
+                )}
+              </div>
+
+              {/* Date and Location */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <Label className="text-base font-semibold">Date *</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="w-full justify-start text-left mt-2 h-12"
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'Select date'}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={formData.activityDate}
+                        onSelect={(date) => updateFormData('activityDate', date)}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                <div>
+                  <Label htmlFor="location" className="text-base font-semibold">Location *</Label>
+                  <Input
+                    id="location"
+                    placeholder="e.g., Mumbai, Maharashtra"
+                    value={formData.location}
+                    onChange={(e) => updateFormData('location', e.target.value)}
+                    className="mt-2 h-12"
+                  />
+                </div>
+              </div>
+
+              {/* Request Detail */}
+              <div>
+                <Label htmlFor="requestDescription" className="text-base font-semibold">Request in Detail - Brief Requirement *</Label>
+                <Textarea
+                  id="requestDescription"
+                  placeholder="Provide a detailed description of your claim requirement..."
+                  value={formData.requestDescription}
+                  onChange={(e) => updateFormData('requestDescription', e.target.value)}
+                  className="mt-2 min-h-[120px]"
+                />
+                <p className="text-xs text-gray-500 mt-1">
+                  Include key details about the claim, objectives, and expected outcomes
+                </p>
+              </div>
+
+              {/* Period (Optional) */}
+              <div>
+                <div className="flex items-center gap-2 mb-3">
+                  <Label className="text-base font-semibold">Period (If Any)</Label>
+                  <Badge variant="secondary" className="text-xs">Optional</Badge>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <Label className="text-sm text-gray-600">Start Date</Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start text-left mt-2 h-12"
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Start date'}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          mode="single"
+                          selected={formData.periodStartDate}
+                          onSelect={(date) => updateFormData('periodStartDate', date)}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+
+                  <div>
+                    <Label className="text-sm text-gray-600">End Date</Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start text-left mt-2 h-12"
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'End date'}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          mode="single"
+                          selected={formData.periodEndDate}
+                          onSelect={(date) => updateFormData('periodEndDate', date)}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                </div>
+                {(formData.periodStartDate || formData.periodEndDate) && (
+                  <p className="text-xs text-gray-600 mt-2">
+                    {formData.periodStartDate && formData.periodEndDate 
+                      ? `Period: ${format(formData.periodStartDate, 'MMM dd, yyyy')} - ${format(formData.periodEndDate, 'MMM dd, yyyy')}`
+                      : 'Please select both start and end dates for the period'}
+                  </p>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        );
+
+      case 2:
+        return (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className="space-y-6"
+          >
+            <div className="text-center mb-8">
+              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <CheckCircle className="w-8 h-8 text-white" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Submit</h2>
+              <p className="text-gray-600">
+                Review your claim details before submission
+              </p>
+            </div>
+
+            <div className="max-w-3xl mx-auto space-y-6">
+              {/* Activity Information */}
+              <Card className="border-2">
+                <CardHeader className="bg-gradient-to-br from-blue-50 to-indigo-50">
+                  <CardTitle className="flex items-center gap-2">
+                    <Receipt className="w-5 h-5 text-blue-600" />
+                    Activity Information
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-4">
+                  <div className="grid grid-cols-2 gap-6">
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Name</Label>
+                      <p className="font-semibold text-gray-900 mt-1">{formData.activityName}</p>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Type</Label>
+                      <Badge variant="secondary" className="mt-1">{formData.activityType}</Badge>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Dealer Information */}
+              <Card className="border-2">
+                <CardHeader className="bg-gradient-to-br from-green-50 to-emerald-50">
+                  <CardTitle className="flex items-center gap-2">
+                    <Building className="w-5 h-5 text-green-600" />
+                    Dealer Information
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-4">
+                  <div className="grid grid-cols-2 gap-6">
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Code</Label>
+                      <p className="font-semibold text-gray-900 mt-1 font-mono">{formData.dealerCode}</p>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Name</Label>
+                      <p className="font-semibold text-gray-900 mt-1">{formData.dealerName}</p>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Email</Label>
+                      <p className="text-gray-900 mt-1">{formData.dealerEmail}</p>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Phone</Label>
+                      <p className="text-gray-900 mt-1">{formData.dealerPhone}</p>
+                    </div>
+                    {formData.dealerAddress && (
+                      <div className="col-span-2">
+                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Address</Label>
+                        <p className="text-gray-900 mt-1">{formData.dealerAddress}</p>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Date & Location */}
+              <Card className="border-2">
+                <CardHeader className="bg-gradient-to-br from-purple-50 to-pink-50">
+                  <CardTitle className="flex items-center gap-2">
+                    <CalendarIcon className="w-5 h-5 text-purple-600" />
+                    Date & Location
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-4">
+                  <div className="grid grid-cols-2 gap-6">
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Date</Label>
+                      <p className="font-semibold text-gray-900 mt-1">
+                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'N/A'}
+                      </p>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Location</Label>
+                      <div className="flex items-center gap-2 mt-1">
+                        <MapPin className="w-4 h-4 text-gray-500" />
+                        <p className="font-semibold text-gray-900">{formData.location}</p>
+                      </div>
+                    </div>
+                    {formData.estimatedBudget && (
+                      <div className="col-span-2">
+                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Estimated Budget</Label>
+                        <p className="text-xl font-bold text-blue-900 mt-1">{formData.estimatedBudget}</p>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Request Details */}
+              <Card className="border-2">
+                <CardHeader className="bg-gradient-to-br from-orange-50 to-amber-50">
+                  <CardTitle className="flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-orange-600" />
+                    Request Details
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-4">
+                  <div>
+                    <Label className="text-xs text-gray-600 uppercase tracking-wider">Brief Requirement</Label>
+                    <div className="mt-2 p-4 bg-gray-50 rounded-lg border">
+                      <p className="text-gray-900 whitespace-pre-wrap">{formData.requestDescription}</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Period (if provided) */}
+              {(formData.periodStartDate || formData.periodEndDate) && (
+                <Card className="border-2">
+                  <CardHeader className="bg-gradient-to-br from-cyan-50 to-blue-50">
+                    <CardTitle className="flex items-center gap-2">
+                      <Clock className="w-5 h-5 text-cyan-600" />
+                      Period
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-6 space-y-4">
+                    <div className="grid grid-cols-2 gap-6">
+                      <div>
+                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Start Date</Label>
+                        <p className="font-semibold text-gray-900 mt-1">
+                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Not specified'}
+                        </p>
+                      </div>
+                      <div>
+                        <Label className="text-xs text-gray-600 uppercase tracking-wider">End Date</Label>
+                        <p className="font-semibold text-gray-900 mt-1">
+                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'Not specified'}
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Confirmation Message */}
+              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
+                <div className="flex items-start gap-3">
+                  <Info className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="font-semibold text-blue-900 mb-1">Ready to Submit</p>
+                    <p className="text-sm text-blue-800">
+                      Please review all the information above. Once submitted, your claim request will enter the approval workflow.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="w-full bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-6 overflow-y-auto">
+      <div className="max-w-6xl mx-auto pb-8">
+        {/* Header */}
+        <div className="mb-6 sm:mb-8">
+          <Button
+            variant="ghost"
+            onClick={onBack}
+            className="mb-3 sm:mb-4 gap-2 text-sm sm:text-base"
+          >
+            <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4" />
+            <span className="hidden sm:inline">Back to Templates</span>
+            <span className="sm:hidden">Back</span>
+          </Button>
+          
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
+            <div>
+              <Badge variant="secondary" className="mb-2 text-xs">Claim Management Template</Badge>
+              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">New Claim Request</h1>
+              <p className="text-sm sm:text-base text-gray-600 mt-1">
+                Step {currentStep} of {totalSteps}: <span className="hidden sm:inline">{STEP_NAMES[currentStep - 1]}</span>
+              </p>
+            </div>
+          </div>
+
+          {/* Progress Bar */}
+          <div className="mt-4 sm:mt-6">
+            <Progress value={(currentStep / totalSteps) * 100} className="h-2" />
+            <div className="flex justify-between mt-2 px-1">
+              {STEP_NAMES.map((_name, index) => (
+                <span 
+                  key={index} 
+                  className={`text-xs sm:text-sm ${
+                    index + 1 <= currentStep ? 'text-blue-600 font-medium' : 'text-gray-400'
+                  }`}
+                >
+                  {index + 1}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Step Content */}
+        <Card className="mb-6 sm:mb-8">
+          <CardContent className="p-4 sm:p-6 lg:p-8">
+            <AnimatePresence mode="wait">
+              {renderStepContent()}
+            </AnimatePresence>
+          </CardContent>
+        </Card>
+
+        {/* Navigation */}
+        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 pb-4 sm:pb-0">
+          <Button
+            variant="outline"
+            onClick={prevStep}
+            disabled={currentStep === 1}
+            className="gap-2 w-full sm:w-auto order-2 sm:order-1"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Previous
+          </Button>
+
+          {currentStep < totalSteps ? (
+            <Button
+              onClick={nextStep}
+              disabled={!isStepValid()}
+              className="gap-2 w-full sm:w-auto order-1 sm:order-2"
+            >
+              Next
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          ) : (
+            <Button
+              onClick={handleSubmit}
+              disabled={!isStepValid()}
+              className="gap-2 bg-green-600 hover:bg-green-700 w-full sm:w-auto order-1 sm:order-2"
+            >
+              <Check className="w-4 h-4" />
+              Submit Claim Request
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/dealer-claim/components/request-detail/IOTab.tsx b/src/dealer-claim/components/request-detail/IOTab.tsx
index 19cc7a0..42f6505 100644
--- a/src/dealer-claim/components/request-detail/IOTab.tsx
+++ b/src/dealer-claim/components/request-detail/IOTab.tsx
@@ -5,5 +5,389 @@
  * Located in: src/dealer-claim/components/request-detail/
  */
 
-// Re-export the original component
-export { IOTab } from '@/pages/RequestDetail/components/tabs/IOTab';
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { DollarSign, Download, CircleCheckBig, Target } from 'lucide-react';
+import { toast } from 'sonner';
+import { validateIO, updateIODetails, getClaimDetails } from '@/services/dealerClaimApi';
+import { useAuth } from '@/contexts/AuthContext';
+
+interface IOTabProps {
+  request: any;
+  apiRequest?: any;
+  onRefresh?: () => void;
+}
+
+interface IOBlockedDetails {
+  ioNumber: string;
+  blockedAmount: number;
+  availableBalance: number; // Available amount before block
+  remainingBalance: number; // Remaining amount after block
+  blockedDate: string;
+  blockedBy: string; // User who blocked
+  sapDocumentNumber: string;
+  status: 'blocked' | 'released' | 'failed';
+}
+
+export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
+  const { user } = useAuth();
+  const requestId = apiRequest?.requestId || request?.requestId;
+  
+  // Load existing IO data from apiRequest or request
+  const internalOrder = apiRequest?.internalOrder || apiRequest?.internal_order || null;
+  const existingIONumber = internalOrder?.ioNumber || internalOrder?.io_number || request?.ioNumber || '';
+  const existingBlockedAmount = internalOrder?.ioBlockedAmount || internalOrder?.io_blocked_amount || 0;
+  const existingAvailableBalance = internalOrder?.ioAvailableBalance || internalOrder?.io_available_balance || 0;
+  const existingRemainingBalance = internalOrder?.ioRemainingBalance || internalOrder?.io_remaining_balance || 0;
+  const sapDocNumber = internalOrder?.sapDocumentNumber || internalOrder?.sap_document_number || '';
+  // Get organizer user object from association (organizer) or fallback to organizedBy UUID
+  const organizer = internalOrder?.organizer || null;
+  
+  const [ioNumber, setIoNumber] = useState(existingIONumber);
+  const [fetchingAmount, setFetchingAmount] = useState(false);
+  const [fetchedAmount, setFetchedAmount] = useState<number | null>(null);
+  const [amountToBlock, setAmountToBlock] = useState<string>('');
+  const [blockedDetails, setBlockedDetails] = useState<IOBlockedDetails | null>(null);
+  const [blockingBudget, setBlockingBudget] = useState(false);
+
+  // Load existing IO block details from apiRequest
+  useEffect(() => {
+    if (internalOrder && existingIONumber && existingBlockedAmount > 0) {
+      const availableBeforeBlock = Number(existingAvailableBalance) + Number(existingBlockedAmount) || Number(existingAvailableBalance);
+      // Get blocked by user name from organizer association (who blocked the amount)
+      // When amount is blocked, organizedBy stores the user who blocked it
+      const blockedByName = organizer?.displayName || 
+                           organizer?.display_name || 
+                           organizer?.name || 
+                           (organizer?.firstName && organizer?.lastName ? `${organizer.firstName} ${organizer.lastName}`.trim() : null) ||
+                           organizer?.email ||
+                           'Unknown User';
+      
+      setBlockedDetails({
+        ioNumber: existingIONumber,
+        blockedAmount: Number(existingBlockedAmount) || 0,
+        availableBalance: availableBeforeBlock, // Available amount before block
+        remainingBalance: Number(existingRemainingBalance) || Number(existingAvailableBalance),
+        blockedDate: internalOrder.organizedAt || internalOrder.organized_at || new Date().toISOString(),
+        blockedBy: blockedByName,
+        sapDocumentNumber: sapDocNumber,
+        status: (internalOrder.status === 'BLOCKED' ? 'blocked' : 
+                internalOrder.status === 'RELEASED' ? 'released' : 'blocked') as 'blocked' | 'released' | 'failed',
+      });
+      setIoNumber(existingIONumber);
+      
+      // Set fetched amount if available balance exists
+      if (availableBeforeBlock > 0) {
+        setFetchedAmount(availableBeforeBlock);
+      }
+    }
+  }, [internalOrder, existingIONumber, existingBlockedAmount, existingAvailableBalance, existingRemainingBalance, sapDocNumber, organizer]);
+
+  /**
+   * Fetch available budget from SAP
+   * Validates IO number and gets available balance (returns dummy data for now)
+   * Does not store anything in database - only validates
+   */
+  const handleFetchAmount = async () => {
+    if (!ioNumber.trim()) {
+      toast.error('Please enter an IO number');
+      return;
+    }
+
+    if (!requestId) {
+      toast.error('Request ID not found');
+      return;
+    }
+
+    setFetchingAmount(true);
+    try {
+      // Call validate IO endpoint - returns dummy data for now, will integrate with SAP later
+      const ioData = await validateIO(requestId, ioNumber.trim());
+      
+      if (ioData.isValid && ioData.availableBalance > 0) {
+        setFetchedAmount(ioData.availableBalance);
+        // Pre-fill amount to block with available balance
+        setAmountToBlock(String(ioData.availableBalance));
+        toast.success(`IO fetched from SAP. Available balance: ₹${ioData.availableBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
+      } else {
+        toast.error('Invalid IO number or no available balance found');
+        setFetchedAmount(null);
+        setAmountToBlock('');
+      }
+    } catch (error: any) {
+      console.error('Failed to fetch IO budget:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to validate IO number or fetch budget from SAP';
+      toast.error(errorMessage);
+      setFetchedAmount(null);
+    } finally {
+      setFetchingAmount(false);
+    }
+  };
+
+  /**
+   * Block budget in SAP system
+   */
+  const handleBlockBudget = async () => {
+    if (!ioNumber.trim() || fetchedAmount === null) {
+      toast.error('Please fetch IO amount first');
+      return;
+    }
+
+    if (!requestId) {
+      toast.error('Request ID not found');
+      return;
+    }
+
+    const blockAmount = parseFloat(amountToBlock);
+    
+    if (!amountToBlock || isNaN(blockAmount) || blockAmount <= 0) {
+      toast.error('Please enter a valid amount to block');
+      return;
+    }
+    
+    if (blockAmount > fetchedAmount) {
+      toast.error('Amount to block exceeds available IO budget');
+      return;
+    }
+
+    setBlockingBudget(true);
+    try {
+      // Call updateIODetails with blockedAmount to block budget in SAP and store in database
+      // This will store in internal_orders and claim_budget_tracking tables
+      await updateIODetails(requestId, {
+        ioNumber: ioNumber.trim(),
+        ioAvailableBalance: fetchedAmount,
+        ioBlockedAmount: blockAmount,
+        ioRemainingBalance: fetchedAmount - blockAmount,
+      });
+      
+      // Fetch updated claim details to get the blocked IO data
+      const claimData = await getClaimDetails(requestId);
+      const updatedInternalOrder = claimData?.internalOrder || claimData?.internal_order;
+      
+      if (updatedInternalOrder) {
+        const currentUser = user as any;
+        // When blocking, always use the current user who is performing the block action
+        // The organizer association may be from initial IO organization, but we want who blocked the amount
+        const blockedByName = currentUser?.displayName || 
+                             currentUser?.display_name || 
+                             currentUser?.name || 
+                             (currentUser?.firstName && currentUser?.lastName ? `${currentUser.firstName} ${currentUser.lastName}`.trim() : null) ||
+                             currentUser?.email || 
+                             'Current User';
+        
+        const blocked: IOBlockedDetails = {
+          ioNumber: updatedInternalOrder.ioNumber || updatedInternalOrder.io_number || ioNumber,
+          blockedAmount: Number(updatedInternalOrder.ioBlockedAmount || updatedInternalOrder.io_blocked_amount || blockAmount),
+          availableBalance: fetchedAmount, // Available amount before block
+          remainingBalance: Number(updatedInternalOrder.ioRemainingBalance || updatedInternalOrder.io_remaining_balance || (fetchedAmount - blockAmount)),
+          blockedDate: updatedInternalOrder.organizedAt || updatedInternalOrder.organized_at || new Date().toISOString(),
+          blockedBy: blockedByName,
+          sapDocumentNumber: updatedInternalOrder.sapDocumentNumber || updatedInternalOrder.sap_document_number || '',
+          status: 'blocked',
+        };
+        
+        setBlockedDetails(blocked);
+        setAmountToBlock(''); // Clear the input
+        toast.success('IO budget blocked successfully in SAP');
+        
+        // Refresh request details
+        onRefresh?.();
+      } else {
+        toast.error('IO blocked but failed to fetch updated details');
+        onRefresh?.();
+      }
+    } catch (error: any) {
+      console.error('Failed to block IO budget:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to block IO budget in SAP';
+      toast.error(errorMessage);
+    } finally {
+      setBlockingBudget(false);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* IO Budget Management Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <DollarSign className="w-5 h-5 text-[#2d4a3e]" />
+            IO Budget Management
+          </CardTitle>
+          <CardDescription>
+            Enter IO number to fetch available budget from SAP
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* IO Number Input */}
+          <div className="space-y-3">
+            <Label htmlFor="ioNumber">IO Number *</Label>
+            <div className="flex gap-2">
+              <Input
+                id="ioNumber"
+                placeholder="Enter IO number (e.g., IO-2024-12345)"
+                value={ioNumber}
+                onChange={(e) => setIoNumber(e.target.value)}
+                disabled={fetchingAmount || !!blockedDetails}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleFetchAmount}
+                disabled={!ioNumber.trim() || fetchingAmount || !!blockedDetails}
+                className="bg-[#2d4a3e] hover:bg-[#1f3329]"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                {fetchingAmount ? 'Fetching...' : 'Fetch Amount'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Fetched Amount Display */}
+          {fetchedAmount !== null && !blockedDetails && (
+            <>
+              <div className="bg-green-50 border-2 border-green-200 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-xs text-gray-600 uppercase tracking-wide mb-1">Available Amount</p>
+                    <p className="text-2xl font-bold text-green-700">
+                      ₹{fetchedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </p>
+                  </div>
+                  <CircleCheckBig className="w-8 h-8 text-green-600" />
+                </div>
+                <div className="mt-3 pt-3 border-t border-green-200">
+                  <p className="text-xs text-gray-600"><strong>IO Number:</strong> {ioNumber}</p>
+                  <p className="text-xs text-gray-600 mt-1"><strong>Fetched from:</strong> SAP System</p>
+                </div>
+              </div>
+
+              {/* Amount to Block Input */}
+              <div className="space-y-3">
+                <Label htmlFor="blockAmount">Amount to Block *</Label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
+                  <Input
+                    type="number"
+                    id="blockAmount"
+                    placeholder="Enter amount to block"
+                    min="0"
+                    step="0.01"
+                    value={amountToBlock}
+                    onChange={(e) => setAmountToBlock(e.target.value)}
+                    className="pl-8"
+                  />
+                </div>
+              </div>
+
+              {/* Block Button */}
+              <Button
+                onClick={handleBlockBudget}
+                disabled={blockingBudget || !amountToBlock || parseFloat(amountToBlock) <= 0 || parseFloat(amountToBlock) > fetchedAmount}
+                className="w-full bg-[#2d4a3e] hover:bg-[#1f3329]"
+              >
+                <Target className="w-4 h-4 mr-2" />
+                {blockingBudget ? 'Blocking in SAP...' : 'Block IO in SAP'}
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* IO Blocked Details Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <CircleCheckBig className="w-5 h-5 text-green-600" />
+            IO Blocked Details
+          </CardTitle>
+          <CardDescription>
+            Details of IO blocked in SAP system
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {blockedDetails ? (
+            <div className="space-y-4">
+              {/* Success Banner */}
+              <div className="bg-green-50 border-2 border-green-500 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <CircleCheckBig className="w-6 h-6 text-green-600 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="font-semibold text-green-900">IO Blocked Successfully</p>
+                    <p className="text-sm text-green-700 mt-1">Budget has been reserved in SAP system</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Blocked Details */}
+              <div className="border rounded-lg divide-y">
+                <div className="p-4">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">IO Number</p>
+                  <p className="text-sm font-semibold text-gray-900">{blockedDetails.ioNumber}</p>
+                </div>
+                <div className="p-4">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">SAP Document Number</p>
+                  <p className="text-sm font-semibold text-gray-900">{blockedDetails.sapDocumentNumber || 'N/A'}</p>
+                </div>
+                <div className="p-4 bg-green-50">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked Amount</p>
+                  <p className="text-xl font-bold text-green-700">
+                    ₹{blockedDetails.blockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </p>
+                </div>
+                <div className="p-4">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Available Amount (Before Block)</p>
+                  <p className="text-sm font-medium text-gray-900">
+                    ₹{blockedDetails.availableBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </p>
+                </div>
+                <div className="p-4 bg-blue-50">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Remaining Amount (After Block)</p>
+                  <p className="text-sm font-bold text-blue-700">
+                    ₹{blockedDetails.remainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </p>
+                </div>
+                <div className="p-4">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked By</p>
+                  <p className="text-sm font-medium text-gray-900">{blockedDetails.blockedBy}</p>
+                </div>
+                <div className="p-4">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked At</p>
+                  <p className="text-sm font-medium text-gray-900">
+                    {new Date(blockedDetails.blockedDate).toLocaleString('en-IN', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: 'numeric',
+                      hour12: true
+                    })}
+                  </p>
+                </div>
+                <div className="p-4 bg-gray-50">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
+                  <Badge className="bg-green-100 text-green-800 border-green-200">
+                    <CircleCheckBig className="w-3 h-3 mr-1" />
+                    Blocked
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <DollarSign className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <p className="text-sm text-gray-500 mb-2">No IO blocked yet</p>
+              <p className="text-xs text-gray-400">
+                Enter IO number and fetch amount to block budget
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/dealer-claim/components/request-detail/OverviewTab.tsx b/src/dealer-claim/components/request-detail/OverviewTab.tsx
index 900629e..b49ee7d 100644
--- a/src/dealer-claim/components/request-detail/OverviewTab.tsx
+++ b/src/dealer-claim/components/request-detail/OverviewTab.tsx
@@ -5,5 +5,117 @@
  * Located in: src/dealer-claim/components/request-detail/
  */
 
-// Re-export the original component
-export { ClaimManagementOverviewTab as DealerClaimOverviewTab } from '@/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab';
+import {
+  ActivityInformationCard,
+  DealerInformationCard,
+  ProposalDetailsCard,
+  RequestInitiatorCard,
+} from './claim-cards';
+import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
+import {
+  mapToClaimManagementRequest,
+  determineUserRole,
+  getRoleBasedVisibility,
+  type RequestRole,
+} from '@/utils/claimDataMapper';
+
+interface ClaimManagementOverviewTabProps {
+  request: any; // Original request object
+  apiRequest: any; // API request data
+  currentUserId: string;
+  isInitiator: boolean;
+  onEditClaimAmount?: () => void;
+  className?: string;
+}
+
+export function ClaimManagementOverviewTab({
+  request: _request,
+  apiRequest,
+  currentUserId,
+  isInitiator: _isInitiator,
+  onEditClaimAmount: _onEditClaimAmount,
+  className = '',
+}: ClaimManagementOverviewTabProps) {
+  // Check if this is a claim management request
+  if (!isClaimManagementRequest(apiRequest)) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>This is not a claim management request.</p>
+      </div>
+    );
+  }
+
+  // Map API data to claim management structure
+  const claimRequest = mapToClaimManagementRequest(apiRequest, currentUserId);
+  
+  if (!claimRequest) {
+    console.warn('[ClaimManagementOverviewTab] Failed to map claim data:', {
+      apiRequest,
+      hasClaimDetails: !!apiRequest?.claimDetails,
+      hasProposalDetails: !!apiRequest?.proposalDetails,
+      hasCompletionDetails: !!apiRequest?.completionDetails,
+    });
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>Unable to load claim management data.</p>
+        <p className="text-xs mt-2">Please ensure the request has been properly initialized.</p>
+      </div>
+    );
+  }
+
+  // Debug: Log mapped data for troubleshooting
+  console.debug('[ClaimManagementOverviewTab] Mapped claim data:', {
+    activityInfo: claimRequest.activityInfo,
+    dealerInfo: claimRequest.dealerInfo,
+    hasProposalDetails: !!claimRequest.proposalDetails,
+    closedExpenses: claimRequest.activityInfo?.closedExpenses,
+    closedExpensesBreakdown: claimRequest.activityInfo?.closedExpensesBreakdown,
+    hasDealerCode: !!claimRequest.dealerInfo?.dealerCode,
+    hasDealerName: !!claimRequest.dealerInfo?.dealerName,
+  });
+
+  // Determine user's role
+  const userRole: RequestRole = determineUserRole(apiRequest, currentUserId);
+  
+  // Get visibility settings based on role
+  const visibility = getRoleBasedVisibility(userRole);
+  
+  console.debug('[ClaimManagementOverviewTab] User role and visibility:', {
+    userRole,
+    visibility,
+    currentUserId,
+    showDealerInfo: visibility.showDealerInfo,
+    dealerInfoPresent: !!(claimRequest.dealerInfo?.dealerCode || claimRequest.dealerInfo?.dealerName),
+  });
+
+  // Extract initiator info from request
+  // The apiRequest has initiator object with displayName, email, department, phone, etc.
+  const initiatorInfo = {
+    name: apiRequest.initiator?.name || apiRequest.initiator?.displayName || apiRequest.initiator?.email || 'Unknown',
+    role: apiRequest.initiator?.role || apiRequest.initiator?.designation || 'Initiator',
+    department: apiRequest.initiator?.department || apiRequest.department || '',
+    email: apiRequest.initiator?.email || 'N/A',
+    phone: apiRequest.initiator?.phone || apiRequest.initiator?.mobile,
+  };
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* Activity Information - Always visible */}
+      <ActivityInformationCard activityInfo={claimRequest.activityInfo} />
+
+      {/* Dealer Information - Always visible */}
+      <DealerInformationCard dealerInfo={claimRequest.dealerInfo} />
+
+      {/* Proposal Details - Only shown after dealer submits proposal */}
+      {visibility.showProposalDetails && claimRequest.proposalDetails && (
+        <ProposalDetailsCard proposalDetails={claimRequest.proposalDetails} />
+      )}
+
+      {/* Request Initiator */}
+      <RequestInitiatorCard initiatorInfo={initiatorInfo} />
+    </div>
+  );
+}
+
+// Export as DealerClaimOverviewTab for consistency
+export { ClaimManagementOverviewTab as DealerClaimOverviewTab };
diff --git a/src/dealer-claim/components/request-detail/WorkflowTab.tsx b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
index 94ff425..2c3b21f 100644
--- a/src/dealer-claim/components/request-detail/WorkflowTab.tsx
+++ b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
@@ -5,5 +5,1206 @@
  * Located in: src/dealer-claim/components/request-detail/
  */
 
-// Re-export the original component
-export { DealerClaimWorkflowTab } from '@/pages/RequestDetail/components/tabs/DealerClaimWorkflowTab';
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { TrendingUp, Clock, CheckCircle, CircleCheckBig, Upload, Mail, Download, Receipt, Activity } from 'lucide-react';
+import { formatDateTime } from '@/utils/dateFormatter';
+import { DealerProposalSubmissionModal } from './modals';
+import { InitiatorProposalApprovalModal } from './modals';
+import { DeptLeadIOApprovalModal } from './modals';
+import { DealerCompletionDocumentsModal } from './modals';
+import { CreditNoteSAPModal } from './modals';
+import { EmailNotificationTemplateModal } from './modals';
+import { DMSPushModal } from './modals';
+import { toast } from 'sonner';
+import { submitProposal, updateIODetails, submitCompletion, updateEInvoice } from '@/services/dealerClaimApi';
+import { getWorkflowDetails, approveLevel, rejectLevel } from '@/services/workflowApi';
+import { uploadDocument } from '@/services/documentApi';
+
+interface DealerClaimWorkflowTabProps {
+  request: any;
+  user: any;
+  isInitiator: boolean;
+  onSkipApprover?: (data: any) => void;
+  onRefresh?: () => void;
+}
+
+interface WorkflowStep {
+  step: number;
+  title: string;
+  approver: string;
+  description: string;
+  tatHours: number;
+  status: 'pending' | 'approved' | 'waiting' | 'rejected' | 'in_progress';
+  comment?: string;
+  approvedAt?: string;
+  elapsedHours?: number;
+  // Special fields for dealer claims
+  ioDetails?: {
+    ioNumber: string;
+    ioRemark: string;
+    organizedBy: string;
+    organizedAt: string;
+    blockedAmount?: number;
+    availableBalance?: number;
+    remainingBalance?: number;
+  };
+  dmsDetails?: {
+    dmsNumber: string;
+    dmsRemarks: string;
+    pushedBy: string;
+    pushedAt: string;
+  };
+  einvoiceUrl?: string;
+  emailTemplateUrl?: string;
+}
+
+/**
+ * Safe date formatter with fallback
+ */
+const formatDateSafe = (dateString: string | undefined | null): string => {
+  if (!dateString) return '';
+  try {
+    return formatDateTime(dateString);
+  } catch (error) {
+    // Fallback to simple date format
+    try {
+      return new Date(dateString).toLocaleString('en-IN', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+      });
+    } catch {
+      return dateString;
+    }
+  }
+};
+
+/**
+ * Get step icon based on status
+ */
+const getStepIcon = (status: string) => {
+  switch (status) {
+    case 'approved':
+      return <CircleCheckBig className="w-5 h-5 text-green-600" />;
+    case 'pending':
+      return <Clock className="w-5 h-5 text-blue-600" />;
+    case 'rejected':
+      return <CheckCircle className="w-5 h-5 text-red-600" />;
+    default:
+      return <Clock className="w-5 h-5 text-gray-400" />;
+  }
+};
+
+/**
+ * Get step badge variant
+ */
+const getStepBadgeVariant = (status: string) => {
+  switch (status) {
+    case 'approved':
+      return 'bg-green-100 text-green-800 border-green-200';
+    case 'pending':
+      return 'bg-purple-100 text-purple-800 border-purple-200';
+    case 'rejected':
+      return 'bg-red-100 text-red-800 border-red-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+};
+
+/**
+ * Get step card styling
+ */
+const getStepCardStyle = (status: string, isActive: boolean) => {
+  if (isActive && (status === 'pending' || status === 'in_progress')) {
+    return 'border-purple-500 bg-purple-50 shadow-md';
+  }
+  if (status === 'approved') {
+    return 'border-green-500 bg-green-50';
+  }
+  if (status === 'rejected') {
+    return 'border-red-500 bg-red-50';
+  }
+  return 'border-gray-200 bg-white';
+};
+
+/**
+ * Get step icon background
+ */
+const getStepIconBg = (status: string) => {
+  switch (status) {
+    case 'approved':
+      return 'bg-green-100';
+    case 'pending':
+      return 'bg-purple-100';
+    case 'rejected':
+      return 'bg-red-100';
+    default:
+      return 'bg-gray-100';
+  }
+};
+
+export function DealerClaimWorkflowTab({ 
+  request, 
+  user, 
+  isInitiator, 
+  onSkipApprover: _onSkipApprover, 
+  onRefresh 
+}: DealerClaimWorkflowTabProps) {
+  const [showProposalModal, setShowProposalModal] = useState(false);
+  const [showApprovalModal, setShowApprovalModal] = useState(false);
+  const [showIOApprovalModal, setShowIOApprovalModal] = useState(false);
+  const [showCompletionModal, setShowCompletionModal] = useState(false);
+  const [showDMSPushModal, setShowDMSPushModal] = useState(false);
+  const [showCreditNoteModal, setShowCreditNoteModal] = useState(false);
+  const [showEmailTemplateModal, setShowEmailTemplateModal] = useState(false);
+  const [selectedStepForEmail, setSelectedStepForEmail] = useState<{ stepNumber: number; stepName: 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
+  useEffect(() => {
+    const loadApprovalFlows = async () => {
+      // First check if request has approvalFlow
+      if (request?.approvalFlow && request.approvalFlow.length > 0) {
+        setApprovalFlow(request.approvalFlow);
+        return;
+      }
+      
+      // Load from real API
+      if (request?.id || request?.requestId) {
+        const requestId = request.id || request.requestId;
+        try {
+          const details = await getWorkflowDetails(requestId);
+          const approvals = details?.approvalLevels || details?.approvals || [];
+          if (approvals && approvals.length > 0) {
+            // Transform approval levels to match expected format
+            const flows = approvals.map((level: any) => ({
+              step: level.levelNumber || level.level_number || 0,
+              approver: level.approverName || level.approver_name || '',
+              approverEmail: (level.approverEmail || level.approver_email || '').toLowerCase(),
+              status: level.status?.toLowerCase() || 'waiting',
+              tatHours: level.tatHours || level.tat_hours || 24,
+              elapsedHours: level.elapsedHours || level.elapsed_hours,
+              approvedAt: level.actionDate || level.action_date,
+              comment: level.comments || level.comment,
+              levelId: level.levelId || level.level_id,
+            }));
+            setApprovalFlow(flows);
+          }
+        } catch (error) {
+          console.warn('Failed to load approval flows from API:', error);
+        }
+      }
+    };
+
+    loadApprovalFlows();
+  }, [request, refreshTrigger]);
+  
+  // Also reload when request.currentStep changes
+  useEffect(() => {
+    if (request?.id || request?.requestId) {
+      const requestId = request.id || request.requestId;
+      const loadApprovalFlows = async () => {
+        try {
+          const details = await getWorkflowDetails(requestId);
+          const approvals = details?.approvalLevels || details?.approvals || [];
+          if (approvals && approvals.length > 0) {
+            const flows = approvals.map((level: any) => ({
+              step: level.levelNumber || level.level_number || 0,
+              approver: level.approverName || level.approver_name || '',
+              approverEmail: (level.approverEmail || level.approver_email || '').toLowerCase(),
+              status: level.status?.toLowerCase() || 'waiting',
+              tatHours: level.tatHours || level.tat_hours || 24,
+              elapsedHours: level.elapsedHours || level.elapsed_hours,
+              approvedAt: level.actionDate || level.action_date,
+              comment: level.comments || level.comment,
+              levelId: level.levelId || level.level_id,
+            }));
+            setApprovalFlow(flows);
+          }
+        } catch (error) {
+          console.warn('Failed to load approval flows from API:', error);
+        }
+      };
+      loadApprovalFlows();
+    }
+  }, [request?.currentStep]);
+  
+  // Enhanced refresh handler that also reloads approval flows
+  const handleRefresh = () => {
+    setRefreshTrigger(prev => prev + 1);
+    onRefresh?.();
+  };
+  
+  // Transform approval flow to dealer claim workflow steps
+  const workflowSteps: WorkflowStep[] = approvalFlow.map((step: any, index: number) => {
+    const stepTitles = [
+      'Dealer - Proposal Submission',
+      'Requestor Evaluation & Confirmation',
+      'Dept Lead Approval',
+      'Activity Creation',
+      'Dealer - Completion Documents',
+      'Requestor - Claim Approval',
+      'E-Invoice Generation',
+      'Credit Note from SAP',
+    ];
+
+    const stepDescriptions = [
+      'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
+      'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)',
+      'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)',
+      'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.',
+      'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description',
+      'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.',
+      'E-invoice will be generated through DMS.',
+      'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
+    ];
+
+    // Find approval data for this step
+    const approval = request?.approvals?.find((a: any) => a.levelId === step.levelId);
+
+    // Extract IO details from internalOrder table (Step 3)
+    let ioDetails = undefined;
+    if (step.step === 3) {
+      // Get IO details from dedicated internalOrder table
+      const internalOrder = request?.internalOrder || request?.internal_order;
+      
+      if (internalOrder?.ioNumber || internalOrder?.io_number) {
+        // Try multiple field name variations for ioRemark
+        const ioRemarkValue = 
+          internalOrder.ioRemark || 
+          internalOrder.io_remark || 
+          internalOrder.IORemark ||
+          internalOrder.IO_Remark ||
+          (internalOrder as any)?.ioRemark ||
+          (internalOrder as any)?.io_remark ||
+          '';
+        
+        ioDetails = {
+          ioNumber: internalOrder.ioNumber || internalOrder.io_number || '',
+          ioRemark: (ioRemarkValue && typeof ioRemarkValue === 'string' && ioRemarkValue.trim()) ? ioRemarkValue.trim() : 'N/A',
+          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: 
+            internalOrder.organizer?.displayName ||
+            internalOrder.organizer?.name ||
+            internalOrder.organizedBy ||
+            step.approver ||
+            'N/A',
+          organizedAt: 
+            internalOrder.organizedAt ||
+            internalOrder.organized_at ||
+            step.approvedAt ||
+            request?.updatedAt ||
+            '',
+        };
+      }
+    }
+
+    // Extract DMS details from approval data (Step 6)
+    let dmsDetails = undefined;
+    if (step.step === 6) {
+      if (approval?.dmsDetails) {
+        dmsDetails = {
+          dmsNumber: approval.dmsDetails.dmsNumber || '',
+          dmsRemarks: approval.dmsDetails.dmsRemarks || '',
+          pushedBy: approval.dmsDetails.pushedBy || step.approver,
+          pushedAt: approval.dmsDetails.pushedAt || step.approvedAt || '',
+        };
+      } else if (request?.dmsNumber) {
+        // Fallback to request-level DMS data
+        dmsDetails = {
+          dmsNumber: request.dmsNumber || '',
+          dmsRemarks: request.dmsRemarks || request.dmsDetails?.dmsRemarks || '',
+          pushedBy: step.approver,
+          pushedAt: step.approvedAt || request.updatedAt || '',
+        };
+      }
+    }
+
+    // Normalize status - handle "in-review" and other variations
+    let normalizedStatus = (step.status || 'waiting').toLowerCase();
+    if (normalizedStatus === 'in-review' || normalizedStatus === 'in_review' || normalizedStatus === 'in review') {
+      normalizedStatus = 'in_progress';
+    }
+
+    return {
+      step: step.step || index + 1,
+      title: stepTitles[index] || `Step ${step.step || index + 1}`,
+      approver: step.approver || 'Unknown',
+      description: stepDescriptions[index] || step.description || '',
+      tatHours: step.tatHours || 24,
+      status: normalizedStatus as any,
+      comment: step.comment || approval?.comment,
+      approvedAt: step.approvedAt || approval?.timestamp,
+      elapsedHours: step.elapsedHours,
+      ioDetails,
+      dmsDetails,
+      einvoiceUrl: step.step === 7 ? (approval as any)?.einvoiceUrl : undefined,
+      emailTemplateUrl: step.step === 4 ? (approval as any)?.emailTemplateUrl : undefined,
+    };
+  });
+
+  const totalSteps = request?.totalSteps || 8;
+  
+  // Calculate currentStep from approval flow - find the first pending or in_progress step
+  // If no pending/in_progress step, use the request's currentStep
+  // Note: Status normalization already handled in workflowSteps mapping above
+  const activeStep = workflowSteps.find(s => {
+    const status = s.status?.toLowerCase() || '';
+    return status === 'pending' || status === 'in_progress' || status === 'in-review' || status === 'in_review';
+  });
+  const currentStep = activeStep ? activeStep.step : (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)?.dealer?.email?.toLowerCase() ||
+    (request as any)?.claimDetails?.dealerEmail?.toLowerCase() ||
+    (request as any)?.claimDetails?.dealer_email?.toLowerCase() ||
+    ''
+  );
+  const isDealer = dealerEmail && userEmail === dealerEmail;
+
+  // Check if current user is the approver for the current step
+  const currentApprovalLevel = approvalFlow.find((level: any) => 
+    (level.step || level.levelNumber || level.level_number) === currentStep
+  );
+  const approverEmail = (currentApprovalLevel?.approverEmail || '').toLowerCase();
+  const isCurrentApprover = approverEmail && userEmail === approverEmail;
+
+  // Check if user is approver for step 2 (requestor evaluation) - match by email
+  const step2Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 2);
+  const step2ApproverEmail = (step2Level?.approverEmail || '').toLowerCase();
+  const isStep2Approver = step2ApproverEmail && userEmail === step2ApproverEmail;
+
+  // Check if user is approver for step 1 (dealer proposal submission) - match by email
+  const step1Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 1);
+  const step1ApproverEmail = (step1Level?.approverEmail || '').toLowerCase();
+  const isStep1Approver = step1ApproverEmail && userEmail === step1ApproverEmail;
+
+  // Check if user is approver for step 3 (department lead approval) - match by email
+  const step3Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 3);
+  const step3ApproverEmail = (step3Level?.approverEmail || '').toLowerCase();
+  const isStep3Approver = step3ApproverEmail && userEmail === step3ApproverEmail;
+
+  // Handle proposal submission
+  const handleProposalSubmit = async (data: {
+    proposalDocument: File | null;
+    costBreakup: Array<{ id: string; description: string; amount: number }>;
+    expectedCompletionDate: string;
+    otherDocuments: File[];
+    dealerComments: string;
+  }) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Upload proposal document if provided
+      if (data.proposalDocument) {
+        await uploadDocument(data.proposalDocument, requestId, 'APPROVAL');
+      }
+
+      // Upload other supporting documents
+      for (const file of data.otherDocuments) {
+        await uploadDocument(file, requestId, 'SUPPORTING');
+      }
+
+      // Submit proposal using dealer claim API
+      const totalBudget = data.costBreakup.reduce((sum, item) => sum + item.amount, 0);
+      await submitProposal(requestId, {
+        proposalDocument: data.proposalDocument || undefined,
+        costBreakup: data.costBreakup.map(item => ({
+          description: item.description,
+          amount: item.amount,
+        })),
+        totalEstimatedBudget: totalBudget,
+        expectedCompletionDate: data.expectedCompletionDate,
+        dealerComments: data.dealerComments,
+      });
+
+      // Activity is logged by backend service - no need to create work note
+      toast.success('Proposal submitted successfully');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to submit proposal:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to submit proposal. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle proposal approval
+  const handleProposalApprove = async (comments: string) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Get approval levels to find Step 2 levelId
+      const details = await getWorkflowDetails(requestId);
+      const approvals = details?.approvalLevels || details?.approvals || [];
+      const step2Level = approvals.find((level: any) => 
+        (level.levelNumber || level.level_number) === 2
+      );
+
+      if (!step2Level?.levelId && !step2Level?.level_id) {
+        throw new Error('Step 2 approval level not found');
+      }
+
+      const levelId = step2Level.levelId || step2Level.level_id;
+
+      // Approve Step 2 using real API
+      await approveLevel(requestId, levelId, comments);
+
+      // Activity is logged by backend approval service - no need to create work note
+      toast.success('Proposal approved successfully');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to approve proposal:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve proposal. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle proposal rejection
+  const handleProposalReject = async (comments: string) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Get approval levels to find Step 2 levelId
+      const details = await getWorkflowDetails(requestId);
+      const approvals = details?.approvalLevels || details?.approvals || [];
+      const step2Level = approvals.find((level: any) => 
+        (level.levelNumber || level.level_number) === 2
+      );
+
+      if (!step2Level?.levelId && !step2Level?.level_id) {
+        throw new Error('Step 2 approval level not found');
+      }
+
+      const levelId = step2Level.levelId || step2Level.level_id;
+
+      // Reject Step 2 using real API
+      await rejectLevel(requestId, levelId, 'Proposal rejected by requestor', comments);
+
+      // Activity is logged by backend approval service - no need to create work note
+      toast.success('Proposal rejected. Request has been cancelled.');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to reject proposal:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject proposal. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle IO approval (Step 3)
+  const handleIOApproval = async (data: {
+    ioNumber: string;
+    ioRemark: string;
+    comments: string;
+  }) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Get approval levels to find Step 3 levelId
+      const details = await getWorkflowDetails(requestId);
+      const approvals = details?.approvalLevels || details?.approvals || [];
+      const step3Level = approvals.find((level: any) => 
+        (level.levelNumber || level.level_number) === 3
+      );
+
+      if (!step3Level?.levelId && !step3Level?.level_id) {
+        throw new Error('Step 3 approval level not found');
+      }
+
+      const levelId = step3Level.levelId || step3Level.level_id;
+
+      // First, update IO details using dealer claim API
+      // Note: We need to get IO balance from SAP integration, but for now we'll use placeholder values
+      // The backend should handle SAP integration
+      await updateIODetails(requestId, {
+        ioNumber: data.ioNumber,
+        ioRemark: data.ioRemark,
+        ioAvailableBalance: 0, // Should come from SAP integration
+        ioBlockedAmount: 0, // Should come from SAP integration
+        ioRemainingBalance: 0, // Should come from SAP integration
+      });
+
+      // Approve Step 3 using real API
+      // IO remark is stored in claimDetails, so we just pass the comments
+      await approveLevel(requestId, levelId, data.comments);
+
+      // Activity is logged by backend approval service - no need to create work note
+      toast.success('Request approved and IO organized successfully');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to approve and organize IO:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle completion documents submission (Step 5)
+  const handleCompletionSubmit = async (data: {
+    activityCompletionDate: string;
+    numberOfParticipants?: number;
+    closedExpenses: Array<{ id: string; description: string; amount: number }>;
+    totalClosedExpenses: number;
+    completionDocuments: File[];
+    activityPhotos: File[];
+    invoicesReceipts?: File[];
+    attendanceSheet?: File;
+    completionDescription: string;
+  }) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Transform expense items to match API format
+      const closedExpenses = data.closedExpenses.map(item => ({
+        description: item.description,
+        amount: item.amount,
+      }));
+
+      // Submit completion documents using dealer claim API
+      await submitCompletion(requestId, {
+        activityCompletionDate: data.activityCompletionDate,
+        numberOfParticipants: data.numberOfParticipants,
+        closedExpenses,
+        totalClosedExpenses: data.totalClosedExpenses,
+        completionDocuments: data.completionDocuments,
+        activityPhotos: data.activityPhotos,
+      });
+
+      // Upload supporting documents if provided
+      if (data.invoicesReceipts && data.invoicesReceipts.length > 0) {
+        for (const file of data.invoicesReceipts) {
+          await uploadDocument(file, requestId, 'SUPPORTING');
+        }
+      }
+
+      if (data.attendanceSheet) {
+        await uploadDocument(data.attendanceSheet, requestId, 'SUPPORTING');
+      }
+
+      // Activity is logged by backend service - no need to create work note
+      toast.success('Completion documents submitted successfully');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to submit completion documents:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to submit completion documents. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle DMS push (Step 6)
+  const handleDMSPush = async (_comments: string) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Call API to push to DMS (this will auto-generate e-invoice)
+      // eInvoiceDate is required, so we pass current date
+      const today = new Date().toISOString().slice(0, 10);
+      await updateEInvoice(requestId as string, {
+        eInvoiceDate: today,
+      });
+
+      // Activity is logged by backend service - no need to create work note
+      toast.success('Pushed to DMS successfully. E-invoice will be generated automatically.');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('[DealerClaimWorkflowTab] Error pushing to DMS:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to push to DMS. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Handle IO rejection (Step 3)
+  const handleIORejection = async (comments: string) => {
+    try {
+      if (!request?.id && !request?.requestId) {
+        throw new Error('Request ID not found');
+      }
+
+      const requestId = request.id || request.requestId;
+
+      // Get approval levels to find Step 3 levelId
+      const details = await getWorkflowDetails(requestId);
+      const approvals = details?.approvalLevels || details?.approvals || [];
+      const step3Level = approvals.find((level: any) => 
+        (level.levelNumber || level.level_number) === 3
+      );
+
+      if (!step3Level?.levelId && !step3Level?.level_id) {
+        throw new Error('Step 3 approval level not found');
+      }
+
+      const levelId = step3Level.levelId || step3Level.level_id;
+
+      // Reject Step 3 using real API
+      await rejectLevel(requestId, levelId, 'Dept Lead rejected - More clarification required', comments);
+
+      // Activity is logged by backend approval service - no need to create work note
+      toast.success('Request rejected. Request has been cancelled.');
+      handleRefresh();
+    } catch (error: any) {
+      console.error('Failed to reject request:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
+      toast.error(errorMessage);
+      throw error;
+    }
+  };
+
+  // Extract proposal data from request
+  const [proposalData, setProposalData] = useState<any | null>(null);
+  
+  useEffect(() => {
+    if (!request) {
+      setProposalData(null);
+      return;
+    }
+
+    const loadProposalData = async () => {
+      try {
+        const requestId = request.id || request.requestId;
+        if (!requestId) {
+          setProposalData(null);
+          return;
+        }
+
+        // Get workflow details which includes documents and proposal details
+        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) => 
+          d.category === 'APPROVAL' || d.type === 'proposal' || d.documentCategory === 'APPROVAL'
+        );
+        
+        // Find supporting documents
+        const otherDocs = documents.filter((d: any) => 
+          d.category === 'SUPPORTING' || d.type === 'supporting' || d.documentCategory === 'SUPPORTING'
+        );
+
+        // Ensure costBreakup is an array
+        let costBreakup = proposalDetails.costBreakup || [];
+        if (typeof costBreakup === 'string') {
+          try {
+            costBreakup = JSON.parse(costBreakup);
+          } catch (e) {
+            console.warn('Failed to parse costBreakup JSON:', e);
+            costBreakup = [];
+          }
+        }
+        if (!Array.isArray(costBreakup)) {
+          costBreakup = [];
+        }
+
+        setProposalData({
+          proposalDocument: proposalDoc ? {
+            name: proposalDoc.fileName || proposalDoc.file_name || proposalDoc.name,
+            id: proposalDoc.documentId || proposalDoc.document_id || proposalDoc.id,
+          } : undefined,
+          costBreakup: costBreakup,
+          expectedCompletionDate: proposalDetails.expectedCompletionDate || '',
+          otherDocuments: otherDocs.map((d: any) => ({
+            name: d.fileName || d.file_name || d.name,
+            id: d.documentId || d.document_id || d.id,
+          })),
+          dealerComments: proposalDetails.dealerComments || '',
+          submittedAt: proposalDetails.submittedAt,
+        });
+      } catch (error) {
+        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') {
+          try {
+            costBreakup = JSON.parse(costBreakup);
+          } catch (e) {
+            console.warn('Failed to parse costBreakup JSON:', e);
+            costBreakup = [];
+          }
+        }
+        if (!Array.isArray(costBreakup)) {
+          costBreakup = [];
+        }
+
+        setProposalData({
+          proposalDocument: undefined,
+          costBreakup: costBreakup,
+          expectedCompletionDate: proposalDetails.expectedCompletionDate || '',
+          otherDocuments: [],
+          dealerComments: proposalDetails.dealerComments || '',
+          submittedAt: proposalDetails.submittedAt,
+        });
+      }
+    };
+
+    loadProposalData();
+  }, [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';
+
+  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">
+              8-Step approval process for dealer claim management
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="font-medium">
+            Step {currentStep} of {totalSteps}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {workflowSteps.map((step, index) => {
+            // Step is active if it's pending or in_progress and matches currentStep
+            const isActive = (step.status === 'pending' || step.status === 'in_progress') && step.step === currentStep;
+            const isCompleted = step.status === 'approved';
+
+            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>
+
+                  {/* 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 {step.step}: {step.title}
+                          </h4>
+                          <Badge className={getStepBadgeVariant(step.status)}>
+                            {step.status.toLowerCase()}
+                          </Badge>
+                          {/* Email Template Button (Step 4) - Show when approved */}
+                          {step.step === 4 && 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: {step.tatHours}h</p>
+                        {step.elapsedHours && (
+                          <p className="text-xs text-gray-600 font-medium">
+                            Elapsed: {step.elapsedHours}h
+                          </p>
+                        )}
+                      </div>
+                    </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>
+                    )}
+
+                    {/* IO Organization Details (Step 3) - Show when step is approved and has IO details */}
+                    {step.step === 3 && 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>
+                          )}
+                          <div className="pt-1.5 border-t border-blue-100">
+                            <p className="text-xs text-gray-600 mb-1">IO Remark:</p>
+                            <p className="text-sm text-gray-900">
+                              {step.ioDetails.ioRemark || 'N/A'}
+                            </p>
+                          </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 */}
+                    {isActive && (
+                      <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>
+                        )}
+
+                        {/* Step 2: Confirm Request - Only for initiator or step 2 approver */}
+                        {step.step === 2 && (isInitiator || isStep2Approver) && (
+                          <Button
+                            className="bg-blue-600 hover:bg-blue-700"
+                            onClick={() => {
+                              setShowApprovalModal(true);
+                            }}
+                          >
+                            <CheckCircle className="w-4 h-4 mr-2" />
+                            Confirm Request
+                          </Button>
+                        )}
+
+                        {/* Step 3: Approve and Organise IO - Only for department lead (step 3 approver) */}
+                        {step.step === 3 && (() => {
+                          // Find step 3 from approvalFlow to get approverEmail
+                          const step3Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 3);
+                          const step3ApproverEmail = (step3Level?.approverEmail || '').toLowerCase();
+                          const isStep3ApproverByEmail = step3ApproverEmail && userEmail === step3ApproverEmail;
+                          return isStep3ApproverByEmail || isStep3Approver || isCurrentApprover;
+                        })() && (
+                          <Button
+                            className="bg-green-600 hover:bg-green-700"
+                            onClick={() => {
+                              console.log('[DealerClaimWorkflowTab] Opening IO approval modal for Step 3');
+                              setShowIOApprovalModal(true);
+                            }}
+                          >
+                            <CheckCircle className="w-4 h-4 mr-2" />
+                            Approve and Organise IO
+                          </Button>
+                        )}
+
+                        {/* Step 5: Upload Completion Documents - Only for dealer */}
+                        {step.step === 5 && isDealer && (
+                          <Button
+                            className="bg-purple-600 hover:bg-purple-700"
+                            onClick={() => {
+                              setShowCompletionModal(true);
+                            }}
+                          >
+                            <Upload className="w-4 h-4 mr-2" />
+                            Upload Completion Docs
+                          </Button>
+                        )}
+
+                        {/* Step 6: Push to DMS - Only for initiator or step 6 approver */}
+                        {step.step === 6 && (isInitiator || (() => {
+                          const step6Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 6);
+                          const step6ApproverEmail = (step6Level?.approverEmail || '').toLowerCase();
+                          return step6ApproverEmail && userEmail === step6ApproverEmail;
+                        })()) && (
+                          <Button
+                            className="bg-indigo-600 hover:bg-indigo-700"
+                            onClick={() => {
+                              setShowDMSPushModal(true);
+                            }}
+                          >
+                            <Activity className="w-4 h-4 mr-2" />
+                            Push to DMS
+                          </Button>
+                        )}
+
+                        {/* 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>
+                        )}
+                      </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>
+
+    {/* Dealer Proposal Submission Modal */}
+    <DealerProposalSubmissionModal
+      isOpen={showProposalModal}
+      onClose={() => setShowProposalModal(false)}
+      onSubmit={handleProposalSubmit}
+      dealerName={dealerName}
+      activityName={activityName}
+      requestId={request?.id || request?.requestId}
+    />
+
+    {/* Initiator Proposal Approval Modal */}
+    <InitiatorProposalApprovalModal
+      isOpen={showApprovalModal}
+      onClose={() => {
+        setShowApprovalModal(false);
+      }}
+      onApprove={handleProposalApprove}
+      onReject={handleProposalReject}
+      proposalData={proposalData}
+      dealerName={dealerName}
+      activityName={activityName}
+      requestId={request?.id || request?.requestId}
+    />
+
+    {/* 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}
+    />
+
+    {/* Dealer Completion Documents Modal */}
+    <DealerCompletionDocumentsModal
+      isOpen={showCompletionModal}
+      onClose={() => setShowCompletionModal(false)}
+      onSubmit={handleCompletionSubmit}
+      dealerName={dealerName}
+      activityName={activityName}
+      requestId={request?.id || request?.requestId}
+    />
+
+    {/* 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,
+      }}
+      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 () => {
+        // TODO: Implement send to dealer functionality
+        toast.info('Send to dealer functionality will be implemented');
+      }}
+      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: 'APPROVED',
+      }}
+      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"
+    />
+    </>
+  );
+}
diff --git a/src/pages/RequestDetail/components/claim-cards/ActivityInformationCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
similarity index 98%
rename from src/pages/RequestDetail/components/claim-cards/ActivityInformationCard.tsx
rename to src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
index 4caa392..96bc679 100644
--- a/src/pages/RequestDetail/components/claim-cards/ActivityInformationCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
@@ -5,7 +5,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Calendar, MapPin, DollarSign, Receipt } from 'lucide-react';
-import { ClaimActivityInfo } from '../../types/claimManagement.types';
+import { ClaimActivityInfo } from '@/pages/RequestDetail/types/claimManagement.types';
 import { format } from 'date-fns';
 
 interface ActivityInformationCardProps {
@@ -173,5 +173,3 @@ export function ActivityInformationCard({ activityInfo, className }: ActivityInf
     </Card>
   );
 }
-
-
diff --git a/src/pages/RequestDetail/components/claim-cards/DealerInformationCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/DealerInformationCard.tsx
similarity index 97%
rename from src/pages/RequestDetail/components/claim-cards/DealerInformationCard.tsx
rename to src/dealer-claim/components/request-detail/claim-cards/DealerInformationCard.tsx
index d6e5538..eab9103 100644
--- a/src/pages/RequestDetail/components/claim-cards/DealerInformationCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/DealerInformationCard.tsx
@@ -5,7 +5,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Building, Mail, Phone, MapPin } from 'lucide-react';
-import { DealerInfo } from '../../types/claimManagement.types';
+import { DealerInfo } from '@/pages/RequestDetail/types/claimManagement.types';
 
 interface DealerInformationCardProps {
   dealerInfo: DealerInfo;
@@ -96,5 +96,3 @@ export function DealerInformationCard({ dealerInfo, className }: DealerInformati
     </Card>
   );
 }
-
-
diff --git a/src/pages/RequestDetail/components/claim-cards/ProcessDetailsCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/claim-cards/ProcessDetailsCard.tsx
rename to src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx
index 682f3ec..94959f9 100644
--- a/src/pages/RequestDetail/components/claim-cards/ProcessDetailsCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx
@@ -289,5 +289,3 @@ export function ProcessDetailsCard({
     </Card>
   );
 }
-
-
diff --git a/src/pages/RequestDetail/components/claim-cards/ProposalDetailsCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/claim-cards/ProposalDetailsCard.tsx
rename to src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx
index 111cacf..add4b72 100644
--- a/src/pages/RequestDetail/components/claim-cards/ProposalDetailsCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx
@@ -157,5 +157,3 @@ export function ProposalDetailsCard({ proposalDetails, className }: ProposalDeta
     </Card>
   );
 }
-
-
diff --git a/src/pages/RequestDetail/components/claim-cards/RequestInitiatorCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/RequestInitiatorCard.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/claim-cards/RequestInitiatorCard.tsx
rename to src/dealer-claim/components/request-detail/claim-cards/RequestInitiatorCard.tsx
index d31030e..dee86ed 100644
--- a/src/pages/RequestDetail/components/claim-cards/RequestInitiatorCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/RequestInitiatorCard.tsx
@@ -73,5 +73,3 @@ export function RequestInitiatorCard({ initiatorInfo, className }: RequestInitia
     </Card>
   );
 }
-
-
diff --git a/src/dealer-claim/components/request-detail/claim-cards/index.ts b/src/dealer-claim/components/request-detail/claim-cards/index.ts
index 5d16e5a..655c336 100644
--- a/src/dealer-claim/components/request-detail/claim-cards/index.ts
+++ b/src/dealer-claim/components/request-detail/claim-cards/index.ts
@@ -5,8 +5,8 @@
  * Located in: src/dealer-claim/components/request-detail/claim-cards/
  */
 
-export { ActivityInformationCard } from '@/pages/RequestDetail/components/claim-cards/ActivityInformationCard';
-export { DealerInformationCard } from '@/pages/RequestDetail/components/claim-cards/DealerInformationCard';
-export { ProcessDetailsCard } from '@/pages/RequestDetail/components/claim-cards/ProcessDetailsCard';
-export { ProposalDetailsCard } from '@/pages/RequestDetail/components/claim-cards/ProposalDetailsCard';
-export { RequestInitiatorCard } from '@/pages/RequestDetail/components/claim-cards/RequestInitiatorCard';
+export { ActivityInformationCard } from './ActivityInformationCard';
+export { DealerInformationCard } from './DealerInformationCard';
+export { ProcessDetailsCard } from './ProcessDetailsCard';
+export { ProposalDetailsCard } from './ProposalDetailsCard';
+export { RequestInitiatorCard } from './RequestInitiatorCard';
diff --git a/src/pages/RequestDetail/components/modals/CreditNoteSAPModal.tsx b/src/dealer-claim/components/request-detail/modals/CreditNoteSAPModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/CreditNoteSAPModal.tsx
rename to src/dealer-claim/components/request-detail/modals/CreditNoteSAPModal.tsx
index d6babc2..579edca 100644
--- a/src/pages/RequestDetail/components/modals/CreditNoteSAPModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/CreditNoteSAPModal.tsx
@@ -267,4 +267,3 @@ export function CreditNoteSAPModal({
     </Dialog>
   );
 }
-
diff --git a/src/dealer-claim/components/request-detail/modals/DMSPushModal.tsx b/src/dealer-claim/components/request-detail/modals/DMSPushModal.tsx
new file mode 100644
index 0000000..16c7923
--- /dev/null
+++ b/src/dealer-claim/components/request-detail/modals/DMSPushModal.tsx
@@ -0,0 +1,376 @@
+/**
+ * DMSPushModal Component
+ * Modal for Step 6: Push to DMS Verification
+ * Allows user to verify completion details and expenses before pushing to DMS
+ */
+
+import { useState, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { 
+  Receipt, 
+  DollarSign, 
+  TriangleAlert,
+  Activity,
+  CheckCircle2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface ExpenseItem {
+  description: string;
+  amount: number;
+}
+
+interface CompletionDetails {
+  activityCompletionDate?: string;
+  numberOfParticipants?: number;
+  closedExpenses?: ExpenseItem[];
+  totalClosedExpenses?: number;
+  completionDescription?: string;
+}
+
+interface IODetails {
+  ioNumber?: string;
+  blockedAmount?: number;
+  availableBalance?: number;
+  remainingBalance?: number;
+}
+
+interface DMSPushModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPush: (comments: string) => Promise<void>;
+  completionDetails?: CompletionDetails | null;
+  ioDetails?: IODetails | null;
+  requestTitle?: string;
+  requestNumber?: string;
+}
+
+export function DMSPushModal({
+  isOpen,
+  onClose,
+  onPush,
+  completionDetails,
+  ioDetails,
+  requestTitle,
+  requestNumber,
+}: DMSPushModalProps) {
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const commentsChars = comments.length;
+  const maxCommentsChars = 500;
+
+  // Calculate total closed expenses
+  const totalClosedExpenses = useMemo(() => {
+    if (completionDetails?.totalClosedExpenses) {
+      return completionDetails.totalClosedExpenses;
+    }
+    if (completionDetails?.closedExpenses && Array.isArray(completionDetails.closedExpenses)) {
+      return completionDetails.closedExpenses.reduce((sum, item) => {
+        const amount = typeof item === 'object' ? (item.amount || 0) : 0;
+        return sum + (Number(amount) || 0);
+      }, 0);
+    }
+    return 0;
+  }, [completionDetails]);
+
+  // Format date
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return '—';
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString('en-IN', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  // Format currency
+  const formatCurrency = (amount: number) => {
+    return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  };
+
+  const handleSubmit = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide comments before pushing to DMS');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      await onPush(comments.trim());
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to push to DMS:', error);
+      toast.error('Failed to push to DMS. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReset = () => {
+    setComments('');
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 rounded-lg bg-indigo-100">
+              <Activity className="w-6 h-6 text-indigo-600" />
+            </div>
+            <div className="flex-1">
+              <DialogTitle className="font-semibold text-xl">
+                Push to DMS - Verification
+              </DialogTitle>
+              <DialogDescription className="text-sm mt-1">
+                Review completion details and expenses before pushing to DMS for e-invoice generation
+              </DialogDescription>
+            </div>
+          </div>
+
+          {/* Request Info Card */}
+          <div className="space-y-3 p-4 bg-gray-50 rounded-lg border">
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-gray-900">Workflow Step:</span>
+              <Badge variant="outline" className="font-mono">Step 6</Badge>
+            </div>
+            {requestNumber && (
+              <div>
+                <span className="font-medium text-gray-900">Request Number:</span>
+                <p className="text-gray-700 mt-1 font-mono">{requestNumber}</p>
+              </div>
+            )}
+            <div>
+              <span className="font-medium text-gray-900">Title:</span>
+              <p className="text-gray-700 mt-1">{requestTitle || '—'}</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-gray-900">Action:</span>
+              <Badge className="bg-indigo-100 text-indigo-800 border-indigo-200">
+                <Activity className="w-3 h-3 mr-1" />
+                PUSH TO DMS
+              </Badge>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Completion Details Card */}
+          {completionDetails && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <CheckCircle2 className="w-5 h-5 text-green-600" />
+                  Completion Details
+                </CardTitle>
+                <CardDescription>
+                  Review activity completion information
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {completionDetails.activityCompletionDate && (
+                  <div className="flex items-center justify-between py-2 border-b">
+                    <span className="text-sm text-gray-600">Activity Completion Date:</span>
+                    <span className="text-sm font-semibold text-gray-900">
+                      {formatDate(completionDetails.activityCompletionDate)}
+                    </span>
+                  </div>
+                )}
+                {completionDetails.numberOfParticipants !== undefined && (
+                  <div className="flex items-center justify-between py-2 border-b">
+                    <span className="text-sm text-gray-600">Number of Participants:</span>
+                    <span className="text-sm font-semibold text-gray-900">
+                      {completionDetails.numberOfParticipants}
+                    </span>
+                  </div>
+                )}
+                {completionDetails.completionDescription && (
+                  <div className="pt-2">
+                    <p className="text-xs text-gray-600 mb-1">Completion Description:</p>
+                    <p className="text-sm text-gray-900">
+                      {completionDetails.completionDescription}
+                    </p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Expense Breakdown Card */}
+          {completionDetails?.closedExpenses && completionDetails.closedExpenses.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <DollarSign className="w-5 h-5 text-blue-600" />
+                  Expense Breakdown
+                </CardTitle>
+                <CardDescription>
+                  Review closed expenses before pushing to DMS
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {completionDetails.closedExpenses.map((expense, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded border"
+                    >
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900">
+                          {expense.description || `Expense ${index + 1}`}
+                        </p>
+                      </div>
+                      <div className="ml-4">
+                        <p className="text-sm font-semibold text-gray-900">
+                          {formatCurrency(typeof expense === 'object' ? (expense.amount || 0) : 0)}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                  <div className="flex items-center justify-between py-3 px-3 bg-blue-50 rounded border-2 border-blue-200 mt-3">
+                    <span className="text-sm font-semibold text-gray-900">Total Closed Expenses:</span>
+                    <span className="text-lg font-bold text-blue-700">
+                      {formatCurrency(totalClosedExpenses)}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* IO Details Card */}
+          {ioDetails && ioDetails.ioNumber && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <Receipt className="w-5 h-5 text-purple-600" />
+                  IO Details
+                </CardTitle>
+                <CardDescription>
+                  Internal Order information for budget reference
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center justify-between py-2 border-b">
+                  <span className="text-sm text-gray-600">IO Number:</span>
+                  <span className="text-sm font-semibold text-gray-900 font-mono">
+                    {ioDetails.ioNumber}
+                  </span>
+                </div>
+                {ioDetails.blockedAmount !== undefined && ioDetails.blockedAmount > 0 && (
+                  <div className="flex items-center justify-between py-2 border-b">
+                    <span className="text-sm text-gray-600">Blocked Amount:</span>
+                    <span className="text-sm font-bold text-green-700">
+                      {formatCurrency(ioDetails.blockedAmount)}
+                    </span>
+                  </div>
+                )}
+                {ioDetails.remainingBalance !== undefined && (
+                  <div className="flex items-center justify-between py-2">
+                    <span className="text-sm text-gray-600">Remaining Balance:</span>
+                    <span className="text-sm font-semibold text-gray-900">
+                      {formatCurrency(ioDetails.remainingBalance)}
+                    </span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Verification Warning */}
+          <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <div className="flex items-start gap-2">
+              <TriangleAlert className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-semibold text-yellow-900">
+                  Please verify all details before pushing to DMS
+                </p>
+                <p className="text-xs text-yellow-700 mt-1">
+                  Once pushed, the system will automatically generate an e-invoice and the workflow will proceed to Step 7.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Comments & Remarks */}
+          <div className="space-y-1.5">
+            <Label htmlFor="comment" className="text-sm font-semibold text-gray-900 flex items-center gap-2">
+              Comments & Remarks <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="comment"
+              placeholder="Enter your comments about pushing to DMS (e.g., verified expenses, ready for invoice generation)..."
+              value={comments}
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value.length <= maxCommentsChars) {
+                  setComments(value);
+                }
+              }}
+              rows={4}
+              className="text-sm min-h-[80px] resize-none"
+            />
+            <div className="flex items-center justify-between text-xs text-gray-500">
+              <div className="flex items-center gap-1">
+                <TriangleAlert className="w-3 h-3" />
+                Required and visible to all
+              </div>
+              <span>{commentsChars}/{maxCommentsChars}</span>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={submitting}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!comments.trim() || submitting}
+            className="bg-indigo-600 hover:bg-indigo-700 text-white"
+          >
+            {submitting ? (
+              'Pushing to DMS...'
+            ) : (
+              <>
+                <Activity className="w-4 h-4 mr-2" />
+                Push to DMS
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/src/pages/RequestDetail/components/modals/DealerCompletionDocumentsModal.tsx b/src/dealer-claim/components/request-detail/modals/DealerCompletionDocumentsModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/DealerCompletionDocumentsModal.tsx
rename to src/dealer-claim/components/request-detail/modals/DealerCompletionDocumentsModal.tsx
index 4865523..0f9589f 100644
--- a/src/pages/RequestDetail/components/modals/DealerCompletionDocumentsModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/DealerCompletionDocumentsModal.tsx
@@ -613,4 +613,3 @@ export function DealerCompletionDocumentsModal({
     </Dialog>
   );
 }
-
diff --git a/src/pages/RequestDetail/components/modals/DealerProposalSubmissionModal.tsx b/src/dealer-claim/components/request-detail/modals/DealerProposalSubmissionModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/DealerProposalSubmissionModal.tsx
rename to src/dealer-claim/components/request-detail/modals/DealerProposalSubmissionModal.tsx
index a215845..8065301 100644
--- a/src/pages/RequestDetail/components/modals/DealerProposalSubmissionModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/DealerProposalSubmissionModal.tsx
@@ -483,4 +483,3 @@ export function DealerProposalSubmissionModal({
     </Dialog>
   );
 }
-
diff --git a/src/pages/RequestDetail/components/modals/DeptLeadIOApprovalModal.tsx b/src/dealer-claim/components/request-detail/modals/DeptLeadIOApprovalModal.tsx
similarity index 87%
rename from src/pages/RequestDetail/components/modals/DeptLeadIOApprovalModal.tsx
rename to src/dealer-claim/components/request-detail/modals/DeptLeadIOApprovalModal.tsx
index c7e8248..1fe6159 100644
--- a/src/pages/RequestDetail/components/modals/DeptLeadIOApprovalModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/DeptLeadIOApprovalModal.tsx
@@ -5,6 +5,7 @@
  */
 
 import { useState, useMemo } from 'react';
+import * as React from 'react';
 import {
   Dialog,
   DialogContent,
@@ -32,6 +33,9 @@ interface DeptLeadIOApprovalModalProps {
   onReject: (comments: string) => Promise<void>;
   requestTitle?: string;
   requestId?: string;
+  // Pre-filled IO data from IO tab
+  preFilledIONumber?: string;
+  preFilledBlockedAmount?: number;
 }
 
 export function DeptLeadIOApprovalModal({
@@ -41,13 +45,22 @@ export function DeptLeadIOApprovalModal({
   onReject,
   requestTitle,
   requestId: _requestId,
+  preFilledIONumber,
+  preFilledBlockedAmount,
 }: DeptLeadIOApprovalModalProps) {
   const [actionType, setActionType] = useState<'approve' | 'reject'>('approve');
-  const [ioNumber, setIoNumber] = useState('');
+  const [ioNumber, setIoNumber] = useState(preFilledIONumber || '');
   const [ioRemark, setIoRemark] = useState('');
   const [comments, setComments] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
+  // Update ioNumber when preFilledIONumber changes (when modal opens with new data)
+  React.useEffect(() => {
+    if (isOpen && preFilledIONumber) {
+      setIoNumber(preFilledIONumber);
+    }
+  }, [isOpen, preFilledIONumber]);
+
   const ioRemarkChars = ioRemark.length;
   const commentsChars = comments.length;
   const maxIoRemarkChars = 300;
@@ -110,7 +123,7 @@ export function DeptLeadIOApprovalModal({
 
   const handleReset = () => {
     setActionType('approve');
-    setIoNumber('');
+    setIoNumber(preFilledIONumber || '');
     setIoRemark('');
     setComments('');
   };
@@ -211,8 +224,26 @@ export function DeptLeadIOApprovalModal({
                   onChange={(e) => setIoNumber(e.target.value)}
                   className="bg-white h-8"
                 />
+                {preFilledIONumber && (
+                  <p className="text-xs text-blue-600 mt-1">
+                    Pre-filled from IO tab
+                  </p>
+                )}
               </div>
 
+              {/* Blocked Amount Display (if available) */}
+              {preFilledBlockedAmount !== undefined && preFilledBlockedAmount > 0 && (
+                <div className="p-2 bg-green-50 border border-green-200 rounded">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-semibold text-gray-700">Blocked Amount:</span>
+                    <span className="text-sm font-bold text-green-700">
+                      ₹{preFilledBlockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </div>
+                  <p className="text-xs text-gray-600 mt-1">Amount already blocked in SAP from IO tab</p>
+                </div>
+              )}
+
               {/* IO Remark */}
               <div className="space-y-1">
                 <Label htmlFor="ioRemark" className="text-sm font-semibold text-gray-900 flex items-center gap-2">
@@ -301,4 +332,3 @@ export function DeptLeadIOApprovalModal({
     </Dialog>
   );
 }
-
diff --git a/src/pages/RequestDetail/components/modals/EditClaimAmountModal.tsx b/src/dealer-claim/components/request-detail/modals/EditClaimAmountModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/EditClaimAmountModal.tsx
rename to src/dealer-claim/components/request-detail/modals/EditClaimAmountModal.tsx
index 03dda18..e859ff0 100644
--- a/src/pages/RequestDetail/components/modals/EditClaimAmountModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/EditClaimAmountModal.tsx
@@ -192,5 +192,3 @@ export function EditClaimAmountModal({
     </Dialog>
   );
 }
-
-
diff --git a/src/pages/RequestDetail/components/modals/EmailNotificationTemplateModal.tsx b/src/dealer-claim/components/request-detail/modals/EmailNotificationTemplateModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/EmailNotificationTemplateModal.tsx
rename to src/dealer-claim/components/request-detail/modals/EmailNotificationTemplateModal.tsx
index bd4951b..b70aa4b 100644
--- a/src/pages/RequestDetail/components/modals/EmailNotificationTemplateModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/EmailNotificationTemplateModal.tsx
@@ -145,4 +145,3 @@ This is an automated message.`;
     </Dialog>
   );
 }
-
diff --git a/src/pages/RequestDetail/components/modals/InitiatorProposalApprovalModal.tsx b/src/dealer-claim/components/request-detail/modals/InitiatorProposalApprovalModal.tsx
similarity index 99%
rename from src/pages/RequestDetail/components/modals/InitiatorProposalApprovalModal.tsx
rename to src/dealer-claim/components/request-detail/modals/InitiatorProposalApprovalModal.tsx
index 3e91c5e..fd9033e 100644
--- a/src/pages/RequestDetail/components/modals/InitiatorProposalApprovalModal.tsx
+++ b/src/dealer-claim/components/request-detail/modals/InitiatorProposalApprovalModal.tsx
@@ -440,4 +440,3 @@ export function InitiatorProposalApprovalModal({
     </Dialog>
   );
 }
-
diff --git a/src/dealer-claim/components/request-detail/modals/index.ts b/src/dealer-claim/components/request-detail/modals/index.ts
index 59d8851..72754c0 100644
--- a/src/dealer-claim/components/request-detail/modals/index.ts
+++ b/src/dealer-claim/components/request-detail/modals/index.ts
@@ -5,10 +5,11 @@
  * Located in: src/dealer-claim/components/request-detail/modals/
  */
 
-export { CreditNoteSAPModal } from '@/pages/RequestDetail/components/modals/CreditNoteSAPModal';
-export { DealerCompletionDocumentsModal } from '@/pages/RequestDetail/components/modals/DealerCompletionDocumentsModal';
-export { DealerProposalSubmissionModal } from '@/pages/RequestDetail/components/modals/DealerProposalSubmissionModal';
-export { DeptLeadIOApprovalModal } from '@/pages/RequestDetail/components/modals/DeptLeadIOApprovalModal';
-export { EditClaimAmountModal } from '@/pages/RequestDetail/components/modals/EditClaimAmountModal';
-export { EmailNotificationTemplateModal } from '@/pages/RequestDetail/components/modals/EmailNotificationTemplateModal';
-export { InitiatorProposalApprovalModal } from '@/pages/RequestDetail/components/modals/InitiatorProposalApprovalModal';
+export { CreditNoteSAPModal } from './CreditNoteSAPModal';
+export { DealerCompletionDocumentsModal } from './DealerCompletionDocumentsModal';
+export { DealerProposalSubmissionModal } from './DealerProposalSubmissionModal';
+export { DeptLeadIOApprovalModal } from './DeptLeadIOApprovalModal';
+export { DMSPushModal } from './DMSPushModal';
+export { EditClaimAmountModal } from './EditClaimAmountModal';
+export { EmailNotificationTemplateModal } from './EmailNotificationTemplateModal';
+export { InitiatorProposalApprovalModal } from './InitiatorProposalApprovalModal';
diff --git a/src/dealer-claim/pages/RequestDetail.tsx b/src/dealer-claim/pages/RequestDetail.tsx
index e58e9ab..75c8088 100644
--- a/src/dealer-claim/pages/RequestDetail.tsx
+++ b/src/dealer-claim/pages/RequestDetail.tsx
@@ -139,30 +139,43 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
   );
   
   // Determine if user is department lead (whoever is in step 3 / approval level 3)
-  const approvalLevels = apiRequest?.approvalLevels || [];
-  const step3Level = approvalLevels.find((level: any) => 
+  // Use approvalFlow (transformed) or approvals (raw) - both have step/levelNumber
+  const approvalFlow = apiRequest?.approvalFlow || [];
+  const approvals = apiRequest?.approvals || [];
+  
+  // Try to find Step 3 from approvalFlow first (has 'step' property), then from approvals (has 'levelNumber')
+  const step3Level = approvalFlow.find((level: any) => 
+    (level.step || level.levelNumber || level.level_number) === 3
+  ) || approvals.find((level: any) => 
     (level.levelNumber || level.level_number) === 3
   );
-  const deptLeadUserId = step3Level?.approverId || step3Level?.approver?.userId;
-  const deptLeadEmail = (step3Level?.approverEmail || step3Level?.approver?.email || step3Level?.approverEmail || '').toLowerCase().trim();
   
+  const deptLeadUserId = step3Level?.approverId || step3Level?.approver_id || step3Level?.approver?.userId;
+  const deptLeadEmail = (step3Level?.approverEmail || step3Level?.approver_email || step3Level?.approver?.email || '').toLowerCase().trim();
+  
+  // User is department lead if they match the Step 3 approver (regardless of status)
   const isDeptLead = (deptLeadUserId && deptLeadUserId === currentUserId) || 
                      (deptLeadEmail && currentUserEmail && deptLeadEmail === currentUserEmail);
   
   const step3Status = step3Level?.status ? String(step3Level.status).toUpperCase() : '';
   const isStep3PendingOrInProgress = step3Status === 'PENDING' || 
-                                     step3Status === 'IN_PROGRESS';
+                                     step3Status === 'IN_PROGRESS' ||
+                                     step3Status === 'PAUSED';
   
-  const currentLevel = apiRequest?.currentLevel || apiRequest?.current_level || 0;
+  const currentLevel = apiRequest?.currentLevel || apiRequest?.current_level || apiRequest?.currentStep || 0;
   const isStep3CurrentLevel = currentLevel === 3;
   
+  // User is current approver for Step 3 if Step 3 is active and they are the approver
   const isStep3CurrentApprover = step3Level && isStep3PendingOrInProgress && isStep3CurrentLevel && (
     (deptLeadUserId && deptLeadUserId === currentUserId) || 
     (deptLeadEmail && currentUserEmail && deptLeadEmail === currentUserEmail)
   );
   
   // IO tab visibility for dealer claims
-  const showIOTab = isUserInitiator || isDeptLead || isStep3CurrentApprover;
+  // Show IO tab if user is initiator, department lead (Step 3 approver), or current Step 3 approver
+  // Also show if Step 3 has been approved (to view IO details)
+  const isStep3Approved = step3Status === 'APPROVED';
+  const showIOTab = isUserInitiator || isDeptLead || isStep3CurrentApprover || isStep3Approved;
 
   const {
     mergedMessages,
diff --git a/src/hooks/useRequestDetails.ts b/src/hooks/useRequestDetails.ts
index 460200d..fea2064 100644
--- a/src/hooks/useRequestDetails.ts
+++ b/src/hooks/useRequestDetails.ts
@@ -558,6 +558,19 @@ export function useRequestDetails(
               proposalDetails = claimData.proposalDetails || claimData.proposal_details;
               completionDetails = claimData.completionDetails || claimData.completion_details;
               internalOrder = claimData.internalOrder || claimData.internal_order || null;
+              // New normalized tables
+              const budgetTracking = claimData.budgetTracking || claimData.budget_tracking || null;
+              const invoice = claimData.invoice || null;
+              const creditNote = claimData.creditNote || claimData.credit_note || null;
+              const completionExpenses = claimData.completionExpenses || claimData.completion_expenses || null;
+              
+              // Store new fields in claimDetails for backward compatibility and easy access
+              if (claimDetails) {
+                (claimDetails as any).budgetTracking = budgetTracking;
+                (claimDetails as any).invoice = invoice;
+                (claimDetails as any).creditNote = creditNote;
+                (claimDetails as any).completionExpenses = completionExpenses;
+              }
               
               console.debug('[useRequestDetails] Initial load - Extracted details:', {
                 hasClaimDetails: !!claimDetails,
@@ -565,6 +578,10 @@ export function useRequestDetails(
                 hasProposalDetails: !!proposalDetails,
                 hasCompletionDetails: !!completionDetails,
                 hasInternalOrder: !!internalOrder,
+                hasBudgetTracking: !!budgetTracking,
+                hasInvoice: !!invoice,
+                hasCreditNote: !!creditNote,
+                hasCompletionExpenses: Array.isArray(completionExpenses) && completionExpenses.length > 0,
               });
             }
           } catch (error: any) {
@@ -614,6 +631,11 @@ export function useRequestDetails(
           proposalDetails: proposalDetails || null,
           completionDetails: completionDetails || null,
           internalOrder: internalOrder || null,
+          // New normalized tables (also available via claimDetails for backward compatibility)
+          budgetTracking: (claimDetails as any)?.budgetTracking || null,
+          invoice: (claimDetails as any)?.invoice || null,
+          creditNote: (claimDetails as any)?.creditNote || null,
+          completionExpenses: (claimDetails as any)?.completionExpenses || null,
         };
         
         setApiRequest(mapped);
diff --git a/src/pages/ClosedRequests/components/ClosedRequestCard.tsx b/src/pages/ClosedRequests/components/ClosedRequestCard.tsx
index 06d51f0..a642fbc 100644
--- a/src/pages/ClosedRequests/components/ClosedRequestCard.tsx
+++ b/src/pages/ClosedRequests/components/ClosedRequestCard.tsx
@@ -61,6 +61,32 @@ export function ClosedRequestCard({ request, onViewRequest }: ClosedRequestCardP
               >
                 {request.priority}
               </Badge>
+              {/* Template Type Badge */}
+              {(() => {
+                const templateType = (request as any)?.templateType || (request as any)?.template_type || '';
+                const templateTypeUpper = templateType?.toUpperCase() || '';
+                
+                // Direct mapping from templateType
+                let templateLabel = 'Custom';
+                let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
+                
+                if (templateTypeUpper === 'DEALER CLAIM') {
+                  templateLabel = 'Claim Management';
+                  templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
+                } else if (templateTypeUpper === 'TEMPLATE') {
+                  templateLabel = 'Template';
+                }
+                
+                return (
+                  <Badge
+                    variant="outline"
+                    className={`${templateColor} text-xs px-2.5 py-0.5 shrink-0 hidden md:inline-flex`}
+                    data-testid="template-type-badge"
+                  >
+                    {templateLabel}
+                  </Badge>
+                );
+              })()}
             </div>
 
             {/* Title */}
diff --git a/src/pages/MyRequests/components/RequestCard.tsx b/src/pages/MyRequests/components/RequestCard.tsx
index 0f49156..03757be 100644
--- a/src/pages/MyRequests/components/RequestCard.tsx
+++ b/src/pages/MyRequests/components/RequestCard.tsx
@@ -5,7 +5,7 @@
 
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { ArrowRight, User, TrendingUp, Clock, FileText, Pause } from 'lucide-react';
+import { ArrowRight, User, TrendingUp, Clock, Pause } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { MyRequest } from '../types/myRequests.types';
 import { getPriorityConfig, getStatusConfig } from '../utils/configMappers';
@@ -97,16 +97,32 @@ export function RequestCard({ request, index, onViewRequest }: RequestCardProps)
                     <PriorityIcon className="w-3 h-3 mr-1" />
                     {request.priority}
                   </Badge>
-                  {request.templateType && (
-                    <Badge
-                      variant="secondary"
-                      className="bg-purple-100 text-purple-700 text-xs shrink-0 hidden sm:inline-flex"
-                      data-testid="template-badge"
-                    >
-                      <FileText className="w-3 h-3 mr-1" />
-                      Template: {request.templateName}
-                    </Badge>
-                  )}
+                  {/* Template Type Badge */}
+                  {(() => {
+                    const templateType = request?.templateType || (request as any)?.template_type || '';
+                    const templateTypeUpper = templateType?.toUpperCase() || '';
+                    
+                    // Direct mapping from templateType
+                    let templateLabel = 'Custom';
+                    let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
+                    
+                    if (templateTypeUpper === 'DEALER CLAIM') {
+                      templateLabel = 'Claim Management';
+                      templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
+                    } else if (templateTypeUpper === 'TEMPLATE') {
+                      templateLabel = 'Template';
+                    }
+                    
+                    return (
+                      <Badge
+                        variant="outline"
+                        className={`${templateColor} font-medium text-xs shrink-0`}
+                        data-testid="template-type-badge"
+                      >
+                        {templateLabel}
+                      </Badge>
+                    );
+                  })()}
                 </div>
                 <p className="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2 leading-relaxed" data-testid="request-description">
                   {stripHtmlTags(request.description || '') || 'No description provided'}
diff --git a/src/pages/MyRequests/types/myRequests.types.ts b/src/pages/MyRequests/types/myRequests.types.ts
index 5a1704a..9e9f06a 100644
--- a/src/pages/MyRequests/types/myRequests.types.ts
+++ b/src/pages/MyRequests/types/myRequests.types.ts
@@ -16,6 +16,7 @@ export interface MyRequest {
   currentApprover?: string;
   approverLevel?: string;
   templateType?: string;
+  workflowType?: string;
   templateName?: string;
   pauseInfo?: {
     isPaused: boolean;
diff --git a/src/pages/MyRequests/utils/requestTransformers.ts b/src/pages/MyRequests/utils/requestTransformers.ts
index 3bcb527..558a878 100644
--- a/src/pages/MyRequests/utils/requestTransformers.ts
+++ b/src/pages/MyRequests/utils/requestTransformers.ts
@@ -29,8 +29,9 @@ export function transformRequest(req: any): MyRequest {
         : req.currentStep && req.totalSteps
           ? `${req.currentStep} of ${req.totalSteps}`
           : '—',
-    templateType: req.templateType,
-    templateName: req.templateName,
+    templateType: req.templateType || req.template_type,
+    workflowType: req.workflowType || req.workflow_type,
+    templateName: req.templateName || req.template_name,
   };
 }
 
diff --git a/src/pages/OpenRequests/OpenRequests.tsx b/src/pages/OpenRequests/OpenRequests.tsx
index aee3655..043aca7 100644
--- a/src/pages/OpenRequests/OpenRequests.tsx
+++ b/src/pages/OpenRequests/OpenRequests.tsx
@@ -28,6 +28,7 @@ interface Request {
   currentLevelSLA?: any; // Backend-provided SLA for current level
   isPaused?: boolean; // Pause status
   pauseInfo?: any; // Pause details
+  templateType?: string; // Template type for badge display
 }
 
 interface OpenRequestsProps {
@@ -178,6 +179,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
           approvalStep: r.currentLevel ? `Step ${r.currentLevel} of ${r.totalLevels || '?'}` : undefined,
           department: r.department,
           currentLevelSLA: r.currentLevelSLA, // ← Backend-calculated current level SLA
+          templateType: r.templateType || r.template_type, // ← Template type for badge display
         };
       });
       setItems(mapped);
@@ -458,6 +460,32 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
                       >
                         {request.priority}
                       </Badge>
+                      {/* Template Type Badge */}
+                      {(() => {
+                        const templateType = (request as any)?.templateType || (request as any)?.template_type || '';
+                        const templateTypeUpper = templateType?.toUpperCase() || '';
+                        
+                        // Direct mapping from templateType
+                        let templateLabel = 'Custom';
+                        let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
+                        
+                        if (templateTypeUpper === 'DEALER CLAIM') {
+                          templateLabel = 'Claim Management';
+                          templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
+                        } else if (templateTypeUpper === 'TEMPLATE') {
+                          templateLabel = 'Template';
+                        }
+                        
+                        return (
+                          <Badge
+                            variant="outline"
+                            className={`${templateColor} text-xs px-2.5 py-0.5 shrink-0 hidden md:inline-flex`}
+                            data-testid="template-type-badge"
+                          >
+                            {templateLabel}
+                          </Badge>
+                        );
+                      })()}
                     </div>
 
                     {/* Title */}
diff --git a/src/pages/RequestDetail/components/QuickActionsSidebar.tsx b/src/pages/RequestDetail/components/QuickActionsSidebar.tsx
index c24cddf..0d26f2b 100644
--- a/src/pages/RequestDetail/components/QuickActionsSidebar.tsx
+++ b/src/pages/RequestDetail/components/QuickActionsSidebar.tsx
@@ -10,7 +10,7 @@ import { UserPlus, Eye, CheckCircle, XCircle, Share2, Pause, Play, AlertCircle }
 import { getSharedRecipients, type SharedRecipient } from '@/services/summaryApi';
 import { useAuth } from '@/contexts/AuthContext';
 import notificationApi, { type Notification } from '@/services/notificationApi';
-import { ProcessDetailsCard } from './claim-cards';
+import { ProcessDetailsCard } from '@/dealer-claim/components/request-detail/claim-cards';
 import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
 import { determineUserRole, getRoleBasedVisibility, mapToClaimManagementRequest } from '@/utils/claimDataMapper';
 
diff --git a/src/pages/RequestDetail/components/RequestDetailHeader.tsx b/src/pages/RequestDetail/components/RequestDetailHeader.tsx
index 021cc2b..288f1ea 100644
--- a/src/pages/RequestDetail/components/RequestDetailHeader.tsx
+++ b/src/pages/RequestDetail/components/RequestDetailHeader.tsx
@@ -50,7 +50,7 @@ export function RequestDetailHeader({ request, refreshing, onBack, onRefresh, on
                 <h1 className="text-sm sm:text-base md:text-lg font-bold text-gray-900 truncate" data-testid="request-id">
                   {request.id || 'N/A'}
                 </h1>
-                {/* Priority and Status Badges */}
+                {/* Priority, Status, and Template Type Badges */}
                 <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
                   <Badge
                     className={`${priorityConfig.color} rounded-full px-2 sm:px-3 text-xs capitalize shrink-0`}
@@ -66,6 +66,26 @@ export function RequestDetailHeader({ request, refreshing, onBack, onRefresh, on
                   >
                     {statusConfig.label}
                   </Badge>
+                  {/* Template Type Badge */}
+                  {(() => {
+                    const workflowType = request?.workflowType || request?.workflow_type;
+                    const templateType = request?.templateType || request?.template_type;
+                    const isClaimManagement = workflowType === 'CLAIM_MANAGEMENT' || templateType === 'claim-management';
+                    const templateLabel = isClaimManagement ? 'Claim Management' : 'Custom';
+                    const templateColor = isClaimManagement 
+                      ? 'bg-blue-100 !text-blue-700 border-blue-200' 
+                      : 'bg-purple-100 !text-purple-600 border-purple-200';
+                    
+                    return (
+                      <Badge
+                        className={`${templateColor} rounded-full px-2 sm:px-3 text-xs shrink-0`}
+                        variant="outline"
+                        data-testid="template-type-badge"
+                      >
+                        {templateLabel}
+                      </Badge>
+                    );
+                  })()}
                 </div>
               </div>
             </div>
diff --git a/src/pages/RequestDetail/components/claim-cards/index.ts b/src/pages/RequestDetail/components/claim-cards/index.ts
deleted file mode 100644
index a13bef2..0000000
--- a/src/pages/RequestDetail/components/claim-cards/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Claim Management Card Components
- * Re-export all claim-specific card components for easy imports
- */
-
-export { ActivityInformationCard } from './ActivityInformationCard';
-export { DealerInformationCard } from './DealerInformationCard';
-export { ProposalDetailsCard } from './ProposalDetailsCard';
-export { ProcessDetailsCard } from './ProcessDetailsCard';
-export { RequestInitiatorCard } from './RequestInitiatorCard';
-
-
diff --git a/src/pages/RequestDetail/components/modals/README_CREDIT_NOTE_MODAL.md b/src/pages/RequestDetail/components/modals/README_CREDIT_NOTE_MODAL.md
deleted file mode 100644
index 51dcca4..0000000
--- a/src/pages/RequestDetail/components/modals/README_CREDIT_NOTE_MODAL.md
+++ /dev/null
@@ -1,219 +0,0 @@
-# Credit Note from SAP Modal - Integration Guide
-
-## Overview
-
-The `CreditNoteSAPModal` component is ready for implementation in Step 8 of the dealer claim workflow. This modal allows Finance team to review credit note details (generated from SAP) and send it to the dealer.
-
-## Component Location
-
-**File:** `Re_Figma_Code/src/pages/RequestDetail/components/modals/CreditNoteSAPModal.tsx`
-
-## Features
-
-### Display Sections:
-1. **Credit Note Document Card** (Green gradient)
-   - Royal Enfield branding
-   - Status badge (Approved/Issued/Sent/Pending)
-   - Credit Note Number
-   - Issue Date
-
-2. **Credit Note Amount** (Blue box)
-   - Large display of credit note amount in ₹
-
-3. **Dealer Information** (Purple box)
-   - Dealer Name
-   - Dealer Code
-   - Activity Name
-
-4. **Reference Details** (Gray box)
-   - Request ID
-   - Due Date
-
-5. **Available Actions Info** (Blue info box)
-   - Explains what Download and Send actions do
-
-### Actions:
-- **Download**: Downloads/saves credit note to Documents tab
-- **Send to Dealer**: Sends email notification to dealer with credit note attachment
-- **Close**: Closes the modal
-
-## Props Interface
-
-```typescript
-interface CreditNoteSAPModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onDownload?: () => Promise<void>;      // Optional: Custom download handler
-  onSendToDealer?: () => Promise<void>;  // Optional: Custom send handler
-  creditNoteData?: {
-    creditNoteNumber?: string;
-    creditNoteDate?: string;
-    creditNoteAmount?: number;
-    status?: 'PENDING' | 'APPROVED' | 'ISSUED' | 'SENT';
-  };
-  dealerInfo?: {
-    dealerName?: string;
-    dealerCode?: string;
-    dealerEmail?: string;
-  };
-  activityName?: string;
-  requestNumber?: string;
-  requestId?: string;
-  dueDate?: string;
-}
-```
-
-## Integration Steps
-
-### 1. Import the Modal
-
-In `DealerClaimWorkflowTab.tsx`:
-
-```typescript
-import { CreditNoteSAPModal } from '../modals/CreditNoteSAPModal';
-```
-
-### 2. Add State
-
-```typescript
-const [showCreditNoteModal, setShowCreditNoteModal] = useState(false);
-```
-
-### 3. Add Button for Step 8
-
-In the workflow steps rendering, add button for Step 8 (Finance):
-
-```typescript
-{step.step === 8 && isFinanceUser && (
-  <Button
-    className="bg-green-600 hover:bg-green-700"
-    onClick={() => setShowCreditNoteModal(true)}
-  >
-    <Receipt className="w-4 h-4 mr-2" />
-    View Credit Note
-  </Button>
-)}
-```
-
-### 4. Add Modal Component
-
-```typescript
-<CreditNoteSAPModal
-  isOpen={showCreditNoteModal}
-  onClose={() => setShowCreditNoteModal(false)}
-  onDownload={handleCreditNoteDownload}
-  onSendToDealer={handleSendCreditNoteToDealer}
-  creditNoteData={{
-    creditNoteNumber: request?.claimDetails?.creditNoteNumber,
-    creditNoteDate: request?.claimDetails?.creditNoteDate,
-    creditNoteAmount: request?.claimDetails?.creditNoteAmount,
-    status: 'APPROVED', // or get from request status
-  }}
-  dealerInfo={{
-    dealerName: request?.claimDetails?.dealerName,
-    dealerCode: request?.claimDetails?.dealerCode,
-    dealerEmail: request?.claimDetails?.dealerEmail,
-  }}
-  activityName={request?.claimDetails?.activityName}
-  requestNumber={request?.requestNumber}
-  requestId={request?.requestId}
-  dueDate={/* Calculate due date based on business rules */}
-/>
-```
-
-### 5. Implement Handlers
-
-```typescript
-const handleCreditNoteDownload = async () => {
-  try {
-    const requestId = request?.id || request?.requestId;
-    // TODO: Implement download logic
-    // - Generate/download credit note PDF from SAP
-    // - Save to Documents tab
-    // - Create activity log entry
-    toast.success('Credit note downloaded and saved to Documents');
-  } catch (error) {
-    console.error('Failed to download credit note:', error);
-    throw error;
-  }
-};
-
-const handleSendCreditNoteToDealer = async () => {
-  try {
-    const requestId = request?.id || request?.requestId;
-    const dealerEmail = request?.claimDetails?.dealerEmail;
-    
-    // TODO: Implement send logic
-    // - Send email to dealer with credit note attachment
-    // - Update credit note status to 'SENT'
-    // - Create activity log entry
-    // - Possibly approve Step 8
-    
-    toast.success('Credit note sent to dealer successfully');
-  } catch (error) {
-    console.error('Failed to send credit note:', error);
-    throw error;
-  }
-};
-```
-
-## API Integration Points
-
-### Backend Endpoints (to be implemented):
-
-1. **Download Credit Note**
-   - `GET /api/v1/dealer-claims/:requestId/credit-note/download`
-   - Returns credit note PDF/document
-
-2. **Send Credit Note to Dealer**
-   - `POST /api/v1/dealer-claims/:requestId/credit-note/send`
-   - Sends email notification to dealer
-   - Updates credit note status
-
-3. **Get Credit Note Details**
-   - Already available via `getClaimDetails()` API
-   - Returns `creditNoteNumber`, `creditNoteDate`, `creditNoteAmount` from `claimDetails`
-
-## Data Flow
-
-1. **Credit Note Generation** (Step 7 or Step 8):
-   - Credit note is generated from SAP/DMS
-   - Stored in `dealer_claim_details` table
-   - Fields: `credit_note_number`, `credit_note_date`, `credit_note_amount`
-
-2. **Display in Modal**:
-   - Modal reads from `request.claimDetails`
-   - Displays credit note information
-   - Shows dealer and request details
-
-3. **Actions**:
-   - Download: Saves credit note to Documents tab
-   - Send: Emails dealer and updates status
-
-## UI Styling
-
-The modal matches the provided HTML structure:
-- ✅ Green gradient card for credit note document
-- ✅ Blue box for amount display
-- ✅ Purple box for dealer information
-- ✅ Gray box for reference details
-- ✅ Blue info box for available actions
-- ✅ Proper icons (Receipt, Hash, Calendar, DollarSign, Building, FileText, Download, Send)
-- ✅ Status badge with checkmark icon
-- ✅ Responsive grid layouts
-
-## Status
-
-✅ **Component Created**: Ready for integration  
-⏳ **Integration**: Pending - needs to be added to `DealerClaimWorkflowTab.tsx`  
-⏳ **API Handlers**: Pending - download and send handlers need implementation  
-⏳ **Backend Endpoints**: Pending - download and send endpoints need to be created
-
-## Next Steps
-
-1. Add modal to `DealerClaimWorkflowTab.tsx` when Step 8 is ready
-2. Implement download handler (integrate with SAP/DMS)
-3. Implement send handler (email notification)
-4. Add Step 8 button visibility logic (Finance team only)
-5. Test credit note flow end-to-end
-
diff --git a/src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx b/src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx
deleted file mode 100644
index bdb48d8..0000000
--- a/src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * ClaimManagementOverviewTab Component
- * Specialized overview tab for Claim Management requests
- * Uses modular card components for flexible rendering based on role and request state
- */
-
-import {
-  ActivityInformationCard,
-  DealerInformationCard,
-  ProposalDetailsCard,
-  RequestInitiatorCard,
-} from '../claim-cards';
-import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
-import {
-  mapToClaimManagementRequest,
-  determineUserRole,
-  getRoleBasedVisibility,
-  type RequestRole,
-} from '@/utils/claimDataMapper';
-
-interface ClaimManagementOverviewTabProps {
-  request: any; // Original request object
-  apiRequest: any; // API request data
-  currentUserId: string;
-  isInitiator: boolean;
-  onEditClaimAmount?: () => void;
-  className?: string;
-}
-
-export function ClaimManagementOverviewTab({
-  request: _request,
-  apiRequest,
-  currentUserId,
-  isInitiator: _isInitiator,
-  onEditClaimAmount: _onEditClaimAmount,
-  className = '',
-}: ClaimManagementOverviewTabProps) {
-  // Check if this is a claim management request
-  if (!isClaimManagementRequest(apiRequest)) {
-    return (
-      <div className="text-center py-8 text-gray-500">
-        <p>This is not a claim management request.</p>
-      </div>
-    );
-  }
-
-  // Map API data to claim management structure
-  const claimRequest = mapToClaimManagementRequest(apiRequest, currentUserId);
-  
-  if (!claimRequest) {
-    console.warn('[ClaimManagementOverviewTab] Failed to map claim data:', {
-      apiRequest,
-      hasClaimDetails: !!apiRequest?.claimDetails,
-      hasProposalDetails: !!apiRequest?.proposalDetails,
-      hasCompletionDetails: !!apiRequest?.completionDetails,
-    });
-    return (
-      <div className="text-center py-8 text-gray-500">
-        <p>Unable to load claim management data.</p>
-        <p className="text-xs mt-2">Please ensure the request has been properly initialized.</p>
-      </div>
-    );
-  }
-
-  // Debug: Log mapped data for troubleshooting
-  console.debug('[ClaimManagementOverviewTab] Mapped claim data:', {
-    activityInfo: claimRequest.activityInfo,
-    dealerInfo: claimRequest.dealerInfo,
-    hasProposalDetails: !!claimRequest.proposalDetails,
-    closedExpenses: claimRequest.activityInfo?.closedExpenses,
-    closedExpensesBreakdown: claimRequest.activityInfo?.closedExpensesBreakdown,
-    hasDealerCode: !!claimRequest.dealerInfo?.dealerCode,
-    hasDealerName: !!claimRequest.dealerInfo?.dealerName,
-  });
-
-  // Determine user's role
-  const userRole: RequestRole = determineUserRole(apiRequest, currentUserId);
-  
-  // Get visibility settings based on role
-  const visibility = getRoleBasedVisibility(userRole);
-  
-  console.debug('[ClaimManagementOverviewTab] User role and visibility:', {
-    userRole,
-    visibility,
-    currentUserId,
-    showDealerInfo: visibility.showDealerInfo,
-    dealerInfoPresent: !!(claimRequest.dealerInfo?.dealerCode || claimRequest.dealerInfo?.dealerName),
-  });
-
-  // Extract initiator info from request
-  // The apiRequest has initiator object with displayName, email, department, phone, etc.
-  const initiatorInfo = {
-    name: apiRequest.initiator?.name || apiRequest.initiator?.displayName || apiRequest.initiator?.email || 'Unknown',
-    role: apiRequest.initiator?.role || apiRequest.initiator?.designation || 'Initiator',
-    department: apiRequest.initiator?.department || apiRequest.department || '',
-    email: apiRequest.initiator?.email || 'N/A',
-    phone: apiRequest.initiator?.phone || apiRequest.initiator?.mobile,
-  };
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Activity Information - Always visible */}
-      <ActivityInformationCard activityInfo={claimRequest.activityInfo} />
-
-      {/* Dealer Information - Always visible */}
-      <DealerInformationCard dealerInfo={claimRequest.dealerInfo} />
-
-      {/* Proposal Details - Only shown after dealer submits proposal */}
-      {visibility.showProposalDetails && claimRequest.proposalDetails && (
-        <ProposalDetailsCard proposalDetails={claimRequest.proposalDetails} />
-      )}
-
-      {/* Request Initiator */}
-      <RequestInitiatorCard initiatorInfo={initiatorInfo} />
-    </div>
-  );
-}
-
-/**
- * Wrapper component that decides whether to show claim management or regular overview
- */
-interface AdaptiveOverviewTabProps {
-  request: any;
-  apiRequest: any;
-  currentUserId: string;
-  isInitiator: boolean;
-  onEditClaimAmount?: () => void;
-  // Props for regular overview tab
-  regularOverviewComponent?: React.ComponentType<any>;
-  regularOverviewProps?: any;
-}
-
-export function AdaptiveOverviewTab({
-  request,
-  apiRequest,
-  currentUserId,
-  isInitiator,
-  onEditClaimAmount,
-  regularOverviewComponent: RegularOverview,
-  regularOverviewProps,
-}: AdaptiveOverviewTabProps) {
-  // Determine if this is a claim management request
-  const isClaim = isClaimManagementRequest(apiRequest);
-
-  if (isClaim) {
-    return (
-      <ClaimManagementOverviewTab
-        request={request}
-        apiRequest={apiRequest}
-        currentUserId={currentUserId}
-        isInitiator={isInitiator}
-        onEditClaimAmount={onEditClaimAmount}
-      />
-    );
-  }
-
-  // Render regular overview if provided
-  if (RegularOverview) {
-    return <RegularOverview {...regularOverviewProps} />;
-  }
-
-  // Fallback
-  return (
-    <div className="text-center py-8 text-gray-500">
-      <p>No overview available for this request type.</p>
-    </div>
-  );
-}
-
-
diff --git a/src/pages/RequestDetail/components/tabs/ClaimManagementWorkflowTab.tsx b/src/pages/RequestDetail/components/tabs/ClaimManagementWorkflowTab.tsx
deleted file mode 100644
index c2e468e..0000000
--- a/src/pages/RequestDetail/components/tabs/ClaimManagementWorkflowTab.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * ClaimManagementWorkflowTab Component
- * Displays the 8-step workflow process specific to Claim Management requests
- */
-
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { 
-  TrendingUp, 
-  CircleCheckBig, 
-  Clock, 
-  Mail, 
-  Download,
-  Receipt,
-  Activity,
-  AlertCircle,
-} from 'lucide-react';
-import { format } from 'date-fns';
-
-interface WorkflowStep {
-  stepNumber: number;
-  stepName: string;
-  stepDescription: string;
-  assignedTo: string;
-  assignedToType: 'dealer' | 'requestor' | 'department_lead' | 'finance' | 'system';
-  status: 'pending' | 'in_progress' | 'approved' | 'rejected' | 'skipped';
-  tatHours: number;
-  elapsedHours?: number;
-  remarks?: string;
-  approvedAt?: string;
-  approvedBy?: string;
-  ioDetails?: {
-    ioNumber: string;
-    ioRemarks: string;
-    organisedBy: string;
-    organisedAt: string;
-  };
-  dmsDetails?: {
-    dmsNumber: string;
-    dmsRemarks: string;
-    pushedBy: string;
-    pushedAt: string;
-  };
-  hasEmailNotification?: boolean;
-  hasDownload?: boolean;
-  downloadUrl?: string;
-}
-
-interface ClaimManagementWorkflowTabProps {
-  steps: WorkflowStep[];
-  currentStep: number;
-  totalSteps?: number;
-  onViewEmailTemplate?: (stepNumber: number) => void;
-  onDownloadDocument?: (stepNumber: number, url: string) => void;
-  className?: string;
-}
-
-export function ClaimManagementWorkflowTab({
-  steps,
-  currentStep,
-  totalSteps = 8,
-  onViewEmailTemplate,
-  onDownloadDocument,
-  className = '',
-}: ClaimManagementWorkflowTabProps) {
-  
-  const formatDate = (dateString?: string) => {
-    if (!dateString) return 'N/A';
-    try {
-      return format(new Date(dateString), 'MMM d, yyyy, h:mm a');
-    } catch {
-      return dateString;
-    }
-  };
-
-  const getStepBorderColor = (status: string) => {
-    switch (status) {
-      case 'approved':
-        return 'border-green-500 bg-green-50';
-      case 'in_progress':
-        return 'border-blue-500 bg-blue-50';
-      case 'rejected':
-        return 'border-red-500 bg-red-50';
-      case 'pending':
-        return 'border-gray-300 bg-white';
-      case 'skipped':
-        return 'border-gray-400 bg-gray-50';
-      default:
-        return 'border-gray-300 bg-white';
-    }
-  };
-
-  const getStepIconBg = (status: string) => {
-    switch (status) {
-      case 'approved':
-        return 'bg-green-100';
-      case 'in_progress':
-        return 'bg-blue-100';
-      case 'rejected':
-        return 'bg-red-100';
-      case 'pending':
-        return 'bg-gray-100';
-      case 'skipped':
-        return 'bg-gray-200';
-      default:
-        return 'bg-gray-100';
-    }
-  };
-
-  const getStepIcon = (status: string) => {
-    switch (status) {
-      case 'approved':
-        return <CircleCheckBig className="w-5 h-5 text-green-600" />;
-      case 'in_progress':
-        return <Clock className="w-5 h-5 text-blue-600" />;
-      case 'rejected':
-        return <AlertCircle className="w-5 h-5 text-red-600" />;
-      case 'pending':
-        return <Clock className="w-5 h-5 text-gray-400" />;
-      default:
-        return <Clock className="w-5 h-5 text-gray-400" />;
-    }
-  };
-
-  const getStatusBadgeColor = (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 'rejected':
-        return 'bg-red-100 text-red-800 border-red-200';
-      case 'pending':
-        return 'bg-gray-100 text-gray-600 border-gray-200';
-      case 'skipped':
-        return 'bg-gray-200 text-gray-700 border-gray-300';
-      default:
-        return 'bg-gray-100 text-gray-600 border-gray-200';
-    }
-  };
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="leading-none flex items-center gap-2">
-              <TrendingUp className="w-5 h-5 text-purple-600" />
-              Claim Management Workflow
-            </CardTitle>
-            <CardDescription className="mt-2">
-              8-Step approval process for dealer claim management
-            </CardDescription>
-          </div>
-          <Badge variant="outline" className="font-medium">
-            Step {currentStep} of {totalSteps}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          {steps.map((step) => (
-            <div
-              key={step.stepNumber}
-              className={`relative p-5 rounded-lg border-2 transition-all ${getStepBorderColor(step.status)}`}
-            >
-              {/* Step Content */}
-              <div className="flex items-start gap-4">
-                {/* Icon */}
-                <div className={`p-3 rounded-xl ${getStepIconBg(step.status)}`}>
-                  {getStepIcon(step.status)}
-                </div>
-
-                {/* Step Details */}
-                <div className="flex-1 min-w-0">
-                  {/* Header Row */}
-                  <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 {step.stepNumber}: {step.stepName}
-                        </h4>
-                        <Badge className={getStatusBadgeColor(step.status)}>
-                          {step.status}
-                        </Badge>
-
-                        {/* Action Buttons */}
-                        {step.hasEmailNotification && onViewEmailTemplate && (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0 hover:bg-blue-100"
-                            onClick={() => onViewEmailTemplate(step.stepNumber)}
-                            title="View email template"
-                          >
-                            <Mail className="w-3.5 h-3.5 text-blue-600" />
-                          </Button>
-                        )}
-
-                        {step.hasDownload && onDownloadDocument && step.downloadUrl && (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0 hover:bg-green-100"
-                            onClick={() => onDownloadDocument(step.stepNumber, step.downloadUrl!)}
-                            title="Download E-Invoice"
-                          >
-                            <Download className="w-3.5 h-3.5 text-green-600" />
-                          </Button>
-                        )}
-                      </div>
-                      
-                      <p className="text-sm text-gray-600">{step.assignedTo}</p>
-                      <p className="text-sm text-gray-500 mt-2 italic">
-                        {step.stepDescription}
-                      </p>
-                    </div>
-
-                    {/* TAT Info */}
-                    <div className="text-right">
-                      <p className="text-xs text-gray-500">TAT: {step.tatHours}h</p>
-                      {step.elapsedHours !== undefined && (
-                        <p className="text-xs text-gray-600 font-medium">
-                          Elapsed: {step.elapsedHours}h
-                        </p>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Remarks */}
-                  {step.remarks && (
-                    <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
-                      <p className="text-sm text-gray-700">{step.remarks}</p>
-                    </div>
-                  )}
-
-                  {/* IO Details */}
-                  {step.ioDetails && (
-                    <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>
-                        <div className="pt-1.5 border-t border-blue-100">
-                          <p className="text-xs text-gray-600 mb-1">IO Remark:</p>
-                          <p className="text-sm text-gray-900">{step.ioDetails.ioRemarks}</p>
-                        </div>
-                        <div className="pt-1.5 border-t border-blue-100 text-xs text-gray-500">
-                          Organised by {step.ioDetails.organisedBy} on{' '}
-                          {formatDate(step.ioDetails.organisedAt)}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* DMS Details */}
-                  {step.dmsDetails && (
-                    <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>
-                        <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>
-                        <div className="pt-1.5 border-t border-purple-100 text-xs text-gray-500">
-                          Pushed by {step.dmsDetails.pushedBy} on{' '}
-                          {formatDate(step.dmsDetails.pushedAt)}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Approval Timestamp */}
-                  {step.approvedAt && (
-                    <p className="text-xs text-gray-500 mt-2">
-                      {step.status === 'approved' ? 'Approved' : 'Updated'} on{' '}
-                      {formatDate(step.approvedAt)}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-
diff --git a/src/pages/RequestDetail/components/tabs/DealerClaimWorkflowTab.tsx b/src/pages/RequestDetail/components/tabs/DealerClaimWorkflowTab.tsx
deleted file mode 100644
index 635741b..0000000
--- a/src/pages/RequestDetail/components/tabs/DealerClaimWorkflowTab.tsx
+++ /dev/null
@@ -1,1260 +0,0 @@
-/**
- * Dealer Claim Workflow Tab Component
- * 
- * Purpose: Specialized workflow view for dealer claim management
- * Features:
- * - 8-step approval process visualization
- * - Action buttons for document uploads, IO organization, DMS processing
- * - Special sections for IO details and DMS details
- * - Dealer-specific workflow steps
- */
-
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { TrendingUp, Clock, CheckCircle, CircleCheckBig, Upload, Mail, Download, Receipt, Activity } from 'lucide-react';
-import { formatDateTime } from '@/utils/dateFormatter';
-import { DealerProposalSubmissionModal } from '../modals/DealerProposalSubmissionModal';
-import { InitiatorProposalApprovalModal } from '../modals/InitiatorProposalApprovalModal';
-import { DeptLeadIOApprovalModal } from '../modals/DeptLeadIOApprovalModal';
-import { DealerCompletionDocumentsModal } from '../modals/DealerCompletionDocumentsModal';
-import { CreditNoteSAPModal } from '../modals/CreditNoteSAPModal';
-import { EmailNotificationTemplateModal } from '../modals/EmailNotificationTemplateModal';
-import { toast } from 'sonner';
-import { submitProposal, updateIODetails, submitCompletion, updateEInvoice } from '@/services/dealerClaimApi';
-import { getWorkflowDetails, approveLevel, rejectLevel } from '@/services/workflowApi';
-import { uploadDocument } from '@/services/documentApi';
-import { createWorkNoteMultipart } from '@/services/workflowApi';
-
-interface DealerClaimWorkflowTabProps {
-  request: any;
-  user: any;
-  isInitiator: boolean;
-  onSkipApprover?: (data: any) => void;
-  onRefresh?: () => void;
-}
-
-interface WorkflowStep {
-  step: number;
-  title: string;
-  approver: string;
-  description: string;
-  tatHours: number;
-  status: 'pending' | 'approved' | 'waiting' | 'rejected' | 'in_progress';
-  comment?: string;
-  approvedAt?: string;
-  elapsedHours?: number;
-  // Special fields for dealer claims
-  ioDetails?: {
-    ioNumber: string;
-    ioRemark: string;
-    organizedBy: string;
-    organizedAt: string;
-  };
-  dmsDetails?: {
-    dmsNumber: string;
-    dmsRemarks: string;
-    pushedBy: string;
-    pushedAt: string;
-  };
-  einvoiceUrl?: string;
-  emailTemplateUrl?: string;
-}
-
-/**
- * Safe date formatter with fallback
- */
-const formatDateSafe = (dateString: string | undefined | null): string => {
-  if (!dateString) return '';
-  try {
-    return formatDateTime(dateString);
-  } catch (error) {
-    // Fallback to simple date format
-    try {
-      return new Date(dateString).toLocaleString('en-IN', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: true,
-      });
-    } catch {
-      return dateString;
-    }
-  }
-};
-
-/**
- * Get step icon based on status
- */
-const getStepIcon = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return <CircleCheckBig className="w-5 h-5 text-green-600" />;
-    case 'pending':
-      return <Clock className="w-5 h-5 text-blue-600" />;
-    case 'rejected':
-      return <CheckCircle className="w-5 h-5 text-red-600" />;
-    default:
-      return <Clock className="w-5 h-5 text-gray-400" />;
-  }
-};
-
-/**
- * Get step badge variant
- */
-const getStepBadgeVariant = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return 'bg-green-100 text-green-800 border-green-200';
-    case 'pending':
-      return 'bg-purple-100 text-purple-800 border-purple-200';
-    case 'rejected':
-      return 'bg-red-100 text-red-800 border-red-200';
-    default:
-      return 'bg-gray-100 text-gray-800 border-gray-200';
-  }
-};
-
-/**
- * Get step card styling
- */
-const getStepCardStyle = (status: string, isActive: boolean) => {
-  if (isActive && (status === 'pending' || status === 'in_progress')) {
-    return 'border-purple-500 bg-purple-50 shadow-md';
-  }
-  if (status === 'approved') {
-    return 'border-green-500 bg-green-50';
-  }
-  if (status === 'rejected') {
-    return 'border-red-500 bg-red-50';
-  }
-  return 'border-gray-200 bg-white';
-};
-
-/**
- * Get step icon background
- */
-const getStepIconBg = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return 'bg-green-100';
-    case 'pending':
-      return 'bg-purple-100';
-    case 'rejected':
-      return 'bg-red-100';
-    default:
-      return 'bg-gray-100';
-  }
-};
-
-export function DealerClaimWorkflowTab({ 
-  request, 
-  user, 
-  isInitiator, 
-  onSkipApprover: _onSkipApprover, 
-  onRefresh 
-}: DealerClaimWorkflowTabProps) {
-  const [showProposalModal, setShowProposalModal] = useState(false);
-  const [showApprovalModal, setShowApprovalModal] = useState(false);
-  const [showIOApprovalModal, setShowIOApprovalModal] = useState(false);
-  const [showCompletionModal, setShowCompletionModal] = useState(false);
-  const [showCreditNoteModal, setShowCreditNoteModal] = useState(false);
-  const [showEmailTemplateModal, setShowEmailTemplateModal] = useState(false);
-  const [selectedStepForEmail, setSelectedStepForEmail] = useState<{ stepNumber: number; stepName: 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
-  useEffect(() => {
-    const loadApprovalFlows = async () => {
-      // First check if request has approvalFlow
-      if (request?.approvalFlow && request.approvalFlow.length > 0) {
-        setApprovalFlow(request.approvalFlow);
-        return;
-      }
-      
-      // Load from real API
-      if (request?.id || request?.requestId) {
-        const requestId = request.id || request.requestId;
-        try {
-          const details = await getWorkflowDetails(requestId);
-          const approvals = details?.approvalLevels || details?.approvals || [];
-          if (approvals && approvals.length > 0) {
-            // Transform approval levels to match expected format
-            const flows = approvals.map((level: any) => ({
-              step: level.levelNumber || level.level_number || 0,
-              approver: level.approverName || level.approver_name || '',
-              approverEmail: (level.approverEmail || level.approver_email || '').toLowerCase(),
-              status: level.status?.toLowerCase() || 'waiting',
-              tatHours: level.tatHours || level.tat_hours || 24,
-              elapsedHours: level.elapsedHours || level.elapsed_hours,
-              approvedAt: level.actionDate || level.action_date,
-              comment: level.comments || level.comment,
-              levelId: level.levelId || level.level_id,
-            }));
-            setApprovalFlow(flows);
-          }
-        } catch (error) {
-          console.warn('Failed to load approval flows from API:', error);
-        }
-      }
-    };
-
-    loadApprovalFlows();
-  }, [request, refreshTrigger]);
-  
-  // Also reload when request.currentStep changes
-  useEffect(() => {
-    if (request?.id || request?.requestId) {
-      const requestId = request.id || request.requestId;
-      const loadApprovalFlows = async () => {
-        try {
-          const details = await getWorkflowDetails(requestId);
-          const approvals = details?.approvalLevels || details?.approvals || [];
-          if (approvals && approvals.length > 0) {
-            const flows = approvals.map((level: any) => ({
-              step: level.levelNumber || level.level_number || 0,
-              approver: level.approverName || level.approver_name || '',
-              approverEmail: (level.approverEmail || level.approver_email || '').toLowerCase(),
-              status: level.status?.toLowerCase() || 'waiting',
-              tatHours: level.tatHours || level.tat_hours || 24,
-              elapsedHours: level.elapsedHours || level.elapsed_hours,
-              approvedAt: level.actionDate || level.action_date,
-              comment: level.comments || level.comment,
-              levelId: level.levelId || level.level_id,
-            }));
-            setApprovalFlow(flows);
-          }
-        } catch (error) {
-          console.warn('Failed to load approval flows from API:', error);
-        }
-      };
-      loadApprovalFlows();
-    }
-  }, [request?.currentStep]);
-  
-  // Enhanced refresh handler that also reloads approval flows
-  const handleRefresh = () => {
-    setRefreshTrigger(prev => prev + 1);
-    onRefresh?.();
-  };
-  
-  // Transform approval flow to dealer claim workflow steps
-  const workflowSteps: WorkflowStep[] = approvalFlow.map((step: any, index: number) => {
-    const stepTitles = [
-      'Dealer - Proposal Submission',
-      'Requestor Evaluation & Confirmation',
-      'Dept Lead Approval',
-      'Activity Creation',
-      'Dealer - Completion Documents',
-      'Requestor - Claim Approval',
-      'E-Invoice Generation',
-      'Credit Note from SAP',
-    ];
-
-    const stepDescriptions = [
-      'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
-      'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)',
-      'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)',
-      'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.',
-      'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description',
-      'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.',
-      'E-invoice will be generated through DMS.',
-      'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
-    ];
-
-    // Find approval data for this step
-    const approval = request?.approvals?.find((a: any) => a.levelId === step.levelId);
-
-    // Extract IO details from internalOrder table (Step 3)
-    let ioDetails = undefined;
-    if (step.step === 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 || '',
-          ioRemark: internalOrder.ioRemark || internalOrder.io_remark || 'N/A',
-          organizedBy: 
-            internalOrder.organizer?.displayName ||
-            internalOrder.organizer?.name ||
-            internalOrder.organizedBy ||
-            step.approver ||
-            'N/A',
-          organizedAt: 
-            internalOrder.organizedAt ||
-            internalOrder.organized_at ||
-            step.approvedAt ||
-            request?.updatedAt ||
-            '',
-        };
-        
-        // Debug logging for Step 3 IO details
-        console.log('[DealerClaimWorkflowTab] Step 3 IO Details Debug:', {
-          step: step.step,
-          status: step.status,
-          internalOrder,
-          ioDetails,
-        });
-      }
-    }
-
-    // Extract DMS details from approval data (Step 6)
-    let dmsDetails = undefined;
-    if (step.step === 6) {
-      if (approval?.dmsDetails) {
-        dmsDetails = {
-          dmsNumber: approval.dmsDetails.dmsNumber || '',
-          dmsRemarks: approval.dmsDetails.dmsRemarks || '',
-          pushedBy: approval.dmsDetails.pushedBy || step.approver,
-          pushedAt: approval.dmsDetails.pushedAt || step.approvedAt || '',
-        };
-      } else if (request?.dmsNumber) {
-        // Fallback to request-level DMS data
-        dmsDetails = {
-          dmsNumber: request.dmsNumber || '',
-          dmsRemarks: request.dmsRemarks || request.dmsDetails?.dmsRemarks || '',
-          pushedBy: step.approver,
-          pushedAt: step.approvedAt || request.updatedAt || '',
-        };
-      }
-    }
-
-    // Normalize status - handle "in-review" and other variations
-    let normalizedStatus = (step.status || 'waiting').toLowerCase();
-    if (normalizedStatus === 'in-review' || normalizedStatus === 'in_review' || normalizedStatus === 'in review') {
-      normalizedStatus = 'in_progress';
-    }
-
-    return {
-      step: step.step || index + 1,
-      title: stepTitles[index] || `Step ${step.step || index + 1}`,
-      approver: step.approver || 'Unknown',
-      description: stepDescriptions[index] || step.description || '',
-      tatHours: step.tatHours || 24,
-      status: normalizedStatus as any,
-      comment: step.comment || approval?.comment,
-      approvedAt: step.approvedAt || approval?.timestamp,
-      elapsedHours: step.elapsedHours,
-      ioDetails,
-      dmsDetails,
-      einvoiceUrl: step.step === 7 ? (approval as any)?.einvoiceUrl : undefined,
-      emailTemplateUrl: step.step === 4 ? (approval as any)?.emailTemplateUrl : undefined,
-    };
-  });
-
-  const totalSteps = request?.totalSteps || 8;
-  
-  // Calculate currentStep from approval flow - find the first pending or in_progress step
-  // If no pending/in_progress step, use the request's currentStep
-  // Note: Status normalization already handled in workflowSteps mapping above
-  const activeStep = workflowSteps.find(s => {
-    const status = s.status?.toLowerCase() || '';
-    return status === 'pending' || status === 'in_progress' || status === 'in-review' || status === 'in_review';
-  });
-  const currentStep = activeStep ? activeStep.step : (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)?.dealer?.email?.toLowerCase() ||
-    (request as any)?.claimDetails?.dealerEmail?.toLowerCase() ||
-    (request as any)?.claimDetails?.dealer_email?.toLowerCase() ||
-    ''
-  );
-  const isDealer = dealerEmail && userEmail === dealerEmail;
-
-  // Check if current user is the approver for the current step
-  const currentApprovalLevel = approvalFlow.find((level: any) => 
-    (level.step || level.levelNumber || level.level_number) === currentStep
-  );
-  const approverEmail = (currentApprovalLevel?.approverEmail || '').toLowerCase();
-  const isCurrentApprover = approverEmail && userEmail === approverEmail;
-
-  // Check if user is approver for step 2 (requestor evaluation) - match by email
-  const step2Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 2);
-  const step2ApproverEmail = (step2Level?.approverEmail || '').toLowerCase();
-  const isStep2Approver = step2ApproverEmail && userEmail === step2ApproverEmail;
-
-  // Check if user is approver for step 1 (dealer proposal submission) - match by email
-  const step1Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 1);
-  const step1ApproverEmail = (step1Level?.approverEmail || '').toLowerCase();
-  const isStep1Approver = step1ApproverEmail && userEmail === step1ApproverEmail;
-
-  // Check if user is approver for step 3 (department lead approval) - match by email
-  const step3Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 3);
-  const step3ApproverEmail = (step3Level?.approverEmail || '').toLowerCase();
-  const isStep3Approver = step3ApproverEmail && userEmail === step3ApproverEmail;
-
-  // Handle proposal submission
-  const handleProposalSubmit = async (data: {
-    proposalDocument: File | null;
-    costBreakup: Array<{ id: string; description: string; amount: number }>;
-    expectedCompletionDate: string;
-    otherDocuments: File[];
-    dealerComments: string;
-  }) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Upload proposal document if provided
-      if (data.proposalDocument) {
-        await uploadDocument(data.proposalDocument, requestId, 'APPROVAL');
-      }
-
-      // Upload other supporting documents
-      for (const file of data.otherDocuments) {
-        await uploadDocument(file, requestId, 'SUPPORTING');
-      }
-
-      // Submit proposal using dealer claim API
-      const totalBudget = data.costBreakup.reduce((sum, item) => sum + item.amount, 0);
-      await submitProposal(requestId, {
-        proposalDocument: data.proposalDocument || undefined,
-        costBreakup: data.costBreakup.map(item => ({
-          description: item.description,
-          amount: item.amount,
-        })),
-        totalEstimatedBudget: totalBudget,
-        expectedCompletionDate: data.expectedCompletionDate,
-        dealerComments: data.dealerComments,
-      });
-
-      // Create work note for activity log
-      await createWorkNoteMultipart(requestId, {
-        message: `Dealer submitted proposal with ${data.costBreakup.length} cost items and estimated budget of ₹${totalBudget.toLocaleString('en-IN')}. ${data.dealerComments ? `Comments: ${data.dealerComments}` : ''}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Proposal submitted successfully');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to submit proposal:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to submit proposal. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Handle proposal approval
-  const handleProposalApprove = async (comments: string) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Get approval levels to find Step 2 levelId
-      const details = await getWorkflowDetails(requestId);
-      const approvals = details?.approvalLevels || details?.approvals || [];
-      const step2Level = approvals.find((level: any) => 
-        (level.levelNumber || level.level_number) === 2
-      );
-
-      if (!step2Level?.levelId && !step2Level?.level_id) {
-        throw new Error('Step 2 approval level not found');
-      }
-
-      const levelId = step2Level.levelId || step2Level.level_id;
-
-      // Approve Step 2 using real API
-      await approveLevel(requestId, levelId, comments);
-
-      // Create work note for activity log
-      await createWorkNoteMultipart(requestId, {
-        message: `Requestor approved the dealer proposal. ${comments ? `Comments: ${comments}` : 'Proceeding to Dept Lead approval.'}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Proposal approved successfully');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to approve proposal:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve proposal. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Handle proposal rejection
-  const handleProposalReject = async (comments: string) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Get approval levels to find Step 2 levelId
-      const details = await getWorkflowDetails(requestId);
-      const approvals = details?.approvalLevels || details?.approvals || [];
-      const step2Level = approvals.find((level: any) => 
-        (level.levelNumber || level.level_number) === 2
-      );
-
-      if (!step2Level?.levelId && !step2Level?.level_id) {
-        throw new Error('Step 2 approval level not found');
-      }
-
-      const levelId = step2Level.levelId || step2Level.level_id;
-
-      // Reject Step 2 using real API
-      await rejectLevel(requestId, levelId, 'Proposal rejected by requestor', comments);
-
-      // Create work note for activity log
-      await createWorkNoteMultipart(requestId, {
-        message: `Requestor rejected the dealer proposal. Request has been cancelled. ${comments ? `Reason: ${comments}` : ''}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Proposal rejected. Request has been cancelled.');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to reject proposal:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject proposal. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Handle IO approval (Step 3)
-  const handleIOApproval = async (data: {
-    ioNumber: string;
-    ioRemark: string;
-    comments: string;
-  }) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Get approval levels to find Step 3 levelId
-      const details = await getWorkflowDetails(requestId);
-      const approvals = details?.approvalLevels || details?.approvals || [];
-      const step3Level = approvals.find((level: any) => 
-        (level.levelNumber || level.level_number) === 3
-      );
-
-      if (!step3Level?.levelId && !step3Level?.level_id) {
-        throw new Error('Step 3 approval level not found');
-      }
-
-      const levelId = step3Level.levelId || step3Level.level_id;
-
-      // First, update IO details using dealer claim API
-      // Note: We need to get IO balance from SAP integration, but for now we'll use placeholder values
-      // The backend should handle SAP integration
-      await updateIODetails(requestId, {
-        ioNumber: data.ioNumber,
-        ioRemark: data.ioRemark,
-        ioAvailableBalance: 0, // Should come from SAP integration
-        ioBlockedAmount: 0, // Should come from SAP integration
-        ioRemainingBalance: 0, // Should come from SAP integration
-      });
-
-      // Approve Step 3 using real API
-      // IO remark is stored in claimDetails, so we just pass the comments
-      await approveLevel(requestId, levelId, data.comments);
-
-      // Create work note for activity log
-      await createWorkNoteMultipart(requestId, {
-        message: `Dept Lead approved request and organized IO ${data.ioNumber}. ${data.ioRemark ? `IO Remark: ${data.ioRemark}. ` : ''}${data.comments ? `Comments: ${data.comments}` : 'Budget will be blocked in SAP.'}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Request approved and IO organized successfully');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to approve and organize IO:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to approve request. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Handle completion documents submission (Step 5)
-  const handleCompletionSubmit = async (data: {
-    activityCompletionDate: string;
-    numberOfParticipants?: number;
-    closedExpenses: Array<{ id: string; description: string; amount: number }>;
-    totalClosedExpenses: number;
-    completionDocuments: File[];
-    activityPhotos: File[];
-    invoicesReceipts?: File[];
-    attendanceSheet?: File;
-    completionDescription: string;
-  }) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Transform expense items to match API format
-      const closedExpenses = data.closedExpenses.map(item => ({
-        description: item.description,
-        amount: item.amount,
-      }));
-
-      // Submit completion documents using dealer claim API
-      await submitCompletion(requestId, {
-        activityCompletionDate: data.activityCompletionDate,
-        numberOfParticipants: data.numberOfParticipants,
-        closedExpenses,
-        totalClosedExpenses: data.totalClosedExpenses,
-        completionDocuments: data.completionDocuments,
-        activityPhotos: data.activityPhotos,
-      });
-
-      // Upload supporting documents if provided
-      if (data.invoicesReceipts && data.invoicesReceipts.length > 0) {
-        for (const file of data.invoicesReceipts) {
-          await uploadDocument(file, requestId, 'SUPPORTING');
-        }
-      }
-
-      if (data.attendanceSheet) {
-        await uploadDocument(data.attendanceSheet, requestId, 'SUPPORTING');
-      }
-
-      // Create work note with completion description
-      await createWorkNoteMultipart(requestId, {
-        message: `Dealer submitted completion documents. ${data.completionDescription ? `Description: ${data.completionDescription}` : ''}${data.totalClosedExpenses > 0 ? ` Total closed expenses: ₹${data.totalClosedExpenses.toLocaleString('en-IN')}` : ''}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Completion documents submitted successfully');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to submit completion documents:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to submit completion documents. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Handle IO rejection (Step 3)
-  const handleIORejection = async (comments: string) => {
-    try {
-      if (!request?.id && !request?.requestId) {
-        throw new Error('Request ID not found');
-      }
-
-      const requestId = request.id || request.requestId;
-
-      // Get approval levels to find Step 3 levelId
-      const details = await getWorkflowDetails(requestId);
-      const approvals = details?.approvalLevels || details?.approvals || [];
-      const step3Level = approvals.find((level: any) => 
-        (level.levelNumber || level.level_number) === 3
-      );
-
-      if (!step3Level?.levelId && !step3Level?.level_id) {
-        throw new Error('Step 3 approval level not found');
-      }
-
-      const levelId = step3Level.levelId || step3Level.level_id;
-
-      // Reject Step 3 using real API
-      await rejectLevel(requestId, levelId, 'Dept Lead rejected - More clarification required', comments);
-
-      // Create work note for activity log
-      await createWorkNoteMultipart(requestId, {
-        message: `Dept Lead rejected the request. More clarification required. Request has been cancelled. ${comments ? `Reason: ${comments}` : ''}`,
-        isPriority: false,
-      }, []);
-
-      toast.success('Request rejected. Request has been cancelled.');
-      handleRefresh();
-    } catch (error: any) {
-      console.error('Failed to reject request:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to reject request. Please try again.';
-      toast.error(errorMessage);
-      throw error;
-    }
-  };
-
-  // Extract proposal data from request
-  const [proposalData, setProposalData] = useState<any | null>(null);
-  
-  useEffect(() => {
-    if (!request) {
-      setProposalData(null);
-      return;
-    }
-
-    const loadProposalData = async () => {
-      try {
-        const requestId = request.id || request.requestId;
-        if (!requestId) {
-          setProposalData(null);
-          return;
-        }
-
-        // Get workflow details which includes documents and proposal details
-        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) => 
-          d.category === 'APPROVAL' || d.type === 'proposal' || d.documentCategory === 'APPROVAL'
-        );
-        
-        // Find supporting documents
-        const otherDocs = documents.filter((d: any) => 
-          d.category === 'SUPPORTING' || d.type === 'supporting' || d.documentCategory === 'SUPPORTING'
-        );
-
-        // Ensure costBreakup is an array
-        let costBreakup = proposalDetails.costBreakup || [];
-        if (typeof costBreakup === 'string') {
-          try {
-            costBreakup = JSON.parse(costBreakup);
-          } catch (e) {
-            console.warn('Failed to parse costBreakup JSON:', e);
-            costBreakup = [];
-          }
-        }
-        if (!Array.isArray(costBreakup)) {
-          costBreakup = [];
-        }
-
-        setProposalData({
-          proposalDocument: proposalDoc ? {
-            name: proposalDoc.fileName || proposalDoc.file_name || proposalDoc.name,
-            id: proposalDoc.documentId || proposalDoc.document_id || proposalDoc.id,
-          } : undefined,
-          costBreakup: costBreakup,
-          expectedCompletionDate: proposalDetails.expectedCompletionDate || '',
-          otherDocuments: otherDocs.map((d: any) => ({
-            name: d.fileName || d.file_name || d.name,
-            id: d.documentId || d.document_id || d.id,
-          })),
-          dealerComments: proposalDetails.dealerComments || '',
-          submittedAt: proposalDetails.submittedAt,
-        });
-      } catch (error) {
-        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') {
-          try {
-            costBreakup = JSON.parse(costBreakup);
-          } catch (e) {
-            console.warn('Failed to parse costBreakup JSON:', e);
-            costBreakup = [];
-          }
-        }
-        if (!Array.isArray(costBreakup)) {
-          costBreakup = [];
-        }
-
-        setProposalData({
-          proposalDocument: undefined,
-          costBreakup: costBreakup,
-          expectedCompletionDate: proposalDetails.expectedCompletionDate || '',
-          otherDocuments: [],
-          dealerComments: proposalDetails.dealerComments || '',
-          submittedAt: proposalDetails.submittedAt,
-        });
-      }
-    };
-
-    loadProposalData();
-  }, [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';
-
-  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">
-              8-Step approval process for dealer claim management
-            </CardDescription>
-          </div>
-          <Badge variant="outline" className="font-medium">
-            Step {currentStep} of {totalSteps}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          {workflowSteps.map((step, index) => {
-            // Step is active if it's pending or in_progress and matches currentStep
-            const isActive = (step.status === 'pending' || step.status === 'in_progress') && step.step === currentStep;
-            const isCompleted = step.status === 'approved';
-            
-            // Debug logging for Step 1
-            if (step.step === 1) {
-              console.log('[DealerClaimWorkflowTab] Step 1 Debug:', {
-                step: step.step,
-                status: step.status,
-                currentStep,
-                isActive,
-                isDealer,
-                isStep1Approver,
-                step1ApproverEmail,
-                userEmail,
-                dealerEmail,
-              });
-            }
-
-            // Debug logging for Step 2
-            if (step.step === 2) {
-              console.log('[DealerClaimWorkflowTab] Step 2 Debug:', {
-                step: step.step,
-                status: step.status,
-                currentStep,
-                isActive,
-                isInitiator,
-                isStep2Approver,
-                showApprovalModal,
-              });
-            }
-
-            // Debug logging for Step 3
-            if (step.step === 3) {
-              console.log('[DealerClaimWorkflowTab] Step 3 Debug:', {
-                step: step.step,
-                status: step.status,
-                currentStep,
-                isActive,
-                isCurrentApprover,
-                isStep3Approver,
-                step3ApproverEmail,
-                userEmail,
-                approverEmail,
-              });
-            }
-
-            // Debug logging for Step 5
-            if (step.step === 5) {
-              console.log('[DealerClaimWorkflowTab] Step 5 Debug:', {
-                step: step.step,
-                status: step.status,
-                currentStep,
-                isActive,
-                isDealer,
-                dealerEmail,
-                userEmail,
-                requestDealerEmail: (request as any)?.dealerEmail,
-                requestClaimDetails: (request as any)?.claimDetails,
-                claimDetailsDealerEmail: (request as any)?.claimDetails?.dealerEmail,
-              });
-            }
-
-            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>
-
-                  {/* 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 {step.step}: {step.title}
-                          </h4>
-                          <Badge className={getStepBadgeVariant(step.status)}>
-                            {step.status.toLowerCase()}
-                          </Badge>
-                          {/* Email Template Button (Step 4) - Show when approved */}
-                          {step.step === 4 && 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: {step.tatHours}h</p>
-                        {step.elapsedHours && (
-                          <p className="text-xs text-gray-600 font-medium">
-                            Elapsed: {step.elapsedHours}h
-                          </p>
-                        )}
-                      </div>
-                    </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>
-                    )}
-
-                    {/* IO Organization Details (Step 3) - Show when step is approved and has IO details */}
-                    {step.step === 3 && 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>
-                          <div className="pt-1.5 border-t border-blue-100">
-                            <p className="text-xs text-gray-600 mb-1">IO Remark:</p>
-                            <p className="text-sm text-gray-900">
-                              {step.ioDetails.ioRemark || 'N/A'}
-                            </p>
-                          </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 */}
-                    {isActive && (
-                      <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={() => {
-                              console.log('[DealerClaimWorkflowTab] Opening proposal submission modal for Step 1');
-                              setShowProposalModal(true);
-                            }}
-                          >
-                            <Upload className="w-4 h-4 mr-2" />
-                            Submit Proposal
-                          </Button>
-                        )}
-
-                        {/* Step 2: Confirm Request - Only for initiator or step 2 approver */}
-                        {step.step === 2 && (isInitiator || isStep2Approver) && (
-                          <Button
-                            className="bg-blue-600 hover:bg-blue-700"
-                            onClick={() => {
-                              console.log('[DealerClaimWorkflowTab] Opening approval modal for Step 2');
-                              setShowApprovalModal(true);
-                            }}
-                          >
-                            <CheckCircle className="w-4 h-4 mr-2" />
-                            Confirm Request
-                          </Button>
-                        )}
-
-                        {/* Step 3: Approve and Organise IO - Only for department lead (step 3 approver) */}
-                        {step.step === 3 && (() => {
-                          // Find step 3 from approvalFlow to get approverEmail
-                          const step3Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 3);
-                          const step3ApproverEmail = (step3Level?.approverEmail || '').toLowerCase();
-                          const isStep3ApproverByEmail = step3ApproverEmail && userEmail === step3ApproverEmail;
-                          return isStep3ApproverByEmail || isStep3Approver || isCurrentApprover;
-                        })() && (
-                          <Button
-                            className="bg-green-600 hover:bg-green-700"
-                            onClick={() => {
-                              console.log('[DealerClaimWorkflowTab] Opening IO approval modal for Step 3');
-                              setShowIOApprovalModal(true);
-                            }}
-                          >
-                            <CheckCircle className="w-4 h-4 mr-2" />
-                            Approve and Organise IO
-                          </Button>
-                        )}
-
-                        {/* Step 5: Upload Completion Documents - Only for dealer */}
-                        {step.step === 5 && isDealer && (
-                          <Button
-                            className="bg-purple-600 hover:bg-purple-700"
-                            onClick={() => {
-                              console.log('[DealerClaimWorkflowTab] Opening completion documents modal for Step 5');
-                              setShowCompletionModal(true);
-                            }}
-                          >
-                            <Upload className="w-4 h-4 mr-2" />
-                            Upload Completion Docs
-                          </Button>
-                        )}
-
-                        {/* Step 6: Push to DMS - Only for initiator or step 6 approver */}
-                        {step.step === 6 && (isInitiator || (() => {
-                          const step6Level = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === 6);
-                          const step6ApproverEmail = (step6Level?.approverEmail || '').toLowerCase();
-                          return step6ApproverEmail && userEmail === step6ApproverEmail;
-                        })()) && (
-                          <Button
-                            className="bg-indigo-600 hover:bg-indigo-700"
-                            onClick={async () => {
-                              console.log('[DealerClaimWorkflowTab] Pushing to DMS for Step 6');
-                              try {
-                                const requestId = request?.requestId || request?.id;
-                                if (!requestId) {
-                                  toast.error('Request ID not found');
-                                  return;
-                                }
-                                // Call API to push to DMS (this will auto-generate e-invoice)
-                                // eInvoiceDate is required, so we pass current date
-                                // Use slice to avoid undefined with strict index checks
-                                const today = new Date().toISOString().slice(0, 10);
-                                await updateEInvoice(requestId as string, {
-                                  eInvoiceDate: today,
-                                });
-                                toast.success('Pushed to DMS successfully');
-                                handleRefresh();
-                              } catch (error: any) {
-                                console.error('[DealerClaimWorkflowTab] Error pushing to DMS:', error);
-                                toast.error(error?.response?.data?.message || 'Failed to push to DMS');
-                              }
-                            }}
-                          >
-                            <Activity className="w-4 h-4 mr-2" />
-                            Push to DMS
-                          </Button>
-                        )}
-
-                        {/* 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={() => {
-                              console.log('[DealerClaimWorkflowTab] Opening credit note modal for Step 8');
-                              setShowCreditNoteModal(true);
-                            }}
-                          >
-                            <Receipt className="w-4 h-4 mr-2" />
-                            View & Send Credit Note
-                          </Button>
-                        )}
-                      </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>
-
-    {/* Dealer Proposal Submission Modal */}
-    <DealerProposalSubmissionModal
-      isOpen={showProposalModal}
-      onClose={() => setShowProposalModal(false)}
-      onSubmit={handleProposalSubmit}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-    />
-
-    {/* Initiator Proposal Approval Modal */}
-    <InitiatorProposalApprovalModal
-      isOpen={showApprovalModal}
-      onClose={() => {
-        console.log('[DealerClaimWorkflowTab] Closing approval modal');
-        setShowApprovalModal(false);
-      }}
-      onApprove={handleProposalApprove}
-      onReject={handleProposalReject}
-      proposalData={proposalData}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-    />
-
-    {/* Dept Lead IO Approval Modal */}
-    <DeptLeadIOApprovalModal
-      isOpen={showIOApprovalModal}
-      onClose={() => setShowIOApprovalModal(false)}
-      onApprove={handleIOApproval}
-      onReject={handleIORejection}
-      requestTitle={request?.title}
-      requestId={request?.id || request?.requestId}
-    />
-
-    {/* Dealer Completion Documents Modal */}
-    <DealerCompletionDocumentsModal
-      isOpen={showCompletionModal}
-      onClose={() => setShowCompletionModal(false)}
-      onSubmit={handleCompletionSubmit}
-      dealerName={dealerName}
-      activityName={activityName}
-      requestId={request?.id || request?.requestId}
-    />
-
-    {/* 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 () => {
-        // TODO: Implement send to dealer functionality
-        toast.info('Send to dealer functionality will be implemented');
-      }}
-      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: 'APPROVED',
-      }}
-      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"
-    />
-    </>
-  );
-}
-
diff --git a/src/pages/RequestDetail/components/tabs/IOTab.tsx b/src/pages/RequestDetail/components/tabs/IOTab.tsx
deleted file mode 100644
index f1d54e8..0000000
--- a/src/pages/RequestDetail/components/tabs/IOTab.tsx
+++ /dev/null
@@ -1,439 +0,0 @@
-/**
- * IO Tab Component
- * 
- * Purpose: Handle IO (Internal Order) budget management for dealer claims
- * Features:
- * - Fetch IO budget from SAP
- * - Block IO amount in SAP
- * - Display blocked IO details
- */
-
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Badge } from '@/components/ui/badge';
-import { DollarSign, Download, CircleCheckBig, Target } from 'lucide-react';
-import { toast } from 'sonner';
-import { validateIO, updateIODetails, getClaimDetails } from '@/services/dealerClaimApi';
-import { useAuth } from '@/contexts/AuthContext';
-
-interface IOTabProps {
-  request: any;
-  apiRequest?: any;
-  onRefresh?: () => void;
-}
-
-interface IOBlockedDetails {
-  ioNumber: string;
-  blockedAmount: number;
-  availableBalance: number; // Available amount before block
-  remainingBalance: number; // Remaining amount after block
-  blockedDate: string;
-  blockedBy: string; // User who blocked
-  sapDocumentNumber: string;
-  status: 'blocked' | 'released' | 'failed';
-}
-
-export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
-  const { user } = useAuth();
-  const requestId = apiRequest?.requestId || request?.requestId;
-  
-  // Load existing IO data from apiRequest or request
-  const internalOrder = apiRequest?.internalOrder || apiRequest?.internal_order || null;
-  const existingIONumber = internalOrder?.ioNumber || internalOrder?.io_number || request?.ioNumber || '';
-  const existingBlockedAmount = internalOrder?.ioBlockedAmount || internalOrder?.io_blocked_amount || 0;
-  const existingAvailableBalance = internalOrder?.ioAvailableBalance || internalOrder?.io_available_balance || 0;
-  const existingRemainingBalance = internalOrder?.ioRemainingBalance || internalOrder?.io_remaining_balance || 0;
-  const sapDocNumber = internalOrder?.sapDocumentNumber || internalOrder?.sap_document_number || '';
-  // Get organizer user object from association (organizer) or fallback to organizedBy UUID
-  const organizer = internalOrder?.organizer || null;
-  
-  const [ioNumber, setIoNumber] = useState(existingIONumber);
-  const [fetchingAmount, setFetchingAmount] = useState(false);
-  const [fetchedAmount, setFetchedAmount] = useState<number | null>(null);
-  const [amountToBlock, setAmountToBlock] = useState<string>('');
-  const [blockedDetails, setBlockedDetails] = useState<IOBlockedDetails | null>(null);
-  const [blockingBudget, setBlockingBudget] = useState(false);
-
-  // Load existing IO block details from apiRequest
-  useEffect(() => {
-    if (internalOrder && existingIONumber && existingBlockedAmount > 0) {
-      const availableBeforeBlock = Number(existingAvailableBalance) + Number(existingBlockedAmount) || Number(existingAvailableBalance);
-      // Get blocked by user name from organizer association (who blocked the amount)
-      // When amount is blocked, organizedBy stores the user who blocked it
-      const blockedByName = organizer?.displayName || 
-                           organizer?.display_name || 
-                           organizer?.name || 
-                           (organizer?.firstName && organizer?.lastName ? `${organizer.firstName} ${organizer.lastName}`.trim() : null) ||
-                           organizer?.email ||
-                           'Unknown User';
-      
-      setBlockedDetails({
-        ioNumber: existingIONumber,
-        blockedAmount: Number(existingBlockedAmount) || 0,
-        availableBalance: availableBeforeBlock, // Available amount before block
-        remainingBalance: Number(existingRemainingBalance) || Number(existingAvailableBalance),
-        blockedDate: internalOrder.organizedAt || internalOrder.organized_at || new Date().toISOString(),
-        blockedBy: blockedByName,
-        sapDocumentNumber: sapDocNumber,
-        status: (internalOrder.status === 'BLOCKED' ? 'blocked' : 
-                internalOrder.status === 'RELEASED' ? 'released' : 'blocked') as 'blocked' | 'released' | 'failed',
-      });
-      setIoNumber(existingIONumber);
-      
-      // Set fetched amount if available balance exists
-      if (availableBeforeBlock > 0) {
-        setFetchedAmount(availableBeforeBlock);
-      }
-    }
-  }, [internalOrder, existingIONumber, existingBlockedAmount, existingAvailableBalance, existingRemainingBalance, sapDocNumber, organizer]);
-
-  /**
-   * Fetch available budget from SAP
-   * Validates IO number and gets available balance (returns dummy data for now)
-   * Does not store anything in database - only validates
-   */
-  const handleFetchAmount = async () => {
-    if (!ioNumber.trim()) {
-      toast.error('Please enter an IO number');
-      return;
-    }
-
-    if (!requestId) {
-      toast.error('Request ID not found');
-      return;
-    }
-
-    setFetchingAmount(true);
-    try {
-      // Call validate IO endpoint - returns dummy data for now, will integrate with SAP later
-      const ioData = await validateIO(requestId, ioNumber.trim());
-      
-      if (ioData.isValid && ioData.availableBalance > 0) {
-        setFetchedAmount(ioData.availableBalance);
-        // Pre-fill amount to block with available balance
-        setAmountToBlock(String(ioData.availableBalance));
-        toast.success(`IO fetched from SAP. Available balance: ₹${ioData.availableBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
-      } else {
-        toast.error('Invalid IO number or no available balance found');
-        setFetchedAmount(null);
-        setAmountToBlock('');
-      }
-    } catch (error: any) {
-      console.error('Failed to fetch IO budget:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to validate IO number or fetch budget from SAP';
-      toast.error(errorMessage);
-      setFetchedAmount(null);
-    } finally {
-      setFetchingAmount(false);
-    }
-  };
-
-  /**
-   * Block budget in SAP system
-   */
-  const handleBlockBudget = async () => {
-    if (!ioNumber.trim() || fetchedAmount === null) {
-      toast.error('Please fetch IO amount first');
-      return;
-    }
-
-    if (!requestId) {
-      toast.error('Request ID not found');
-      return;
-    }
-
-    const blockAmount = parseFloat(amountToBlock);
-    
-    if (!amountToBlock || isNaN(blockAmount) || blockAmount <= 0) {
-      toast.error('Please enter a valid amount to block');
-      return;
-    }
-    
-    if (blockAmount > fetchedAmount) {
-      toast.error('Amount to block exceeds available IO budget');
-      return;
-    }
-
-    setBlockingBudget(true);
-    try {
-      // Call updateIODetails with blockedAmount to block budget in SAP and store in database
-      // This will store in internal_orders and claim_budget_tracking tables
-      await updateIODetails(requestId, {
-        ioNumber: ioNumber.trim(),
-        ioAvailableBalance: fetchedAmount,
-        ioBlockedAmount: blockAmount,
-        ioRemainingBalance: fetchedAmount - blockAmount,
-      });
-      
-      // Fetch updated claim details to get the blocked IO data
-      const claimData = await getClaimDetails(requestId);
-      const updatedInternalOrder = claimData?.internalOrder || claimData?.internal_order;
-      
-      if (updatedInternalOrder) {
-        const currentUser = user as any;
-        // When blocking, always use the current user who is performing the block action
-        // The organizer association may be from initial IO organization, but we want who blocked the amount
-        const blockedByName = currentUser?.displayName || 
-                             currentUser?.display_name || 
-                             currentUser?.name || 
-                             (currentUser?.firstName && currentUser?.lastName ? `${currentUser.firstName} ${currentUser.lastName}`.trim() : null) ||
-                             currentUser?.email || 
-                             'Current User';
-        
-        const blocked: IOBlockedDetails = {
-          ioNumber: updatedInternalOrder.ioNumber || updatedInternalOrder.io_number || ioNumber,
-          blockedAmount: Number(updatedInternalOrder.ioBlockedAmount || updatedInternalOrder.io_blocked_amount || blockAmount),
-          availableBalance: fetchedAmount, // Available amount before block
-          remainingBalance: Number(updatedInternalOrder.ioRemainingBalance || updatedInternalOrder.io_remaining_balance || (fetchedAmount - blockAmount)),
-          blockedDate: updatedInternalOrder.organizedAt || updatedInternalOrder.organized_at || new Date().toISOString(),
-          blockedBy: blockedByName,
-          sapDocumentNumber: updatedInternalOrder.sapDocumentNumber || updatedInternalOrder.sap_document_number || '',
-          status: 'blocked',
-        };
-        
-        setBlockedDetails(blocked);
-        setAmountToBlock(''); // Clear the input
-        toast.success('IO budget blocked successfully in SAP');
-        
-        // Refresh request details
-        onRefresh?.();
-      } else {
-        toast.error('IO blocked but failed to fetch updated details');
-        onRefresh?.();
-      }
-    } catch (error: any) {
-      console.error('Failed to block IO budget:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to block IO budget in SAP';
-      toast.error(errorMessage);
-    } finally {
-      setBlockingBudget(false);
-    }
-  };
-
-  /**
-   * Release blocked budget
-   * Note: This functionality may need a separate backend endpoint for releasing IO budget
-   * For now, we'll call updateIODetails with blockedAmount=0 to release
-   */
-  const handleReleaseBudget = async () => {
-    if (!blockedDetails || !requestId) {
-      toast.error('No blocked budget to release');
-      return;
-    }
-
-    if (!ioNumber.trim()) {
-      toast.error('IO number not found');
-      return;
-    }
-
-    try {
-      // Release budget by setting blockedAmount to 0
-      // Note: Backend may need a dedicated release endpoint for proper SAP integration
-      await updateIODetails(requestId, {
-        ioNumber: ioNumber.trim(),
-        ioAvailableBalance: blockedDetails.availableBalance + blockedDetails.blockedAmount,
-        ioBlockedAmount: 0,
-        ioRemainingBalance: blockedDetails.availableBalance + blockedDetails.blockedAmount,
-      });
-      
-      // Clear local state
-      setBlockedDetails(null);
-      setFetchedAmount(null);
-      setIoNumber('');
-      
-      toast.success('IO budget released successfully');
-      
-      // Refresh request details
-      onRefresh?.();
-    } catch (error: any) {
-      console.error('Failed to release IO budget:', error);
-      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to release IO budget';
-      toast.error(errorMessage);
-    }
-  };
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      {/* IO Budget Management Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <DollarSign className="w-5 h-5 text-[#2d4a3e]" />
-            IO Budget Management
-          </CardTitle>
-          <CardDescription>
-            Enter IO number to fetch available budget from SAP
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {/* IO Number Input */}
-          <div className="space-y-3">
-            <Label htmlFor="ioNumber">IO Number *</Label>
-            <div className="flex gap-2">
-              <Input
-                id="ioNumber"
-                placeholder="Enter IO number (e.g., IO-2024-12345)"
-                value={ioNumber}
-                onChange={(e) => setIoNumber(e.target.value)}
-                disabled={fetchingAmount || !!blockedDetails}
-                className="flex-1"
-              />
-              <Button
-                onClick={handleFetchAmount}
-                disabled={!ioNumber.trim() || fetchingAmount || !!blockedDetails}
-                className="bg-[#2d4a3e] hover:bg-[#1f3329]"
-              >
-                <Download className="w-4 h-4 mr-2" />
-                {fetchingAmount ? 'Fetching...' : 'Fetch Amount'}
-              </Button>
-            </div>
-          </div>
-
-          {/* Fetched Amount Display */}
-          {fetchedAmount !== null && !blockedDetails && (
-            <>
-              <div className="bg-green-50 border-2 border-green-200 rounded-lg p-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-xs text-gray-600 uppercase tracking-wide mb-1">Available Amount</p>
-                    <p className="text-2xl font-bold text-green-700">
-                      ₹{fetchedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                    </p>
-                  </div>
-                  <CircleCheckBig className="w-8 h-8 text-green-600" />
-                </div>
-                <div className="mt-3 pt-3 border-t border-green-200">
-                  <p className="text-xs text-gray-600"><strong>IO Number:</strong> {ioNumber}</p>
-                  <p className="text-xs text-gray-600 mt-1"><strong>Fetched from:</strong> SAP System</p>
-                </div>
-              </div>
-
-              {/* Amount to Block Input */}
-              <div className="space-y-3">
-                <Label htmlFor="blockAmount">Amount to Block *</Label>
-                <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
-                  <Input
-                    type="number"
-                    id="blockAmount"
-                    placeholder="Enter amount to block"
-                    min="0"
-                    step="0.01"
-                    value={amountToBlock}
-                    onChange={(e) => setAmountToBlock(e.target.value)}
-                    className="pl-8"
-                  />
-                </div>
-              </div>
-
-              {/* Block Button */}
-              <Button
-                onClick={handleBlockBudget}
-                disabled={blockingBudget || !amountToBlock || parseFloat(amountToBlock) <= 0 || parseFloat(amountToBlock) > fetchedAmount}
-                className="w-full bg-[#2d4a3e] hover:bg-[#1f3329]"
-              >
-                <Target className="w-4 h-4 mr-2" />
-                {blockingBudget ? 'Blocking in SAP...' : 'Block IO in SAP'}
-              </Button>
-            </>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* IO Blocked Details Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <CircleCheckBig className="w-5 h-5 text-green-600" />
-            IO Blocked Details
-          </CardTitle>
-          <CardDescription>
-            Details of IO blocked in SAP system
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {blockedDetails ? (
-            <div className="space-y-4">
-              {/* Success Banner */}
-              <div className="bg-green-50 border-2 border-green-500 rounded-lg p-4">
-                <div className="flex items-start gap-3">
-                  <CircleCheckBig className="w-6 h-6 text-green-600 flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="font-semibold text-green-900">IO Blocked Successfully</p>
-                    <p className="text-sm text-green-700 mt-1">Budget has been reserved in SAP system</p>
-                  </div>
-                </div>
-              </div>
-
-              {/* Blocked Details */}
-              <div className="border rounded-lg divide-y">
-                <div className="p-4">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">IO Number</p>
-                  <p className="text-sm font-semibold text-gray-900">{blockedDetails.ioNumber}</p>
-                </div>
-                <div className="p-4">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">SAP Document Number</p>
-                  <p className="text-sm font-semibold text-gray-900">{blockedDetails.sapDocumentNumber || 'N/A'}</p>
-                </div>
-                <div className="p-4 bg-green-50">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked Amount</p>
-                  <p className="text-xl font-bold text-green-700">
-                    ₹{blockedDetails.blockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                  </p>
-                </div>
-                <div className="p-4">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Available Amount (Before Block)</p>
-                  <p className="text-sm font-medium text-gray-900">
-                    ₹{blockedDetails.availableBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                  </p>
-                </div>
-                <div className="p-4 bg-blue-50">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Remaining Amount (After Block)</p>
-                  <p className="text-sm font-bold text-blue-700">
-                    ₹{blockedDetails.remainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                  </p>
-                </div>
-                <div className="p-4">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked By</p>
-                  <p className="text-sm font-medium text-gray-900">{blockedDetails.blockedBy}</p>
-                </div>
-                <div className="p-4">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Blocked At</p>
-                  <p className="text-sm font-medium text-gray-900">
-                    {new Date(blockedDetails.blockedDate).toLocaleString('en-IN', {
-                      year: 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                      hour: 'numeric',
-                      minute: 'numeric',
-                      hour12: true
-                    })}
-                  </p>
-                </div>
-                <div className="p-4 bg-gray-50">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
-                  <Badge className="bg-green-100 text-green-800 border-green-200">
-                    <CircleCheckBig className="w-3 h-3 mr-1" />
-                    Blocked
-                  </Badge>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="text-center py-12">
-              <DollarSign className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-              <p className="text-sm text-gray-500 mb-2">No IO blocked yet</p>
-              <p className="text-xs text-gray-400">
-                Enter IO number and fetch amount to block budget
-              </p>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
diff --git a/src/pages/Requests/components/RequestCard.tsx b/src/pages/Requests/components/RequestCard.tsx
index 3b08441..2e8f822 100644
--- a/src/pages/Requests/components/RequestCard.tsx
+++ b/src/pages/Requests/components/RequestCard.tsx
@@ -96,6 +96,32 @@ export function RequestCard({ request, index, onViewRequest }: RequestCardProps)
                     <PriorityIcon className="w-3 h-3 mr-1" />
                     {request.priority}
                   </Badge>
+                  {/* Template Type Badge */}
+                  {(() => {
+                    const templateType = request?.templateType || (request as any)?.template_type || '';
+                    const templateTypeUpper = templateType?.toUpperCase() || '';
+                    
+                    // Direct mapping from templateType
+                    let templateLabel = 'Custom';
+                    let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
+                    
+                    if (templateTypeUpper === 'DEALER CLAIM') {
+                      templateLabel = 'Claim Management';
+                      templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
+                    } else if (templateTypeUpper === 'TEMPLATE') {
+                      templateLabel = 'Template';
+                    }
+                    
+                    return (
+                      <Badge
+                        variant="outline"
+                        className={`${templateColor} font-medium text-xs shrink-0`}
+                        data-testid="template-type-badge"
+                      >
+                        {templateLabel}
+                      </Badge>
+                    );
+                  })()}
                   {request.department && (
                     <Badge
                       variant="secondary"
diff --git a/src/pages/Requests/types/requests.types.ts b/src/pages/Requests/types/requests.types.ts
index 0f75452..c06b404 100644
--- a/src/pages/Requests/types/requests.types.ts
+++ b/src/pages/Requests/types/requests.types.ts
@@ -62,6 +62,7 @@ export interface ConvertedRequest {
   currentApprover: string;
   approverLevel: string;
   templateType?: string;
+  workflowType?: string;
   templateName?: string;
 }
 
diff --git a/src/pages/Requests/utils/requestTransformers.ts b/src/pages/Requests/utils/requestTransformers.ts
index 808a957..9aa0233 100644
--- a/src/pages/Requests/utils/requestTransformers.ts
+++ b/src/pages/Requests/utils/requestTransformers.ts
@@ -97,8 +97,9 @@ export function transformRequest(req: any): ConvertedRequest {
     createdAt: createdAt,
     currentApprover: currentApprover,
     approverLevel: approverLevel,
-    templateType: req.templateType,
-    templateName: req.templateName
+    templateType: req.templateType || req.template_type,
+    workflowType: req.workflowType || req.workflow_type,
+    templateName: req.templateName || req.template_name
   };
 }
 
diff --git a/src/utils/requestNavigation.ts b/src/utils/requestNavigation.ts
index 6105d14..bf6bc09 100644
--- a/src/utils/requestNavigation.ts
+++ b/src/utils/requestNavigation.ts
@@ -13,7 +13,7 @@
  */
 
 import { NavigateFunction } from 'react-router-dom';
-import { getRequestDetailRoute, getRequestFlowType, RequestFlowType } from './requestTypeUtils';
+import { getRequestDetailRoute, RequestFlowType } from './requestTypeUtils';
 
 export interface RequestNavigationOptions {
   requestId: string;
@@ -33,7 +33,7 @@ export interface RequestNavigationOptions {
  * - Status-based routing
  */
 export function navigateToRequest(options: RequestNavigationOptions): void {
-  const { requestId, requestTitle, status, request, navigate } = options;
+  const { requestId, status, request, navigate } = options;
 
   // Check if request is a draft - if so, route to edit form instead of detail view
   const isDraft = status?.toLowerCase() === 'draft' || status === 'DRAFT';
diff --git a/src/utils/requestTypeUtils.ts b/src/utils/requestTypeUtils.ts
index 21a5fa7..68cb4af 100644
--- a/src/utils/requestTypeUtils.ts
+++ b/src/utils/requestTypeUtils.ts
@@ -77,9 +77,7 @@ export function getRequestFlowType(request: any): RequestFlowType {
 /**
  * Get the route path for a request detail page based on flow type
  */
-export function getRequestDetailRoute(requestId: string, request?: any): string {
-  const flowType = request ? getRequestFlowType(request) : null;
-  
+export function getRequestDetailRoute(requestId: string, _request?: any): string {
   // For now, all requests use the same route
   // In the future, you can customize routes per flow type:
   // if (flowType === 'DEALER_CLAIM') {