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 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} />
|
||||
|
||||
@ -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",
|
||||
|
||||
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