# Agndex dashboard

A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/agndex-dashboard).

- Page, with a live preview: https://shadcn.exchange/r/watermelon/agndex-dashboard
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/agndex-dashboard-light-26d84c05e79ae2ee.png
- Registry item: https://registry.watermelon.sh/r/agndex-dashboard.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://registry.watermelon.sh/r/agndex-dashboard.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `avatar`, `badge`, `button`, `dropdown-menu`, `sidebar`, `utils`

## Files

### `src/components/dashboards/agndex-dashboard/components/agndex/api-keys-page.tsx`

```tsx
import { useState } from 'react'
import {
  CheckIcon,
  CopyIcon,
  DocumentIcon,
  DownloadIcon,
  EyeIcon,
  EyeOffIcon,
  InfoIcon,
  ProjectIcon,
} from './icons'
import { Button } from '@/components/ui/button'
import { projectCredentials } from '../../data'

const maskedKey = '*'.repeat(projectCredentials.projectKey.length)
const envBlock = `AGNDEX_PROJECT_ID = ${projectCredentials.projectId}
AGNDEX_PROJECT_KEY = ${maskedKey}`
const envFileContents = `AGNDEX_PROJECT_ID=${projectCredentials.projectId}
AGNDEX_PROJECT_KEY=${projectCredentials.projectKey}
`

function copyText(value: string) {
  void navigator.clipboard.writeText(value)
}

function downloadEnv() {
  const blob = new Blob([envFileContents], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = '.env'
  link.click()
  URL.revokeObjectURL(url)
}

function SecurityNote() {
  return (
    <div className="flex items-start gap-2 text-muted-foreground">
      <InfoIcon className="mt-0.75 size-5 shrink-0" />
      <p>Keep these secure. Never expose your Project Key in client-side code.</p>
    </div>
  )
}

export function ApiKeysPage() {
  const [showKey, setShowKey] = useState(false)
  const [idCopied, setIdCopied] = useState(false)
  const [keyCopied, setKeyCopied] = useState(false)
  const [envCopied, setEnvCopied] = useState(false)

  function copyWithFeedback(
    value: string,
    setCopied: (copied: boolean) => void,
  ) {
    copyText(value)
    setCopied(true)
    window.setTimeout(() => setCopied(false), 1500)
  }

  function copyEnv() {
    copyWithFeedback(envFileContents, setEnvCopied)
  }

  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-10 p-4 md:gap-11 md:p-8">
      <div className="flex flex-col md:gap-2">
        <h1 className="text-2xl font-semibold tracking-tight">API Keys</h1>
        <p className="text-muted-foreground">Credential for Default Project</p>
      </div>

      <div className="flex flex-col gap-6">
        <div className="flex flex-col gap-1">
          <div className="flex items-center gap-2">
            <ProjectIcon />
            <h2 className="font-medium">Project Credentials</h2>
          </div>
          <p className="text-sm text-muted-foreground md:pl-7">
            Use these to authenticate your API requests
          </p>
        </div>

        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <p className="text-sm text-muted-foreground">Project ID</p>
            <div className="flex h-12 items-center gap-2 rounded-xl border bg-card px-4">
              <p className="flex-1 truncate text-sm font-medium">
                {projectCredentials.projectId}
              </p>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-5 text-muted-foreground"
                aria-label="Copy project ID"
                onClick={() =>
                  copyWithFeedback(projectCredentials.projectId, setIdCopied)
                }
              >
                {idCopied ? <CheckIcon /> : <CopyIcon />}
              </Button>
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <p className="text-sm text-muted-foreground">Project Key</p>
            <div className="flex h-12 items-center gap-3 rounded-xl border bg-card px-4">
              <p className="flex-1 truncate font-medium tracking-tight">
                {showKey ? projectCredentials.projectKey : maskedKey}
              </p>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-5 text-muted-foreground"
                aria-label={showKey ? 'Hide project key' : 'Show project key'}
                onClick={() => setShowKey((value) => !value)}
              >
                {showKey ? <EyeOffIcon /> : <EyeIcon />}
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-5 text-muted-foreground"
                aria-label="Copy project key"
                onClick={() =>
                  copyWithFeedback(projectCredentials.projectKey, setKeyCopied)
                }
              >
                {keyCopied ? <CheckIcon /> : <CopyIcon />}
              </Button>
            </div>
          </div>

          <SecurityNote />
        </div>
      </div>

      <div className="border-t" />

      <div className="flex flex-col gap-6">
        <h2 className="font-medium">Environment Variables</h2>

        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-1 text-muted-foreground">
                <DocumentIcon />
                <span>.env</span>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  type="button"
                  variant="outline"
                  className="h-11 gap-2 px-4 font-normal"
                  onClick={copyEnv}
                >
                  {envCopied ? <CheckIcon /> : <CopyIcon />}
                  {envCopied ? 'Copied' : 'Copy'}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="h-11 gap-2 px-4 font-normal"
                  onClick={downloadEnv}
                >
                  <DownloadIcon />
                  Download
                </Button>
              </div>
            </div>

            <div className="rounded-xl border bg-card px-4 py-3 text-sm font-medium tracking-tight">
              <pre className="font-sans whitespace-pre-wrap">{envBlock}</pre>
            </div>
          </div>

          <SecurityNote />
        </div>
      </div>
    </div>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/billing-page.tsx`

```tsx
import {
  ArrowRightIcon,
  BillingIcon,
  CalendarIcon,
  PackageIcon,
  SettingsIcon,
} from './icons'
import { Button } from '@/components/ui/button'
import { resourceRows, subscription, usageStats } from '../../data'

export function BillingPage() {
  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-10 p-4 md:gap-11 md:p-8">
      <div className="flex flex-col md:gap-2">
        <h1 className="text-2xl font-semibold tracking-tight">Billing</h1>
        <p className="text-muted-foreground">
          Manage your subscription and payment details
        </p>
      </div>

      <div className="flex flex-col gap-6">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <BillingIcon />
            <h2 className="font-medium">Subscription</h2>
          </div>
          <Button
            type="button"
            variant="outline"
            className="h-11 gap-2 px-4 font-normal"
          >
            <SettingsIcon />
            Manage Plan
          </Button>
        </div>

        <div className="flex flex-col gap-3 rounded-xl bg-card p-0.5 pb-3 dark:bg-sidebar">
          <div className="flex flex-col gap-3 rounded-lg bg-background p-4 dark:bg-card">
            <div className="flex flex-wrap items-center gap-3">
              <p className="text-lg font-medium tracking-tight">
                {subscription.tier}
              </p>
              <span className="text-sm text-info">{subscription.plan}</span>
            </div>
            <div className="flex flex-wrap items-center gap-4">
              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                <CalendarIcon />
                Billing Cycle
              </div>
              <p className="text-sm font-medium tracking-tight">
                {subscription.billingCycle}
              </p>
            </div>
          </div>

          <div className="flex flex-wrap items-center justify-between gap-2 px-3">
            <p className="text-sm text-muted-foreground">Pricing & Features</p>
            <button
              type="button"
              className="group flex items-center gap-2 text-sm text-primary"
            >
              View Feature Comparison
              <ArrowRightIcon className="transition-transform group-hover:translate-x-0.5" />
            </button>
          </div>
        </div>
      </div>

      <div className="border-t" />

      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-6">
          <div className="flex items-center gap-2">
            <PackageIcon />
            <h2 className="font-medium">Plan Limits & Usage</h2>
          </div>

          <div className="grid gap-3 md:grid-cols-3">
            {usageStats.map((stat) => (
              <div
                key={stat.label}
                className="flex flex-col gap-6 rounded-xl bg-(--card-hover) p-4 dark:bg-sidebar"
              >
                <div className="flex items-center gap-2 text-sm">
                  <stat.icon className="text-foreground" />
                  <span className="text-muted-foreground opacity-80">
                    {stat.label}
                  </span>
                </div>
                <p className="text-3xl leading-none font-medium">{stat.value}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="custom-scrollbar-x rounded-xl bg-card">
          <table className="w-full min-w-xl text-left">
            <thead>
              <tr className="bg-(--card-hover) text-sm dark:bg-sidebar">
                <th className="px-6 py-3 font-normal">Resource</th>
                <th className="px-6 py-3 font-normal">Included</th>
                <th className="px-6 py-3 font-normal">Overage</th>
              </tr>
            </thead>
            <tbody>
              {resourceRows.map((row) => (
                <tr key={row.resource} className="border-t border-border">
                  <td className="px-6 py-3.5 tracking-tight">{row.resource}</td>
                  <td className="px-6 py-3.5 tracking-tight">{row.included}</td>
                  <td className="px-6 py-3.5 tracking-tight">{row.overage}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <p className="text-muted-foreground">
          Need custom limits?{' '}
          <button
            type="button"
            className="cursor-pointer text-foreground underline underline-offset-2 transition-opacity hover:opacity-60"
          >
            Contact us
          </button>
        </p>
      </div>
    </div>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/dashboard-page.tsx`

