Resolve merge conflicts from Train-Scheduling

apps/edr-freight-web/backoffice/src/pages/fleet/FleetCrudPages.tsx

@@ -32,8 +32,15 @@ import {
 } from '@/hooks/useContainers';
 import { useCreateTrain, useDeleteTrain, useTrains, useUpdateTrain } from '@/hooks/useTrains';
 import { useCreateWagon, useDeleteWagon, useUpdateWagon, useWagons } from '@/hooks/useWagons';
+import {
+  useCreateLocomotive,
+  useDecommissionLocomotive,
+  useLocomotives,
+  useUpdateLocomotive,
+} from '@/hooks/useLocomotives';
 import type { Cargo } from '@/services/cargoService';
 import type { Container } from '@/services/containerService';
+import type { Locomotive } from '@/services/locomotives.service';
 import type { Train } from '@/services/trains.service';
 import type { Wagon } from '@/services/wagon.service';
 import type { WagonType } from '@/services/wagon-types.service';
@@ -63,6 +70,7 @@ type FleetCrudPageProps<T extends { id: string }> = {
   title: string;
   description: string;
   addLabel: string;
+  entityLabel?: string;
   data?: T[];
   isLoading: boolean;
   columns: Column<T>[];
@@ -72,6 +80,10 @@ type FleetCrudPageProps<T extends { id: string }> = {
   create: { mutateAsync: (data: Record<string, unknown>) => Promise<unknown>; isPending: boolean };
   update: { mutateAsync: (data: { id: string; data: Record<string, unknown> }) => Promise<unknown>; isPending: boolean };
   remove: { mutateAsync: (id: string) => Promise<unknown>; isPending: boolean };
+  removeActionLabel?: string;
+  removeConfirmMessage?: string;
+  removeSuccessMessage?: string;
+  hideViewAction?: boolean;
 };
 
 const normalizePayload = (values: Record<string, FormValue>) =>
@@ -139,6 +151,7 @@ function FleetCrudPage<T extends { id: string }>({
   title,
   description,
   addLabel,
+  entityLabel,
   data,
   isLoading,
   columns,
@@ -148,6 +161,10 @@ function FleetCrudPage<T extends { id: string }>({
   create,
   update,
   remove,
+  removeActionLabel = 'Delete',
+  removeConfirmMessage,
+  removeSuccessMessage,
+  hideViewAction = false,
 }: FleetCrudPageProps<T>) {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -249,12 +266,13 @@ function FleetCrudPage<T extends { id: string }>({
   };
 
   const handleDelete = async (item: T) => {
-    if (!window.confirm(`Delete this ${title.slice(0, -1).toLowerCase()}?`)) return;
+    const normalizedEntityLabel = entityLabel ?? title.slice(0, -1);
+    if (!window.confirm(removeConfirmMessage ?? `${removeActionLabel} this ${normalizedEntityLabel.toLowerCase()}?`)) return;
     try {
       await remove.mutateAsync(item.id);
-      toast({ title: `${title.slice(0, -1)} deleted` });
+      toast({ title: removeSuccessMessage ?? `${normalizedEntityLabel} ${removeActionLabel.toLowerCase()}ed` });
     } catch {
-      toast({ title: 'Delete failed', description: 'This record may still be referenced.', variant: 'destructive' });
+      toast({ title: `${removeActionLabel} failed`, description: 'This record may still be referenced.', variant: 'destructive' });
     }
   };
 
@@ -315,13 +333,15 @@ function FleetCrudPage<T extends { id: string }>({
                 ))}
                 <TableCell>
                   <div className="flex justify-end gap-1">
-                    <Button variant="ghost" size="icon" onClick={() => setViewing(item)} title="View">
-                      <Eye className="size-4" />
-                    </Button>
+                    {!hideViewAction ? (
+                      <Button variant="ghost" size="icon" onClick={() => setViewing(item)} title="View">
+                        <Eye className="size-4" />
+                      </Button>
+                    ) : null}
                     <Button variant="ghost" size="icon" onClick={() => openEdit(item)} title="Edit">
                       <Edit className="size-4" />
                     </Button>
-                    <Button variant="ghost" size="icon" onClick={() => handleDelete(item)} title="Delete">
+                    <Button variant="ghost" size="icon" onClick={() => handleDelete(item)} title={removeActionLabel}>
                       <Trash2 className="size-4" />
                     </Button>
                   </div>
@@ -725,3 +745,82 @@ export function CargoesCrudPage() {
     />
   );
 }
+
+export function LocomotivesCrudPage() {
+  const query = useLocomotives();
+
+  return (
+    <FleetCrudPage<Locomotive>
+      title="Locomotives"
+      entityLabel="Locomotive"
+      description="Manage locomotive master data used by train scheduling and fleet operations."
+      addLabel="Add Locomotive"
+      data={query.data}
+      isLoading={query.isLoading}
+      create={useCreateLocomotive()}
+      update={useUpdateLocomotive()}
+      remove={useDecommissionLocomotive()}
+      removeActionLabel="Decommission"
+      removeConfirmMessage="Decommission this locomotive?"
+      removeSuccessMessage="Locomotive decommissioned"
+      searchText={(locomotive) =>
+        [
+          locomotive.code,
+          locomotive.name,
+          locomotive.locomotiveType,
+          locomotive.status,
+        ].join(' ')
+      }
+      columns={[
+        { key: 'code', label: 'Code' },
+        { key: 'name', label: 'Name', render: (locomotive) => locomotive.name || '-' },
+        { key: 'locomotiveType', label: 'Type' },
+        { key: 'status', label: 'Status', render: (locomotive) => statusBadge(locomotive.status) },
+        { key: 'maxPullWeightTons', label: 'Max pull (tons)' },
+        { key: 'maxTrainLengthMeters', label: 'Max length (m)' },
+      ]}
+      fields={[
+        { key: 'code', label: 'Code', required: true },
+        { key: 'name', label: 'Name' },
+        {
+          key: 'locomotiveType',
+          label: 'Locomotive type',
+          type: 'select',
+          required: true,
+          options: [
+            { value: 'DIESEL', label: 'Diesel' },
+            { value: 'ELECTRIC', label: 'Electric' },
+          ],
+        },
+        {
+          key: 'status',
+          label: 'Status',
+          type: 'select',
+          required: true,
+          options: [
+            { value: 'AVAILABLE', label: 'Available' },
+            { value: 'MAINTENANCE', label: 'Maintenance' },
+            { value: 'ASSIGNED', label: 'Assigned' },
+            { value: 'OUT_OF_SERVICE', label: 'Out of service' },
+          ],
+        },
+        { key: 'maxPullWeightTons', label: 'Max pulling weight (tons)', type: 'number', required: true },
+        { key: 'maxTrainLengthMeters', label: 'Max train length (meters)', type: 'number', required: true },
+        { key: 'powerKw', label: 'Power (kW)', type: 'number' },
+        { key: 'tractionForceKn', label: 'Traction force (kN)', type: 'number' },
+        { key: 'maxSpeedKmh', label: 'Max speed (km/h)', type: 'number' },
+      ]}
+      emptyValues={{
+        code: '',
+        name: '',
+        locomotiveType: 'DIESEL',
+        status: 'AVAILABLE',
+        maxPullWeightTons: 0,
+        maxTrainLengthMeters: 760,
+        powerKw: '',
+        tractionForceKn: '',
+        maxSpeedKmh: '',
+      }}
+    />
+  );
+}

apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx

@@ -0,0 +1,379 @@
+import { FormEvent, useMemo, useState } from 'react';
+import { Edit, Eye, Plus, Search, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useCreateRoute, useDeactivateRoute, useRouteYards, useRoutes, useUpdateRoute } from '@/hooks/useRoutes';
+import { useToast } from '@/hooks/use-toast';
+import type { RouteRecord, YardRef } from '@/services/routes.service';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@edr/ui-common';
+
+type RouteFormState = {
+  name: string;
+  milestones: string[];
+};
+
+const emptyForm = (): RouteFormState => ({ name: '', milestones: ['', ''] });
+
+const yardLabel = (yard?: YardRef | null) => (yard ? `${yard.label} (${yard.code})` : '-');
+
+const routeStops = (route: RouteRecord) =>
+  (route.milestones ?? [])
+    .sort((left, right) => left.sequenceNo - right.sequenceNo)
+    .map((milestone) => milestone.yard?.label ?? milestone.yard?.code ?? milestone.yardId);
+
+const normalizeRouteError = (error: unknown) => {
+  const responseData = (error as { response?: { data?: unknown } })?.response?.data;
+  const data = responseData && typeof responseData === 'object' ? (responseData as Record<string, unknown>) : undefined;
+  const rawMessage = data?.message ?? data?.error ?? (error as Error)?.message;
+
+  return Array.isArray(rawMessage)
+    ? rawMessage.join(', ')
+    : rawMessage
+      ? String(rawMessage)
+      : 'Save failed';
+};
+
+export default function RoutesPage() {
+  const [search, setSearch] = useState('');
+  const [formOpen, setFormOpen] = useState(false);
+  const [viewing, setViewing] = useState<RouteRecord | null>(null);
+  const [editing, setEditing] = useState<RouteRecord | null>(null);
+  const [form, setForm] = useState<RouteFormState>(emptyForm());
+  const { toast } = useToast();
+
+  const routesQuery = useRoutes();
+  const yardsQuery = useRouteYards();
+  const createMutation = useCreateRoute();
+  const updateMutation = useUpdateRoute();
+  const deactivateMutation = useDeactivateRoute();
+
+  const filteredRoutes = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return routesQuery.data ?? [];
+
+    return (routesQuery.data ?? []).filter((route) => {
+      const searchable = [
+        route.name,
+        route.originYard?.label,
+        route.originYard?.code,
+        route.destinationYard?.label,
+        route.destinationYard?.code,
+        ...routeStops(route),
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+
+      return searchable.includes(query);
+    });
+  }, [routesQuery.data, search]);
+
+  const yardOptions = useMemo(
+    () =>
+      (yardsQuery.data ?? []).map((yard) => ({
+        value: yard.id,
+        label: `${yard.label} (${yard.code})`,
+      })),
+    [yardsQuery.data],
+  );
+
+  const resetForm = () => {
+    setFormOpen(false);
+    setEditing(null);
+    setForm(emptyForm());
+  };
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm());
+    setFormOpen(true);
+  };
+
+  const openEdit = (route: RouteRecord) => {
+    setEditing(route);
+    setForm({
+      name: route.name,
+      milestones: (route.milestones ?? [])
+        .sort((left, right) => left.sequenceNo - right.sequenceNo)
+        .map((milestone) => milestone.yardId),
+    });
+    setFormOpen(true);
+  };
+
+  const setMilestone = (index: number, yardId: string) => {
+    setForm((current) => ({
+      ...current,
+      milestones: current.milestones.map((value, currentIndex) =>
+        currentIndex === index ? yardId : value,
+      ),
+    }));
+  };
+
+  const addMilestone = () => {
+    setForm((current) => ({ ...current, milestones: [...current.milestones, ''] }));
+  };
+
+  const removeMilestone = (index: number) => {
+    setForm((current) => ({
+      ...current,
+      milestones: current.milestones.filter((_, currentIndex) => currentIndex !== index),
+    }));
+  };
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!form.name.trim()) {
+      toast({ title: 'Save failed', description: 'Route name is required', variant: 'destructive' });
+      return;
+    }
+
+    if (form.milestones.length < 2 || form.milestones.some((yardId) => !yardId)) {
+      toast({
+        title: 'Save failed',
+        description: 'Select at least an origin and destination yard',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      const payload = {
+        name: form.name.trim(),
+        milestones: form.milestones.map((yardId) => ({ yardId })),
+        isActive: editing?.isActive ?? true,
+      };
+
+      if (editing) {
+        await updateMutation.mutateAsync({ id: editing.id, data: payload });
+        toast({ title: 'Route updated' });
+      } else {
+        await createMutation.mutateAsync(payload);
+        toast({ title: 'Route created' });
+      }
+
+      resetForm();
+    } catch (error) {
+      toast({ title: 'Save failed', description: normalizeRouteError(error), variant: 'destructive' });
+    }
+  };
+
+  const handleDeactivate = async (route: RouteRecord) => {
+    if (!window.confirm('Deactivate this route?')) return;
+
+    try {
+      await deactivateMutation.mutateAsync(route.id);
+      toast({ title: 'Route deactivated' });
+    } catch {
+      toast({ title: 'Deactivate failed', description: 'Could not deactivate route', variant: 'destructive' });
+    }
+  };
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  const availableOptionsForIndex = (index: number) => {
+    const selectedByOthers = new Set(
+      form.milestones.filter((value, currentIndex) => currentIndex !== index && value),
+    );
+
+    return yardOptions.filter(
+      (option) => option.value === form.milestones[index] || !selectedByOthers.has(option.value),
+    );
+  };
+
+  return (
+    <div className="space-y-5 p-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Routes</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Build train routes from an ordered yard list where the first stop is the origin and the last stop is the destination.
+          </p>
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="size-4" />
+          Add Route
+        </Button>
+      </div>
+
+      <div className="flex max-w-md items-center gap-2 rounded-md border bg-background px-3">
+        <Search className="size-4 text-muted-foreground" />
+        <Input
+          className="border-0 px-0 shadow-none focus-visible:ring-0"
+          placeholder="Search routes"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+      </div>
+
+      <div className="overflow-hidden rounded-lg border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Origin</TableHead>
+              <TableHead>Destination</TableHead>
+              <TableHead>Milestones</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-[150px] text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredRoutes.map((route) => (
+              <TableRow key={route.id}>
+                <TableCell>{route.name}</TableCell>
+                <TableCell>{yardLabel(route.originYard)}</TableCell>
+                <TableCell>{yardLabel(route.destinationYard)}</TableCell>
+                <TableCell>{Math.max((route.milestones?.length ?? 0) - 2, 0)}</TableCell>
+                <TableCell>{route.isActive ? 'Active' : 'Inactive'}</TableCell>
+                <TableCell>
+                  <div className="flex justify-end gap-1">
+                    <Button variant="ghost" size="icon" onClick={() => setViewing(route)} title="View">
+                      <Eye className="size-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => openEdit(route)} title="Edit">
+                      <Edit className="size-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleDeactivate(route)}
+                      title="Deactivate"
+                      disabled={!route.isActive || deactivateMutation.isPending}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+            {!routesQuery.isLoading && filteredRoutes.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="h-28 text-center text-muted-foreground">
+                  No routes found.
+                </TableCell>
+              </TableRow>
+            ) : null}
+            {routesQuery.isLoading ? (
+              <TableRow>
+                <TableCell colSpan={6} className="h-28 text-center text-muted-foreground">
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : null}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Dialog open={formOpen} onOpenChange={(open) => (!open ? resetForm() : setFormOpen(true))}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editing ? 'Edit Route' : 'Add Route'}</DialogTitle>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="route-name">Name</Label>
+              <Input
+                id="route-name"
+                value={form.name}
+                onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Stops</Label>
+                <Button type="button" variant="outline" size="sm" onClick={addMilestone}>
+                  <Plus className="size-4" />
+                  Add next milestone
+                </Button>
+              </div>
+              {form.milestones.map((yardId, index) => {
+                const role = index === 0 ? 'Origin' : index === form.milestones.length - 1 ? 'Destination' : 'Milestone';
+                const availableOptions = availableOptionsForIndex(index);
+                return (
+                  <div key={`${role}-${index}`} className="grid gap-2 rounded-lg border p-3 sm:grid-cols-[120px,1fr,auto] sm:items-center">
+                    <p className="text-sm font-medium">{role}</p>
+                    <Select value={yardId} onValueChange={(value) => setMilestone(index, value)}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select yard" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeMilestone(index)}
+                      disabled={form.milestones.length <= 2}
+                      title="Remove stop"
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={resetForm}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                Save
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={Boolean(viewing)} onOpenChange={(open) => (!open ? setViewing(null) : null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Route details</DialogTitle>
+          </DialogHeader>
+          {viewing ? (
+            <div className="space-y-3 text-sm">
+              <div>
+                <p className="font-medium">Name</p>
+                <p className="text-muted-foreground">{viewing.name}</p>
+              </div>
+              <div>
+                <p className="font-medium">Status</p>
+                <p className="text-muted-foreground">{viewing.isActive ? 'Active' : 'Inactive'}</p>
+              </div>
+              <div>
+                <p className="font-medium">Stops</p>
+                <div className="mt-2 space-y-2">
+                  {routeStops(viewing).map((stop, index, stops) => (
+                    <div key={`${stop}-${index}`} className="rounded-md border px-3 py-2 text-muted-foreground">
+                      {index === 0 ? 'Origin' : index === stops.length - 1 ? 'Destination' : `Milestone ${index}`}:
+                      {' '}
+                      {stop}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}