318927cd0c
Some checks failed
Build Frontend / build (push) Failing after 7s
Introduces a modular dashboard system with draggable, configurable widgets including revenue, low stock, recent customers, and pending chats. Adds a dashboard editor for layout customization, widget visibility, and settings. Refactors dashboard content to use the new widget system and improves UI consistency and interactivity.
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import type { LucideIcon } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { motion } from "framer-motion"
|
|
import Link from "next/link"
|
|
|
|
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
|
|
}
|
|
|
|
export default function OrderStats({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
index = 0,
|
|
filterStatus,
|
|
href
|
|
}: 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="text-3xl font-bold tracking-tight">{value}</div>
|
|
<div className="mt-1 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>
|
|
)
|
|
}
|
|
|