```tsx
import {
  AddIcon,
  CalendarIcon,
  DeleteIcon,
  DeveloperIcon,
  DocumentIcon,
  IndexesIcon,
  KeyIcon,
  ProjectIcon,
  SampleIcon,
} from './icons'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { indexes, projectSummary, projects } from '../../data'
import { cn } from '@/lib/utils'

const metaChipClassName =
  'flex h-11 items-center justify-center gap-2 rounded-lg border bg-secondary px-3 text-muted-foreground max-md:text-sm md:justify-start md:px-4'

const defaultProject = projects[0]
const indexesLabel = `${projectSummary.indexesUsed}/${projectSummary.indexesLimit} Indexes`
const indexesUsedLabel = `${projectSummary.indexesUsed} / ${projectSummary.indexesLimit} Indexes Used`

export function DashboardPage() {
  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-10 p-4 md:gap-11 md:p-8">
      <div className="flex flex-col md:gap-2">
        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">
          Manage your indexes for {defaultProject.name}
        </p>
      </div>

      <div className="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:items-center md:justify-between">
        <div className="contents md:flex md:flex-wrap md:items-center md:gap-2">
          <div className={cn(metaChipClassName, 'font-medium text-foreground')}>
            <ProjectIcon />
            {defaultProject.name}
          </div>
          <div className={metaChipClassName}>
            <DeveloperIcon />
            {projectSummary.tier}
          </div>
          <div className={metaChipClassName}>
            <IndexesIcon />
            {indexesLabel}
          </div>
        </div>

        <Button
          variant="destructive"
          className="h-11 gap-2 px-3 font-normal max-md:text-sm md:px-4 dark:bg-destructive/10 dark:hover:bg-destructive/20"
        >
          <DeleteIcon />
          Delete Project
        </Button>
      </div>

      <div className="border-t" />

      <div className="flex flex-col gap-6 md:gap-8">
        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
          <div className="flex flex-col gap-1">
            <div className="flex flex-wrap items-center gap-2">
              <IndexesIcon />
              <h2 className="font-medium">Search Indexes</h2>
              <Badge className="h-auto rounded-lg bg-info/10 py-1.5 font-normal text-info">
                {indexesUsedLabel}
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground md:pl-7">
              Manage search indexes for {defaultProject.name}
            </p>
          </div>

          <div className="flex flex-row items-center gap-2">
            <Button
              variant="outline"
              className="h-11 flex-1 gap-2 px-4 font-normal md:w-auto md:flex-none"
            >
              <SampleIcon />
              Created from sample
            </Button>
            <Button className="h-11 flex-1 gap-2 px-4 font-normal md:w-auto md:flex-none">
              <AddIcon />
              Create Index
            </Button>
          </div>
        </div>

        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-3">
            <h3 className="font-medium">{indexes.length} Index</h3>
            <Badge className="h-auto rounded-lg bg-info/10 py-1.5 font-normal text-info">
              Active
            </Badge>
          </div>

          <div className="flex flex-col gap-3">
            {indexes.map((index) => (
              <div
                key={index.id}
                className="flex items-center justify-between gap-3 rounded-xl bg-card px-3 py-3 transition-colors hover:bg-(--card-hover) md:pr-4"
              >
                <div className="flex items-center gap-3 overflow-hidden md:gap-4">
                  <div className="flex size-11 items-center justify-center rounded-lg border bg-sidebar text-muted-foreground">
                    <DocumentIcon />
                  </div>
                  <div className="flex flex-col gap-1.5 overflow-hidden md:gap-2">
                    <p className="truncate text-sm tracking-tight">{index.name}</p>
                    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground md:gap-x-4">
                      <span className="flex items-center gap-1">
                        <CalendarIcon />
                        <span className="md:hidden">{index.updatedAt}</span>
                        <span className="hidden md:inline">
                          Updated {index.updatedAt}
                        </span>
                      </span>
                      <span className="size-1 rounded-full bg-muted-foreground" />
                      <span>{index.docs} docs</span>
                    </div>
                  </div>
                </div>

                <div className="flex items-center gap-1">
                  <Button variant="ghost" size="icon" className="size-9">
                    <KeyIcon />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="size-9 text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/10 hover:text-destructive"
                  >
                    <DeleteIcon />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/icons.tsx`

