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

changes

Browse Source
This commit is contained in:
Marshal
2026-06-06 06:32:04 +00:00
parent f8270175a2
commit 053b4f35c5
15 changed files with 894 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
import type { LucideIcon } from "lucide-react";
import { bookingGlass } from "./booking-ui.styles";
import { cn } from "@/lib/utils";
import { Card, Group, Stack, Text, SimpleGrid } from "@mantine/core";
export interface StatItem {
label: string;
@@ -10,54 +9,76 @@ export interface StatItem {
accent?: "default" | "amber" | "emerald" | "rose";
}
const iconAccentStyles = {
default: "text-foreground/70",
amber: "text-amber-600 dark:text-amber-400",
emerald: "text-emerald-600 dark:text-emerald-400",
rose: "text-rose-600 dark:text-rose-400",
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(--mantine-color-green-1)", color: "var(--mantine-color-green-6)" },
rose: { bg: "var(--mantine-color-red-1)", color: "var(--mantine-color-red-6)" },
};
export function BookingStatGrid({ items }: { items: StatItem[] }) {
return (
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<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];
return (
<div
<Card
key={item.label}
className={cn(
"group relative overflow-hidden rounded-xl p-5 transition-all duration-200 hover:shadow-md",
bookingGlass.card,
)}
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)";
}}
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
<Group justify="space-between" align="flex-start">
<Stack gap="xs" style={{ flex: 1 }}>
<Text size="xs" fw={600} c="dimmed" tt="uppercase">
{item.label}
</p>
<p className="mt-2 text-3xl font-semibold tabular-nums tracking-tight text-foreground">
</Text>
<Text size="32px" fw={700} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
{item.value}
</p>
</Text>
{item.hint && (
<p className="mt-1 text-xs leading-relaxed text-muted-foreground">
<Text size="xs" c="dimmed">
{item.hint}
</p>
</Text>
)}
</div>
</Stack>
<div
className={cn(
"flex size-10 shrink-0 items-center justify-center rounded-xl transition-transform duration-200 group-hover:scale-[1.02]",
bookingGlass.iconWellGreen,
iconAccentStyles[accent],
)}
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 className="size-[18px]" strokeWidth={1.75} />
<Icon size={22} strokeWidth={1.75} />
</div>
</div>
</div>
</Group>
</Card>
);
})}
</div>
</SimpleGrid>
);
}