64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Role, KPICard } from './DashboardConfig';
|
|
|
|
interface RoleDashboardSectionProps {
|
|
role: Role;
|
|
kpis: Record<string, boolean>;
|
|
onKPIToggle: (kpi: KPICard, checked: boolean) => void;
|
|
}
|
|
|
|
const kpiCards: KPICard[] = [
|
|
'Total Requests',
|
|
'Open Requests',
|
|
'Approved Requests',
|
|
'Rejected Requests',
|
|
'My Pending Actions',
|
|
'TAT Compliance',
|
|
'Delayed Workflows',
|
|
'Average Cycle Time'
|
|
];
|
|
|
|
const getRoleBadgeColor = (role: Role) => {
|
|
switch (role) {
|
|
case 'Initiator':
|
|
return 'bg-blue-100 text-blue-800';
|
|
case 'Approver':
|
|
return 'bg-green-100 text-green-800';
|
|
case 'Spectator':
|
|
return 'bg-gray-100 text-gray-800';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800';
|
|
}
|
|
};
|
|
|
|
export function RoleDashboardSection({ role, kpis, onKPIToggle }: RoleDashboardSectionProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium flex items-center gap-2">
|
|
<Badge className={getRoleBadgeColor(role)}>
|
|
{role} Dashboard
|
|
</Badge>
|
|
</h4>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 ml-4">
|
|
{kpiCards.map((kpi) => (
|
|
<div key={kpi} className="flex items-center space-x-2 p-2 bg-muted/50 rounded">
|
|
<Checkbox
|
|
id={`${role.toLowerCase()}-${kpi}`}
|
|
checked={kpis[kpi] || false}
|
|
onCheckedChange={(checked) => onKPIToggle(kpi, checked === true)}
|
|
/>
|
|
<label
|
|
htmlFor={`${role.toLowerCase()}-${kpi}`}
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
|
>
|
|
{kpi}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|