Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-07 20:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui improvemnt

Browse Source
This commit is contained in:
Marshal
2026-06-06 21:17:20 +00:00
parent b62ea3f95f
commit 08b46c306f
35 changed files with 2731 additions and 1604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx
View File

@@ -1,5 +1,5 @@
import type { LucideIcon } from "lucide-react";
import { Card, Group, Stack, Text, SimpleGrid } from "@mantine/core";
import { Card, Group, Stack, Text, Paper } from "@mantine/core";
export interface StatItem {
label: string;
@@ -18,67 +18,91 @@ const accentColors = {
export function BookingStatGrid({ items }: { items: StatItem[] }) {
return (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
{items.map((item) => {
const Icon = item.icon;
const accent = item.accent ?? "default";
const accentStyle = accentColors[accent];
<Paper
p="md"
radius="lg"
withBorder
style={{
background: "white",
border: "1px solid var(--mantine-color-gray-2)",
overflowX: "auto",
overflowY: "hidden",
WebkitOverflowScrolling: "touch",
scrollBehavior: "smooth",
}}
>
<Group
gap="lg"
style={{
minWidth: "min-content",
display: "flex",
flexWrap: "nowrap",
}}
>
{items.map((item) => {
const Icon = item.icon;
const accent = item.accent ?? "default";
const accentStyle = accentColors[accent];
return (
<Card
key={item.label}
p="lg"
radius="lg"
withBorder
style={{
background: "white",
border: "1px solid var(--mantine-color-gray-2)",
transition: "all 0.2s ease",
cursor: "pointer",
}}
onMouseEnter={(e) => {
e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.boxShadow = "none";
e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
}}
>
<Group justify="space-between" align="flex-start">
<Stack gap="xs" style={{ flex: 1 }}>
<Text size="xs" fw={600} c="dimmed" tt="uppercase">
{item.label}
</Text>
<Text size="32px" fw={700} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
{item.value}
</Text>
{item.hint && (
<Text size="xs" c="dimmed">
{item.hint}
return (
<Card
key={item.label}
p="lg"
radius="lg"
withBorder
style={{
background: "white",
border: "1px solid var(--mantine-color-gray-2)",
transition: "all 0.2s ease",
cursor: "pointer",
minWidth: "280px",
width: "280px",
flexShrink: 0,
}}
onMouseEnter={(e) => {
e.currentTarget.style.boxShadow = "0 4px 12px rgba(34, 197, 94, 0.12)";
e.currentTarget.style.borderColor = "var(--mantine-color-green-3)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.boxShadow = "none";
e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
}}
>
<Group justify="space-between" align="flex-start">
<Stack gap="xs" style={{ flex: 1 }}>
<Text size="xs" fw={600} c="dimmed" tt="uppercase">
{item.label}
</Text>
)}
</Stack>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "44px",
height: "44px",
borderRadius: "10px",
background: accentStyle.bg,
color: accentStyle.color,
flexShrink: 0,
transition: "transform 0.2s ease",
}}
>
<Icon size={22} strokeWidth={1.75} />
</div>
</Group>
</Card>
);
})}
</SimpleGrid>
<Text size="32px" fw={700} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
{item.value}
</Text>
{item.hint && (
<Text size="xs" c="dimmed">
{item.hint}
</Text>
)}
</Stack>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "44px",
height: "44px",
borderRadius: "10px",
background: accentStyle.bg,
color: accentStyle.color,
flexShrink: 0,
transition: "transform 0.2s ease",
}}
>
<Icon size={22} strokeWidth={1.75} />
</div>
</Group>
</Card>
);
})}
</Group>
</Paper>
);
}