mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-07 18:55:42 +00:00
483 lines
21 KiB
TypeScript
483 lines
21 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { isAxiosError } from 'axios';
|
|
import toast from 'react-hot-toast';
|
|
import { Calendar, RefreshCw, TrainTrack } from 'lucide-react';
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@edr/ui-common';
|
|
|
|
import Breadcrumbs from '@/components/ui/Breadcrumbs';
|
|
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
|
|
import { useRoutes } from '@/hooks/useRoutes';
|
|
import { trainSchedulingService } from '@/services/trainScheduling.service';
|
|
|
|
const inputClassName =
|
|
'w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950';
|
|
|
|
const formatDate = (value?: string | null) => {
|
|
if (!value) return '-';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return '-';
|
|
return new Intl.DateTimeFormat('en', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
}).format(date);
|
|
};
|
|
|
|
const parseError = (error: unknown, fallback: string) => {
|
|
if (isAxiosError(error)) {
|
|
const message = error.response?.data?.message;
|
|
if (Array.isArray(message)) return message.join(', ');
|
|
if (typeof message === 'string') return message;
|
|
const violations = error.response?.data?.violations;
|
|
if (Array.isArray(violations)) return violations.join(', ');
|
|
}
|
|
return fallback;
|
|
};
|
|
|
|
const TrainsPage = () => {
|
|
const qc = useQueryClient();
|
|
const [routeId, setRouteId] = useState('');
|
|
const [scheduleDate, setScheduleDate] = useState('');
|
|
const [selectedLocomotiveId, setSelectedLocomotiveId] = useState('');
|
|
const [detailId, setDetailId] = useState<string | null>(null);
|
|
const [scheduleSearch, setScheduleSearch] = useState('');
|
|
const [scheduleStatusFilter, setScheduleStatusFilter] = useState('ALL');
|
|
|
|
const routesQuery = useRoutes();
|
|
const locomotivesQuery = useQuery({
|
|
queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives(),
|
|
queryFn: () => trainSchedulingService.getAvailableLocomotives(),
|
|
});
|
|
const schedulesQuery = useQuery({
|
|
queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules(),
|
|
queryFn: () => trainSchedulingService.listSchedules(),
|
|
});
|
|
const detailQuery = useQuery({
|
|
queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(detailId ?? ''),
|
|
queryFn: () => trainSchedulingService.getScheduleById(detailId!),
|
|
enabled: Boolean(detailId),
|
|
});
|
|
|
|
const activeRoutes = useMemo(
|
|
() => (routesQuery.data ?? []).filter((route) => route.isActive),
|
|
[routesQuery.data],
|
|
);
|
|
const selectedRoute = activeRoutes.find((route) => route.id === routeId) ?? null;
|
|
const selectedLocomotive = (locomotivesQuery.data ?? []).find(
|
|
(locomotive) => locomotive.id === selectedLocomotiveId,
|
|
);
|
|
|
|
const filteredSchedules = useMemo(() => {
|
|
const query = scheduleSearch.trim().toLowerCase();
|
|
|
|
return (schedulesQuery.data ?? []).filter((schedule) => {
|
|
const matchesStatus =
|
|
scheduleStatusFilter === 'ALL' || schedule.status === scheduleStatusFilter;
|
|
|
|
if (!matchesStatus) {
|
|
return false;
|
|
}
|
|
|
|
if (!query) {
|
|
return true;
|
|
}
|
|
|
|
const haystack = [
|
|
schedule.id,
|
|
schedule.routeName ?? '',
|
|
schedule.origin ?? '',
|
|
schedule.destination ?? '',
|
|
schedule.locomotive?.code ?? '',
|
|
schedule.status,
|
|
]
|
|
.join(' ')
|
|
.toLowerCase();
|
|
|
|
return haystack.includes(query);
|
|
});
|
|
}, [scheduleSearch, scheduleStatusFilter, schedulesQuery.data]);
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: () => {
|
|
if (!routeId || !scheduleDate || !selectedLocomotiveId) {
|
|
throw new Error('Please select route, departure date, and locomotive');
|
|
}
|
|
|
|
return trainSchedulingService.createSchedule({
|
|
routeId,
|
|
scheduleDate: new Date(`${scheduleDate}T08:00:00.000Z`).toISOString(),
|
|
locomotiveId: selectedLocomotiveId,
|
|
});
|
|
},
|
|
onSuccess: (data) => {
|
|
toast.success('Train schedule created');
|
|
setRouteId('');
|
|
setScheduleDate('');
|
|
setSelectedLocomotiveId('');
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
|
|
setDetailId(data.id);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(parseError(error, 'Failed to create train schedule'));
|
|
},
|
|
});
|
|
|
|
const cancelMutation = useMutation({
|
|
mutationFn: (id: string) => trainSchedulingService.cancelSchedule(id),
|
|
onSuccess: (data) => {
|
|
toast.success('Train schedule cancelled');
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
|
|
void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(data.id) });
|
|
setDetailId(data.id);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(parseError(error, 'Failed to cancel train schedule'));
|
|
},
|
|
});
|
|
|
|
const detail = detailQuery.data;
|
|
const isBusy = createMutation.isPending;
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<Breadcrumbs items={[{ label: 'Operations' }, { label: 'Train schedules' }]} />
|
|
|
|
<section className="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
|
|
<div className="flex flex-col gap-5 border-b border-border px-6 py-6 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
|
<TrainTrack className="size-7" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">Train Schedules</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Create the train schedule first, reserve the locomotive, and assign bookings and wagons later.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
className="gap-2"
|
|
onClick={() => {
|
|
void routesQuery.refetch();
|
|
void schedulesQuery.refetch();
|
|
void locomotivesQuery.refetch();
|
|
}}
|
|
>
|
|
<RefreshCw className="size-4" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-6 p-6 xl:grid-cols-[1.1fr,1.4fr]">
|
|
<section className="rounded-2xl border border-border bg-background/60 p-5">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<Calendar className="size-4 text-muted-foreground" />
|
|
<h2 className="text-lg font-semibold">Schedule builder</h2>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Route</label>
|
|
<Select value={routeId} onValueChange={setRouteId}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select active route" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{activeRoutes.map((route) => (
|
|
<SelectItem key={route.id} value={route.id}>
|
|
{route.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Departure date</label>
|
|
<input
|
|
className={inputClassName}
|
|
type="date"
|
|
value={scheduleDate}
|
|
onChange={(event) => setScheduleDate(event.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Locomotive</label>
|
|
<Select value={selectedLocomotiveId} onValueChange={setSelectedLocomotiveId}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select available locomotive" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(locomotivesQuery.data ?? []).map((locomotive) => (
|
|
<SelectItem key={locomotive.id} value={locomotive.id}>
|
|
{locomotive.code} - {locomotive.maxPullWeightTons}T / {locomotive.maxTrainLengthMeters}m
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-xl border border-border bg-card p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Origin</p>
|
|
<p className="mt-2 text-sm font-medium">
|
|
{selectedRoute?.originYard?.label ?? selectedRoute?.originYard?.code ?? '-'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-card p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Destination</p>
|
|
<p className="mt-2 text-sm font-medium">
|
|
{selectedRoute?.destinationYard?.label ?? selectedRoute?.destinationYard?.code ?? '-'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-card p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Locomotive capacity</p>
|
|
<p className="mt-2 text-sm font-medium">
|
|
{selectedLocomotive
|
|
? `${selectedLocomotive.maxPullWeightTons}T / ${selectedLocomotive.maxTrainLengthMeters}m`
|
|
: '-'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border bg-card p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Next step</p>
|
|
<p className="mt-2 text-sm font-medium">Assign bookings, then allocate wagons</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<Button className="w-full" disabled={isBusy} onClick={() => createMutation.mutate()}>
|
|
Create schedule
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-border bg-background/60 p-5">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-semibold">Created schedules</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Open a schedule to inspect the reserved locomotive and prepare for later booking and wagon work.
|
|
</p>
|
|
</div>
|
|
<span className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
{filteredSchedules.length} schedules
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mb-4 grid gap-3 md:grid-cols-[1fr,220px]">
|
|
<input
|
|
className={inputClassName}
|
|
placeholder="Search by schedule, route, locomotive, or status"
|
|
value={scheduleSearch}
|
|
onChange={(event) => setScheduleSearch(event.target.value)}
|
|
/>
|
|
<Select value={scheduleStatusFilter} onValueChange={setScheduleStatusFilter}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="All statuses" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ALL">All statuses</SelectItem>
|
|
<SelectItem value="DRAFT">DRAFT</SelectItem>
|
|
<SelectItem value="SCHEDULED">SCHEDULED</SelectItem>
|
|
<SelectItem value="DISPATCHED">DISPATCHED</SelectItem>
|
|
<SelectItem value="ARRIVED">ARRIVED</SelectItem>
|
|
<SelectItem value="CANCELLED">CANCELLED</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto rounded-2xl border border-border">
|
|
<table className="min-w-full divide-y divide-border text-sm">
|
|
<thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
|
|
<tr>
|
|
<th className="px-3 py-3">Schedule</th>
|
|
<th className="px-3 py-3">Departure</th>
|
|
<th className="px-3 py-3">Route</th>
|
|
<th className="px-3 py-3">Locomotive</th>
|
|
<th className="px-3 py-3">Bookings</th>
|
|
<th className="px-3 py-3">Wagons</th>
|
|
<th className="px-3 py-3">Weight</th>
|
|
<th className="px-3 py-3">Length</th>
|
|
<th className="px-3 py-3">Status</th>
|
|
<th className="px-3 py-3">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border bg-card">
|
|
{filteredSchedules.map((schedule) => (
|
|
<tr key={schedule.id} className="hover:bg-muted/20">
|
|
<td className="px-3 py-3 font-mono text-xs">{schedule.id}</td>
|
|
<td className="px-3 py-3">{formatDate(schedule.scheduleDate)}</td>
|
|
<td className="px-3 py-3">
|
|
{schedule.routeName ?? `${schedule.origin ?? '-'} to ${schedule.destination ?? '-'}`}
|
|
</td>
|
|
<td className="px-3 py-3">{schedule.locomotive?.code ?? '-'}</td>
|
|
<td className="px-3 py-3">{schedule.bookingsCount}</td>
|
|
<td className="px-3 py-3">{schedule.wagonCount}</td>
|
|
<td className="px-3 py-3">{schedule.totalWeightTons} T</td>
|
|
<td className="px-3 py-3">{schedule.totalLengthMeters} m</td>
|
|
<td className="px-3 py-3">{schedule.status}</td>
|
|
<td className="px-3 py-3">
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => setDetailId(schedule.id)}>
|
|
View
|
|
</Button>
|
|
{schedule.status !== 'CANCELLED' ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => cancelMutation.mutate(schedule.id)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{!schedulesQuery.isLoading && filteredSchedules.length === 0 ? (
|
|
<tr>
|
|
<td className="px-3 py-8 text-center text-sm text-muted-foreground" colSpan={10}>
|
|
No train schedules matched the current filters.
|
|
</td>
|
|
</tr>
|
|
) : null}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<Dialog open={Boolean(detailId)} onOpenChange={(open) => (!open ? setDetailId(null) : null)}>
|
|
<DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>Train schedule detail</DialogTitle>
|
|
<DialogDescription>
|
|
Inspect the selected schedule. Booking assignment and wagon allocation happen after schedule creation.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{detail ? (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
|
|
<div className="rounded-xl border border-border p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Schedule</p>
|
|
<p className="mt-2 break-all font-mono text-xs">{detail.id}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Departure</p>
|
|
<p className="mt-2 text-sm font-medium">{formatDate(detail.scheduledDepartureDate)}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Route</p>
|
|
<p className="mt-2 text-sm font-medium">{detail.route?.name ?? '-'}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Origin / destination</p>
|
|
<p className="mt-2 text-sm font-medium">
|
|
{detail.originStation?.label ?? detail.originStation?.code ?? '-'} to{' '}
|
|
{detail.destinationStation?.label ?? detail.destinationStation?.code ?? '-'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border p-4">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">Status</p>
|
|
<p className="mt-2 text-sm font-medium">{detail.status}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border p-4">
|
|
<h3 className="text-lg font-semibold">Locomotive</h3>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{detail.trainSet?.locomotive
|
|
? `${detail.trainSet.locomotive.code} (${detail.trainSet.locomotive.maxPullWeightTons}T pull capacity / ${detail.trainSet.locomotive.maxTrainLengthMeters ?? 0}m)`
|
|
: 'No locomotive attached'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border p-4">
|
|
<h3 className="text-lg font-semibold">Wagons and allocations</h3>
|
|
{(detail.trainSet?.wagons?.length ?? 0) === 0 ? (
|
|
<p className="mt-3 text-sm text-muted-foreground">No wagons allocated yet.</p>
|
|
) : (
|
|
<div className="mt-4 space-y-4">
|
|
{(detail.trainSet?.wagons ?? []).map((wagon) => (
|
|
<div key={wagon.id} className="rounded-xl border border-border p-4">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="font-semibold">
|
|
Wagon {wagon.sequenceNo} - {wagon.wagonType?.code ?? 'NW5'}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{wagon.assignedWeightTons}T assigned / {wagon.capacityTons}T capacity / {wagon.lengthMeters}m
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border p-4">
|
|
<h3 className="text-lg font-semibold">Bookings in schedule</h3>
|
|
{detail.bookings.length === 0 ? (
|
|
<p className="mt-3 text-sm text-muted-foreground">No bookings assigned yet.</p>
|
|
) : (
|
|
<div className="mt-4 overflow-x-auto rounded-xl border border-border">
|
|
<table className="min-w-full divide-y divide-border text-sm">
|
|
<thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
|
|
<tr>
|
|
<th className="px-3 py-2">Reference</th>
|
|
<th className="px-3 py-2">Customer</th>
|
|
<th className="px-3 py-2">Weight</th>
|
|
<th className="px-3 py-2">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border bg-card">
|
|
{detail.bookings.map((booking) => (
|
|
<tr key={booking.id}>
|
|
<td className="px-3 py-2">{booking.reference ?? booking.id}</td>
|
|
<td className="px-3 py-2">{booking.customer ?? '-'}</td>
|
|
<td className="px-3 py-2">{booking.weightTons} T</td>
|
|
<td className="px-3 py-2">{booking.status ?? '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">Loading schedule detail...</p>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TrainsPage;
|