796 lines
34 KiB
TypeScript
796 lines
34 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
|
|
import { Badge } from './ui/badge';
|
|
import { Button } from './ui/button';
|
|
import { toast } from 'sonner@2.0.3';
|
|
import { DealerDocumentModal } from './modals/DealerDocumentModal';
|
|
import { InitiatorVerificationModal } from './modals/InitiatorVerificationModal';
|
|
import { Progress } from './ui/progress';
|
|
import { Avatar, AvatarFallback } from './ui/avatar';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
|
import { CLAIM_MANAGEMENT_DATABASE } from '../utils/claimManagementDatabase';
|
|
import {
|
|
ArrowLeft,
|
|
Clock,
|
|
FileText,
|
|
MessageSquare,
|
|
CheckCircle,
|
|
XCircle,
|
|
Download,
|
|
Eye,
|
|
Flame,
|
|
Target,
|
|
TrendingUp,
|
|
RefreshCw,
|
|
Activity,
|
|
MapPin,
|
|
Mail,
|
|
Phone,
|
|
Building,
|
|
Receipt,
|
|
Upload,
|
|
UserPlus,
|
|
ClipboardList,
|
|
DollarSign,
|
|
Calendar
|
|
} from 'lucide-react';
|
|
|
|
interface ClaimManagementDetailProps {
|
|
requestId: string;
|
|
onBack?: () => void;
|
|
onOpenModal?: (modal: string) => void;
|
|
dynamicRequests?: any[];
|
|
}
|
|
|
|
// Utility functions
|
|
const getPriorityConfig = (priority: string) => {
|
|
switch (priority) {
|
|
case 'express':
|
|
case 'urgent':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
icon: Flame
|
|
};
|
|
case 'standard':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
icon: Target
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
icon: Target
|
|
};
|
|
}
|
|
};
|
|
|
|
const getStatusConfig = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return {
|
|
color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
icon: Clock
|
|
};
|
|
case 'in-review':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
icon: Eye
|
|
};
|
|
case 'approved':
|
|
return {
|
|
color: 'bg-green-100 text-green-800 border-green-200',
|
|
icon: CheckCircle
|
|
};
|
|
case 'rejected':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
icon: XCircle
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
icon: Clock
|
|
};
|
|
}
|
|
};
|
|
|
|
const getSLAConfig = (progress: number) => {
|
|
if (progress >= 80) {
|
|
return {
|
|
bg: 'bg-red-50',
|
|
color: 'bg-red-500',
|
|
textColor: 'text-red-700'
|
|
};
|
|
} else if (progress >= 60) {
|
|
return {
|
|
bg: 'bg-orange-50',
|
|
color: 'bg-orange-500',
|
|
textColor: 'text-orange-700'
|
|
};
|
|
} else {
|
|
return {
|
|
bg: 'bg-green-50',
|
|
color: 'bg-green-500',
|
|
textColor: 'text-green-700'
|
|
};
|
|
}
|
|
};
|
|
|
|
const getStepIcon = (status: string) => {
|
|
switch (status) {
|
|
case 'approved':
|
|
return <CheckCircle className="w-5 h-5 text-green-600" />;
|
|
case 'rejected':
|
|
return <XCircle className="w-5 h-5 text-red-600" />;
|
|
case 'pending':
|
|
case 'in-review':
|
|
return <Clock className="w-5 h-5 text-blue-600" />;
|
|
default:
|
|
return <Clock className="w-5 h-5 text-gray-400" />;
|
|
}
|
|
};
|
|
|
|
const getActionTypeIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'approval':
|
|
case 'approved':
|
|
return <CheckCircle className="w-5 h-5 text-green-600" />;
|
|
case 'rejection':
|
|
case 'rejected':
|
|
return <XCircle className="w-5 h-5 text-red-600" />;
|
|
case 'comment':
|
|
return <MessageSquare className="w-5 h-5 text-blue-600" />;
|
|
case 'status_change':
|
|
return <RefreshCw className="w-5 h-5 text-orange-600" />;
|
|
case 'assignment':
|
|
return <UserPlus className="w-5 h-5 text-purple-600" />;
|
|
case 'created':
|
|
return <FileText className="w-5 h-5 text-blue-600" />;
|
|
default:
|
|
return <Activity className="w-5 h-5 text-gray-600" />;
|
|
}
|
|
};
|
|
|
|
export function ClaimManagementDetail({
|
|
requestId,
|
|
onBack,
|
|
onOpenModal,
|
|
dynamicRequests = []
|
|
}: ClaimManagementDetailProps) {
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
const [dealerDocModal, setDealerDocModal] = useState(false);
|
|
const [initiatorVerificationModal, setInitiatorVerificationModal] = useState(false);
|
|
|
|
// Get claim from database or dynamic requests
|
|
const claim = useMemo(() => {
|
|
// First check static database
|
|
const staticClaim = CLAIM_MANAGEMENT_DATABASE[requestId];
|
|
if (staticClaim) return staticClaim;
|
|
|
|
// Then check dynamic requests
|
|
const dynamicClaim = dynamicRequests.find((req: any) => req.id === requestId);
|
|
if (dynamicClaim) return dynamicClaim;
|
|
|
|
return null;
|
|
}, [requestId, dynamicRequests]);
|
|
|
|
if (!claim) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Not Found</h2>
|
|
<p className="text-gray-600 mb-4">The claim request you're looking for doesn't exist.</p>
|
|
<Button onClick={onBack}>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const priorityConfig = getPriorityConfig(claim.priority);
|
|
const statusConfig = getStatusConfig(claim.status);
|
|
const slaConfig = getSLAConfig(claim.slaProgress);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="max-w-7xl mx-auto p-6">
|
|
{/* Header Section */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-start gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onBack}
|
|
className="mt-1"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
|
|
<Receipt className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h1 className="text-xl font-bold text-gray-900">{claim.id}</h1>
|
|
<Badge className={`${priorityConfig.color}`} variant="outline">
|
|
{claim.priority} priority
|
|
</Badge>
|
|
<Badge className={`${statusConfig.color}`} variant="outline">
|
|
<statusConfig.icon className="w-3 h-3 mr-1" />
|
|
{claim.status}
|
|
</Badge>
|
|
<Badge className="bg-purple-100 text-purple-800 border-purple-200" variant="outline">
|
|
<Receipt className="w-3 h-3 mr-1" />
|
|
Claim Management
|
|
</Badge>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900">{claim.title}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{claim.amount && claim.amount !== 'TBD' && (
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-500">Claim Amount</p>
|
|
<p className="text-xl font-bold text-gray-900">{claim.amount}</p>
|
|
</div>
|
|
)}
|
|
<Button variant="outline" size="sm">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SLA Progress */}
|
|
<div className={`${slaConfig.bg} rounded-lg border p-4 mt-4`}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className={`h-4 w-4 ${slaConfig.textColor}`} />
|
|
<span className="text-sm font-medium text-gray-900">SLA Progress</span>
|
|
</div>
|
|
<span className={`text-sm font-semibold ${slaConfig.textColor}`}>
|
|
{claim.slaRemaining}
|
|
</span>
|
|
</div>
|
|
<Progress value={claim.slaProgress} className="h-2 mb-2" />
|
|
<p className="text-xs text-gray-600">
|
|
Due: {claim.slaEndDate} • {claim.slaProgress}% elapsed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
<TabsList className="bg-white border border-gray-200 shadow-sm mb-6">
|
|
<TabsTrigger value="overview" className="gap-2">
|
|
<ClipboardList className="w-4 h-4" />
|
|
Overview
|
|
</TabsTrigger>
|
|
<TabsTrigger value="workflow" className="gap-2">
|
|
<TrendingUp className="w-4 h-4" />
|
|
Workflow (8-Steps)
|
|
</TabsTrigger>
|
|
<TabsTrigger value="documents" className="gap-2">
|
|
<FileText className="w-4 h-4" />
|
|
Documents
|
|
</TabsTrigger>
|
|
<TabsTrigger value="activity" className="gap-2">
|
|
<Activity className="w-4 h-4" />
|
|
Activity
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Overview Tab */}
|
|
<TabsContent value="overview">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column - Main Content (2/3 width) */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Activity Information */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Calendar className="w-5 h-5 text-blue-600" />
|
|
Activity Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Name</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityName || 'N/A'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Type</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityType || 'N/A'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
|
|
<MapPin className="w-4 h-4 text-gray-400" />
|
|
{claim.claimDetails?.location || 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Date</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityDate || 'N/A'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Estimated Budget</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
|
|
<DollarSign className="w-4 h-4 text-green-600" />
|
|
{claim.claimDetails?.estimatedBudget || 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Period</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">
|
|
{claim.claimDetails?.periodStart || 'N/A'} - {claim.claimDetails?.periodEnd || 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t">
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Description</label>
|
|
<p className="text-sm text-gray-700 mt-2 bg-gray-50 p-3 rounded-lg whitespace-pre-line">
|
|
{claim.claimDetails?.requestDescription || claim.description || 'N/A'}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Dealer Information */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Building className="w-5 h-5 text-purple-600" />
|
|
Dealer Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Code</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerCode || 'N/A'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Name</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerName || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Contact Information</label>
|
|
<div className="mt-2 space-y-2">
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<Mail className="w-4 h-4 text-gray-400" />
|
|
<span>{claim.claimDetails?.dealerEmail || 'N/A'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<Phone className="w-4 h-4 text-gray-400" />
|
|
<span>{claim.claimDetails?.dealerPhone || 'N/A'}</span>
|
|
</div>
|
|
{claim.claimDetails?.dealerAddress && (
|
|
<div className="flex items-start gap-2 text-sm text-gray-700">
|
|
<MapPin className="w-4 h-4 text-gray-400 mt-0.5" />
|
|
<span>{claim.claimDetails.dealerAddress}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Initiator Information */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Request Initiator</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
|
|
<AvatarFallback className="bg-gray-700 text-white font-semibold text-lg">
|
|
{claim.initiator?.avatar || 'U'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900">{claim.initiator?.name || 'N/A'}</h3>
|
|
<p className="text-sm text-gray-600">{claim.initiator?.role || 'N/A'}</p>
|
|
<p className="text-sm text-gray-500">{claim.initiator?.department || 'N/A'}</p>
|
|
|
|
<div className="mt-3 space-y-2">
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Mail className="w-4 h-4" />
|
|
<span>{claim.initiator?.email || 'N/A'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Phone className="w-4 h-4" />
|
|
<span>{claim.initiator?.phone || 'N/A'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column - Quick Actions Sidebar (1/3 width) */}
|
|
<div className="space-y-6">
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Quick Actions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 border-gray-300"
|
|
onClick={() => onOpenModal?.('work-note')}
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
Add Work Note
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 border-gray-300"
|
|
onClick={() => onOpenModal?.('add-spectator')}
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
Add Spectator
|
|
</Button>
|
|
|
|
<div className="pt-4 space-y-2">
|
|
<Button
|
|
className="w-full bg-green-600 hover:bg-green-700 text-white"
|
|
onClick={() => onOpenModal?.('approve')}
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Approve Step
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
className="w-full"
|
|
onClick={() => onOpenModal?.('reject')}
|
|
>
|
|
<XCircle className="w-4 h-4 mr-2" />
|
|
Reject Step
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Spectators */}
|
|
{claim.spectators && claim.spectators.length > 0 && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Spectators</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{claim.spectators.map((spectator: any, index: number) => (
|
|
<div key={index} className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
|
|
{spectator.avatar}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900">{spectator.name}</p>
|
|
<p className="text-xs text-gray-500 truncate">{spectator.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Workflow Tab - 8 Step Process */}
|
|
<TabsContent value="workflow">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<TrendingUp className="w-5 h-5 text-purple-600" />
|
|
Claim Management Workflow
|
|
</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
8-Step approval process for dealer claim management
|
|
</CardDescription>
|
|
</div>
|
|
<Badge variant="outline" className="font-medium">
|
|
Step {claim.currentStep} of {claim.totalSteps}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{claim.approvalFlow && claim.approvalFlow.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{claim.approvalFlow.map((step: any, index: number) => {
|
|
const isActive = step.status === 'pending' || step.status === 'in-review';
|
|
const isCompleted = step.status === 'approved';
|
|
const isRejected = step.status === 'rejected';
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`relative p-5 rounded-lg border-2 transition-all ${
|
|
isActive
|
|
? 'border-purple-500 bg-purple-50 shadow-md'
|
|
: isCompleted
|
|
? 'border-green-500 bg-green-50'
|
|
: isRejected
|
|
? 'border-red-500 bg-red-50'
|
|
: 'border-gray-200 bg-white'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className={`p-3 rounded-xl ${
|
|
isActive ? 'bg-purple-100' :
|
|
isCompleted ? 'bg-green-100' :
|
|
isRejected ? 'bg-red-100' :
|
|
'bg-gray-100'
|
|
}`}>
|
|
{getStepIcon(step.status)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-4 mb-2">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h4 className="font-semibold text-gray-900">Step {step.step}: {step.role}</h4>
|
|
<Badge variant="outline" className={
|
|
isActive ? 'bg-purple-100 text-purple-800 border-purple-200' :
|
|
isCompleted ? 'bg-green-100 text-green-800 border-green-200' :
|
|
isRejected ? 'bg-red-100 text-red-800 border-red-200' :
|
|
'bg-gray-100 text-gray-800 border-gray-200'
|
|
}>
|
|
{step.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-gray-600">{step.approver}</p>
|
|
{step.description && (
|
|
<p className="text-sm text-gray-500 mt-2 italic">{step.description}</p>
|
|
)}
|
|
</div>
|
|
<div className="text-right">
|
|
{step.tatHours && (
|
|
<p className="text-xs text-gray-500">TAT: {step.tatHours}h</p>
|
|
)}
|
|
{step.elapsedHours !== undefined && step.elapsedHours > 0 && (
|
|
<p className="text-xs text-gray-600 font-medium">Elapsed: {step.elapsedHours}h</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{step.comment && (
|
|
<div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
|
|
<p className="text-sm text-gray-700">{step.comment}</p>
|
|
</div>
|
|
)}
|
|
|
|
{step.timestamp && (
|
|
<p className="text-xs text-gray-500 mt-2">
|
|
{isCompleted ? 'Approved' : isRejected ? 'Rejected' : 'Actioned'} on {step.timestamp}
|
|
</p>
|
|
)}
|
|
|
|
{/* Workflow-specific Action Buttons */}
|
|
{isActive && (
|
|
<div className="mt-4 flex gap-2">
|
|
{step.step === 1 && step.role === 'Dealer - Document Upload' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setDealerDocModal(true)}
|
|
className="bg-purple-600 hover:bg-purple-700"
|
|
>
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Upload Documents
|
|
</Button>
|
|
)}
|
|
{step.step === 2 && step.role === 'Initiator Evaluation' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => onOpenModal?.('approve')}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Approve & Continue
|
|
</Button>
|
|
)}
|
|
{step.step === 4 && step.role === 'Department Lead Approval' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => onOpenModal?.('approve')}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Approve & Lock Budget
|
|
</Button>
|
|
)}
|
|
{step.step === 5 && step.role === 'Dealer - Completion Documents' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setDealerDocModal(true)}
|
|
className="bg-purple-600 hover:bg-purple-700"
|
|
>
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Upload Completion Docs
|
|
</Button>
|
|
)}
|
|
{step.step === 6 && step.role === 'Initiator Verification' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setInitiatorVerificationModal(true)}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Verify & Set Amount
|
|
</Button>
|
|
)}
|
|
{step.step === 8 && step.role.includes('Credit Note') && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => onOpenModal?.('approve')}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Issue Credit Note
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 text-center py-8">No workflow steps defined</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Documents Tab */}
|
|
<TabsContent value="documents">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="w-5 h-5 text-purple-600" />
|
|
Claim Documents
|
|
</CardTitle>
|
|
<Button size="sm">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Upload Document
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{claim.documents && claim.documents.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{claim.documents.map((doc: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-purple-100 rounded-lg">
|
|
<FileText className="w-5 h-5 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{doc.name}</p>
|
|
<p className="text-xs text-gray-500">
|
|
{doc.size} • Uploaded by {doc.uploadedBy} on {doc.uploadedAt}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm">
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 text-center py-8">No documents uploaded yet</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Activity Tab - Audit Trail */}
|
|
<TabsContent value="activity">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Activity className="w-5 h-5 text-orange-600" />
|
|
Claim Activity Timeline
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Complete audit trail of all claim management activities
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{claim.auditTrail && claim.auditTrail.length > 0 ? claim.auditTrail.map((entry: any, index: number) => (
|
|
<div key={index} className="flex items-start gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors border border-gray-100">
|
|
<div className="mt-1">
|
|
{getActionTypeIcon(entry.type)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div>
|
|
<p className="font-medium text-gray-900">{entry.action}</p>
|
|
<p className="text-sm text-gray-600 mt-1">{entry.details}</p>
|
|
<p className="text-xs text-gray-500 mt-1">by {entry.user}</p>
|
|
</div>
|
|
<span className="text-xs text-gray-500 whitespace-nowrap">{entry.timestamp}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="text-center py-12">
|
|
<Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
|
<p className="text-sm text-gray-500">No activity recorded yet</p>
|
|
<p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Claim Management Modals */}
|
|
{dealerDocModal && (
|
|
<DealerDocumentModal
|
|
isOpen={dealerDocModal}
|
|
onClose={() => setDealerDocModal(false)}
|
|
onSubmit={async (documents) => {
|
|
console.log('Dealer documents submitted:', documents);
|
|
toast.success('Documents Uploaded', {
|
|
description: 'Your documents have been submitted for review.',
|
|
});
|
|
setDealerDocModal(false);
|
|
}}
|
|
dealerName={claim.claimDetails?.dealerName || 'Dealer'}
|
|
activityName={claim.claimDetails?.activityName || claim.title}
|
|
/>
|
|
)}
|
|
|
|
{initiatorVerificationModal && (
|
|
<InitiatorVerificationModal
|
|
isOpen={initiatorVerificationModal}
|
|
onClose={() => setInitiatorVerificationModal(false)}
|
|
onSubmit={async (data) => {
|
|
console.log('Verification data:', data);
|
|
toast.success('Verification Complete', {
|
|
description: `Amount set to ${data.approvedAmount}. E-invoice will be generated.`,
|
|
});
|
|
setInitiatorVerificationModal(false);
|
|
}}
|
|
activityName={claim.claimDetails?.activityName || claim.title}
|
|
requestedAmount={claim.claimDetails?.estimatedBudget || claim.amount || 'TBD'}
|
|
documents={claim.documents || []}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|