"use client"; import * as React from "react"; import { AreaChart, DonutChart, Sparkline } from "./charts"; import { Avatar } from "./avatar"; import { Badge } from "./badge"; import { Button } from "./button"; import { NotificationCenter, type AppNotification } from "./notification-center"; import { SearchInput } from "./search-input"; import { Sidebar, SidebarItem, SidebarSection } from "./sidebar"; import { StatCard } from "./stat-card"; import { ChartIcon, FolderIcon, HomeIcon, MailIcon, SettingsIcon, UsersIcon, WalletIcon, BoltIcon } from "@kineticui/icons"; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const revenue = months.map((m, i) => ({ month: m, revenue: Math.round(18 + i * 3.4 + Math.sin(i) * 6) * 1000, target: (20 + i * 3) * 1000 })); const orders = [ { id: "#3021", customer: "Maya Kapoor", total: "$1,240", status: "Paid" }, { id: "#3020", customer: "Rohan Joshi", total: "$86", status: "Pending" }, { id: "#3019", customer: "Rosa Silva", total: "$412", status: "Paid" }, { id: "#3018", customer: "Kemi Okafor", total: "$2,990", status: "Refunded" }, { id: "#3017", customer: "Noah Kim", total: "$154", status: "Paid" }, ]; const tone = { Paid: "success", Pending: "warning", Refunded: "danger" } as const; /** SaaS dashboard: collapsible sidebar, top bar with search and notifications, KPIs, charts and recent orders. */ export function DashboardShell() { const [collapsed, setCollapsed] = React.useState(false); const [active, setActive] = React.useState("Overview"); const [notes, setNotes] = React.useState([ { id: "1", title: "New order #3021", body: "Maya Kapoor · $1,240", time: "2m ago" }, { id: "2", title: "Payout sent", body: "$12,480 to •••• 4242", time: "1h ago", read: true }, ]); const item = (label: string, icon: React.ReactNode, badge?: number) => setActive(label)} />; return (

K {collapsed ? null : Kinetic}

} > {item("Overview", )} {item("Analytics", )} {item("Orders", , 12)} {item("Customers", )} {item("Projects", )} {item("Inbox", , 3)} {item("Settings", )}

{active}

Good morning, Maya

Here's what happened while you were away.

} />

Revenue vs target 2026

`$${v / 1000}k`} height={230} />

Sales by channel

`${v}%`} />

Recent orders

{orders.map((o) => ( ))}

{o.id}

{o.customer}

{o.status}

{o.total}

); }

Dashboard

Installation