ahoy_analytics 0.1.0

data/app/frontend/pages/admin/analytics/ui/pages-panel.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { fetchPages } from '../api'
+import { useQueryContext } from '../query-context'
+import type { ListMetricKey, ListPayload } from '../types'
+import { useSiteContext } from '../site-context'
+import { MetricTable } from './list-table'
+import RemoteDetailsDialog from './remote-details-dialog'
+import {
+  parseDialogFromPath,
+  buildDialogPath,
+  baseAnalyticsPath,
+  pagesSegmentForMode,
+  pagesModeForSegment
+} from '../lib/dialog-path'
+import { analyticsPath } from '../lib/base-path'
+import DetailsButton from './details-button'
+import { PanelTab, PanelTabs } from './panel-tabs'
+
+const PAGE_TABS: Array<{ value: string; label: string; short: string }> = [
+  { value: 'pages', label: 'Top Pages', short: 'Top Pages' },
+  { value: 'entry', label: 'Entry Pages', short: 'Entry Pages' },
+  { value: 'exit', label: 'Exit Pages', short: 'Exit Pages' }
+]
+
+const TITLE_FOR_MODE: Record<string, string> = {
+  pages: 'Top Pages',
+  entry: 'Entry Pages',
+  exit: 'Exit Pages'
+}
+
+const STORAGE_PREFIX = 'admin.analytics.pages'
+
+type PagesPanelProps = {
+  initialData: ListPayload
+}
+
+export default function PagesPanel({ initialData }: PagesPanelProps) {
+  const { query, updateQuery } = useQueryContext()
+  const site = useSiteContext()
+
+  const [data, setData] = useState<ListPayload>(initialData)
+  const [mode, setMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return 'pages'
+    }
+    const stored = localStorage.getItem(`${STORAGE_PREFIX}.${site.domain}`)
+    return stored && PAGE_TABS.some((tab) => tab.value === stored) ? stored : 'pages'
+  })
+  const [loading, setLoading] = useState(false)
+  const [detailsOpen, setDetailsOpen] = useState(false)
+
+  const highlightMetric = useMemo(
+    () => (data.metrics.includes('visitors') ? 'visitors' : data.metrics[0]),
+    [data.metrics]
+  )
+
+  const activeTitle = useMemo(() => TITLE_FOR_MODE[mode] ?? 'Pages', [mode])
+
+  const firstColumnLabel = useMemo(() => {
+    switch (mode) {
+      case 'entry':
+        return 'Entry page'
+      case 'exit':
+        return 'Exit page'
+      default:
+        return 'Page'
+    }
+  }, [mode])
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true)
+    fetchPages(query, { mode }, controller.signal)
+      .then(setData)
+      .catch((error) => {
+        if (error.name !== 'AbortError') console.error(error)
+      })
+      .finally(() => setLoading(false))
+    return () => controller.abort()
+  }, [mode, query])
+
+  // Deep-link: open Pages dialog for /_/pages, /_/entry-pages, /_/exit-pages
+  useEffect(() => {
+    const parsed = parseDialogFromPath(window.location.pathname)
+    if (parsed.type === 'segment') {
+      const modeFromSeg = pagesModeForSegment(parsed.segment)
+      if (modeFromSeg) {
+        if (mode !== modeFromSeg) setMode(modeFromSeg)
+        setDetailsOpen(true)
+      }
+    }
+  }, [])
+
+  const drillKey = useMemo(() => {
+    switch (mode) {
+      case 'entry':
+        return 'entry_page'
+      case 'exit':
+        return 'exit_page'
+      default:
+        return 'page'
+    }
+  }, [mode])
+
+  const drillInto = useCallback(
+    (value: string) => {
+      updateQuery((current) => ({
+        ...current,
+        filters: { ...current.filters, [drillKey]: value }
+      }))
+    },
+    [drillKey, updateQuery]
+  )
+
+  // Limit card view to top 9 by the first metric; Details uses full list
+  const limitedData = useMemo((): ListPayload => {
+    const metricKey = data.metrics[0] ?? 'visitors'
+    const sorted = [...data.results].sort((a, b) => {
+      const av = Number(a[metricKey] ?? 0)
+      const bv = Number(b[metricKey] ?? 0)
+      if (av === bv) return String(a.name).localeCompare(String(b.name))
+      return bv - av
+    })
+    const sliced = sorted.slice(0, 9)
+    return { ...data, metrics: ['visitors'] as ListMetricKey[], results: sliced, meta: { ...data.meta, hasMore: data.results.length > 9 } }
+  }, [data])
+
+  return (
+    <section className="flex flex-col gap-5 rounded-xl border border-border bg-card p-5 shadow-[0_12px_26px_rgba(7,9,16,0.32)]" data-testid="pages-panel">
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-lg/6 font-semibold text-foreground/80">{activeTitle}</h2>
+        <PanelTabs>
+          {PAGE_TABS.map((tab) => (
+            <PanelTab
+              key={tab.value}
+              active={mode === tab.value}
+              onClick={() => {
+                setMode(tab.value)
+                localStorage.setItem(`${STORAGE_PREFIX}.${site.domain}`, tab.value)
+              }}
+            >
+              {tab.short}
+            </PanelTab>
+          ))}
+        </PanelTabs>
+      </header>
+
+      {loading ? (
+        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">Loading…</div>
+      ) : data.results.length === 0 ? (
+        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">No data yet</div>
+      ) : (
+        <>
+          <MetricTable
+            data={limitedData}
+            highlightedMetric={highlightMetric ?? 'visitors'}
+            onRowClick={(item) => drillInto(String(item.name))}
+            displayBars={false}
+            firstColumnLabel={firstColumnLabel}
+            metricLabels={mode === 'entry' ? { visitors: 'Unique Entrances' } : (mode === 'exit' ? { visitors: 'Unique Exits' } : undefined)}
+            barColorTheme="cyan"
+            testId="pages"
+          />
+          <div className="mt-auto flex justify-center pt-3">
+            <DetailsButton data-testid="pages-details-btn" onClick={() => {
+              setDetailsOpen(true)
+              try {
+                const sp = new URLSearchParams(window.location.search)
+                sp.delete('dialog'); sp.delete('mode')
+                const seg = pagesSegmentForMode(mode as 'pages' | 'entry' | 'exit')
+                window.history.pushState({}, '', buildDialogPath(seg, sp.toString()))
+              } catch {}
+            }}>Details</DetailsButton>
+          </div>
+        </>
+      )}
+
+      <RemoteDetailsDialog
+        open={detailsOpen}
+        onOpenChange={(open) => {
+          setDetailsOpen(open)
+          try {
+            const sp = new URLSearchParams(window.location.search)
+            sp.delete('dialog'); sp.delete('mode')
+            const qs = sp.toString()
+            if (open) {
+              const seg = pagesSegmentForMode(mode as 'pages' | 'entry' | 'exit')
+              window.history.pushState({}, '', buildDialogPath(seg, qs))
+            } else {
+              window.history.pushState({}, '', baseAnalyticsPath(qs))
+            }
+          } catch {}
+        }}
+        title={activeTitle}
+        endpoint={analyticsPath('pages')}
+        extras={{ mode }}
+        defaultSortKey={'visitors'}
+        firstColumnLabel={firstColumnLabel}
+        onRowClick={(item) => {
+          drillInto(String(item.name))
+          setDetailsOpen(false)
+        }}
+      />
+    </section>
+  )
+}

