84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import StatCard from './StatCard';
|
|
|
|
interface StatsProps {
|
|
stats: {
|
|
totalProducts?: number;
|
|
totalVendors?: number;
|
|
totalOrders?: number;
|
|
totalCustomers?: number;
|
|
gmv?: number;
|
|
};
|
|
}
|
|
|
|
function formatNumberValue(num: number = 0): string {
|
|
return new Intl.NumberFormat().format(Math.round(num));
|
|
}
|
|
|
|
function formatCurrencyValue(amount: number = 0): string {
|
|
return new Intl.NumberFormat('en-GB', {
|
|
style: 'currency',
|
|
currency: 'GBP',
|
|
maximumFractionDigits: 0
|
|
}).format(amount);
|
|
}
|
|
|
|
export default function StatsSection({ stats }: StatsProps) {
|
|
const { totalProducts = 0, totalVendors = 0, totalOrders = 0, totalCustomers = 0, gmv = 0 } = stats;
|
|
|
|
// Container animation variants
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1
|
|
}
|
|
}
|
|
};
|
|
|
|
// Item animation variants
|
|
const itemVariants = {
|
|
hidden: { y: 20, opacity: 0 },
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 260,
|
|
damping: 20
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="perspective-1000">
|
|
<motion.div
|
|
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
style={{ perspective: "1000px" }}
|
|
>
|
|
<motion.div variants={itemVariants}>
|
|
<StatCard title="Total Products" value={formatNumberValue(totalProducts)} className="h-32" />
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants}>
|
|
<StatCard title="Total Vendors" value={formatNumberValue(totalVendors)} className="h-32" />
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants}>
|
|
<StatCard title="Total Orders" value={formatNumberValue(totalOrders)} className="h-32" />
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1">
|
|
<StatCard title="Revenue" value={formatCurrencyValue(gmv)} className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30" />
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|