fe01f31538
Some checks failed
Build Frontend / build (push) Failing after 7s
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { Package, Users, CreditCard } from "lucide-react";
|
|
import { AnimatedCounter } from "./animated-counter";
|
|
import { PlatformStats } from "@/lib/api";
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('en-GB', {
|
|
style: 'currency',
|
|
currency: 'GBP',
|
|
minimumFractionDigits: 2,
|
|
}).format(value);
|
|
};
|
|
|
|
interface AnimatedStatsProps {
|
|
stats: PlatformStats;
|
|
}
|
|
|
|
export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
|
|
return (
|
|
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
|
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
|
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<Package className="h-6 w-6 text-indigo-500" />
|
|
<div className="mt-4 text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.orders.completed}
|
|
duration={2000}
|
|
suffix="+"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-2 text-lg font-medium text-white">
|
|
Completed Orders
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-500">
|
|
Successfully fulfilled orders across our platform
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
|
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<Users className="h-6 w-6 text-indigo-500" />
|
|
<div className="mt-4 text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.vendors.total}
|
|
duration={2000}
|
|
suffix="+"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-2 text-lg font-medium text-white">
|
|
Registered Vendors
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-500">
|
|
Active sellers offering products on our marketplace
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
|
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<CreditCard className="h-6 w-6 text-indigo-500" />
|
|
<div className="mt-4 text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.transactions.volume}
|
|
duration={2500}
|
|
formatter={formatCurrency}
|
|
/>
|
|
</div>
|
|
<h3 className="mt-2 text-lg font-medium text-white">
|
|
Transaction Volume
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-500">
|
|
Total value of successful transactions processed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|