Add functionality to assign and remove guards from shifts

Implement API endpoints and UI components for managing shift assignments, including guard certifications and a new assignment removal mutation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 99f0fce6-9386-489a-9632-1d81223cab44
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/99f0fce6-9386-489a-9632-1d81223cab44/9lvKVew

.replit

@@ -18,6 +18,10 @@ externalPort = 80
 localPort = 33035
 externalPort = 3001
 
+[[ports]]
+localPort = 38805
+externalPort = 3002
+
 [[ports]]
 localPort = 41343
 externalPort = 3000

client/src/pages/shifts.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { ShiftWithDetails, InsertShift, Site, Guard } from "@shared/schema";
+import { ShiftWithDetails, InsertShift, Site, GuardWithCertifications } from "@shared/schema";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
@@ -9,17 +9,20 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { insertShiftFormSchema } from "@shared/schema";
-import { Plus, Calendar, MapPin, Users, Clock } from "lucide-react";
+import { Plus, Calendar, MapPin, Users, Clock, UserPlus, X, Shield, Car, Heart, Flame } from "lucide-react";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import { StatusBadge } from "@/components/status-badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { format } from "date-fns";
 import { it } from "date-fns/locale";
+import { Badge } from "@/components/ui/badge";
 
 export default function Shifts() {
   const { toast } = useToast();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedShift, setSelectedShift] = useState<ShiftWithDetails | null>(null);
