Merge branch 'freight_feature/payments' of github.com:Tria-plc/edr-platform into freight_feature/payments

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleTrackPage.tsx

@@ -16,7 +16,7 @@ import {
   Group,
   Loader,
   Paper,
-  SimpleGrid,
+  Progress,
   Stack,
   Text,
   ThemeIcon,
@@ -25,12 +25,8 @@ import {
 } from "@mantine/core";
 
 import { RouteCorridorTrack } from "@/components/trainScheduling/RouteCorridorTrack";
-import {
-  RouteCorridor,
-  StatTile,
-  StatusPill,
-  scheduleBrand,
-} from "@/components/trainScheduling/scheduleVisuals";
+import { RouteCorridor, StatusPill } from "@/components/trainScheduling/scheduleVisuals";
+import { freightBrand } from "@/theme/freight-brand";
 import { useTrainTrack, useScheduleMutations } from "@/hooks/trainScheduling/useTrainScheduling";
 import { useToast } from "@/hooks/use-toast";
 
@@ -54,6 +50,33 @@ function formatDateTime(iso?: string | null) {
   });
 }
 
+/** Compact icon + label + value cell used in the header meta strip. */
+function MetaStat({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+      <ThemeIcon size={32} radius="md" variant="light" color="green">
+        {icon}
+      </ThemeIcon>
+      <Stack gap={0} style={{ minWidth: 0 }}>
+        <Text size="10px" fw={700} tt="uppercase" c="dimmed" style={{ letterSpacing: 0.5 }}>
+          {label}
+        </Text>
+        <Text size="sm" fw={700} c="dark.5" truncate>
+          {value}
+        </Text>
+      </Stack>
+    </Group>
+  );
+}
+
 export default function TrainScheduleTrackPage() {
   const { scheduleId } = useParams<{ scheduleId: string }>();
   const { toast } = useToast();
@@ -63,7 +86,7 @@ export default function TrainScheduleTrackPage() {
   if (trackQuery.isLoading) {
     return (
       <Group justify="center" py="xl">
-        <Loader size="sm" />
+        <Loader size="sm" color="green" />
       </Group>
     );
   }
@@ -80,7 +103,9 @@ export default function TrainScheduleTrackPage() {
   const canLog = track.status === "DISPATCHED";
   const totalStations = track.stations.length;
   const reached = Math.min(track.currentSequenceNo + 1, totalStations);
-  const progressLabel = `${reached} / ${totalStations}`;
+  const progressPct = totalStations > 1 ? (track.currentSequenceNo / (totalStations - 1)) * 100 : 0;
+  const clampedPct = Math.min(100, Math.max(0, progressPct));
+  const currentStation = track.stations[Math.max(0, track.currentSequenceNo)]?.label ?? "—";
 
   const handleLog = (sequenceNo: number) => {
     const isFinal = sequenceNo === track.stations[totalStations - 1]?.sequenceNo;
@@ -105,7 +130,7 @@ export default function TrainScheduleTrackPage() {
   };
 
   return (
-    <Stack gap="lg">
+    <Stack gap="md" px={{ base: "xs", sm: 0 }} py="md" maw={1080} mx="auto" w="100%">
       <Button
         component={Link}
         to={`/dashboard/operations/train-scheduling-v2/${scheduleId}`}
@@ -118,89 +143,111 @@ export default function TrainScheduleTrackPage() {
         Back to schedule
       </Button>
 
-      {/* Hero */}
-      <Paper
-        radius="xl"
-        p="xl"
-        style={{
-          position: "relative",
-          overflow: "hidden",
-          background: scheduleBrand.heroGradient,
-          boxShadow: scheduleBrand.shadow,
-        }}
-      >
-        <Box
-          style={{
-            position: "absolute",
-            top: -90,
-            right: -50,
-            width: 280,
-            height: 280,
-            borderRadius: "50%",
-            background: "rgba(255,255,255,0.10)",
-            pointerEvents: "none",
-          }}
-        />
-        <Stack gap="lg" style={{ position: "relative" }}>
-          <Group justify="space-between" align="flex-start" wrap="wrap">
-            <Group gap="md" align="flex-start" wrap="nowrap">
-              <ThemeIcon size={56} radius="lg" variant="white" style={{ color: "var(--mantine-color-green-7)" }}>
-                <Navigation size={28} />
-              </ThemeIcon>
-              <Stack gap={6}>
+      {/* Header */}
+      <Paper radius="lg" withBorder p="lg" style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+        <Stack gap="lg">
+          <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
+            <Group gap="md" align="flex-start" wrap="nowrap" style={{ minWidth: 0 }}>
+              <Box
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 12,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: freightBrand.gradient,
+                  color: "white",
+                  flexShrink: 0,
+                }}
+              >
+                <Navigation size={24} />
+              </Box>
+              <Stack gap={6} style={{ minWidth: 0 }}>
                 <Group gap="sm" align="center" wrap="wrap">
-                  <Title order={2} c="white" fw={700}>
-                    Track train
+                  <Title order={3} fw={800}>
+                    Train tracking
                   </Title>
                   {track.trainNumber ? (
-                    <Badge variant="white" c="green.8" radius="sm" style={{ fontWeight: 600 }}>
+                    <Badge variant="light" color="green" radius="sm">
                       {track.trainNumber}
                     </Badge>
                   ) : null}
                   {track.direction ? (
-                    <Badge variant="white" c="green.8" radius="sm">
+                    <Badge variant="light" color="gray" radius="sm">
                       {track.direction}
                     </Badge>
                   ) : null}
                 </Group>
-                <Box maw={340}>
-                  <RouteCorridor onDark origin={track.origin} destination={track.destination} />
+                <Box maw={360}>
+                  <RouteCorridor origin={track.origin} destination={track.destination} variant="compact" />
                 </Box>
-                <StatusPill status={track.status} />
               </Stack>
             </Group>
+            <StatusPill status={track.status} />
           </Group>
 
-          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
-            <StatTile onDark icon={Train} label="Progress" value={progressLabel} hint="stations reached" />
-            <StatTile onDark icon={MapPin} label="Current" value={track.stations[Math.max(0, track.currentSequenceNo)]?.label ?? "—"} />
-            <StatTile onDark icon={CalendarClock} label="Departed" value={formatDateTime(track.actualDepartureAt)} />
-            <StatTile onDark icon={Flag} label="Arrived" value={formatDateTime(track.actualArrivalAt)} />
-          </SimpleGrid>
+          {/* Journey progress */}
+          <Box>
+            <Group justify="space-between" mb={6}>
+              <Text size="xs" fw={700} c="gray.7" tt="uppercase" style={{ letterSpacing: 0.4 }}>
+                Journey progress
+              </Text>
+              <Text size="xs" fw={700} c="green.8">
+                {reached} / {totalStations} stations · {Math.round(clampedPct)}%
+              </Text>
+            </Group>
+            <Progress
+              value={clampedPct}
+              size="lg"
+              radius="xl"
+              color="green"
+              striped={track.status === "DISPATCHED"}
+              animated={track.status === "DISPATCHED"}
+            />
+          </Box>
+
+          {/* Meta strip */}
+          <Group justify="space-between" wrap="wrap" gap="lg">
+            <MetaStat icon={<MapPin size={16} />} label="Current" value={currentStation} />
+            <MetaStat
+              icon={<CalendarClock size={16} />}
+              label="Departed"
+              value={formatDateTime(track.actualDepartureAt)}
+            />
+            <MetaStat
+              icon={<Flag size={16} />}
+              label="Arrived"
+              value={formatDateTime(track.actualArrivalAt)}
+            />
+            <MetaStat
+              icon={<Train size={16} />}
+              label="Stations"
+              value={`${reached} of ${totalStations}`}
+            />
+          </Group>
         </Stack>
       </Paper>
 
       {/* Corridor */}
-      <Paper radius="xl" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
-        <Stack gap="lg">
-          <Group justify="space-between" align="center" wrap="nowrap">
-            <Group gap="md" align="center" wrap="nowrap">
-              <ThemeIcon size={44} radius="md" variant="gradient" gradient={{ from: "green", to: "teal", deg: 135 }}>
-                <Navigation size={22} />
-              </ThemeIcon>
-              <Stack gap={2}>
-                <Title order={4} fw={700}>
-                  Route corridor
-                </Title>
-                <Text size="sm" c="dimmed">
-                  {canLog
-                    ? "Log the train passing each station; the final station marks arrival."
-                    : track.status === "ARRIVED"
-                      ? "This train has arrived at its destination."
-                      : "Tracking becomes available once the train is dispatched."}
-                </Text>
-              </Stack>
-            </Group>
+      <Paper radius="lg" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+        <Stack gap="md">
+          <Group gap="sm" align="center" wrap="nowrap">
+            <ThemeIcon size={34} radius="md" variant="light" color="green">
+              <Navigation size={17} />
+            </ThemeIcon>
+            <Stack gap={0}>
+              <Text fw={800} size="sm">
+                Route corridor
+              </Text>
+              <Text size="xs" c="dimmed">
+                {canLog
+                  ? "Log the train passing each station; the final station marks arrival."
+                  : track.status === "ARRIVED"
+                    ? "This train has arrived at its destination."
+                    : "Tracking becomes available once the train is dispatched."}
+              </Text>
+            </Stack>
           </Group>
 
           <RouteCorridorTrack
@@ -216,47 +263,68 @@ export default function TrainScheduleTrackPage() {
         </Stack>
       </Paper>
 
-      {/* Timeline */}
-      <Paper radius="xl" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
-        <Stack gap="md">
-          <Title order={5} fw={700}>
-            Checkpoint log
-          </Title>
-          {track.checkpoints.length === 0 ? (
-            <Text size="sm" c="dimmed">
-              No checkpoints logged yet.
+      {/* Checkpoint log */}
+      <Paper radius="lg" p="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+        <Group gap="sm" align="center" wrap="nowrap" mb="md">
+          <ThemeIcon size={34} radius="md" variant="light" color="green">
+            <CheckCircle2 size={17} />
+          </ThemeIcon>
+          <Stack gap={0}>
+            <Text fw={800} size="sm">
+              Checkpoint log
             </Text>
-          ) : (
-            <Timeline active={track.checkpoints.length} bulletSize={22} lineWidth={2} color="green">
-              {track.checkpoints.map((cp) => (
-                <Timeline.Item
-                  key={cp.id}
-                  bullet={cp.kind === "ARRIVED" ? <CheckCircle2 size={13} /> : <MapPin size={12} />}
-                  title={
-                    <Group gap="sm">
-                      <Text fw={600} size="sm">
-                        {cp.label ?? `Station ${cp.sequenceNo}`}
-                      </Text>
-                      <Badge
-                        size="xs"
-                        radius="sm"
-                        variant="light"
-                        color={cp.kind === "ARRIVED" ? "teal" : cp.kind === "DEPARTED" ? "blue" : "green"}
-                      >
-                        {cp.kind}
-                      </Badge>
-                    </Group>
-                  }
-                >
-                  <Text size="xs" c="dimmed">
-                    {formatDateTime(cp.occurredAt)}
+            <Text size="xs" c="dimmed">
+              {track.checkpoints.length} event{track.checkpoints.length === 1 ? "" : "s"} recorded
+            </Text>
+          </Stack>
+        </Group>
+
+        {track.checkpoints.length === 0 ? (
+          <Stack align="center" gap="xs" py="xl">
+            <ThemeIcon size={44} radius="xl" variant="light" color="gray">
+              <MapPin size={20} />
+            </ThemeIcon>
+            <Text size="sm" fw={600} c="gray.7">
+              No checkpoints yet
+            </Text>
+            <Text size="xs" c="dimmed" ta="center" maw={300}>
+              Each station the train passes will be logged here with its timestamp.
+            </Text>
+          </Stack>
+        ) : (
+          <Timeline active={track.checkpoints.length} bulletSize={22} lineWidth={2} color="green">
+            {track.checkpoints.map((cp) => (
+              <Timeline.Item
+                key={cp.id}
+                bullet={cp.kind === "ARRIVED" ? <CheckCircle2 size={13} /> : <MapPin size={12} />}
+                title={
+                  <Group gap="sm">
+                    <Text fw={700} size="sm">
+                      {cp.label ?? `Station ${cp.sequenceNo}`}
+                    </Text>
+                    <Badge
+                      size="xs"
+                      radius="sm"
+                      variant="light"
+                      color={cp.kind === "ARRIVED" ? "teal" : cp.kind === "DEPARTED" ? "blue" : "green"}
+                    >
+                      {cp.kind}
+                    </Badge>
+                  </Group>
+                }
+              >
+                <Text size="xs" c="dimmed">
+                  {formatDateTime(cp.occurredAt)}
+                </Text>
+                {cp.note ? (
+                  <Text size="xs" mt={2}>
+                    {cp.note}
                   </Text>
-                  {cp.note ? <Text size="xs">{cp.note}</Text> : null}
-                </Timeline.Item>
-              ))}
-            </Timeline>
-          )}
-        </Stack>
+                ) : null}
+              </Timeline.Item>
+            ))}
+          </Timeline>
+        )}
       </Paper>
     </Stack>
   );