@camstack/addon-admin-ui 0.1.1

package/src/layouts/AppLayout.tsx

@@ -0,0 +1,238 @@
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import {
+  LayoutDashboard, Plug, LogOut, Activity,
+  Moon, Sun, Monitor, Puzzle, Bot, Cpu, ScrollText,
+  Users, Wrench, Gauge, Terminal, Box, Languages,
+  Camera, Clock, GitBranch, Server,
+  type LucideIcon,
+} from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { useThemeMode } from '@camstack/ui'
+import { useAuth } from '../contexts/auth-context'
+import { useTranslation } from 'react-i18next'
+import { getBackendClient } from '../lib/backend'
+import type { AddonPageInfo } from './AddonPageLoader'
+import { flattenPages } from './AddonPageLoader'
+
+const THEME_ICONS = { dark: Moon, light: Sun, system: Monitor } as const
+
+/** Map icon name strings from addon page declarations to Lucide components */
+const ICON_MAP: Record<string, LucideIcon> = {
+  gauge: Gauge,
+  puzzle: Puzzle,
+  bot: Bot,
+  cpu: Cpu,
+  terminal: Terminal,
+  box: Box,
+  wrench: Wrench,
+  activity: Activity,
+  plug: Plug,
+}
+
+export function AppLayout() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { user, logout } = useAuth()
+  const theme = useThemeMode()
+  const { t, i18n } = useTranslation()
+  const client = getBackendClient()
+
+  const { data: addonPages } = useQuery({
+    queryKey: ['addon-pages'],
+    queryFn: async (): Promise<readonly AddonPageInfo[]> => {
+      const raw = await client.trpc.addonPages.listPages.query()
+      return flattenPages(raw as readonly unknown[])
+    },
+    staleTime: 60_000,
+  })
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  const isActive = (path: string) =>
+    location.pathname === path || location.pathname.startsWith(path + '/')
+
+  const toggleLanguage = () => {
+    const nextLng = i18n.language === 'en' ? 'it' : 'en'
+    i18n.changeLanguage(nextLng)
+  }
+
+  const CAMERA_ITEMS = [
+    { label: t('nav.cameras', 'Cameras'), icon: Camera, path: '/cameras' },
+    { label: t('nav.integrations'), icon: Plug, path: '/integrations' },
+    { label: t('nav.timeline', 'Timeline'), icon: Clock, path: '/timeline' },
+    { label: t('nav.pipeline', 'Pipeline'), icon: GitBranch, path: '/pipeline' },
+  ] as const
+
+  const SYSTEM_ITEMS = [
+    { label: t('system.addons'), icon: Puzzle, path: '/system/addons' },
+    { label: t('system.agents', 'Agents & Processes'), icon: Server, path: '/system/agents' },
+    { label: t('system.logs'), icon: ScrollText, path: '/system/logs' },
+    { label: t('system.users'), icon: Users, path: '/system/users' },
+    { label: t('system.settings'), icon: Wrench, path: '/system/settings' },
+  ] as const
+
+  const themeMode = theme?.mode ?? 'system'
+  const THEME_LABELS: Record<string, string> = {
+    dark: t('theme.dark'),
+    light: t('theme.light'),
+    system: t('theme.system'),
+  }
+
+  return (
+    <div className="flex h-screen bg-background text-foreground">
+      {/* Sidebar */}
+      <aside className="flex w-48 flex-col border-r border-border bg-surface/80 backdrop-blur-sm shrink-0">
+        {/* App logo */}
+        <div className="flex h-14 items-center px-3 border-b border-border">
+          <img
+            src={theme?.resolvedMode === 'light' ? '/brand/logo-horizontal-light.svg' : '/brand/logo-horizontal-dark.svg'}
+            alt="CamStack Admin"
+            className="h-9"
+          />
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+          {/* Dashboard */}
+          {(() => {
+            const active = isActive('/dashboard')
+            return (
+              <button
+                onClick={() => navigate('/dashboard')}
+                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] font-medium transition-all ${
+                  active
+                    ? 'bg-primary/12 text-primary shadow-sm shadow-primary/5'
+                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
+                }`}
+              >
+                <LayoutDashboard className={`h-4 w-4 shrink-0 ${active ? 'text-primary' : ''}`} />
+                {t('nav.dashboard')}
+              </button>
+            )
+          })()}
+
+          {/* Cameras section */}
+          <div className="pt-4 pb-1.5 px-2.5">
+            <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
+              {t('nav.camerasSection', 'Cameras')}
+            </span>
+          </div>
+          {CAMERA_ITEMS.map((item) => {
+            const Icon = item.icon
+            const active = isActive(item.path)
+            return (
+              <button
+                key={item.path}
+                onClick={() => navigate(item.path)}
+                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
+                  active
+                    ? 'bg-primary/12 text-primary'
+                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
+                }`}
+              >
+                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
+                {item.label}
+              </button>
+            )
+          })}
+
+          {/* System section */}
+          <div className="pt-4 pb-1.5 px-2.5">
+            <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
+              {t('system.title')}
+            </span>
+          </div>
+          {SYSTEM_ITEMS.map((item) => {
+            const Icon = item.icon
+            const active = isActive(item.path)
+            return (
+              <button
+                key={item.path}
+                onClick={() => navigate(item.path)}
+                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
+                  active
+                    ? 'bg-primary/12 text-primary'
+                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
+                }`}
+              >
+                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
+                {item.label}
+              </button>
+            )
+          })}
+
+          {/* Addon pages are rendered after system items via dynamic query */}
+
+          {/* Dynamic addon pages section */}
+          {addonPages && addonPages.length > 0 && (
+            <div className="pt-4 pb-1.5 px-2.5">
+              <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
+                {t('nav.addonPages', 'Addon Pages')}
+              </span>
+            </div>
+          )}
+          {addonPages?.map((page) => {
+            const active = isActive(page.path)
+            const Icon = ICON_MAP[page.icon] ?? Puzzle
+            return (
+              <button
+                key={page.id}
+                onClick={() => navigate(page.path)}
+                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
+                  active
+                    ? 'bg-primary/12 text-primary'
+                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
+                }`}
+              >
+                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
+                {page.label}
+              </button>
+            )
+          })}
+        </nav>
+
+        {/* Bottom controls */}
+        <div className="border-t border-border p-2 space-y-0.5">
+          {/* Language toggle */}
+          <button
+            onClick={toggleLanguage}
+            title={t('language.select')}
+            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-foreground transition-colors"
+          >
+            <Languages className="h-3.5 w-3.5 shrink-0" />
+            <span>{i18n.language === 'en' ? t('language.en') : t('language.it')}</span>
+          </button>
+
+          {/* Theme toggle */}
+          <button
+            onClick={() => theme?.toggleMode()}
+            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-foreground transition-colors"
+          >
+            {(() => {
+              const ThemeIcon = THEME_ICONS[themeMode]
+              return <ThemeIcon className="h-3.5 w-3.5" />
+            })()}
+            <span>{THEME_LABELS[themeMode]}</span>
+          </button>
+
+          {/* Logout */}
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-danger transition-colors"
+          >
+            <LogOut className="h-3.5 w-3.5" />
+            <span className="truncate">{user?.username ?? 'User'}</span>
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-auto bg-background">
+        <Outlet />
+      </main>
+    </div>
+  )
+}

