booking flow,summtion, approval, contract, mock payemnt and integration to back office, and also add permissions

apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx

@@ -1,11 +1,760 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
+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 { trainSchedulingService } from '@/services/trainScheduling.service';
+import type {
+  EligibleContainerBooking,
+  TrainScheduleFilters,
+  TrainSchedulePreviewResponse,
+  YardOption,
+} from '@/types/trainScheduling';
+
+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 formatDayInput = (value?: string | null) => {
+  if (!value) return '';
+  return value.slice(0, 10);
+};
+
+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 deriveFromBooking = (
+  booking: EligibleContainerBooking | undefined,
+  stations: YardOption[],
+) => {
+  if (!booking) {
+    return { originStationId: '', destinationStationId: '', scheduleDate: '' };
+  }
+
+  const originStationId = stations.find((station) => station.name === booking.origin)?.id ?? '';
+  const destinationStationId =
+    stations.find((station) => station.name === booking.destination)?.id ?? '';
+
+  return {
+    originStationId,
+    destinationStationId,
+    scheduleDate: formatDayInput(booking.preferredDepartureDate),
+  };
+};
 
 const TrainsPage = () => {
+  const qc = useQueryClient();
+  const [filters, setFilters] = useState<TrainScheduleFilters>({});
+  const [selectedBookingIds, setSelectedBookingIds] = useState<string[]>([]);
+  const [preview, setPreview] = useState<TrainSchedulePreviewResponse | null>(null);
+  const [selectedLocomotiveId, setSelectedLocomotiveId] = useState('');
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [scheduleSearch, setScheduleSearch] = useState('');
+  const [scheduleStatusFilter, setScheduleStatusFilter] = useState('ALL');
+
+  const stationsQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.stations(),
+    queryFn: () => trainSchedulingService.getStations(),
+  });
+
+  const eligibleQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.eligible(filters),
+    queryFn: () => trainSchedulingService.getEligibleBookings(filters),
+  });
+
+  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 eligibleItems = eligibleQuery.data?.items ?? [];
+  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.origin ?? '',
+        schedule.destination ?? '',
+        schedule.locomotive?.code ?? '',
+        schedule.status,
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return haystack.includes(query);
+    });
+  }, [scheduleSearch, scheduleStatusFilter, schedulesQuery.data]);
+  const selectedBookings = useMemo(
+    () => eligibleItems.filter((booking) => selectedBookingIds.includes(booking.id)),
+    [eligibleItems, selectedBookingIds],
+  );
+
+  const summary = useMemo(() => {
+    const totalWeightTons = selectedBookings.reduce((sum, booking) => sum + booking.weightTons, 0);
+    const wagonsNeeded = Math.ceil(totalWeightTons / 70);
+    const totalLengthMeters = wagonsNeeded * 14;
+    const routeSet = new Set(selectedBookings.map((booking) => `${booking.origin} -> ${booking.destination}`));
+    const dateSet = new Set(selectedBookings.map((booking) => formatDayInput(booking.preferredDepartureDate)));
+
+    return {
+      count: selectedBookings.length,
+      totalWeightTons,
+      wagonsNeeded: Number.isFinite(wagonsNeeded) ? wagonsNeeded : 0,
+      totalLengthMeters: Number.isFinite(totalLengthMeters) ? totalLengthMeters : 0,
+      route: routeSet.size === 1 ? [...routeSet][0] : selectedBookings.length ? 'Mixed route' : '-',
+      scheduleDate: dateSet.size === 1 ? [...dateSet][0] : selectedBookings.length ? 'Mixed date' : '-',
+    };
+  }, [selectedBookings]);
+
+  const previewMutation = useMutation({
+    mutationFn: () => {
+      if (!filters.originStationId || !filters.destinationStationId || !filters.scheduleDate) {
+        throw new Error('Please select origin, destination, and schedule date');
+      }
+      return trainSchedulingService.preview({
+        bookingIds: selectedBookingIds,
+        scheduleDate: new Date(`${filters.scheduleDate}T08:00:00.000Z`).toISOString(),
+        originStationId: filters.originStationId,
+        destinationStationId: filters.destinationStationId,
+      });
+    },
+    onSuccess: (data) => {
+      setPreview(data);
+      toast.success(data.valid ? 'Preview generated' : 'Preview has validation issues');
+    },
+    onError: (error) => {
+      toast.error(parseError(error, 'Failed to preview train schedule'));
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () => {
+      if (!selectedLocomotiveId) {
+        throw new Error('Please select a locomotive');
+      }
+      if (!filters.originStationId || !filters.destinationStationId || !filters.scheduleDate) {
+        throw new Error('Please select origin, destination, and schedule date');
+      }
+      return trainSchedulingService.createSchedule({
+        bookingIds: selectedBookingIds,
+        scheduleDate: new Date(`${filters.scheduleDate}T08:00:00.000Z`).toISOString(),
+        originStationId: filters.originStationId,
+        destinationStationId: filters.destinationStationId,
+        locomotiveId: selectedLocomotiveId,
+      });
+    },
+    onSuccess: (data) => {
+      toast.success('Train schedule created');
+      setSelectedBookingIds([]);
+      setSelectedLocomotiveId('');
+      setPreview(null);
+      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 toggleBooking = (booking: EligibleContainerBooking, checked: boolean) => {
+    setSelectedBookingIds((current) => {
+      if (checked) {
+        const next = [...new Set([...current, booking.id])];
+        if (next.length === 1) {
+          const defaults = deriveFromBooking(booking, stationsQuery.data ?? []);
+          setFilters((prev) => ({
+            ...prev,
+            originStationId: prev.originStationId || defaults.originStationId,
+            destinationStationId: prev.destinationStationId || defaults.destinationStationId,
+            scheduleDate: prev.scheduleDate || defaults.scheduleDate,
+          }));
+        }
+        return next;
+      }
+      return current.filter((id) => id !== booking.id);
+    });
+    setPreview(null);
+  };
+
+  const detail = detailQuery.data;
+  const isBusy = previewMutation.isPending || createMutation.isPending;
+
   return (
-    <FeaturePlaceholder
-      title="Trains"
-      description="Coordinate train assignments, scheduling visibility, and operational readiness."
-    />
+    <div className="space-y-6 p-6">
+      <Breadcrumbs items={[{ label: 'Operations' }, { label: 'Train scheduling' }]} />
+
+      <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 Scheduling</h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Build container train schedules from compatible bookings, preview wagon plans, and assign locomotives.
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={() => {
+              void eligibleQuery.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.8fr,1fr]">
+          <div className="space-y-6">
+            <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-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                  Filters
+                </h2>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Origin station</label>
+                  <Select
+                    value={filters.originStationId ?? ''}
+                    onValueChange={(value) =>
+                      setFilters((current) => ({
+                        ...current,
+                        originStationId: value === '__all__' ? undefined : value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="All origins" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All origins</SelectItem>
+                      {(stationsQuery.data ?? []).map((station) => (
+                        <SelectItem key={station.id} value={station.id}>
+                          {station.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Destination station</label>
+                  <Select
+                    value={filters.destinationStationId ?? ''}
+                    onValueChange={(value) =>
+                      setFilters((current) => ({
+                        ...current,
+                        destinationStationId: value === '__all__' ? undefined : value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="All destinations" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All destinations</SelectItem>
+                      {(stationsQuery.data ?? []).map((station) => (
+                        <SelectItem key={station.id} value={station.id}>
+                          {station.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Schedule date</label>
+                  <input
+                    className={inputClassName}
+                    type="date"
+                    value={filters.scheduleDate ?? ''}
+                    onChange={(event) =>
+                      setFilters((current) => ({
+                        ...current,
+                        scheduleDate: event.target.value || undefined,
+                      }))
+                    }
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Booking status</label>
+                  <input
+                    className={inputClassName}
+                    placeholder="APPROVED"
+                    value={filters.status ?? ''}
+                    onChange={(event) =>
+                      setFilters((current) => ({
+                        ...current,
+                        status: event.target.value || undefined,
+                      }))
+                    }
+                  />
+                </div>
+              </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">Eligible container bookings</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Only container bookings not already assigned to a schedule appear here.
+                  </p>
+                </div>
+                <span className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                  {eligibleQuery.data?.count ?? 0} bookings
+                </span>
+              </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">Select</th>
+                      <th className="px-3 py-3">Booking</th>
+                      <th className="px-3 py-3">Customer</th>
+                      <th className="px-3 py-3">Container</th>
+                      <th className="px-3 py-3">Qty</th>
+                      <th className="px-3 py-3">Weight</th>
+                      <th className="px-3 py-3">Origin</th>
+                      <th className="px-3 py-3">Destination</th>
+                      <th className="px-3 py-3">Departure</th>
+                      <th className="px-3 py-3">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border bg-card">
+                    {eligibleItems.map((booking) => (
+                      <tr key={booking.id} className="hover:bg-muted/20">
+                        <td className="px-3 py-3">
+                          <input
+                            type="checkbox"
+                            checked={selectedBookingIds.includes(booking.id)}
+                            onChange={(event) => toggleBooking(booking, event.target.checked)}
+                          />
+                        </td>
+                        <td className="px-3 py-3 font-medium">{booking.reference}</td>
+                        <td className="px-3 py-3">{booking.customer}</td>
+                        <td className="px-3 py-3">{booking.containerType}</td>
+                        <td className="px-3 py-3">{booking.quantity}</td>
+                        <td className="px-3 py-3">{booking.weightTons.toLocaleString()} T</td>
+                        <td className="px-3 py-3">{booking.origin}</td>
+                        <td className="px-3 py-3">{booking.destination}</td>
+                        <td className="px-3 py-3">{formatDate(booking.preferredDepartureDate)}</td>
+                        <td className="px-3 py-3">{booking.status}</td>
+                      </tr>
+                    ))}
+                    {!eligibleQuery.isLoading && eligibleItems.length === 0 ? (
+                      <tr>
+                        <td className="px-3 py-8 text-center text-sm text-muted-foreground" colSpan={10}>
+                          No eligible container bookings matched the current filters.
+                        </td>
+                      </tr>
+                    ) : null}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          </div>
+
+          <div className="space-y-6">
+            <section className="rounded-2xl border border-border bg-background/60 p-5">
+              <h2 className="text-lg font-semibold">Schedule builder</h2>
+              <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Selected bookings</p>
+                  <p className="mt-2 text-2xl font-semibold">{summary.count}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Total weight</p>
+                  <p className="mt-2 text-2xl font-semibold">{summary.totalWeightTons.toLocaleString()} T</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Route</p>
+                  <p className="mt-2 text-sm font-medium">{summary.route}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Schedule date</p>
+                  <p className="mt-2 text-sm font-medium">{summary.scheduleDate}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Estimated wagon type</p>
+                  <p className="mt-2 text-sm font-medium">NW5</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Estimated wagons / length</p>
+                  <p className="mt-2 text-sm font-medium">
+                    {summary.wagonsNeeded} wagons / {summary.totalLengthMeters} m
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-5 flex flex-col gap-3">
+                <Button
+                  className="w-full"
+                  disabled={!selectedBookingIds.length || isBusy}
+                  onClick={() => previewMutation.mutate()}
+                >
+                  Preview schedule
+                </Button>
+
+                <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
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <Button
+                  className="w-full"
+                  disabled={!preview?.valid || !selectedLocomotiveId || isBusy}
+                  onClick={() => createMutation.mutate()}
+                >
+                  Create schedule
+                </Button>
+              </div>
+
+              {preview ? (
+                <div className="mt-5 space-y-4 rounded-2xl border border-border bg-card p-4">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-semibold">Preview result</h3>
+                    <span
+                      className={`rounded-full px-3 py-1 text-xs font-medium ${
+                        preview.valid
+                          ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
+                          : 'bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-300'
+                      }`}
+                    >
+                      {preview.valid ? 'Valid' : 'Invalid'}
+                    </span>
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Wagons</p>
+                      <p className="mt-1 font-semibold">{preview.summary.wagonsNeeded}</p>
+                    </div>
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Weight</p>
+                      <p className="mt-1 font-semibold">{preview.summary.totalWeightTons} T</p>
+                    </div>
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Length</p>
+                      <p className="mt-1 font-semibold">{preview.summary.totalLengthMeters} m</p>
+                    </div>
+                  </div>
+
+                  {preview.violations.length > 0 ? (
+                    <div className="rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700 dark:border-rose-950 dark:bg-rose-950/30 dark:text-rose-300">
+                      <ul className="list-disc space-y-1 pl-5">
+                        {preview.violations.map((violation) => (
+                          <li key={violation}>{violation}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+            </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 wagons and allocations.</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.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>
+        </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, locomotive, wagons, and booking allocations.
+            </DialogDescription>
+          </DialogHeader>
+
+          {detail ? (
+            <div className="space-y-6">
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <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.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)`
+                    : 'No locomotive attached'}
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-border p-4">
+                <h3 className="text-lg font-semibold">Wagons and allocations</h3>
+                <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 className="mt-3 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">Booking</th>
+                              <th className="px-3 py-2">Allocated weight</th>
+                            </tr>
+                          </thead>
+                          <tbody className="divide-y divide-border bg-card">
+                            {wagon.allocations.map((allocation) => (
+                              <tr key={allocation.id}>
+                                <td className="px-3 py-2">{allocation.bookingReference ?? allocation.bookingId}</td>
+                                <td className="px-3 py-2">{allocation.allocatedWeightTons} T</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="rounded-2xl border border-border p-4">
+                <h3 className="text-lg font-semibold">Bookings in schedule</h3>
+                <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>
   );
 };