style: WIP BatchBoard and train schedule

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

@@ -1,12 +1,13 @@
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
+  ActionIcon,
   Alert,
   Box,
   Button,
   Card,
-  Container,
   Group,
+  Menu,
   Paper,
   RingProgress,
   Select,
@@ -21,7 +22,9 @@ import {
   ArrowRight,
   CalendarClock,
   CalendarDays,
+  Eye,
   Inbox,
+  MoreHorizontal,
   Package,
   Ruler,
   Train,
@@ -31,7 +34,7 @@ import {
 import type { ColumnDef } from "@edr/ui-common";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 
-import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import {
@@ -40,7 +43,7 @@ import {
   totalBookingCount,
   WindowStatusPill,
 } from "@/components/trainScheduling/batchVisuals";
-import { RouteCorridor, StatTile } from "@/components/trainScheduling/scheduleVisuals";
+import { RouteCorridor } from "@/components/trainScheduling/scheduleVisuals";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { FREIGHT_BRAND, FREIGHT_BRAND_DARK } from "@/theme/freight-brand";
 import { useBatchBoard } from "@/hooks/trainScheduling/useTrainScheduling";
@@ -365,7 +368,7 @@ function CardSkeleton() {
 
 export default function BatchBoardPage() {
   const navigate = useNavigate();
-  const { data, isLoading, isFetching, refetch } = useBatchBoard();
+  const { data, isLoading, isError, isFetching, refetch } = useBatchBoard();
   const { viewMode, setViewMode } = useFleetViewMode("batch-board");
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [search, setSearch] = useState("");
@@ -549,72 +552,69 @@ export default function BatchBoardPage() {
         header: "",
         meta: { headerClassName, cellClassName: `${cellClassName} whitespace-nowrap` },
         cell: ({ row }) => (
-          <Group justify="flex-end" wrap="nowrap">
-            <Button
-              variant="light"
-              color="green"
-              size="compact-sm"
-              rightSection={<ArrowRight size={14} />}
-              onClick={() =>
-                navigate(`/dashboard/operations/batch-board/${row.original.scheduleId}`)
-              }
-            >
-              View windows
-            </Button>
+          <Group justify="flex-end" wrap="nowrap" onClick={(e) => e.stopPropagation()}>
+            <Menu position="bottom-end" withinPortal shadow="md" width={180}>
+              <Menu.Target>
+                <ActionIcon variant="subtle" color="gray" aria-label="Row actions">
+                  <MoreHorizontal size={16} />
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item
+                  leftSection={<Eye size={15} />}
+                  onClick={() =>
+                    navigate(`/dashboard/operations/batch-board/${row.original.scheduleId}`)
+                  }
+                >
+                  View windows
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
           </Group>
         ),
       },
     ];
   }, [navigate]);
 
-  const tableStatus = isLoading ? "loading" : "success";
+  const tableStatus = isLoading ? "loading" : isError ? "error" : "success";
 
   return (
-    <Container fluid py="lg" px="xl">
-      <Breadcrumbs items={[{ label: "Operations" }, { label: "Batch board" }]} />
+    <PageContainer>
+      <PageHeader
+        title="Batch Board"
+        subtitle="Active schedules and their booking windows."
+        action={
+          <Button variant="default" loading={isFetching} onClick={() => void refetch()}>
+            Refresh
+          </Button>
+        }
+      />
 
-      <SimpleGrid cols={{ base: 1, xs: 3 }} spacing="md" mt="md">
-        <StatTile
-          icon={Train}
-          label="Active schedules"
-          value={isLoading ? "…" : schedules.length}
-          hint="on the board right now"
-          accent="#F2A516"
-          graph="area"
-          graphAccent="gold"
-        />
-        <StatTile
-          icon={CalendarDays}
-          label="Open windows"
-          value={isLoading ? "…" : summary.openWindows}
-          hint="accepting bookings"
-          accent="#FB8C2E"
-          graph="line"
-          graphAccent="orange"
-        />
-        <StatTile
-          icon={Package}
-          label="Bookings in play"
-          value={isLoading ? "…" : summary.totalBookings}
-          hint={`${summary.totalWagons} wagons allocated`}
-          accent="#F2A516"
-          graph="ring"
-          graphAccent="gold"
-          graphPct={
-            schedules.length
-              ? Math.min(100, Math.round((summary.openWindows / schedules.length) * 100))
-              : 0
-          }
-        />
-      </SimpleGrid>
+      <KpiStrip
+        loading={isLoading}
+        items={[
+          {
+            label: "Active schedules",
+            value: schedules.length,
+            hint: "on the board right now",
+            icon: Train,
+          },
+          {
+            label: "Open windows",
+            value: summary.openWindows,
+            hint: "accepting bookings",
+            icon: CalendarDays,
+          },
+          {
+            label: "Bookings in play",
+            value: summary.totalBookings,
+            hint: `${summary.totalWagons} wagons allocated`,
+            icon: Package,
+          },
+        ]}
+      />
 
-      <Card
-        radius="lg"
-        padding={0}
-        withBorder
-        mt="lg"
-        style={{ borderColor: "var(--mantine-color-gray-2)" }}
-      >
+      <Card p={0}>
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
             <FleetToolbar
@@ -647,6 +647,17 @@ export default function BatchBoardPage() {
               columns={columns}
               data={paged}
               status={tableStatus}
+              onRowClick={(schedule) =>
+                navigate(`/dashboard/operations/batch-board/${schedule.scheduleId}`)
+              }
+              error={
+                isError
+                  ? {
+                      message: "Failed to load the batch board.",
+                      onRetry: () => void refetch(),
+                    }
+                  : undefined
+              }
               emptyMessage="No active schedules"
               pagination={{
                 pageIndex: pagination.pageIndex,
@@ -688,7 +699,6 @@ export default function BatchBoardPage() {
                     borderRadius: 20,
                     background: "white",
                     border: "1px solid var(--mantine-color-gray-2)",
-                    boxShadow: "0 4px 12px rgba(15,23,42,0.06)",
                   }}
                 >
                   <Inbox size={28} color="var(--mantine-color-gray-5)" />
@@ -711,18 +721,6 @@ export default function BatchBoardPage() {
           )}
         </Stack>
       </Card>
-
-      <Group justify="flex-end" mt="md">
-        <Button
-          variant="subtle"
-          color="gray"
-          size="xs"
-          loading={isFetching}
-          onClick={() => void refetch()}
-        >
-          Refresh
-        </Button>
-      </Group>
-    </Container>
+    </PageContainer>
   );
 }

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

@@ -3,10 +3,12 @@ import { useNavigate } from "react-router-dom";
 import { isAxiosError } from "axios";
 import type { ColumnDef } from "@edr/ui-common";
 import {
+  ActionIcon,
   Box,
   Button,
   Card,
   Group,
+  Menu,
   Modal,
   Select,
   SimpleGrid,
@@ -15,16 +17,25 @@ import {
   TextInput,
   ThemeIcon,
 } from "@mantine/core";
-import { ArrowRight, CalendarClock, Navigation, Send, Train, Weight } from "lucide-react";
+import {
+  ArrowRight,
+  Ban,
+  CalendarClock,
+  Eye,
+  MoreHorizontal,
+  Navigation,
+  Send,
+  Train,
+  Weight,
+} from "lucide-react";
 
+import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import { FreightTypeBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
 import {
   RouteCorridor,
-  StatTile,
   StatusPill,
-  scheduleBrand,
 } from "@/components/trainScheduling/scheduleVisuals";
 import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
@@ -253,61 +264,65 @@ export default function TrainScheduleV2ListPage() {
         id: "actions",
         header: "Actions",
         meta: { headerClassName, cellClassName: `${cellClassName} whitespace-nowrap` },
-        cell: ({ row }) => (
-          <Group gap={6} justify="flex-end" wrap="nowrap">
-            <Button
-              variant="light"
-              color="green"
-              size="compact-sm"
-              rightSection={<ArrowRight size={14} />}
-              onClick={() =>
-                navigate(`/dashboard/operations/train-scheduling-v2/${row.original.id}`)
-              }
-            >
-              Open
-            </Button>
-            {["DISPATCHED", "ARRIVED"].includes(row.original.status) ? (
-              <Button
-                variant="light"
-                color="teal"
-                size="compact-sm"
-                leftSection={<Navigation size={14} />}
-                onClick={() =>
-                  navigate(
-                    `/dashboard/operations/train-scheduling-v2/${row.original.id}/track`,
-                  )
-                }
-              >
-                Track
-              </Button>
-            ) : null}
-            {["DRAFT", "SCHEDULED"].includes(row.original.status) ? (
-              <Button
-                variant="subtle"
-                color="red"
-                size="compact-sm"
-                loading={cancel.isPending}
-                onClick={async () => {
-                  try {
-                    await cancel.mutateAsync({
-                      id: row.original.id,
-                      freightType: row.original.freightType ?? "CONTAINER",
-                    });
-                    toast({ title: "Schedule cancelled" });
-                  } catch (err) {
-                    toast({
-                      title: "Cancel failed",
-                      description: parseError(err, "Could not cancel"),
-                      variant: "destructive",
-                    });
-                  }
-                }}
-              >
-                Cancel
-              </Button>
-            ) : null}
-          </Group>
-        ),
+        cell: ({ row }) => {
+          const schedule = row.original;
+          return (
+            <Group justify="flex-end" onClick={(e) => e.stopPropagation()}>
+              <Menu position="bottom-end" withinPortal shadow="md" width={190}>
+                <Menu.Target>
+                  <ActionIcon variant="subtle" color="gray" aria-label="Row actions">
+                    <MoreHorizontal size={16} />
+                  </ActionIcon>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  <Menu.Item
+                    leftSection={<Eye size={15} />}
+                    onClick={() =>
+                      navigate(`/dashboard/operations/train-scheduling-v2/${schedule.id}`)
+                    }
+                  >
+                    View detail
+                  </Menu.Item>
+                  {["DISPATCHED", "ARRIVED"].includes(schedule.status) ? (
+                    <Menu.Item
+                      leftSection={<Navigation size={15} />}
+                      onClick={() =>
+                        navigate(
+                          `/dashboard/operations/train-scheduling-v2/${schedule.id}/track`,
+                        )
+                      }
+                    >
+                      Track
+                    </Menu.Item>
+                  ) : null}
+                  {["DRAFT", "SCHEDULED"].includes(schedule.status) ? (
+                    <Menu.Item
+                      color="red"
+                      leftSection={<Ban size={15} />}
+                      onClick={async () => {
+                        try {
+                          await cancel.mutateAsync({
+                            id: schedule.id,
+                            freightType: schedule.freightType ?? "CONTAINER",
+                          });
+                          toast({ title: "Schedule cancelled" });
+                        } catch (err) {
+                          toast({
+                            title: "Cancel failed",
+                            description: parseError(err, "Could not cancel"),
+                            variant: "destructive",
+                          });
+                        }
+                      }}
+                    >
+                      Cancel schedule
+                    </Menu.Item>
+                  ) : null}
+                </Menu.Dropdown>
+              </Menu>
+            </Group>
+          );
+        },
       },
     ];
   }, [navigate, cancel.isPending, cancel, toast]);
@@ -340,65 +355,33 @@ export default function TrainScheduleV2ListPage() {
       : "success";
 
   return (
-    <Stack gap="lg">
-      <Group justify="flex-end">
-        <Button
-          size="md"
-          radius="lg"
-          color="green"
-          leftSection={<Train size={18} />}
-          onClick={() => setCreateOpen(true)}
-        >
-          New schedule
-        </Button>
-      </Group>
+    <PageContainer>
+      <PageHeader
+        title="Train Schedules"
+        subtitle="Operational train scheduling with full allocation workflow."
+        action={
+          <Button leftSection={<Train size={18} />} onClick={() => setCreateOpen(true)}>
+            New schedule
+          </Button>
+        }
+      />
 
-      <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
-        <StatTile
-          icon={Train}
-          label="Total trains"
-          value={stats.total}
-          accent="#F2A516"
-          graph="area"
-          graphAccent="gold"
-        />
-        <StatTile
-          icon={CalendarClock}
-          label="Scheduled"
-          value={stats.scheduled}
-          accent="#FB8C2E"
-          graph="line"
-          graphAccent="orange"
-          graphPct={stats.total ? Math.round((stats.scheduled / stats.total) * 100) : 0}
-        />
-        <StatTile
-          icon={Send}
-          label="Dispatched"
-          value={stats.dispatched}
-          accent="#F2A516"
-          graph="ring"
-          graphAccent="gold"
-          graphPct={stats.total ? Math.round((stats.dispatched / stats.total) * 100) : 0}
-        />
-        <StatTile
-          icon={Weight}
-          label="Planned load"
-          value={`${Math.round(stats.weight)}T`}
-          accent="#FB8C2E"
-          graph="area"
-          graphAccent="orange"
-        />
-      </SimpleGrid>
+      <KpiStrip
+        items={[
+          { label: "Total trains", value: stats.total, icon: Train },
+          { label: "Scheduled", value: stats.scheduled, icon: CalendarClock },
+          { label: "Dispatched", value: stats.dispatched, icon: Send },
+          { label: "Planned load", value: `${Math.round(stats.weight)}T`, icon: Weight },
+        ]}
+      />
 
-      <Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
+      <Card p={0}>
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
             <FleetToolbar
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Search schedules…"
-              addLabel="Create schedule"
-              onAdd={() => setCreateOpen(true)}
               viewMode={viewMode}
               onViewModeChange={setViewMode}
               filters={
@@ -442,6 +425,17 @@ export default function TrainScheduleV2ListPage() {
               columns={columns}
               data={paged}
               status={tableStatus}
+              onRowClick={(schedule) =>
+                navigate(`/dashboard/operations/train-scheduling-v2/${schedule.id}`)
+              }
+              error={
+                schedulesQuery.isError
+                  ? {
+                      message: "Failed to load train schedules.",
+                      onRetry: () => void schedulesQuery.refetch(),
+                    }
+                  : undefined
+              }
               emptyMessage="No train schedules found"
               pagination={{
                 pageIndex: pagination.pageIndex,
@@ -554,13 +548,13 @@ export default function TrainScheduleV2ListPage() {
             <Button variant="default" onClick={() => setCreateOpen(false)}>
               Cancel
             </Button>
-            <Button color="green" loading={create.isPending} onClick={handleCreate}>
+            <Button loading={create.isPending} onClick={handleCreate}>
               Create
             </Button>
           </Group>
         </Stack>
       </Modal>
-    </Stack>
+    </PageContainer>
   );
 }
 
@@ -613,31 +607,15 @@ function ScheduleCard({
   const canTrack = ["DISPATCHED", "ARRIVED"].includes(schedule.status);
   return (
     <Card
-      radius="lg"
       padding={0}
       withBorder
       onClick={onOpen}
-      style={{
-        cursor: "pointer",
-        overflow: "hidden",
-        borderColor: "var(--mantine-color-gray-2)",
-        transition: "box-shadow 150ms ease, transform 150ms ease",
-      }}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.boxShadow = scheduleBrand.shadowSm;
-        e.currentTarget.style.transform = "translateY(-2px)";
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.boxShadow = "";
-        e.currentTarget.style.transform = "";
-      }}
+      className="cursor-pointer overflow-hidden transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
     >
-      {/* accent strip */}
-      <Box style={{ height: 4, background: "linear-gradient(90deg, #FBD171, #F2A516)" }} />
       <Stack gap="sm" p="md">
         <Group justify="space-between" align="flex-start" wrap="nowrap">
           <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-            <ThemeIcon size={38} radius="md" variant="light" color="#F2A516">
+            <ThemeIcon size={38} radius="md" variant="light" color="edr-green">
               <Train size={18} />
             </ThemeIcon>
             <Stack gap={0} style={{ minWidth: 0 }}>

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { Button, Card, Group, NumberInput, Stack, Text, Title } from "@mantine/core";
+import { Button, Card, Group, NumberInput, Stack } from "@mantine/core";
 
+import { PageContainer, PageHeader } from "@/components/page";
 import { trainSchedulingService } from "@/services/trainScheduling.service";
 import { useToast } from "@/hooks/use-toast";
 import type { TrainSchedulingGlobalRules } from "@/types/trainScheduling";
@@ -44,15 +45,13 @@ export default function TrainSchedulingGlobalRulesPage() {
   };
 
   return (
-    <Stack gap="lg" maw={720}>
-      <Stack gap={4}>
-        <Title order={3}>Train scheduling rules</Title>
-        <Text size="sm" c="dimmed">
-          Global limits applied when previewing and assigning bookings to trains.
-        </Text>
-      </Stack>
+    <PageContainer>
+      <PageHeader
+        title="Train scheduling rules"
+        subtitle="Global limits applied when previewing and assigning bookings to trains."
+      />
 
-      <Card radius="xl" padding="lg" withBorder>
+      <Card maw={720}>
         <Stack gap="md">
           <NumberInput
             label="Max train length (m)"
@@ -110,12 +109,12 @@ export default function TrainSchedulingGlobalRulesPage() {
             disabled={loading}
           />
           <Group justify="flex-end">
-            <Button color="teal" loading={saving} disabled={loading} onClick={() => void handleSave()}>
+            <Button loading={saving} disabled={loading} onClick={() => void handleSave()}>
               Save rules
             </Button>
           </Group>
         </Stack>
       </Card>
-    </Stack>
+    </PageContainer>
   );
 }