overview, booking and train scheduling ui

2026-09-08 21:48:18 +00:00 · 2026-06-10 07:53:15 +00:00
parent 2b5a0f4e96
commit 0335555892
12 changed files with 207 additions and 257 deletions
--- a/apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiCard.tsx
@@ -1,4 +1,3 @@
-import { useId } from "react";
 import type { LucideIcon } from "lucide-react";
 import { Card, Group, Stack, Text } from "@mantine/core";

@@ -7,20 +6,14 @@ import {
  type OverviewAccent,
 } from "./overview.styles";

-const accentColors = {
-  default: { bg: "var(--mantine-color-gray-1)", color: "var(--mantine-color-gray-6)" },
-  amber: { bg: "var(--mantine-color-yellow-1)", color: "var(--mantine-color-yellow-6)" },
-  emerald: { bg: "var(--freight-brand-muted)", color: "var(--freight-brand)" },
-  rose: { bg: "var(--mantine-color-red-1)", color: "var(--mantine-color-red-6)" },
-  sky: { bg: "var(--mantine-color-blue-1)", color: "var(--mantine-color-blue-6)" },
-};
-
-const ACCENT_TINT: Record<string, string> = {
-  default: "#f8fafc",
-  amber: "#fffbeb",
-  emerald: "#f0fdf4",
-  rose: "#fff1f2",
-  sky: "#f0f9ff",
+/** Pale chip background per accent — matches the Pencil "tinted icon chip" look. */
+const ACCENT_CHIP_BG: Record<string, string> = {
+  default: "#F1F5F4",
+  emerald: "#E7F8F2",
+  amber: "#FEF9C3",
+  rose: "#FFE4E6",
+  sky: "#E0F2FE",
+  violet: "#EDE9FE",
 };

 export interface OverviewKpiItem {
@@ -28,71 +21,66 @@ export interface OverviewKpiItem {
  value: number | string;
  hint?: string;
  icon: LucideIcon;
-  accent?: keyof typeof accentColors;
-  /** Share 0..1 used to fill the radial gauge. Auto-computed by the strip when omitted. */
+  accent?: keyof typeof ACCENT_CHIP_BG;
+  /** Share 0..1 used as a baseline for the decorative trend sparkline. */
  progress?: number;
 }

-/** Radial gauge with the KPI icon at its center. */
-function KpiGauge({
-  progress,
+/** Deterministic, gently-rising series seeded by the KPI label (purely decorative). */
+function sparkHeights(seed: string, baseline: number, count = 9): number[] {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  const out: number[] = [];
+  let v = 0.35 + (baseline > 0 ? Math.min(0.35, baseline * 0.35) : 0.15);
+  for (let i = 0; i < count; i += 1) {
+    h = (Math.imul(h, 1103515245) + 12345) >>> 0;
+    const delta = ((h % 1000) / 1000 - 0.42) * 0.28;
+    v = Math.min(1, Math.max(0.22, v + delta));
+    out.push(v);
+  }
+  // Nudge the final bar up so the series reads as an upward trend.
+  out[out.length - 1] = Math.min(1, out[out.length - 1] + 0.15);
+  return out;
+}
+
+/** Compact bar sparkline; last bar highlighted in the accent colour. */
+function KpiSparkline({
  accent,
-  Icon,
+  baseline,
+  seed,
 }: {
-  progress: number;
  accent: OverviewAccent;
-  Icon: LucideIcon;
+  baseline: number;
+  seed: string;
 }) {
-  const gradientId = useId();
-  const size = 76;
-  const stroke = 9;
-  const radius = (size - stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const clamped = Math.min(1, Math.max(0, progress));
-  const dash = clamped * circumference;
-  const [from, to] = overviewAccentGradients[accent] ?? overviewAccentGradients.default;
+  const [light, deep] = overviewAccentGradients[accent] ?? overviewAccentGradients.default;
+  const bars = sparkHeights(seed, baseline);

  return (
-    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
-      <svg width={size} height={size} style={{ transform: "rotate(-90deg)", display: "block" }}>
-        <defs>
-          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="1">
-            <stop offset="0%" stopColor={from} />
-            <stop offset="100%" stopColor={to} />
-          </linearGradient>
-        </defs>
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="var(--mantine-color-gray-2)"
-          strokeWidth={stroke}
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 4,
+        height: 38,
+        width: "100%",
+      }}
+    >
+      {bars.map((value, index) => (
+        <div
+          key={index}
+          style={{
+            flex: 1,
+            height: Math.round(8 + value * 30),
+            borderRadius: 3,
+            background: index === bars.length - 1 ? deep : light,
+            opacity: index === bars.length - 1 ? 1 : 0.55,
+          }}
        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke={`url(#${gradientId})`}
-          strokeWidth={stroke}
-          strokeLinecap="round"
-          strokeDasharray={`${dash} ${circumference}`}
-          style={{ transition: "stroke-dasharray 500ms ease" }}
-        />
-      </svg>
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: to,
-        }}
-      >
-        <Icon size={24} strokeWidth={2} />
-      </div>
+      ))}
    </div>
  );
 }
@@ -100,69 +88,68 @@ function KpiGauge({
 export function OverviewKpiCard({ item }: { item: OverviewKpiItem }) {
  const Icon = item.icon;
  const accent = item.accent ?? "default";
-  const accentKey = (accent === "emerald" ? "emerald" : accent) as OverviewAccent;
+  const accentKey = accent as OverviewAccent;
  const [, accentDeep] = overviewAccentGradients[accentKey] ?? overviewAccentGradients.default;
-  const progress = item.progress ?? 0;
-  const pct = Math.round(Math.min(1, Math.max(0, progress)) * 100);
+  const chipBg = ACCENT_CHIP_BG[accent] ?? ACCENT_CHIP_BG.default;

  return (
    <Card
      p="lg"
-      radius="lg"
+      radius={16}
      withBorder
      style={{
-        background: `linear-gradient(160deg, ${ACCENT_TINT[accent] ?? "#f8fafc"} 0%, #ffffff 55%)`,
+        background: "#ffffff",
        border: "1px solid var(--mantine-color-gray-2)",
        flex: "1 1 240px",
        minWidth: 220,
        transition: "transform 160ms ease, box-shadow 160ms ease",
-        position: "relative",
-        overflow: "hidden",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-3px)";
-        e.currentTarget.style.boxShadow = "0 12px 28px -12px rgba(15,23,42,0.22)";
+        e.currentTarget.style.boxShadow = "0 12px 28px -12px rgba(15,23,42,0.18)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "none";
      }}
    >
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: 4,
-          background: `linear-gradient(90deg, ${(overviewAccentGradients[accentKey] ?? overviewAccentGradients.default)[0]} 0%, ${accentDeep} 100%)`,
-        }}
-      />
-      <Group justify="space-between" align="center" wrap="nowrap" gap="md" mt={4}>
-        <Stack gap={6} style={{ flex: 1, minWidth: 0 }}>
-          <Text size="xs" fw={700} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.04em" }}>
-            {item.label}
-          </Text>
-          <Text size="32px" fw={800} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
+      <Stack gap={14}>
+        <Group justify="space-between" align="center" wrap="nowrap">
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 38,
+              height: 38,
+              borderRadius: 11,
+              background: chipBg,
+              color: accentDeep,
+              flexShrink: 0,
+            }}
+          >
+            <Icon size={20} strokeWidth={2} />
+          </div>
+        </Group>
+
+        <Stack gap={3} style={{ minWidth: 0 }}>
+          <Text size="30px" fw={800} style={{ lineHeight: 1, letterSpacing: "-0.02em" }} truncate>
            {item.value}
          </Text>
          <Group gap={6} wrap="nowrap">
