ui fix

apps/edr-freight-web/backoffice/src/components/trainScheduling/scheduleVisuals.tsx

@@ -3,8 +3,13 @@ import { Box, Group, Paper, Stack, Text } from "@mantine/core";
 import type { LucideIcon } from "lucide-react";
 import { MapPin } from "lucide-react";
 
+import { MiniRing, MiniSparkline } from "@/components/common/MiniGraph";
+import type { OverviewAccent } from "@/components/overview/overview.styles";
 import { freightBrand } from "@/theme/freight-brand";
 
+/** Mini-graph variants a StatTile can render at its bottom. */
+export type StatTileGraph = "area" | "line" | "ring" | "none";
+
 /**
  * Shared visual building blocks for the Train Scheduling V2 surfaces.
  * Everything keys off the freight brand green so the list + detail pages
@@ -95,6 +100,9 @@ export function StatTile({
   hint,
   onDark = false,
   accent = freightBrand.primary,
+  graph = "none",
+  graphAccent = "emerald",
+  graphPct,
 }: {
   icon?: LucideIcon;
   label: string;
@@ -102,7 +110,15 @@ export function StatTile({
   hint?: ReactNode;
   onDark?: boolean;
   accent?: string;
+  /** Optional decorative mini-graph at the bottom (ignored on dark tiles). */
+  graph?: StatTileGraph;
+  graphAccent?: OverviewAccent;
+  /** Percentage 0..100 for the ring variant. */
+  graphPct?: number | null;
 }) {
+  // Mini-graphs only render on light tiles (the gradient reads poorly on dark).
+  const showGraph = graph !== "none" && !onDark;
+
   return (
     <Paper
       p="md"
@@ -120,50 +136,64 @@ export function StatTile({
             }
       }
     >
-      <Group gap="sm" wrap="nowrap" align="flex-start">
-        {Icon ? (
-          <Box
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 36,
-              height: 36,
-              borderRadius: 10,
-              flexShrink: 0,
-              background: onDark ? "rgba(255,255,255,0.16)" : `${accent}1a`,
-              color: onDark ? "white" : accent,
-            }}
-          >
-            <Icon size={18} />
-          </Box>
-        ) : null}
-        <Stack gap={2} style={{ minWidth: 0 }}>
-          <Text
-            size="xs"
-            fw={600}
-            tt="uppercase"
-            style={{ letterSpacing: 0.4 }}
-            c={onDark ? "rgba(255,255,255,0.75)" : "dimmed"}
-          >
-            {label}
-          </Text>
-          <Text
-            fw={700}
-            size="lg"
-            lh={1.1}
-            c={onDark ? "white" : undefined}
-            style={{ whiteSpace: "nowrap" }}
-          >
-            {value}
-          </Text>
-          {hint ? (
-            <Text size="xs" c={onDark ? "rgba(255,255,255,0.7)" : "dimmed"}>
-              {hint}
-            </Text>
+      <Stack gap={8}>
+        <Group gap="sm" wrap="nowrap" align="center">
+          {Icon ? (
+            <Box
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 38,
+                height: 38,
+                borderRadius: 10,
+                flexShrink: 0,
+                background: onDark ? "rgba(255,255,255,0.16)" : `${accent}1a`,
+                color: onDark ? "white" : accent,
+              }}
+            >
+              <Icon size={18} />
+            </Box>
           ) : null}
-        </Stack>
-      </Group>
+          <Stack gap={1} style={{ minWidth: 0, flex: 1 }}>
+            <Text
+              fw={800}
+              size="lg"
+              lh={1.05}
+              c={onDark ? "white" : "dark.5"}
+              style={{ whiteSpace: "nowrap" }}
+            >
+              {value}
+            </Text>
+            <Text
+              size="xs"
+              fw={600}
+              c={onDark ? "rgba(255,255,255,0.75)" : "dimmed"}
+              truncate
+            >
+              {label}
+              {hint ? <Text component="span" size="xs" c="dimmed"> · {hint}</Text> : null}
+            </Text>
+          </Stack>
+          {showGraph && graph === "ring" ? (
+            <MiniRing pct={graphPct ?? 0} accent={graphAccent} size={42} stroke={5}>
+              <Text size="9px" fw={800} c="dark.4">
+                {Math.round(graphPct ?? 0)}%
+              </Text>
+            </MiniRing>
+          ) : null}
+        </Group>
+
+        {showGraph && graph !== "ring" ? (
+          <MiniSparkline
+            variant={graph}
+            accent={graphAccent}
+            baseline={(graphPct ?? 50) / 100}
+            seed={label}
+            height={20}
+          />
+        ) : null}
+      </Stack>
     </Paper>
   );
 }