211cdc71f9
All checks were successful
Build Frontend / build (push) Successful in 1m12s
Refactored dashboard pages for improved layout and visual consistency using Card components, motion animations, and updated color schemes. Added an OrderTimeline component to the order details page to visualize order lifecycle. Improved customer management page with better sorting, searching, and a detailed customer dialog. Updated storefront settings page with a modernized layout and clearer sectioning.
38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import type { LucideIcon } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { motion } from "framer-motion"
|
|
|
|
interface OrderStatsProps {
|
|
title: string
|
|
value: string
|
|
icon: LucideIcon
|
|
index?: number
|
|
}
|
|
|
|
export default function OrderStats({ title, value, icon: Icon, index = 0 }: OrderStatsProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
>
|
|
<Card className="relative overflow-hidden group border-border/40 bg-background/50 backdrop-blur-sm hover:bg-background/80 transition-all duration-300">
|
|
<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" />
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|