Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-28 13:40:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

overview, booking and train scheduling ui

Browse Source
This commit is contained in:
Marshal
2026-06-10 07:53:15 +00:00
parent 2b5a0f4e96
commit 0335555892
12 changed files with 207 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/edr-freight-web/backoffice/index.css
View File

@@ -2,12 +2,12 @@
@import "@edr/ui-common/theme.css" layer(theme);
:root {
--freight-brand: #15803d;
--freight-brand-dark: #166534;
--freight-brand-light: #22c55e;
--freight-brand-muted: #f0fdf4;
--freight-brand-border: #bbf7d0;
--freight-brand-ring: rgb(21 128 61 / 0.2);
--freight-brand: #1B9E7A;
--freight-brand-dark: #15805F;
--freight-brand-light: #2DBF95;
--freight-brand-muted: #E7F8F2;
--freight-brand-border: #B7EBDC;
--freight-brand-ring: rgb(27 158 122 / 0.2);
}
html,

126
apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
View File

@@ -8,22 +8,23 @@ import {
Wallet,
XCircle,
} from "lucide-react";
import { Group, Badge, UnstyledButton, Text } from "@mantine/core";
import { Badge, Tabs } from "@mantine/core";
import {
BOOKING_LIST_TABS,
type BookingStatusTabKey,
} from "@/features/bookings/booking-status.config";
import "@/components/overview/overview.css";
const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
all: <LayoutGrid size={18} strokeWidth={1.75} />,
intake: <Inbox size={18} strokeWidth={1.75} />,
in_approval: <ClipboardCheck size={18} strokeWidth={1.75} />,
approved_contract: <FileSignature size={18} strokeWidth={1.75} />,
payment: <Wallet size={18} strokeWidth={1.75} />,
operations: <Train size={18} strokeWidth={1.75} />,
completed: <CheckCircle size={18} strokeWidth={1.75} />,
closed: <XCircle size={18} strokeWidth={1.75} />,
all: <LayoutGrid size={17} strokeWidth={1.85} />,
intake: <Inbox size={17} strokeWidth={1.85} />,
in_approval: <ClipboardCheck size={17} strokeWidth={1.85} />,
approved_contract: <FileSignature size={17} strokeWidth={1.85} />,
payment: <Wallet size={17} strokeWidth={1.85} />,
operations: <Train size={17} strokeWidth={1.85} />,
completed: <CheckCircle size={17} strokeWidth={1.85} />,
closed: <XCircle size={17} strokeWidth={1.85} />,
};
interface BookingStatusTabsProps {
@@ -38,74 +39,47 @@ export function BookingStatusTabs({
counts,
}: BookingStatusTabsProps) {
return (
<Group
gap="sm"
wrap="nowrap"
p="md"
style={{
background: "var(--mantine-color-gray-0)",
borderRadius: "12px",
border: "1px solid var(--mantine-color-gray-2)",
overflowX: "auto",
overflowY: "hidden",
WebkitOverflowScrolling: "touch",
scrollBehavior: "smooth",
scrollbarWidth: "thin",
}}
<Tabs
value={active}
onChange={(value) => onChange((value as BookingStatusTabKey) ?? "all")}
variant="pills"
color="green"
keepMounted={false}
classNames={{ list: "ov-tablist", tab: "ov-tab" }}
>
{BOOKING_LIST_TABS.map((tab) => {
const isActive = active === tab.key;
const count = counts?.[tab.key];
return (
<UnstyledButton
key={tab.key}
onClick={() => onChange(tab.key)}
style={{
flexShrink: 0,
background: isActive ? "white" : "transparent",
border: isActive ? "1px solid var(--freight-brand-border)" : "1px solid var(--mantine-color-gray-2)",
borderRadius: "10px",
padding: "10px 16px",
transition: "all 0.2s ease",
cursor: "pointer",
boxShadow: isActive ? "0 2px 8px rgb(21 128 61 / 0.12)" : "none",
}}
>
<Group gap="sm" justify="space-between" wrap="nowrap">
<Group gap={8}>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "32px",
height: "32px",
borderRadius: "8px",
background: isActive ? "var(--freight-brand-muted)" : "var(--mantine-color-gray-1)",
color: isActive ? "var(--freight-brand-dark)" : "var(--mantine-color-gray-6)",
}}
>
{TAB_ICONS[tab.key]}
</div>
<Text size="sm" fw={600}>
{tab.label}
</Text>
</Group>
{count !== undefined && count > 0 && (
<Badge
size="sm"
variant={isActive ? "filled" : "light"}
color={isActive ? "green" : "gray"}
radius="lg"
>
{count}
</Badge>
)}
</Group>
</UnstyledButton>
);
})}
</Group>
<Tabs.List>
{BOOKING_LIST_TABS.map((tab) => {
const isActive = active === tab.key;
const count = counts?.[tab.key];
return (
<Tabs.Tab
key={tab.key}
value={tab.key}
leftSection={TAB_ICONS[tab.key]}
rightSection={
count !== undefined ? (
<Badge
size="sm"
radius="sm"
variant={isActive ? "white" : "light"}
color={isActive ? "green" : "gray"}
styles={
isActive
? { root: { background: "rgba(255,255,255,0.9)", color: "#15805f" } }
: undefined
}
>
{count}
</Badge>
) : undefined
}
>
{tab.label}
</Tabs.Tab>
);
})}
</Tabs.List>
</Tabs>
);
}

