@mdxui/tremor 6.0.0

package/dist/overview/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/overview/components/sections/AgentsSection.tsx","../../../src/overview/components/sections/RetentionSection.tsx","../../../src/overview/components/sections/SupportSection.tsx","../../../src/overview/components/sections/WorkflowSection.tsx"],"sourcesContent":["'use client'\n\nimport type { AgentsDashboardProps } from 'mdxui'\nimport * as React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Agent data type for the agents table\n */\nexport interface Agent {\n  agent_id: string\n  full_name: string\n  account: string\n  start_date: string\n  end_date: string | null\n  number: string\n  email: string\n  registered: boolean\n  minutes_called: number\n  minutes_booked: number\n  ticket_generation: boolean\n}\n\n/**\n * Extended props for AgentsSection component (Tremor overview variant)\n */\nexport interface AgentsSectionTremorProps {\n  /** Agent data array (Tremor variant) */\n  agents?: Agent[]\n  /** Section title */\n  title?: string\n  /** Section description */\n  description?: string\n  /** Custom class name */\n  className?: string\n}\n\n/**\n * Progress Circle component for capacity visualization\n */\nfunction ProgressCircle({\n  value,\n  radius = 14,\n  strokeWidth = 3,\n  variant = 'default',\n  children,\n}: {\n  value: number\n  radius?: number\n  strokeWidth?: number\n  variant?: 'default' | 'warning' | 'error' | 'success'\n  children?: React.ReactNode\n}) {\n  const normalizedRadius = radius - strokeWidth / 2\n  const circumference = 2 * Math.PI * normalizedRadius\n  const strokeDashoffset = circumference - (value / 100) * circumference\n\n  const variantColors = {\n    default: 'stroke-blue-500',\n    warning: 'stroke-amber-500',\n    error: 'stroke-red-500',\n    success: 'stroke-emerald-500',\n  }\n\n  return (\n    <div className='relative inline-flex items-center justify-center'>\n      <svg height={radius * 2} width={radius * 2} className='rotate-[-90deg]' aria-hidden='true'>\n        <circle\n          className='stroke-gray-200 dark:stroke-gray-800'\n          fill='transparent'\n          strokeWidth={strokeWidth}\n          r={normalizedRadius}\n          cx={radius}\n          cy={radius}\n        />\n        <circle\n          className={variantColors[variant]}\n          fill='transparent'\n          strokeWidth={strokeWidth}\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          strokeLinecap='round'\n          r={normalizedRadius}\n          cx={radius}\n          cy={radius}\n        />\n      </svg>\n      {children && <div className='absolute inset-0 flex items-center justify-center'>{children}</div>}\n    </div>\n  )\n}\n\n/**\n * Badge component for status display\n */\nfunction Badge({\n  children,\n  variant = 'default',\n  className = '',\n}: {\n  children: React.ReactNode\n  variant?: 'default' | 'success' | 'warning' | 'error'\n  className?: string\n}) {\n  const variantClasses = {\n    default: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',\n    success: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',\n    warning: 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',\n    error: 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400',\n  }\n\n  return (\n    <span className={twMerge('inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium', variantClasses[variant], className)}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Shield check icon for registered status\n */\nfunction ShieldCheckIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'>\n      <path d='M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41-5.64 5.66z' />\n    </svg>\n  )\n}\n\n/**\n * Ticket generation toggle button\n */\nfunction TicketGenerationButton({ initialState }: { initialState: boolean }) {\n  const [enabled, setEnabled] = React.useState(initialState)\n\n  return (\n    <button\n      type='button'\n      role='switch'\n      aria-checked={enabled}\n      className={twMerge(\n        'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',\n        enabled ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700',\n      )}\n      onClick={() => setEnabled(!enabled)}>\n      <span\n        className={twMerge(\n          'pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',\n          enabled ? 'translate-x-4' : 'translate-x-0',\n        )}\n      />\n    </button>\n  )\n}\n\n/**\n * Divider component\n */\nfunction Divider() {\n  return <div className='my-6 h-px w-full bg-gray-200 dark:bg-gray-800' />\n}\n\n/**\n * Data table filter bar\n */\nfunction FilterBar({\n  globalFilter,\n  setGlobalFilter,\n  registeredOnly,\n  setRegisteredOnly,\n}: {\n  globalFilter: string\n  setGlobalFilter: (value: string) => void\n  registeredOnly: boolean\n  setRegisteredOnly: (value: boolean) => void\n}) {\n  return (\n    <div className='flex flex-wrap items-center justify-between gap-4'>\n      <div className='flex items-center gap-4'>\n        <div className='relative'>\n          <svg\n            className='absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400'\n            fill='none'\n            stroke='currentColor'\n            viewBox='0 0 24 24'\n            aria-hidden='true'>\n            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' />\n          </svg>\n          <input\n            type='text'\n            placeholder='Search agents...'\n            value={globalFilter}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n            className='w-64 rounded-md border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100'\n          />\n        </div>\n        <label className='flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400'>\n          <input\n            type='checkbox'\n            checked={registeredOnly}\n            onChange={(e) => setRegisteredOnly(e.target.checked)}\n            className='h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500'\n          />\n          Registered only\n        </label>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Pagination component\n */\nfunction Pagination({\n  pageIndex,\n  pageSize,\n  totalRows,\n  onPageChange,\n}: {\n  pageIndex: number\n  pageSize: number\n  totalRows: number\n  onPageChange: (page: number) => void\n}) {\n  const totalPages = Math.ceil(totalRows / pageSize)\n  const startRow = pageIndex * pageSize + 1\n  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className='flex items-center justify-between text-sm text-gray-600 dark:text-gray-400'>\n      <span>\n        Showing {startRow} to {endRow} of {totalRows} agents\n      </span>\n      <div className='flex items-center gap-2'>\n        <button\n          type='button'\n          onClick={() => onPageChange(pageIndex - 1)}\n          disabled={pageIndex === 0}\n          className='rounded-md border border-gray-300 px-3 py-1 disabled:opacity-50 dark:border-gray-700'>\n          Previous\n        </button>\n        <span>\n          Page {pageIndex + 1} of {totalPages}\n        </span>\n        <button\n          type='button'\n          onClick={() => onPageChange(pageIndex + 1)}\n          disabled={pageIndex >= totalPages - 1}\n          className='rounded-md border border-gray-300 px-3 py-1 disabled:opacity-50 dark:border-gray-700'>\n          Next\n        </button>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Format phone number for display\n */\nfunction formatPhoneNumber(number: string): string {\n  return number.replace(/(\\+41)(\\d{2})(\\d{3})(\\d{2})(\\d{2})/, '$1 $2 $3 $4 $5')\n}\n\n/**\n * Format date for display\n */\nfunction formatDate(dateString: string): string {\n  return new Date(dateString).toLocaleDateString('en-GB', {\n    day: '2-digit',\n    month: '2-digit',\n    year: 'numeric',\n  })\n}\n\n/**\n * Get capacity variant based on percentage\n */\nfunction getCapacityVariant(value: number): 'default' | 'warning' | 'error' {\n  const fixedValue = parseFloat(value.toFixed(0))\n  if (fixedValue >= 85) return 'error'\n  if (fixedValue > 60) return 'warning'\n  return 'default'\n}\n\n/**\n * Simple metrics card for mdxui interface\n */\nfunction MetricCard({ label, value }: { label: string; value: string | number }) {\n  return (\n    <div className='rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800'>\n      <p className='text-sm text-gray-500 dark:text-gray-400'>{label}</p>\n      <p className='mt-1 text-2xl font-semibold text-gray-900 dark:text-white'>{value}</p>\n    </div>\n  )\n}\n\n/**\n * Combined props type for AgentsSection supporting both interfaces\n */\nexport type AgentsSectionProps = AgentsSectionTremorProps | Partial<AgentsDashboardProps>\n\n/**\n * AgentsSection - Agents data table dashboard section\n *\n * Supports both mdxui AgentsDashboardProps interface and Tremor's data table variant.\n *\n * @example mdxui interface\n * ```tsx\n * <AgentsSection\n *   totalAgents={10}\n *   activeAgents={5}\n *   runsToday={100}\n *   successRate={95}\n * />\n * ```\n *\n * @example Tremor data table variant\n * ```tsx\n * <AgentsSection\n *   agents={agentData}\n *   title=\"Agents\"\n * />\n * ```\n */\nexport function AgentsSection(props: AgentsSectionProps) {\n  // Determine which variant to render based on props\n  const isTremorVariant = 'agents' in props || (!('totalAgents' in props) && !('activeAgents' in props))\n\n  if (isTremorVariant) {\n    return <AgentsSectionTremor {...(props as AgentsSectionTremorProps)} />\n  }\n\n  // For mdxui variant, provide default for loading\n  const mdxuiProps = props as Partial<AgentsDashboardProps>\n  return (\n    <AgentsSectionMdxui\n      totalAgents={mdxuiProps.totalAgents ?? 0}\n      activeAgents={mdxuiProps.activeAgents ?? 0}\n      runsToday={mdxuiProps.runsToday ?? 0}\n      successRate={mdxuiProps.successRate ?? 0}\n      loading={mdxuiProps.loading ?? false}\n      topAgents={mdxuiProps.topAgents}\n      performanceData={mdxuiProps.performanceData}\n      className={mdxuiProps.className}\n    />\n  )\n}\n\n/**\n * Tremor variant - data table with agents\n */\nfunction AgentsSectionTremor({\n  agents = [],\n  title = 'Agents',\n  description = 'Monitor agent performance and manage ticket generation',\n  className = '',\n}: AgentsSectionTremorProps) {\n  const [globalFilter, setGlobalFilter] = React.useState('')\n  const [registeredOnly, setRegisteredOnly] = React.useState(false)\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 16\n\n  // Filter agents based on search and registered status\n  const filteredAgents = React.useMemo(() => {\n    let result = agents\n\n    if (globalFilter) {\n      const lowerFilter = globalFilter.toLowerCase()\n      result = result.filter(\n        (agent) =>\n          agent.full_name.toLowerCase().includes(lowerFilter) ||\n          agent.agent_id.toLowerCase().includes(lowerFilter) ||\n          agent.email.toLowerCase().includes(lowerFilter) ||\n          agent.account.toLowerCase().includes(lowerFilter),\n      )\n    }\n\n    if (registeredOnly) {\n      result = result.filter((agent) => agent.registered)\n    }\n\n    return result\n  }, [agents, globalFilter, registeredOnly])\n\n  // Paginate filtered agents\n  const paginatedAgents = React.useMemo(() => {\n    const start = pageIndex * pageSize\n    return filteredAgents.slice(start, start + pageSize)\n  }, [filteredAgents, pageIndex])\n\n  // Reset page when filter changes\n  React.useEffect(() => {\n    setPageIndex(0)\n  }, [])\n\n  return (\n    <main className={twMerge('', className)} data-testid='agents-section'>\n      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>\n        <div>\n          <h1 className='text-2xl font-semibold text-gray-900 dark:text-gray-50'>{title}</h1>\n          <p className='text-gray-500 sm:text-sm/6 dark:text-gray-500'>{description}</p>\n        </div>\n      </div>\n      <Divider />\n      <section className='mt-8'>\n        <div className='space-y-6'>\n          <FilterBar\n            globalFilter={globalFilter}\n            setGlobalFilter={setGlobalFilter}\n            registeredOnly={registeredOnly}\n            setRegisteredOnly={setRegisteredOnly}\n          />\n          <div className='relative overflow-hidden overflow-x-auto'>\n            <table className='w-full text-left'>\n              <thead>\n                <tr className='border-b border-gray-200 dark:border-gray-800'>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>Agent</th>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>\n                    Contact Information\n                  </th>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>Contract Dates</th>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>Account</th>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>Capacity (mins)</th>\n                  <th className='whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs'>\n                    Ticket Generation\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {paginatedAgents.length > 0 ?\n                  paginatedAgents.map((agent) => {\n                    const capacity = agent.minutes_booked > 0 ? (agent.minutes_called / agent.minutes_booked) * 100 : 0\n\n                    return (\n                      <tr\n                        key={agent.agent_id}\n                        className='group select-none border-b border-gray-100 hover:bg-[#FBFBFC] dark:border-gray-800 hover:dark:bg-gray-900'>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <div className='flex flex-col gap-1'>\n                            <span className='font-medium text-gray-900 dark:text-gray-50'>{agent.full_name}</span>\n                            <div className='flex items-center gap-1 text-xs'>\n                              <span className='text-gray-500 dark:text-gray-500'>AgID </span>\n                              <span className='font-mono font-medium uppercase tabular-nums text-gray-900 dark:text-gray-50'>\n                                {agent.agent_id}\n                              </span>\n                              <ShieldCheckIcon\n                                className={twMerge(\n                                  'size-3 shrink-0',\n                                  agent.registered ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-400 dark:text-gray-600',\n                                )}\n                              />\n                            </div>\n                          </div>\n                        </td>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <div className='flex flex-col gap-1'>\n                            <span className='text-gray-900 dark:text-gray-50'>{formatPhoneNumber(agent.number)}</span>\n                            <span className='text-xs text-gray-500 dark:text-gray-500'>{agent.email}</span>\n                          </div>\n                        </td>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <div className='flex flex-col gap-1'>\n                            <span className='tabular-nums text-gray-900 dark:text-gray-50'>\n                              {agent.end_date ?\n                                <>End: {formatDate(agent.end_date)}</>\n                              : <Badge className='px-1.5 py-0.5' variant='success'>\n                                  Active\n                                </Badge>\n                              }\n                            </span>\n                            <span className='text-xs tabular-nums text-gray-500 dark:text-gray-500'>\n                              Start: {formatDate(agent.start_date)}\n                            </span>\n                          </div>\n                        </td>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <div className='flex flex-col gap-1'>\n                            <span className='text-gray-900 dark:text-gray-50'>{agent.account}</span>\n                            <span className='text-xs text-gray-500 dark:text-gray-500'>Main division</span>\n                          </div>\n                        </td>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <div className='flex gap-2'>\n                            <div className='flex items-center gap-x-2.5'>\n                              <ProgressCircle value={capacity} radius={14} strokeWidth={3} variant={getCapacityVariant(capacity)}>\n                                <span className='text-[11px] font-semibold text-gray-900 dark:text-gray-50'>{capacity.toFixed(0)}</span>\n                              </ProgressCircle>\n                            </div>\n                            <div className='flex flex-col gap-0'>\n                              <span className='text-gray-900 dark:text-gray-50'>\n                                <span className='text-gray-500 dark:text-gray-500'>Called </span>\n                                <span className='font-medium'>{new Intl.NumberFormat().format(agent.minutes_called)}</span>\n                              </span>\n                              <span className='text-xs text-gray-500 dark:text-gray-500'>\n                                Booked {new Intl.NumberFormat().format(agent.minutes_booked)}\n                              </span>\n                            </div>\n                          </div>\n                        </td>\n                        <td className='relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400'>\n                          <TicketGenerationButton initialState={agent.ticket_generation} />\n                        </td>\n                      </tr>\n                    )\n                  })\n                : <tr>\n                    <td colSpan={6} className='h-24 text-center text-gray-500 dark:text-gray-400'>\n                      No results.\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n          <Pagination pageIndex={pageIndex} pageSize={pageSize} totalRows={filteredAgents.length} onPageChange={setPageIndex} />\n        </div>\n      </section>\n    </main>\n  )\n}\n\n/**\n * mdxui interface variant - simple metrics display\n */\nfunction AgentsSectionMdxui({\n  totalAgents,\n  activeAgents,\n  runsToday,\n  successRate,\n  topAgents,\n  loading = false,\n  className,\n}: AgentsDashboardProps) {\n  if (loading) {\n    return (\n      <div data-testid='agents-section-loading' className={twMerge('animate-pulse space-y-4', className)}>\n        <div className='h-8 w-48 rounded bg-gray-200 dark:bg-gray-700' />\n        <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>\n          {[...Array(4)].map((_, i) => (\n            <div key={i.toString()} className='h-24 rounded-lg bg-gray-200 dark:bg-gray-700' />\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section className={twMerge('space-y-6', className)}>\n      <h2 className='text-lg font-semibold text-gray-900 dark:text-white'>Agents Overview</h2>\n\n      <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>\n        <MetricCard label='Total Agents' value={totalAgents} />\n        <MetricCard label='Active Agents' value={activeAgents} />\n        <MetricCard label='Runs Today' value={runsToday} />\n        <MetricCard label='Success Rate' value={`${successRate}%`} />\n      </div>\n\n      {topAgents && topAgents.length > 0 && (\n        <div className='mt-6'>\n          <h3 className='mb-4 text-sm font-medium text-gray-700 dark:text-gray-300'>Top Performing Agents</h3>\n          <div className='space-y-3'>\n            {topAgents.map((agent) => (\n              <div key={agent.id} className='flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700'>\n                <div className='flex items-center gap-3'>\n                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300'>\n                    {agent.name.charAt(0)}\n                  </div>\n                  <span className='font-medium text-gray-900 dark:text-white'>{agent.name}</span>\n                </div>\n                <div className='flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400'>\n                  <span>{agent.runs} runs</span>\n                  <span className='text-green-600 dark:text-green-400'>{agent.successRate}%</span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </section>\n  )\n}\n\n// Type re-exported from interface definition above\n","import type { RetentionDashboardProps } from \"mdxui\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * RetentionSection - User retention analytics section\n *\n * Displays cohort retention data with current retention rate and trend indicator.\n * Shows a cohort table with retention percentages by period.\n */\nexport function RetentionSection({\n\tcohorts,\n\tperiods,\n\tcurrentRetention,\n\ttrend,\n\tloading = false,\n\tclassName,\n}: RetentionDashboardProps) {\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-testid=\"retention-section-loading\"\n\t\t\t\tclassName={twMerge(\"animate-pulse space-y-4\", className)}\n\t\t\t>\n\t\t\t\t<div className=\"h-8 w-48 rounded bg-gray-200 dark:bg-gray-700\" />\n\t\t\t\t<div className=\"h-32 rounded-lg bg-gray-200 dark:bg-gray-700\" />\n\t\t\t\t<div className=\"h-64 rounded-lg bg-gray-200 dark:bg-gray-700\" />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<section className={twMerge(\"space-y-6\", className)}>\n\t\t\t<h2 className=\"text-lg font-semibold text-gray-900 dark:text-white\">\n\t\t\t\tRetention Analytics\n\t\t\t</h2>\n\n\t\t\t{/* Current Retention */}\n\t\t\t<div className=\"flex items-center gap-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800\">\n\t\t\t\t<div>\n\t\t\t\t\t<p className=\"text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\tCurrent Retention\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"mt-1 text-3xl font-semibold text-gray-900 dark:text-white\">\n\t\t\t\t\t\t{currentRetention}%\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<TrendIndicator trend={trend} />\n\t\t\t</div>\n\n\t\t\t{/* Cohort Table */}\n\t\t\t<div className=\"overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700\">\n\t\t\t\t<table className=\"min-w-full divide-y divide-gray-200 dark:divide-gray-700\">\n\t\t\t\t\t<thead className=\"bg-gray-50 dark:bg-gray-800\">\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th className=\"px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\tCohort\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<th className=\"px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\tSize\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t{periods.map((period) => (\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tkey={period}\n\t\t\t\t\t\t\t\t\tclassName=\"px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{period}\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody className=\"divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900\">\n\t\t\t\t\t\t{cohorts.map((cohort) => (\n\t\t\t\t\t\t\t<tr key={cohort.cohort}>\n\t\t\t\t\t\t\t\t<td className=\"whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t{cohort.cohort}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td className=\"whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t{cohort.size}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t{cohort.retention.map((rate, idx) => (\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\tkey={idx.toString()}\n\t\t\t\t\t\t\t\t\t\tclassName=\"whitespace-nowrap px-4 py-3 text-sm\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: getRetentionColor(rate),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"font-medium text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t\t\t{rate}%\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction TrendIndicator({ trend }: { trend: \"up\" | \"down\" | \"flat\" }) {\n\tconst colors = {\n\t\tup: \"text-green-600 dark:text-green-400\",\n\t\tdown: \"text-red-600 dark:text-red-400\",\n\t\tflat: \"text-gray-500 dark:text-gray-400\",\n\t};\n\n\tconst arrows = {\n\t\tup: (\n\t\t\t<svg\n\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\td=\"M5 10l7-7m0 0l7 7m-7-7v18\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t),\n\t\tdown: (\n\t\t\t<svg\n\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\td=\"M19 14l-7 7m0 0l-7-7m7 7V3\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t),\n\t\tflat: (\n\t\t\t<svg\n\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\td=\"M5 12h14\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t),\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tdata-trend={trend}\n\t\t\tclassName={twMerge(\"flex items-center gap-1\", colors[trend])}\n\t\t>\n\t\t\t{arrows[trend]}\n\t\t\t<span className=\"text-sm font-medium capitalize\">{trend}</span>\n\t\t</div>\n\t);\n}\n\nfunction getRetentionColor(rate: number): string {\n\tif (rate >= 80) return \"rgba(34, 197, 94, 0.2)\"; // green\n\tif (rate >= 60) return \"rgba(234, 179, 8, 0.2)\"; // yellow\n\tif (rate >= 40) return \"rgba(249, 115, 22, 0.2)\"; // orange\n\treturn \"rgba(239, 68, 68, 0.2)\"; // red\n}\n","import type { SupportDashboardProps } from \"mdxui\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * SupportSection - Support metrics overview section\n *\n * Displays support metrics including open tickets, response time,\n * resolution rate, and CSAT score. Optionally shows ticket breakdowns.\n */\nexport function SupportSection({\n\topenTickets,\n\tavgResponseTime,\n\tresolutionRate,\n\tcsat,\n\tticketsByStatus,\n\tticketsByPriority,\n\tvolumeTrend: _volumeTrend,\n\tloading = false,\n\tclassName,\n}: SupportDashboardProps) {\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-testid=\"support-section-loading\"\n\t\t\t\tclassName={twMerge(\"animate-pulse space-y-4\", className)}\n\t\t\t>\n\t\t\t\t<div className=\"h-8 w-48 rounded bg-gray-200 dark:bg-gray-700\" />\n\t\t\t\t<div className=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n\t\t\t\t\t{[...Array(4)].map((_, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={i.toString()}\n\t\t\t\t\t\t\tclassName=\"h-24 rounded-lg bg-gray-200 dark:bg-gray-700\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<section className={twMerge(\"space-y-6\", className)}>\n\t\t\t<h2 className=\"text-lg font-semibold text-gray-900 dark:text-white\">\n\t\t\t\tSupport Overview\n\t\t\t</h2>\n\n\t\t\t{/* Metrics Grid */}\n\t\t\t<div className=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n\t\t\t\t<MetricCard label=\"Open Tickets\" value={openTickets} />\n\t\t\t\t<MetricCard label=\"Avg Response\" value={`${avgResponseTime}m`} />\n\t\t\t\t<MetricCard label=\"Resolution Rate\" value={`${resolutionRate}%`} />\n\t\t\t\t<MetricCard label=\"CSAT\" value={csat} />\n\t\t\t</div>\n\n\t\t\t{/* Tickets By Status */}\n\t\t\t{ticketsByStatus && ticketsByStatus.length > 0 && (\n\t\t\t\t<div className=\"mt-6\">\n\t\t\t\t\t<h3 className=\"mb-4 text-sm font-medium text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\tTickets by Status\n\t\t\t\t\t</h3>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-3\">\n\t\t\t\t\t\t{ticketsByStatus.map((item) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={item.status}\n\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 dark:border-gray-700\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<StatusDot status={item.status} />\n\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t{item.count}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Tickets By Priority */}\n\t\t\t{ticketsByPriority && ticketsByPriority.length > 0 && (\n\t\t\t\t<div className=\"mt-6\">\n\t\t\t\t\t<h3 className=\"mb-4 text-sm font-medium text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\tTickets by Priority\n\t\t\t\t\t</h3>\n\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t{ticketsByPriority.map((item) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={item.priority}\n\t\t\t\t\t\t\t\tclassName=\"flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t{item.priority}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t{item.count} tickets\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</section>\n\t);\n}\n\nfunction MetricCard({\n\tlabel,\n\tvalue,\n}: {\n\tlabel: string;\n\tvalue: string | number;\n}) {\n\treturn (\n\t\t<div className=\"rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800\">\n\t\t\t<p className=\"text-sm text-gray-500 dark:text-gray-400\">{label}</p>\n\t\t\t<p className=\"mt-1 text-2xl font-semibold text-gray-900 dark:text-white\">\n\t\t\t\t{value}\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n\nfunction StatusDot({ status }: { status: string }) {\n\tconst colors: Record<string, string> = {\n\t\tOpen: \"bg-blue-500\",\n\t\tPending: \"bg-yellow-500\",\n\t\tResolved: \"bg-green-500\",\n\t\tClosed: \"bg-gray-500\",\n\t};\n\n\treturn (\n\t\t<span\n\t\t\tclassName={twMerge(\n\t\t\t\t\"h-2 w-2 rounded-full\",\n\t\t\t\tcolors[status] || \"bg-gray-400\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n","import type { WorkflowDashboardProps } from \"mdxui\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * WorkflowSection - Workflow automation metrics section\n *\n * Displays workflow metrics including total/active workflows, runs today,\n * success rate, and time saved. Optionally shows workflow breakdowns.\n */\nexport function WorkflowSection({\n\ttotalWorkflows,\n\tactiveWorkflows,\n\trunsToday,\n\tsuccessRate,\n\ttimeSaved,\n\trunsByWorkflow,\n\trunHistory: _runHistory,\n\tloading = false,\n\tclassName,\n}: WorkflowDashboardProps) {\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-testid=\"workflow-section-loading\"\n\t\t\t\tclassName={twMerge(\"animate-pulse space-y-4\", className)}\n\t\t\t>\n\t\t\t\t<div className=\"h-8 w-48 rounded bg-gray-200 dark:bg-gray-700\" />\n\t\t\t\t<div className=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n\t\t\t\t\t{[...Array(4)].map((_, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={i.toString()}\n\t\t\t\t\t\t\tclassName=\"h-24 rounded-lg bg-gray-200 dark:bg-gray-700\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst metrics = [\n\t\t{ label: \"Total Workflows\", value: totalWorkflows },\n\t\t{ label: \"Active Workflows\", value: activeWorkflows },\n\t\t{ label: \"Runs Today\", value: runsToday },\n\t\t{ label: \"Success Rate\", value: `${successRate}%` },\n\t];\n\n\tif (timeSaved !== undefined) {\n\t\tmetrics.push({ label: \"Time Saved\", value: `${timeSaved}h` });\n\t}\n\n\treturn (\n\t\t<section className={twMerge(\"space-y-6\", className)}>\n\t\t\t<h2 className=\"text-lg font-semibold text-gray-900 dark:text-white\">\n\t\t\t\tWorkflow Automation\n\t\t\t</h2>\n\n\t\t\t{/* Metrics Grid */}\n\t\t\t<div className=\"grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-5\">\n\t\t\t\t{metrics.map((metric) => (\n\t\t\t\t\t<MetricCard\n\t\t\t\t\t\tkey={metric.label}\n\t\t\t\t\t\tlabel={metric.label}\n\t\t\t\t\t\tvalue={metric.value}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{/* Runs By Workflow */}\n\t\t\t{runsByWorkflow && runsByWorkflow.length > 0 && (\n\t\t\t\t<div className=\"mt-6\">\n\t\t\t\t\t<h3 className=\"mb-4 text-sm font-medium text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\tWorkflows Overview\n\t\t\t\t\t</h3>\n\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t{runsByWorkflow.map((workflow) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={workflow.id}\n\t\t\t\t\t\t\t\tclassName=\"flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300\">\n\t\t\t\t\t\t\t\t\t\t<WorkflowIcon />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium text-gray-900 dark:text-white\">\n\t\t\t\t\t\t\t\t\t\t{workflow.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\t\t\t<span>{workflow.runs} runs</span>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\tworkflow.successRate >= 90\n\t\t\t\t\t\t\t\t\t\t\t\t? \"text-green-600 dark:text-green-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t: workflow.successRate >= 70\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-yellow-600 dark:text-yellow-400\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-red-600 dark:text-red-400\"\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{workflow.successRate}%\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</section>\n\t);\n}\n\nfunction MetricCard({\n\tlabel,\n\tvalue,\n}: {\n\tlabel: string;\n\tvalue: string | number;\n}) {\n\treturn (\n\t\t<div className=\"rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800\">\n\t\t\t<p className=\"text-sm text-gray-500 dark:text-gray-400\">{label}</p>\n\t\t\t<p className=\"mt-1 text-2xl font-semibold text-gray-900 dark:text-white\">\n\t\t\t\t{value}\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n\nfunction WorkflowIcon() {\n\treturn (\n\t\t<svg\n\t\t\tclassName=\"h-4 w-4\"\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke=\"currentColor\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\td=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],"mappings":"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","names":["twMerge","jsx","jsxs","twMerge","jsx","jsxs","MetricCard","twMerge","jsx","jsxs","MetricCard"]}

package/dist/overview/index.d.ts

@@ -0,0 +1,301 @@
+import { AgentsSection, RetentionSection, SupportSection, WorkflowSection } from './components/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import 'mdxui';
+
+interface OverviewAppProps {
+    /** App display name */
+    name?: string;
+    /** Child content */
+    children: ReactNode;
+}
+/**
+ * OverviewApp - Root wrapper component for the Overview template
+ *
+ * Provides the root application wrapper with providers and theme setup.
+ * In the Overview template, this wraps the entire application.
+ *
+ * @example
+ * ```tsx
+ * <OverviewApp name="Support Dashboard">
+ *   <OverviewShell>
+ *     <Dashboard />
+ *   </OverviewShell>
+ * </OverviewApp>
+ * ```
+ */
+declare function OverviewApp({ name, children }: OverviewAppProps): react_jsx_runtime.JSX.Element;
+
+interface Breadcrumb {
+    label: string;
+    href?: string;
+}
+interface OverviewHeaderProps {
+    /** Current user */
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    /** Show search */
+    showSearch?: boolean;
+    /** Show notifications */
+    showNotifications?: boolean;
+    /** Breadcrumbs */
+    breadcrumbs?: Breadcrumb[];
+    /** Logo component */
+    logo?: ReactNode;
+    /** Notifications component */
+    notifications?: ReactNode;
+    /** User profile component */
+    userProfile?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * OverviewHeader - Top header bar for the Overview template
+ *
+ * Provides a header bar with logo, user profile, and notifications.
+ * This is typically used inside OverviewShell but can be used standalone.
+ *
+ * @example
+ * ```tsx
+ * <OverviewHeader
+ *   user={{ name: 'John Doe', email: 'john@example.com.ai' }}
+ *   showSearch={true}
+ *   showNotifications={true}
+ * />
+ * ```
+ */
+declare function OverviewHeader({ user, showSearch, showNotifications, breadcrumbs, logo, notifications, userProfile, className, }: OverviewHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface OverviewDashboardProps {
+    /** Dashboard title */
+    title: string;
+    /** Optional description text */
+    description?: string;
+    /** Action buttons or controls to render on the right */
+    actions?: ReactNode;
+    /** Main content area */
+    children: ReactNode;
+    /** Additional className for the container */
+    className?: string;
+}
+/**
+ * OverviewDashboard - Dashboard page layout for the Overview template
+ *
+ * Provides a consistent layout structure for dashboard pages:
+ * - Title and description header
+ * - Optional action buttons area
+ * - Divider
+ * - Main content area
+ *
+ * @example
+ * ```tsx
+ * <OverviewDashboard
+ *   title="Support Dashboard"
+ *   description="Real-time monitoring of support metrics"
+ *   actions={<Button>Create Ticket</Button>}
+ * >
+ *   <MetricsGrid />
+ *   <TicketsTable />
+ * </OverviewDashboard>
+ * ```
+ */
+declare function OverviewDashboard({ title, description, actions, children, className, }: OverviewDashboardProps): react_jsx_runtime.JSX.Element;
+
+interface OverviewNavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+interface OverviewShellProps {
+    /** Navigation items for the tab bar */
+    nav?: OverviewNavItem[];
+    /** Logo component or element */
+    logo?: ReactNode;
+    /** User profile component */
+    userProfile?: ReactNode;
+    /** Notifications component */
+    notifications?: ReactNode;
+    /** Main content area */
+    children: ReactNode;
+    /** Additional className for the main content area */
+    className?: string;
+}
+/**
+ * OverviewShell - Top navigation shell for the Overview template
+ *
+ * A layout component that provides a top-nav dashboard shell structure:
+ * - Sticky header with logo, notifications, and user profile
+ * - Tab navigation below header
+ * - Main content area
+ *
+ * @example
+ * ```tsx
+ * <OverviewShell
+ *   nav={[
+ *     { label: 'Support', href: '/support', active: true },
+ *     { label: 'Retention', href: '/retention' },
+ *   ]}
+ * >
+ *   <SupportDashboard />
+ * </OverviewShell>
+ * ```
+ */
+declare function OverviewShell({ nav, logo, userProfile, notifications, children, className }: OverviewShellProps): react_jsx_runtime.JSX.Element;
+
+type SettingsSection = "profile" | "security" | "notifications" | "billing" | "team" | "api" | "integrations";
+interface OverviewSettingsProps {
+    /** Settings sections to show */
+    sections?: SettingsSection[];
+    /** Currently active section */
+    activeSection?: SettingsSection;
+    /** Child content */
+    children?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * OverviewSettings - Settings page layout for the Overview template
+ *
+ * Provides a settings page structure with sidebar navigation
+ * and main content area for settings forms.
+ *
+ * @example
+ * ```tsx
+ * <OverviewSettings
+ *   sections={['profile', 'security', 'notifications']}
+ *   activeSection="profile"
+ * >
+ *   <ProfileSettingsForm />
+ * </OverviewSettings>
+ * ```
+ */
+declare function OverviewSettings({ sections, activeSection, children, className, }: OverviewSettingsProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavItem {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+}
+interface OverviewSidebarProps {
+    /** Navigation items */
+    nav?: SidebarNavItem[];
+    /** User info for bottom of sidebar */
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    /** Branding */
+    logo?: ReactNode;
+    /** Collapsed state */
+    collapsed?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * OverviewSidebar - Navigation sidebar for the Overview template
+ *
+ * In the Overview template, this component provides a minimal sidebar
+ * that can be used alongside the top navigation. The primary navigation
+ * is in the tab bar (OverviewShell), but this can provide secondary nav.
+ *
+ * @example
+ * ```tsx
+ * <OverviewSidebar
+ *   nav={[
+ *     { label: 'Dashboard', href: '/dashboard' },
+ *     { label: 'Settings', href: '/settings' },
+ *   ]}
+ *   user={{ name: 'John Doe', email: 'john@example.com.ai' }}
+ * />
+ * ```
+ */
+declare function OverviewSidebar({ nav, user, logo, collapsed, className, }: OverviewSidebarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Overview Template - Multi-Section Dashboard
+ *
+ * Implements AppComponents interface for multi-section dashboards
+ * with agents, retention, support, and workflow views.
+ *
+ * @example
+ * ```tsx
+ * import { AppComponents, OverviewShell, OverviewDashboard } from '@mdxui/tremor/overview'
+ *
+ * // Use AppComponents interface
+ * const { App, Shell, Dashboard, Sidebar, Header, Settings } = AppComponents
+ *
+ * // Or use layout components directly
+ * <OverviewShell nav={[{ label: 'Support', href: '/support' }]}>
+ *   <OverviewDashboard title="Support Dashboard">
+ *     <SupportMetrics />
+ *   </OverviewDashboard>
+ * </OverviewShell>
+ * ```
+ *
+ * @example Section components
+ * ```tsx
+ * import { AgentsSection, RetentionSection, SupportSection, WorkflowSection } from '@mdxui/tremor/overview'
+ *
+ * // Use section components with data
+ * <AgentsSection agents={agentData} />
+ * <RetentionSection cohorts={cohortData} />
+ * <SupportSection tickets={ticketData} />
+ * <WorkflowSection stats={workflowStats} />
+ * ```
+ */
+
+/**
+ * AppComponents implementation for the Overview template.
+ *
+ * This object provides all required components for the mdxui AppComponents interface.
+ * Use this when you need a complete set of components for an Overview-style dashboard.
+ *
+ * The Overview template provides:
+ * - Top navigation shell with tab bar
+ * - Multi-section dashboard views (Support, Retention, Workflow, Agents)
+ * - Data tables and charts for analytics
+ *
+ * @example
+ * ```tsx
+ * import { AppComponents } from '@mdxui/tremor/overview'
+ *
+ * // Use with mdxui
+ * <MDXProvider components={AppComponents}>
+ *   <App>
+ *     <Shell>
+ *       <Dashboard title="Support">
+ *         {content}
+ *       </Dashboard>
+ *     </Shell>
+ *   </App>
+ * </MDXProvider>
+ * ```
+ */
+declare const AppComponents: {
+    /** Root application wrapper */
+    readonly App: typeof OverviewApp;
+    /** Top navigation shell layout */
+    readonly Shell: typeof OverviewShell;
+    /** Navigation sidebar (secondary) */
+    readonly Sidebar: typeof OverviewSidebar;
+    /** Header bar component */
+    readonly Header: typeof OverviewHeader;
+    /** Dashboard page layout */
+    readonly Dashboard: typeof OverviewDashboard;
+    /** Settings page layout */
+    readonly Settings: typeof OverviewSettings;
+    /** Agents dashboard section */
+    readonly AgentsSection: typeof AgentsSection;
+    /** Retention analytics section */
+    readonly RetentionSection: typeof RetentionSection;
+    /** Support metrics section */
+    readonly SupportSection: typeof SupportSection;
+    /** Workflow automation section */
+    readonly WorkflowSection: typeof WorkflowSection;
+};
+
+export { AgentsSection, AppComponents, type Breadcrumb, OverviewApp, type OverviewAppProps, OverviewDashboard, type OverviewDashboardProps, OverviewHeader, type OverviewHeaderProps, type OverviewNavItem, OverviewSettings, type OverviewSettingsProps, OverviewShell, type OverviewShellProps, OverviewSidebar, type OverviewSidebarProps, RetentionSection, type SettingsSection, type SidebarNavItem, SupportSection, WorkflowSection };