Add a summary of guard availability to the planning view

Update the `GeneralPlanningResponse` interface to include a `summary` object containing `totalGuardsNeeded`, `totalGuardsAssigned`, and `totalGuardsMissing`. Render this summary in the UI.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e5565357-90e1-419f-b9a8-6ee8394636df
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/e5565357-90e1-419f-b9a8-6ee8394636df/uZXH8P1
This commit is contained in:
marco370 2025-10-18 07:39:02 +00:00
parent c07441cd72
commit 63ce62ee24

View File

@ -56,6 +56,11 @@ interface GeneralPlanningResponse {
weekEnd: string;
location: string;
days: DayData[];
summary: {
totalGuardsNeeded: number;
totalGuardsAssigned: number;
totalGuardsMissing: number;
};
}
export default function GeneralPlanning() {
@ -184,6 +189,36 @@ export default function GeneralPlanning() {
</CardContent>
</Card>
{/* Summary Guardie Settimana */}
{!isLoading && planningData?.summary && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="h-5 w-5" />
Riepilogo Guardie Settimana
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4">
<div className="text-center p-4 bg-primary/10 rounded-lg border border-primary/20">
<p className="text-sm text-muted-foreground mb-2">Guardie Necessarie</p>
<p className="text-4xl font-bold text-primary">{planningData.summary.totalGuardsNeeded}</p>
</div>
<div className="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/20">
<p className="text-sm text-muted-foreground mb-2">Guardie Pianificate</p>
<p className="text-4xl font-bold text-green-600 dark:text-green-500">{planningData.summary.totalGuardsAssigned}</p>
</div>
<div className={`text-center p-4 rounded-lg border ${planningData.summary.totalGuardsMissing > 0 ? 'bg-destructive/10 border-destructive/20' : 'bg-green-500/10 border-green-500/20'}`}>
<p className="text-sm text-muted-foreground mb-2">Guardie Mancanti</p>
<p className={`text-4xl font-bold ${planningData.summary.totalGuardsMissing > 0 ? 'text-destructive' : 'text-green-600 dark:text-green-500'}`}>
{planningData.summary.totalGuardsMissing}
</p>
</div>
</div>
</CardContent>
</Card>
)}
{/* Tabella Planning */}
<Card>
<CardHeader>