laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

in pwc implemention implemented upto the invoice genration ui altred to show total amout that may change later afer clarification

Browse Source
This commit is contained in:
laxmanhalaki 2026-02-10 20:12:26 +05:30
parent 7ae9133b98
commit 80ed407cd8
8 changed files with 1101 additions and 933 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

591
src/dealer-claim/components/request-creation/ClaimApproverSelectionStep.tsx
View File

@ -70,7 +70,7 @@ export function ClaimApproverSelectionStep({
onPolicyViolation,
}: ClaimApproverSelectionStepProps) {
const { userSearchResults, userSearchLoading, searchUsersForIndex, clearSearchForIndex } = useMultiUserSearch();
// State for add approver modal
const [showAddApproverModal, setShowAddApproverModal] = useState(false);
const [addApproverEmail, setAddApproverEmail] = useState('');
@ -96,7 +96,7 @@ export function ClaimApproverSelectionStep({
// For manual steps (3 and 8), check if approver is assigned, verified, and has TAT
const approver = approvers.find((a: ClaimApprover) => a.level === step.level);
if (!approver || !approver.email || !approver.userId || !approver.tat) {
missingSteps.push(`${step.name}`);
}
@ -120,20 +120,20 @@ export function ClaimApproverSelectionStep({
// Initialize approvers array for all 8 steps
useEffect(() => {
const currentApprovers = formData.approvers || [];
// If we already have approvers (including additional ones), don't reinitialize
// This prevents creating duplicates when approvers have been shifted
if (currentApprovers.length > 0) {
// Just ensure all fixed steps have their approvers, but don't recreate shifted ones
const newApprovers: ClaimApprover[] = [];
const additionalApprovers = currentApprovers.filter((a: ClaimApprover) => a.isAdditional);
CLAIM_STEPS.forEach((step) => {
// Find existing approver by originalStepLevel (handles shifted levels)
const existing = currentApprovers.find((a: ClaimApprover) =>
const existing = currentApprovers.find((a: ClaimApprover) =>
a.originalStepLevel === step.level || (!a.originalStepLevel && !a.isAdditional && a.level === step.level)
);
if (existing) {
// Use existing approver (preserves shifted level)
newApprovers.push(existing);
@ -182,19 +182,19 @@ export function ClaimApproverSelectionStep({
}
}
});
// Add back all additional approvers
additionalApprovers.forEach((addApprover: ClaimApprover) => {
newApprovers.push(addApprover);
});
// Sort by level
newApprovers.sort((a, b) => a.level - b.level);
// 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 })));
const hasChanges = JSON.stringify(currentApprovers.map(a => ({ level: a.level, originalStepLevel: a.originalStepLevel }))) !==
JSON.stringify(newApprovers.map(a => ({ level: a.level, originalStepLevel: a.originalStepLevel })));
if (hasChanges) {
updateFormData('approvers', newApprovers);
}
@ -246,10 +246,10 @@ export function ClaimApproverSelectionStep({
const handleApproverEmailChange = (level: number, value: string) => {
const approvers = [...(formData.approvers || [])];
// Find by originalStepLevel first, then fallback to level for backwards compatibility
const index = approvers.findIndex((a: ClaimApprover) =>
const index = approvers.findIndex((a: ClaimApprover) =>
a.originalStepLevel === level || (!a.originalStepLevel && a.level === level && !a.isAdditional)
);
if (index === -1) {
// Create new approver entry
const step = CLAIM_STEPS.find(s => s.level === level);
@ -304,8 +304,8 @@ export function ClaimApproverSelectionStep({
// Check for duplicates across other steps
const approvers = formData.approvers || [];
const isDuplicate = approvers.some(
(a: ClaimApprover) =>
a.level !== level &&
(a: ClaimApprover) =>
a.level !== level &&
(a.userId === selectedUser.userId || a.email?.toLowerCase() === selectedUser.email?.toLowerCase())
);
@ -343,10 +343,10 @@ export function ClaimApproverSelectionStep({
// Update approver in array
const updatedApprovers = [...(formData.approvers || [])];
// Find by originalStepLevel first, then fallback to level for backwards compatibility
const approverIndex = updatedApprovers.findIndex((a: ClaimApprover) =>
const approverIndex = updatedApprovers.findIndex((a: ClaimApprover) =>
a.originalStepLevel === level || (!a.originalStepLevel && a.level === level && !a.isAdditional)
);
if (approverIndex === -1) {
const step = CLAIM_STEPS.find(s => s.level === level);
updatedApprovers.push({
@ -391,10 +391,10 @@ export function ClaimApproverSelectionStep({
const handleTatChange = (level: number, tat: number | string) => {
const approvers = [...(formData.approvers || [])];
// Find by originalStepLevel first, then fallback to level for backwards compatibility
const index = approvers.findIndex((a: ClaimApprover) =>
const index = approvers.findIndex((a: ClaimApprover) =>
a.originalStepLevel === level || (!a.originalStepLevel && a.level === level && !a.isAdditional)
);
if (index !== -1) {
const existingApprover = approvers[index];
if (existingApprover) {
@ -410,10 +410,10 @@ export function ClaimApproverSelectionStep({
const handleTatTypeChange = (level: number, tatType: 'hours' | 'days') => {
const approvers = [...(formData.approvers || [])];
// Find by originalStepLevel first, then fallback to level for backwards compatibility
const index = approvers.findIndex((a: ClaimApprover) =>
const index = approvers.findIndex((a: ClaimApprover) =>
a.originalStepLevel === level || (!a.originalStepLevel && a.level === level && !a.isAdditional)
);
if (index !== -1) {
const existingApprover = approvers[index];
if (existingApprover) {
@ -430,12 +430,12 @@ export function ClaimApproverSelectionStep({
// Handle adding additional approver between steps
const handleAddApproverEmailChange = (value: string) => {
setAddApproverEmail(value);
// Clear selectedUser when manually editing
if (selectedAddApproverUser && selectedAddApproverUser.email.toLowerCase() !== value.toLowerCase()) {
setSelectedAddApproverUser(null);
}
// Clear existing timer
if (addApproverSearchTimer.current) {
clearTimeout(addApproverSearchTimer.current);
@ -484,7 +484,7 @@ export function ClaimApproverSelectionStep({
secondEmail: user.secondEmail,
location: user.location
});
setAddApproverEmail(user.email);
setSelectedAddApproverUser(user);
setAddApproverSearchResults([]);
@ -497,7 +497,7 @@ export function ClaimApproverSelectionStep({
const handleConfirmAddApprover = async () => {
const emailToAdd = addApproverEmail.trim().toLowerCase();
if (!emailToAdd) {
toast.error('Please enter an email address');
return;
@ -540,7 +540,7 @@ export function ClaimApproverSelectionStep({
// Check for duplicates
const approvers = formData.approvers || [];
const isDuplicate = approvers.some(
(a: ClaimApprover) =>
(a: ClaimApprover) =>
(a.userId && selectedAddApproverUser?.userId && a.userId === selectedAddApproverUser.userId) ||
a.email?.toLowerCase() === emailToAdd
);
@ -552,15 +552,15 @@ export function ClaimApproverSelectionStep({
// Find the approver for the selected step by its originalStepLevel
// This handles cases where steps have been shifted due to previous additional approvers
const approverAfter = approvers.find((a: ClaimApprover) =>
a.originalStepLevel === addApproverInsertAfter ||
const approverAfter = approvers.find((a: ClaimApprover) =>
a.originalStepLevel === addApproverInsertAfter ||
(!a.originalStepLevel && !a.isAdditional && a.level === addApproverInsertAfter)
);
// Get the current level of the approver we're inserting after
// If the step has been shifted, use its current level; otherwise use the original level
const currentLevelAfter = approverAfter ? approverAfter.level : addApproverInsertAfter;
// Calculate insert level based on current shifted level
const insertLevel = currentLevelAfter + 1;
@ -570,7 +570,7 @@ export function ClaimApproverSelectionStep({
// After shifting, we'll have the same number of unique levels + 1 (the new approver)
const currentUniqueLevels = new Set(approvers.map((a: ClaimApprover) => a.level)).size;
const newTotalLevels = currentUniqueLevels + 1;
if (newTotalLevels > maxApprovalLevels) {
const violations = [{
type: 'max_approval_levels',
@ -578,7 +578,7 @@ export function ClaimApproverSelectionStep({
currentValue: newTotalLevels,
maxValue: maxApprovalLevels
}];
if (onPolicyViolation) {
onPolicyViolation(violations);
} else {
@ -593,12 +593,12 @@ export function ClaimApproverSelectionStep({
try {
const response = await searchUsers(emailToAdd, 1);
const searchOktaResults = response.data?.data || [];
if (searchOktaResults.length === 0) {
toast.error('User not found in organization directory. Please use @ to search for users.');
return;
}
const foundUser = searchOktaResults[0];
await ensureUserExists({
userId: foundUser.userId,
@ -617,7 +617,7 @@ export function ClaimApproverSelectionStep({
secondEmail: foundUser.secondEmail,
location: foundUser.location
});
// Use found user - insert at integer level and shift subsequent approvers
// insertLevel is already calculated above based on current shifted level
const newApprover: ClaimApprover = {
@ -631,7 +631,7 @@ export function ClaimApproverSelectionStep({
insertAfterLevel: addApproverInsertAfter, // Store original step level for reference
stepName: `Additional Approver - ${foundUser.displayName || foundUser.email}`,
};
// Shift all approvers with level >= insertLevel up by 1 (both fixed and additional)
const updatedApprovers = approvers.map((a: ClaimApprover) => {
if (a.level >= insertLevel) {
@ -639,13 +639,13 @@ export function ClaimApproverSelectionStep({
}
return a;
});
// Insert the new approver
updatedApprovers.push(newApprover);
// Sort by level to maintain order
updatedApprovers.sort((a, b) => a.level - b.level);
updateFormData('approvers', updatedApprovers);
toast.success(`Additional approver added and subsequent steps shifted`);
} catch (error) {
@ -667,7 +667,7 @@ export function ClaimApproverSelectionStep({
insertAfterLevel: addApproverInsertAfter, // Store original step level for reference
stepName: `Additional Approver - ${selectedAddApproverUser.displayName || selectedAddApproverUser.email}`,
};
// Shift all approvers with level >= insertLevel up by 1 (both fixed and additional)
const updatedApprovers = approvers.map((a: ClaimApprover) => {
if (a.level >= insertLevel) {
@ -675,13 +675,13 @@ export function ClaimApproverSelectionStep({
}
return a;
});
// Insert the new approver
updatedApprovers.push(newApprover);
// Sort by level to maintain order
updatedApprovers.sort((a, b) => a.level - b.level);
updateFormData('approvers', updatedApprovers);
toast.success(`Additional approver added and subsequent steps shifted`);
}
@ -699,12 +699,12 @@ export function ClaimApproverSelectionStep({
const handleRemoveAdditionalApprover = (level: number) => {
const approvers = [...(formData.approvers || [])];
const approverToRemove = approvers.find((a: ClaimApprover) => a.level === level);
if (!approverToRemove) return;
// Remove the additional approver
const filtered = approvers.filter((a: ClaimApprover) => a.level !== level);
// Shift all approvers with level > removed level down by 1
const updatedApprovers = filtered.map((a: ClaimApprover) => {
if (a.level > level && !a.isAdditional) {
@ -712,10 +712,10 @@ export function ClaimApproverSelectionStep({
}
return a;
});
// Sort by level to maintain order
updatedApprovers.sort((a, b) => a.level - b.level);
updateFormData('approvers', updatedApprovers);
toast.success('Additional approver removed and subsequent steps shifted back');
};
@ -829,15 +829,15 @@ export function ClaimApproverSelectionStep({
{/* Dynamic Approver Cards - Filter out system steps (auto-processed) */}
{(() => {
// Count additional approvers before first step
const additionalBeforeFirst = sortedApprovers.filter((a: ClaimApprover) =>
const additionalBeforeFirst = sortedApprovers.filter((a: ClaimApprover) =>
a.isAdditional && a.insertAfterLevel === 0
);
let displayIndex = additionalBeforeFirst.length; // Start index after additional approvers before first step
return CLAIM_STEPS.filter((step) => !step.isAuto).map((step, index, filteredSteps) => {
// Find approver by originalStepLevel first, then fallback to level
const approver = approvers.find((a: ClaimApprover) =>
const approver = approvers.find((a: ClaimApprover) =>
a.originalStepLevel === step.level || (!a.originalStepLevel && a.level === step.level && !a.isAdditional)
) || {
email: '',
@ -856,17 +856,17 @@ export function ClaimApproverSelectionStep({
// Additional approvers inserted after this step will have insertAfterLevel === step.level
// and their level will be step.level + 1 (or higher if multiple are added)
const additionalApproversAfter = sortedApprovers.filter(
(a: ClaimApprover) =>
a.isAdditional &&
(a: ClaimApprover) =>
a.isAdditional &&
a.insertAfterLevel === step.level
).sort((a, b) => a.level - b.level);
// Calculate current step's display number
const currentStepDisplayNumber = displayIndex + 1;
// Increment display index for this step
displayIndex++;
// Increment display index for each additional approver after this step
displayIndex += additionalApproversAfter.length;
@ -875,238 +875,259 @@ export function ClaimApproverSelectionStep({
<div className="flex justify-center">
<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
? 'border-green-200 bg-green-50'
);
})}
<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
? 'bg-green-600'
: isPreFilled
? 'bg-blue-600'
: 'bg-gray-400'
? 'border-blue-200 bg-blue-50'
: 'border-gray-200 bg-gray-50'
}`}>
<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>
)}
<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>
<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>
)}
<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 && (() => {
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>
@ -1125,17 +1146,17 @@ export function ClaimApproverSelectionStep({
{sortedApprovers.map((approver: ClaimApprover) => {
// Skip system/auto steps
// Find step by originalStepLevel first, then fallback to level
const step = approver.originalStepLevel
const step = approver.originalStepLevel
? CLAIM_STEPS.find(s => s.level === approver.originalStepLevel)
: CLAIM_STEPS.find(s => s.level === approver.level && !approver.isAdditional);
if (step?.isAuto) return null;
const tat = Number(approver.tat || 0);
const tatType = approver.tatType || 'hours';
const hours = tatType === 'days' ? tat * 24 : tat;
if (!tat) return null;
// Handle additional approvers
if (approver.isAdditional) {
const afterStep = CLAIM_STEPS.find(s => s.level === approver.insertAfterLevel);
@ -1148,7 +1169,7 @@ export function ClaimApproverSelectionStep({
</div>
);
}
return (
<div key={approver.level} className="flex items-center justify-between p-2 bg-gray-50 rounded">
<span className="text-sm font-medium">{step?.name || 'Unknown'}</span>
@ -1173,13 +1194,13 @@ export function ClaimApproverSelectionStep({
Add an additional approver between workflow steps. The approver will be inserted after the selected step. Additional approvers cannot be added after "Requestor Claim Approval".
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
{/* Insert After Level Selection */}
<div className="space-y-2">
<Label className="text-sm font-medium">Insert After Step *</Label>
<Select
value={addApproverInsertAfter.toString()}
<Select
value={addApproverInsertAfter.toString()}
onValueChange={(value) => setAddApproverInsertAfter(Number(value))}
>
<SelectTrigger className="h-11 border-gray-300">
@ -1211,7 +1232,7 @@ export function ClaimApproverSelectionStep({
<p className="text-xs text-amber-600 font-medium">
⚠️ Additional approvers cannot be added after "Requestor Claim Approval" as it is considered final.
</p>
{/* Max Approval Levels Note */}
{maxApprovalLevels && (
<p className="text-xs text-gray-600 mt-2">
@ -1290,7 +1311,7 @@ export function ClaimApproverSelectionStep({
className="pl-10 h-11 border-gray-300"
autoFocus
/>
{/* Search Results Dropdown */}
{(isSearchingApprover || addApproverSearchResults.length > 0) && (
<div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg max-h-60 overflow-auto">

316
src/dealer-claim/components/request-detail/WorkflowTab.tsx
View File

@ -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

11
src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx
View File

@ -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>

6
src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx
View File

@ -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

61
src/dealer-claim/components/request-detail/modals/DMSPushModal.css
View File

@ -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%;
}

987
src/dealer-claim/components/request-detail/modals/DMSPushModal.tsx
View File

File diff suppressed because it is too large Load Diff

34
src/dealer-claim/pages/RequestDetail.tsx
View File

@ -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';
@ -153,7 +153,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
// Determine if user is department lead (find dynamically by levelName, not hardcoded step number)
const currentUserId = (user as any)?.userId || '';
// IO tab visibility for dealer claims
// Show IO tab for initiator (Requestor Evaluation level) - initiator can now fetch and block IO
const showIOTab = isInitiator;
@ -177,7 +177,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
// State to temporarily store approval level for modal (used for additional approvers)
const [temporaryApprovalLevel, setTemporaryApprovalLevel] = useState<any>(null);
// Use temporary level if set, otherwise use currentApprovalLevel
const effectiveApprovalLevel = temporaryApprovalLevel || currentApprovalLevel;
@ -220,7 +220,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
// Check both lowercase and uppercase status values
const requestStatus = (request?.status || apiRequest?.status || '').toLowerCase();
const needsClosure = (requestStatus === 'approved' || requestStatus === 'rejected') && isInitiator;
// Closure check completed
const {
conclusionRemark,
@ -335,7 +335,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
try {
setLoadingSummary(true);
const summary = await getSummaryByRequestId(apiRequest.requestId);
if (summary?.summaryId) {
setSummaryId(summary.summaryId);
try {
@ -376,9 +376,9 @@ 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;
if (notifRequestId !== apiRequest.requestId &&
notifRequestNumber !== requestIdentifier &&
notifRequestNumber !== apiRequest.requestNumber) return;
// Check for credit note metadata
if (notif.metadata?.creditNoteNumber || notif.metadata?.credit_note_number) {
@ -427,15 +427,15 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
{accessDenied.message}
</p>
<div className="flex gap-3 justify-center">
<Button
variant="outline"
<Button
variant="outline"
onClick={onBack || (() => window.history.back())}
className="flex items-center gap-2"
>
<ArrowLeft className="w-4 h-4" />
Go Back
</Button>
<Button
<Button
onClick={() => window.location.href = '/dashboard'}
className="bg-blue-600 hover:bg-blue-700"
>
@ -460,15 +460,15 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
The dealer claim request you're looking for doesn't exist or may have been deleted.
</p>
<div className="flex gap-3 justify-center">
<Button
variant="outline"
<Button
variant="outline"
onClick={onBack || (() => window.history.back())}
className="flex items-center gap-2"
>
<ArrowLeft className="w-4 h-4" />
Go Back
</Button>
<Button
<Button
onClick={() => window.location.href = '/dashboard'}
className="bg-blue-600 hover:bg-blue-700"
>
@ -598,8 +598,8 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
{isClosed && (
<TabsContent value="summary" className="mt-0" data-testid="summary-tab-content">
<SummaryTab
summary={summaryDetails}
<SummaryTab
summary={summaryDetails}
loading={loadingSummary}
onShare={handleShareSummary}
isInitiator={isInitiator}
@ -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)}

28
src/utils/claimDataMapper.ts
View File

@ -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,