{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "control-tower",
  "title": "Customer Directory",
  "type": "registry:templates",
  "description": "Full-page customer management view featuring the filter bar, sortable data table, and slide-over customer details drawer.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { ControlTowerTemplate } from \"@etherealui/react\"\n\nexport default function CustomerDirectoryPage() {\n  return <ControlTowerTemplate />\n}",
  "files": [
    {
      "path": "packages/ui/src/templates/control-tower.tsx",
      "target": "components/ui/control-tower.tsx",
      "type": "registry:templates",
      "content": "import * as React from \"react\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport {\n  SidebarShell,\n  HeaderNavbar,\n  PageHeaderBar,\n} from \"../blocks/app-shell\"\nimport { AdvancedFilterBar } from \"../blocks/filter-bar\"\nimport { EnterpriseDataTable } from \"../blocks/data-table\"\n\nexport const ControlTowerTemplate: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [mobileNavOpen, setMobileNavOpen] = React.useState(false)\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      <SidebarShell activeId=\"customers\" 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=\"customers\"\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\", \"Customers\", \"Directory\"]}\n          onToggleMobileMenu={() => setMobileNavOpen(true)}\n        />\n\n        <main className=\"flex-1 space-y-4 sm:space-y-5 overflow-y-auto p-3.5 sm:p-6\">\n          <PageHeaderBar\n            title=\"Customer Directory\"\n            subtitle=\"Search, filter, and inspect customer subscriptions. Click any row to open the details drawer.\"\n          />\n\n          <AdvancedFilterBar />\n\n          <EnterpriseDataTable />\n        </main>\n      </div>\n    </div>\n  )\n}\n"
    }
  ]
}