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.
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import type { LucideIcon } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card"
|
|
import { motion } from "framer-motion"
|
|
import Link from "next/link"
|
|
import { ResponsiveContainer, LineChart, Line } from "recharts"
|
|
|
|
interface OrderStatsProps {
|
|
title: string
|
|
value: string
|
|
icon: LucideIcon
|
|
index?: number
|
|
/** Status to filter by when clicking (e.g., "paid", "shipped") */
|
|
filterStatus?: string
|
|
/** Custom href if not using filterStatus */
|
|
href?: string
|
|
/** Data for sparkline [ { value: number }, ... ] */
|
|
trendData?: { value: number }[]
|
|
/** Color for the sparkline */
|
|
trendColor?: string
|
|
}
|
|
|
|
export default function OrderStats({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
index = 0,
|
|
filterStatus,
|
|
href,
|
|
trendData,
|
|
trendColor = "#8884d8"
|
|
}: OrderStatsProps) {
|
|
const linkHref = href || (filterStatus ? `/dashboard/orders?status=${filterStatus}` : undefined)
|
|
|
|
const CardWrapper = linkHref ? Link : "div"
|
|
const wrapperProps = linkHref ? { href: linkHref } : {}
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
>
|
|
<CardWrapper {...wrapperProps as any}>
|
|
<Card className={`relative overflow-hidden group border-border/40 bg-background/50 backdrop-blur-sm hover:bg-background/80 transition-all duration-300 ${linkHref ? "cursor-pointer hover:border-primary/30" : ""}`}>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
|
|
<CardTitle className="text-sm font-medium tracking-tight text-muted-foreground group-hover:text-foreground transition-colors">
|
|
{title}
|
|
</CardTitle>
|
|
<div className="p-2 rounded-lg bg-muted group-hover:bg-primary/10 group-hover:text-primary transition-all duration-300">
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="flex items-end justify-between gap-2">
|
|
<div className="text-3xl font-bold tracking-tight">{value}</div>
|
|
{trendData && trendData.length > 0 && (
|
|
<div className="h-10 w-24 mb-1">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={trendData}>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={trendColor}
|
|
strokeWidth={2}
|
|
dot={false}
|
|
isAnimationActive={true}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 h-1 w-0 bg-primary/20 group-hover:w-full transition-all duration-500 rounded-full" />
|
|
{linkHref && (
|
|
<div className="mt-2 text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
|
|
Click to view →
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</CardWrapper>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
|