16
apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.css
View File

@@ -20,14 +20,14 @@
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #15803d;
color: #1B9E7A;
margin-bottom: 3px;
}
.fdh-eyebrow-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #22c55e;
background: #2DBF95;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
@@ -48,9 +48,9 @@
}
.fdh-icon-btn:hover {
background: #ffffff;
border-color: rgba(21, 128, 61, 0.28);
color: #15803d;
box-shadow: 0 4px 12px -4px rgba(21, 128, 61, 0.28);
border-color: rgba(27, 158, 122, 0.28);
color: #1B9E7A;
box-shadow: 0 4px 12px -4px rgba(27, 158, 122, 0.28);
transform: translateY(-1px);
}
.fdh-icon-btn:active {
@@ -107,8 +107,8 @@
justify-content: center;
border-radius: 50%;
padding: 2px;
background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
box-shadow: 0 4px 10px -3px rgba(21, 128, 61, 0.4);
background: linear-gradient(135deg, #2DBF95 0%, #1B9E7A 100%);
box-shadow: 0 4px 10px -3px rgba(27, 158, 122, 0.4);
}
.fdh-avatar {
display: flex;
@@ -117,7 +117,7 @@
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #16a34a 0%, #166534 100%);
background: linear-gradient(135deg, #1B9E7A 0%, #15805F 100%);
color: #ffffff;
font-size: 13px;
font-weight: 700;

30
apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.css
View File

@@ -50,9 +50,9 @@
width: 44px;
height: 44px;
border-radius: 13px;
background: linear-gradient(135deg, #22c55e 0%, #15803d 60%, #166534 100%);
background: linear-gradient(135deg, #2DBF95 0%, #1B9E7A 60%, #15805F 100%);
box-shadow:
0 6px 16px -4px rgba(21, 128, 61, 0.45),
0 6px 16px -4px rgba(27, 158, 122, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}
@@ -124,9 +124,9 @@
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.12) 0%,
rgba(21, 128, 61, 0.06) 100%
rgba(27, 158, 122, 0.06) 100%
);
color: #15803d;
color: #1B9E7A;
font-weight: 600;
}
@@ -139,7 +139,7 @@
width: 3px;
height: 22px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
background: linear-gradient(180deg, #2DBF95 0%, #1B9E7A 100%);
}
.fsb-item-label {
@@ -170,9 +170,9 @@
}
.fsb-item[data-active="true"] .fsb-icon {
background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
background: linear-gradient(135deg, #2DBF95 0%, #1B9E7A 100%);
color: #ffffff;
box-shadow: 0 5px 12px -2px rgba(21, 128, 61, 0.45);
box-shadow: 0 5px 12px -2px rgba(27, 158, 122, 0.45);
}
.fsb-chevron {
@@ -214,7 +214,7 @@
color: #94a3b8;
}
.fsb-group[data-active="true"] .fsb-group-label {
color: #15803d;
color: #1B9E7A;
}
/* child leaf */
@@ -240,9 +240,9 @@
color: #0f172a;
}
.fsb-child[data-active="true"] {
color: #15803d;
color: #1B9E7A;
font-weight: 600;
background-color: rgba(21, 128, 61, 0.08);
background-color: rgba(27, 158, 122, 0.08);
}
.fsb-dot {
@@ -257,8 +257,8 @@
background: #94a3b8;
}
.fsb-child[data-active="true"] .fsb-dot {
background: #15803d;
box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
background: #1B9E7A;
box-shadow: 0 0 0 3px rgba(27, 158, 122, 0.16);
}
/* ---- Footer status card ---- */
@@ -273,7 +273,7 @@
gap: 10px;
padding: 10px 12px;
border-radius: 11px;
background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
background: linear-gradient(135deg, #E7F8F2 0%, #f8fafc 100%);
border: 1px solid #e7f3ec;
}
.fsb-pulse {
@@ -281,7 +281,7 @@
width: 9px;
height: 9px;
border-radius: 50%;
background: #22c55e;
background: #2DBF95;
flex-shrink: 0;
}
.fsb-pulse::after {
@@ -289,7 +289,7 @@
position: absolute;
inset: 0;
border-radius: 50%;
background: #22c55e;
background: #2DBF95;
animation: fsb-pulse 2s ease-out infinite;
}
@keyframes fsb-pulse {

4
apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
View File

@@ -129,7 +129,7 @@ const FreightSidebar = ({
className="fsb-chevron"
style={{
transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
color: groupActive ? "#15803d" : undefined,
color: groupActive ? "#1B9E7A" : undefined,
}}
/>
</button>
@@ -248,7 +248,7 @@ const FreightSidebar = ({
<div className="fsb-status">
<span className="fsb-pulse" />
<Stack gap={0} style={{ minWidth: 0 }}>
<Text size="xs" fw={600} style={{ color: "#166534", lineHeight: 1.3 }}>
<Text size="xs" fw={600} style={{ color: "#15805F", lineHeight: 1.3 }}>
All systems operational
</Text>
<Text size="10px" style={{ color: "#94a3b8", lineHeight: 1.3 }}>

201
apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiCard.tsx
View File

@@ -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>
);
}

4
apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiStrip.tsx
View File

@@ -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 && (

6
apps/edr-freight-web/backoffice/src/components/overview/overview.css
View File

@@ -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 {

4
apps/edr-freight-web/backoffice/src/components/overview/overview.styles.ts
View File

@@ -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"],

25
apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
View File

@@ -9,7 +9,6 @@ import {
Card,
TextInput,
ActionIcon,
Paper,
Tabs,
} from "@mantine/core";
@@ -308,24 +307,14 @@ export default function BookingRequestsPage() {
onRefresh={handleRefresh}
/>
<Paper
p="md"
radius="lg"
withBorder
style={{
background: "white",
border: "1px solid var(--mantine-color-gray-2)",
<BookingStatusTabs
active={activeTab}
onChange={(tab) => {
setActiveTab(tab);
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
}}
>
<BookingStatusTabs
active={activeTab}
onChange={(tab) => {
setActiveTab(tab);
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
}}
counts={tabCounts}
/>
</Paper>
counts={tabCounts}
/>
<Card
p="md"

2
apps/edr-freight-web/backoffice/src/pages/dashboard/OverviewPage.tsx
View File

@@ -154,7 +154,7 @@ const OverviewPage = () => {
color={isActive ? "green" : "gray"}
styles={
isActive
? { root: { background: "rgba(255,255,255,0.9)", color: "#15803d" } }
? { root: { background: "rgba(255,255,255,0.9)", color: "#15805f" } }
: undefined
}
>

34
apps/edr-freight-web/backoffice/src/theme/freight-brand.ts
View File

@@ -1,34 +1,34 @@
import { createTheme, type MantineColorsTuple } from "@mantine/core";
/** EDR Freight primary brand green */
export const FREIGHT_BRAND = "#15803d";
export const FREIGHT_BRAND_DARK = "#166534";
export const FREIGHT_BRAND_LIGHT = "#22c55e";
export const FREIGHT_BRAND = "#1B9E7A";
export const FREIGHT_BRAND_DARK = "#15805F";
export const FREIGHT_BRAND_LIGHT = "#2DBF95";
export const freightBrand = {
primary: FREIGHT_BRAND,
primaryDark: FREIGHT_BRAND_DARK,
primaryLight: FREIGHT_BRAND_LIGHT,
gradient: `linear-gradient(135deg, ${FREIGHT_BRAND} 0%, ${FREIGHT_BRAND_DARK} 100%)`,
shadow: "0 4px 12px rgba(21, 128, 61, 0.28)",
shadowSm: "0 2px 6px rgba(21, 128, 61, 0.22)",
ring: "rgba(21, 128, 61, 0.2)",
mutedBg: "#f0fdf4",
mutedBorder: "#bbf7d0",
shadow: "0 4px 12px rgba(27, 158, 122, 0.28)",
shadowSm: "0 2px 6px rgba(27, 158, 122, 0.22)",
ring: "rgba(27, 158, 122, 0.2)",
mutedBg: "#E7F8F2",
mutedBorder: "#B7EBDC",
} as const;
/** Mantine green scale with #15803d at index 6 (filled buttons, nav active). */
/** Mantine green scale with #1B9E7A at index 6 (filled buttons, nav active). */
const freightGreen: MantineColorsTuple = [
"#f0fdf4",
"#dcfce7",
"#bbf7d0",
"#86efac",
"#4ade80",
"#22c55e",
"#E7F8F2",
"#C5EFE1",
"#9CE4CD",
"#6BD6B5",
"#41C8A0",
"#25B58C",
FREIGHT_BRAND,
FREIGHT_BRAND_DARK,
"#14532d",
"#052e16",
"#105F47",
"#0A3D2E",
];
export const freightMantineTheme = createTheme({