52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: number) =>
|
|
`${value.toLocaleString("fa-IR")} ریال`;
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const formatAmount = (amount: number, unit: string) =>
|
|
unit === "ریال" ? formatPrice(amount) : `${unit}${formatNumber(amount)}`;
|
|
|
|
interface StatsCard3Props {
|
|
title?: string;
|
|
value?: number;
|
|
target?: number;
|
|
unit?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const StatsCard3 = ({
|
|
title = "هدف درآمد ماهانه",
|
|
value = 7500000,
|
|
target = 10000000,
|
|
unit = "ریال",
|
|
className,
|
|
}: StatsCard3Props) => {
|
|
const percentage = Math.min(Math.round((value / target) * 100), 100);
|
|
|
|
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">{formatAmount(value, unit)}</div>
|
|
<div className="mt-3 space-y-2">
|
|
<Progress value={percentage} className="h-2" />
|
|
<div className="flex justify-between text-sm text-muted-foreground">
|
|
<span>{formatNumber(percentage)}٪ محققشده</span>
|
|
<span>هدف: {formatAmount(target, unit)}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { StatsCard3 };
|