```tsx
import type { SVGProps } from 'react'
import { cn } from '@/lib/utils'

type IconProps = SVGProps<SVGSVGElement>

function Icon({ className, ...props }: IconProps) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn('size-5', className)}
      {...props}
    />
  )
}

export function HomeIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.97667 2.24C9.26924 2.01241 9.62933 1.88884 10 1.88884C10.3707 1.88884 10.7308 2.01241 11.0233 2.24L18.01 7.67333C18.6375 8.1625 18.2908 9.16667 17.4975 9.16667H16.6667V15.8333C16.6667 16.2754 16.4911 16.6993 16.1785 17.0118C15.8659 17.3244 15.442 17.5 15 17.5H5C4.55797 17.5 4.13405 17.3244 3.82149 17.0118C3.50893 16.6993 3.33333 16.2754 3.33333 15.8333V9.16667H2.5025C1.70833 9.16667 1.36333 8.16167 1.99 7.67417L8.97667 2.24Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function KeyIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M8.69833 3.64C9.38815 2.95045 10.2514 2.45995 11.1968 2.2203C12.1423 1.98064 13.1349 2.00072 14.0699 2.2784C15.0049 2.55609 15.8476 3.08109 16.5089 3.79797C17.1703 4.51485 17.6258 5.39701 17.8274 6.35131C18.0291 7.3056 17.9692 8.29663 17.6543 9.21976C17.3394 10.1429 16.7811 10.9639 16.0383 11.596C15.2955 12.2281 14.3958 12.648 13.4342 12.8112C12.4726 12.9744 11.4848 12.875 10.575 12.5233L10.3508 12.4317L10.3342 12.4283H9.82583V13.7433C9.82595 14.0012 9.73041 14.25 9.55769 14.4415C9.38497 14.633 9.14736 14.7536 8.89083 14.78L8.78417 14.785H7.46917V16.1C7.46928 16.3579 7.37374 16.6066 7.20102 16.7981C7.0283 16.9896 6.79069 17.1103 6.53417 17.1367L6.4275 17.1417H3.10833C2.90098 17.1417 2.70092 17.0651 2.54652 16.9267C2.39212 16.7883 2.29425 16.5978 2.27167 16.3917L2.26667 16.3V14.125C2.26667 13.836 2.36679 13.556 2.55 13.3325L2.63333 13.2408L7.21667 8.65667L7.225 8.62583C7.22757 8.6033 7.22644 8.5805 7.22167 8.55833C7.04132 7.68036 7.08184 6.77134 7.33958 5.91289C7.59731 5.05444 8.06421 4.27344 8.69833 3.64ZM12.2333 5.99667C11.9989 6.23116 11.8673 6.54916 11.8674 6.88071C11.8675 7.21226 11.9993 7.5302 12.2337 7.76458C12.4682 7.99897 12.7862 8.1306 13.1178 8.13052C13.4493 8.13044 13.7673 7.99866 14.0017 7.76417C14.2293 7.52831 14.3551 7.21249 14.3521 6.88475C14.3491 6.557 14.2175 6.24355 13.9856 6.01189C13.7537 5.78024 13.4402 5.64893 13.1124 5.64624C12.7847 5.64354 12.469 5.76886 12.2333 5.99667Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function BillingIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M18.3333 8.33333V14.1667C18.3333 14.8297 18.0699 15.4656 17.6011 15.9344C17.1323 16.4033 16.4964 16.6667 15.8333 16.6667H4.16667C3.50363 16.6667 2.86774 16.4033 2.3989 15.9344C1.93006 15.4656 1.66667 14.8297 1.66667 14.1667V8.33333H18.3333ZM15 11.6667H12.5C12.279 11.6667 12.067 11.7545 11.9107 11.9107C11.7545 12.067 11.6667 12.279 11.6667 12.5C11.6667 12.721 11.7545 12.933 11.9107 13.0893C12.067 13.2455 12.279 13.3333 12.5 13.3333H15C15.221 13.3333 15.433 13.2455 15.5893 13.0893C15.7455 12.933 15.8333 12.721 15.8333 12.5C15.8333 12.279 15.7455 12.067 15.5893 11.9107C15.433 11.7545 15.221 11.6667 15 11.6667ZM15.8333 3.33333C16.4964 3.33333 17.1323 3.59673 17.6011 4.06557C18.0699 4.53441 18.3333 5.17029 18.3333 5.83333V6.66667H1.66667V5.83333C1.66667 5.17029 1.93006 4.53441 2.3989 4.06557C2.86774 3.59673 3.50363 3.33333 4.16667 3.33333H15.8333Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function DocsIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M15 1.66667C15.442 1.66667 15.8659 1.84226 16.1785 2.15482C16.4911 2.46738 16.6667 2.89131 16.6667 3.33333V16.6667C16.6667 17.1087 16.4911 17.5326 16.1785 17.8452C15.8659 18.1577 15.442 18.3333 15 18.3333H5C4.55797 18.3333 4.13405 18.1577 3.82149 17.8452C3.50893 17.5326 3.33333 17.1087 3.33333 16.6667V3.33333C3.33333 2.89131 3.50893 2.46738 3.82149 2.15482C4.13405 1.84226 4.55797 1.66667 5 1.66667H15ZM10 10.8333H7.5C7.27899 10.8333 7.06702 10.9211 6.91074 11.0774C6.75446 11.2337 6.66667 11.4457 6.66667 11.6667C6.66667 11.8877 6.75446 12.0996 6.91074 12.2559C7.06702 12.4122 7.27899 12.5 7.5 12.5H10C10.221 12.5 10.433 12.4122 10.5893 12.2559C10.7455 12.0996 10.8333 11.8877 10.8333 11.6667C10.8333 11.4457 10.7455 11.2337 10.5893 11.0774C10.433 10.9211 10.221 10.8333 10 10.8333ZM12.5 6.66667H7.5C7.2876 6.6669 7.08331 6.74823 6.92886 6.89404C6.77441 7.03985 6.68147 7.23913 6.66902 7.45116C6.65658 7.6632 6.72556 7.87198 6.86189 8.03486C6.99821 8.19774 7.19159 8.30241 7.4025 8.3275L7.5 8.33333H12.5C12.7124 8.3331 12.9167 8.25177 13.0711 8.10596C13.2256 7.96015 13.3185 7.76087 13.331 7.54884C13.3434 7.3368 13.2744 7.12802 13.1381 6.96514C13.0018 6.80226 12.8084 6.69759 12.5975 6.6725L12.5 6.66667Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function DiscordIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M12.5025 3.33333C13.1225 3.33333 13.7775 3.55 14.3775 3.78917L14.8167 3.96917C15.8667 4.40917 16.4567 5.3325 16.9142 6.34667C17.6567 7.9925 18.1725 10.1867 18.3508 11.855C18.4358 12.6467 18.4567 13.4433 18.3042 13.9792C18.14 14.5517 17.5817 14.9567 17.0392 15.275L16.7708 15.4275L16.4925 15.5825C16.3492 15.6625 16.2017 15.7417 16.055 15.8192L15.62 16.0442L15.0225 16.3417L14.5417 16.5783C14.4434 16.6313 14.3356 16.664 14.2245 16.6745C14.1133 16.685 14.0013 16.673 13.8949 16.6394C13.7884 16.6057 13.6899 16.5511 13.605 16.4786C13.5201 16.4061 13.4507 16.3173 13.4008 16.2175C13.3509 16.1177 13.3215 16.0089 13.3145 15.8975C13.3074 15.7861 13.3228 15.6745 13.3597 15.5691C13.3967 15.4638 13.4544 15.367 13.5294 15.2844C13.6045 15.2018 13.6954 15.1351 13.7967 15.0883L14.455 14.7633L13.9717 14.2558C12.8133 14.7308 11.4492 15 10 15C8.55083 15 7.18667 14.7317 6.02833 14.2558L5.545 14.7625L6.20583 15.0875C6.30378 15.1364 6.39113 15.2041 6.4629 15.2868C6.53467 15.3695 6.58945 15.4655 6.62411 15.5693C6.65878 15.6732 6.67266 15.7829 6.66494 15.8921C6.65723 16.0013 6.62808 16.1079 6.57917 16.2058C6.53025 16.3038 6.46252 16.3911 6.37984 16.4629C6.29717 16.5347 6.20117 16.5894 6.09732 16.6241C5.88759 16.6941 5.65864 16.678 5.46083 16.5792L5.0075 16.3542C4.6725 16.1875 4.33667 16.0225 4.005 15.8483L3.23167 15.4275L2.96417 15.275C2.42167 14.9567 1.8625 14.5517 1.69917 13.9792C1.54583 13.4433 1.5675 12.6475 1.65167 11.8542C1.83 10.1867 2.34583 7.9925 3.08833 6.34667C3.54583 5.3325 4.13583 4.40917 5.18583 3.96917C5.8825 3.6775 6.72667 3.33333 7.5 3.33333C8.0025 3.33333 8.3975 3.79583 8.325 4.28917C8.87955 4.20711 9.43941 4.16617 10 4.16667C10.5758 4.16667 11.1383 4.20833 11.6783 4.29C11.6623 4.17166 11.6715 4.05125 11.7055 3.93676C11.7395 3.82226 11.7974 3.71629 11.8754 3.62584C11.9533 3.5354 12.0497 3.46256 12.1579 3.41213C12.2662 3.3617 12.3831 3.33484 12.5025 3.33333ZM7.29167 8.75C6.90489 8.75 6.53396 8.90364 6.26047 9.17714C5.98698 9.45063 5.83333 9.82156 5.83333 10.2083C5.83333 10.5951 5.98698 10.966 6.26047 11.2395C6.53396 11.513 6.90489 11.6667 7.29167 11.6667C7.67844 11.6667 8.04937 11.513 8.32286 11.2395C8.59635 10.966 8.75 10.5951 8.75 10.2083C8.75 9.82156 8.59635 9.45063 8.32286 9.17714C8.04937 8.90364 7.67844 8.75 7.29167 8.75ZM12.7083 8.75C12.3216 8.75 11.9506 8.90364 11.6771 9.17714C11.4036 9.45063 11.25 9.82156 11.25 10.2083C11.25 10.5951 11.4036 10.966 11.6771 11.2395C11.9506 11.513 12.3216 11.6667 12.7083 11.6667C13.0951 11.6667 13.466 11.513 13.7395 11.2395C14.013 10.966 14.1667 10.5951 14.1667 10.2083C14.1667 9.82156 14.013 9.45063 13.7395 9.17714C13.466 8.90364 13.0951 8.75 12.7083 8.75Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function SettingsIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M8.95833 2.13917C9.27504 1.95632 9.6343 1.86005 10 1.86005C10.3657 1.86005 10.725 1.95632 11.0417 2.13917L16.2867 5.16667C16.6034 5.34951 16.8664 5.6125 17.0492 5.9292C17.2321 6.24589 17.3283 6.60514 17.3283 6.97083V13.0275C17.3283 13.3932 17.2321 13.7524 17.0492 14.0691C16.8664 14.3858 16.6034 14.6488 16.2867 14.8317L11.0417 17.86C10.725 18.0429 10.3657 18.1391 10 18.1391C9.6343 18.1391 9.27504 18.0429 8.95833 17.86L3.71333 14.8317C3.39663 14.6488 3.13364 14.3858 2.95079 14.0691C2.76794 13.7524 2.67168 13.3932 2.67167 13.0275V6.97167C2.67153 6.60583 2.76773 6.24641 2.95059 5.92956C3.13344 5.6127 3.39651 5.34958 3.71333 5.16667L8.95833 2.13917ZM10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function LogoutIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M14.125 12.7475C14.0476 12.67 13.9557 12.6086 13.8545 12.5666C13.7534 12.5247 13.6449 12.5031 13.5354 12.5031C13.4259 12.5031 13.3175 12.5247 13.2163 12.5666C13.1151 12.6086 13.0232 12.67 12.9458 12.7475L10.8333 14.8608V7.5C10.8333 7.27899 10.7455 7.06702 10.5893 6.91074C10.433 6.75446 10.221 6.66667 10 6.66667C9.77899 6.66667 9.56702 6.75446 9.41074 6.91074C9.25446 7.06702 9.16667 7.27899 9.16667 7.5V14.8608L7.05333 12.7475C6.89697 12.5912 6.68493 12.5035 6.46387 12.5036C6.24281 12.5037 6.03084 12.5915 5.87458 12.7479C5.71833 12.9043 5.63059 13.1163 5.63066 13.3374C5.63074 13.5584 5.71863 13.7704 5.875 13.9267L9.41083 17.4617C9.56711 17.6179 9.77903 17.7057 10 17.7057C10.221 17.7057 10.4329 17.6179 10.5892 17.4617L14.125 13.9267C14.2025 13.8493 14.2639 13.7574 14.3059 13.6562C14.3478 13.555 14.3694 13.4466 14.3694 13.3371C14.3694 13.2276 14.3478 13.1191 14.3059 13.018C14.2639 12.9168 14.2025 12.8249 14.125 12.7475ZM4.16667 2.5C3.94565 2.5 3.73369 2.5878 3.57741 2.74408C3.42113 2.90036 3.33333 3.11232 3.33333 3.33333C3.33333 3.55435 3.42113 3.76631 3.57741 3.92259C3.73369 4.07887 3.94565 4.16667 4.16667 4.16667H15.8333C16.0543 4.16667 16.2663 4.07887 16.4226 3.92259C16.5789 3.76631 16.6667 3.55435 16.6667 3.33333C16.6667 3.11232 16.5789 2.90036 16.4226 2.74408C16.2663 2.5878 16.0543 2.5 15.8333 2.5H4.16667Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function ProjectIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M16.5167 5C16.7587 5.00009 16.9978 5.05289 17.2173 5.15472C17.4369 5.25655 17.6316 5.40498 17.788 5.58968C17.9444 5.77438 18.0587 5.99092 18.1229 6.22426C18.1872 6.45759 18.1998 6.70212 18.16 6.94083L16.7717 15.2742C16.7068 15.6633 16.5059 16.0168 16.2049 16.2718C15.9038 16.5268 15.522 16.6667 15.1275 16.6667H4.8725C4.47797 16.6667 4.09621 16.5268 3.79515 16.2718C3.49408 16.0168 3.29323 15.6633 3.22833 15.2742L1.84 6.94083C1.80019 6.70212 1.81284 6.45759 1.87709 6.22426C1.94133 5.99092 2.05561 5.77438 2.212 5.58968C2.36839 5.40498 2.56313 5.25655 2.78268 5.15472C3.00223 5.05289 3.24132 5.00009 3.48333 5H16.5167ZM15 2.5C15.221 2.5 15.433 2.5878 15.5893 2.74408C15.7455 2.90036 15.8333 3.11232 15.8333 3.33333C15.8333 3.55435 15.7455 3.76631 15.5893 3.92259C15.433 4.07887 15.221 4.16667 15 4.16667H5C4.77899 4.16667 4.56702 4.07887 4.41074 3.92259C4.25446 3.76631 4.16667 3.55435 4.16667 3.33333C4.16667 3.11232 4.25446 2.90036 4.41074 2.74408C4.56702 2.5878 4.77899 2.5 5 2.5H15Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function DeveloperIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 640 512" className={className} {...props}>
      <path
        fill="currentColor"
        d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
      />
    </Icon>
  )
}

export function CaretDownIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 18 18" className={cn('size-4.5', className)} {...props}>
      <path
        d="M15.023 7.14797L9.39797 12.773C9.34573 12.8253 9.28369 12.8668 9.2154 12.8951C9.14712 12.9234 9.07392 12.9379 9 12.9379C8.92608 12.9379 8.85288 12.9234 8.7846 12.8951C8.71631 12.8668 8.65427 12.8253 8.60203 12.773L2.97703 7.14797C2.89827 7.0693 2.84463 6.96903 2.82289 6.85986C2.80115 6.75069 2.81229 6.63752 2.8549 6.53468C2.89751 6.43184 2.96968 6.34396 3.06226 6.28216C3.15484 6.22036 3.26368 6.18741 3.375 6.1875H14.625C14.7363 6.18741 14.8452 6.22036 14.9377 6.28216C15.0303 6.34396 15.1025 6.43184 15.1451 6.53468C15.1877 6.63752 15.1989 6.75069 15.1771 6.85986C15.1554 6.96903 15.1017 7.0693 15.023 7.14797Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function SunIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 512 512" className={cn('size-6', className)} {...props}>
      <path
        fill="currentColor"
        d="M356.23 13.94c4.75 1.99 8.17 6.27 9.12 11.31L384.25 127.75l102.5 18.81c5.03 0.95 9.31 4.37 11.31 9.12s1.42 10.16-1.52 14.44L437.35 256l59.19 85.78c2.94 4.27 3.52 9.69 1.52 14.44s-6.27 8.17-11.31 9.12L384.25 384.25 365.35 486.75c-0.95 5.03-4.37 9.31-9.12 11.31s-10.16 1.42-14.44-1.52L256 437.35l-85.78 59.19c-4.27 2.94-9.69 3.52-14.44 1.52s-8.17-6.27-9.12-11.31L127.75 384.25 25.25 365.35c-5.03-0.95-9.31-4.37-11.31-9.12s-1.42-10.16 1.52-14.44L74.65 256 15.46 170.22c-2.94-4.27-3.52-9.69-1.52-14.44s6.27-8.17 11.31-9.12L127.75 127.75 146.66 25.25c0.95-5.03 4.37-9.31 9.12-11.31s10.16-1.42 14.44 1.52L256 74.65 341.79 15.46c4.27-2.94 9.69-3.52 14.44-1.52zM164.8 256a91.2 91.2 0 1 1 182.4 0 91.2 91.2 0 1 1-182.4 0zm212.8 0a121.6 121.6 0 1 0-243.2 0 121.6 121.6 0 1 0 243.2 0z"
      />
    </Icon>
  )
}

export function MoonIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 24 24" className={cn('size-6', className)} {...props}>
      <path
        fill="currentColor"
        d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"
      />
    </Icon>
  )
}

export function MonitorIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 24 24" className={cn('size-6', className)} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 3C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V15C3 15.5304 3.21071 16.0391 3.58579 16.4142C3.96086 16.7893 4.46957 17 5 17H9.968C9.854 18.634 9.478 19.123 9.421 19.188C8.975 19.532 8.997 20.048 9.081 20.304C9.168 20.566 9.463 21 10.042 21H13.958C14.537 21 14.832 20.566 14.918 20.304C15.003 20.048 15.025 19.532 14.579 19.188C14.521 19.123 14.146 18.635 14.032 17H19C19.5304 17 20.0391 16.7893 20.4142 16.4142C20.7893 16.0391 21 15.5304 21 15V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H5ZM5 15V13H19V15H5Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function IndexesIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M17.5 13.4525V14.5833C17.5 15.2617 17.1825 15.8417 16.7417 16.2975C16.3058 16.7492 15.7142 17.1175 15.0483 17.4092C13.7133 17.9925 11.9283 18.3333 10 18.3333C8.07167 18.3333 6.28667 17.9933 4.95167 17.4092C4.28583 17.1175 3.69417 16.7492 3.25833 16.2975C2.85417 15.8808 2.55417 15.3575 2.50667 14.7508L2.5 14.5833V13.4525C2.8875 13.6725 3.30167 13.8675 3.745 14.0317C5.43667 14.6575 7.64917 15.0067 10 15.0067C12.3508 15.0067 14.5633 14.6575 16.255 14.0317C16.5875 13.9083 16.9033 13.7683 17.2042 13.6125L17.5 13.4525ZM2.5 8.86917C2.8875 9.08917 3.30167 9.28417 3.745 9.44833C5.43667 10.0742 7.64917 10.4233 10 10.4233C12.3508 10.4233 14.5633 10.0742 16.255 9.44833C16.6851 9.28958 17.1015 9.09587 17.5 8.86917V11.4567C16.9466 11.8838 16.3319 12.2249 15.6767 12.4683C14.2142 13.01 12.2067 13.3408 10 13.3408C7.79417 13.3408 5.78667 13.01 4.32333 12.4683C3.66807 12.2249 3.05336 11.8838 2.5 11.4567V8.86917ZM10 2.5C11.9283 2.5 13.7133 2.84 15.0483 3.42417C15.7142 3.71583 16.3058 4.08417 16.7417 4.53583C17.1458 4.9525 17.4458 5.47583 17.4933 6.0825L17.5 6.25V6.87333C16.9467 7.30048 16.3319 7.64155 15.6767 7.885C14.2142 8.42667 12.2067 8.7575 10 8.7575C7.79417 8.7575 5.78667 8.42667 4.32333 7.885C3.75987 7.67599 3.22617 7.39416 2.73583 7.04667L2.5 6.87333V6.25C2.5 5.57167 2.8175 4.99167 3.25833 4.53583C3.69417 4.08417 4.28583 3.71583 4.95167 3.42417C6.28667 2.84083 8.07167 2.5 10 2.5Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function DeleteIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.9 1.66667C12.2498 1.66676 12.5907 1.7769 12.8744 1.98151C13.1581 2.18611 13.3703 2.47479 13.4808 2.80667L13.9333 4.16667H16.6667C16.8877 4.16667 17.0996 4.25446 17.2559 4.41074C17.4122 4.56702 17.5 4.77899 17.5 5C17.5 5.22101 17.4122 5.43298 17.2559 5.58926C17.0996 5.74554 16.8877 5.83333 16.6667 5.83333L16.6642 5.8925L15.9417 16.0117C15.8966 16.6422 15.6143 17.2322 15.1517 17.663C14.6891 18.0937 14.0805 18.3333 13.4483 18.3333H6.55167C5.91955 18.3333 5.31092 18.0937 4.84831 17.663C4.38569 17.2322 4.10342 16.6422 4.05833 16.0117L3.33583 5.89167C3.33433 5.87226 3.33349 5.8528 3.33333 5.83333C3.11232 5.83333 2.90036 5.74554 2.74408 5.58926C2.5878 5.43298 2.5 5.22101 2.5 5C2.5 4.77899 2.5878 4.56702 2.74408 4.41074C2.90036 4.25446 3.11232 4.16667 3.33333 4.16667H6.06667L6.51917 2.80667C6.62975 2.47466 6.84203 2.18588 7.12592 1.98126C7.4098 1.77665 7.75089 1.66658 8.10083 1.66667H11.9ZM7.5 8.33333C7.29589 8.33336 7.09889 8.4083 6.94636 8.54393C6.79383 8.67956 6.69638 8.86646 6.6725 9.06917L6.66667 9.16667V14.1667C6.6669 14.3791 6.74823 14.5834 6.89404 14.7378C7.03985 14.8923 7.23913 14.9852 7.45116 14.9976C7.6632 15.0101 7.87198 14.9411 8.03486 14.8048C8.19774 14.6685 8.30241 14.4751 8.3275 14.2642L8.33333 14.1667V9.16667C8.33333 8.94565 8.24554 8.73369 8.08926 8.57741C7.93298 8.42113 7.72101 8.33333 7.5 8.33333ZM12.5 8.33333C12.279 8.33333 12.067 8.42113 11.9107 8.57741C11.7545 8.73369 11.6667 8.94565 11.6667 9.16667V14.1667C11.6667 14.3877 11.7545 14.5996 11.9107 14.7559C12.067 14.9122 12.279 15 12.5 15C12.721 15 12.933 14.9122 13.0893 14.7559C13.2455 14.5996 13.3333 14.3877 13.3333 14.1667V9.16667C13.3333 8.94565 13.2455 8.73369 13.0893 8.57741C12.933 8.42113 12.721 8.33333 12.5 8.33333ZM11.9 3.33333H8.1L7.8225 4.16667H12.1775L11.9 3.33333Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function SampleIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M8.3975 2.17833C8.67917 1.545 9.54667 1.51417 9.88667 2.08333L9.93583 2.17833L10.8042 4.1325C11.5624 5.83826 12.8233 7.27189 14.4183 8.24167L14.6867 8.39917L16.2283 9.26583C16.3509 9.33445 16.4543 9.43264 16.5292 9.55146C16.6041 9.67029 16.6481 9.80597 16.6571 9.94614C16.6661 10.0863 16.6399 10.2265 16.5809 10.354C16.5219 10.4814 16.4319 10.5921 16.3192 10.6758L16.2292 10.7342L14.6867 11.6008C13.0595 12.5161 11.7506 13.9064 10.935 15.5858L10.8042 15.8675L9.93583 17.8217C9.65417 18.455 8.78667 18.4858 8.44667 17.9167L8.3975 17.8217L7.52917 15.8675C6.77094 14.1617 5.51001 12.7281 3.915 11.7583L3.64667 11.6008L2.105 10.7342C1.98244 10.6656 1.879 10.5674 1.80411 10.4485C1.72922 10.3297 1.68525 10.194 1.67622 10.0539C1.66719 9.9137 1.69338 9.7735 1.75241 9.64604C1.81144 9.51859 1.90142 9.40794 2.01417 9.32417L2.10417 9.26583L3.64667 8.39917C5.27385 7.48387 6.58276 6.09355 7.39833 4.41417L7.52917 4.1325L8.3975 2.17833ZM16.0175 1.7675C16.4312 2.70717 17.1366 3.48855 18.0292 3.99583C18.1625 4.07083 18.1625 4.2625 18.0292 4.3375C17.1361 4.84486 16.4304 5.62657 16.0167 6.56667C16.0008 6.60206 15.9751 6.63211 15.9426 6.6532C15.91 6.67429 15.8721 6.68551 15.8333 6.68551C15.7946 6.68551 15.7566 6.67429 15.7241 6.6532C15.6916 6.63211 15.6658 6.60206 15.65 6.56667C15.2361 5.62688 14.5304 4.84548 13.6375 4.33833C13.6074 4.32114 13.5823 4.29628 13.5649 4.26628C13.5474 4.23628 13.5383 4.2022 13.5383 4.1675C13.5383 4.1328 13.5474 4.09872 13.5649 4.06872C13.5823 4.03872 13.6074 4.01386 13.6375 3.99667C14.5307 3.48909 15.2364 2.70708 15.65 1.76667C15.6658 1.73128 15.6916 1.70122 15.7241 1.68014C15.7566 1.65905 15.7946 1.64783 15.8333 1.64783C15.8721 1.64783 15.91 1.65905 15.9426 1.68014C15.9751 1.70122 16.0008 1.73128 16.0167 1.76667L16.0175 1.7675Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function AddIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        d="M9.16667 16.6667C9.16667 16.8877 9.25446 17.0996 9.41074 17.2559C9.56702 17.4122 9.77899 17.5 10 17.5C10.221 17.5 10.433 17.4122 10.5893 17.2559C10.7455 17.0996 10.8333 16.8877 10.8333 16.6667V10.8333H16.6667C16.8877 10.8333 17.0996 10.7455 17.2559 10.5893C17.4122 10.433 17.5 10.221 17.5 10C17.5 9.77899 17.4122 9.56702 17.2559 9.41074C17.0996 9.25446 16.8877 9.16667 16.6667 9.16667H10.8333V3.33333C10.8333 3.11232 10.7455 2.90036 10.5893 2.74408C10.433 2.5878 10.221 2.5 10 2.5C9.77899 2.5 9.56702 2.5878 9.41074 2.74408C9.25446 2.90036 9.16667 3.11232 9.16667 3.33333V9.16667H3.33333C3.11232 9.16667 2.90036 9.25446 2.74408 9.41074C2.5878 9.56702 2.5 9.77899 2.5 10C2.5 10.221 2.5878 10.433 2.74408 10.5893C2.90036 10.7455 3.11232 10.8333 3.33333 10.8333H9.16667V16.6667Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function DocumentIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 1.66667V7.08333C10 7.41485 10.1317 7.7328 10.3661 7.96722C10.6005 8.20164 10.9185 8.33333 11.25 8.33333H16.6667V16.6667C16.6667 17.1087 16.4911 17.5326 16.1785 17.8452C15.8659 18.1577 15.442 18.3333 15 18.3333H5C4.55797 18.3333 4.13405 18.1577 3.82149 17.8452C3.50893 17.5326 3.33333 17.1087 3.33333 16.6667V3.33333C3.33333 2.89131 3.50893 2.46738 3.82149 2.15482C4.13405 1.84226 4.55797 1.66667 5 1.66667H10ZM12.5 12.5H7.5C7.27899 12.5 7.06702 12.5878 6.91074 12.7441C6.75446 12.9004 6.66667 13.1123 6.66667 13.3333C6.66667 13.5543 6.75446 13.7663 6.91074 13.9226C7.06702 14.0789 7.27899 14.1667 7.5 14.1667H12.5C12.721 14.1667 12.933 14.0789 13.0893 13.9226C13.2455 13.7663 13.3333 13.5543 13.3333 13.3333C13.3333 13.1123 13.2455 12.9004 13.0893 12.7441C12.933 12.5878 12.721 12.5 12.5 12.5ZM8.33333 9.16667H7.5C7.27899 9.16667 7.06702 9.25446 6.91074 9.41074C6.75446 9.56702 6.66667 9.77899 6.66667 10C6.66667 10.221 6.75446 10.433 6.91074 10.5893C7.06702 10.7455 7.27899 10.8333 7.5 10.8333H8.33333C8.55435 10.8333 8.76631 10.7455 8.92259 10.5893C9.07887 10.433 9.16667 10.221 9.16667 10C9.16667 9.77899 9.07887 9.56702 8.92259 9.41074C8.76631 9.25446 8.55435 9.16667 8.33333 9.16667ZM11.6667 1.7025C11.9824 1.76946 12.2719 1.92666 12.5 2.155L16.1783 5.83333C16.4067 6.06144 16.5639 6.35093 16.6308 6.66667H11.6667V1.7025Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function CalendarIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 14 14" className={cn('size-3.5', className)} {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9.33333 1.75C9.48804 1.75 9.63642 1.81146 9.74581 1.92085C9.85521 2.03025 9.91667 2.17862 9.91667 2.33333V2.91667H11.0833C11.3928 2.91667 11.6895 3.03958 11.9083 3.25838C12.1271 3.47717 12.25 3.77391 12.25 4.08333V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V4.08333C1.75 3.77391 1.87292 3.47717 2.09171 3.25838C2.3105 3.03958 2.60725 2.91667 2.91667 2.91667H4.08333V2.33333C4.08333 2.17862 4.14479 2.03025 4.25419 1.92085C4.36358 1.81146 4.51196 1.75 4.66667 1.75C4.82138 1.75 4.96975 1.81146 5.07915 1.92085C5.18854 2.03025 5.25 2.17862 5.25 2.33333V2.91667H8.75V2.33333C8.75 2.17862 8.81146 2.03025 8.92085 1.92085C9.03025 1.81146 9.17862 1.75 9.33333 1.75ZM4.6725 9.33333H4.66667C4.51799 9.3335 4.37498 9.39043 4.26687 9.49249C4.15876 9.59456 4.0937 9.73406 4.08498 9.88248C4.07627 10.0309 4.12456 10.1771 4.21999 10.2911C4.31542 10.4051 4.45078 10.4784 4.59842 10.4959L4.6725 10.5C4.82721 10.5 4.97558 10.4385 5.08498 10.3291C5.19438 10.2197 5.25583 10.0714 5.25583 9.91667C5.25583 9.76196 5.19438 9.61358 5.08498 9.50419C4.97558 9.39479 4.82721 9.33333 4.6725 9.33333ZM7.00583 9.33333H7C6.85132 9.3335 6.70831 9.39043 6.6002 9.49249C6.49209 9.59456 6.42703 9.73406 6.41832 9.88248C6.4096 10.0309 6.45789 10.1771 6.55332 10.2911C6.64875 10.4051 6.78411 10.4784 6.93175 10.4959L7.00583 10.5C7.16054 10.5 7.30892 10.4385 7.41831 10.3291C7.52771 10.2197 7.58917 10.0714 7.58917 9.91667C7.58917 9.76196 7.52771 9.61358 7.41831 9.50419C7.30892 9.39479 7.16054 9.33333 7.00583 9.33333ZM9.33917 9.33333H9.33333C9.18465 9.3335 9.04165 9.39043 8.93353 9.49249C8.82542 9.59456 8.76036 9.73406 8.75165 9.88248C8.74294 10.0309 8.79123 10.1771 8.88665 10.2911C8.98208 10.4051 9.11744 10.4784 9.26508 10.4959L9.33917 10.5C9.49388 10.5 9.64225 10.4385 9.75164 10.3291C9.86104 10.2197 9.9225 10.0714 9.9225 9.91667C9.9225 9.76196 9.86104 9.61358 9.75164 9.50419C9.64225 9.39479 9.49388 9.33333 9.33917 9.33333ZM4.6725 7H4.66667C4.51799 7.00016 4.37498 7.0571 4.26687 7.15916C4.15876 7.26123 4.0937 7.40072 4.08498 7.54915C4.07627 7.69757 4.12456 7.84372 4.21999 7.95774C4.31542 8.07175 4.45078 8.14502 4.59842 8.16258L4.6725 8.16667C4.82721 8.16667 4.97558 8.10521 5.08498 7.99581C5.19438 7.88642 5.25583 7.73804 5.25583 7.58333C5.25583 7.42862 5.19438 7.28025 5.08498 7.17085C4.97558 7.06146 4.82721 7 4.6725 7ZM7.00583 7H7C6.85132 7.00016 6.70831 7.0571 6.6002 7.15916C6.49209 7.26123 6.42703 7.40072 6.41832 7.54915C6.4096 7.69757 6.45789 7.84372 6.55332 7.95774C6.64875 8.07175 6.78411 8.14502 6.93175 8.16258L7.00583 8.16667C7.16054 8.16667 7.30892 8.10521 7.41831 7.99581C7.52771 7.88642 7.58917 7.73804 7.58917 7.58333C7.58917 7.42862 7.52771 7.28025 7.41831 7.17085C7.30892 7.06146 7.16054 7 7.00583 7ZM9.33917 7H9.33333C9.18465 7.00016 9.04165 7.0571 8.93353 7.15916C8.82542 7.26123 8.76036 7.40072 8.75165 7.54915C8.74294 7.69757 8.79123 7.84372 8.88665 7.95774C8.98208 8.07175 9.11744 8.14502 9.26508 8.16258L9.33917 8.16667C9.49388 8.16667 9.64225 8.10521 9.75164 7.99581C9.86104 7.88642 9.9225 7.73804 9.9225 7.58333C9.9225 7.42862 9.86104 7.28025 9.75164 7.17085C9.64225 7.06146 9.49388 7 9.33917 7ZM11.0833 4.08333H2.91667V5.25H11.0833V4.08333Z"
        fill="currentColor"
      />
    </Icon>
  )
}

export function CopyIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.5 1.66667C7.05797 1.66667 6.63405 1.84226 6.32149 2.15482C6.00893 2.46738 5.83333 2.89131 5.83333 3.33333V5H7.5V3.33333H16.6667V12.5H15V14.1667H16.6667C17.1087 14.1667 17.5326 13.9911 17.8452 13.6785C18.1577 13.366 18.3333 12.942 18.3333 12.5V3.33333C18.3333 2.89131 18.1577 2.46738 17.8452 2.15482C17.5326 1.84226 17.1087 1.66667 16.6667 1.66667H7.5ZM3.33333 5.83333C2.89131 5.83333 2.46738 6.00893 2.15482 6.32149C1.84226 6.63405 1.66667 7.05797 1.66667 7.5V16.6667C1.66667 17.1087 1.84226 17.5326 2.15482 17.8452C2.46738 18.1577 2.89131 18.3333 3.33333 18.3333H12.5C12.942 18.3333 13.366 18.1577 13.6785 17.8452C13.9911 17.5326 14.1667 17.1087 14.1667 16.6667V7.5C14.1667 7.05797 13.9911 6.63405 13.6785 6.32149C13.366 6.00893 12.942 5.83333 12.5 5.83333H3.33333Z"
      />
    </Icon>
  )
}

export function EyeIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.33333 10.0008C3.33583 9.9875 3.3475 9.91417 3.4125 9.77C3.48417 9.61083 3.6 9.41083 3.76583 9.18C4.0975 8.71917 4.59333 8.18667 5.22 7.68167C6.48083 6.66333 8.17667 5.83333 10 5.83333C11.8233 5.83333 13.5192 6.66333 14.78 7.68C15.4067 8.185 15.9025 8.7175 16.2342 9.17833C16.4008 9.40917 16.5158 9.60917 16.5875 9.76833C16.6525 9.9125 16.6642 9.98583 16.6667 9.99917V10C16.6642 10.0133 16.6525 10.0867 16.5875 10.2308C16.4891 10.4385 16.3708 10.6361 16.2342 10.8208C15.9025 11.2817 15.4067 11.8142 14.78 12.3192C13.52 13.3367 11.8242 14.1667 10 14.1667C8.17667 14.1667 6.48083 13.3367 5.22 12.32C4.59333 11.815 4.0975 11.2825 3.76583 10.8217C3.62909 10.637 3.51075 10.4394 3.4125 10.2317C3.37608 10.1585 3.34946 10.0809 3.33333 10.0008ZM10 4.16667C7.68083 4.16667 5.62667 5.21167 4.17417 6.3825C3.44333 6.97083 2.84083 7.61083 2.41333 8.205C2.2109 8.47999 2.03642 8.77451 1.8925 9.08417C1.76917 9.35833 1.66667 9.67583 1.66667 10C1.66667 10.3233 1.76917 10.6425 1.89167 10.9158C2.02083 11.2008 2.2 11.4992 2.41333 11.795C2.84083 12.3892 3.44333 13.0283 4.17417 13.6175C5.62667 14.7883 7.68083 15.8333 10 15.8333C12.3192 15.8333 14.3733 14.7883 15.8258 13.6175C16.5567 13.0292 17.1592 12.3892 17.5867 11.795C17.8008 11.4983 17.9792 11.2008 18.1075 10.9158C18.2308 10.6425 18.3333 10.3242 18.3333 10C18.3333 9.67667 18.2308 9.3575 18.1083 9.08417C17.9639 8.77458 17.7892 8.48008 17.5867 8.205C17.1592 7.61083 16.5567 6.97167 15.8258 6.3825C14.3733 5.21167 12.3192 4.16667 10 4.16667ZM9.16667 10C9.16667 9.77899 9.25446 9.56702 9.41074 9.41074C9.56702 9.25446 9.77899 9.16667 10 9.16667C10.221 9.16667 10.433 9.25446 10.5893 9.41074C10.7455 9.56702 10.8333 9.77899 10.8333 10C10.8333 10.221 10.7455 10.433 10.5893 10.5893C10.433 10.7455 10.221 10.8333 10 10.8333C9.77899 10.8333 9.56702 10.7455 9.41074 10.5893C9.25446 10.433 9.16667 10.221 9.16667 10ZM10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5Z"
      />
    </Icon>
  )
}

export function EyeOffIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 228 228" className={className} {...props}>
      <path
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M38 114.01c.029-.152.161-.989.903-2.632.816-1.815 2.137-4.095 4.028-6.726 3.78-5.254 9.433-11.324 16.577-17.081C73.882 75.962 93.214 66.5 114 66.5s40.119 9.462 54.492 21.052c7.144 5.757 12.797 11.827 16.578 17.081 1.9 2.631 3.211 4.912 4.028 6.726.741 1.644.874 2.479.902 2.631-.028.152-.161.998-.902 2.642a40.5 40.5 0 0 1-4.028 6.725c-3.781 5.254-9.434 11.324-16.578 17.081-14.364 11.6-33.696 21.062-54.492 21.062-20.786 0-40.118-9.462-54.492-21.052-7.144-5.757-12.797-11.828-16.577-17.081a40 40 0 0 1-4.028-6.726A10.6 10.6 0 0 1 38 114.01m76-66.51c-26.439 0-49.856 11.913-66.414 25.26-8.332 6.707-15.2 14.003-20.074 20.777a58.5 58.5 0 0 0-5.937 10.022C20.169 106.685 19 110.304 19 114c0 3.686 1.169 7.325 2.565 10.441 1.473 3.249 3.515 6.65 5.947 10.022 4.874 6.774 11.742 14.06 20.074 20.776C64.144 168.587 87.562 180.5 114 180.5s49.856-11.913 66.414-25.261c8.332-6.707 15.201-14.002 20.074-20.776 2.442-3.382 4.474-6.773 5.937-10.022C207.831 121.325 209 117.695 209 114c0-3.686-1.169-7.325-2.565-10.441a59 59 0 0 0-5.947-10.022c-4.873-6.774-11.742-14.06-20.074-20.777C163.856 59.413 140.439 47.5 114 47.5m-9.5 66.5a9.5 9.5 0 0 1 2.782-6.718 9.503 9.503 0 0 1 13.436 0 9.503 9.503 0 0 1 0 13.436 9.503 9.503 0 0 1-13.436 0A9.5 9.5 0 0 1 104.5 114m9.5-28.5a28.5 28.5 0 1 0 0 56.998 28.5 28.5 0 0 0 0-56.998"
      />
      <path fill="currentColor" d="M35.5 35 17 49.5 193 192l18.5-15z" />
    </Icon>
  )
}

export function InfoIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fill="currentColor"
        d="M10 1.66667C14.6025 1.66667 18.3333 5.3975 18.3333 10C18.3333 14.6025 14.6025 18.3333 10 18.3333C5.3975 18.3333 1.66667 14.6025 1.66667 10C1.66667 5.3975 5.3975 1.66667 10 1.66667ZM10 3.33333C8.23189 3.33333 6.5362 4.03571 5.28595 5.28595C4.03571 6.5362 3.33333 8.23189 3.33333 10C3.33333 11.7681 4.03571 13.4638 5.28595 14.714C6.5362 15.9643 8.23189 16.6667 10 16.6667C11.7681 16.6667 13.4638 15.9643 14.714 14.714C15.9643 13.4638 16.6667 11.7681 16.6667 10C16.6667 8.23189 15.9643 6.5362 14.714 5.28595C13.4638 4.03571 11.7681 3.33333 10 3.33333ZM9.99167 8.33333C10.4567 8.33333 10.8333 8.71 10.8333 9.175V13.445C10.9922 13.5367 11.1163 13.6783 11.1865 13.8478C11.2567 14.0173 11.269 14.2052 11.2216 14.3824C11.1741 14.5595 11.0695 14.7161 10.9239 14.8278C10.7784 14.9395 10.6001 15 10.4167 15H10.0083C9.8978 15 9.78836 14.9782 9.68624 14.9359C9.58413 14.8936 9.49134 14.8316 9.41318 14.7535C9.33503 14.6753 9.27303 14.5825 9.23073 14.4804C9.18844 14.3783 9.16667 14.2689 9.16667 14.1583V10C8.94565 10 8.73369 9.9122 8.57741 9.75592C8.42113 9.59964 8.33333 9.38768 8.33333 9.16667C8.33333 8.94565 8.42113 8.73369 8.57741 8.57741C8.73369 8.42113 8.94565 8.33333 9.16667 8.33333H9.99167ZM10 5.83333C10.221 5.83333 10.433 5.92113 10.5893 6.07741C10.7455 6.23369 10.8333 6.44565 10.8333 6.66667C10.8333 6.88768 10.7455 7.09964 10.5893 7.25592C10.433 7.4122 10.221 7.5 10 7.5C9.77899 7.5 9.56702 7.4122 9.41074 7.25592C9.25446 7.09964 9.16667 6.88768 9.16667 6.66667C9.16667 6.44565 9.25446 6.23369 9.41074 6.07741C9.56702 5.92113 9.77899 5.83333 10 5.83333Z"
      />
    </Icon>
  )
}

export function DownloadIcon({ className, ...props }: IconProps) {
  return (
    <Icon
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      {...props}
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="7 10 12 15 17 10" />
      <line x1="12" y1="15" x2="12" y2="3" />
    </Icon>
  )
}

export function CheckIcon({ className, ...props }: IconProps) {
  return (
    <Icon viewBox="0 0 448 512" fill="currentColor" className={className} {...props}>
      <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
    </Icon>
  )
}

export function PackageIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fill="currentColor"
        d="M17.3042 6.65167L17.3225 6.81L17.3283 6.97167V13.0283C17.3283 13.3688 17.2447 13.7041 17.0851 14.0048C16.9254 14.3055 16.6945 14.5625 16.4125 14.7533L16.2875 14.8325L11.0417 17.8608L10.9383 17.9167L10.8333 17.9667V10.475L17.3042 6.65167ZM2.69583 6.65167L9.16667 10.4758V17.9658C9.09532 17.9347 9.02577 17.8997 8.95833 17.8608L3.71333 14.8325C3.39663 14.6497 3.13364 14.3867 2.95079 14.07C2.76794 13.7533 2.67168 13.394 2.67167 13.0283V6.97167C2.67167 6.86333 2.68 6.75667 2.69667 6.65167H2.69583ZM11.0417 2.13917L16.2867 5.1675C16.3283 5.1925 16.37 5.2175 16.41 5.24417L10 9.03333L3.59 5.24333C3.63019 5.21632 3.67133 5.19075 3.71333 5.16667L8.95833 2.13833C9.27504 1.95548 9.6343 1.85922 10 1.85922C10.3657 1.85922 10.725 1.95632 11.0417 2.13917Z"
      />
    </Icon>
  )
}

export function ArrowRightIcon({ className, ...props }: IconProps) {
  return (
    <Icon className={className} {...props}>
      <path
        fill="currentColor"
        d="M12.2558 4.69667L16.97 9.41083C17.1262 9.56711 17.214 9.77903 17.214 10C17.214 10.221 17.1262 10.4329 16.97 10.5892L12.2558 15.3033C12.0987 15.4551 11.8882 15.5391 11.6697 15.5372C11.4512 15.5353 11.2422 15.4477 11.0877 15.2932C10.9331 15.1387 10.8455 14.9297 10.8436 14.7112C10.8417 14.4927 10.9257 14.2822 11.0775 14.125L14.3692 10.8333H3.33333C3.11232 10.8333 2.90036 10.7455 2.74408 10.5893C2.5878 10.433 2.5 10.221 2.5 10C2.5 9.77899 2.5878 9.56702 2.74408 9.41074C2.90036 9.25446 3.11232 9.16667 3.33333 9.16667H14.3692L11.0775 5.875C10.9979 5.79813 10.9344 5.70617 10.8907 5.6045C10.8471 5.50283 10.8241 5.39348 10.8231 5.28283C10.8222 5.17218 10.8432 5.06245 10.8851 4.96004C10.927 4.85762 10.9889 4.76458 11.0672 4.68634C11.1454 4.60809 11.2385 4.54622 11.3409 4.50432C11.4433 4.46241 11.553 4.44133 11.6637 4.44229C11.7743 4.44325 11.8837 4.46624 11.9853 4.50992C12.087 4.55359 12.179 4.61707 12.2558 4.69667Z"
      />
    </Icon>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/logo.tsx`

