70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import { ArrowDown, ArrowUp } from "lucide-react";
|
|
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const formatPercent = (value: number) =>
|
|
`${new Intl.NumberFormat("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
}).format(value)}٪`;
|
|
|
|
interface Stats7Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Stats7 = ({ className }: Stats7Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto max-w-3xl rounded-lg border p-6 md:p-10">
|
|
<h2 className="mb-6 text-xl font-medium">عملکرد هفتگی پایپلاین</h2>
|
|
<div className="flex flex-col gap-8">
|
|
<div>
|
|
<div className="mb-2 flex justify-between">
|
|
<p className="font-medium">معاملات بستهشده</p>
|
|
<span className="flex items-center gap-1 font-medium text-green-400">
|
|
{formatPercent(80.2)} <ArrowUp size={16} />
|
|
</span>
|
|
</div>
|
|
<Progress value={80} />
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{formatNumber(10)}٪ بیشتر از هفته گذشته
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 flex justify-between">
|
|
<p className="font-medium">نرخ پیشرفت معامله</p>
|
|
<span className="flex items-center gap-1 font-medium text-destructive">
|
|
{formatPercent(55.2)} <ArrowDown size={16} />
|
|
</span>
|
|
</div>
|
|
<Progress value={55} />
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{formatNumber(29)}٪ کمتر از هفته گذشته
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="mb-2 flex justify-between">
|
|
<p className="font-medium">نرخ ازدسترفتن سرنخ</p>
|
|
<span className="flex items-center gap-1 font-medium text-destructive">
|
|
{formatPercent(20.1)} <ArrowDown size={16} />
|
|
</span>
|
|
</div>
|
|
<Progress value={20} />
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{formatNumber(5)}٪ بیشتر از هفته گذشته
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Stats7 };
|