{
  "name": "dashboard-01",
  "type": "registry:block",
  "dependencies": [
    "@dnd-kit/abstract",
    "@tabler/icons-vue",
    "@tanstack/vue-table",
    "@unovis/vue",
    "dnd-kit-vue",
    "recharts",
    "zod"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "chart",
    "checkbox",
    "dropdown-menu",
    "label",
    "select",
    "separator",
    "sidebar",
    "table",
    "tabs"
  ],
  "files": [
    {
      "path": "blocks/dashboard-01/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  IconCamera,\n  IconChartBar,\n  IconDashboard,\n  IconDatabase,\n  IconFileAi,\n  IconFileDescription,\n  IconFolder,\n  IconHelp,\n  IconInnerShadowTop,\n  IconListDetails,\n  IconReport,\n  IconSearch,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-vue\"\n\nimport NavDocuments from \"../components/NavDocuments.vue\"\nimport NavMain from \"../components/NavMain.vue\"\nimport NavSecondary from \"../components/NavSecondary.vue\"\nimport NavUser from \"../components/NavUser.vue\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\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: IconDashboard,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: IconListDetails,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: IconChartBar,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: IconFolder,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: IconUsers,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: IconCamera,\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: IconFileDescription,\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: IconFileAi,\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: IconSettings,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: IconHelp,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: IconSearch,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: IconDatabase,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: IconReport,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: IconFileDescription,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar collapsible=\"offcanvas\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton\n            as-child\n            class=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n          >\n            <a href=\"#\">\n              <IconInnerShadowTop class=\"!size-5\" />\n              <span class=\"text-base font-semibold\">Acme Inc.</span>\n            </a>\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\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/ChartAreaInteractive.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/ChartAreaInteractive.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\"\nimport type { ChartConfig } from \"@/components/ui/chart\"\n\n// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n\n  ChartContainer,\n  ChartCrosshair,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  componentToString,\n} from \"@/components/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: new Date(\"2024-04-01\"), desktop: 222, mobile: 150 },\n  { date: new Date(\"2024-04-02\"), desktop: 97, mobile: 180 },\n  { date: new Date(\"2024-04-03\"), desktop: 167, mobile: 120 },\n  { date: new Date(\"2024-04-04\"), desktop: 242, mobile: 260 },\n  { date: new Date(\"2024-04-05\"), desktop: 373, mobile: 290 },\n  { date: new Date(\"2024-04-06\"), desktop: 301, mobile: 340 },\n  { date: new Date(\"2024-04-07\"), desktop: 245, mobile: 180 },\n  { date: new Date(\"2024-04-08\"), desktop: 409, mobile: 320 },\n  { date: new Date(\"2024-04-09\"), desktop: 59, mobile: 110 },\n  { date: new Date(\"2024-04-10\"), desktop: 261, mobile: 190 },\n  { date: new Date(\"2024-04-11\"), desktop: 327, mobile: 350 },\n  { date: new Date(\"2024-04-12\"), desktop: 292, mobile: 210 },\n  { date: new Date(\"2024-04-13\"), desktop: 342, mobile: 380 },\n  { date: new Date(\"2024-04-14\"), desktop: 137, mobile: 220 },\n  { date: new Date(\"2024-04-15\"), desktop: 120, mobile: 170 },\n  { date: new Date(\"2024-04-16\"), desktop: 138, mobile: 190 },\n  { date: new Date(\"2024-04-17\"), desktop: 446, mobile: 360 },\n  { date: new Date(\"2024-04-18\"), desktop: 364, mobile: 410 },\n  { date: new Date(\"2024-04-19\"), desktop: 243, mobile: 180 },\n  { date: new Date(\"2024-04-20\"), desktop: 89, mobile: 150 },\n  { date: new Date(\"2024-04-21\"), desktop: 137, mobile: 200 },\n  { date: new Date(\"2024-04-22\"), desktop: 224, mobile: 170 },\n  { date: new Date(\"2024-04-23\"), desktop: 138, mobile: 230 },\n  { date: new Date(\"2024-04-24\"), desktop: 387, mobile: 290 },\n  { date: new Date(\"2024-04-25\"), desktop: 215, mobile: 250 },\n  { date: new Date(\"2024-04-26\"), desktop: 75, mobile: 130 },\n  { date: new Date(\"2024-04-27\"), desktop: 383, mobile: 420 },\n  { date: new Date(\"2024-04-28\"), desktop: 122, mobile: 180 },\n  { date: new Date(\"2024-04-29\"), desktop: 315, mobile: 240 },\n  { date: new Date(\"2024-04-30\"), desktop: 454, mobile: 380 },\n  { date: new Date(\"2024-05-01\"), desktop: 165, mobile: 220 },\n  { date: new Date(\"2024-05-02\"), desktop: 293, mobile: 310 },\n  { date: new Date(\"2024-05-03\"), desktop: 247, mobile: 190 },\n  { date: new Date(\"2024-05-04\"), desktop: 385, mobile: 420 },\n  { date: new Date(\"2024-05-05\"), desktop: 481, mobile: 390 },\n  { date: new Date(\"2024-05-06\"), desktop: 498, mobile: 520 },\n  { date: new Date(\"2024-05-07\"), desktop: 388, mobile: 300 },\n  { date: new Date(\"2024-05-08\"), desktop: 149, mobile: 210 },\n  { date: new Date(\"2024-05-09\"), desktop: 227, mobile: 180 },\n  { date: new Date(\"2024-05-10\"), desktop: 293, mobile: 330 },\n  { date: new Date(\"2024-05-11\"), desktop: 335, mobile: 270 },\n  { date: new Date(\"2024-05-12\"), desktop: 197, mobile: 240 },\n  { date: new Date(\"2024-05-13\"), desktop: 197, mobile: 160 },\n  { date: new Date(\"2024-05-14\"), desktop: 448, mobile: 490 },\n  { date: new Date(\"2024-05-15\"), desktop: 473, mobile: 380 },\n  { date: new Date(\"2024-05-16\"), desktop: 338, mobile: 400 },\n  { date: new Date(\"2024-05-17\"), desktop: 499, mobile: 420 },\n  { date: new Date(\"2024-05-18\"), desktop: 315, mobile: 350 },\n  { date: new Date(\"2024-05-19\"), desktop: 235, mobile: 180 },\n  { date: new Date(\"2024-05-20\"), desktop: 177, mobile: 230 },\n  { date: new Date(\"2024-05-21\"), desktop: 82, mobile: 140 },\n  { date: new Date(\"2024-05-22\"), desktop: 81, mobile: 120 },\n  { date: new Date(\"2024-05-23\"), desktop: 252, mobile: 290 },\n  { date: new Date(\"2024-05-24\"), desktop: 294, mobile: 220 },\n  { date: new Date(\"2024-05-25\"), desktop: 201, mobile: 250 },\n  { date: new Date(\"2024-05-26\"), desktop: 213, mobile: 170 },\n  { date: new Date(\"2024-05-27\"), desktop: 420, mobile: 460 },\n  { date: new Date(\"2024-05-28\"), desktop: 233, mobile: 190 },\n  { date: new Date(\"2024-05-29\"), desktop: 78, mobile: 130 },\n  { date: new Date(\"2024-05-30\"), desktop: 340, mobile: 280 },\n  { date: new Date(\"2024-05-31\"), desktop: 178, mobile: 230 },\n  { date: new Date(\"2024-06-01\"), desktop: 178, mobile: 200 },\n  { date: new Date(\"2024-06-02\"), desktop: 470, mobile: 410 },\n  { date: new Date(\"2024-06-03\"), desktop: 103, mobile: 160 },\n  { date: new Date(\"2024-06-04\"), desktop: 439, mobile: 380 },\n  { date: new Date(\"2024-06-05\"), desktop: 88, mobile: 140 },\n  { date: new Date(\"2024-06-06\"), desktop: 294, mobile: 250 },\n  { date: new Date(\"2024-06-07\"), desktop: 323, mobile: 370 },\n  { date: new Date(\"2024-06-08\"), desktop: 385, mobile: 320 },\n  { date: new Date(\"2024-06-09\"), desktop: 438, mobile: 480 },\n  { date: new Date(\"2024-06-10\"), desktop: 155, mobile: 200 },\n  { date: new Date(\"2024-06-11\"), desktop: 92, mobile: 150 },\n  { date: new Date(\"2024-06-12\"), desktop: 492, mobile: 420 },\n  { date: new Date(\"2024-06-13\"), desktop: 81, mobile: 130 },\n  { date: new Date(\"2024-06-14\"), desktop: 426, mobile: 380 },\n  { date: new Date(\"2024-06-15\"), desktop: 307, mobile: 350 },\n  { date: new Date(\"2024-06-16\"), desktop: 371, mobile: 310 },\n  { date: new Date(\"2024-06-17\"), desktop: 475, mobile: 520 },\n  { date: new Date(\"2024-06-18\"), desktop: 107, mobile: 170 },\n  { date: new Date(\"2024-06-19\"), desktop: 341, mobile: 290 },\n  { date: new Date(\"2024-06-20\"), desktop: 408, mobile: 450 },\n  { date: new Date(\"2024-06-21\"), desktop: 169, mobile: 210 },\n  { date: new Date(\"2024-06-22\"), desktop: 317, mobile: 270 },\n  { date: new Date(\"2024-06-23\"), desktop: 480, mobile: 530 },\n  { date: new Date(\"2024-06-24\"), desktop: 132, mobile: 180 },\n  { date: new Date(\"2024-06-25\"), desktop: 141, mobile: 190 },\n  { date: new Date(\"2024-06-26\"), desktop: 434, mobile: 380 },\n  { date: new Date(\"2024-06-27\"), desktop: 448, mobile: 490 },\n  { date: new Date(\"2024-06-28\"), desktop: 149, mobile: 200 },\n  { date: new Date(\"2024-06-29\"), desktop: 103, mobile: 160 },\n  { date: new Date(\"2024-06-30\"), desktop: 446, mobile: 400 },\n]\ntype Data = typeof chartData[number]\n\nconst chartConfig = {\n  // visitors: {\n  //   label: 'Visitors',\n  // },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nconst svgDefs = `\n  <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n    <stop\n      offset=\"5%\"\n      stop-color=\"var(--color-desktop)\"\n      stop-opacity=\"0.8\"\n    />\n    <stop\n      offset=\"95%\"\n      stop-color=\"var(--color-desktop)\"\n      stop-opacity=\"0.1\"\n    />\n  </linearGradient>\n  <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n    <stop\n      offset=\"5%\"\n      stop-color=\"var(--color-mobile)\"\n      stop-opacity=\"0.8\"\n    />\n    <stop\n      offset=\"95%\"\n      stop-color=\"var(--color-mobile)\"\n      stop-opacity=\"0.1\"\n    />\n  </linearGradient>\n`\n\nconst timeRange = ref(\"90d\")\nconst filterRange = computed(() => {\n  return 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.value === \"30d\") {\n      daysToSubtract = 30\n    }\n    else if (timeRange.value === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n})\n</script>\n\n<template>\n  <Card class=\"pt-0\">\n    <CardHeader class=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n      <div class=\"grid flex-1 gap-1\">\n        <CardTitle>Area Chart - Interactive</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 3 months\n        </CardDescription>\n      </div>\n      <Select v-model=\"timeRange\">\n        <SelectTrigger\n          class=\"hidden w-[160px] rounded-lg sm:ml-auto sm:flex\"\n          aria-label=\"Select a value\"\n        >\n          <SelectValue placeholder=\"Last 3 months\" />\n        </SelectTrigger>\n        <SelectContent class=\"rounded-xl\">\n          <SelectItem value=\"90d\" class=\"rounded-lg\">\n            Last 3 months\n          </SelectItem>\n          <SelectItem value=\"30d\" class=\"rounded-lg\">\n            Last 30 days\n          </SelectItem>\n          <SelectItem value=\"7d\" class=\"rounded-lg\">\n            Last 7 days\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </CardHeader>\n    <CardContent class=\"px-2 pt-4 sm:px-6 sm:pt-6 pb-4\">\n      <ChartContainer :config=\"chartConfig\" class=\"aspect-auto h-[250px] w-full\" :cursor=\"false\">\n        <VisXYContainer\n          :data=\"filterRange\"\n          :svg-defs=\"svgDefs\"\n          :margin=\"{ left: -40 }\"\n          :y-domain=\"[0, 1200]\"\n        >\n          <VisArea\n            :x=\"(d: Data) => d.date\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.desktop]\"\n            :color=\"(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]\"\n            :opacity=\"0.6\"\n          />\n          <VisLine\n            :x=\"(d: Data) => d.date\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\n            :line-width=\"1\"\n          />\n          <VisAxis\n            type=\"x\"\n            :x=\"(d: Data) => d.date\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n            :grid-line=\"false\"\n            :num-ticks=\"6\"\n            :tick-format=\"(d: number, index: number) => {\n              const date = new Date(d)\n              return date.toLocaleDateString('en-US', {\n                month: 'short',\n                day: 'numeric',\n              })\n            }\"\n          />\n          <VisAxis\n            type=\"y\"\n            :num-ticks=\"3\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n          />\n          <ChartTooltip />\n          <ChartCrosshair\n            :template=\"componentToString(chartConfig, ChartTooltipContent, {\n              labelFormatter: (d) => {\n                return new Date(d).toLocaleDateString('en-US', {\n                  month: 'short',\n                  day: 'numeric',\n                })\n              },\n            })\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]\"\n          />\n        </VisXYContainer>\n\n        <ChartLegendContent />\n      </ChartContainer>\n    </CardContent>\n  </Card>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/DataTable.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/DataTable.vue",
      "content": "<script lang=\"ts\">\nimport { z } from \"zod\"\nimport DraggableRow from \"./DraggableRow.vue\"\nimport DragHandle from \"./DragHandle.vue\"\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</script>\n\n<script setup lang=\"ts\">\nimport { h, ref } from \"vue\"\nimport type { RowSelectionState } from \"@tanstack/vue-table\"\nimport { RestrictToVerticalAxis } from \"@dnd-kit/abstract/modifiers\"\nimport {\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n  IconCircleCheckFilled,\n  IconDotsVertical,\n  IconLayoutColumns,\n  IconLoader,\n  IconPlus,\n} from \"@tabler/icons-vue\"\nimport {\n  createColumnHelper,\n  FlexRender,\n  useTable,\n} from \"@tanstack/vue-table\"\nimport { DragDropProvider } from \"dnd-kit-vue\"\nimport { Badge } from \"@/components/ui/badge\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { features } from \"./features\"\n\nconst props = defineProps<{\n  data: TableData[]\n}>()\n\ninterface TableData {\n  id: number\n  header: string\n  type: string\n  status: string\n  target: string\n  limit: string\n  reviewer: string\n}\n\nconst columnHelper = createColumnHelper<typeof features, TableData>()\n\nconst columns = columnHelper.columns([\n  columnHelper.display({\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => h(DragHandle),\n  }),\n  columnHelper.display({\n    id: \"select\",\n    header: ({ table }) => h(Checkbox, {\n      \"modelValue\": table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && \"indeterminate\"),\n      \"onUpdate:modelValue\": value => table.toggleAllPageRowsSelected(!!value),\n      \"aria-label\": \"Select all\",\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      \"modelValue\": row.getIsSelected(),\n      \"onUpdate:modelValue\": value => row.toggleSelected(!!value),\n      \"aria-label\": \"Select row\",\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor(\"header\", {\n    header: \"Header\",\n    cell: ({ row }) => h(\"div\", String(row.getValue(\"header\"))),\n    enableHiding: false,\n  }),\n  columnHelper.accessor(\"type\", {\n    header: \"Section Type\",\n    cell: ({ row }) => h(Badge, {\n      variant: \"outline\",\n    }, () => String(row.getValue(\"type\"))),\n  }),\n  columnHelper.accessor(\"status\", {\n    header: \"Status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as string\n      return h(\"div\", { class: \"flex items-center gap-2\" }, [\n        status === \"Done\"\n          ? h(IconCircleCheckFilled, { class: \"h-4 w-4 text-emerald-500\" })\n          : h(IconLoader, { class: \"h-4 w-4 animate-spin text-muted-foreground\" }),\n        h(\"span\", {}, status),\n      ])\n    },\n  }),\n  columnHelper.accessor(\"target\", {\n    header: () => h(\"div\", { class: \"flex items-center gap-1\" }, [\n      \"Target\",\n    ]),\n    cell: ({ row }) => h(Button, {\n      variant: \"ghost\",\n      size: \"sm\",\n      class: \"h-auto p-1 text-xs font-mono\",\n    }, () => [\n      h(\"span\", { class: \"ml-1 font-semibold\" }, String(row.getValue(\"target\"))),\n    ]),\n  }),\n  columnHelper.accessor(\"limit\", {\n    header: () => h(\"div\", { class: \"flex items-center gap-1\" }, [\n      \"Limit\",\n    ]),\n    cell: ({ row }) => h(Button, {\n      variant: \"ghost\",\n      size: \"sm\",\n      class: \"h-auto p-1 text-xs font-mono\",\n    }, () => [\n      h(\"span\", { class: \"ml-1 font-semibold\" }, String(row.getValue(\"limit\"))),\n    ]),\n  }),\n  columnHelper.accessor(\"reviewer\", {\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const reviewer = row.getValue(\"reviewer\") as string\n      const isAssigned = reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return h(\"span\", {}, reviewer)\n      }\n\n      return h(Select, {}, {\n        default: () => [\n          h(SelectTrigger, { class: \"w-full\" }, {\n            default: () => h(SelectValue, { placeholder: \"Assign reviewer\" }),\n          }),\n          h(SelectContent, {}, {\n            default: () => [\n              h(SelectItem, { value: \"eddie\" }, () => \"Eddie Lake\"),\n              h(SelectItem, { value: \"jamik\" }, () => \"Jamik Tashpulatov\"),\n            ],\n          }),\n        ],\n      })\n    },\n  }),\n  columnHelper.display({\n    id: \"actions\",\n    cell: () => h(DropdownMenu, {}, {\n      default: () => [\n        h(DropdownMenuTrigger, { asChild: true }, {\n          default: () => h(Button, {\n            variant: \"ghost\",\n            class: \"h-8 w-8 p-0\",\n          }, {\n            default: () => [\n              h(\"span\", { class: \"sr-only\" }, \"Open menu\"),\n              h(IconDotsVertical, { class: \"h-4 w-4\" }),\n            ],\n          }),\n        }),\n        h(DropdownMenuContent, { align: \"end\" }, {\n          default: () => [\n            h(DropdownMenuItem, {}, () => \"Edit\"),\n            h(DropdownMenuItem, {}, () => \"Make a copy\"),\n            h(DropdownMenuItem, {}, () => \"Favorite\"),\n            h(DropdownMenuSeparator, {}),\n            h(DropdownMenuItem, {}, () => \"Delete\"),\n          ],\n        }),\n      ],\n    }),\n  }),\n])\n\n// Keep row selection outside the table so the rest of the app can read or update it.\nconst rowSelection = ref<RowSelectionState>({})\n\nconst table = useTable({\n  features,\n  get data() {\n    return props.data\n  },\n  columns,\n  state: {\n    get rowSelection() { return rowSelection.value },\n  },\n  onRowSelectionChange: (updater) => {\n    rowSelection.value = typeof updater === \"function\" ? updater(rowSelection.value) : updater\n  },\n})\n</script>\n\n<template>\n  <Tabs\n    default-value=\"outline\"\n    class=\"w-full flex-col justify-start gap-6\"\n  >\n    <div class=\"flex items-center justify-between px-4 lg:px-6\">\n      <Label for=\"view-selector\" class=\"sr-only\">\n        View\n      </Label>\n      <Select default-value=\"outline\">\n        <SelectTrigger\n          id=\"view-selector\"\n          class=\"flex w-fit @4xl/main:hidden\"\n          size=\"sm\"\n        >\n          <SelectValue placeholder=\"Select a view\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"outline\">\n            Outline\n          </SelectItem>\n          <SelectItem value=\"past-performance\">\n            Past Performance\n          </SelectItem>\n          <SelectItem value=\"key-personnel\">\n            Key Personnel\n          </SelectItem>\n          <SelectItem value=\"focus-documents\">\n            Focus Documents\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <TabsList class=\"**: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\">\n          Outline\n        </TabsTrigger>\n        <TabsTrigger value=\"past-performance\">\n          Past Performance <Badge variant=\"secondary\">\n            3\n          </Badge>\n        </TabsTrigger>\n        <TabsTrigger value=\"key-personnel\">\n          Key Personnel <Badge variant=\"secondary\">\n            2\n          </Badge>\n        </TabsTrigger>\n        <TabsTrigger value=\"focus-documents\">\n          Focus Documents\n        </TabsTrigger>\n      </TabsList>\n      <div class=\"flex items-center gap-2\">\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconLayoutColumns />\n              <span class=\"hidden lg:inline\">Customize Columns</span>\n              <span class=\"lg:hidden\">Columns</span>\n              <IconChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" class=\"w-56\">\n            <template v-for=\"column in table.getAllColumns().filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())\" :key=\"column.id\">\n              <DropdownMenuCheckboxItem\n                class=\"capitalize\"\n                :model-value=\"column.getIsVisible()\"\n                @update:model-value=\"(value) => {\n\n                  column.toggleVisibility(!!value)\n                }\"\n              >\n                {{ column.id }}\n              </DropdownMenuCheckboxItem>\n            </template>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlus />\n          <span class=\"hidden lg:inline\">Add Section</span>\n        </Button>\n      </div>\n    </div>\n    <TabsContent\n      value=\"outline\"\n      class=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n    >\n      <div class=\"overflow-hidden rounded-lg border\">\n        <DragDropProvider :modifiers=\"[RestrictToVerticalAxis]\">\n          <Table>\n            <TableHeader class=\"bg-muted sticky top-0 z-10\">\n              <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n                <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\" :colspan=\"header.colSpan\">\n                  <FlexRender v-if=\"!header.isPlaceholder\" :header=\"header\" />\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody class=\"**:data-[slot=table-cell]:first:w-8\">\n              <template v-if=\"table.getRowModel().rows.length\">\n                <DraggableRow v-for=\"row in table.getRowModel().rows\" :key=\"row.id\" :row=\"row\" :index=\"row.index\" />\n              </template>\n              <TableRow v-else>\n                <TableCell\n                  :colspan=\"columns.length\"\n                  class=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </DragDropProvider>\n        <!-- <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          > -->\n        <!-- </DndContext> -->\n      </div>\n      <div class=\"flex items-center justify-between px-4\">\n        <div class=\"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 class=\"flex w-full items-center gap-8 lg:w-fit\">\n          <div class=\"hidden items-center gap-2 lg:flex\">\n            <Label for=\"rows-per-page\" class=\"text-sm font-medium\">\n              Rows per page\n            </Label>\n            <Select\n              :model-value=\"table.atoms.pagination.get().pageSize\"\n              @update:model-value=\"(value) => {\n                table.setPageSize(Number(value))\n              }\"\n            >\n              <SelectTrigger id=\"rows-per-page\" size=\"sm\" class=\"w-20\">\n                <SelectValue :placeholder=\"`${table.atoms.pagination.get().pageSize}`\" />\n              </SelectTrigger>\n              <SelectContent side=\"top\">\n                <SelectItem v-for=\"pageSize in [10, 20, 30, 40, 50]\" :key=\"pageSize\" :value=\"`${pageSize}`\">\n                  {{ pageSize }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <div class=\"flex w-fit items-center justify-center text-sm font-medium\">\n            Page {{ table.atoms.pagination.get().pageIndex + 1 }} of\n            {{ table.getPageCount() }}\n          </div>\n          <div class=\"ml-auto flex items-center gap-2 lg:ml-0\">\n            <Button\n              variant=\"outline\"\n              class=\"hidden h-8 w-8 p-0 lg:flex\"\n              :disabled=\"!table.getCanPreviousPage()\"\n              @click=\"table.setPageIndex(0)\"\n            >\n              <span class=\"sr-only\">Go to first page</span>\n              <IconChevronsLeft />\n            </Button>\n            <Button\n              variant=\"outline\"\n              class=\"size-8\"\n              size=\"icon\"\n              :disabled=\"!table.getCanPreviousPage()\"\n              @click=\"table.previousPage()\"\n            >\n              <span class=\"sr-only\">Go to previous page</span>\n              <IconChevronLeft />\n            </Button>\n            <Button\n              variant=\"outline\"\n              class=\"size-8\"\n              size=\"icon\"\n              :disabled=\"!table.getCanNextPage()\"\n              @click=\"table.nextPage()\"\n            >\n              <span class=\"sr-only\">Go to next page</span>\n              <IconChevronRight />\n            </Button>\n            <Button\n              variant=\"outline\"\n              class=\"hidden size-8 lg:flex\"\n              size=\"icon\"\n              :disabled=\"!table.getCanNextPage()\"\n              @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n            >\n              <span class=\"sr-only\">Go to last page</span>\n              <IconChevronsRight />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </TabsContent>\n    <TabsContent\n      value=\"past-performance\"\n      class=\"flex flex-col px-4 lg:px-6\"\n    >\n      <div class=\"aspect-video w-full flex-1 rounded-lg border border-dashed\" />\n    </TabsContent>\n    <TabsContent value=\"key-personnel\" class=\"flex flex-col px-4 lg:px-6\">\n      <div class=\"aspect-video w-full flex-1 rounded-lg border border-dashed\" />\n    </TabsContent>\n    <TabsContent\n      value=\"focus-documents\"\n      class=\"flex flex-col px-4 lg:px-6\"\n    >\n      <div class=\"aspect-video w-full flex-1 rounded-lg border border-dashed\" />\n    </TabsContent>\n  </Tabs>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/DragHandle.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/DragHandle.vue",
      "content": "<script setup lang=\"ts\">\nimport { IconGripVertical } from \"@tabler/icons-vue\"\nimport { useSortableContext } from \"dnd-kit-vue\"\nimport { Button } from \"@/components/ui/button\"\n\nconst { handleRef, sortable } = useSortableContext()\n</script>\n\n<template>\n  <Button\n    :ref=\"handleRef\"\n    variant=\"ghost\"\n    size=\"icon\"\n    class=\"text-muted-foreground size-7 hover:bg-transparent\"\n  >\n    <IconGripVertical class=\"text-muted-foreground size-3\" />\n    <span class=\"sr-only\">Drag to reorder</span>\n  </Button>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/DraggableRow.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/DraggableRow.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Row } from \"@tanstack/vue-table\"\nimport type { z } from \"zod\"\nimport type { schema } from \"./DataTable.vue\"\nimport type { Features } from \"./features\"\nimport { FlexRender } from \"@tanstack/vue-table\"\nimport { useSortable } from \"dnd-kit-vue\"\nimport {\n  TableCell,\n  TableRow,\n} from \"@/components/ui/table\"\n\nconst props = defineProps<{ row: Row<Features, z.infer<typeof schema>>, index: number }>()\n\nconst { elementRef, isDragging } = useSortable({\n  id: props.row.original.id,\n  index: props.index,\n})\n</script>\n\n<template>\n  <TableRow\n    :ref=\"elementRef\"\n    :data-state=\"row.getIsSelected() && 'selected'\"\n    :data-dragging=\"isDragging\"\n    class=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n  >\n    <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n      <FlexRender :cell=\"cell\" />\n    </TableCell>\n  </TableRow>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/NavDocuments.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/NavDocuments.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from \"vue\"\n\nimport {\n  IconDots,\n  IconFolder,\n  IconShare3,\n  IconTrash,\n} from \"@tabler/icons-vue\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\ninterface Document {\n  name: string\n  url: string\n  icon?: Component\n}\n\ndefineProps<{\n  items: Document[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Documents</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in items\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction\n              show-on-hover\n              class=\"data-[state=open]:bg-accent rounded-sm\"\n            >\n              <IconDots />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-24 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <IconFolder />\n              <span>Open</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconShare3 />\n              <span>Share</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem variant=\"destructive\">\n              <IconTrash />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <IconDots class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/NavMain.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from \"vue\"\nimport { IconCirclePlusFilled, IconMail } from \"@tabler/icons-vue\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\ninterface NavItem {\n  title: string\n  url: string\n  icon?: Component\n}\n\ndefineProps<{\n  items: NavItem[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent class=\"flex flex-col gap-2\">\n      <SidebarMenu>\n        <SidebarMenuItem class=\"flex items-center gap-2\">\n          <SidebarMenuButton\n            tooltip=\"Quick Create\"\n            class=\"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            <IconCirclePlusFilled />\n            <span>Quick Create</span>\n          </SidebarMenuButton>\n          <Button\n            size=\"icon\"\n            class=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n            variant=\"outline\"\n          >\n            <IconMail />\n            <span class=\"sr-only\">Inbox</span>\n          </Button>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton :tooltip=\"item.title\">\n            <component :is=\"item.icon\" v-if=\"item.icon\" />\n            <span>{{ item.title }}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/NavSecondary.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/NavSecondary.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from \"vue\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\ninterface NavItem {\n  title: string\n  url: string\n  icon?: Component\n}\n\ndefineProps<{\n  items: NavItem[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem\n          v-for=\"item in items\"\n          :key=\"item.title\"\n        >\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              {{ item.title }}\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/NavUser.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/NavUser.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  IconCreditCard,\n  IconDotsVertical,\n  IconLogout,\n  IconNotification,\n  IconUserCircle,\n} from \"@tabler/icons-vue\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\ninterface User {\n  name: string\n  email: string\n  avatar: string\n}\n\ndefineProps<{\n  user: User\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg grayscale\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-medium\">{{ user.name }}</span>\n              <span class=\"text-muted-foreground truncate text-xs\">\n                {{ user.email }}\n              </span>\n            </div>\n            <IconDotsVertical class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n          align=\"end\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-medium\">{{ user.name }}</span>\n                <span class=\"text-muted-foreground truncate text-xs\">\n                  {{ user.email }}\n                </span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconUserCircle />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconCreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconNotification />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconLogout />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/SectionCards.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/SectionCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-vue\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n</script>\n\n<template>\n  <div class=\"*: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-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n    <Card class=\"@container/card\">\n      <CardHeader>\n        <CardDescription>Total Revenue</CardDescription>\n        <CardTitle class=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n          $1,250.00\n        </CardTitle>\n        <CardAction>\n          <Badge variant=\"outline\">\n            <IconTrendingUp />\n            +12.5%\n          </Badge>\n        </CardAction>\n      </CardHeader>\n      <CardFooter class=\"flex-col items-start gap-1.5 text-sm\">\n        <div class=\"line-clamp-1 flex gap-2 font-medium\">\n          Trending up this month <IconTrendingUp class=\"size-4\" />\n        </div>\n        <div class=\"text-muted-foreground\">\n          Visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n    <Card class=\"@container/card\">\n      <CardHeader>\n        <CardDescription>New Customers</CardDescription>\n        <CardTitle class=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n          1,234\n        </CardTitle>\n        <CardAction>\n          <Badge variant=\"outline\">\n            <IconTrendingDown />\n            -20%\n          </Badge>\n        </CardAction>\n      </CardHeader>\n      <CardFooter class=\"flex-col items-start gap-1.5 text-sm\">\n        <div class=\"line-clamp-1 flex gap-2 font-medium\">\n          Down 20% this period <IconTrendingDown class=\"size-4\" />\n        </div>\n        <div class=\"text-muted-foreground\">\n          Acquisition needs attention\n        </div>\n      </CardFooter>\n    </Card>\n    <Card class=\"@container/card\">\n      <CardHeader>\n        <CardDescription>Active Accounts</CardDescription>\n        <CardTitle class=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n          45,678\n        </CardTitle>\n        <CardAction>\n          <Badge variant=\"outline\">\n            <IconTrendingUp />\n            +12.5%\n          </Badge>\n        </CardAction>\n      </CardHeader>\n      <CardFooter class=\"flex-col items-start gap-1.5 text-sm\">\n        <div class=\"line-clamp-1 flex gap-2 font-medium\">\n          Strong user retention <IconTrendingUp class=\"size-4\" />\n        </div>\n        <div class=\"text-muted-foreground\">\n          Engagement exceed targets\n        </div>\n      </CardFooter>\n    </Card>\n    <Card class=\"@container/card\">\n      <CardHeader>\n        <CardDescription>Growth Rate</CardDescription>\n        <CardTitle class=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n          4.5%\n        </CardTitle>\n        <CardAction>\n          <Badge variant=\"outline\">\n            <IconTrendingUp />\n            +4.5%\n          </Badge>\n        </CardAction>\n      </CardHeader>\n      <CardFooter class=\"flex-col items-start gap-1.5 text-sm\">\n        <div class=\"line-clamp-1 flex gap-2 font-medium\">\n          Steady performance increase <IconTrendingUp class=\"size-4\" />\n        </div>\n        <div class=\"text-muted-foreground\">\n          Meets growth projections\n        </div>\n      </CardFooter>\n    </Card>\n  </div>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/SiteHeader.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/SiteHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <header class=\"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 class=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n      <SidebarTrigger class=\"-ml-1\" />\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-2 data-[orientation=vertical]:h-4\"\n      />\n      <h1 class=\"text-base font-medium\">\n        Documents\n      </h1>\n      <div class=\"ml-auto flex items-center gap-2\">\n        <Button variant=\"ghost\" as-child size=\"sm\" class=\"hidden sm:flex\">\n          <a\n            href=\"https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n            class=\"dark:text-foreground\"\n          >\n            GitHub\n          </a>\n        </Button>\n      </div>\n    </div>\n  </header>\n</template>\n"
    },
    {
      "path": "blocks/dashboard-01/components/features.ts",
      "type": "registry:file",
      "target": "blocks/dashboard-01/components/features.ts",
      "content": "import {\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  tableFeatures,\n} from \"@tanstack/vue-table\"\n\n// New in v9: declare the features this table uses — anything you don't\n// register is tree-shaken out of the bundle.\nexport const features = tableFeatures({\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  filteredRowModel: createFilteredRowModel(),\n  paginatedRowModel: createPaginatedRowModel(),\n  sortedRowModel: createSortedRowModel(),\n})\n\nexport type Features = typeof features\n"
    },
    {
      "path": "blocks/dashboard-01/page.vue",
      "type": "registry:file",
      "target": "blocks/dashboard-01/page.vue",
      "content": "<script lang=\"ts\">\nexport const iframeHeight = \"800px\"\nexport const description = \"A dashboard with sidebar, data table, and analytics cards.\"\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from \"./components/AppSidebar.vue\"\nimport ChartAreaInteractive from \"./components/ChartAreaInteractive.vue\"\nimport DataTable from \"./components/DataTable.vue\"\nimport SectionCards from \"./components/SectionCards.vue\"\nimport SiteHeader from \"./components/SiteHeader.vue\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst data = [\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</script>\n\n<template>\n  <SidebarProvider\n    :style=\" {\n      '--sidebar-width': 'calc(var(--spacing) * 72)',\n      '--header-height': 'calc(var(--spacing) * 12)',\n    }\"\n  >\n    <AppSidebar variant=\"inset\" />\n    <SidebarInset>\n      <SiteHeader />\n      <div class=\"flex flex-1 flex-col\">\n        <div class=\"@container/main flex flex-1 flex-col gap-2\">\n          <div class=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n            <SectionCards />\n            <div class=\"px-4 lg:px-6\">\n              <ChartAreaInteractive />\n            </div>\n            <DataTable :data=\"data\" />\n          </div>\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}