Add ability to view and edit shift details for each location

Integrates a dialog modal for detailed shift information, enabling navigation to operational planning and allowing users to view and potentially edit shift assignments.

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

@@ -2,12 +2,21 @@ import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { format, startOfWeek, addWeeks } from "date-fns";
 import { it } from "date-fns/locale";
+import { useLocation } from "wouter";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { ChevronLeft, ChevronRight, Calendar, MapPin, Users, AlertTriangle, Car } from "lucide-react";
+import { ChevronLeft, ChevronRight, Calendar, MapPin, Users, AlertTriangle, Car, Edit } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 interface GuardWithHours {
   guardId: string;
@@ -50,8 +59,10 @@ interface GeneralPlanningResponse {
 }
 
 export default function GeneralPlanning() {
+  const [, navigate] = useLocation();
   const [selectedLocation, setSelectedLocation] = useState<string>("roccapiemonte");
   const [weekStart, setWeekStart] = useState<Date>(() => startOfWeek(new Date(), { weekStartsOn: 1 }));
+  const [selectedCell, setSelectedCell] = useState<{ siteId: string; siteName: string; date: string; data: SiteData } | null>(null);
 
   // Query per dati planning settimanale
   const { data: planningData, isLoading } = useQuery<GeneralPlanningResponse>({
@@ -86,6 +97,19 @@ export default function GeneralPlanning() {
     new Map(allSites.map(site => [site.siteId, site])).values()
   );
 
+  // Handler per aprire dialog cella
+  const handleCellClick = (siteId: string, siteName: string, date: string, data: SiteData) => {
+    setSelectedCell({ siteId, siteName, date, data });
+  };
+
+  // Naviga a pianificazione operativa con parametri
+  const navigateToOperationalPlanning = () => {
+    if (selectedCell) {
+      // Encode parameters nella URL
+      navigate(`/operational-planning?date=${selectedCell.date}&location=${selectedLocation}`);
+    }
+  };
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -219,6 +243,7 @@ export default function GeneralPlanning() {
                             key={day.date}
                             className="p-2 border-r hover:bg-accent/5 cursor-pointer"
                             data-testid={`cell-${site.siteId}-${day.date}`}
+                            onClick={() => daySiteData && handleCellClick(site.siteId, site.siteName, day.date, daySiteData)}
                           >
                             {daySiteData && daySiteData.shiftsCount > 0 ? (
                               <div className="space-y-2 text-xs">
@@ -298,6 +323,111 @@ export default function GeneralPlanning() {
           )}
         </CardContent>
       </Card>
+
+      {/* Dialog dettagli cella */}
+      <Dialog open={!!selectedCell} onOpenChange={() => setSelectedCell(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Calendar className="h-5 w-5" />
+              {selectedCell?.siteName}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedCell && format(new Date(selectedCell.date), "EEEE dd MMMM yyyy", { locale: it })}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedCell && (
+            <div className="space-y-4">
+              {/* Info turni */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">Turni Pianificati</p>
+                  <p className="text-2xl font-bold">{selectedCell.data.shiftsCount}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Ore Totali</p>
+                  <p className="text-2xl font-bold">{selectedCell.data.totalShiftHours}h</p>
+                </div>
+              </div>
+
+              {/* Guardie assegnate */}
+              {selectedCell.data.guards.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 text-sm font-semibold">
+                    <Users className="h-4 w-4" />
+                    Guardie Assegnate ({selectedCell.data.guards.length})
+                  </div>
+                  <div className="grid gap-2">
+                    {selectedCell.data.guards.map((guard, idx) => (
+                      <div key={idx} className="flex items-center justify-between p-2 bg-accent/10 rounded-md">
+                        <div>
+                          <p className="font-medium">{guard.guardName}</p>
+                          <p className="text-xs text-muted-foreground">{guard.badgeNumber}</p>
+                        </div>
+                        <Badge variant="secondary">{guard.hours}h</Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Veicoli */}
+              {selectedCell.data.vehicles.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 text-sm font-semibold">
+                    <Car className="h-4 w-4" />
+                    Veicoli Assegnati ({selectedCell.data.vehicles.length})
+                  </div>
+                  <div className="grid gap-2">
+                    {selectedCell.data.vehicles.map((vehicle, idx) => (
+                      <div key={idx} className="flex items-center gap-2 p-2 bg-accent/10 rounded-md">
+                        <p className="font-medium">{vehicle.licensePlate}</p>
+                        <p className="text-sm text-muted-foreground">
+                          {vehicle.brand} {vehicle.model}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Guardie mancanti */}
+              {selectedCell.data.missingGuards > 0 && (
+                <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md">
+                  <div className="flex items-center gap-2 text-destructive font-semibold mb-2">
+                    <AlertTriangle className="h-5 w-5" />
+                    Attenzione: Guardie Mancanti
+                  </div>
+                  <p className="text-sm">
+                    Servono ancora <span className="font-bold">{selectedCell.data.missingGuards}</span>{" "}
+                    {selectedCell.data.missingGuards === 1 ? "guardia" : "guardie"} per coprire completamente il servizio
+                    (calcolato su {selectedCell.data.totalShiftHours}h con max 9h per guardia e {selectedCell.data.minGuards} {selectedCell.data.minGuards === 1 ? "guardia minima" : "guardie minime"} contemporanee)
+                  </p>
+                </div>
+              )}
+
+              {/* No turni */}
+              {selectedCell.data.shiftsCount === 0 && (
+                <div className="text-center py-8 text-muted-foreground">
+                  <Calendar className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Nessun turno pianificato per questa data</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSelectedCell(null)}>
+              Chiudi
+            </Button>
+            <Button onClick={navigateToOperationalPlanning} data-testid="button-edit-planning">
+              <Edit className="h-4 w-4 mr-2" />
+              Modifica in Pianificazione Operativa
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }