dashboard-01.json — ui Source File
Architecture documentation for dashboard-01.json, a json file in the ui codebase.
Entity Profile
Source Code
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dashboard-01",
"title": "Dashboard 01",
"description": "A dashboard with sidebar, charts and data table.",
"dependencies": [
"@dnd-kit/core",
"@dnd-kit/modifiers",
"@dnd-kit/sortable",
"@dnd-kit/utilities",
"@tanstack/react-table",
"zod"
],
"registryDependencies": [
"sidebar",
"breadcrumb",
"separator",
"label",
"chart",
"card",
"select",
"tabs",
"table",
"toggle-group",
"badge",
"button",
"checkbox",
"dropdown-menu",
"drawer",
"input",
"avatar",
"sheet",
"sonner"
],
"files": [
{
"path": "registry/base-mira/blocks/dashboard-01/page.tsx",
"content": "import { AppSidebar } from \"@/registry/base-mira/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/base-mira/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/base-mira/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/base-mira/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/base-mira/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-mira/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n return (\n <SidebarProvider\n style={\n {\n \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\n \"--header-height\": \"calc(var(--spacing) * 12)\",\n } as React.CSSProperties\n }\n >\n <AppSidebar variant=\"inset\" />\n <SidebarInset>\n <SiteHeader />\n <div className=\"flex flex-1 flex-col\">\n <div className=\"@container/main flex flex-1 flex-col gap-2\">\n <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n <SectionCards />\n <div className=\"px-4 lg:px-6\">\n <ChartAreaInteractive />\n </div>\n <DataTable data={data} />\n </div>\n </div>\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
"type": "registry:page",
"target": "app/dashboard/page.tsx"
},
{
"path": "registry/base-mira/blocks/dashboard-01/data.json",
"content": "[\n {\n \"id\": 1,\n \"header\": \"Cover page\",\n \"type\": \"Cover page\",\n \"status\": \"In Process\",\n \"target\": \"18\",\n \"limit\": \"5\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 2,\n \"header\": \"Table of contents\",\n \"type\": \"Table of contents\",\n \"status\": \"Done\",\n \"target\": \"29\",\n \"limit\": \"24\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 3,\n \"header\": \"Executive summary\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"10\",\n \"limit\": \"13\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 4,\n \"header\": \"Technical approach\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"27\",\n \"limit\": \"23\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 5,\n \"header\": \"Design\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"2\",\n \"limit\": \"16\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 6,\n \"header\": \"Capabilities\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"20\",\n \"limit\": \"8\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 7,\n \"header\": \"Integration with existing systems\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"21\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 8,\n \"header\": \"Innovation and Advantages\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"25\",\n \"limit\": \"26\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 9,\n \"header\": \"Overview of EMR's Innovative Solutions\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"7\",\n \"limit\": \"23\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 10,\n \"header\": \"Advanced Algorithms and Machine Learning\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"28\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 11,\n \"header\": \"Adaptive Communication Protocols\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"9\",\n \"limit\": \"31\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 12,\n \"header\": \"Advantages Over Current Technologies\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"12\",\n \"limit\": \"0\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 13,\n \"header\": \"Past Performance\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"33\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 14,\n \"header\": \"Customer Feedback and Satisfaction Levels\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"15\",\n \"limit\": \"34\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 15,\n \"header\": \"Implementation Challenges and Solutions\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"3\",\n \"limit\": \"35\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 16,\n \"header\": \"Security Measures and Data Protection Policies\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"6\",\n \"limit\": \"36\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 17,\n \"header\": \"Scalability and Future Proofing\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"4\",\n \"limit\": \"37\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 18,\n \"header\": \"Cost-Benefit Analysis\",\n \"type\": \"Plain language\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"38\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 19,\n \"header\": \"User Training and Onboarding Experience\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"17\",\n \"limit\": \"39\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 20,\n \"header\": \"Future Development Roadmap\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"11\",\n \"limit\": \"40\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 21,\n \"header\": \"System Architecture Overview\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"24\",\n \"limit\": \"18\",\n \"reviewer\": \"Maya Johnson\"\n },\n {\n \"id\": 22,\n \"header\": \"Risk Management Plan\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"15\",\n \"limit\": \"22\",\n \"reviewer\": \"Carlos Rodriguez\"\n },\n {\n \"id\": 23,\n \"header\": \"Compliance Documentation\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"31\",\n \"limit\": \"27\",\n \"reviewer\": \"Sarah Chen\"\n },\n {\n \"id\": 24,\n \"header\": \"API Documentation\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"8\",\n \"limit\": \"12\",\n \"reviewer\": \"Raj Patel\"\n },\n {\n \"id\": 25,\n \"header\": \"User Interface Mockups\",\n \"type\": \"Visual\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"25\",\n \"reviewer\": \"Leila Ahmadi\"\n },\n {\n \"id\": 26,\n \"header\": \"Database Schema\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"20\",\n \"reviewer\": \"Thomas Wilson\"\n },\n {\n \"id\": 27,\n \"header\": \"Testing Methodology\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"17\",\n \"limit\": \"14\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 28,\n \"header\": \"Deployment Strategy\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"30\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 29,\n \"header\": \"Budget Breakdown\",\n \"type\": \"Financial\",\n \"status\": \"In Process\",\n \"target\": \"13\",\n \"limit\": \"16\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 30,\n \"header\": \"Market Analysis\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"29\",\n \"limit\": \"32\",\n \"reviewer\": \"Sophia Martinez\"\n },\n {\n \"id\": 31,\n \"header\": \"Competitor Comparison\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"19\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 32,\n \"header\": \"Maintenance Plan\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"16\",\n \"limit\": \"23\",\n \"reviewer\": \"Alex Thompson\"\n },\n {\n \"id\": 33,\n \"header\": \"User Personas\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"24\",\n \"reviewer\": \"Nina Patel\"\n },\n {\n \"id\": 34,\n \"header\": \"Accessibility Compliance\",\n \"type\": \"Legal\",\n \"status\": \"Done\",\n \"target\": \"18\",\n \"limit\": \"21\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 35,\n \"header\": \"Performance Metrics\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"23\",\n \"limit\": \"26\",\n \"reviewer\": \"David Kim\"\n },\n {\n \"id\": 36,\n \"header\": \"Disaster Recovery Plan\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"17\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 37,\n \"header\": \"Third-party Integrations\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"25\",\n \"limit\": \"28\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 38,\n \"header\": \"User Feedback Summary\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"20\",\n \"limit\": \"15\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 39,\n \"header\": \"Localization Strategy\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"12\",\n \"limit\": \"19\",\n \"reviewer\": \"Maria Garcia\"\n },\n {\n \"id\": 40,\n \"header\": \"Mobile Compatibility\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"28\",\n \"limit\": \"31\",\n \"reviewer\": \"James Wilson\"\n },\n {\n \"id\": 41,\n \"header\": \"Data Migration Plan\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"22\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 42,\n \"header\": \"Quality Assurance Protocols\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"33\",\n \"reviewer\": \"Priya Singh\"\n },\n {\n \"id\": 43,\n \"header\": \"Stakeholder Analysis\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"11\",\n \"limit\": \"14\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 44,\n \"header\": \"Environmental Impact Assessment\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"24\",\n \"limit\": \"27\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 45,\n \"header\": \"Intellectual Property Rights\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"17\",\n \"limit\": \"20\",\n \"reviewer\": \"Sarah Johnson\"\n },\n {\n \"id\": 46,\n \"header\": \"Customer Support Framework\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"25\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 47,\n \"header\": \"Version Control Strategy\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"15\",\n \"limit\": \"18\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 48,\n \"header\": \"Continuous Integration Pipeline\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"29\",\n \"reviewer\": \"Michael Chen\"\n },\n {\n \"id\": 49,\n \"header\": \"Regulatory Compliance\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"13\",\n \"limit\": \"16\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 50,\n \"header\": \"User Authentication System\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"28\",\n \"limit\": \"31\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 51,\n \"header\": \"Data Analytics Framework\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"24\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 52,\n \"header\": \"Cloud Infrastructure\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"16\",\n \"limit\": \"19\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 53,\n \"header\": \"Network Security Measures\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"29\",\n \"limit\": \"32\",\n \"reviewer\": \"Lisa Wong\"\n },\n {\n \"id\": 54,\n \"header\": \"Project Timeline\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"17\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 55,\n \"header\": \"Resource Allocation\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"30\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 56,\n \"header\": \"Team Structure and Roles\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"20\",\n \"limit\": \"23\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 57,\n \"header\": \"Communication Protocols\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"15\",\n \"limit\": \"18\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 58,\n \"header\": \"Success Metrics\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"33\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 59,\n \"header\": \"Internationalization Support\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"23\",\n \"limit\": \"26\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 60,\n \"header\": \"Backup and Recovery Procedures\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"18\",\n \"limit\": \"21\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 61,\n \"header\": \"Monitoring and Alerting System\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"25\",\n \"limit\": \"28\",\n \"reviewer\": \"Daniel Park\"\n },\n {\n \"id\": 62,\n \"header\": \"Code Review Guidelines\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"12\",\n \"limit\": \"15\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 63,\n \"header\": \"Documentation Standards\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"30\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 64,\n \"header\": \"Release Management Process\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"25\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 65,\n \"header\": \"Feature Prioritization Matrix\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"22\",\n \"reviewer\": \"Emma Davis\"\n },\n {\n \"id\": 66,\n \"header\": \"Technical Debt Assessment\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"24\",\n \"limit\": \"27\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 67,\n \"header\": \"Capacity Planning\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"24\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 68,\n \"header\": \"Service Level Agreements\",\n \"type\": \"Legal\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"29\",\n \"reviewer\": \"Assign reviewer\"\n }\n]\n",
"type": "registry:file",
"target": "app/dashboard/data.json"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/app-sidebar.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavDocuments } from \"@/registry/base-mira/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/base-mira/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/dashboard-01/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Dashboard\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"LayoutDashboardIcon\"\n tabler=\"IconDashboard\"\n hugeicons=\"DashboardSquare01Icon\"\n phosphor=\"SquaresFourIcon\"\n remixicon=\"RiDashboardLine\"\n />\n ),\n },\n {\n title: \"Lifecycle\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"ListIcon\"\n tabler=\"IconListDetails\"\n hugeicons=\"Menu01Icon\"\n phosphor=\"ListIcon\"\n remixicon=\"RiListUnordered\"\n />\n ),\n },\n {\n title: \"Analytics\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"ChartBarIcon\"\n tabler=\"IconChartBar\"\n hugeicons=\"ChartHistogramIcon\"\n phosphor=\"ChartBarIcon\"\n remixicon=\"RiBarChartLine\"\n />\n ),\n },\n {\n title: \"Projects\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n ),\n },\n {\n title: \"Team\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"UsersIcon\"\n tabler=\"IconUsers\"\n hugeicons=\"UserGroupIcon\"\n phosphor=\"UsersIcon\"\n remixicon=\"RiGroupLine\"\n />\n ),\n },\n ],\n navClouds: [\n {\n title: \"Capture\",\n icon: (\n <IconPlaceholder\n lucide=\"CameraIcon\"\n tabler=\"IconCamera\"\n hugeicons=\"Camera01Icon\"\n phosphor=\"CameraIcon\"\n remixicon=\"RiCameraLine\"\n />\n ),\n isActive: true,\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Proposal\",\n icon: (\n <IconPlaceholder\n lucide=\"FileTextIcon\"\n tabler=\"IconFileDescription\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileTextIcon\"\n remixicon=\"RiFileTextLine\"\n />\n ),\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Prompts\",\n icon: (\n <IconPlaceholder\n lucide=\"FileTextIcon\"\n tabler=\"IconFileAi\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileTextIcon\"\n remixicon=\"RiFileTextLine\"\n />\n ),\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Settings\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"Settings2Icon\"\n tabler=\"IconSettings\"\n hugeicons=\"Settings05Icon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n ),\n },\n {\n title: \"Get Help\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"CircleHelpIcon\"\n tabler=\"IconHelp\"\n hugeicons=\"HelpCircleIcon\"\n phosphor=\"QuestionIcon\"\n remixicon=\"RiQuestionLine\"\n />\n ),\n },\n {\n title: \"Search\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n />\n ),\n },\n ],\n documents: [\n {\n name: \"Data Library\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"DatabaseIcon\"\n tabler=\"IconDatabase\"\n hugeicons=\"Database01Icon\"\n phosphor=\"DatabaseIcon\"\n remixicon=\"RiDatabase2Line\"\n />\n ),\n },\n {\n name: \"Reports\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"FileChartColumnIcon\"\n tabler=\"IconReport\"\n hugeicons=\"Analytics01Icon\"\n phosphor=\"ChartLineIcon\"\n remixicon=\"RiFileChartLine\"\n />\n ),\n },\n {\n name: \"Word Assistant\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFileWord\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileIcon\"\n remixicon=\"RiFileLine\"\n />\n ),\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n return (\n <Sidebar collapsible=\"offcanvas\" {...props}>\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton\n className=\"data-[slot=sidebar-menu-button]:p-1.5!\"\n render={<a href=\"#\" />}\n >\n <IconPlaceholder\n lucide=\"CommandIcon\"\n tabler=\"IconInnerShadowTop\"\n hugeicons=\"CommandIcon\"\n phosphor=\"CommandIcon\"\n remixicon=\"RiCommandLine\"\n className=\"size-5!\"\n />\n <span className=\"text-base font-semibold\">Acme Inc.</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarHeader>\n <SidebarContent>\n <NavMain items={data.navMain} />\n <NavDocuments items={data.documents} />\n <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n </SidebarContent>\n <SidebarFooter>\n <NavUser user={data.user} />\n </SidebarFooter>\n </Sidebar>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/chart-area-interactive.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/base-mira/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n const isMobile = useIsMobile()\n const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n React.useEffect(() => {\n if (isMobile) {\n setTimeRange(\"7d\")\n }\n }, [isMobile])\n\n const filteredData = chartData.filter((item) => {\n const date = new Date(item.date)\n const referenceDate = new Date(\"2024-06-30\")\n let daysToSubtract = 90\n if (timeRange === \"30d\") {\n daysToSubtract = 30\n } else if (timeRange === \"7d\") {\n daysToSubtract = 7\n }\n const startDate = new Date(referenceDate)\n startDate.setDate(startDate.getDate() - daysToSubtract)\n return date >= startDate\n })\n\n return (\n <Card className=\"@container/card\">\n <CardHeader>\n <CardTitle>Total Visitors</CardTitle>\n <CardDescription>\n <span className=\"hidden @[540px]/card:block\">\n Total for the last 3 months\n </span>\n <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n </CardDescription>\n <CardAction>\n <ToggleGroup\n multiple={false}\n value={timeRange ? [timeRange] : []}\n onValueChange={(value) => {\n setTimeRange(value[0] ?? \"90d\")\n }}\n variant=\"outline\"\n className=\"hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex\"\n >\n <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n </ToggleGroup>\n <Select\n value={timeRange}\n onValueChange={(value) => {\n if (value !== null) {\n setTimeRange(value)\n }\n }}\n >\n <SelectTrigger\n className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n size=\"sm\"\n aria-label=\"Select a value\"\n >\n <SelectValue placeholder=\"Last 3 months\" />\n </SelectTrigger>\n <SelectContent className=\"rounded-xl\">\n <SelectItem value=\"90d\" className=\"rounded-lg\">\n Last 3 months\n </SelectItem>\n <SelectItem value=\"30d\" className=\"rounded-lg\">\n Last 30 days\n </SelectItem>\n <SelectItem value=\"7d\" className=\"rounded-lg\">\n Last 7 days\n </SelectItem>\n </SelectContent>\n </Select>\n </CardAction>\n </CardHeader>\n <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n <ChartContainer\n config={chartConfig}\n className=\"aspect-auto h-[250px] w-full\"\n >\n <AreaChart data={filteredData}>\n <defs>\n <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={1.0}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n </defs>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n minTickGap={32}\n tickFormatter={(value) => {\n const date = new Date(value)\n return date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n })\n }}\n />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n labelFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n })\n }}\n indicator=\"dot\"\n />\n }\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"url(#fillMobile)\"\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"url(#fillDesktop)\"\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/data-table.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n <Button\n {...attributes}\n {...listeners}\n variant=\"ghost\"\n size=\"icon\"\n className=\"text-muted-foreground size-7 hover:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"GripVerticalIcon\"\n tabler=\"IconGripVertical\"\n hugeicons=\"DragDropVerticalIcon\"\n phosphor=\"DotsSixVerticalIcon\"\n remixicon=\"RiDraggable\"\n className=\"text-muted-foreground size-3\"\n />\n <span className=\"sr-only\">Drag to reorder</span>\n </Button>\n )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => <DragHandle id={row.original.id} />,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n <div className=\"flex items-center justify-center\">\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() &&\n !table.getIsAllPageRowsSelected()\n }\n onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n </div>\n ),\n cell: ({ row }) => (\n <div className=\"flex items-center justify-center\">\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n </div>\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return <TableCellViewer item={row.original} />\n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n <div className=\"w-32\">\n <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n {row.original.type}\n </Badge>\n </div>\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n {row.original.status === \"Done\" ? (\n <IconPlaceholder\n lucide=\"CircleCheckIcon\"\n tabler=\"IconCircleCheckFilled\"\n hugeicons=\"CheckmarkCircle01Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleFill\"\n className=\"fill-green-500 dark:fill-green-400\"\n />\n ) : (\n <IconPlaceholder\n lucide=\"LoaderIcon\"\n tabler=\"IconLoader\"\n hugeicons=\"Loading03Icon\"\n phosphor=\"SpinnerIcon\"\n remixicon=\"RiLoader4Line\"\n />\n )}\n {row.original.status}\n </Badge>\n ),\n },\n {\n accessorKey: \"target\",\n header: () => <div className=\"w-full text-right\">Target</div>,\n cell: ({ row }) => (\n <form\n onSubmit={(e) => {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n Target\n </Label>\n <Input\n className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n defaultValue={row.original.target}\n id={`${row.original.id}-target`}\n />\n </form>\n ),\n },\n {\n accessorKey: \"limit\",\n header: () => <div className=\"w-full text-right\">Limit</div>,\n cell: ({ row }) => (\n <form\n onSubmit={(e) => {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n Limit\n </Label>\n <Input\n className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n defaultValue={row.original.limit}\n id={`${row.original.id}-limit`}\n />\n </form>\n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n Reviewer\n </Label>\n <Select\n items={[\n { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n ]}\n >\n <SelectTrigger\n className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n size=\"sm\"\n id={`${row.original.id}-reviewer`}\n >\n <SelectValue placeholder=\"Assign reviewer\" />\n </SelectTrigger>\n <SelectContent align=\"end\">\n <SelectGroup>\n <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n <SelectItem value=\"Jamik Tashpulatov\">\n Jamik Tashpulatov\n </SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </>\n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant=\"ghost\"\n className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n size=\"icon\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"EllipsisVerticalIcon\"\n tabler=\"IconDotsVertical\"\n hugeicons=\"MoreVerticalCircle01Icon\"\n phosphor=\"DotsThreeVerticalIcon\"\n remixicon=\"RiMore2Line\"\n />\n <span className=\"sr-only\">Open menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-32\">\n <DropdownMenuItem>Edit</DropdownMenuItem>\n <DropdownMenuItem>Make a copy</DropdownMenuItem>\n <DropdownMenuItem>Favorite</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n <TableRow\n data-state={row.getIsSelected() && \"selected\"}\n data-dragging={isDragging}\n ref={setNodeRef}\n className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n style={{\n transform: CSS.Transform.toString(transform),\n transition: transition,\n }}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n ))}\n </TableRow>\n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer<typeof schema>[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState<VisibilityState>({})\n const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n []\n )\n const [sorting, setSorting] = React.useState<SortingState>([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo<UniqueIdentifier[]>(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n <Tabs\n defaultValue=\"outline\"\n className=\"w-full flex-col justify-start gap-6\"\n >\n <div className=\"flex items-center justify-between px-4 lg:px-6\">\n <Label htmlFor=\"view-selector\" className=\"sr-only\">\n View\n </Label>\n <Select\n defaultValue=\"outline\"\n items={[\n { label: \"Outline\", value: \"outline\" },\n { label: \"Past Performance\", value: \"past-performance\" },\n { label: \"Key Personnel\", value: \"key-personnel\" },\n { label: \"Focus Documents\", value: \"focus-documents\" },\n ]}\n >\n <SelectTrigger\n className=\"flex w-fit @4xl/main:hidden\"\n size=\"sm\"\n id=\"view-selector\"\n >\n <SelectValue placeholder=\"Select a view\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"outline\">Outline</SelectItem>\n <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n <TabsTrigger value=\"past-performance\">\n Past Performance <Badge variant=\"secondary\">3</Badge>\n </TabsTrigger>\n <TabsTrigger value=\"key-personnel\">\n Key Personnel <Badge variant=\"secondary\">2</Badge>\n </TabsTrigger>\n <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n </TabsList>\n <div className=\"flex items-center gap-2\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" />}\n >\n <IconPlaceholder\n lucide=\"Columns3Icon\"\n tabler=\"IconLayoutColumns\"\n hugeicons=\"LeftToRightListBulletIcon\"\n phosphor=\"ColumnsIcon\"\n remixicon=\"RiLayoutColumnLine\"\n data-icon=\"inline-start\"\n />\n Columns\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n data-icon=\"inline-end\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-32\">\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) =>\n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n <Button variant=\"outline\" size=\"sm\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"Add01Icon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n <span className=\"hidden lg:inline\">Add Section</span>\n </Button>\n </div>\n </div>\n <TabsContent\n value=\"outline\"\n className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n >\n <div className=\"overflow-hidden rounded-lg border\">\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n id={sortableId}\n >\n <Table>\n <TableHeader className=\"bg-muted sticky top-0 z-10\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n return (\n <TableHead key={header.id} colSpan={header.colSpan}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n {table.getRowModel().rows?.length ? (\n <SortableContext\n items={dataIds}\n strategy={verticalListSortingStrategy}\n >\n {table.getRowModel().rows.map((row) => (\n <DraggableRow key={row.id} row={row} />\n ))}\n </SortableContext>\n ) : (\n <TableRow>\n <TableCell\n colSpan={columns.length}\n className=\"h-24 text-center\"\n >\n No results.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </DndContext>\n </div>\n <div className=\"flex items-center justify-between px-4\">\n <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n <div className=\"hidden items-center gap-2 lg:flex\">\n <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n Rows per page\n </Label>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n <SelectValue\n placeholder={table.getState().pagination.pageSize}\n />\n </SelectTrigger>\n <SelectContent side=\"top\">\n <SelectGroup>\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n </div>\n <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n <Button\n variant=\"outline\"\n className=\"hidden h-8 w-8 p-0 lg:flex\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <IconPlaceholder\n lucide=\"ChevronsLeftIcon\"\n tabler=\"IconChevronsLeft\"\n hugeicons=\"ArrowLeftDoubleIcon\"\n phosphor=\"CaretDoubleLeftIcon\"\n remixicon=\"RiSkipLeftLine\"\n />\n </Button>\n <Button\n variant=\"outline\"\n className=\"size-8\"\n size=\"icon\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <IconPlaceholder\n lucide=\"ChevronLeftIcon\"\n tabler=\"IconChevronLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"CaretLeftIcon\"\n remixicon=\"RiArrowLeftSLine\"\n />\n </Button>\n <Button\n variant=\"outline\"\n className=\"size-8\"\n size=\"icon\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n remixicon=\"RiArrowRightSLine\"\n />\n </Button>\n <Button\n variant=\"outline\"\n className=\"hidden size-8 lg:flex\"\n size=\"icon\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <IconPlaceholder\n lucide=\"ChevronsRightIcon\"\n tabler=\"IconChevronsRight\"\n hugeicons=\"ArrowRightDoubleIcon\"\n phosphor=\"CaretDoubleRightIcon\"\n remixicon=\"RiSkipRightLine\"\n />\n </Button>\n </div>\n </div>\n </div>\n </TabsContent>\n <TabsContent\n value=\"past-performance\"\n className=\"flex flex-col px-4 lg:px-6\"\n >\n <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n </TabsContent>\n <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n </TabsContent>\n <TabsContent\n value=\"focus-documents\"\n className=\"flex flex-col px-4 lg:px-6\"\n >\n <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n </TabsContent>\n </Tabs>\n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n const isMobile = useIsMobile()\n return (\n <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n <DrawerTrigger asChild>\n <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n {item.header}\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"gap-1\">\n <DrawerTitle>{item.header}</DrawerTitle>\n <DrawerDescription>\n Showing total visitors for the last 6 months\n </DrawerDescription>\n </DrawerHeader>\n <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n {!isMobile && (\n <>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 0,\n right: 10,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n hide\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.6}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n <Separator />\n <div className=\"grid gap-2\">\n <div className=\"flex gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground\">\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n </div>\n </div>\n <Separator />\n </>\n )}\n <form className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"header\">Header</Label>\n <Input id=\"header\" defaultValue={item.header} />\n </div>\n <div className=\"grid grid-cols-2 gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"type\">Type</Label>\n <Select\n defaultValue={item.type}\n items={[\n { label: \"Table of Contents\", value: \"Table of Contents\" },\n { label: \"Executive Summary\", value: \"Executive Summary\" },\n {\n label: \"Technical Approach\",\n value: \"Technical Approach\",\n },\n { label: \"Design\", value: \"Design\" },\n { label: \"Capabilities\", value: \"Capabilities\" },\n { label: \"Focus Documents\", value: \"Focus Documents\" },\n { label: \"Narrative\", value: \"Narrative\" },\n { label: \"Cover Page\", value: \"Cover Page\" },\n ]}\n >\n <SelectTrigger id=\"type\" className=\"w-full\">\n <SelectValue placeholder=\"Select a type\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"Table of Contents\">\n Table of Contents\n </SelectItem>\n <SelectItem value=\"Executive Summary\">\n Executive Summary\n </SelectItem>\n <SelectItem value=\"Technical Approach\">\n Technical Approach\n </SelectItem>\n <SelectItem value=\"Design\">Design</SelectItem>\n <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n <SelectItem value=\"Focus Documents\">\n Focus Documents\n </SelectItem>\n <SelectItem value=\"Narrative\">Narrative</SelectItem>\n <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"status\">Status</Label>\n <Select\n defaultValue={item.status}\n items={[\n { label: \"Done\", value: \"Done\" },\n { label: \"In Progress\", value: \"In Progress\" },\n { label: \"Not Started\", value: \"Not Started\" },\n ]}\n >\n <SelectTrigger id=\"status\" className=\"w-full\">\n <SelectValue placeholder=\"Select a status\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"Done\">Done</SelectItem>\n <SelectItem value=\"In Progress\">In Progress</SelectItem>\n <SelectItem value=\"Not Started\">Not Started</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-4\">\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"target\">Target</Label>\n <Input id=\"target\" defaultValue={item.target} />\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"limit\">Limit</Label>\n <Input id=\"limit\" defaultValue={item.limit} />\n </div>\n </div>\n <div className=\"flex flex-col gap-3\">\n <Label htmlFor=\"reviewer\">Reviewer</Label>\n <Select\n defaultValue={item.reviewer}\n items={[\n { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n ]}\n >\n <SelectTrigger id=\"reviewer\" className=\"w-full\">\n <SelectValue placeholder=\"Select a reviewer\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n <SelectItem value=\"Jamik Tashpulatov\">\n Jamik Tashpulatov\n </SelectItem>\n <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </div>\n </form>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\" />\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/nav-documents.tsx",
"content": "\"use client\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n items,\n}: {\n items: {\n name: string\n url: string\n icon: React.ReactNode\n }[]\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n <SidebarGroupLabel>Documents</SidebarGroupLabel>\n <SidebarMenu>\n {items.map((item) => (\n <SidebarMenuItem key={item.name}>\n <SidebarMenuButton render={<a href={item.url} />}>\n {item.icon}\n <span>{item.name}</span>\n </SidebarMenuButton>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuAction\n showOnHover\n className=\"aria-expanded:bg-muted\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n />\n <span className=\"sr-only\">More</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"w-24\"\n side={isMobile ? \"bottom\" : \"right\"}\n align={isMobile ? \"end\" : \"start\"}\n >\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n <span>Open</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare3\"\n hugeicons=\"Share01Icon\"\n phosphor=\"ShareIcon\"\n remixicon=\"RiShareLine\"\n />\n <span>Share</span>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"Trash2Icon\"\n tabler=\"IconTrash\"\n hugeicons=\"Delete02Icon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n <span>Delete</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n ))}\n <SidebarMenuItem>\n <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n className=\"text-sidebar-foreground/70\"\n />\n <span>More</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/nav-main.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: React.ReactNode\n }[]\n}) {\n return (\n <SidebarGroup>\n <SidebarGroupContent className=\"flex flex-col gap-2\">\n <SidebarMenu>\n <SidebarMenuItem className=\"flex items-center gap-2\">\n <SidebarMenuButton\n tooltip=\"Quick Create\"\n className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n >\n <IconPlaceholder\n lucide=\"CirclePlusIcon\"\n tabler=\"IconCirclePlusFilled\"\n hugeicons=\"PlusSignCircleIcon\"\n phosphor=\"PlusCircleIcon\"\n remixicon=\"RiAddCircleFill\"\n />\n <span>Quick Create</span>\n </SidebarMenuButton>\n <Button\n size=\"icon\"\n className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n variant=\"outline\"\n >\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"Mail01Icon\"\n phosphor=\"EnvelopeIcon\"\n remixicon=\"RiMailLine\"\n />\n <span className=\"sr-only\">Inbox</span>\n </Button>\n </SidebarMenuItem>\n </SidebarMenu>\n <SidebarMenu>\n {items.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton tooltip={item.title}>\n {item.icon}\n <span>{item.title}</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/nav-secondary.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: React.ReactNode\n }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n return (\n <SidebarGroup {...props}>\n <SidebarGroupContent>\n <SidebarMenu>\n {items.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton render={<a href={item.url} />}>\n {item.icon}\n <span>{item.title}</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/nav-user.tsx",
"content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n return (\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n }\n >\n <Avatar className=\"size-8 rounded-lg grayscale\">\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"text-foreground/70 truncate text-xs\">\n {user.email}\n </span>\n </div>\n <IconPlaceholder\n lucide=\"EllipsisVerticalIcon\"\n tabler=\"IconDotsVertical\"\n hugeicons=\"MoreVerticalCircle01Icon\"\n phosphor=\"DotsThreeVerticalIcon\"\n remixicon=\"RiMore2Line\"\n className=\"ml-auto size-4\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"min-w-56\"\n side={isMobile ? \"bottom\" : \"right\"}\n align=\"end\"\n sideOffset={4}\n >\n <DropdownMenuGroup>\n <DropdownMenuLabel className=\"p-0 font-normal\">\n <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar className=\"size-8\">\n <AvatarImage src={user.avatar} alt={user.name} />\n <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">{user.name}</span>\n <span className=\"text-muted-foreground truncate text-xs\">\n {user.email}\n </span>\n </div>\n </div>\n </DropdownMenuLabel>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CircleUserRoundIcon\"\n tabler=\"IconUserCircle\"\n hugeicons=\"UserCircle02Icon\"\n phosphor=\"UserCircleIcon\"\n remixicon=\"RiUserLine\"\n />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconNotification\"\n hugeicons=\"Notification03Icon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotification3Line\"\n />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"Logout01Icon\"\n phosphor=\"SignOutIcon\"\n remixicon=\"RiLogoutBoxLine\"\n />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/section-cards.tsx",
"content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport {\n Card,\n CardAction,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n return (\n <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n <Card className=\"@container/card\">\n <CardHeader>\n <CardDescription>Total Revenue</CardDescription>\n <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n $1,250.00\n </CardTitle>\n <CardAction>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n +12.5%\n </Badge>\n </CardAction>\n </CardHeader>\n <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n <div className=\"line-clamp-1 flex gap-2 font-medium\">\n Trending up this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground\">\n Visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n <Card className=\"@container/card\">\n <CardHeader>\n <CardDescription>New Customers</CardDescription>\n <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n 1,234\n </CardTitle>\n <CardAction>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"TrendingDownIcon\"\n tabler=\"IconTrendingDown\"\n hugeicons=\"ChartDownIcon\"\n phosphor=\"TrendDownIcon\"\n remixicon=\"RiArrowDownLine\"\n />\n -20%\n </Badge>\n </CardAction>\n </CardHeader>\n <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n <div className=\"line-clamp-1 flex gap-2 font-medium\">\n Down 20% this period{\" \"}\n <IconPlaceholder\n lucide=\"TrendingDownIcon\"\n tabler=\"IconTrendingDown\"\n hugeicons=\"ChartDownIcon\"\n phosphor=\"TrendDownIcon\"\n remixicon=\"RiArrowDownLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground\">\n Acquisition needs attention\n </div>\n </CardFooter>\n </Card>\n <Card className=\"@container/card\">\n <CardHeader>\n <CardDescription>Active Accounts</CardDescription>\n <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n 45,678\n </CardTitle>\n <CardAction>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n +12.5%\n </Badge>\n </CardAction>\n </CardHeader>\n <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n <div className=\"line-clamp-1 flex gap-2 font-medium\">\n Strong user retention{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n </CardFooter>\n </Card>\n <Card className=\"@container/card\">\n <CardHeader>\n <CardDescription>Growth Rate</CardDescription>\n <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n 4.5%\n </CardTitle>\n <CardAction>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n +4.5%\n </Badge>\n </CardAction>\n </CardHeader>\n <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n <div className=\"line-clamp-1 flex gap-2 font-medium\">\n Steady performance increase{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiArrowUpLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground\">Meets growth projections</div>\n </CardFooter>\n </Card>\n </div>\n )\n}\n",
"type": "registry:component"
},
{
"path": "registry/base-mira/blocks/dashboard-01/components/site-header.tsx",
"content": "import { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/base-mira/ui/sidebar\"\n\nexport function SiteHeader() {\n return (\n <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\n <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n <SidebarTrigger className=\"-ml-1\" />\n <Separator\n orientation=\"vertical\"\n className=\"mx-2 h-4 data-vertical:self-auto\"\n />\n <h1 className=\"text-base font-medium\">Documents</h1>\n </div>\n </header>\n )\n}\n",
"type": "registry:component"
}
],
"meta": {
"iframeHeight": "1000px"
},
"categories": [
"dashboard"
],
"type": "registry:block"
}Source
Frequently Asked Questions
What does dashboard-01.json do?
dashboard-01.json is a source file in the ui codebase, written in json.
Where is dashboard-01.json in the architecture?
dashboard-01.json is located at apps/v4/public/r/styles/base-mira/dashboard-01.json (directory: apps/v4/public/r/styles/base-mira).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free