57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
|
|
import type { TileItem } from "../../api/types";
|
|
|
|
export interface StatsTilesProps {
|
|
tiles?: TileItem[];
|
|
}
|
|
|
|
export function StatsTiles({ tiles }: StatsTilesProps) {
|
|
if (!tiles?.length) return null;
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-5 md:grid-cols-4">
|
|
{tiles.map((tile, idx) => {
|
|
const displayLabel = (tile.key || `tile_${idx}`)
|
|
.replace(/_/g, " ")
|
|
.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
|
|
const lowerKey = String(tile.key).toLowerCase();
|
|
let Icon = BarChart2;
|
|
if (lowerKey.includes('call') || lowerKey.includes('total')) Icon = Phone;
|
|
if (lowerKey.includes('productive')) Icon = TrendingUp;
|
|
if (lowerKey.includes('order') || lowerKey.includes('cart')) Icon = ShoppingCart;
|
|
if (lowerKey.includes('bag')) Icon = ShoppingBag;
|
|
if (lowerKey.includes('kg') || lowerKey.includes('weight')) Icon = Scale;
|
|
if (lowerKey.includes('active')) Icon = Activity;
|
|
|
|
const isDanger = lowerKey.includes('no_order');
|
|
|
|
return (
|
|
<div
|
|
key={tile.tile_uid || idx}
|
|
className={`flex flex-col justify-between w-full h-[100px] p-4 rounded-lg bg-[var(--z-bg-neutral-100)] border border-[var(--z-border-neutral-300)] border-t-4 shadow-sm transition-transform duration-200 hover:-translate-y-1 ${
|
|
isDanger ? 'border-t-[var(--z-text-danger-400)]' : 'border-t-[var(--z-text-primary)]'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<span className={`text-[10px] font-bold uppercase tracking-wider whitespace-nowrap overflow-hidden text-ellipsis max-w-[80%] ${
|
|
isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-neutral-500)]'
|
|
}`}>
|
|
{displayLabel}
|
|
</span>
|
|
<Icon size={16} className={`${
|
|
isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-success-400)]'
|
|
}`} />
|
|
</div>
|
|
|
|
<p className={`text-[30px] font-extrabold leading-tight tabular-nums ${
|
|
isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-primary)]'
|
|
}`}>
|
|
{(tile.value as React.ReactNode) ?? "-"}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |