g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modular dashboard widgets and layout editor
Some checks failed
Build Frontend / build (push) Failing after 7s
Details

Browse Source 
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.
This commit is contained in:
g
2026-01-12 10:39:50 +00:00
parent a6b7286b45
commit 318927cd0c
23 changed files with 2435 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/dashboard/order-stats.tsx
View File

@@ -1,36 +1,60 @@
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 }: OrderStatsProps) {
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 }}
>
<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>
<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>
)
}