109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Save } from 'lucide-react';
|
|
import { DashboardNote } from './DashboardNote';
|
|
import { RoleDashboardSection } from './RoleDashboardSection';
|
|
import { toast } from 'sonner';
|
|
|
|
export type Role = 'Initiator' | 'Approver' | 'Spectator';
|
|
|
|
export type KPICard =
|
|
| 'Total Requests'
|
|
| 'Open Requests'
|
|
| 'Approved Requests'
|
|
| 'Rejected Requests'
|
|
| 'My Pending Actions'
|
|
| 'TAT Compliance'
|
|
| 'Delayed Workflows'
|
|
| 'Average Cycle Time';
|
|
|
|
interface DashboardConfigData {
|
|
[key: string]: {
|
|
[kpi: string]: boolean;
|
|
};
|
|
}
|
|
|
|
export function DashboardConfig() {
|
|
const [config, setConfig] = useState<DashboardConfigData>({
|
|
Initiator: {
|
|
'Total Requests': true,
|
|
'Open Requests': true,
|
|
'Approved Requests': true,
|
|
'Rejected Requests': true,
|
|
'My Pending Actions': true,
|
|
'TAT Compliance': true,
|
|
'Delayed Workflows': true,
|
|
'Average Cycle Time': true
|
|
},
|
|
Approver: {
|
|
'Total Requests': true,
|
|
'Open Requests': true,
|
|
'Approved Requests': true,
|
|
'Rejected Requests': true,
|
|
'My Pending Actions': true,
|
|
'TAT Compliance': true,
|
|
'Delayed Workflows': true,
|
|
'Average Cycle Time': true
|
|
},
|
|
Spectator: {
|
|
'Total Requests': true,
|
|
'Open Requests': true,
|
|
'Approved Requests': true,
|
|
'Rejected Requests': true,
|
|
'My Pending Actions': true,
|
|
'TAT Compliance': true,
|
|
'Delayed Workflows': true,
|
|
'Average Cycle Time': true
|
|
}
|
|
});
|
|
|
|
const handleSave = () => {
|
|
// TODO: Implement API call to save dashboard configuration
|
|
toast.success('Dashboard layout saved successfully');
|
|
};
|
|
|
|
const handleKPIToggle = (role: Role, kpi: KPICard, checked: boolean) => {
|
|
setConfig(prev => ({
|
|
...prev,
|
|
[role]: {
|
|
...prev[role],
|
|
[kpi]: checked
|
|
}
|
|
}));
|
|
};
|
|
|
|
const roles: Role[] = ['Initiator', 'Approver', 'Spectator'];
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dashboard Layout Configuration</CardTitle>
|
|
<CardDescription>
|
|
Control which KPI cards are visible for each user role
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<DashboardNote />
|
|
|
|
<div className="space-y-6">
|
|
{roles.map((role) => (
|
|
<RoleDashboardSection
|
|
key={role}
|
|
role={role}
|
|
kpis={config[role] || {}}
|
|
onKPIToggle={(kpi, checked) => handleKPIToggle(role, kpi, checked)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<Button onClick={handleSave} className="bg-re-green hover:bg-re-green/90">
|
|
<Save className="w-4 h-4 mr-2" />
|
|
Save Dashboard Layout
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|