0cce4ee73d
- Added optional description prop to StatCard for additional context. - Updated ChartTooltipContent to format numbers according to Indonesian locale. - Refactored revenue and expense charts in the Analysis page to use new chart configurations and improved tooltip content. - Introduced DashboardPieChart component for displaying order statistics by channel, payment type, marketing, and status. - Adjusted revenue summary calculations in the Dashboard page to reflect changes in data structure.
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import type { LucideIcon } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type StatItem = {
|
|
label: string;
|
|
value: string | number;
|
|
};
|
|
|
|
type StatCardProps = {
|
|
title: string;
|
|
icon: LucideIcon;
|
|
mainLabel?: string;
|
|
mainValue: string | number;
|
|
subLabel?: string;
|
|
description?: string;
|
|
items?: StatItem[];
|
|
cols?: 2 | 3 | 4;
|
|
};
|
|
|
|
export function StatCard({ title, icon: Icon, mainLabel, mainValue, subLabel, description, items = [], cols = 3 }: StatCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
|
<Icon className="size-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{mainLabel && <p className="text-xs text-muted-foreground">{mainLabel}</p>}
|
|
<p className="text-2xl font-bold">{mainValue}</p>
|
|
{subLabel && <p className="text-xs text-muted-foreground">{subLabel}</p>}
|
|
{description && <p className="mt-1 text-[10px] text-muted-foreground italic">{description}</p>}
|
|
{items.length > 0 && (
|
|
<div className={cn('mt-3 grid gap-2', cols === 2 && 'grid-cols-2', cols === 3 && 'grid-cols-3', cols === 4 && 'grid-cols-4')}>
|
|
{items.map((item, index) => (
|
|
<div key={index}>
|
|
<p className="text-xs text-muted-foreground">{item.label}</p>
|
|
<p className="text-sm font-medium">{item.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|