From e3ab9e2b83137f9c0c05aaaf47170fd97dc940ad Mon Sep 17 00:00:00 2001
From: marco370 <48531002-marco370@users.noreply.replit.com>
Date: Fri, 17 Oct 2025 10:25:42 +0000
Subject: [PATCH] Add operational planning view for vehicle and guard
 availability

Implement a new route and page for operational planning, allowing users to select a date and view available vehicles and guards, with sorting and assignment indicators.

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/EEOXc3D
---
 client/src/App.tsx                        |   2 +
 client/src/components/app-sidebar.tsx     |   6 +
 client/src/pages/operational-planning.tsx | 336 ++++++++++++++++++++++
 3 files changed, 344 insertions(+)
 create mode 100644 client/src/pages/operational-planning.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index c66293a..d07a583 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -22,6 +22,7 @@ import Vehicles from "@/pages/vehicles";
 import Parameters from "@/pages/parameters";
 import Services from "@/pages/services";
 import Planning from "@/pages/planning";
+import OperationalPlanning from "@/pages/operational-planning";
 
 function Router() {
   const { isAuthenticated, isLoading } = useAuth();
@@ -40,6 +41,7 @@ function Router() {
           <Route path="/vehicles" component={Vehicles} />
           <Route path="/shifts" component={Shifts} />
           <Route path="/planning" component={Planning} />
+          <Route path="/operational-planning" component={OperationalPlanning} />
           <Route path="/advanced-planning" component={AdvancedPlanning} />
           <Route path="/reports" component={Reports} />
           <Route path="/notifications" component={Notifications} />
diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/app-sidebar.tsx
index 64f5846..ca388bc 100644
--- a/client/src/components/app-sidebar.tsx
+++ b/client/src/components/app-sidebar.tsx
@@ -49,6 +49,12 @@ const menuItems = [
     icon: ClipboardList,
     roles: ["admin", "coordinator"],
   },
+  {
+    title: "Pianificazione Operativa",
+    url: "/operational-planning",
+    icon: Calendar,
+    roles: ["admin", "coordinator"],
+  },
   {
     title: "Gestione Pianificazioni",
     url: "/advanced-planning",
diff --git a/client/src/pages/operational-planning.tsx b/client/src/pages/operational-planning.tsx
new file mode 100644
index 0000000..2359b27
--- /dev/null
+++ b/client/src/pages/operational-planning.tsx
@@ -0,0 +1,336 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Calendar, Car, Users, Clock, AlertCircle, CheckCircle2, ArrowRight } from "lucide-react";
+import { format } from "date-fns";
+import { it } from "date-fns/locale";
+
+interface AssignedShift {
+  id: string;
+  startTime: string;
+  endTime: string;
+  siteId: string;
+}
+
+interface VehicleAvailability {
+  id: string;
+  licensePlate: string;
+  brand: string;
+  model: string;
+  vehicleType: string;
+  location: string;
+  status: string;
+  isAvailable: boolean;
+  assignedShift: AssignedShift | null;
+}
+
+interface GuardAvailability {
+  id: string;
+  badgeNumber: string;
+  firstName: string;
+  lastName: string;
+  location: string;
+  isAvailable: boolean;
+  assignedShift: AssignedShift | null;
+  availability: {
+    weeklyHours: number;
+    remainingWeeklyHours: number;
+    remainingMonthlyHours: number;
+    consecutiveDaysWorked: number;
+  };
+}
+
+interface AvailabilityData {
+  date: string;
+  vehicles: VehicleAvailability[];
+  guards: GuardAvailability[];
+}
+
+export default function OperationalPlanning() {
+  const [selectedDate, setSelectedDate] = useState<string>(
+    format(new Date(), "yyyy-MM-dd")
+  );
+
+  const { data, isLoading, refetch } = useQuery<AvailabilityData>({
+    queryKey: ["/api/operational-planning/availability", selectedDate],
+    enabled: !!selectedDate,
+  });
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedDate(e.target.value);
+  };
+
+  const availableVehicles = data?.vehicles.filter((v) => v.isAvailable) || [];
+  const unavailableVehicles = data?.vehicles.filter((v) => !v.isAvailable) || [];
+  const availableGuards = data?.guards.filter((g) => g.isAvailable) || [];
+  const unavailableGuards = data?.guards.filter((g) => !g.isAvailable) || [];
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold flex items-center gap-2">
+            <Calendar className="h-8 w-8" />
+            Pianificazione Operativa
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Visualizza disponibilità automezzi e agenti per data
+          </p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar className="h-5 w-5" />
+            Seleziona Data
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-4 items-end">
+            <div className="flex-1 max-w-xs">
+              <Label htmlFor="planning-date">Data</Label>
+              <Input
+                id="planning-date"
+                data-testid="input-planning-date"
+                type="date"
+                value={selectedDate}
+                onChange={handleDateChange}
+                className="mt-1"
+              />
+            </div>
+            <Button 
+              onClick={() => refetch()}
+              data-testid="button-refresh-availability"
+            >
+              Aggiorna Disponibilità
+            </Button>
+          </div>
+          {data && (
+            <p className="text-sm text-muted-foreground mt-4">
+              Visualizzando disponibilità per: {format(new Date(selectedDate), "dd MMMM yyyy", { locale: it })}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Veicoli */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Car className="h-5 w-5" />
+              Automezzi Disponibili
+              <Badge variant="secondary" className="ml-auto">
+                {availableVehicles.length}/{data?.vehicles.length || 0}
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {isLoading ? (
+              <>
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-20 w-full" />
+              </>
+            ) : (
+              <>
+                {/* Veicoli disponibili */}
+                {availableVehicles.length > 0 ? (
+                  availableVehicles.map((vehicle) => (
+                    <Card key={vehicle.id} className="bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800">
+                      <CardContent className="p-4">
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <CheckCircle2 className="h-4 w-4 text-green-600" />
+                              <h4 className="font-semibold">{vehicle.licensePlate}</h4>
+                              <Badge variant="outline" className="text-xs">
+                                {vehicle.location}
+                              </Badge>
+                            </div>
+                            <p className="text-sm text-muted-foreground mt-1">
+                              {vehicle.brand} {vehicle.model} - {vehicle.vehicleType}
+                            </p>
+                          </div>
+                          <Button 
+                            size="sm" 
+                            data-testid={`button-assign-vehicle-${vehicle.id}`}
+                            className="ml-2"
+                          >
+                            <ArrowRight className="h-4 w-4 mr-1" />
+                            Assegna
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+                ) : (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    Nessun veicolo disponibile
+                  </p>
+                )}
+
+                {/* Veicoli non disponibili */}
+                {unavailableVehicles.length > 0 && (
+                  <>
+                    <div className="pt-3 border-t">
+                      <h4 className="text-sm font-medium text-muted-foreground mb-3">Non Disponibili</h4>
+                    </div>
+                    {unavailableVehicles.map((vehicle) => (
+                      <Card key={vehicle.id} className="bg-gray-50 dark:bg-gray-900/20">
+                        <CardContent className="p-4">
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <AlertCircle className="h-4 w-4 text-orange-600" />
+                                <h4 className="font-semibold">{vehicle.licensePlate}</h4>
+                                <Badge variant="outline" className="text-xs">
+                                  {vehicle.location}
+                                </Badge>
+                              </div>
+                              <p className="text-sm text-muted-foreground mt-1">
+                                {vehicle.brand} {vehicle.model}
+                              </p>
+                              {vehicle.assignedShift && (
+                                <div className="flex items-center gap-1 mt-2 text-xs text-orange-600">
+                                  <Clock className="h-3 w-3" />
+                                  <span>
+                                    Assegnato: {format(new Date(vehicle.assignedShift.startTime), "HH:mm")} - 
+                                    {format(new Date(vehicle.assignedShift.endTime), "HH:mm")}
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Agenti */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Users className="h-5 w-5" />
+              Agenti Disponibili
+              <Badge variant="secondary" className="ml-auto">
+                {availableGuards.length}/{data?.guards.length || 0}
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {isLoading ? (
+              <>
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-20 w-full" />
+              </>
+            ) : (
+              <>
+                {/* Agenti disponibili */}
+                {availableGuards.length > 0 ? (
+                  availableGuards.map((guard) => (
+                    <Card key={guard.id} className="bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800">
+                      <CardContent className="p-4">
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <CheckCircle2 className="h-4 w-4 text-green-600" />
+                              <h4 className="font-semibold">
+                                {guard.firstName} {guard.lastName}
+                              </h4>
+                              <Badge variant="outline" className="text-xs">
+                                {guard.badgeNumber}
+                              </Badge>
+                            </div>
+                            <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+                              <span className="flex items-center gap-1">
+                                <Clock className="h-3 w-3" />
+                                {guard.availability.weeklyHours.toFixed(1)}h questa settimana
+                              </span>
+                              <span>
+                                Residuo: {guard.availability.remainingWeeklyHours.toFixed(1)}h
+                              </span>
+                            </div>
+                            {guard.availability.consecutiveDaysWorked > 0 && (
+                              <p className="text-xs text-orange-600 mt-1">
+                                {guard.availability.consecutiveDaysWorked} giorni consecutivi
+                              </p>
+                            )}
+                          </div>
+                          <Button 
+                            size="sm" 
+                            data-testid={`button-assign-guard-${guard.id}`}
+                            className="ml-2"
+                          >
+                            <ArrowRight className="h-4 w-4 mr-1" />
+                            Assegna
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+                ) : (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    Nessun agente disponibile
+                  </p>
+                )}
+
+                {/* Agenti non disponibili */}
+                {unavailableGuards.length > 0 && (
+                  <>
+                    <div className="pt-3 border-t">
+                      <h4 className="text-sm font-medium text-muted-foreground mb-3">Non Disponibili</h4>
+                    </div>
+                    {unavailableGuards.map((guard) => (
+                      <Card key={guard.id} className="bg-gray-50 dark:bg-gray-900/20">
+                        <CardContent className="p-4">
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <AlertCircle className="h-4 w-4 text-orange-600" />
+                                <h4 className="font-semibold">
+                                  {guard.firstName} {guard.lastName}
+                                </h4>
+                                <Badge variant="outline" className="text-xs">
+                                  {guard.badgeNumber}
+                                </Badge>
+                              </div>
+                              {guard.assignedShift && (
+                                <div className="flex items-center gap-1 mt-2 text-xs text-orange-600">
+                                  <Clock className="h-3 w-3" />
+                                  <span>
+                                    Assegnato: {format(new Date(guard.assignedShift.startTime), "HH:mm")} - 
+                                    {format(new Date(guard.assignedShift.endTime), "HH:mm")}
+                                  </span>
+                                </div>
+                              )}
+                              <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                                <span>{guard.availability.weeklyHours.toFixed(1)}h settimana</span>
+                              </div>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}