-            <span
-              style={{
-                width: 7,
-                height: 7,
-                borderRadius: "50%",
-                background: accentDeep,
-                flexShrink: 0,
-              }}
-            />
-            <Text size="xs" c="dimmed" truncate>
-              {item.hint ?? (item.progress != null ? `${pct}% of peak` : "")}
+            <Text size="sm" fw={600} c="dimmed" truncate>
+              {item.label}
            </Text>
+            {item.hint && (
+              <Text size="xs" c="dimmed" truncate>
+                · {item.hint}
+              </Text>
+            )}
          </Group>
        </Stack>
-        <KpiGauge progress={progress} accent={accentKey} Icon={Icon} />
-      </Group>
+
+        <KpiSparkline accent={accentKey} baseline={item.progress ?? 0} seed={item.label} />
+      </Stack>
    </Card>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiStrip.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiStrip.tsx
@@ -23,8 +23,8 @@ export function OverviewKpiStrip({ title, items }: OverviewKpiStripProps) {
      radius="lg"
      withBorder
      style={{
-        background: "linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%)",
-        border: "1px solid var(--freight-brand-border, #bbf7d0)",
+        background: "#ffffff",
+        border: "1px solid var(--mantine-color-gray-2)",
      }}
    >
      {title && (
--- a/apps/edr-freight-web/backoffice/src/components/overview/overview.css
+++ b/apps/edr-freight-web/backoffice/src/components/overview/overview.css
@@ -16,7 +16,7 @@
  font-weight: 600;
 }
 .ov-seg-label[data-active] {
-  color: #15803d;
+  color: #15805f;
 }

 /* ---- Premium tab bar ---- */
@@ -47,9 +47,9 @@
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.18);
 }
 .ov-tab[data-active] {
-  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
+  background: linear-gradient(135deg, #2dbf95 0%, #1b9e7a 100%) !important;
  color: #ffffff !important;
-  box-shadow: 0 10px 20px -8px rgba(21, 128, 61, 0.55);
+  box-shadow: 0 10px 20px -8px rgba(27, 158, 122, 0.55);
  transform: translateY(-1px);
 }
 .ov-tab[data-active]:hover {
--- a/apps/edr-freight-web/backoffice/src/components/overview/overview.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/overview/overview.styles.ts
@@ -9,7 +9,7 @@ export const overviewChartColors = {
  usd: "#0369a1",
  /** Vibrant, well-separated categorical palette for charts. */
  pipeline: [
-    "#16a34a", // green
+    "#1B9E7A", // brand green
    "#0ea5e9", // sky
    "#8b5cf6", // violet
    "#f59e0b", // amber
@@ -25,7 +25,7 @@ export const overviewChartColors = {
 /** Two-stop gradients keyed by KPI accent — used for radial gauges + accent bars. */
 export const overviewAccentGradients = {
  default: ["#94a3b8", "#475569"],
-  emerald: ["#34d399", "#059669"],
+  emerald: ["#34D9AE", "#1B9E7A"],
  amber: ["#fbbf24", "#d97706"],
  rose: ["#fb7185", "#e11d48"],
  sky: ["#38bdf8", "#0284c7"],