Spaces:
Sleeping
Sleeping
File size: 2,781 Bytes
f305a41 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { CheckCircle2, Circle, Clock, AlertCircle } from 'lucide-react';
const workflowSteps = [
{ id: 1, name: 'Application Submission', count: 12, status: 'completed' },
{ id: 2, name: 'Field Verification', count: 8, status: 'in_progress' },
{ id: 3, name: 'Preliminary Audit', count: 15, status: 'in_progress' },
{ id: 4, name: 'Committee Audit', count: 6, status: 'pending' },
{ id: 5, name: 'Surveillance Audit', count: 4, status: 'pending' },
{ id: 6, name: 'Final Approval', count: 3, status: 'pending' },
{ id: 7, name: 'Certification', count: 73, status: 'completed' },
];
export function WorkflowOverview() {
const getStatusIcon = (status: string) => {
switch (status) {
case 'completed':
return <CheckCircle2 className="h-5 w-5 text-emerald-500" />;
case 'in_progress':
return <Clock className="h-5 w-5 text-amber-500" />;
case 'warning':
return <AlertCircle className="h-5 w-5 text-red-500" />;
default:
return <Circle className="h-5 w-5 text-muted-foreground" />;
}
};
return (
<Card className="card-hover">
<CardHeader>
<CardTitle className="text-lg font-semibold">Workflow Pipeline</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{workflowSteps.map((step, index) => (
<div
key={step.id}
className={cn(
'flex items-center justify-between p-3 rounded-lg transition-all',
step.status === 'in_progress' && 'bg-amber-50 border-l-4 border-amber-400',
step.status === 'completed' && 'bg-emerald-50/50',
step.status === 'pending' && 'bg-muted/30'
)}
>
<div className="flex items-center gap-3">
{getStatusIcon(step.status)}
<div>
<p className="font-medium text-sm">{step.name}</p>
<p className="text-xs text-muted-foreground">
{step.count} application{step.count !== 1 ? 's' : ''}
</p>
</div>
</div>
<div className="flex items-center gap-2">
<span className={cn(
'text-lg font-bold',
step.status === 'in_progress' && 'text-amber-600',
step.status === 'completed' && 'text-emerald-600',
step.status === 'pending' && 'text-muted-foreground'
)}>
{step.count}
</span>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}
|