data/app/frontend/pages/admin/analytics/ui/panel-tabs.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+export function PanelTabs({ children }: { children: ReactNode }) {
+  return <div className="flex items-center gap-4 text-sm font-semibold">{children}</div>
+}
+
+export function PanelTab({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={[
+        'rounded-none border-b-2 pb-1 transition-colors',
+        active ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-primary'
+      ].join(' ')}
+    >
+      {children}
+    </button>
+  )
+}
+
+type PanelTabDropdownProps = {
+  active: boolean
+  label: string
+  options: Array<{ label: string; value: string }>
+  onSelect: (value: string) => void
+}
+
+export function PanelTabDropdown({ active, label, options, onSelect }: PanelTabDropdownProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={[
+            'inline-flex items-center gap-1 border-b-2 pb-1 transition-colors',
+            active ? 'border-primary text-primary' : 'border-transparent hover:text-primary'
+          ].join(' ')}
+        >
+          {label}
+          <ChevronDown className="size-3.5" aria-hidden="true" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48 text-sm">
+        {options.map((option) => (
+          <DropdownMenuItem
+            key={option.value}
+            onClick={() => onSelect(option.value)}
+            className="cursor-pointer"
+          >
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

data/app/frontend/pages/admin/analytics/ui/remote-details-dialog.tsx

@@ -0,0 +1,356 @@
+import { createPortal } from 'react-dom'
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ChangeEvent
+} from 'react'
+
+import { X } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+import type { AnalyticsQuery, ListItem, ListMetricKey, ListPayload } from '../types'
+import { FORMATTERS, METRIC_LABELS, renderFlag } from './list-table'
+import { useQueryContext } from '../query-context'
+import { fetchListPage } from '../api'
+import { useDebounce } from '../hooks/use-debounce'
+
+type SortState = {
+  key: 'name' | ListMetricKey
+  direction: 'asc' | 'desc'
+}
+
+type RemoteDetailsDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  endpoint: string
+  extras?: Record<string, unknown>
+  firstColumnLabel?: string
+  onRowClick?: (item: ListItem) => void
+  renderLeading?: (item: ListItem) => React.ReactNode
+  initialLimit?: number
+  getExternalLinkUrl?: (item: ListItem) => string | null
+  sortable?: boolean
+  defaultSortKey?: SortState['key']
+  initialSearch?: string
+}
+
+export default function RemoteDetailsDialog({
+  open,
+  onOpenChange,
+  title,
+  endpoint,
+  extras = {},
+  firstColumnLabel = 'Item',
+  onRowClick,
+  renderLeading,
+  initialLimit = 100,
+  getExternalLinkUrl,
+  sortable = true,
+  defaultSortKey,
+  initialSearch
+}: RemoteDetailsDialogProps) {
+  const { query } = useQueryContext()
+  const [mounted, setMounted] = useState(false)
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [sort, setSort] = useState<SortState>(() => {
+    const key = defaultSortKey ?? 'visitDuration'
+    return { key, direction: key === 'name' ? 'asc' : 'desc' }
+  })
+  const [metrics, setMetrics] = useState<ListMetricKey[]>(['visitors'])
+  const [metricLabels, setMetricLabels] = useState<Record<string, string>>({})
+  const [items, setItems] = useState<ListItem[]>([])
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const previousOverflow = useRef<string | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+
+  // Debounced search following Plausible's 300ms pattern
+  const debouncedSetSearch = useDebounce<(value: string) => void>((value: string) => {
+    setDebouncedSearch(value)
+    setPage(1) // Reset to first page on search
+  }, 300)
+
+  const handleSearchChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setSearch(value)
+    debouncedSetSearch(value)
+  }, [debouncedSetSearch])
+
+  // Mount tracking
+  useEffect(() => setMounted(true), [])
+
+  // Seed search on open (useful for props subset)
+  useEffect(() => {
+    if (open && initialSearch && !search) {
+      setSearch(initialSearch)
+      setDebouncedSearch(initialSearch)
+      setPage(1)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialSearch])
+
+  // Body scroll lock
+  useEffect(() => {
+    if (!open) {
+      if (previousOverflow.current != null) {
+        document.body.style.overflow = previousOverflow.current
+        previousOverflow.current = null
+      }
+      return
+    }
+    previousOverflow.current = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      if (previousOverflow.current != null) {
+        document.body.style.overflow = previousOverflow.current
+        previousOverflow.current = null
+      }
+    }
+  }, [open])
+
+  // Focus handling
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => dialogRef.current?.focus(), 0)
+    }
+  }, [open])
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      onOpenChange(false)
+    }
+    if (event.key === '/' && !(event.target instanceof HTMLInputElement)) {
+      event.preventDefault()
+      inputRef.current?.focus()
+    }
+  }, [onOpenChange])
+
+  useEffect(() => {
+    if (!open) return
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [open, handleKeyDown])
+
+  // Fetch first page when opened or when query/extras/debouncedSearch/sort change
+  // Following Plausible's pattern: new search resets page to 1
+  useEffect(() => {
+    if (!open) return
+    let aborted = false
+    setLoading(true)
+    setPage(1)
+
+    // Build order_by following Plausible's format: [["metric", "direction"]]
+    const orderBy = sortable ? [[sort.key, sort.direction]] : undefined
+
+    fetchListPage(endpoint, query as AnalyticsQuery, extras, {
+      limit: initialLimit,
+      page: 1,
+      search: debouncedSearch,
+      orderBy
+    })
+      .then((rawPayload: any) => {
+        const payload: ListPayload = (rawPayload && (rawPayload.results || rawPayload.metrics)) ? rawPayload : rawPayload?.list || rawPayload
+        if (aborted) return
+        setItems(payload.results.map(normalizeItemKeys))
+        const normalizedMetrics = payload.metrics.map(normalizeMetricKey) as ListMetricKey[]
+        setMetrics(normalizedMetrics)
+        const labels = (payload.meta as any).metricLabels || (payload.meta as any).metric_labels
+        if (labels && typeof labels === 'object') {
+          // Normalize keys to camelCase to match ListMetricKey in UI
+          const normalized: Record<string, string> = {}
+          for (const [k, v] of Object.entries(labels as Record<string, string>)) {
+            const ck = k.includes('_') ? k.replace(/_([a-z])/g, (_, c) => c.toUpperCase()) : k
+            normalized[ck] = String(v)
+          }
+          setMetricLabels(normalized)
+        } else {
+          setMetricLabels({})
+        }
+        // If current sort key is not available, fall back to visitors (desc) or name (asc)
+        if (!normalizedMetrics.includes(sort.key as ListMetricKey) && sort.key !== 'name') {
+          setSort({ key: normalizedMetrics.includes('visitors') ? 'visitors' : 'name', direction: normalizedMetrics.includes('visitors') ? 'desc' : 'asc' })
+        }
+        setHasMore(Boolean(payload.meta?.hasMore))
+      })
+      .catch((err) => { if (!aborted) console.error(err) })
+      .finally(() => { if (!aborted) setLoading(false) })
+    return () => { aborted = true }
+  }, [open, endpoint, JSON.stringify(extras), JSON.stringify(query), debouncedSearch, sort.key, sort.direction, initialLimit])
+
+  const loadMore = useCallback(() => {
+    const next = page + 1
+    setLoading(true)
+    let aborted = false
+
+    // Build order_by following Plausible's format: [["metric", "direction"]]
+    const orderBy = [[sort.key, sort.direction]]
+
+    fetchListPage(endpoint, query as AnalyticsQuery, extras, {
+      limit: initialLimit,
+      page: next,
+      search: debouncedSearch,
+      orderBy
+    })
+      .then((rawPayload: any) => {
+        const payload: ListPayload = (rawPayload && (rawPayload.results || rawPayload.metrics)) ? rawPayload : rawPayload?.list || rawPayload
+        if (aborted) return
+        setItems((prev) => prev.concat(payload.results.map(normalizeItemKeys)))
+        setHasMore(Boolean(payload.meta?.hasMore))
+        setPage(next)
+      })
+      .catch((err) => { if (!aborted) console.error(err) })
+      .finally(() => { if (!aborted) setLoading(false) })
+    return () => { aborted = true }
+  }, [endpoint, query, extras, page, initialLimit, debouncedSearch, sort.key, sort.direction])
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false)
+    setSearch('')
+    setDebouncedSearch('')
+    setItems([])
+    setPage(1)
+    setHasMore(false)
+  }, [onOpenChange])
+
+  const onDialogKeyDown = useCallback((event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      onOpenChange(false)
+    }
+  }, [onOpenChange])
+
+  // Backend sorting - toggle sort triggers a re-fetch via useEffect
+  const toggleSort = useCallback((key: SortState['key']) => {
+    setSort((current) => {
+      if (current.key === key) {
+        return { key, direction: current.direction === 'asc' ? 'desc' : 'asc' }
+      }
+      // Default to desc for metrics, asc for name
+      return { key, direction: key === 'name' ? 'asc' : 'desc' }
+    })
+  }, [])
+
+  if (!mounted || !open) return null
+
+  function normalizeMetricKey(k: string): string {
+    if (k.includes('_')) {
+      return k.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
+    }
+    return k
+  }
+
+  // Ensure result item keys follow our camelCase convention
+  function normalizeItemKeys(item: ListItem): ListItem {
+    const out: Record<string, any> = { ...item }
+    for (const key of Object.keys(item)) {
+      if (key.includes('_')) {
+        const camel = key.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
+        if (typeof out[camel] === 'undefined') {
+          out[camel] = (item as any)[key]
+        }
+      }
+    }
+    return out as ListItem
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[60] flex items-start justify-center bg-slate-950/80 p-4 pt-10 sm:pt-10 md:pt-12 lg:pt-16 backdrop-blur-sm" onClick={handleClose}>
+      <div ref={dialogRef} role="dialog" aria-modal="true" tabIndex={-1} className="relative mx-auto flex h-[84vh] max-h-[84vh] w-full max-w-6xl flex-col rounded-xl border border-border bg-card shadow-[0_16px_48px_rgba(7,9,16,0.5)] outline-none" onClick={(e) => e.stopPropagation()} onKeyDown={onDialogKeyDown}>
+        <header className="flex flex-col gap-2 border-b border-border px-6 py-4 sm:flex-row sm:items-center sm:justify-between md:px-8 md:py-5">
+          <div>
+            <h2 className="text-xl font-semibold text-foreground/90">{title}</h2>
+          </div>
+          <div className="flex w-full items-center gap-3 sm:w-auto">
+            <Input ref={inputRef} placeholder="Press / to search" value={search} onChange={handleSearchChange} className="h-9 w-full sm:w-56" />
+            <Button variant="ghost" size="icon" onClick={handleClose} aria-label="Close details dialog">
+              <X className="size-5" />
+            </Button>
+          </div>
+        </header>
+
+        <div className="flex-1 overflow-y-auto p-0 md:p-0">
+          <table className="min-w-full table-fixed">
+            <thead className="sticky top-0 z-10 bg-background/95">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-foreground/60">
+                    {sortable ? (
+                      <button type="button" className="flex items-center gap-1 text-left" onClick={() => toggleSort('name')}>
+                        {firstColumnLabel}
+                        <span className="text-[11px] leading-none text-foreground/50">{sort.key === 'name' ? (sort.direction === 'asc' ? '▲' : '▼') : ''}</span>
+                      </button>
+                    ) : (
+                      <span className="flex items-center gap-1 text-left">{firstColumnLabel}</span>
+                    )}
+                  </th>
+                  {metrics.map((metric) => (
+                    <th key={metric} className="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-foreground/60">
+                      {sortable ? (
+                        <button type="button" className="flex w-full items-center justify-end gap-1" onClick={() => toggleSort(metric as SortState['key'])}>
+                          {metricLabels[metric] ?? METRIC_LABELS[metric] ?? metric}
+                          <span className="text-[11px] leading-none text-foreground/50">{sort.key === metric ? (sort.direction === 'asc' ? '▲' : '▼') : ''}</span>
+                        </button>
+                      ) : (
+                        <span className="flex w-full items-center justify-end gap-1">{metricLabels[metric] ?? METRIC_LABELS[metric] ?? metric}</span>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border bg-card text-sm">
+                {items.map((item) => (
+                  <tr key={item.name} className={`transition hover:bg-white/5 ${onRowClick ? 'cursor-pointer' : ''}`} onClick={() => onRowClick?.(item)}>
+                    <td className="px-6 py-3">
+                      <div className="flex items-center gap-2">
+                        {renderLeading ? renderLeading(item) : renderFlag(item)}
+                        {getExternalLinkUrl ? (
+                          (() => {
+                            const href = getExternalLinkUrl(item)
+                            return href ? (
+                              <a href={href} target="_blank" rel="noopener noreferrer" className="font-medium text-foreground/90 underline decoration-white/20 hover:decoration-white/40 break-all whitespace-normal">
+                                {item.name}
+                              </a>
+                            ) : (
+                              <span className="font-medium text-foreground/90">{item.name}</span>
+                            )
+                          })()
+                        ) : (
+                          <span className="font-medium text-foreground/90">{item.name}</span>
+                        )}
+                      </div>
+                    </td>
+                    {metrics.map((metric) => (
+                      <td key={metric} className="px-6 py-3 text-right">
+                        <span className="tabular-nums text-foreground/80">{formatCell(metric, item[metric])}</span>
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+        </div>
+
+        <footer className="flex shrink-0 items-center justify-between border-t border-border px-6 py-3 text-sm md:px-8 md:py-4">
+          <div className="text-foreground/60">{loading ? 'Loading…' : hasMore ? 'Scroll for more or click Load More' : 'End of results'}</div>
+          {hasMore ? (
+            <Button onClick={loadMore} disabled={loading} variant="secondary">Load More</Button>
+          ) : null}
+        </footer>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+function formatCell(metric: string, value: unknown) {
+  const formatter = FORMATTERS[metric as ListMetricKey]
+  return formatter ? formatter(value as number | null | undefined) : String(value ?? 0)
+}

data/app/frontend/pages/admin/analytics/ui/simple-tabs.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+const TabsContext = createContext<{
+  value: string
+  onChange: (value: string) => void
+} | null>(null)
+
+type TabsProps = {
+  value: string
+  onValueChange: (value: string) => void
+  children: ReactNode
+}
+
+export function Tabs({ value, onValueChange, children }: TabsProps) {
+  return <TabsContext.Provider value={{ value, onChange: onValueChange }}>{children}</TabsContext.Provider>
+}
+
+type TabsListProps = {
+  children: ReactNode
+  className?: string
+}
+
+export function TabsList({ children, className }: TabsListProps) {
+  return <div className={['inline-flex items-center rounded-full border bg-muted/60 p-1', className].filter(Boolean).join(' ')}>{children}</div>
+}
+
+type TabsTriggerProps = {
+  value: string
+  children: ReactNode
+  className?: string
+}
+
+export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
+  const context = useContext(TabsContext)
+  if (!context) {
+    throw new Error('TabsTrigger must be used within Tabs')
+  }
+  const isActive = context.value === value
+  return (
+    <button
+      type="button"
+      onClick={() => context.onChange(value)}
+      className={[
+        'rounded-full px-3 py-1 text-xs font-medium transition',
+        isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-background',
+        className
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </button>
+  )
+}