package/src/layouts/ProtectedRoute.tsx

@@ -0,0 +1,25 @@
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/auth-context'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+  requiredRole?: string
+}
+
+export function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
+  const { user, loading } = useAuth()
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center bg-background text-foreground-subtle">Loading...</div>
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (requiredRole === 'admin' && user.role !== 'admin' && user.role !== 'super_admin') {
+    return <Navigate to="/access-denied" replace />
+  }
+
+  return <>{children}</>
+}

package/src/lib/addon-page-context.ts

@@ -0,0 +1,29 @@
+import React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import * as ReactQuery from '@tanstack/react-query'
+
+export interface AddonPageContext {
+  readonly trpc: unknown
+  readonly theme: { readonly isDark: boolean }
+  readonly locale: string
+  readonly navigate: (path: string) => void
+  readonly toast: (message: string, type?: 'success' | 'error' | 'info') => void
+}
+
+declare global {
+  interface Window {
+    __camstack: {
+      readonly React: typeof React
+      readonly ReactDOM: typeof ReactDOM
+      readonly ReactQuery: typeof ReactQuery
+    }
+  }
+}
+
+export function initializeAddonPageContext(): void {
+  window.__camstack = {
+    React,
+    ReactDOM,
+    ReactQuery,
+  }
+}

package/src/lib/backend.ts

@@ -0,0 +1,16 @@
+import { BackendClient } from '@camstack/sdk'
+
+let instance: BackendClient | null = null
+
+export function getBackendClient(): BackendClient {
+  if (!instance) {
+    const serverUrl = window.location.origin
+    const token = localStorage.getItem('camstack_admin_token') ?? undefined
+    instance = new BackendClient({ serverUrl, token })
+  }
+  return instance
+}
+
+export function resetBackendClient(): void {
+  instance = null
+}

package/src/main.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+// Expose React on window so addon page vendor modules can access it.
+// The import map in index.html maps 'react' → /vendor/react.mjs which
+// re-exports from window.__camstackReact.
+;(window as any).__camstackReact = React
+
+import { initializeAddonPageContext } from './lib/addon-page-context'
+initializeAddonPageContext()
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import './index.css'
+import './i18n'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/AccessDenied.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom'
+import { ShieldX } from 'lucide-react'
+
+export function AccessDeniedPage() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground p-4">
+      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-danger/10 mb-4">
+        <ShieldX className="h-8 w-8 text-danger" />
+      </div>
+      <h1 className="text-xl font-bold">Access Denied</h1>
+      <p className="mt-2 text-sm text-foreground-subtle">You don't have permission to access this page.</p>
+      <button
+        onClick={() => navigate('/dashboard')}
+        className="mt-6 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg transition-all"
+      >
+        Go to Dashboard
+      </button>
+    </div>
+  )
+}

package/src/pages/Cameras.tsx

