72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: number) =>
|
|
`${value.toLocaleString("fa-IR")} ریال`;
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
interface BreakdownItem {
|
|
label: string;
|
|
value: string;
|
|
percentage?: number;
|
|
}
|
|
|
|
interface StatsCard6Props {
|
|
title?: string;
|
|
totalValue?: string;
|
|
breakdown?: BreakdownItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultBreakdown: BreakdownItem[] = [
|
|
{ label: "وب", value: formatPrice(32450000), percentage: 65 },
|
|
{ label: "موبایل", value: formatPrice(12300000), percentage: 25 },
|
|
{ label: "تبلت", value: formatPrice(5250000), percentage: 10 },
|
|
];
|
|
|
|
const StatsCard6 = ({
|
|
title = "درآمد بر اساس کانال",
|
|
totalValue = formatPrice(50000000),
|
|
breakdown = defaultBreakdown,
|
|
className,
|
|
}: StatsCard6Props) => {
|
|
return (
|
|
<Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">{totalValue}</div>
|
|
<div className="mt-4 space-y-3">
|
|
{breakdown.map((item, index) => (
|
|
<div key={index} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="size-2 rounded-full"
|
|
style={{
|
|
backgroundColor: `var(--chart-${(index % 5) + 1})`,
|
|
}}
|
|
/>
|
|
<span className="text-sm">{item.label}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<span className="font-medium">{item.value}</span>
|
|
{item.percentage !== undefined && (
|
|
<span className="text-muted-foreground">
|
|
{formatNumber(item.percentage)}٪
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { StatsCard6 };
|