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

client/src/pages/general-planning.tsx

@@ -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>