in pwc implemention implemented upto the invoice genration ui altred to show total amout that may change later afer clarification
This commit is contained in:
parent
7ae9133b98
commit
80ed407cd8
@ -193,7 +193,7 @@ export function ClaimApproverSelectionStep({
|
||||
|
||||
// Only update if there are actual changes (to avoid infinite loops)
|
||||
const hasChanges = JSON.stringify(currentApprovers.map(a => ({ level: a.level, originalStepLevel: a.originalStepLevel }))) !==
|
||||
JSON.stringify(newApprovers.map(a => ({ level: a.level, originalStepLevel: a.originalStepLevel })));
|
||||
JSON.stringify(newApprovers.map(a => ({ level: a.level, originalStepLevel: a.originalStepLevel })));
|
||||
|
||||
if (hasChanges) {
|
||||
updateFormData('approvers', newApprovers);
|
||||
@ -876,237 +876,258 @@ export function ClaimApproverSelectionStep({
|
||||
<div className="w-px h-3 bg-gray-300"></div>
|
||||
</div>
|
||||
|
||||
{/* Render additional approvers before this step if any */}
|
||||
{index === 0 && additionalBeforeFirst.map((addApprover: ClaimApprover, addIndex: number) => {
|
||||
const addDisplayNumber = addIndex + 1; // Number from 1 for first additional approvers
|
||||
return (
|
||||
<div key={`additional-${addApprover.level}`} className="space-y-1">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-px h-3 bg-gray-300"></div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border-2 border-purple-200 bg-purple-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-purple-600">
|
||||
<span className="text-white font-semibold text-sm">{addDisplayNumber}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
Additional Approver
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs bg-purple-50 text-purple-700 border-purple-300">
|
||||
ADDITIONAL
|
||||
</Badge>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveAdditionalApprover(addApprover.level)}
|
||||
className="h-6 w-6 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">
|
||||
{addApprover.name || addApprover.email}
|
||||
</p>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div>Email: {addApprover.email}</div>
|
||||
<div>TAT: {addApprover.tat} {addApprover.tatType}</div>
|
||||
</div>
|
||||
{/* Render additional approvers before this step if any */}
|
||||
{index === 0 && additionalBeforeFirst.map((addApprover: ClaimApprover, addIndex: number) => {
|
||||
const addDisplayNumber = addIndex + 1; // Number from 1 for first additional approvers
|
||||
return (
|
||||
<div key={`additional-${addApprover.level}`} className="space-y-1">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-px h-3 bg-gray-300"></div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border-2 border-purple-200 bg-purple-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-purple-600">
|
||||
<span className="text-white font-semibold text-sm">{addDisplayNumber}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
Additional Approver
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs bg-purple-50 text-purple-700 border-purple-300">
|
||||
ADDITIONAL
|
||||
</Badge>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveAdditionalApprover(addApprover.level)}
|
||||
className="h-6 w-6 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">
|
||||
{addApprover.name || addApprover.email}
|
||||
</p>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div>Email: {addApprover.email}</div>
|
||||
<div>TAT: {addApprover.tat} {addApprover.tatType}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
|
||||
<div className={`p-3 rounded-lg border-2 transition-all ${
|
||||
approver.email && approver.userId
|
||||
<div className={`p-3 rounded-lg border-2 transition-all ${approver.email && approver.userId
|
||||
? 'border-green-200 bg-green-50'
|
||||
: isPreFilled
|
||||
? 'border-blue-200 bg-blue-50'
|
||||
: 'border-gray-200 bg-gray-50'
|
||||
}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
approver.email && approver.userId
|
||||
? 'border-blue-200 bg-blue-50'
|
||||
: 'border-gray-200 bg-gray-50'
|
||||
}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${approver.email && approver.userId
|
||||
? 'bg-green-600'
|
||||
: isPreFilled
|
||||
? 'bg-blue-600'
|
||||
: 'bg-gray-400'
|
||||
}`}>
|
||||
<span className="text-white font-semibold text-sm">{currentStepDisplayNumber}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
{step.name}
|
||||
</span>
|
||||
{isLast && (
|
||||
<Badge variant="destructive" className="text-xs">FINAL</Badge>
|
||||
)}
|
||||
{isPreFilled && (
|
||||
<Badge variant="outline" className="text-xs">PRE-FILLED</Badge>
|
||||
)}
|
||||
? 'bg-blue-600'
|
||||
: 'bg-gray-400'
|
||||
}`}>
|
||||
<span className="text-white font-semibold text-sm">{currentStepDisplayNumber}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">{step.description}</p>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
{step.name}
|
||||
</span>
|
||||
{isLast && (
|
||||
<Badge variant="destructive" className="text-xs">FINAL</Badge>
|
||||
)}
|
||||
{isPreFilled && (
|
||||
<Badge variant="outline" className="text-xs">PRE-FILLED</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">{step.description}</p>
|
||||
|
||||
{isEditable && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<Label htmlFor={`approver-${step.level}`} className="text-xs font-medium">
|
||||
Email Address {!isPreFilled && '*'}
|
||||
</Label>
|
||||
{approver.email && approver.userId && (
|
||||
<Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
)}
|
||||
{isEditable && (() => {
|
||||
const isVerified = !!(approver.email && approver.userId);
|
||||
const isEmpty = !approver.email && !isPreFilled;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<Label htmlFor={`approver-${step.level}`} className={`text-xs font-bold ${isEmpty ? 'text-blue-900' : isVerified ? 'text-green-900' : 'text-gray-900'
|
||||
}`}>
|
||||
Approver Email {!isPreFilled && '*'}
|
||||
{isEmpty && <span className="ml-2 text-[10px] font-semibold italic text-blue-600">(Required)</span>}
|
||||
</Label>
|
||||
{isVerified && (
|
||||
<Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id={`approver-${step.level}`}
|
||||
type="text"
|
||||
placeholder={isPreFilled ? approver.email : "@username or email..."}
|
||||
value={approver.email || ''}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
if (!isPreFilled) {
|
||||
handleApproverEmailChange(step.level, newValue);
|
||||
}
|
||||
}}
|
||||
disabled={isPreFilled || step.isAuto}
|
||||
className={`h-9 border-2 transition-all mt-1 w-full text-sm ${isPreFilled
|
||||
? 'bg-gray-100/80 border-gray-300 text-gray-700 cursor-not-allowed font-medium'
|
||||
: isVerified
|
||||
? 'bg-green-50/50 border-green-600 focus:border-green-700 ring-offset-green-50 focus:ring-1 focus:ring-green-100 font-semibold text-gray-900'
|
||||
: 'bg-white border-blue-300 shadow-sm shadow-blue-100/50 focus:border-blue-500 focus:ring-1 focus:ring-blue-100 text-gray-900'
|
||||
}`}
|
||||
/>
|
||||
{/* Search suggestions dropdown */}
|
||||
{!isPreFilled && !step.isAuto && (userSearchLoading[step.level - 1] || (userSearchResults[step.level - 1]?.length || 0) > 0) && (
|
||||
<div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
|
||||
{userSearchLoading[step.level - 1] ? (
|
||||
<div className="p-2 text-xs text-gray-500">Searching...</div>
|
||||
) : (
|
||||
<ul className="max-h-56 overflow-auto divide-y">
|
||||
{userSearchResults[step.level - 1]?.map((u) => (
|
||||
<li
|
||||
key={u.userId}
|
||||
className="p-2 text-sm cursor-pointer hover:bg-gray-50"
|
||||
onClick={() => handleUserSelect(step.level, u)}
|
||||
>
|
||||
<div className="font-medium text-gray-900">{u.displayName || u.email}</div>
|
||||
<div className="text-xs text-gray-600">{u.email}</div>
|
||||
{u.department && (
|
||||
<div className="text-xs text-gray-500">{u.department}</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{approver.name && (
|
||||
<p className="text-xs text-green-600 mt-1">
|
||||
Selected: <span className="font-semibold">{approver.name}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor={`tat-${step.level}`} className={`text-xs font-bold ${isEmpty ? 'text-blue-900' : isVerified ? 'text-green-900' : 'text-gray-900'
|
||||
}`}>
|
||||
TAT (Turn Around Time) *
|
||||
</Label>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Input
|
||||
id={`tat-${step.level}`}
|
||||
type="number"
|
||||
placeholder={approver.tatType === 'days' ? '7' : '24'}
|
||||
min="1"
|
||||
max={approver.tatType === 'days' ? '30' : '720'}
|
||||
value={approver.tat || ''}
|
||||
onChange={(e) => handleTatChange(step.level, parseInt(e.target.value) || '')}
|
||||
disabled={step.isAuto}
|
||||
className={`h-9 border-2 transition-all flex-1 text-sm ${isPreFilled
|
||||
? 'bg-gray-100/80 border-gray-300 text-gray-700 cursor-not-allowed font-medium'
|
||||
: isVerified
|
||||
? 'bg-green-50/50 border-green-600 focus:border-green-700 focus:ring-1 focus:ring-green-100 font-semibold text-gray-900'
|
||||
: 'bg-white border-blue-300 shadow-sm shadow-blue-100/50 focus:border-blue-500 focus:ring-1 focus:ring-blue-100 text-gray-900'
|
||||
}`}
|
||||
/>
|
||||
<Select
|
||||
value={approver.tatType || 'hours'}
|
||||
onValueChange={(value) => handleTatTypeChange(step.level, value as 'hours' | 'days')}
|
||||
disabled={step.isAuto}
|
||||
>
|
||||
<SelectTrigger className={`w-20 h-9 border-2 transition-all text-sm ${isPreFilled
|
||||
? 'bg-gray-100/80 border-gray-300 text-gray-700 cursor-not-allowed'
|
||||
: isVerified
|
||||
? 'bg-green-50/50 border-green-600 focus:border-green-700 focus:ring-1 focus:ring-green-100 text-gray-900 font-medium'
|
||||
: 'bg-white border-blue-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-100 text-gray-900'
|
||||
}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hours">Hours</SelectItem>
|
||||
<SelectItem value="days">Days</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id={`approver-${step.level}`}
|
||||
type="text"
|
||||
placeholder={isPreFilled ? approver.email : "@approver@royalenfield.com"}
|
||||
value={approver.email || ''}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
if (!isPreFilled) {
|
||||
handleApproverEmailChange(step.level, newValue);
|
||||
}
|
||||
}}
|
||||
disabled={isPreFilled || step.isAuto}
|
||||
className="h-9 border-2 border-gray-300 focus:border-blue-500 mt-1 w-full text-sm"
|
||||
/>
|
||||
{/* Search suggestions dropdown */}
|
||||
{!isPreFilled && !step.isAuto && (userSearchLoading[step.level - 1] || (userSearchResults[step.level - 1]?.length || 0) > 0) && (
|
||||
<div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
|
||||
{userSearchLoading[step.level - 1] ? (
|
||||
<div className="p-2 text-xs text-gray-500">Searching...</div>
|
||||
) : (
|
||||
<ul className="max-h-56 overflow-auto divide-y">
|
||||
{userSearchResults[step.level - 1]?.map((u) => (
|
||||
<li
|
||||
key={u.userId}
|
||||
className="p-2 text-sm cursor-pointer hover:bg-gray-50"
|
||||
onClick={() => handleUserSelect(step.level, u)}
|
||||
>
|
||||
<div className="font-medium text-gray-900">{u.displayName || u.email}</div>
|
||||
<div className="text-xs text-gray-600">{u.email}</div>
|
||||
{u.department && (
|
||||
<div className="text-xs text-gray-500">{u.department}</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Render additional approvers after this step */}
|
||||
{additionalApproversAfter.map((addApprover: ClaimApprover, addIndex: number) => {
|
||||
// Additional approvers come after the current step, so they should be numbered after it
|
||||
const addDisplayNumber = currentStepDisplayNumber + addIndex + 1;
|
||||
return (
|
||||
<div key={`additional-${addApprover.level}`} className="space-y-1">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-px h-3 bg-gray-300"></div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border-2 border-purple-200 bg-purple-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-purple-600">
|
||||
<span className="text-white font-semibold text-sm">{addDisplayNumber}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
{addApprover.stepName || 'Additional Approver'}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs bg-purple-50 text-purple-700 border-purple-300">
|
||||
ADDITIONAL
|
||||
</Badge>
|
||||
{addApprover.email && addApprover.userId && (
|
||||
<Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveAdditionalApprover(addApprover.level)}
|
||||
className="h-6 w-6 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">
|
||||
{addApprover.name || addApprover.email || 'No approver assigned'}
|
||||
</p>
|
||||
{addApprover.email && (
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div>Email: {addApprover.email}</div>
|
||||
{addApprover.tat && (
|
||||
<div>TAT: {addApprover.tat} {addApprover.tatType}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{approver.name && (
|
||||
<p className="text-xs text-green-600 mt-1">
|
||||
Selected: <span className="font-semibold">{approver.name}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor={`tat-${step.level}`} className="text-xs font-medium">
|
||||
TAT (Turn Around Time) *
|
||||
</Label>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Input
|
||||
id={`tat-${step.level}`}
|
||||
type="number"
|
||||
placeholder={approver.tatType === 'days' ? '7' : '24'}
|
||||
min="1"
|
||||
max={approver.tatType === 'days' ? '30' : '720'}
|
||||
value={approver.tat || ''}
|
||||
onChange={(e) => handleTatChange(step.level, parseInt(e.target.value) || '')}
|
||||
disabled={step.isAuto}
|
||||
className="h-9 border-2 border-gray-300 focus:border-blue-500 flex-1 text-sm"
|
||||
/>
|
||||
<Select
|
||||
value={approver.tatType || 'hours'}
|
||||
onValueChange={(value) => handleTatTypeChange(step.level, value as 'hours' | 'days')}
|
||||
disabled={step.isAuto}
|
||||
>
|
||||
<SelectTrigger className="w-20 h-9 border-2 border-gray-300 text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hours">Hours</SelectItem>
|
||||
<SelectItem value="days">Days</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Render additional approvers after this step */}
|
||||
{additionalApproversAfter.map((addApprover: ClaimApprover, addIndex: number) => {
|
||||
// Additional approvers come after the current step, so they should be numbered after it
|
||||
const addDisplayNumber = currentStepDisplayNumber + addIndex + 1;
|
||||
return (
|
||||
<div key={`additional-${addApprover.level}`} className="space-y-1">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-px h-3 bg-gray-300"></div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border-2 border-purple-200 bg-purple-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-purple-600">
|
||||
<span className="text-white font-semibold text-sm">{addDisplayNumber}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-semibold text-gray-900 text-sm">
|
||||
{addApprover.stepName || 'Additional Approver'}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs bg-purple-50 text-purple-700 border-purple-300">
|
||||
ADDITIONAL
|
||||
</Badge>
|
||||
{addApprover.email && addApprover.userId && (
|
||||
<Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveAdditionalApprover(addApprover.level)}
|
||||
className="h-6 w-6 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mb-2">
|
||||
{addApprover.name || addApprover.email || 'No approver assigned'}
|
||||
</p>
|
||||
{addApprover.email && (
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div>Email: {addApprover.email}</div>
|
||||
{addApprover.tat && (
|
||||
<div>TAT: {addApprover.tat} {addApprover.tatType}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</CardContent>
|
||||
|
||||
@ -29,6 +29,7 @@ import { toast } from 'sonner';
|
||||
import { submitProposal, updateIODetails, submitCompletion, updateEInvoice, sendCreditNoteToDealer } from '@/services/dealerClaimApi';
|
||||
import { getWorkflowDetails, approveLevel, rejectLevel, handleInitiatorAction, getWorkflowHistory } from '@/services/workflowApi';
|
||||
import { uploadDocument } from '@/services/documentApi';
|
||||
import { TokenManager } from '@/utils/tokenManager';
|
||||
|
||||
interface DealerClaimWorkflowTabProps {
|
||||
request: any;
|
||||
@ -69,6 +70,7 @@ interface WorkflowStep {
|
||||
};
|
||||
einvoiceUrl?: string;
|
||||
emailTemplateUrl?: string;
|
||||
levelName?: string;
|
||||
versionHistory?: {
|
||||
current: any;
|
||||
previous: any;
|
||||
@ -329,28 +331,50 @@ export function DealerClaimWorkflowTab({
|
||||
// Step title and description mapping based on actual step number (not array index)
|
||||
// This handles cases where approvers are added between steps
|
||||
const getStepTitle = (stepNumber: number, levelName?: string, approverName?: string): string => {
|
||||
// Check if this is a legacy workflow (8 steps) or new workflow (5 steps)
|
||||
// Legacy flows have system steps (Activity, E-Invoice, Credit Note) as approval levels
|
||||
const isLegacyFlow = (request?.totalLevels || 0) > 5 || (request?.approvalLevels?.length || 0) > 5;
|
||||
|
||||
// Use levelName from backend if available (most accurate)
|
||||
// Check if it's an "Additional Approver" - this indicates a dynamically added approver
|
||||
if (levelName && levelName.trim()) {
|
||||
const levelNameLower = levelName.toLowerCase();
|
||||
|
||||
// If it starts with "Additional Approver", use it as-is (it's already formatted)
|
||||
if (levelName.toLowerCase().includes('additional approver')) {
|
||||
if (levelNameLower.includes('additional approver')) {
|
||||
return levelName;
|
||||
}
|
||||
|
||||
// If levelName is NOT generic "Step X", return it
|
||||
// This fixes the issue where backend sends "Step 1" instead of "Dealer Proposal Submission"
|
||||
if (!/^step\s+\d+$/i.test(levelName)) {
|
||||
return levelName;
|
||||
}
|
||||
// Otherwise use the levelName from backend (preserved from original step)
|
||||
return levelName;
|
||||
}
|
||||
|
||||
// Fallback to mapping based on step number
|
||||
const stepTitleMap: Record<number, string> = {
|
||||
1: 'Dealer - Proposal Submission',
|
||||
2: 'Requestor Evaluation & Confirmation',
|
||||
3: 'Department Lead Approval',
|
||||
4: 'Activity Creation',
|
||||
5: 'Dealer - Completion Documents',
|
||||
6: 'Requestor - Claim Approval',
|
||||
7: 'E-Invoice Generation',
|
||||
8: 'Credit Note from SAP',
|
||||
};
|
||||
// Fallback to mapping based on step number and flow version
|
||||
const stepTitleMap: Record<number, string> = isLegacyFlow
|
||||
? {
|
||||
// Legacy 8-step flow
|
||||
1: 'Dealer - Proposal Submission',
|
||||
2: 'Requestor Evaluation & Confirmation',
|
||||
3: 'Department Lead Approval',
|
||||
4: 'Activity Creation',
|
||||
5: 'Dealer - Completion Documents',
|
||||
6: 'Requestor - Claim Approval',
|
||||
7: 'E-Invoice Generation',
|
||||
8: 'Credit Note from SAP',
|
||||
}
|
||||
: {
|
||||
// New 5-step flow
|
||||
1: 'Dealer - Proposal Submission',
|
||||
2: 'Requestor Evaluation & Confirmation',
|
||||
3: 'Department Lead Approval',
|
||||
4: 'Dealer - Completion Documents',
|
||||
5: 'Requestor - Claim Approval',
|
||||
6: 'E-Invoice Generation',
|
||||
7: 'Credit Note from SAP',
|
||||
};
|
||||
|
||||
// If step number exists in map, use it
|
||||
if (stepTitleMap[stepNumber]) {
|
||||
@ -377,6 +401,9 @@ export function DealerClaimWorkflowTab({
|
||||
return `Additional approver will review and approve this request.`;
|
||||
}
|
||||
|
||||
// Check if this is a legacy workflow (8 steps) or new workflow (5 steps)
|
||||
const isLegacyFlow = (request?.totalLevels || 0) > 5 || (request?.approvalLevels?.length || 0) > 5;
|
||||
|
||||
// Use levelName to determine description (handles shifted steps correctly)
|
||||
// This ensures descriptions shift with their steps when approvers are added
|
||||
if (levelName && levelName.trim()) {
|
||||
@ -392,6 +419,7 @@ export function DealerClaimWorkflowTab({
|
||||
if (levelNameLower.includes('department lead')) {
|
||||
return 'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)';
|
||||
}
|
||||
// Re-added for legacy support
|
||||
if (levelNameLower.includes('activity creation')) {
|
||||
return 'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.';
|
||||
}
|
||||
@ -401,25 +429,37 @@ export function DealerClaimWorkflowTab({
|
||||
if (levelNameLower.includes('requestor') && (levelNameLower.includes('claim') || levelNameLower.includes('approval'))) {
|
||||
return 'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.';
|
||||
}
|
||||
if (levelNameLower.includes('e-invoice') || levelNameLower.includes('invoice generation')) {
|
||||
return 'E-invoice will be generated through DMS.';
|
||||
if (levelNameLower.includes('e-invoice') || levelNameLower.includes('invoice generation') || levelNameLower.includes('dms')) {
|
||||
return 'E-Invoice will be generated upon settlement initiation.';
|
||||
}
|
||||
if (levelNameLower.includes('credit note') || levelNameLower.includes('sap')) {
|
||||
return 'Got credit note from SAP. Review and send to dealer to complete the claim management process.';
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to step number mapping (for backwards compatibility)
|
||||
const stepDescriptionMap: Record<number, string> = {
|
||||
1: 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
|
||||
2: 'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)',
|
||||
3: 'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)',
|
||||
4: 'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.',
|
||||
5: 'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description',
|
||||
6: 'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.',
|
||||
7: 'E-invoice will be generated through DMS.',
|
||||
8: 'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
|
||||
};
|
||||
// Fallback to step number mapping depending on flow version
|
||||
const stepDescriptionMap: Record<number, string> = isLegacyFlow
|
||||
? {
|
||||
// Legacy 8-step flow
|
||||
1: 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
|
||||
2: 'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)',
|
||||
3: 'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)',
|
||||
4: 'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.',
|
||||
5: 'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description',
|
||||
6: 'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.',
|
||||
7: 'E-Invoice will be generated upon settlement initiation.',
|
||||
8: 'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
|
||||
}
|
||||
: {
|
||||
// New 5-step flow
|
||||
1: 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests',
|
||||
2: 'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)',
|
||||
3: 'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)',
|
||||
4: 'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description',
|
||||
5: 'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.',
|
||||
6: 'E-Invoice will be generated upon settlement initiation.',
|
||||
7: 'Got credit note from SAP. Review and send to dealer to complete the claim management process.',
|
||||
};
|
||||
|
||||
if (stepDescriptionMap[stepNumber]) {
|
||||
return stepDescriptionMap[stepNumber];
|
||||
@ -845,13 +885,26 @@ export function DealerClaimWorkflowTab({
|
||||
await uploadDocument(file, requestId, 'SUPPORTING');
|
||||
}
|
||||
|
||||
// Submit proposal using dealer claim API
|
||||
const totalBudget = data.costBreakup.reduce((sum, item) => sum + item.amount, 0);
|
||||
// Submit proposal using dealer claim API (calculate total from inclusive item totals)
|
||||
const totalBudget = data.costBreakup.reduce((sum, item: any) => sum + (item.totalAmt || item.amount || 0), 0);
|
||||
await submitProposal(requestId, {
|
||||
proposalDocument: data.proposalDocument || undefined,
|
||||
costBreakup: data.costBreakup.map(item => ({
|
||||
costBreakup: data.costBreakup.map((item: any) => ({
|
||||
description: item.description,
|
||||
amount: item.amount,
|
||||
gstRate: item.gstRate,
|
||||
gstAmt: item.gstAmt,
|
||||
cgstRate: item.cgstRate,
|
||||
cgstAmt: item.cgstAmt,
|
||||
sgstRate: item.sgstRate,
|
||||
sgstAmt: item.sgstAmt,
|
||||
igstRate: item.igstRate,
|
||||
igstAmt: item.igstAmt,
|
||||
utgstRate: item.utgstRate,
|
||||
utgstAmt: item.utgstAmt,
|
||||
cessRate: item.cessRate,
|
||||
cessAmt: item.cessAmt,
|
||||
totalAmt: item.totalAmt
|
||||
})),
|
||||
totalEstimatedBudget: totalBudget,
|
||||
expectedCompletionDate: data.expectedCompletionDate,
|
||||
@ -1106,10 +1159,23 @@ export function DealerClaimWorkflowTab({
|
||||
|
||||
const requestId = request.id || request.requestId;
|
||||
|
||||
// Transform expense items to match API format
|
||||
const closedExpenses = data.closedExpenses.map(item => ({
|
||||
// Transform expense items to match API format (include GST fields)
|
||||
const closedExpenses = data.closedExpenses.map((item: any) => ({
|
||||
description: item.description,
|
||||
amount: item.amount,
|
||||
gstRate: item.gstRate,
|
||||
gstAmt: item.gstAmt,
|
||||
cgstRate: item.cgstRate,
|
||||
cgstAmt: item.cgstAmt,
|
||||
sgstRate: item.sgstRate,
|
||||
sgstAmt: item.sgstAmt,
|
||||
igstRate: item.igstRate,
|
||||
igstAmt: item.igstAmt,
|
||||
utgstRate: item.utgstRate,
|
||||
utgstAmt: item.utgstAmt,
|
||||
cessRate: item.cessRate,
|
||||
cessAmt: item.cessAmt,
|
||||
totalAmt: item.totalAmt
|
||||
}));
|
||||
|
||||
// Submit completion documents using dealer claim API
|
||||
@ -1145,7 +1211,7 @@ export function DealerClaimWorkflowTab({
|
||||
}
|
||||
};
|
||||
|
||||
// Handle DMS push (Step 6)
|
||||
// Handle E-Invoice generation (Step 6)
|
||||
const handleDMSPush = async (_comments: string) => {
|
||||
try {
|
||||
if (!request?.id && !request?.requestId) {
|
||||
@ -1162,11 +1228,11 @@ export function DealerClaimWorkflowTab({
|
||||
});
|
||||
|
||||
// Activity is logged by backend service - no need to create work note
|
||||
toast.success('Pushed to DMS successfully. E-invoice will be generated automatically.');
|
||||
toast.success('E-Invoice generation initiated successfully.');
|
||||
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.';
|
||||
console.error('[DealerClaimWorkflowTab] Error generating e-invoice:', error);
|
||||
const errorMessage = error?.response?.data?.message || error?.message || 'Failed to generate e-invoice. Please try again.';
|
||||
toast.error(errorMessage);
|
||||
throw error;
|
||||
}
|
||||
@ -1381,6 +1447,31 @@ export function DealerClaimWorkflowTab({
|
||||
loadCompletionDocuments();
|
||||
}, [request]);
|
||||
|
||||
const handlePreviewInvoice = async () => {
|
||||
try {
|
||||
const requestId = request.id || request.requestId;
|
||||
if (!requestId) {
|
||||
toast.error('Request ID not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if invoice exists
|
||||
if (!request.invoice && !request.irn) {
|
||||
toast.error('Invoice not generated yet');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = TokenManager.getAccessToken();
|
||||
// Construct API URL for PDF preview
|
||||
const previewUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api/v1'}/dealer-claims/${requestId}/e-invoice/pdf?token=${token}`;
|
||||
|
||||
window.open(previewUrl, '_blank');
|
||||
} catch (error) {
|
||||
console.error('Failed to preview invoice:', error);
|
||||
toast.error('Failed to open invoice preview');
|
||||
}
|
||||
};
|
||||
|
||||
// Get dealer and activity info
|
||||
const dealerName = request?.claimDetails?.dealerName ||
|
||||
request?.dealerInfo?.name ||
|
||||
@ -1513,6 +1604,23 @@ export function DealerClaimWorkflowTab({
|
||||
<Download className="w-3.5 h-3.5 text-green-600" />
|
||||
</Button>
|
||||
)}
|
||||
{/* Invoice Preview Button (Requestor Claim Approval) */}
|
||||
{(() => {
|
||||
const isRequestorClaimStep = (step.levelName || step.title || '').toLowerCase().includes('requestor claim') ||
|
||||
(step.levelName || step.title || '').toLowerCase().includes('requestor - claim');
|
||||
const hasInvoice = request?.invoice || (request?.irn && step.status === 'approved');
|
||||
return isRequestorClaimStep && hasInvoice && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 hover:bg-amber-100"
|
||||
title="Preview Invoice"
|
||||
onClick={handlePreviewInvoice}
|
||||
>
|
||||
<Receipt className="w-3.5 h-3.5 text-amber-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>
|
||||
@ -1721,10 +1829,10 @@ export function DealerClaimWorkflowTab({
|
||||
|
||||
{/* Current Approver - Time Tracking */}
|
||||
<div className={`border rounded-lg p-3 ${isPaused ? 'bg-gray-100 border-gray-300' :
|
||||
(approval.sla.percentageUsed || 0) >= 100 ? 'bg-red-50 border-red-200' :
|
||||
(approval.sla.percentageUsed || 0) >= 75 ? 'bg-orange-50 border-orange-200' :
|
||||
(approval.sla.percentageUsed || 0) >= 50 ? 'bg-amber-50 border-amber-200' :
|
||||
'bg-green-50 border-green-200'
|
||||
(approval.sla.percentageUsed || 0) >= 100 ? 'bg-red-50 border-red-200' :
|
||||
(approval.sla.percentageUsed || 0) >= 75 ? 'bg-orange-50 border-orange-200' :
|
||||
(approval.sla.percentageUsed || 0) >= 50 ? 'bg-amber-50 border-amber-200' :
|
||||
'bg-green-50 border-green-200'
|
||||
}`}>
|
||||
<p className="text-xs font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
@ -1856,25 +1964,25 @@ export function DealerClaimWorkflowTab({
|
||||
<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
|
||||
E-Invoice & Settlement 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-xs text-gray-600">Settlement ID:</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-xs text-gray-600 mb-1">Settlement 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{' '}
|
||||
Initiated by {step.dmsDetails.pushedBy} on{' '}
|
||||
{formatDateSafe(step.dmsDetails.pushedAt)}
|
||||
</div>
|
||||
)}
|
||||
@ -1902,33 +2010,51 @@ export function DealerClaimWorkflowTab({
|
||||
})() && (
|
||||
<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>
|
||||
)}
|
||||
{(() => {
|
||||
// Check if this is Step 1 (Dealer Proposal Submission)
|
||||
// Use levelName match or fallback to step 1
|
||||
const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
|
||||
const isProposalStep = step.step === 1 ||
|
||||
levelName.includes('proposal') ||
|
||||
levelName.includes('submission');
|
||||
|
||||
return isProposalStep && (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 (or shifted step): Review Request - Only for initiator or step approver */}
|
||||
{/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
|
||||
{/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
|
||||
{/* Use initiatorStepNumber to handle cases where approvers are added between steps */}
|
||||
{step.step === initiatorStepNumber && (isInitiator || isStep2Approver) && (
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
setShowApprovalModal(true);
|
||||
}}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Review Request
|
||||
</Button>
|
||||
)}
|
||||
{/* Step 2 (or shifted step): Review Request - Only for initiator or step approver */}
|
||||
{(() => {
|
||||
// Check if this is the Requestor Evaluation step
|
||||
const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
|
||||
const isEvaluationStep = levelName.includes('requestor evaluation') ||
|
||||
levelName.includes('confirmation') ||
|
||||
step.step === initiatorStepNumber; // Fallback
|
||||
|
||||
return isEvaluationStep && (isInitiator || isStep2Approver);
|
||||
})() && (
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
setShowApprovalModal(true);
|
||||
}}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Review Request
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Initiator Action Step: Show action buttons (REVISE, REOPEN) - Direct actions, no modal */}
|
||||
{(() => {
|
||||
@ -2080,20 +2206,26 @@ export function DealerClaimWorkflowTab({
|
||||
}}
|
||||
>
|
||||
<Activity className="w-4 h-4 mr-2" />
|
||||
Push to DMS
|
||||
Generate E-Invoice & Sync
|
||||
</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;
|
||||
{(() => {
|
||||
const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
|
||||
// Check for "Credit Note" or "SAP" in level name, or fallback to step 8 if it's the last step
|
||||
const isCreditNoteStep = levelName.includes('credit note') ||
|
||||
levelName.includes('sap') ||
|
||||
(step.step === 8 && !levelName.includes('additional'));
|
||||
|
||||
const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
|
||||
const isStepApprover = stepApproverEmail && userEmail === stepApproverEmail;
|
||||
// Also check if user has finance role
|
||||
const userRole = (user as any)?.role?.toUpperCase() || '';
|
||||
const isFinanceUser = userRole === 'FINANCE' || userRole === 'ADMIN';
|
||||
return isStep8Approver || isFinanceUser;
|
||||
|
||||
return isCreditNoteStep && (isStepApprover || isFinanceUser);
|
||||
})() && (
|
||||
<Button
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
@ -2113,35 +2245,21 @@ export function DealerClaimWorkflowTab({
|
||||
const levelName = (stepLevel?.levelName || step.title || '').toLowerCase();
|
||||
const isAdditionalApprover = levelName.includes('additional approver');
|
||||
|
||||
// Check if this step doesn't have any of the specific workflow action buttons above
|
||||
// Check if this step doesn't have any of the specific workflow action buttons above
|
||||
const hasSpecificWorkflowAction =
|
||||
step.step === 1 ||
|
||||
step.step === initiatorStepNumber ||
|
||||
(() => {
|
||||
const deptLeadStepLevel = approvalFlow.find((l: any) => {
|
||||
const ln = (l.levelName || '').toLowerCase();
|
||||
return ln.includes('department lead');
|
||||
});
|
||||
return deptLeadStepLevel &&
|
||||
(step.step === (deptLeadStepLevel.step || deptLeadStepLevel.levelNumber || deptLeadStepLevel.level_number));
|
||||
})() ||
|
||||
(() => {
|
||||
const stepLevel = approvalFlow.find((l: any) => (l.step || l.levelNumber || l.level_number) === step.step);
|
||||
const stepApproverEmail = (stepLevel?.approverEmail || '').toLowerCase();
|
||||
const isDealerForThisStep = isDealer && stepApproverEmail === dealerEmail;
|
||||
const ln = (stepLevel?.levelName || step.title || '').toLowerCase();
|
||||
const isDealerCompletionStep = ln.includes('dealer completion') || ln.includes('completion documents');
|
||||
return isDealerForThisStep && isDealerCompletionStep;
|
||||
})() ||
|
||||
(() => {
|
||||
const requestorClaimStepLevel = approvalFlow.find((l: any) => {
|
||||
const ln = (l.levelName || '').toLowerCase();
|
||||
return ln.includes('requestor claim') || ln.includes('requestor - claim');
|
||||
});
|
||||
return requestorClaimStepLevel &&
|
||||
(step.step === (requestorClaimStepLevel.step || requestorClaimStepLevel.levelNumber || requestorClaimStepLevel.level_number));
|
||||
})() ||
|
||||
step.step === 8;
|
||||
// Proposal
|
||||
(step.step === 1 || levelName.includes('proposal') || levelName.includes('submission')) ||
|
||||
// Evaluation
|
||||
(levelName.includes('requestor evaluation') || levelName.includes('confirmation')) ||
|
||||
// Dept Lead
|
||||
levelName.includes('department lead') ||
|
||||
// Dealer Completion
|
||||
(levelName.includes('dealer completion') || levelName.includes('completion documents')) ||
|
||||
// Requestor Claim
|
||||
(levelName.includes('requestor claim') || levelName.includes('requestor - claim')) ||
|
||||
// Credit Note
|
||||
(levelName.includes('credit note') || levelName.includes('sap'));
|
||||
|
||||
// Show "Review Request" button for additional approvers or steps without specific workflow actions
|
||||
// Similar to the requestor approval step
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* ProcessDetailsCard Component
|
||||
* Displays process-related details: IO Number, DMS Number, Claim Amount, and Budget Breakdowns
|
||||
* Displays process-related details: IO Number, E-Invoice, Claim Amount, and Budget Breakdowns
|
||||
* Visibility controlled by user role
|
||||
*/
|
||||
|
||||
@ -172,21 +172,18 @@ export function ProcessDetailsCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* DMS Details */}
|
||||
{/* E-Invoice Details */}
|
||||
{visibility.showDMSDetails && dmsDetails && (
|
||||
<div className="bg-white rounded-lg p-3 border border-purple-200">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Activity className="w-4 h-4 text-purple-600" />
|
||||
<Label className="text-xs font-semibold text-purple-900 uppercase tracking-wide">
|
||||
DMS & E-Invoice Details
|
||||
E-Invoice Details
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-2">
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 uppercase">DMS Number</p>
|
||||
<p className="font-bold text-sm text-gray-900">{dmsDetails.dmsNumber || 'N/A'}</p>
|
||||
</div>
|
||||
|
||||
{dmsDetails.ackNo && (
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 uppercase">Ack No</p>
|
||||
|
||||
@ -22,6 +22,7 @@ interface ProposalCostItem {
|
||||
interface ProposalDetails {
|
||||
costBreakup: ProposalCostItem[];
|
||||
estimatedBudgetTotal?: number | null;
|
||||
totalEstimatedBudget?: number | null;
|
||||
timelineForClosure?: string | null;
|
||||
dealerComments?: string | null;
|
||||
submittedOn?: string | null;
|
||||
@ -35,8 +36,9 @@ interface ProposalDetailsCardProps {
|
||||
export function ProposalDetailsCard({ proposalDetails, className }: ProposalDetailsCardProps) {
|
||||
// Calculate estimated total from costBreakup if not provided
|
||||
const calculateEstimatedTotal = () => {
|
||||
if (proposalDetails.estimatedBudgetTotal !== undefined && proposalDetails.estimatedBudgetTotal !== null) {
|
||||
return proposalDetails.estimatedBudgetTotal;
|
||||
const total = proposalDetails.totalEstimatedBudget ?? proposalDetails.estimatedBudgetTotal;
|
||||
if (total !== undefined && total !== null) {
|
||||
return total;
|
||||
}
|
||||
|
||||
// Calculate sum from costBreakup items
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
.dms-push-modal {
|
||||
.settlement-push-modal {
|
||||
width: 90vw !important;
|
||||
max-width: 90vw !important;
|
||||
max-width: 1000px !important;
|
||||
min-width: 320px !important;
|
||||
max-height: 95vh !important;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 640px) {
|
||||
.dms-push-modal {
|
||||
.settlement-push-modal {
|
||||
width: 95vw !important;
|
||||
max-width: 95vw !important;
|
||||
max-height: 95vh !important;
|
||||
@ -15,25 +19,48 @@
|
||||
|
||||
/* Tablet and small desktop */
|
||||
@media (min-width: 641px) and (max-width: 1023px) {
|
||||
.dms-push-modal {
|
||||
.settlement-push-modal {
|
||||
width: 90vw !important;
|
||||
max-width: 90vw !important;
|
||||
max-width: 900px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens - fixed max-width for better readability */
|
||||
@media (min-width: 1024px) {
|
||||
.dms-push-modal {
|
||||
width: 90vw !important;
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
/* Scrollable content area */
|
||||
.settlement-push-modal .flex-1 {
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
/* Extra large screens */
|
||||
@media (min-width: 1536px) {
|
||||
.dms-push-modal {
|
||||
width: 90vw !important;
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
/* Custom scrollbar for the modal content */
|
||||
.settlement-push-modal .flex-1::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.settlement-push-modal .flex-1::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settlement-push-modal .flex-1::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.settlement-push-modal .flex-1::-webkit-scrollbar-thumb:hover {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.file-preview-dialog {
|
||||
width: 95vw !important;
|
||||
max-width: 1200px !important;
|
||||
max-height: 95vh !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-preview-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -41,7 +41,7 @@ import { downloadDocument } from '@/services/workflowApi';
|
||||
import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
|
||||
import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
|
||||
import { getSocket, joinUserRoom } from '@/utils/socket';
|
||||
import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
|
||||
|
||||
|
||||
// Dealer Claim Components (import from index to get properly aliased exports)
|
||||
import { DealerClaimOverviewTab, DealerClaimWorkflowTab, IOTab } from '../index';
|
||||
@ -377,8 +377,8 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
|
||||
const notifRequestId = notif.requestId || notif.request_id;
|
||||
const notifRequestNumber = notif.metadata?.requestNumber || notif.metadata?.request_number;
|
||||
if (notifRequestId !== apiRequest.requestId &&
|
||||
notifRequestNumber !== requestIdentifier &&
|
||||
notifRequestNumber !== apiRequest.requestNumber) return;
|
||||
notifRequestNumber !== requestIdentifier &&
|
||||
notifRequestNumber !== apiRequest.requestNumber) return;
|
||||
|
||||
// Check for credit note metadata
|
||||
if (notif.metadata?.creditNoteNumber || notif.metadata?.credit_note_number) {
|
||||
@ -673,7 +673,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
|
||||
request={request}
|
||||
isInitiator={isInitiator}
|
||||
isSpectator={isSpectator}
|
||||
currentApprovalLevel={isClaimManagementRequest(apiRequest) ? null : currentApprovalLevel}
|
||||
currentApprovalLevel={currentApprovalLevel}
|
||||
onAddApprover={() => setShowAddApproverModal(true)}
|
||||
onAddSpectator={() => setShowAddSpectatorModal(true)}
|
||||
onApprove={() => setShowApproveModal(true)}
|
||||
|
||||
@ -175,14 +175,14 @@ export function mapToClaimManagementRequest(
|
||||
// Get closed expenses breakdown from new completionExpenses table
|
||||
const closedExpensesBreakdown = Array.isArray(completionExpenses) && completionExpenses.length > 0
|
||||
? completionExpenses.map((exp: any) => ({
|
||||
description: exp.description || exp.itemDescription || '',
|
||||
description: exp.description || exp.itemDescription || exp.item_description || '',
|
||||
amount: Number(exp.amount) || 0,
|
||||
gstRate: exp.gstRate,
|
||||
gstAmt: exp.gstAmt,
|
||||
cgstAmt: exp.cgstAmt,
|
||||
sgstAmt: exp.sgstAmt,
|
||||
igstAmt: exp.igstAmt,
|
||||
totalAmt: exp.totalAmt
|
||||
gstRate: exp.gstRate ?? exp.gst_rate,
|
||||
gstAmt: exp.gstAmt ?? exp.gst_amt,
|
||||
cgstAmt: exp.cgstAmt ?? exp.cgst_amt,
|
||||
sgstAmt: exp.sgstAmt ?? exp.sgst_amt,
|
||||
igstAmt: exp.igstAmt ?? exp.igst_amt,
|
||||
totalAmt: exp.totalAmt ?? exp.total_amt
|
||||
}))
|
||||
: (completionDetails?.closedExpenses ||
|
||||
completionDetails?.closed_expenses ||
|
||||
@ -232,14 +232,14 @@ export function mapToClaimManagementRequest(
|
||||
proposalDocumentUrl: proposalDetails.proposalDocumentUrl || proposalDetails.proposal_document_url,
|
||||
costBreakup: Array.isArray(proposalDetails.costBreakup || proposalDetails.cost_breakup)
|
||||
? (proposalDetails.costBreakup || proposalDetails.cost_breakup).map((item: any) => ({
|
||||
description: item.description || '',
|
||||
description: item.description || item.itemDescription || item.item_description || '',
|
||||
amount: Number(item.amount) || 0,
|
||||
gstRate: item.gstRate,
|
||||
gstAmt: item.gstAmt,
|
||||
cgstAmt: item.cgstAmt,
|
||||
sgstAmt: item.sgstAmt,
|
||||
igstAmt: item.igstAmt,
|
||||
totalAmt: item.totalAmt
|
||||
gstRate: item.gstRate ?? item.gst_rate,
|
||||
gstAmt: item.gstAmt ?? item.gst_amt,
|
||||
cgstAmt: item.cgstAmt ?? item.cgst_amt,
|
||||
sgstAmt: item.sgstAmt ?? item.sgst_amt,
|
||||
igstAmt: item.igstAmt ?? item.igst_amt,
|
||||
totalAmt: item.totalAmt ?? item.total_amt
|
||||
}))
|
||||
: [],
|
||||
totalEstimatedBudget: proposalDetails.totalEstimatedBudget || proposalDetails.total_estimated_budget || 0,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user