```tsx
import type { SVGProps } from 'react'
import { cn } from '@/lib/utils'

export const AgndexLogo = ({ className, ...props }: SVGProps<SVGSVGElement>) => (
  <svg
    width={24}
    height={24}
    viewBox="0 0 200 200"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={cn('size-6', className)}
    {...props}
  >
    <g clipPath="url(#clip0_agndex_logo)">
      <path
        d="M3.35168e-06 8.37315e-07C-0.00685864 26.518 10.5231 51.9526 29.2735 70.7091C48.0239 89.4656 73.459 100.008 99.9838 100.016V8.37315e-07H3.35168e-06ZM99.9838 100.016H200V8.37315e-07C186.863 -0.00169886 173.854 2.58433 161.717 7.61033C149.581 12.6363 138.553 20.0038 129.265 29.2918C119.977 38.5799 112.61 49.6065 107.586 61.7416C102.562 73.8767 99.9787 86.8826 99.9838 100.016ZM99.9838 100.016V200H200C200.001 186.869 197.414 173.867 192.388 161.735C187.362 149.604 179.995 138.581 170.707 129.297C161.42 120.012 150.394 112.647 138.259 107.623C126.124 102.599 113.118 100.014 99.9838 100.016ZM99.9838 100.016H3.35168e-06V200C26.5203 199.995 51.9525 189.458 70.7027 170.708C89.453 151.958 99.9855 126.53 99.9838 100.016Z"
        fill="url(#paint0_agndex_logo)"
      />
    </g>
    <defs>
      <radialGradient
        id="paint0_agndex_logo"
        cx="100"
        cy="100"
        r="120"
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="var(--primary)" />
        <stop offset="1" stopColor="color-mix(in oklab, var(--primary) 70%, white)" />
      </radialGradient>
      <clipPath id="clip0_agndex_logo">
        <rect width="200" height="200" fill="white" transform="translate(200) rotate(90)" />
      </clipPath>
    </defs>
  </svg>
)
```

### `src/components/dashboards/agndex-dashboard/components/agndex/navigation.tsx`

```tsx
import {
  createContext,
  useContext,
  useMemo,
  useState,
  type AnchorHTMLAttributes,
  type MouseEvent,
  type ReactNode,
} from 'react'

type DashboardNavigation = {
  pathname: string
  navigate: (pathname: string) => void
}

const DashboardNavigationContext = createContext<DashboardNavigation | null>(
  null,
)

export function DashboardNavigationProvider({
  children,
}: {
  children: ReactNode
}) {
  const [pathname, setPathname] = useState('/')
  const value = useMemo(
    () => ({ pathname, navigate: setPathname }),
    [pathname],
  )

  return (
    <DashboardNavigationContext.Provider value={value}>
      {children}
    </DashboardNavigationContext.Provider>
  )
}

export function useDashboardNavigation() {
  const context = useContext(DashboardNavigationContext)

  if (!context) {
    throw new Error(
      'useDashboardNavigation must be used within DashboardNavigationProvider',
    )
  }

  return context
}

export function DashboardLink({
  href,
  onClick,
  ...props
}: AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
  const { navigate } = useDashboardNavigation()

  function handleClick(event: MouseEvent<HTMLAnchorElement>) {
    onClick?.(event)

    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.ctrlKey ||
      event.shiftKey ||
      event.altKey
    ) {
      return
    }

    event.preventDefault()
    navigate(href)
  }

  return <a href={href} onClick={handleClick} {...props} />
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/sidebar.tsx`

```tsx
import {
  BadgeCheckIcon,
  ChevronsUpDownIcon,
  ShieldIcon,
  UserPlusIcon,
  UsersIcon,
} from 'lucide-react'
import { AgndexLogo } from './logo'
import { DashboardLink, useDashboardNavigation } from './navigation'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'
import {
  currentUser,
  footerNavigation,
  logoutItem,
  navigationGroups,
  type NavigationItem,
} from '../../data'

function NavItem({ item }: { item: NavigationItem }) {
  const { pathname } = useDashboardNavigation()
  const { isMobile, setOpenMobile } = useSidebar()
  const active =
    item.href === '/'
      ? pathname === item.href
      : pathname === item.href || pathname.startsWith(`${item.href}/`)
  const className =
    'gap-2.5 rounded-lg px-3 py-2 text-smd tracking-tight text-(--sidebar-muted-foreground) opacity-80 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground aria-[current=page]:opacity-100'

  function handleClick() {
    if (isMobile) setOpenMobile(false)
  }

  return (
    <SidebarMenuButton asChild className="h-auto p-0">
      {item.external ? (
        <a
          href={item.href}
          target="_blank"
          rel="noreferrer"
          onClick={handleClick}
          className={className}
        >
          <item.icon />
          <span>{item.name}</span>
        </a>
      ) : (
        <DashboardLink
          href={item.href}
          aria-current={active ? 'page' : undefined}
          onClick={handleClick}
          className={className}
        >
          <item.icon />
          <span>{item.name}</span>
        </DashboardLink>
      )}
    </SidebarMenuButton>
  )
}

export function DashboardSidebar() {
  return (
    <Sidebar className="border-none h-full">
      <SidebarHeader className="flex-row items-center justify-between gap-2 px-4 pt-6 pb-0">
        <div className="flex items-center gap-2">
          <AgndexLogo className="size-5.5" />
          <span className="text-xl font-semibold tracking-tight">
            AGNDEX
          </span>
        </div>
        <span className="rounded-md bg-(--sidebar-badge) px-2 py-1.5 text-xxs text-sidebar-foreground/70">
          Developer Portal
        </span>
      </SidebarHeader>

      <SidebarContent className="mt-8 gap-8 px-4">
        {navigationGroups.map((group) => (
          <SidebarGroup key={group.label} className="p-0">
            <SidebarGroupLabel className="mb-2 h-auto px-0 py-2 text-xsm text-(--sidebar-muted)">
              {group.label}
            </SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu className="gap-1.5">
                {group.items.map((item) => (
                  <SidebarMenuItem key={item.name}>
                    <NavItem item={item} />
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>

      <SidebarFooter className="px-4 pb-6">
        <SidebarMenu className="gap-1.5">
          {footerNavigation.map((item) => (
            <SidebarMenuItem key={item.name}>
              <NavItem item={item} />
            </SidebarMenuItem>
          ))}
          <SidebarMenuItem>
            <SidebarMenuButton
              type="button"
              className="h-auto gap-2.5 rounded-lg px-3 py-2 text-smd tracking-tight text-(--sidebar-muted-foreground) opacity-80 hover:bg-destructive/10 hover:text-destructive hover:opacity-100 active:bg-destructive/10 active:text-destructive"
            >
              <logoutItem.icon className="-rotate-90" />
              <span>{logoutItem.name}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <DropdownMenu>
              <DropdownMenuTrigger className="peer/menu-button flex h-auto w-full items-center gap-2.5 overflow-hidden rounded-lg px-3 py-2 text-left text-smd tracking-tight ring-sidebar-ring outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0">
                <Avatar size="sm">
                  <AvatarImage src={currentUser.avatar} alt={currentUser.name} />
                  <AvatarFallback>{currentUser.initials}</AvatarFallback>
                </Avatar>
                <span className="flex-1 font-medium tracking-tight">
                  {currentUser.name}
                </span>
                <ChevronsUpDownIcon className="text-sidebar-foreground/50" />
              </DropdownMenuTrigger>
              <DropdownMenuContent side="top" className="agndex-dashboard w-64">
                <DropdownMenuLabel className="font-normal">
                  <div className="flex items-center gap-2.5">
                    <Avatar size="sm">
                      <AvatarImage src={currentUser.avatar} alt={currentUser.name} />
                      <AvatarFallback>{currentUser.initials}</AvatarFallback>
                    </Avatar>
                    <div className="leading-tight">
                      <p className="text-sm font-medium text-foreground">
                        {currentUser.name}
                      </p>
                      <p>{currentUser.email}</p>
                    </div>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <BadgeCheckIcon />
                    Account
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <UsersIcon />
                    Team
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <ShieldIcon />
                    Security
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <UserPlusIcon />
                    Invite members
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/theme-provider.tsx`

