booking operations and trains scheduling also allocations

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

@@ -1,36 +1,110 @@
-import { useParams } from 'react-router-dom';
-import { useTrain } from '@/hooks/useTrains';
-// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-// import { Skeleton } from '@/components/ui/skeleton';
-// import { AssignWagonDialog } from '@/components/AssignWagonDialog';
-// import { WagonsTable } from '@/components/WagonsTable';
-import { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@edr/ui-common';
-import { AssignWagonDialog } from '@/components/wagons/AssignWagonDialog';
-import { WagonsTable } from '@/components/wagons/WagonsTable';
+import { useParams, Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { Badge, Button, Card, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";
+
+import { AssignWagonDialog } from "@/components/wagons/AssignWagonDialog";
+import { WagonsTable } from "@/components/wagons/WagonsTable";
+import { useTrain } from "@/hooks/useTrains";
 
 export default function TrainDetailPage() {
   const { id } = useParams<{ id: string }>();
   const { data: train, isLoading } = useTrain(id!);
 
-  if (isLoading) return <Skeleton className="h-96 w-full" />;
-  if (!train) return <div>Train not found</div>;
+  if (isLoading) {
+    return (
+      <Group justify="center" py="xl">
+        <Loader size="sm" />
+      </Group>
+    );
+  }
+
+  if (!train) {
+    return (
+      <Text c="dimmed" py="xl">
+        Train not found
+      </Text>
+    );
+  }
+
+  const title = train.trainNumber || train.code;
+  const subtitle = train.trainName || "Unnamed train";
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
-        <CardContent className="grid md:grid-cols-2 gap-4">
-          <div><span className="font-medium">Status:</span> {train.status}</div>
-          <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
-          <div><span className="font-medium">Origin Station:</span> {train.originStationId || '-'}</div>
-          <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
-        </CardContent>
+    <Stack gap="md">
+      <Button
+        component={Link}
+        to="/dashboard/trains"
+        variant="subtle"
+        color="gray"
+        size="compact-sm"
+        leftSection={<ArrowLeft size={16} />}
+        w="fit-content"
+      >
+        Back to trains
+      </Button>
+
+      <Card radius="lg" padding="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+        <Stack gap="md">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Text fw={700} size="lg">
+                {title}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {subtitle}
+              </Text>
+            </Stack>
+            <Badge variant="light" color="gray" size="lg">
+              {train.status}
+            </Badge>
+          </Group>
+
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="md">
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed">
+                Code
+              </Text>
+              <Text size="sm" fw={500}>
+                {train.code}
+              </Text>
+            </Stack>
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed">
+                Capacity
+              </Text>
+              <Text size="sm" fw={500}>
+                {train.capacityTons} tons
+              </Text>
+            </Stack>
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed">
+                Locomotive
+              </Text>
+              <Text size="sm" fw={500}>
+                {train.locomotiveNumber || "—"}
+              </Text>
+            </Stack>
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed">
+                Origin station
+              </Text>
+              <Text size="sm" fw={500}>
+                {train.originStationId || "—"}
+              </Text>
+            </Stack>
+          </SimpleGrid>
+        </Stack>
       </Card>
-      <div className="flex justify-between items-center">
-        <h2 className="text-xl font-semibold">Wagons</h2>
-        <AssignWagonDialog trainId={train.id} />
-      </div>
-      <WagonsTable trainId={train.id} />
-    </div>
+
+      <Card radius="lg" padding="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+        <Stack gap="md">
+          <Group justify="space-between" align="center">
+            <Text fw={600}>Assigned wagons</Text>
+            <AssignWagonDialog trainId={train.id} />
+          </Group>
+          <WagonsTable trainId={train.id} />
+        </Stack>
+      </Card>
+    </Stack>
   );
-}
+}