+  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false);
 
   const { data: shifts, isLoading: shiftsLoading } = useQuery<ShiftWithDetails[]>({
     queryKey: ["/api/shifts"],
@@ -29,6 +32,10 @@ export default function Shifts() {
     queryKey: ["/api/sites"],
   });
 
+  const { data: guards } = useQuery<GuardWithCertifications[]>({
+    queryKey: ["/api/guards"],
+  });
+
   const form = useForm({
     resolver: zodResolver(insertShiftFormSchema),
     defaultValues: {
@@ -65,6 +72,89 @@ export default function Shifts() {
     createMutation.mutate(data);
   };
 
+  const assignGuardMutation = useMutation({
+    mutationFn: async ({ shiftId, guardId }: { shiftId: string; guardId: string }) => {
+      return await apiRequest("POST", "/api/shift-assignments", { shiftId, guardId });
+    },
+    onSuccess: async () => {
+      // Invalidate and wait for refetch to complete
+      await queryClient.refetchQueries({ queryKey: ["/api/shifts"] });
+      // Now get the fresh data
+      const updatedShifts = queryClient.getQueryData<ShiftWithDetails[]>(["/api/shifts"]);
+      if (selectedShift && updatedShifts) {
+        const updatedShift = updatedShifts.find(s => s.id === selectedShift.id);
+        if (updatedShift) {
+          setSelectedShift(updatedShift);
+        }
+      }
+      toast({
+        title: "Guardia assegnata",
+        description: "La guardia è stata assegnata al turno con successo",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Errore",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const removeAssignmentMutation = useMutation({
+    mutationFn: async (assignmentId: string) => {
+      return await apiRequest("DELETE", `/api/shift-assignments/${assignmentId}`);
+    },
+    onSuccess: async () => {
+      // Invalidate and wait for refetch to complete
+      await queryClient.refetchQueries({ queryKey: ["/api/shifts"] });
+      // Now get the fresh data
+      const updatedShifts = queryClient.getQueryData<ShiftWithDetails[]>(["/api/shifts"]);
+      if (selectedShift && updatedShifts) {
+        const updatedShift = updatedShifts.find(s => s.id === selectedShift.id);
+        if (updatedShift) {
+          setSelectedShift(updatedShift);
+        }
+      }
+      toast({
+        title: "Assegnazione rimossa",
+        description: "La guardia è stata rimossa dal turno",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Errore",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleAssignGuard = (guardId: string) => {
+    if (selectedShift) {
+      assignGuardMutation.mutate({ shiftId: selectedShift.id, guardId });
+    }
+  };
+
+  const handleRemoveAssignment = (assignmentId: string) => {
+    removeAssignmentMutation.mutate(assignmentId);
+  };
+
+  const isGuardAssigned = (guardId: string) => {
+    return selectedShift?.assignments.some(a => a.guardId === guardId) || false;
+  };
+
+  const canGuardBeAssigned = (guard: GuardWithCertifications) => {
+    if (!selectedShift) return false;
+    const site = sites?.find(s => s.id === selectedShift.siteId);
+    if (!site) return true;
+
+    if (site.requiresArmed && !guard.isArmed) return false;
+    if (site.requiresDriverLicense && !guard.hasDriverLicense) return false;
+
+    return true;
+  };
+
   const getStatusLabel = (status: string) => {
     const labels: Record<string, string> = {
       planned: "Pianificato",
@@ -231,6 +321,7 @@ export default function Shifts() {
                 </div>
               </CardHeader>
               <CardContent>
+                <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2 text-sm text-muted-foreground">
                     <Users className="h-4 w-4" />
                     <span>
@@ -239,14 +330,41 @@ export default function Shifts() {
                         : "Nessuna guardia assegnata"}
                     </span>
                   </div>
+                  {shift.status === "planned" && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setSelectedShift(shift);
+                        setIsAssignDialogOpen(true);
+                      }}
+                      data-testid={`button-assign-guards-${shift.id}`}
+                    >
+                      <UserPlus className="h-4 w-4 mr-2" />
+                      Assegna Guardie
+                    </Button>
+                  )}
+                </div>
                 {shift.assignments.length > 0 && (
                   <div className="mt-3 flex flex-wrap gap-2">
                     {shift.assignments.map((assignment) => (
                       <div
                         key={assignment.id}
-                        className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded-md"
+                        className="flex items-center gap-1 text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded-md"
+                        data-testid={`assignment-${assignment.id}`}
                       >
+                        <span>
                           {assignment.guard.user?.firstName} {assignment.guard.user?.lastName}
+                        </span>
+                        {shift.status === "planned" && (
+                          <button
+                            onClick={() => handleRemoveAssignment(assignment.id)}
+                            className="ml-1 hover:text-destructive"
+                            data-testid={`button-remove-assignment-${assignment.id}`}
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        )}
                       </div>
                     ))}
                   </div>
@@ -266,6 +384,118 @@ export default function Shifts() {
           </CardContent>
         </Card>
       )}
+
+      {/* Assignment Dialog */}
+      <Dialog open={isAssignDialogOpen} onOpenChange={setIsAssignDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Assegna Guardie al Turno</DialogTitle>
+            <DialogDescription>
+              {selectedShift && (
+                <>
+                  {selectedShift.site.name} -{" "}
+                  {format(new Date(selectedShift.startTime), "dd/MM/yyyy HH:mm", { locale: it })}
+                </>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedShift && (
+            <div className="space-y-4">
+              {/* Site Requirements */}
+              <div className="p-4 bg-muted rounded-lg">
+                <h3 className="font-medium mb-2">Requisiti Sito</h3>
+                <div className="flex flex-wrap gap-2">
+                  {selectedShift.site.requiresArmed && (
+                    <Badge variant="outline">
+                      <Shield className="h-3 w-3 mr-1" />
+                      Armato richiesto
+                    </Badge>
+                  )}
+                  {selectedShift.site.requiresDriverLicense && (
+                    <Badge variant="outline">
+                      <Car className="h-3 w-3 mr-1" />
+                      Patente richiesta
+                    </Badge>
+                  )}
+                  <Badge variant="outline">
+                    Min. {selectedShift.site.minGuards} guardie
+                  </Badge>
+                </div>
+              </div>
+
+              {/* Guards List */}
+              <div className="space-y-2">
+                <h3 className="font-medium">Guardie Disponibili</h3>
+                {guards && guards.length > 0 ? (
+                  <div className="space-y-2">
+                    {guards.map((guard) => {
+                      const assigned = isGuardAssigned(guard.id);
+                      const canAssign = canGuardBeAssigned(guard);
+
+                      return (
+                        <div
+                          key={guard.id}
+                          className="flex items-center justify-between p-3 border rounded-lg"
+                          data-testid={`guard-option-${guard.id}`}
+                        >
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <p className="font-medium">
+                                {guard.user?.firstName} {guard.user?.lastName}
+                              </p>
+                              <span className="text-xs text-muted-foreground font-mono">
+                                #{guard.badgeNumber}
+                              </span>
+                            </div>
+                            <div className="flex gap-1 mt-1">
+                              {guard.isArmed && (
+                                <Badge variant="secondary" className="text-xs">
+                                  <Shield className="h-3 w-3 mr-1" />
+                                  Armato
+                                </Badge>
+                              )}
+                              {guard.hasDriverLicense && (
+                                <Badge variant="secondary" className="text-xs">
+                                  <Car className="h-3 w-3 mr-1" />
+                                  Patente
+                                </Badge>
+                              )}
+                              {guard.hasFirstAid && (
+                                <Badge variant="secondary" className="text-xs">
+                                  <Heart className="h-3 w-3 mr-1" />
+                                  Primo Soccorso
+                                </Badge>
+                              )}
+                              {guard.hasFireSafety && (
+                                <Badge variant="secondary" className="text-xs">
+                                  <Flame className="h-3 w-3 mr-1" />
+                                  Antincendio
+                                </Badge>
+                              )}
+                            </div>
+                          </div>
+                          <Button
+                            size="sm"
+                            variant={assigned ? "secondary" : "default"}
+                            onClick={() => handleAssignGuard(guard.id)}
+                            disabled={assigned || !canAssign}
+                            data-testid={`button-assign-guard-${guard.id}`}
+                          >
+                            {assigned ? "Assegnato" : canAssign ? "Assegna" : "Non idoneo"}
+                          </Button>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">Nessuna guardia disponibile</p>
+                )}
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

server/routes.ts

@@ -247,6 +247,16 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  app.delete("/api/shift-assignments/:id", isAuthenticated, async (req, res) => {
+    try {
+      await storage.deleteShiftAssignment(req.params.id);
+      res.json({ success: true });
+    } catch (error) {
+      console.error("Error deleting shift assignment:", error);
+      res.status(500).json({ message: "Failed to delete shift assignment" });
+    }
+  });
+
   // ============= NOTIFICATION ROUTES =============
   app.get("/api/notifications", isAuthenticated, async (req: any, res) => {
     try {

server/storage.ts

@@ -207,6 +207,12 @@ export class DatabaseStorage implements IStorage {
     return newAssignment;
   }
 
+  async deleteShiftAssignment(id: string): Promise<void> {
+    await db
+      .delete(shiftAssignments)
+      .where(eq(shiftAssignments.id, id));
+  }
+
   // Notification operations
   async getNotificationsByUser(userId: string): Promise<Notification[]> {
     return await db