```tsx
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from 'react'

export type Theme = 'dark' | 'light' | 'system'

type ThemeProviderProps = {
  children: ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

type ThemeProviderState = {
  theme: Theme
  resolvedTheme: 'dark' | 'light'
  setTheme: (theme: Theme) => void
}

const ThemeProviderContext = createContext<ThemeProviderState | null>(null)

function getSystemTheme(): 'dark' | 'light' {
  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark'
    : 'light'
}

export function ThemeProvider({
  children,
  defaultTheme = 'system',
  storageKey = 'agndex-theme',
}: ThemeProviderProps) {
  const [theme, setThemeState] = useState<Theme>(() => {
    if (typeof window === 'undefined') return defaultTheme

    const stored = localStorage.getItem(storageKey)
    if (stored === 'light' || stored === 'dark' || stored === 'system') {
      return stored
    }

    return defaultTheme
  })

  const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(() => {
    if (typeof window === 'undefined') return 'light'
    return getSystemTheme()
  })

  const resolvedTheme = theme === 'system' ? systemTheme : theme

  useEffect(() => {
    const root = document.documentElement
    root.classList.remove('light', 'dark')
    root.classList.add(resolvedTheme)
  }, [resolvedTheme])

  useEffect(() => {
    const media = window.matchMedia('(prefers-color-scheme: dark)')
    const onChange = () => setSystemTheme(getSystemTheme())
    media.addEventListener('change', onChange)
    return () => media.removeEventListener('change', onChange)
  }, [])

  const setTheme = useCallback(
    (nextTheme: Theme) => {
      localStorage.setItem(storageKey, nextTheme)
      setThemeState(nextTheme)
    },
    [storageKey],
  )

  const value = useMemo(
    () => ({ theme, resolvedTheme, setTheme }),
    [theme, resolvedTheme, setTheme],
  )

  return (
    <ThemeProviderContext.Provider value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

export function useTheme() {
  const context = useContext(ThemeProviderContext)

  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider.')
  }

  return context
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/theme-toggle.tsx`

```tsx
import type { ComponentType, SVGProps } from 'react'
import { MonitorIcon, MoonIcon, SunIcon } from './icons'
import { useTheme, type Theme } from './theme-provider'
import { buttonVariants } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'

type ThemeIcon = ComponentType<SVGProps<SVGSVGElement>>

const themes: { value: Theme; label: string; icon: ThemeIcon }[] = [
  { value: 'light', label: 'Light', icon: SunIcon },
  { value: 'dark', label: 'Dark', icon: MoonIcon },
  { value: 'system', label: 'System', icon: MonitorIcon },
]

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const ActiveIcon =
    themes.find((item) => item.value === theme)?.icon ?? MonitorIcon

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className={cn(
          buttonVariants({ variant: 'ghost', size: 'icon' }),
          'size-6 text-muted-foreground',
        )}
        aria-label="Theme"
      >
        <ActiveIcon />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="agndex-dashboard w-36">
        <DropdownMenuRadioGroup
          value={theme}
          onValueChange={(value) => setTheme(value as Theme)}
        >
          {themes.map(({ value, label, icon: Icon }) => (
            <DropdownMenuRadioItem
              key={value}
              value={value}
              className="font-normal text-muted-foreground data-[state=checked]:font-medium data-[state=checked]:text-foreground"
            >
              <Icon className="size-4" />
              {label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

### `src/components/dashboards/agndex-dashboard/components/agndex/topbar.tsx`

```tsx
import { useState } from 'react'
import {
  CaretDownIcon,
  ProjectIcon,
} from './icons'
import { ThemeToggle } from './theme-toggle'
import { useDashboardNavigation } from './navigation'
import { buttonVariants } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { navigationGroups, projects, type Project } from '../../data'
import { cn } from '@/lib/utils'

const navigationItems = navigationGroups.flatMap((group) => group.items)

