{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard-agency", "title": "Modern Agency Dashboard", "description": "", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "registry/default/blocks/Dashboard/dashboard-agency.tsx", "content": "import React, { useState } from \"react\";\nimport Image from \"next/image\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n LayoutDashboard,\n Package,\n Repeat,\n BarChart3,\n MessageSquare,\n Users2,\n Megaphone,\n Users,\n Layers,\n ClipboardList,\n ShieldCheck,\n CreditCard,\n Puzzle,\n Headphones,\n HelpCircle,\n Settings,\n Search,\n Bell,\n ChevronDown,\n Calendar,\n Download,\n Sparkles,\n MoreHorizontal,\n Plus,\n ArrowUpRight,\n Pencil,\n RotateCcw,\n Trash2,\n Mail,\n Trophy,\n Target,\n User,\n LogOut,\n Check,\n Moon,\n Sun,\n type LucideIcon,\n} from \"lucide-react\";\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\ninterface NavItem {\n label: string;\n icon: LucideIcon;\n}\n\ninterface Stat {\n label: string;\n value: string;\n sub?: string;\n}\n\ntype TransactionStatus = \"Success\" | \"Pending\" | \"Refunded\";\n\ninterface Transaction {\n id: string;\n customer: string;\n product: string;\n status: TransactionStatus;\n qty: number;\n price: string;\n total: string;\n}\n\ntype TimeRange = \"Weekly\" | \"Monthly\" | \"Yearly\";\ntype CampaignStatus = \"Active\" | \"Paused\" | \"Ended\";\n\ninterface Campaign {\n name: string;\n status: CampaignStatus;\n budget: string;\n spent: string;\n}\n\ninterface ChatMessage {\n id: string;\n name: string;\n preview: string;\n full: string;\n time: string;\n unread: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* Static data */\n/* ------------------------------------------------------------------ */\n\nconst mainMenu: NavItem[] = [\n { label: \"Dashboard\", icon: LayoutDashboard },\n { label: \"Products\", icon: Package },\n { label: \"Transactions\", icon: Repeat },\n { label: \"Reports & Analytics\", icon: BarChart3 },\n { label: \"Messages\", icon: MessageSquare },\n { label: \"Team Performance\", icon: Users2 },\n { label: \"Campaigns\", icon: Megaphone },\n];\n\nconst customersMenu: NavItem[] = [\n { label: \"Customer List\", icon: Users },\n { label: \"Channels\", icon: Layers },\n { label: \"Order Management\", icon: ClipboardList },\n];\n\nconst managementMenu: NavItem[] = [\n { label: \"Roles & Permissions\", icon: ShieldCheck },\n { label: \"Billing & Subscription\", icon: CreditCard },\n { label: \"Integrations\", icon: Puzzle },\n];\n\nconst settingsMenu: NavItem[] = [\n { label: \"Customer Support\", icon: Headphones },\n { label: \"Help Center\", icon: HelpCircle },\n { label: \"System Settings\", icon: Settings },\n];\n\nconst stats: Stat[] = [\n { label: \"Total Revenue\", value: \"$20,320\", sub: \"\" },\n { label: \"Total Orders\", value: \"10,320\", sub: \"Orders\" },\n { label: \"New Customers\", value: \"4,305\", sub: \"New Users\" },\n { label: \"Conversion Rate\", value: \"3.9%\", sub: \"\" },\n];\n\nconst monthLabels: string[] = [\n \"JAN\",\n \"FEB\",\n \"MAR\",\n \"APR\",\n \"MAY\",\n \"JUN\",\n \"JUL\",\n \"AUG\",\n \"SEP\",\n \"OCT\",\n \"NOV\",\n \"DEC\",\n];\n\nconst salesBars: number[] = [\n 28, 42, 24, 48, 58, 38, 34, 52, 44, 62, 48, 38, 44, 58, 48, 68, 54, 44, 58,\n 74, 92, 68, 54, 44, 58, 48, 38, 52, 44, 34, 48, 38, 28, 42, 34, 24,\n];\n\nconst revenueBars: number[] = [\n 38, 62, 48, 78, 58, 42, 68, 52, 88, 58, 48, 72, 44, 34,\n];\n\nconst initialTransactions: Transaction[] = [\n {\n id: \"#04910\",\n customer: \"Ryan Korsgaard\",\n product: \"Ergo Office Chair\",\n status: \"Success\",\n qty: 12,\n price: \"$3,450\",\n total: \"$41,400\",\n },\n {\n id: \"#04911\",\n customer: \"Madelyn Lubin\",\n product: \"Sunset Desk 02\",\n status: \"Success\",\n qty: 20,\n price: \"$2,980\",\n total: \"$89,200\",\n },\n {\n id: \"#04912\",\n customer: \"Abram Bergson\",\n product: \"Eco Bookshelf\",\n status: \"Pending\",\n qty: 22,\n price: \"$1,750\",\n total: \"$75,900\",\n },\n {\n id: \"#04913\",\n customer: \"Phillip Mango\",\n product: \"Green Leaf Desk\",\n status: \"Refunded\",\n qty: 24,\n price: \"$1,950\",\n total: \"$19,500\",\n },\n];\n\nconst statusStyles: Record = {\n Success: \"bg-emerald-500\",\n Pending: \"bg-amber-500\",\n Refunded: \"bg-neutral-400\",\n};\n\nconst customersPool = [\n \"Elena Cho\",\n \"Marcus Webb\",\n \"Priya Nair\",\n \"Tomasz Wiel\",\n \"Grace Ilori\",\n \"Noah Fitzgerald\",\n];\nconst productsPool = [\n \"Oak Coffee Table\",\n \"Mesh Task Chair\",\n \"Walnut Shelf Unit\",\n \"Linen Sofa Cover\",\n \"Steel Desk Lamp\",\n \"Woven Storage Bin\",\n];\n\nconst products = [\n {\n name: \"Ergo Office Chair\",\n category: \"Seating\",\n price: \"$3,450\",\n stock: 42,\n },\n { name: \"Sunset Desk 02\", category: \"Desks\", price: \"$2,980\", stock: 18 },\n { name: \"Eco Bookshelf\", category: \"Storage\", price: \"$1,750\", stock: 65 },\n { name: \"Green Leaf Desk\", category: \"Desks\", price: \"$1,950\", stock: 24 },\n { name: \"Oak Coffee Table\", category: \"Tables\", price: \"$1,290\", stock: 37 },\n { name: \"Mesh Task Chair\", category: \"Seating\", price: \"$980\", stock: 51 },\n];\n\nconst teamMembers = [\n { name: \"Salung Prastyo\", role: \"Sales Operator\", score: 92 },\n { name: \"Elena Cho\", role: \"Account Manager\", score: 87 },\n { name: \"Marcus Webb\", role: \"Sales Rep\", score: 79 },\n { name: \"Priya Nair\", role: \"Sales Rep\", score: 74 },\n { name: \"Tomasz Wiel\", role: \"Support Lead\", score: 68 },\n];\n\nconst initialCampaigns: Campaign[] = [\n {\n name: \"Summer Sale Blast\",\n status: \"Active\",\n budget: \"$5,000\",\n spent: \"$3,120\",\n },\n {\n name: \"New Customer Push\",\n status: \"Active\",\n budget: \"$2,500\",\n spent: \"$980\",\n },\n {\n name: \"Retargeting Q3\",\n status: \"Paused\",\n budget: \"$1,800\",\n spent: \"$1,800\",\n },\n {\n name: \"Holiday Preview\",\n status: \"Ended\",\n budget: \"$4,200\",\n spent: \"$4,150\",\n },\n];\n\nconst campaignStatusStyles: Record = {\n Active: \"bg-emerald-100 text-emerald-700\",\n Paused: \"bg-amber-100 text-amber-700\",\n Ended: \"bg-neutral-200 text-neutral-500\",\n};\n\nconst initialMessages: ChatMessage[] = [\n {\n id: \"m1\",\n name: \"Ryan Korsgaard\",\n preview: \"Hey, can we push the delivery date...\",\n time: \"09:24\",\n unread: true,\n full: \"Hey, can we push the delivery date for the Ergo Office Chair order to next Friday? Our warehouse team needs a bit more time.\",\n },\n {\n id: \"m2\",\n name: \"Madelyn Lubin\",\n preview: \"Thanks for the quick refund on...\",\n time: \"Yesterday\",\n unread: true,\n full: \"Thanks for the quick refund on the Sunset Desk order, really appreciate the fast turnaround!\",\n },\n {\n id: \"m3\",\n name: \"Abram Bergson\",\n preview: \"Is the Eco Bookshelf still in stock...\",\n time: \"Yesterday\",\n unread: false,\n full: \"Is the Eco Bookshelf still in stock in walnut finish? Looking to order 20 units for a client.\",\n },\n {\n id: \"m4\",\n name: \"Phillip Mango\",\n preview: \"Following up on the refund status\",\n time: \"Mon\",\n unread: false,\n full: \"Just following up on the refund status for order #04913, haven't seen it reflected yet.\",\n },\n];\n\nconst GENERIC_CONTENT: Record<\n string,\n { subtitle: string; rows: { label: string; value: string }[] }\n> = {\n \"Customer List\": {\n subtitle: \"Browse and manage your customers.\",\n rows: [\n { label: \"Ryan Korsgaard\", value: \"Active\" },\n { label: \"Madelyn Lubin\", value: \"Active\" },\n { label: \"Abram Bergson\", value: \"Active\" },\n { label: \"Phillip Mango\", value: \"Inactive\" },\n ],\n },\n Channels: {\n subtitle: \"Manage where your orders come from.\",\n rows: [\n { label: \"Online Store\", value: \"Connected\" },\n { label: \"Marketplace\", value: \"Connected\" },\n { label: \"Retail POS\", value: \"Disconnected\" },\n { label: \"Wholesale\", value: \"Connected\" },\n ],\n },\n \"Order Management\": {\n subtitle: \"Track and fulfill customer orders.\",\n rows: [\n { label: \"#04910 · Ergo Office Chair\", value: \"Shipped\" },\n { label: \"#04911 · Sunset Desk 02\", value: \"Delivered\" },\n { label: \"#04912 · Eco Bookshelf\", value: \"Processing\" },\n { label: \"#04913 · Green Leaf Desk\", value: \"Refunded\" },\n ],\n },\n \"Roles & Permissions\": {\n subtitle: \"Control who can access what.\",\n rows: [\n { label: \"Admin\", value: \"2 members\" },\n { label: \"Sales Operator\", value: \"6 members\" },\n { label: \"Support Agent\", value: \"4 members\" },\n { label: \"Viewer\", value: \"9 members\" },\n ],\n },\n \"Billing & Subscription\": {\n subtitle: \"Manage your plan and invoices.\",\n rows: [\n { label: \"Current plan\", value: \"Pro — $49/mo\" },\n { label: \"Next invoice\", value: \"Sep 1, 2026\" },\n { label: \"Payment method\", value: \"Visa •••• 4242\" },\n { label: \"Billing email\", value: \"anelkadevs@gmail.com\" },\n ],\n },\n Integrations: {\n subtitle: \"Connect your favorite tools.\",\n rows: [\n { label: \"Slack\", value: \"Connected\" },\n { label: \"Stripe\", value: \"Connected\" },\n { label: \"Zapier\", value: \"Not connected\" },\n { label: \"Notion\", value: \"Not connected\" },\n ],\n },\n \"Customer Support\": {\n subtitle: \"Open tickets and support requests.\",\n rows: [\n { label: \"Delivery delay — order #04910\", value: \"Open\" },\n { label: \"Wrong item received\", value: \"Open\" },\n { label: \"Refund question\", value: \"Closed\" },\n { label: \"Bulk order inquiry\", value: \"Closed\" },\n ],\n },\n \"Help Center\": {\n subtitle: \"Guides and documentation.\",\n rows: [\n { label: \"Getting started with BagUI\", value: \"Article\" },\n { label: \"Managing transactions\", value: \"Article\" },\n { label: \"Setting up integrations\", value: \"Article\" },\n { label: \"Billing FAQ\", value: \"Article\" },\n ],\n },\n \"System Settings\": {\n subtitle: \"General configuration for your workspace.\",\n rows: [\n { label: \"Two-factor authentication\", value: \"toggle-on\" },\n { label: \"Email notifications\", value: \"toggle-on\" },\n { label: \"Weekly summary email\", value: \"toggle-off\" },\n { label: \"Dark mode\", value: \"toggle-off\" },\n ],\n },\n};\n\nconst PAGE_SUBTITLES: Record = {\n Products: \"Manage your product catalog and inventory.\",\n Transactions: \"View, filter and manage every transaction.\",\n \"Reports & Analytics\": \"A deeper look at your sales performance.\",\n Messages: \"Conversations with your customers.\",\n \"Team Performance\": \"See how your team is performing this month.\",\n Campaigns: \"Track and manage your marketing campaigns.\",\n};\n\n/* ------------------------------------------------------------------ */\n/* Small building blocks */\n/* ------------------------------------------------------------------ */\n\nfunction NavSection({\n title,\n items,\n activePage,\n onSelect,\n isDark,\n}: {\n title?: string;\n items: NavItem[];\n activePage: string;\n onSelect: (label: string) => void;\n isDark: boolean;\n}) {\n return (\n
\n {title && (\n \n {title}\n

\n )}\n
    \n {items.map((item) => {\n const active = item.label === activePage;\n return (\n
  • \n onSelect(item.label)}\n className={`w-full flex items-center gap-2.5 px-2 py-1.5 rounded-xl text-[13px] transition-colors ${\n active\n ? isDark\n ? \"bg-neutral-900 border border-neutral-800 shadow-sm text-neutral-50 font-medium\"\n : \"bg-gray-100 border border-gray-200 shadow-sm text-gray-900 font-medium\"\n : isDark\n ? \"border border-transparent text-neutral-400 hover:bg-neutral-900 hover:text-neutral-50\"\n : \"border border-transparent text-gray-500 hover:bg-gray-50 hover:text-gray-900\"\n }`}\n >\n \n \n \n {item.label}\n \n
    • \n );\n })}\n
