Add a comprehensive general planning view with missing guard calculations

Adds a new client-side route and component for general planning, integrates it into the sidebar navigation, and updates server-side routes to fetch and process shift, guard, and vehicle assignment data for weekly planning views.

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

.replit

@@ -31,6 +31,10 @@ externalPort = 3002
 localPort = 43267
 externalPort = 3003
 
+[[ports]]
+localPort = 44791
+externalPort = 4200
+
 [env]
 PORT = "5000"
 

client/src/App.tsx

@@ -23,6 +23,7 @@ import Parameters from "@/pages/parameters";
 import Services from "@/pages/services";
 import Planning from "@/pages/planning";
 import OperationalPlanning from "@/pages/operational-planning";
+import GeneralPlanning from "@/pages/general-planning";
 
 function Router() {
   const { isAuthenticated, isLoading } = useAuth();
@@ -42,6 +43,7 @@ function Router() {
           <Route path="/shifts" component={Shifts} />
           <Route path="/planning" component={Planning} />
           <Route path="/operational-planning" component={OperationalPlanning} />
+          <Route path="/general-planning" component={GeneralPlanning} />
           <Route path="/advanced-planning" component={AdvancedPlanning} />
           <Route path="/reports" component={Reports} />
           <Route path="/notifications" component={Notifications} />

client/src/components/app-sidebar.tsx

@@ -55,6 +55,12 @@ const menuItems = [
     icon: Calendar,
     roles: ["admin", "coordinator"],
   },
+  {
+    title: "Planning Generale",
+    url: "/general-planning",
+    icon: BarChart3,
+    roles: ["admin", "coordinator"],
+  },
   {
     title: "Gestione Pianificazioni",
     url: "/advanced-planning",

client/src/pages/general-planning.tsx

@@ -0,0 +1,303 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { format, startOfWeek, addWeeks } from "date-fns";
+import { it } from "date-fns/locale";
+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 { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface GuardWithHours {
+  guardId: string;
+  guardName: string;
+  badgeNumber: string;
+  hours: number;
+}
+
+interface Vehicle {
+  vehicleId: string;
+  licensePlate: string;
+  brand: string;
+  model: string;
+}
+
+interface SiteData {
+  siteId: string;
+  siteName: string;
+  serviceType: string;
+  minGuards: number;
+  guards: GuardWithHours[];
+  vehicles: Vehicle[];
+  totalShiftHours: number;
+  guardsAssigned: number;
+  missingGuards: number;
+  shiftsCount: number;
+}
+
+interface DayData {
+  date: string;
+  dayOfWeek: string;
+  sites: SiteData[];
+}
+
+interface GeneralPlanningResponse {
+  weekStart: string;
+  weekEnd: string;
+  location: string;
+  days: DayData[];
+}
+
+export default function GeneralPlanning() {
+  const [selectedLocation, setSelectedLocation] = useState<string>("roccapiemonte");
+  const [weekStart, setWeekStart] = useState<Date>(() => startOfWeek(new Date(), { weekStartsOn: 1 }));
+
+  // Query per dati planning settimanale
+  const { data: planningData, isLoading } = useQuery<GeneralPlanningResponse>({
+    queryKey: ["/api/general-planning", format(weekStart, "yyyy-MM-dd"), selectedLocation],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/general-planning?weekStart=${format(weekStart, "yyyy-MM-dd")}&location=${selectedLocation}`
+      );
+      if (!response.ok) throw new Error("Failed to fetch general planning");
+      return response.json();
+    },
+  });
+
+  // Navigazione settimana
+  const goToPreviousWeek = () => setWeekStart(addWeeks(weekStart, -1));
+  const goToNextWeek = () => setWeekStart(addWeeks(weekStart, 1));
+  const goToCurrentWeek = () => setWeekStart(startOfWeek(new Date(), { weekStartsOn: 1 }));
+
+  // Formatta nome sede
+  const formatLocation = (loc: string) => {
+    const locations: Record<string, string> = {
+      roccapiemonte: "Roccapiemonte",
+      milano: "Milano",
+      roma: "Roma",
+    };
+    return locations[loc] || loc;
+  };
+
+  // Raggruppa siti unici da tutti i giorni
+  const allSites = planningData?.days.flatMap(day => day.sites) || [];
+  const uniqueSites = Array.from(
+    new Map(allSites.map(site => [site.siteId, site])).values()
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight" data-testid="text-page-title">
+            Planning Generale
+          </h1>
+          <p className="text-muted-foreground">
+            Vista settimanale turni con calcolo automatico guardie mancanti
+          </p>
+        </div>
+      </div>
+
+      {/* Filtri e navigazione */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            {/* Selezione Sede */}
+            <div className="flex items-center gap-2">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <Select value={selectedLocation} onValueChange={setSelectedLocation}>
+                <SelectTrigger className="w-[200px]" data-testid="select-location">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="roccapiemonte">Roccapiemonte</SelectItem>
+                  <SelectItem value="milano">Milano</SelectItem>
+                  <SelectItem value="roma">Roma</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Navigazione settimana */}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={goToPreviousWeek}
+                data-testid="button-previous-week"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              
+              <Button
+                variant="outline"
+                onClick={goToCurrentWeek}
+                data-testid="button-current-week"
+              >
+                <Calendar className="h-4 w-4 mr-2" />
+                Settimana Corrente
+              </Button>
+              
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={goToNextWeek}
+                data-testid="button-next-week"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* Info settimana */}
+            {planningData && (
+              <div className="text-sm text-muted-foreground">
+                {format(new Date(planningData.weekStart), "dd MMM", { locale: it })} -{" "}
+                {format(new Date(planningData.weekEnd), "dd MMM yyyy", { locale: it })}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabella Planning */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar className="h-5 w-5" />
+            Planning Settimanale - {formatLocation(selectedLocation)}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="space-y-4">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-32 w-full" />
+              <Skeleton className="h-32 w-full" />
+            </div>
+          ) : planningData ? (
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr className="border-b">
+                    <th className="sticky left-0 bg-background p-3 text-left font-semibold min-w-[200px] border-r">
+                      Sito
+                    </th>
+                    {planningData.days.map((day) => (
+                      <th
+                        key={day.date}
+                        className="p-3 text-center font-semibold min-w-[200px] border-r"
+                      >
+                        <div className="flex flex-col">
+                          <span className="text-sm capitalize">
+                            {format(new Date(day.date), "EEEE", { locale: it })}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {format(new Date(day.date), "dd/MM", { locale: it })}
+                          </span>
+                        </div>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {uniqueSites.map((site) => (
+                    <tr key={site.siteId} className="border-b hover-elevate">
+                      <td className="sticky left-0 bg-background p-3 border-r font-medium">
+                        <div className="flex flex-col gap-1">
+                          <span className="text-sm">{site.siteName}</span>
+                          <Badge variant="outline" className="text-xs w-fit">
+                            {site.serviceType}
+                          </Badge>
+                        </div>
+                      </td>
+                      {planningData.days.map((day) => {
+                        const daySiteData = day.sites.find((s) => s.siteId === site.siteId);
+                        
+                        return (
+                          <td
+                            key={day.date}
+                            className="p-2 border-r hover:bg-accent/5 cursor-pointer"
+                            data-testid={`cell-${site.siteId}-${day.date}`}
+                          >
+                            {daySiteData && daySiteData.shiftsCount > 0 ? (
+                              <div className="space-y-2 text-xs">
+                                {/* Guardie assegnate */}
+                                {daySiteData.guards.length > 0 && (
+                                  <div className="space-y-1">
+                                    <div className="flex items-center gap-1 text-muted-foreground mb-1">
+                                      <Users className="h-3 w-3" />
+                                      <span className="font-medium">Guardie:</span>
+                                    </div>
+                                    {daySiteData.guards.map((guard, idx) => (
+                                      <div key={idx} className="flex items-center justify-between gap-1 pl-4">
+                                        <span className="truncate">{guard.badgeNumber}</span>
+                                        <Badge variant="secondary" className="text-xs">
+                                          {guard.hours}h
+                                        </Badge>
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+
+                                {/* Veicoli */}
+                                {daySiteData.vehicles.length > 0 && (
+                                  <div className="space-y-1">
+                                    <div className="flex items-center gap-1 text-muted-foreground mb-1">
+                                      <Car className="h-3 w-3" />
+                                      <span className="font-medium">Veicoli:</span>
+                                    </div>
+                                    {daySiteData.vehicles.map((vehicle, idx) => (
+                                      <div key={idx} className="pl-4 truncate">
+                                        {vehicle.licensePlate}
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+
+                                {/* Guardie mancanti */}
+                                {daySiteData.missingGuards > 0 && (
+                                  <div className="pt-2 border-t">
+                                    <Badge variant="destructive" className="w-full justify-center gap-1">
+                                      <AlertTriangle className="h-3 w-3" />
+                                      Mancano {daySiteData.missingGuards} {daySiteData.missingGuards === 1 ? "guardia" : "guardie"}
+                                    </Badge>
+                                  </div>
+                                )}
+
+                                {/* Info copertura */}
+                                <div className="text-xs text-muted-foreground pt-1 border-t">
+                                  <div>Turni: {daySiteData.shiftsCount}</div>
+                                  <div>Tot. ore: {daySiteData.totalShiftHours}h</div>
+                                </div>
+                              </div>
+                            ) : (
+                              <div className="flex items-center justify-center h-full text-muted-foreground">
+                                <span className="text-xs">-</span>
+                              </div>
+                            )}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+              {uniqueSites.length === 0 && (
+                <div className="text-center py-12 text-muted-foreground">
+                  <Calendar className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Nessun sito attivo per la sede selezionata</p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center py-12 text-muted-foreground">
+              <p>Errore nel caricamento dei dati</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

server/routes.ts

@@ -866,7 +866,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
         );
       
       // Ottieni tutte le assegnazioni dei turni della settimana
-      const shiftIds = weekShifts.map(s => s.shift.id);
+      const shiftIds = weekShifts.map((s: any) => s.shift.id);
       
       const assignments = shiftIds.length > 0 ? await db
         .select({
@@ -878,19 +878,19 @@ export async function registerRoutes(app: Express): Promise<Server> {
         .innerJoin(guards, eq(shiftAssignments.guardId, guards.id))
         .innerJoin(shifts, eq(shiftAssignments.shiftId, shifts.id))
         .where(
-          sql`${shiftAssignments.shiftId} IN (${sql.join(shiftIds.map(id => sql`${id}`), sql`, `)})`
+          sql`${shiftAssignments.shiftId} IN (${sql.join(shiftIds.map((id: string) => sql`${id}`), sql`, `)})`
         ) : [];
       
       // Ottieni veicoli assegnati
       const vehicleAssignments = weekShifts
-        .filter(s => s.shift.vehicleId)
+        .filter((s: any) => s.shift.vehicleId)
-        .map(s => s.shift.vehicleId);
+        .map((s: any) => s.shift.vehicleId);
       
       const assignedVehicles = vehicleAssignments.length > 0 ? await db
         .select()
         .from(vehicles)
         .where(
-          sql`${vehicles.id} IN (${sql.join(vehicleAssignments.map(id => sql`${id}`), sql`, `)})`
+          sql`${vehicles.id} IN (${sql.join(vehicleAssignments.map((id: string) => sql`${id}`), sql`, `)})`
         ) : [];
       
       // Costruisci struttura dati per 7 giorni
@@ -906,21 +906,21 @@ export async function registerRoutes(app: Express): Promise<Server> {
         const dayEndTimestamp = new Date(dayStr);
         dayEndTimestamp.setHours(23, 59, 59, 999);
         
-        const sitesData = activeSites.map(({ sites: site, service_types: serviceType }) => {
+        const sitesData = activeSites.map(({ sites: site, service_types: serviceType }: any) => {
           // Trova turni del giorno per questo sito
-          const dayShifts = weekShifts.filter(s => 
+          const dayShifts = weekShifts.filter((s: any) => 
             s.shift.siteId === site.id && 
             s.shift.startTime >= dayStartTimestamp &&
             s.shift.startTime <= dayEndTimestamp
           );
           
           // Ottieni assegnazioni guardie per i turni del giorno
-          const dayAssignments = assignments.filter(a => 
+          const dayAssignments = assignments.filter((a: any) => 
-            dayShifts.some(ds => ds.shift.id === a.shift.id)
+            dayShifts.some((ds: any) => ds.shift.id === a.shift.id)
           );
           
           // Calcola ore per ogni guardia
-          const guardsWithHours = dayAssignments.map(a => {
+          const guardsWithHours = dayAssignments.map((a: any) => {
             const shiftStart = new Date(a.shift.startTime);
             const shiftEnd = new Date(a.shift.endTime);
             const hours = differenceInHours(shiftEnd, shiftStart);
@@ -935,9 +935,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
           
           // Veicoli assegnati ai turni del giorno
           const dayVehicles = dayShifts
-            .filter(ds => ds.shift.vehicleId)
+            .filter((ds: any) => ds.shift.vehicleId)
-            .map(ds => {
+            .map((ds: any) => {
-              const vehicle = assignedVehicles.find(v => v.id === ds.shift.vehicleId);
+              const vehicle = assignedVehicles.find((v: any) => v.id === ds.shift.vehicleId);
               return vehicle ? {
                 vehicleId: vehicle.id,
                 licensePlate: vehicle.licensePlate,
@@ -953,7 +953,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
           const minGuardie = site.minGuards || 1;
           
           // Somma ore totali dei turni del giorno
-          const totalShiftHours = dayShifts.reduce((sum, ds) => {
+          const totalShiftHours = dayShifts.reduce((sum: number, ds: any) => {
             const start = new Date(ds.shift.startTime);
             const end = new Date(ds.shift.endTime);
             return sum + differenceInHours(end, start);
@@ -966,7 +966,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
           const totalGuardsNeeded = slotsNeeded * minGuardie;
           
           // Guardie uniche assegnate (conta ogni guardia una volta anche se ha più turni)
-          const uniqueGuardsAssigned = new Set(guardsWithHours.map(g => g.guardId)).size;
+          const uniqueGuardsAssigned = new Set(guardsWithHours.map((g: any) => g.guardId)).size;
           
           // Guardie mancanti
           const missingGuards = Math.max(0, totalGuardsNeeded - uniqueGuardsAssigned);