@@ -0,0 +1,127 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Camera, Search } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBackendClient } from '../hooks/useBackendClient'
+import { ProviderSection } from '../components/cameras/ProviderSection'
+
+export function CamerasPage() {
+  const { t } = useTranslation()
+  const client = useBackendClient()
+  const [search, setSearch] = useState('')
+
+  const { data: devices, isLoading: devicesLoading } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () => client.listDevices(),
+    refetchInterval: 5_000,
+  })
+
+  const { data: providers, isLoading: providersLoading } = useQuery({
+    queryKey: ['providers'],
+    queryFn: () => client.listProviders(),
+  })
+
+  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
+  const providerList = (providers ?? []) as unknown as Array<Record<string, unknown>>
+
+  // Filter camera-type devices only and apply search
+  const cameraDevices = useMemo(() => {
+    const searchLower = search.toLowerCase()
+    return deviceList.filter((d) => {
+      const type = String(d.type ?? '').toLowerCase()
+      const capabilities = (d.capabilities ?? []) as string[]
+      const isCamera =
+        type === 'camera' ||
+        type.includes('camera') ||
+        capabilities.some((c) => c.toLowerCase().includes('video') || c.toLowerCase().includes('stream'))
+
+      // If no type info, include all devices (early stage where type may not be set)
+      const include = isCamera || !type || type === '—'
+
+      if (!include) return false
+      if (!searchLower) return true
+
+      const name = String(d.name ?? d.id ?? '').toLowerCase()
+      return name.includes(searchLower)
+    })
+  }, [deviceList, search])
+
+  // Group by provider
+  const groupedByProvider = useMemo(() => {
+    const groups = new Map<string, Array<Record<string, unknown>>>()
+    for (const device of cameraDevices) {
+      const providerId = String(device.providerId ?? '')
+      if (!groups.has(providerId)) {
+        groups.set(providerId, [])
+      }
+      groups.get(providerId)!.push(device)
+    }
+    return groups
+  }, [cameraDevices])
+
+  const isLoading = devicesLoading || providersLoading
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4">
+        <h1 className="text-lg font-semibold text-foreground">{t('nav.cameras', 'Cameras')}</h1>
+        <div className="flex items-center gap-3">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-subtle" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search cameras..."
+              className="rounded-lg border border-border bg-surface pl-8 pr-3 py-1.5 text-xs text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-primary/50 w-48"
+            />
+          </div>
+          <span className="text-[11px] text-foreground-subtle">
+            {cameraDevices.length} camera{cameraDevices.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+      </div>
+
+      {/* Loading state */}
+      {isLoading && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div key={i} className="aspect-[16/12] rounded-lg border border-border bg-surface animate-pulse" />
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!isLoading && cameraDevices.length === 0 && (
+        <div className="flex flex-col items-center py-20 text-foreground-subtle">
+          <Camera className="h-12 w-12 mb-4 opacity-20" />
+          <p className="text-sm font-medium text-foreground">No cameras found</p>
+          <p className="text-xs mt-1">
+            {search ? 'Try a different search term' : 'Add an integration to discover cameras'}
+          </p>
+        </div>
+      )}
+
+      {/* Provider sections */}
+      {!isLoading && Array.from(groupedByProvider.entries()).map(([providerId, providerDevices]) => {
+        const provider = providerList.find((p) => String(p.id) === providerId)
+        return (
+          <ProviderSection
+            key={providerId}
+            providerType={String(provider?.type ?? 'rtsp')}
+            providerName={String(provider?.name ?? providerId)}
+            providerStatus={String(provider?.status ?? 'stopped')}
+            devices={providerDevices.map((d) => ({
+              id: String(d.id),
+              name: String(d.name ?? d.id),
+              status: String(d.status ?? 'offline'),
+            }))}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/src/pages/Dashboard.tsx

@@ -0,0 +1,6 @@
+import '../components/dashboard/blocks'  // side-effect: registers all blocks
+import { DashboardGrid } from '../components/dashboard/DashboardGrid'
+
+export function DashboardPage() {
+  return <DashboardGrid />
+}

package/src/pages/DeviceDetail.tsx

@@ -0,0 +1,175 @@
+import { useState } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { ChevronRight } from 'lucide-react'
+import { useBackendClient } from '../hooks/useBackendClient'
+import { StatusBadge } from '../components/shared/StatusBadge'
+import { ProviderIcon, getProviderLabel } from '../components/shared/ProviderIcon'
+import { StreamArea } from '../components/cameras/StreamArea'
+import { LiveEventsPanel } from '../components/cameras/LiveEventsPanel'
+import { CameraEventsTab } from '../components/cameras/tabs/CameraEventsTab'
+import { PipelineTab } from '../components/cameras/tabs/PipelineTab'
+import { RecordingTab } from '../components/device/tabs/RecordingTab'
+import { ZonesTab } from '../components/device/tabs/ZonesTab'
+import { AddonsTab } from '../components/cameras/tabs/AddonsTab'
+import { StreamsTab } from '../components/cameras/tabs/StreamsTab'
+import { LogsTab } from '../components/device/tabs/LogsTab'
+import { ReplTab } from '../components/device/tabs/ReplTab'
+
+const TABS = [
+  { id: 'events',    label: 'Events' },
+  { id: 'pipeline',  label: 'Pipeline' },
+  { id: 'recording', label: 'Recording' },
+  { id: 'zones',     label: 'Zones' },
+  { id: 'addons',    label: 'Addons' },
+  { id: 'streams',   label: 'Streams' },
+  { id: 'logs',      label: 'Logs' },
+  { id: 'repl',      label: 'REPL' },
+] as const
+
+type TabId = (typeof TABS)[number]['id']
+
+export function DeviceDetailPage() {
+  const { deviceId } = useParams<{ deviceId: string }>()
+  const client = useBackendClient()
+  const [activeTab, setActiveTab] = useState<TabId>('events')
+
+  const { data: deviceData, isLoading } = useQuery({
+    queryKey: ['device', deviceId],
+    queryFn: () => client.getDevice(deviceId!),
+    enabled: !!deviceId,
+    refetchInterval: 5_000,
+  })
+
+  const device = (deviceData ?? {}) as Record<string, unknown>
+  const name = String(device.name ?? deviceId ?? 'Device')
+  const status = String(device.status ?? 'offline')
+  const provider = String(device.providerId ?? device.provider ?? 'rtsp')
+  const phase = String(device.phase ?? '—')
+  const priority = device.priority != null ? String(device.priority) : null
+
+  function renderTabContent() {
+    if (!deviceId) return null
+
+    switch (activeTab) {
+      case 'events':
+        return <CameraEventsTab deviceId={deviceId} />
+      case 'pipeline':
+        return <PipelineTab deviceId={deviceId} />
+      case 'recording':
+        return <RecordingTab />
+      case 'zones':
+        return <ZonesTab />
+      case 'addons':
+        return <AddonsTab deviceId={deviceId} />
+      case 'streams':
+        return <StreamsTab deviceId={deviceId} />
+      case 'logs':
+        return <LogsTab />
+      case 'repl':
+        return <ReplTab deviceId={deviceId} />
+      default:
+        return null
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="border-b border-border bg-surface px-6 py-4">
+          <div className="h-4 w-48 rounded bg-surface-hover animate-pulse mb-3" />
+          <div className="h-8 w-64 rounded bg-surface-hover animate-pulse" />
+        </div>
+        <div className="flex-1 p-6">
+          <div className="h-40 rounded-lg border border-border bg-surface animate-pulse" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with breadcrumb + status bar */}
+      <div className="border-b border-border bg-surface px-6 py-4">
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-1 text-[11px] text-foreground-subtle mb-3">
+          <Link to="/cameras" className="hover:text-foreground transition-colors">
+            Cameras
+          </Link>
+          <ChevronRight className="h-3 w-3" />
+          <span className="text-foreground-subtle">{getProviderLabel(provider)}</span>
+          <ChevronRight className="h-3 w-3" />
+          <span className="text-foreground">{name}</span>
+        </nav>
+
+        {/* Status bar */}
+        <div className="flex items-center gap-3">
+          <ProviderIcon type={provider} size="lg" />
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h1 className="text-base font-semibold text-foreground truncate">{name}</h1>
+              <StatusBadge status={status} />
+            </div>
+            <div className="flex items-center gap-3 mt-1 text-[10px] text-foreground-subtle">
+              <span className="inline-flex items-center gap-1">
+                <span className={`h-1.5 w-1.5 rounded-full ${status === 'online' || status === 'running' ? 'bg-success' : 'bg-foreground-subtle/30'}`} />
+                {status === 'online' || status === 'running' ? 'Online' : 'Offline'}
+              </span>
+              <span>Phase: <span className="text-foreground">{phase}</span></span>
+              {priority && <span>Priority: <span className="text-foreground">{priority}</span></span>}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Top row: stream area + live events panel */}
+      <div className="flex border-b border-border">
+        {/* Stream area */}
+        <div className="flex-1 p-4 border-r border-border">
+          <StreamArea
+            deviceName={name}
+            detectionsToday={0}
+            inferenceMs={0}
+            activeTracks={0}
+            storageGb={0}
+          />
+        </div>
+
+        {/* Live Events panel */}
+        <div className="w-[300px] flex-shrink-0 bg-surface">
+          <LiveEventsPanel deviceId={deviceId ?? ''} />
+        </div>
+      </div>
+
+      {/* Tab bar */}
+      <div className="border-b border-border bg-surface px-6">
+        <div className="flex items-center gap-0 overflow-x-auto">
+          {TABS.map((tab) => {
+            const isActive = activeTab === tab.id
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`relative flex-shrink-0 px-4 py-3 text-xs font-medium transition-colors ${
+                  isActive
+                    ? 'text-primary'
+                    : 'text-foreground-subtle hover:text-foreground'
+                }`}
+              >
+                {tab.label}
+                {isActive && (
+                  <span className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-primary" />
+                )}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {renderTabContent()}
+      </div>
+    </div>
+  )
+}