Add ability to plan operational shifts with resource assignments
Implement a new feature for operational planning that allows users to select sites, assign guards and vehicles, and create shifts with specific start and end times. This includes updates to the UI for displaying uncovered sites and resources, as well as backend logic for creating 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/sshIJbn
This commit is contained in:
marco370
parent
283b24bcb6
commit
72b7dfe74d
8
.replit
8
.replit
@ -19,6 +19,10 @@ externalPort = 80
|
||||
localPort = 33035
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 36921
|
||||
externalPort = 4200
|
||||
|
||||
[[ports]]
|
||||
localPort = 41343
|
||||
externalPort = 3000
|
||||
@ -31,10 +35,6 @@ externalPort = 3002
|
||||
localPort = 43267
|
||||
externalPort = 3003
|
||||
|
||||
[[ports]]
|
||||
localPort = 44165
|
||||
externalPort = 4200
|
||||
|
||||
[env]
|
||||
PORT = "5000"
|
||||
|
||||
|
||||
@ -1,74 +1,212 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { queryClient, apiRequest } from "@/lib/queryClient";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Calendar, AlertCircle, CheckCircle2, Clock, MapPin, Users, Shield, Car as CarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { it } from "date-fns/locale";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
interface AssignedShift {
|
||||
interface Shift {
|
||||
id: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
siteId: string;
|
||||
assignedGuardsCount: number;
|
||||
requiredGuards: number;
|
||||
isCovered: boolean;
|
||||
isPartial: boolean;
|
||||
}
|
||||
|
||||
interface VehicleAvailability {
|
||||
interface UncoveredSite {
|
||||
id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
location: string;
|
||||
shiftType: string;
|
||||
minGuards: number;
|
||||
requiresArmed: boolean;
|
||||
requiresDriverLicense: boolean;
|
||||
serviceStartTime: string | null;
|
||||
serviceEndTime: string | null;
|
||||
isCovered: boolean;
|
||||
isPartiallyCovered: boolean;
|
||||
totalAssignedGuards: number;
|
||||
requiredGuards: number;
|
||||
shiftsCount: number;
|
||||
shifts: Shift[];
|
||||
}
|
||||
|
||||
interface UncoveredSitesData {
|
||||
date: string;
|
||||
uncoveredSites: UncoveredSite[];
|
||||
totalSites: number;
|
||||
totalUncovered: number;
|
||||
}
|
||||
|
||||
interface Vehicle {
|
||||
id: string;
|
||||
licensePlate: string;
|
||||
brand: string;
|
||||
model: string;
|
||||
vehicleType: string;
|
||||
location: string;
|
||||
status: string;
|
||||
hasDriverLicense?: boolean;
|
||||
isAvailable: boolean;
|
||||
assignedShift: AssignedShift | null;
|
||||
}
|
||||
|
||||
interface GuardAvailability {
|
||||
interface Guard {
|
||||
id: string;
|
||||
badgeNumber: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
userId: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
location: string;
|
||||
isArmed: boolean;
|
||||
hasDriverLicense: boolean;
|
||||
isAvailable: boolean;
|
||||
assignedShift: AssignedShift | null;
|
||||
availability: {
|
||||
weeklyHours: number;
|
||||
remainingWeeklyHours: number;
|
||||
remainingMonthlyHours: number;
|
||||
consecutiveDaysWorked: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface AvailabilityData {
|
||||
interface ResourcesData {
|
||||
date: string;
|
||||
vehicles: VehicleAvailability[];
|
||||
guards: GuardAvailability[];
|
||||
vehicles: Vehicle[];
|
||||
guards: Guard[];
|
||||
}
|
||||
|
||||
export default function OperationalPlanning() {
|
||||
const { toast } = useToast();
|
||||
const [selectedDate, setSelectedDate] = useState<string>(
|
||||
format(new Date(), "yyyy-MM-dd")
|
||||
);
|
||||
const [selectedSite, setSelectedSite] = useState<UncoveredSite | null>(null);
|
||||
const [selectedGuards, setSelectedGuards] = useState<string[]>([]);
|
||||
const [selectedVehicle, setSelectedVehicle] = useState<string | null>(null);
|
||||
const [createShiftDialogOpen, setCreateShiftDialogOpen] = useState(false);
|
||||
|
||||
const { data, isLoading, refetch } = useQuery<AvailabilityData>({
|
||||
queryKey: [`/api/operational-planning/availability?date=${selectedDate}`, selectedDate],
|
||||
// Query per siti non coperti
|
||||
const { data: uncoveredData, isLoading } = useQuery<UncoveredSitesData>({
|
||||
queryKey: [`/api/operational-planning/uncovered-sites?date=${selectedDate}`, selectedDate],
|
||||
enabled: !!selectedDate,
|
||||
});
|
||||
|
||||
// Query per risorse (veicoli e guardie) - solo quando c'è un sito selezionato
|
||||
const { data: resourcesData, isLoading: isLoadingResources } = useQuery<ResourcesData>({
|
||||
queryKey: [`/api/operational-planning/availability?date=${selectedDate}`, selectedDate],
|
||||
enabled: !!selectedDate && !!selectedSite,
|
||||
});
|
||||
|
||||
const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedDate(e.target.value);
|
||||
setSelectedSite(null);
|
||||
setSelectedGuards([]);
|
||||
setSelectedVehicle(null);
|
||||
};
|
||||
|
||||
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) || [];
|
||||
const handleSelectSite = (site: UncoveredSite) => {
|
||||
setSelectedSite(site);
|
||||
setSelectedGuards([]);
|
||||
setSelectedVehicle(null);
|
||||
setCreateShiftDialogOpen(true);
|
||||
};
|
||||
|
||||
const toggleGuardSelection = (guardId: string) => {
|
||||
setSelectedGuards((prev) =>
|
||||
prev.includes(guardId)
|
||||
? prev.filter((id) => id !== guardId)
|
||||
: [...prev, guardId]
|
||||
);
|
||||
};
|
||||
|
||||
// Filtra risorse per requisiti del sito
|
||||
const filteredVehicles = resourcesData?.vehicles.filter((v) => {
|
||||
if (!selectedSite) return false;
|
||||
// Filtra per sede e disponibilità
|
||||
if (v.location !== selectedSite.location) return false;
|
||||
if (!v.isAvailable) return false;
|
||||
return true;
|
||||
}) || [];
|
||||
|
||||
const filteredGuards = resourcesData?.guards.filter((g) => {
|
||||
if (!selectedSite) return false;
|
||||
// Filtra per sede
|
||||
if (g.location !== selectedSite.location) return false;
|
||||
// Filtra per disponibilità
|
||||
if (!g.isAvailable) return false;
|
||||
// Filtra per requisiti
|
||||
if (selectedSite.requiresArmed && !g.isArmed) return false;
|
||||
if (selectedSite.requiresDriverLicense && !g.hasDriverLicense) return false;
|
||||
return true;
|
||||
}) || [];
|
||||
|
||||
// Mutation per creare turno
|
||||
const createShiftMutation = useMutation({
|
||||
mutationFn: async (data: any) => {
|
||||
return apiRequest("POST", "/api/shifts", data);
|
||||
},
|
||||
onSuccess: () => {
|
||||
// Invalida tutte le query che iniziano con /api/operational-planning/uncovered-sites
|
||||
queryClient.invalidateQueries({
|
||||
predicate: (query) => query.queryKey[0]?.toString().startsWith('/api/operational-planning/uncovered-sites') || false
|
||||
});
|
||||
toast({
|
||||
title: "Turno creato",
|
||||
description: "Il turno è stato creato con successo.",
|
||||
});
|
||||
setCreateShiftDialogOpen(false);
|
||||
setSelectedSite(null);
|
||||
setSelectedGuards([]);
|
||||
setSelectedVehicle(null);
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast({
|
||||
title: "Errore",
|
||||
description: error.message || "Impossibile creare il turno.",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleCreateShift = () => {
|
||||
if (!selectedSite) return;
|
||||
|
||||
// Valida che ci siano abbastanza guardie selezionate
|
||||
if (selectedGuards.length < selectedSite.minGuards) {
|
||||
toast({
|
||||
title: "Guardie insufficienti",
|
||||
description: `Seleziona almeno ${selectedSite.minGuards} guardie per questo sito.`,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Qui bisognerà chiedere l'orario del turno
|
||||
// Per ora creiamo un turno di default basato su serviceStartTime/serviceEndTime del sito
|
||||
const today = selectedDate;
|
||||
const startTime = selectedSite.serviceStartTime || "08:00";
|
||||
const endTime = selectedSite.serviceEndTime || "16:00";
|
||||
|
||||
const shiftData = {
|
||||
siteId: selectedSite.id,
|
||||
startTime: new Date(`${today}T${startTime}:00.000Z`),
|
||||
endTime: new Date(`${today}T${endTime}:00.000Z`),
|
||||
status: "planned",
|
||||
vehicleId: selectedVehicle || null,
|
||||
guardIds: selectedGuards,
|
||||
};
|
||||
|
||||
createShiftMutation.mutate(shiftData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
@ -79,7 +217,7 @@ export default function OperationalPlanning() {
|
||||
Pianificazione Operativa
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Visualizza disponibilità automezzi e agenti per data
|
||||
Assegna turni ai siti non coperti
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -104,233 +242,290 @@ export default function OperationalPlanning() {
|
||||
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 })}
|
||||
{uncoveredData && (
|
||||
<div className="mt-4 flex items-center gap-4 text-sm">
|
||||
<p className="text-muted-foreground">
|
||||
{format(new Date(selectedDate), "dd MMMM yyyy", { locale: it })}
|
||||
</p>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{uncoveredData.totalUncovered} siti da coprire
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</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">
|
||||
{/* Lista siti non coperti */}
|
||||
{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="space-y-4">
|
||||
<Skeleton className="h-32" />
|
||||
<Skeleton className="h-32" />
|
||||
</div>
|
||||
) : uncoveredData && uncoveredData.uncoveredSites.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold">Siti Non Coperti</h2>
|
||||
{uncoveredData.uncoveredSites.map((site) => (
|
||||
<Card key={site.id} data-testid={`site-card-${site.id}`}>
|
||||
<CardHeader>
|
||||
<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}
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{site.name}
|
||||
{site.isPartiallyCovered ? (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
Parzialmente Coperto
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
Non Coperto
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2 space-y-1">
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<MapPin className="h-3 w-3" />
|
||||
{site.address} - {site.location}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{vehicle.brand} {vehicle.model} - {vehicle.vehicleType}
|
||||
</p>
|
||||
{site.serviceStartTime && site.serviceEndTime && (
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<Clock className="h-3 w-3" />
|
||||
Orario: {site.serviceStartTime} - {site.serviceEndTime}
|
||||
</div>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
data-testid={`button-assign-vehicle-${vehicle.id}`}
|
||||
className="ml-2"
|
||||
onClick={() => handleSelectSite(site)}
|
||||
data-testid={`button-select-site-${site.id}`}
|
||||
>
|
||||
<ArrowRight className="h-4 w-4 mr-1" />
|
||||
Assegna
|
||||
Assegna Turno
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Turni Pianificati</p>
|
||||
<p className="text-lg font-semibold">{site.shiftsCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Guardie Richieste</p>
|
||||
<p className="text-lg font-semibold">{site.requiredGuards}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Guardie Assegnate</p>
|
||||
<p className="text-lg font-semibold">{site.totalAssignedGuards}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Requisiti</p>
|
||||
<div className="flex gap-1 mt-1">
|
||||
{site.requiresArmed && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<Shield className="h-3 w-3 mr-1" />
|
||||
Armato
|
||||
</Badge>
|
||||
)}
|
||||
{site.requiresDriverLicense && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<CarIcon className="h-3 w-3 mr-1" />
|
||||
Patente
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{site.shifts.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<p className="text-sm font-medium mb-2">Dettagli Turni:</p>
|
||||
<div className="space-y-2">
|
||||
{site.shifts.map((shift) => (
|
||||
<div key={shift.id} className="flex items-center justify-between text-sm p-2 rounded bg-muted/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4" />
|
||||
{format(new Date(shift.startTime), "HH:mm")} - {format(new Date(shift.endTime), "HH:mm")}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
{shift.assignedGuardsCount}/{shift.requiredGuards}
|
||||
{shift.isCovered ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
) : shift.isPartial ? (
|
||||
<AlertCircle className="h-4 w-4 text-orange-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4 text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
Nessun veicolo disponibile
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<CheckCircle2 className="h-12 w-12 mx-auto text-green-500 mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Tutti i siti sono coperti!</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Non ci sono siti che richiedono assegnazioni per questa data.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
{/* Dialog per assegnare risorse e creare turno */}
|
||||
<Dialog open={createShiftDialogOpen} onOpenChange={setCreateShiftDialogOpen}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Assegna Risorse - {selectedSite?.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Seleziona le guardie e il veicolo per creare il turno
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{isLoadingResources ? (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-24" />
|
||||
<Skeleton className="h-24" />
|
||||
</div>
|
||||
{unavailableVehicles.map((vehicle) => (
|
||||
<Card key={vehicle.id} className="bg-gray-50 dark:bg-gray-900/20">
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Veicoli Disponibili */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<CarIcon className="h-5 w-5" />
|
||||
Veicoli Disponibili ({filteredVehicles.length})
|
||||
</h3>
|
||||
{filteredVehicles.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{filteredVehicles.map((vehicle) => (
|
||||
<Card
|
||||
key={vehicle.id}
|
||||
className={`cursor-pointer transition-colors ${
|
||||
selectedVehicle === vehicle.id ? "border-primary bg-primary/5" : ""
|
||||
}`}
|
||||
onClick={() => setSelectedVehicle(vehicle.id)}
|
||||
data-testid={`vehicle-card-${vehicle.id}`}
|
||||
>
|
||||
<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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium">{vehicle.licensePlate}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{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>
|
||||
<Checkbox
|
||||
checked={selectedVehicle === vehicle.id}
|
||||
onCheckedChange={() => setSelectedVehicle(vehicle.id)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Nessun veicolo disponibile per questa sede</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Agenti */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{/* Guardie Disponibili */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 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}
|
||||
Guardie Disponibili ({filteredGuards.length})
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
Selezionate: {selectedGuards.length}/{selectedSite?.minGuards || 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"
|
||||
</h3>
|
||||
{filteredGuards.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{filteredGuards.map((guard) => (
|
||||
<Card
|
||||
key={guard.id}
|
||||
className={`cursor-pointer transition-colors ${
|
||||
selectedGuards.includes(guard.id) ? "border-primary bg-primary/5" : ""
|
||||
}`}
|
||||
onClick={() => toggleGuardSelection(guard.id)}
|
||||
data-testid={`guard-card-${guard.id}`}
|
||||
>
|
||||
<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 items-center 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>
|
||||
<p className="font-medium">
|
||||
{guard.firstName} {guard.lastName} - #{guard.badgeNumber}
|
||||
</p>
|
||||
{guard.isArmed && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{guard.badgeNumber}
|
||||
<Shield className="h-3 w-3 mr-1" />
|
||||
Armato
|
||||
</Badge>
|
||||
)}
|
||||
{guard.hasDriverLicense && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<CarIcon className="h-3 w-3 mr-1" />
|
||||
Patente
|
||||
</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>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Ore sett.: {guard.availability.weeklyHours}h | Rimaste: {guard.availability.remainingWeeklyHours}h
|
||||
</p>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={selectedGuards.includes(guard.id)}
|
||||
onCheckedChange={() => toggleGuardSelection(guard.id)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nessuna guardia disponibile che soddisfa i requisiti del sito
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setCreateShiftDialogOpen(false);
|
||||
setSelectedSite(null);
|
||||
setSelectedGuards([]);
|
||||
setSelectedVehicle(null);
|
||||
}}
|
||||
data-testid="button-cancel-shift"
|
||||
>
|
||||
Annulla
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateShift}
|
||||
disabled={
|
||||
!selectedSite ||
|
||||
selectedGuards.length < (selectedSite?.minGuards || 0) ||
|
||||
createShiftMutation.isPending
|
||||
}
|
||||
data-testid="button-create-shift"
|
||||
>
|
||||
{createShiftMutation.isPending ? "Creazione..." : "Crea Turno"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -958,9 +958,21 @@ export async function registerRoutes(app: Express): Promise<Server> {
|
||||
startTime,
|
||||
endTime,
|
||||
status: req.body.status || "planned",
|
||||
vehicleId: req.body.vehicleId || null,
|
||||
});
|
||||
|
||||
const shift = await storage.createShift(validatedData);
|
||||
|
||||
// Se ci sono guardie da assegnare, crea le assegnazioni
|
||||
if (req.body.guardIds && Array.isArray(req.body.guardIds) && req.body.guardIds.length > 0) {
|
||||
for (const guardId of req.body.guardIds) {
|
||||
await storage.createShiftAssignment({
|
||||
shiftId: shift.id,
|
||||
guardId,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
res.json(shift);
|
||||
} catch (error) {
|
||||
console.error("Error creating shift:", error);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user