export function DashboardTopbar() {
  const { pathname } = useDashboardNavigation()
  const [selectedProject, setSelectedProject] = useState<Project>(projects[0])

  const currentPage =
    navigationItems.find(({ href }) =>
      href === '/'
        ? pathname === href
        : pathname === href || pathname.startsWith(`${href}/`),
    ) ?? navigationItems[0]

  return (
    <header className="sticky top-0 z-50 flex h-14 items-center justify-between gap-2 px-4 md:h-16 md:px-6">
      <div className="flex items-center gap-1">
        <SidebarTrigger className="size-9 md:hidden [&_svg]:size-5!" />
        <nav className="hidden items-center gap-1 text-base text-muted-foreground md:flex">
          <span>Agndex</span>
          <span className="text-border">|</span>
          <span>{selectedProject.name}</span>
          <span className="text-border">|</span>
          <span className="font-medium text-foreground/80">{currentPage.name}</span>
        </nav>
      </div>

      <div className="flex items-center gap-3 md:gap-5">
        <DropdownMenu>
          <DropdownMenuTrigger
            className={cn(
              buttonVariants({ variant: 'secondary' }),
              'h-10 max-w-56 justify-between gap-2 px-3 data-[state=open]:[&>svg]:rotate-180 md:w-56',
            )}
          >
            <span className="flex items-center gap-1.5 overflow-hidden">
              <ProjectIcon />
              <span className="truncate">{selectedProject.name}</span>
            </span>
            <CaretDownIcon className="transition-transform" />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="agndex-dashboard w-56">
            <DropdownMenuRadioGroup
              value={selectedProject.id}
              onValueChange={(id) => {
                const project = projects.find((item) => item.id === id)
                if (project) setSelectedProject(project)
              }}
            >
              {projects.map((project) => (
                <DropdownMenuRadioItem
                  key={project.id}
                  value={project.id}
                  className="font-normal text-muted-foreground data-[state=checked]:font-medium data-[state=checked]:text-foreground"
                >
                  {project.name}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuContent>
        </DropdownMenu>

        <ThemeToggle />
      </div>
    </header>
  )
}
```

### `src/components/dashboards/agndex-dashboard/dashboard-layout.tsx`

```tsx
import type { CSSProperties, ReactNode } from 'react'
import { DashboardSidebar } from './components/agndex/sidebar'
import { DashboardTopbar } from './components/agndex/topbar'
import { SidebarProvider } from '@/components/ui/sidebar'
import './dashboard.css'

type DashboardLayoutProps = {
  children: ReactNode
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <SidebarProvider
      open
      className="agndex-dashboard h-svh overflow-hidden no-scrollbar"
      style={
        {
          '--sidebar-width': '17.25rem',
        } as CSSProperties
      }
    >
      <DashboardSidebar />

      <main className="flex-1 overflow-y-auto md:bg-sidebar md:p-2">
        <div className="flex h-full flex-col overflow-hidden rounded-xl bg-background">
          <DashboardTopbar />
          <div className="flex-1 overflow-y-auto">{children}</div>
        </div>
      </main>
    </SidebarProvider>
  )
}
```

### `src/components/dashboards/agndex-dashboard/dashboard.css`

```css
.agndex-dashboard,
body:has(.agndex-dashboard) [data-slot="sidebar"][data-mobile="true"],
body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"],
body:has(.agndex-dashboard) [data-slot="sheet-content"],
body:has(.agndex-dashboard) [data-slot="tooltip-content"] {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.97 0 0);
  --card-foreground: oklch(0.145 0 0);
  --card-hover: oklch(0.94 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.68 0.17 336.255);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.574 0.232 29.36);
  --info: oklch(0.591 0.249 293.89);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --input-addon-foreground: oklch(0.777 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.68 0.17 336.255);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.94 0 0);
  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-muted: oklch(0.556 0 0);
  --sidebar-muted-foreground: oklch(0.45 0 0);
  --sidebar-badge: oklch(0.93 0 0);
}

.agndex-dashboard {
  background-color: var(--background);
  color: var(--foreground);
}

.agndex-dashboard.dark,
.dark .agndex-dashboard,
.dark body:has(.agndex-dashboard) [data-slot="sidebar"][data-mobile="true"],
.dark body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"],
.dark body:has(.agndex-dashboard) [data-slot="sheet-content"],
.dark body:has(.agndex-dashboard) [data-slot="tooltip-content"] {
  --background: oklch(0.244 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.281 0 0);
  --card-foreground: oklch(0.985 0 0);
  --card-hover: oklch(0.325 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.711 0.165 336.255);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.574 0.232 29.36);
  --info: oklch(0.591 0.249 293.89);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --input-addon-foreground: oklch(0.777 0 0);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.173 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.711 0.165 336.255);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.325 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --sidebar-muted: oklch(0.535 0 0);
  --sidebar-muted-foreground: oklch(0.725 0 0);
  --sidebar-badge: oklch(0.244 0 0);
}

body:has(.agndex-dashboard) [data-slot='tooltip-content'] {
  background-color: var(--foreground) !important;
  color: var(--background) !important;
}

body:has(.agndex-dashboard) [data-slot='tooltip-content']>svg {
  background-color: var(--foreground) !important;
  fill: var(--foreground) !important;
}

/* custom classes */
.no-scrollbar,
.no-scrollbar * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar,
.no-scrollbar *::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar-x {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.custom-scrollbar-x::-webkit-scrollbar {
  height: 0.375rem;
}

.custom-scrollbar-x::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-x::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 9999px;
}

.custom-scrollbar-x::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
}

.text-xxs {
  font-size: 0.625rem;
}

.text-xsm {
  font-size: 0.8125rem;
}

.text-smd {
  font-size: 0.9375rem;
}

/* platform host lacks --color-info from agndex index.css @theme */
.text-info {
  color: var(--info);
}

.bg-info\/10 {
  background-color: color-mix(in oklab, var(--info) 10%, transparent);
}

body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-item"],
body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-sub-trigger"] {
  padding-inline: 0.625rem;
  padding-block: 0.625rem;
}

body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-checkbox-item"],
body:has(.agndex-dashboard) [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-radio-item"] {
  padding-block: 0.625rem;
  padding-left: 0.625rem;
  padding-right: 2rem;
}
```

### `src/components/dashboards/agndex-dashboard/data.tsx`

```tsx
import type { ComponentType, SVGProps } from 'react'
import {
  BillingIcon,
  DiscordIcon,
  DocsIcon,
  HomeIcon,
  IndexesIcon,
  KeyIcon,
  LogoutIcon,
  ProjectIcon,
  SettingsIcon,
} from './components/agndex/icons'
export type NavIcon = ComponentType<SVGProps<SVGSVGElement>>

export type NavigationItem = {
  name: string
  href: string
  icon: NavIcon
  external?: boolean
}

export type NavigationGroup = {
  label: string
  items: NavigationItem[]
}

export const navigationGroups: NavigationGroup[] = [
  {
    label: 'General',
    items: [{ name: 'Dashboard', href: '/', icon: HomeIcon }],
  },
  {
    label: 'Settings',
    items: [
      { name: 'API Keys', href: '/api-keys', icon: KeyIcon },
      { name: 'Billing', href: '/billing', icon: BillingIcon },
    ],
  },
  {
    label: 'Support',
    items: [
      { name: 'Docs', href: '/docs', icon: DocsIcon },
      {
        name: 'Discord',
        href: 'https://discord.com',
        icon: DiscordIcon,
        external: true,
      },
    ],
  },
]

export const footerNavigation: NavigationItem[] = [
  { name: 'Settings', href: '/settings', icon: SettingsIcon },
]

export const logoutItem = {
  name: 'Logout',
  icon: LogoutIcon,
}

export const currentUser = {
  name: 'Vansh Patel',
  email: 'vansh@agndex.com',
  avatar:
    'https://api.dicebear.com/9.x/avataaars/svg?seed=Vansh%20Patel',
  initials: 'VP',
}

export const projects = [
  { name: 'Default Project', id: 'default' },
  { name: 'Staging', id: 'staging' },
  { name: 'Production', id: 'production' },
] as const

export type Project = (typeof projects)[number]

export const indexes = [
  {
    id: '1',
    name: 'demo-customer_faqs',
    updatedAt: '3/16/2026',
    docs: 55,
  },
  {
    id: '2',
    name: 'demo-customer_faqs',
    updatedAt: '3/16/2026',
    docs: 55,
  },
]

export const projectCredentials = {
  projectId: 'c101d38e-0555-421b-be6d-5699ed27c9aa',
  projectKey: 'sk_live_agndex_demo_secret_key_12345',
}

export const projectSummary = {
  tier: 'Developer',
  indexesUsed: 1,
  indexesLimit: 3,
}

export const subscription = {
  tier: 'Developer Tier',
  plan: 'Free',
  billingCycle: 'Mar 1, 2026 - Mar 31,2026',
}

export const usageStats = [
  { label: 'Projects', value: '12,847', icon: ProjectIcon },
  { label: 'Indexes per Project', value: '140', icon: IndexesIcon },
  { label: 'Items per Index', value: '47', icon: ProjectIcon },
] as const

export const resourceRows = [
  { resource: 'Storage', included: '500 MB cap', overage: '- -' },
  { resource: 'Egress', included: '10 GB cap', overage: '- -' },
  { resource: 'Ingest', included: '50 MB cap', overage: '- -' },
  { resource: 'Control API ops', included: '1K / month', overage: '- -' },
  { resource: 'Cloud query calls', included: '1K / month', overage: '- -' },
] as const
```

### `src/components/dashboards/agndex-dashboard/demo.tsx`

```tsx
import type { ReactNode } from 'react'
import DashboardLayout from './dashboard-layout'
import { ApiKeysPage } from './components/agndex/api-keys-page'
import { BillingPage } from './components/agndex/billing-page'
import { DashboardPage } from './components/agndex/dashboard-page'
import {
  DashboardNavigationProvider,
  useDashboardNavigation,
} from './components/agndex/navigation'
import { ThemeProvider } from './components/agndex/theme-provider'

function DashboardRoute() {
  const { pathname } = useDashboardNavigation()

  let content: ReactNode = <DashboardPage />

  if (pathname === '/api-keys') {
    content = <ApiKeysPage />
  } else if (pathname === '/billing') {
    content = <BillingPage />
  } else if (pathname === '/docs' || pathname === '/settings') {
    content = null
  }

  return <DashboardLayout>{content}</DashboardLayout>
}

export default function AgndexDashboardDemo() {
  return (
    <ThemeProvider>
      <DashboardNavigationProvider>
        <DashboardRoute />
      </DashboardNavigationProvider>
    </ThemeProvider>
  )
}
```