\n
\n );\n}\n\nfunction MiniSparkline() {\n const bars: number[] = [5, 9, 6, 12, 8];\n return (\n
\n {bars.map((h, i) => (\n \n ))}\n
\n );\n}\n\nfunction StatCard({\n label,\n value,\n sub,\n index,\n selected,\n onClick,\n isDark,\n}: Stat & {\n index: number;\n selected: boolean;\n onClick: () => void;\n isDark: boolean;\n}) {\n return (\n \n
\n \n {label}\n

\n \n
\n \n {value}{\" \"}\n {sub && (\n \n {sub}\n \n )}\n

\n
\n \n \n \n +0.94 last year\n
\n \n );\n}\n\nfunction PageHeader({\n title,\n subtitle,\n isDark = false,\n}: {\n title: string;\n subtitle?: string;\n isDark?: boolean;\n}) {\n return (\n
\n \n {title}\n \n {subtitle && (\n \n {subtitle}\n

\n )}\n
\n );\n}\n\nfunction Toggle({ defaultOn }: { defaultOn?: boolean }) {\n const [on, setOn] = useState(!!defaultOn);\n return (\n setOn(!on)}\n className={`w-9 h-5 rounded-full flex p-0.5 transition-colors ${\n on ? \"bg-neutral-900 justify-end\" : \"bg-neutral-200 justify-start\"\n }`}\n >\n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Sales trend + revenue breakdown (self-contained, reusable) */\n/* ------------------------------------------------------------------ */\n\nfunction SalesTrendCard({ isDark }: { isDark: boolean }) {\n const [range, setRange] = useState(\"Monthly\");\n const maxSales = Math.max(...salesBars);\n const peakIndex = 20;\n\n return (\n \n
\n
\n \n Sales Trend\n

\n \n Total Revenue :{\" \"}\n \n $20,320\n \n

\n
\n
\n \n {\" \"}\n New User\n {\" \"}\n Existing User\n
\n \n {([\"Weekly\", \"Monthly\", \"Yearly\"] as TimeRange[]).map((r) => (\n setRange(r)}\n className={`px-2.5 py-1 rounded-md transition-colors ${\n range === r\n ? isDark\n ? \"bg-white text-neutral-900\"\n : \"bg-neutral-900 text-white\"\n : isDark\n ? \"text-neutral-400\"\n : \"text-neutral-500\"\n }`}\n >\n {r}\n \n ))}\n
\n \n \n\n
\n \n

Jun 2025

\n

\n New\n User \n 38k\n

\n

\n {\" \"}\n Existing User \n 18k\n

\n \n\n
\n
\n {[\"60k\", \"50k\", \"40k\", \"30k\", \"20k\", \"10k\", \"0k\"].map((y) => (\n {y}\n ))}\n
\n\n
\n
\n {salesBars.map((h, i) => {\n const scale =\n range === \"Weekly\" ? 0.7 : range === \"Yearly\" ? 1 : 0.9;\n const pct = (h / maxSales) * 100 * scale;\n const isPeak = i === peakIndex;\n const newUserPct = isPeak ? 0.68 : 0.4;\n return (\n \n \n \n
\n );\n })}\n
\n \n {monthLabels.map((m) => (\n {m}\n ))}\n
\n
\n \n \n \n );\n}\n\nfunction RevenueBreakdownCard({ isDark }: { isDark: boolean }) {\n const [insight, setInsight] = useState(false);\n const maxRevenue = Math.max(...revenueBars);\n\n return (\n \n

\n Revenue Breakdown\n

\n
\n
\n

Revenue by Category

\n

$20,320

\n
\n \n
\n\n
\n {revenueBars.map((h, i) => (\n \n ))}\n
\n \n 1 JAN\n 30 JAN\n \n\n setInsight(!insight)}\n className={`mt-4 flex items-center justify-center gap-1.5 w-full transition-colors rounded-lg py-2 text-[12px] ${isDark ? \"bg-neutral-900 text-neutral-300 hover:bg-neutral-800\" : \"bg-neutral-100 hover:bg-neutral-200 text-neutral-600\"}`}\n >\n {\" \"}\n {insight ? \"Hide insight\" : \"Get AI insight for better analysis\"}\n \n \n {insight && (\n \n Revenue peaks mid-period, driven mostly by repeat customers.\n Consider timing your next promotion around this window to compound\n the effect.\n \n )}\n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Transactions table (shared by Dashboard + Transactions page) */\n/* ------------------------------------------------------------------ */\n\nfunction TransactionsCard({\n title,\n txs,\n limit,\n query,\n setQuery,\n onAdd,\n onDelete,\n onStatusChange,\n openMenu,\n setOpenMenu,\n isDark,\n}: {\n title: string;\n txs: Transaction[];\n limit?: number;\n query: string;\n setQuery: (v: string) => void;\n onAdd: () => void;\n onDelete: (id: string) => void;\n onStatusChange: (id: string, status: TransactionStatus) => void;\n openMenu: string | null;\n setOpenMenu: (id: string | null) => void;\n isDark: boolean;\n}) {\n const filtered = txs.filter(\n (t) =>\n query === \"\" ||\n t.customer.toLowerCase().includes(query.toLowerCase()) ||\n t.product.toLowerCase().includes(query.toLowerCase()),\n );\n const shown = limit ? filtered.slice(0, limit) : filtered;\n\n return (\n \n
\n

{title}

\n
\n
\n \n setQuery(e.target.value)}\n placeholder=\"Search transactions\"\n className={`bg-transparent outline-none text-[12px] w-full ${isDark ? \"placeholder:text-neutral-500 text-white\" : \"placeholder:text-neutral-400 text-neutral-900\"}`}\n />\n
\n \n Add Transaction\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {shown.map((t, i) => (\n \n \n \n {t.id}\n \n \n {t.customer}\n \n \n {t.product}\n \n \n \n {t.qty}\n \n \n {t.price}\n \n \n {t.total}\n \n \n
\n \n setOpenMenu(openMenu === t.id ? null : t.id)\n }\n className={`p-1 rounded-md ${isDark ? \"hover:bg-neutral-800\" : \"hover:bg-neutral-100\"}`}\n >\n \n \n {openMenu === t.id && (\n <>\n setOpenMenu(null)}\n />\n \n onStatusChange(t.id, \"Success\")}\n className={`w-full flex items-center gap-2 px-3 py-1.5 text-[12px] ${isDark ? \"text-neutral-300 hover:bg-neutral-800\" : \"text-neutral-600 hover:bg-neutral-50\"}`}\n >\n Mark Success\n \n onStatusChange(t.id, \"Refunded\")}\n className={`w-full flex items-center gap-2 px-3 py-1.5 text-[12px] ${isDark ? \"text-neutral-300 hover:bg-neutral-800\" : \"text-neutral-600 hover:bg-neutral-50\"}`}\n >\n Mark Refunded\n \n onDelete(t.id)}\n className={`w-full flex items-center gap-2 px-3 py-1.5 text-[12px] ${isDark ? \"text-red-400 hover:bg-red-950/40\" : \"text-red-500 hover:bg-red-50\"}`}\n >\n Delete\n \n \n \n )}\n
\n \n \n ))}\n {shown.length === 0 && (\n \n \n No transactions match your search.\n \n \n )}\n \n
\n \n IDCustomerProductStatusQtyUnit PriceTotal RevenueActions
\n \n \n \n \n {t.status}\n \n
\n
\n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Other pages */\n/* ------------------------------------------------------------------ */\n\nfunction ProductsPage({ isDark = false }: { isDark?: boolean }) {\n const [selected, setSelected] = useState>(new Set());\n\n function toggle(name: string) {\n const next = new Set(selected);\n next.has(name) ? next.delete(name) : next.add(name);\n setSelected(next);\n }\n\n return (\n
\n
\n \n {selected.size > 0 && (\n setSelected(new Set())}\n className=\"text-[12px] text-neutral-500 border border-neutral-200 rounded-lg px-3 py-1.5 bg-white\"\n >\n {selected.size} selected · Clear\n \n )}\n
\n
\n {products.map((p, i) => {\n const active = selected.has(p.name);\n return (\n toggle(p.name)}\n initial={{ opacity: 0, y: 10 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.3, delay: i * 0.05 }}\n className={`relative text-left bg-white border rounded-2xl p-4 transition-shadow ${\n active\n ? \"border-neutral-900 ring-1 ring-neutral-900\"\n : \"border-neutral-200 hover:shadow-sm\"\n }`}\n >\n {active && (\n \n \n \n )}\n \n \n \n

\n {p.name}\n

\n

{p.category}

\n
\n \n {p.price}\n \n \n {p.stock} in stock\n \n
\n \n );\n })}\n
\n
\n );\n}\n\nfunction ReportsPage({ isDark = false }: { isDark?: boolean }) {\n return (\n
\n \n
\n \n \n
\n \n

\n Top Products\n

\n
\n {products.slice(0, 4).map((p, i) => (\n \n {p.name}\n \n {80 - i * 12} units sold\n \n {p.price}\n
\n ))}\n
\n \n \n );\n}\n\nfunction MessagesPage({ isDark = false }: { isDark?: boolean }) {\n const [messages, setMessages] = useState(initialMessages);\n const [selectedId, setSelectedId] = useState(initialMessages[0].id);\n const [reply, setReply] = useState(\"\");\n const [sent, setSent] = useState(false);\n const selected = messages.find((m) => m.id === selectedId)!;\n\n function select(id: string) {\n setSelectedId(id);\n setSent(false);\n setMessages(\n messages.map((m) => (m.id === id ? { ...m, unread: false } : m)),\n );\n }\n\n return (\n
\n \n
\n
\n {messages.map((m) => (\n select(m.id)}\n className={`w-full flex items-start gap-2.5 p-2.5 rounded-xl text-left transition-colors ${\n m.id === selectedId ? \"bg-neutral-100\" : \"hover:bg-neutral-50\"\n }`}\n >\n \n
\n
\n \n {m.name}\n

\n \n {m.time}\n \n
\n

\n {m.preview}\n

\n
\n {m.unread && (\n \n )}\n \n ))}\n
\n\n \n
\n \n
\n

\n {selected.name}\n

\n

{selected.time}

\n
\n
\n

\n {selected.full}\n

\n
\n {\n setReply(e.target.value);\n setSent(false);\n }}\n placeholder=\"Write a reply...\"\n className=\"flex-1 bg-neutral-100 rounded-lg px-3 py-2 text-[12px] outline-none placeholder:text-neutral-400\"\n />\n {\n if (reply.trim()) {\n setSent(true);\n setReply(\"\");\n }\n }}\n className=\"flex items-center gap-1.5 bg-neutral-900 text-white rounded-lg px-3 py-2 text-[12px] font-medium\"\n >\n Send\n \n
\n {sent && (\n

\n Message sent ✓\n

\n )}\n \n
\n
\n );\n}\n\nfunction TeamPage({ isDark = false }: { isDark?: boolean }) {\n const [order, setOrder] = useState<\"desc\" | \"asc\">(\"desc\");\n const sorted = [...teamMembers].sort((a, b) =>\n order === \"desc\" ? b.score - a.score : a.score - b.score,\n );\n const top = Math.max(...teamMembers.map((m) => m.score));\n\n return (\n
\n
\n \n setOrder(order === \"desc\" ? \"asc\" : \"desc\")}\n className=\"text-[12px] text-neutral-600 border border-neutral-200 rounded-lg px-3 py-1.5 bg-white flex items-center gap-1.5\"\n >\n Sort: {order === \"desc\" ? \"Highest first\" : \"Lowest first\"}\n \n \n
\n
\n {sorted.map((m, i) => (\n
\n \n
\n
\n

\n {m.name}\n {m.score === top && (\n \n )}\n

\n {m.score}\n
\n

{m.role}

\n
\n \n
\n
\n
\n ))}\n
\n
\n );\n}\n\nfunction CampaignsPage({ isDark = false }: { isDark?: boolean }) {\n const [campaigns, setCampaigns] = useState(initialCampaigns);\n const cycle: Record = {\n Active: \"Paused\",\n Paused: \"Ended\",\n Ended: \"Active\",\n };\n\n function cycleStatus(name: string) {\n setCampaigns(\n campaigns.map((c) =>\n c.name === name ? { ...c, status: cycle[c.status] } : c,\n ),\n );\n }\n\n return (\n
\n \n
\n {campaigns.map((c, i) => (\n \n
\n
\n \n \n \n

\n {c.name}\n

\n
\n cycleStatus(c.name)}\n className={`text-[11px] px-2 py-1 rounded-full font-medium ${campaignStatusStyles[c.status]}`}\n >\n {c.status}\n \n
\n
\n \n Budget{\" \"}\n {c.budget}\n \n \n Spent{\" \"}\n {c.spent}\n \n
\n \n ))}\n
\n
\n );\n}\n\nfunction GenericPage({\n pageKey,\n isDark = false,\n}: {\n pageKey: string;\n isDark?: boolean;\n}) {\n const content = GENERIC_CONTENT[pageKey];\n const [checked, setChecked] = useState>(new Set());\n\n function toggle(label: string) {\n const next = new Set(checked);\n next.has(label) ? next.delete(label) : next.add(label);\n setChecked(next);\n }\n\n if (!content) return null;\n const isSettings = pageKey === \"System Settings\";\n\n return (\n
\n \n
\n {content.rows.map((row, i) => (\n !isSettings && toggle(row.label)}\n className={`flex items-center justify-between px-3 py-3 rounded-xl transition-colors ${\n !isSettings ? \"cursor-pointer hover:bg-neutral-50\" : \"\"\n } ${checked.has(row.label) ? \"bg-neutral-50\" : \"\"} ${i !== content.rows.length - 1 ? \"border-b border-neutral-50\" : \"\"}`}\n >\n {row.label}\n {isSettings ? (\n \n ) : (\n {row.value}\n )}\n
\n ))}\n
\n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Main component */\n/* ------------------------------------------------------------------ */\n\nexport default function Dashboard() {\n const [activePage, setActivePage] = useState(\"Dashboard\");\n const [txs, setTxs] = useState(initialTransactions);\n const [query, setQuery] = useState(\"\");\n const [isDark, setIsDark] = useState(false);\n const [openMenu, setOpenMenu] = useState(null);\n const [nextId, setNextId] = useState(4914);\n const [notifOpen, setNotifOpen] = useState(false);\n const [profileOpen, setProfileOpen] = useState(false);\n const [selectedStat, setSelectedStat] = useState(null);\n const [periodLabel, setPeriodLabel] = useState(\"Daily\");\n const [periodOpen, setPeriodOpen] = useState(false);\n\n function handleAdd() {\n const customer =\n customersPool[Math.floor(Math.random() * customersPool.length)];\n const product =\n productsPool[Math.floor(Math.random() * productsPool.length)];\n const qty = Math.floor(Math.random() * 20) + 1;\n const unit = Math.floor(Math.random() * 3000) + 500;\n const newTx: Transaction = {\n id: `#${nextId}`,\n customer,\n product,\n status: \"Pending\",\n qty,\n price: `$${unit.toLocaleString()}`,\n total: `$${(unit * qty).toLocaleString()}`,\n };\n setTxs([newTx, ...txs]);\n setNextId(nextId + 1);\n }\n\n function handleDelete(id: string) {\n setTxs(txs.filter((t) => t.id !== id));\n setOpenMenu(null);\n }\n\n function handleStatus(id: string, status: TransactionStatus) {\n setTxs(txs.map((t) => (t.id === id ? { ...t, status } : t)));\n setOpenMenu(null);\n }\n\n function renderPage() {\n switch (activePage) {\n case \"Dashboard\":\n return (\n
\n
\n \n Welcome back, Anelka\n \n
\n
\n setPeriodOpen(!periodOpen)}\n className={`flex items-center gap-1.5 border rounded-lg px-3 py-1.5 text-[13px] ${isDark ? \"bg-[#1a1a1a] border-neutral-700 text-neutral-300\" : \"bg-white border-neutral-200 text-neutral-600\"}`}\n >\n {periodLabel} \n \n {periodOpen && (\n <>\n setPeriodOpen(false)}\n />\n
\n {[\"Daily\", \"Weekly\", \"Monthly\"].map((p) => (\n {\n setPeriodLabel(p);\n setPeriodOpen(false);\n }}\n className=\"w-full text-left px-3 py-1.5 text-[12px] text-neutral-600 hover:bg-neutral-50\"\n >\n {p}\n \n ))}\n
\n \n )}\n
\n \n 6 Nov 2025\n \n \n
\n
\n\n
\n {stats.map((s, i) => (\n \n setSelectedStat(selectedStat === s.label ? null : s.label)\n }\n isDark={isDark}\n {...s}\n />\n ))}\n
\n\n
\n \n \n
\n\n \n
\n );\n case \"Products\":\n return ;\n case \"Transactions\":\n return (\n
\n \n \n
\n );\n case \"Reports & Analytics\":\n return ;\n case \"Messages\":\n return ;\n case \"Team Performance\":\n return ;\n case \"Campaigns\":\n return ;\n default:\n return ;\n }\n }\n\n return (\n \n
\n {/* Sidebar */}\n \n
\n \n
\n \n
\n\n
\n \n Bag\\UI\n

\n \n Open Source UI Blocks\n

\n
\n \n
\n\n
\n \n \n \n \n
\n\n
\n setProfileOpen(!profileOpen)}\n className={`w-full flex items-center gap-2 px-2 py-2 border-t pt-3 rounded-[14px] ${\n isDark\n ? \"border-neutral-800 hover:bg-neutral-900\"\n : \"border-gray-100 hover:bg-gray-50\"\n }`}\n >\n \n
\n \n Anelka Bag\n

\n \n Software Developer\n

\n
\n \n {profileOpen && (\n <>\n setProfileOpen(false)}\n />\n \n \n Profile\n \n \n Settings\n \n \n Log out\n \n
\n \n )}\n
\n \n\n {/* Main content */}\n \n {/* Top bar */}\n \n \n {activePage}{\" \"}\n \n /\n \n \n Overview\n \n

\n
\n \n \n \n
\n\n setIsDark((v) => !v)}\n className=\"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-neutral-100\"\n aria-label=\"Toggle theme\"\n >\n {isDark ? (\n \n ) : (\n \n )}\n \n\n
\n setNotifOpen(!notifOpen)}\n className=\"relative w-8 h-8 flex items-center justify-center rounded-lg hover:bg-neutral-100\"\n >\n \n \n \n {notifOpen && (\n <>\n setNotifOpen(false)}\n />\n
\n

\n Notifications\n

\n {[\n \"New order from Madelyn Lubin\",\n \"Refund requested — order #04913\",\n \"Monthly report is ready\",\n ].map((n) => (\n \n {n}\n

\n ))}\n
\n \n )}\n
\n\n \n \n \n \n\n \n \n {renderPage()}\n \n \n \n \n \n );\n}\n", "type": "registry:block", "target": "components/Dashboard/dashboard-agency.tsx" } ], "type": "registry:block" }