{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "executive-analytics",
  "title": "Analytics Dashboard",
  "type": "registry:templates",
  "description": "Complete SaaS analytics dashboard combining the collapsible sidebar, 4 KPI cards, revenue chart, activity feed, and top accounts table.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { ExecutiveAnalyticsTemplate } from \"@etherealui/react\"\n\nexport default function AnalyticsDashboardPage() {\n  return <ExecutiveAnalyticsTemplate />\n}",
  "files": [
    {
      "path": "packages/ui/src/templates/executive-analytics.tsx",
      "target": "components/ui/executive-analytics.tsx",
      "type": "registry:templates",
      "content": "import * as React from \"react\"\nimport { ArrowUpRight, RefreshCw, X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport {\n  SidebarShell,\n  HeaderNavbar,\n  PageHeaderBar,\n} from \"../blocks/app-shell\"\nimport { MultiMetricGrid, ProgressMetricCard } from \"../blocks/stat-cards\"\nimport { Badge } from \"../primitives/badge\"\nimport { Button, ToggleGroup } from \"../primitives/button\"\nimport { Avatar } from \"../primitives/avatar\"\nimport { CommandPalette } from \"../primitives/command-palette\"\n\nconst chartSeriesData: Record<\n  string,\n  Array<{ label: string; revenue: number; signups: number }>\n> = {\n  \"30d\": [\n    { label: \"Oct 08\", revenue: 62, signups: 48 },\n    { label: \"Oct 12\", revenue: 68, signups: 54 },\n    { label: \"Oct 16\", revenue: 64, signups: 59 },\n    { label: \"Oct 20\", revenue: 75, signups: 66 },\n    { label: \"Oct 24\", revenue: 81, signups: 72 },\n    { label: \"Oct 28\", revenue: 79, signups: 76 },\n    { label: \"Nov 01\", revenue: 89, signups: 84 },\n    { label: \"Nov 06\", revenue: 96, signups: 92 },\n  ],\n  \"7d\": [\n    { label: \"Mon\", revenue: 74, signups: 68 },\n    { label: \"Tue\", revenue: 79, signups: 72 },\n    { label: \"Wed\", revenue: 83, signups: 77 },\n    { label: \"Thu\", revenue: 80, signups: 75 },\n    { label: \"Fri\", revenue: 88, signups: 85 },\n    { label: \"Sat\", revenue: 92, signups: 89 },\n    { label: \"Sun\", revenue: 97, signups: 94 },\n  ],\n}\n\nconst recentActivity = [\n  {\n    id: \"act-1\",\n    title: \"Linear Orbit Inc. upgraded to Enterprise Annual\",\n    meta: \"+$4,200 MRR • Invoice #INV-2094 paid\",\n    time: \"12m ago\",\n    fallback: \"LO\",\n  },\n  {\n    id: \"act-2\",\n    title: \"Raycast Labs added 12 team seats\",\n    meta: \"Pro Plan expansion •Prorated billing applied\",\n    time: \"42m ago\",\n    fallback: \"RL\",\n  },\n  {\n    id: \"act-3\",\n    title: \"Weekly financial summary exported\",\n    meta: \"Generated by Elena Rostova\",\n    time: \"2h ago\",\n    fallback: \"ER\",\n  },\n]\n\nconst topCustomers = [\n  {\n    name: \"Linear Orbit Inc.\",\n    domain: \"linearorbit.io\",\n    fallback: \"LO\",\n    mrr: \"$4,200\",\n    growth: \"+18.4%\",\n    status: \"Enterprise\",\n  },\n  {\n    name: \"Raycast Labs GmbH\",\n    domain: \"raycastlabs.de\",\n    fallback: \"RL\",\n    mrr: \"$3,150\",\n    growth: \"+12.1%\",\n    status: \"Enterprise\",\n  },\n  {\n    name: \"Northstar Analytics\",\n    domain: \"northstar.co\",\n    fallback: \"NA\",\n    mrr: \"$1,950\",\n    growth: \"+9.4%\",\n    status: \"Scale\",\n  },\n]\n\nexport const ExecutiveAnalyticsTemplate: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [range, setRange] = React.useState(\"30d\")\n  const [cmdOpen, setCmdOpen] = React.useState(false)\n  const [mobileNavOpen, setMobileNavOpen] = React.useState(false)\n  const points = chartSeriesData[range] || chartSeriesData[\"30d\"]\n\n  return (\n    <div\n      className={cn(\n        \"relative flex min-h-[560px] sm:min-h-[720px] w-full overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/40 text-zinc-900 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100\",\n        className\n      )}\n    >\n      <CommandPalette\n        open={cmdOpen}\n        onOpenChange={setCmdOpen}\n        enableGlobalShortcut={false}\n      />\n\n      <SidebarShell activeId=\"overview\" className=\"hidden md:flex\" />\n\n      {mobileNavOpen && (\n        <div className=\"absolute inset-0 z-30 flex md:hidden\">\n          <div\n            className=\"fixed inset-0 bg-black/50 backdrop-blur-xs\"\n            onClick={() => setMobileNavOpen(false)}\n          />\n          <div className=\"relative z-10 flex h-full\">\n            <SidebarShell\n              activeId=\"overview\"\n              className=\"h-full bg-white dark:bg-zinc-900 shadow-xl\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => setMobileNavOpen(false)}\n              aria-label=\"Close sidebar\"\n              className=\"m-2 flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900/80 text-white\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex flex-1 flex-col min-w-0\">\n        <HeaderNavbar\n          breadcrumbs={[\"Workspace\", \"Analytics\", \"Overview\"]}\n          onOpenCommandPalette={() => setCmdOpen(true)}\n          onToggleMobileMenu={() => setMobileNavOpen(true)}\n        />\n\n        <main className=\"flex-1 space-y-5 sm:space-y-6 overflow-y-auto p-3.5 sm:p-6\">\n          <PageHeaderBar\n            title=\"Analytics Overview\"\n            subtitle=\"Track recurring revenue, subscriber retention, and account expansion.\"\n          />\n\n          <MultiMetricGrid />\n\n          <div className=\"grid grid-cols-1 gap-6 xl:grid-cols-3\">\n            <div className=\"xl:col-span-2 rounded-xl border border-zinc-200 bg-white p-5 flex flex-col justify-between dark:border-zinc-800 dark:bg-zinc-900\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 pb-4 dark:border-zinc-800\">\n                <div>\n                  <div className=\"flex items-center gap-2\">\n                    <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n                      Revenue &amp; Subscriber Growth\n                    </h3>\n                    <Badge variant=\"emerald\">+14.2%</Badge>\n                  </div>\n                  <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">\n                    Net settled volume across active subscriptions\n                  </p>\n                </div>\n\n                <ToggleGroup\n                  size=\"sm\"\n                  value={range}\n                  onValueChange={setRange}\n                  items={[\n                    { value: \"7d\", label: \"7d\" },\n                    { value: \"30d\", label: \"30d\" },\n                  ]}\n                />\n              </div>\n\n              <div className=\"mt-6 grid grid-cols-8 items-end gap-3 h-48 pt-4 px-2\">\n                {points.map((pt) => (\n                  <div\n                    key={pt.label}\n                    className=\"group flex flex-col items-center gap-2 h-full justify-end\"\n                  >\n                    <div className=\"w-full flex items-end justify-center gap-1.5 h-full\">\n                      <div\n                        style={{ height: `${pt.revenue}%` }}\n                        className=\"w-full max-w-[18px] rounded-t-md bg-blue-600 transition-all duration-300 group-hover:bg-blue-500\"\n                      />\n                      <div\n                        style={{ height: `${pt.signups}%` }}\n                        className=\"w-full max-w-[14px] rounded-t-md bg-zinc-200 transition-all duration-300 dark:bg-zinc-700\"\n                      />\n                    </div>\n                    <span className=\"text-[10px] text-zinc-400\">\n                      {pt.label}\n                    </span>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"space-y-4\">\n              <ProgressMetricCard />\n\n              <div className=\"rounded-xl border border-zinc-200 bg-white p-5 space-y-4 dark:border-zinc-800 dark:bg-zinc-900\">\n                <div className=\"flex items-center justify-between\">\n                  <h3 className=\"text-xs font-semibold text-zinc-700 dark:text-zinc-300\">\n                    Recent Activity\n                  </h3>\n                  <RefreshCw className=\"h-3.5 w-3.5 text-zinc-400\" />\n                </div>\n\n                <div className=\"space-y-3.5\">\n                  {recentActivity.map((item, idx) => (\n                    <div\n                      key={item.id}\n                      className=\"flex items-start justify-between gap-3 text-xs\"\n                    >\n                      <div className=\"flex items-start gap-2.5\">\n                        <Avatar\n                          fallback={item.fallback}\n                          tint={idx % 2 === 0 ? \"blue\" : \"neutral\"}\n                          size=\"xs\"\n                        />\n                        <div>\n                          <p className=\"font-medium text-zinc-800 dark:text-zinc-200\">\n                            {item.title}\n                          </p>\n                          <p className=\"text-[11px] text-zinc-400\">\n                            {item.meta}\n                          </p>\n                        </div>\n                      </div>\n                      <span className=\"text-[10px] text-zinc-400 shrink-0\">\n                        {item.time}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"rounded-xl border border-zinc-200 bg-white overflow-hidden dark:border-zinc-800 dark:bg-zinc-900\">\n            <div className=\"flex items-center justify-between border-b border-zinc-200 px-5 py-3.5 dark:border-zinc-800\">\n              <div>\n                <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n                  Top Accounts\n                </h3>\n                <p className=\"text-xs text-zinc-500\">\n                  Sorted by monthly recurring revenue\n                </p>\n              </div>\n              <Button variant=\"outline\" size=\"sm\">\n                View all\n                <ArrowUpRight className=\"h-3.5 w-3.5\" />\n              </Button>\n            </div>\n            <div className=\"divide-y divide-zinc-200 dark:divide-zinc-800\">\n              {topCustomers.map((cust, i) => (\n                <div\n                  key={cust.name}\n                  className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-3 text-xs\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <Avatar\n                      fallback={cust.fallback}\n                      tint={i % 2 === 0 ? \"blue\" : \"neutral\"}\n                      size=\"sm\"\n                    />\n                    <div>\n                      <p className=\"font-medium text-zinc-900 dark:text-zinc-100\">\n                        {cust.name}\n                      </p>\n                      <p className=\"text-[11px] text-zinc-400\">{cust.domain}</p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-6\">\n                    <Badge variant=\"default\">{cust.status}</Badge>\n                    <div className=\"text-right\">\n                      <span className=\"font-semibold text-zinc-900 dark:text-zinc-100\">\n                        {cust.mrr}\n                      </span>\n                      <span className=\"ml-2 text-emerald-600 dark:text-emerald-400\">\n                        {cust.growth}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
    }
  ]
}