{/* Activity Information - Always visible */}
-
+ {/* Dealer-claim module: Business logic for preparing timestamp data */}
+
{/* Dealer Information - Always visible */}
diff --git a/src/dealer-claim/components/request-detail/WorkflowTab.tsx b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
index fe8c713..d22f6d4 100644
--- a/src/dealer-claim/components/request-detail/WorkflowTab.tsx
+++ b/src/dealer-claim/components/request-detail/WorkflowTab.tsx
@@ -9,8 +9,10 @@ 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 { Progress } from '@/components/ui/progress';
+import { TrendingUp, Clock, CheckCircle, CircleCheckBig, Upload, Mail, Download, Receipt, Activity, AlertTriangle, AlertOctagon } from 'lucide-react';
+import { formatDateTime, formatDateDDMMYYYY } from '@/utils/dateFormatter';
+import { formatHoursMinutes } from '@/utils/slaTracker';
import { DealerProposalSubmissionModal } from './modals';
import { InitiatorProposalApprovalModal } from './modals';
import { DeptLeadIOApprovalModal } from './modals';
@@ -337,6 +339,17 @@ export function DealerClaimWorkflowTab({
normalizedStatus = 'in_progress';
}
+ // Business logic: Only show elapsed time for active or completed steps
+ // Waiting steps (future steps) should have elapsedHours = 0
+ // This ensures that when in step 1, only step 1 shows elapsed time, others show 0
+ const isWaiting = normalizedStatus === 'waiting';
+ const isActive = normalizedStatus === 'pending' || normalizedStatus === 'in_progress';
+ const isCompleted = normalizedStatus === 'approved' || normalizedStatus === 'rejected';
+
+ // Only calculate/show elapsed hours for active or completed steps
+ // For waiting steps, elapsedHours should be 0 (they haven't started yet)
+ const elapsedHours = isWaiting ? 0 : (step.elapsedHours || 0);
+
return {
step: step.step || index + 1,
title: stepTitles[index] || `Step ${step.step || index + 1}`,
@@ -346,7 +359,7 @@ export function DealerClaimWorkflowTab({
status: normalizedStatus as any,
comment: step.comment || approval?.comment,
approvedAt: step.approvedAt || approval?.timestamp,
- elapsedHours: step.elapsedHours,
+ elapsedHours, // Only non-zero for active/completed steps
ioDetails,
dmsDetails,
einvoiceUrl: step.step === 7 ? (approval as any)?.einvoiceUrl : undefined,
@@ -816,6 +829,19 @@ export function DealerClaimWorkflowTab({
// 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';
+
+ // Find approval data for this step to get SLA information
+ // First find the corresponding level in approvalFlow to get levelId
+ const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
+ const approval = stepLevel?.levelId
+ ? request?.approvals?.find((a: any) => a.levelId === stepLevel.levelId || a.level_id === stepLevel.levelId)
+ : null;
+
+ // Check if step is paused
+ const isPaused = approval?.status === 'PAUSED' ||
+ (request?.pauseInfo?.isPaused &&
+ (request?.pauseInfo?.levelId === approval?.levelId ||
+ request?.pauseInfo?.level_id === approval?.levelId));
return (
{step.description}
-
TAT: {step.tatHours}h
- {step.elapsedHours && (
+
TAT: {formatHoursMinutes(step.tatHours)}
+ {/* Only show elapsed time for active or completed steps, not for waiting steps */}
+ {step.elapsedHours && (isActive || isCompleted) && (
- Elapsed: {step.elapsedHours}h
+ Elapsed: {formatHoursMinutes(step.elapsedHours)}
)}
@@ -887,6 +914,96 @@ export function DealerClaimWorkflowTab({
+
+ Due by:
+
+ {approval.sla.deadline ? formatDateDDMMYYYY(approval.sla.deadline, true) : 'Not set'}
+
+
+
+ {/* Current Approver - Time Tracking */}
+
= 100 ? 'bg-red-50 border-red-200' :
+ (approval.sla.percentageUsed || 0) >= 75 ? 'bg-orange-50 border-orange-200' :
+ (approval.sla.percentageUsed || 0) >= 50 ? 'bg-amber-50 border-amber-200' :
+ 'bg-green-50 border-green-200'
+ }`}>
+
+
+ Current Approver - Time Tracking {isPaused && '(Paused)'}
+
+
+
+
+ Time elapsed since assigned:
+ {approval.sla.elapsedText || '0 hours'}
+
+
+ Time used:
+
+ {approval.sla.elapsedText || '0 hours'} / {formatHoursMinutes(step.tatHours)} allocated
+
+
+
+
+ {/* Progress Bar */}
+
+ {(() => {
+ const percentUsed = approval.sla.percentageUsed || 0;
+ const getActiveIndicatorColor = () => {
+ if (isPaused) return 'bg-gray-500';
+ if (percentUsed >= 100) return 'bg-red-600';
+ if (percentUsed >= 75) return 'bg-orange-500';
+ if (percentUsed >= 50) return 'bg-amber-500';
+ return 'bg-green-600';
+ };
+ const getActiveTextColor = () => {
+ if (isPaused) return 'text-gray-600';
+ if (percentUsed >= 100) return 'text-red-600';
+ if (percentUsed >= 75) return 'text-orange-600';
+ if (percentUsed >= 50) return 'text-amber-600';
+ return 'text-green-600';
+ };
+ return (
+ <>
+
+
+
+ Progress: {Math.min(100, percentUsed)}% of TAT used
+
+
+ {approval.sla.remainingText || '0 hours'} remaining
+
+
+
+ );
+ })()}
+
+ {approval.sla.status === 'breached' && (
+
+
+ Deadline Breached
+
+ )}
+ {approval.sla.status === 'critical' && (
+
+
+ Approaching Deadline
+
+ )}
+
+
+
diff --git a/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx b/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
index 96bc679..79a7306 100644
--- a/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
+++ b/src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx
@@ -7,13 +7,22 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Calendar, MapPin, DollarSign, Receipt } from 'lucide-react';
import { ClaimActivityInfo } from '@/pages/RequestDetail/types/claimManagement.types';
import { format } from 'date-fns';
+import { formatDateTime } from '@/utils/dateFormatter';
interface ActivityInformationCardProps {
activityInfo: ClaimActivityInfo;
className?: string;
+ // Plug-and-play: Pass timestamps from module's business logic
+ createdAt?: string | Date;
+ updatedAt?: string | Date;
}
-export function ActivityInformationCard({ activityInfo, className }: ActivityInformationCardProps) {
+export function ActivityInformationCard({
+ activityInfo,
+ className,
+ createdAt,
+ updatedAt
+}: ActivityInformationCardProps) {
// Defensive check: Ensure activityInfo exists
if (!activityInfo) {
console.warn('[ActivityInformationCard] activityInfo is missing');
@@ -169,6 +178,24 @@ export function ActivityInformationCard({ activityInfo, className }: ActivityInf
)}
+
+ {/* Timestamps - Similar to Request Details Card */}
+ {(createdAt || updatedAt) && (
+
@@ -129,17 +140,19 @@ export function RequestDetailHeader({ request, refreshing, onBack, onRefresh, on
- {/* SLA Progress Section */}
-