42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import type { TileItem } from "../../api/types";
|
|
import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
|
|
import './reusable.css';
|
|
import '../../styles/styles.css';
|
|
|
|
export interface StatsTileProps {
|
|
tile: TileItem;
|
|
idx?: number;
|
|
}
|
|
|
|
export function StatsTile({ tile, idx = 0 }: StatsTileProps) {
|
|
const displayLabel = (tile.key || `tile_${idx}`)
|
|
.replace(/_/g, " ")
|
|
.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
|
|
const lowerKey = String(tile.key).toLowerCase();
|
|
|
|
// Try to pick a relevant icon
|
|
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 className={`z-stats-tile z-stats-tile--secondary ${isDanger ? 'z-stats-tile--danger' : ''}`}>
|
|
<div className="z-stats-header">
|
|
<span className={`z-stats-label`}>{displayLabel}</span>
|
|
<Icon size={16} className={`z-stats-icon ${isDanger ? 'z-stats-icon--danger' : ''}`} />
|
|
</div>
|
|
|
|
<p className={`z-stats-value nums ${isDanger ? 'z-stats-value--danger' : ''}`}>
|
|
{(tile.value as React.ReactNode) ?? "-"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|