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
This commit is contained in:
marco370
parent
181de6a028
commit
e3ab9e2b83
@ -22,6 +22,7 @@ import Vehicles from "@/pages/vehicles";
|
|||||||
import Parameters from "@/pages/parameters";
|
import Parameters from "@/pages/parameters";
|
||||||
import Services from "@/pages/services";
|
import Services from "@/pages/services";
|
||||||
import Planning from "@/pages/planning";
|
import Planning from "@/pages/planning";
|
||||||
|
import OperationalPlanning from "@/pages/operational-planning";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
const { isAuthenticated, isLoading } = useAuth();
|
const { isAuthenticated, isLoading } = useAuth();
|
||||||
@ -40,6 +41,7 @@ function Router() {
|
|||||||
<Route path="/vehicles" component={Vehicles} />
|
<Route path="/vehicles" component={Vehicles} />
|
||||||
<Route path="/shifts" component={Shifts} />
|
<Route path="/shifts" component={Shifts} />
|
||||||
<Route path="/planning" component={Planning} />
|
<Route path="/planning" component={Planning} />
|
||||||
|
<Route path="/operational-planning" component={OperationalPlanning} />
|
||||||
<Route path="/advanced-planning" component={AdvancedPlanning} />
|
<Route path="/advanced-planning" component={AdvancedPlanning} />
|
||||||
<Route path="/reports" component={Reports} />
|
<Route path="/reports" component={Reports} />
|
||||||
<Route path="/notifications" component={Notifications} />
|
<Route path="/notifications" component={Notifications} />
|
||||||
|
|||||||
@ -49,6 +49,12 @@ const menuItems = [
|
|||||||
icon: ClipboardList,
|
icon: ClipboardList,
|
||||||
roles: ["admin", "coordinator"],
|
roles: ["admin", "coordinator"],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Pianificazione Operativa",
|
||||||
|
url: "/operational-planning",
|
||||||
|
icon: Calendar,
|
||||||
|
roles: ["admin", "coordinator"],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Gestione Pianificazioni",
|
title: "Gestione Pianificazioni",
|
||||||
url: "/advanced-planning",
|
url: "/advanced-planning",
|
||||||
|
|||||||
336
client/src/pages/operational-planning.tsx
Normal file
336
client/src/pages/operational-planning.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user