amliq-dashboard 2.0.0

package/src/components/dashboard/TopEntitiesTable.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '../ui/Badge';
+
+interface Entity {
+  name: string;
+  alerts: number;
+  risk: string;
+}
+
+interface Props {
+  entities: Entity[];
+}
+
+const riskColor: Record<string, 'red' | 'orange' | 'green' | 'blue'> = {
+  critical: 'red', high: 'orange', medium: 'orange', low: 'green',
+};
+
+const riskGlow: Record<string, string> = {
+  critical: 'shadow-[0_0_10px_rgba(255,69,58,0.3)]',
+  high: 'shadow-[0_0_10px_rgba(255,159,10,0.3)]',
+  medium: 'shadow-[0_0_8px_rgba(255,159,10,0.2)]',
+  low: 'shadow-[0_0_8px_rgba(48,209,88,0.2)]',
+};
+
+export function TopEntitiesTable({ entities }: Props) {
+  const { t } = useTranslation('dashboard');
+
+  return (
+    <div className="card-vibrancy p-xl">
+      <h3 className="sf-headline mb-lg">{t('top_entities')}</h3>
+      <div className="space-y-sm">
+        {entities.map((entity, i) => (
+          <div
+            key={entity.name}
+            className="flex items-center justify-between p-md rounded-apple-md bg-white/[0.03]
+              hover:bg-white/[0.06] hover:shadow-[0_0_20px_rgba(255,255,255,0.03)]
+              transition-all cursor-default group"
+          >
+            <div className="flex items-center gap-md">
+              <span className="text-[13px] font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-white/40 w-6 text-center font-mono">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+              <div>
+                <p className="text-[14px] font-medium text-white group-hover:text-apple-blue transition-colors">
+                  {entity.name}
+                </p>
+                <p className="text-[11px] text-apple-label-tertiary">
+                  {entity.alerts} {t('alerts')}
+                </p>
+              </div>
+            </div>
+            <div className={riskGlow[(entity.risk ?? '').toLowerCase()] ?? ''}>
+              <Badge size="sm" color={riskColor[(entity.risk ?? '').toLowerCase()] ?? 'blue'}>
+                {entity.risk ?? 'Unknown'}
+              </Badge>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/data/ComplianceMetrics.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ComplianceMetrics } from './ComplianceMetrics'
+
+vi.mock('../../api/client', () => ({
+  api: {
+    get: vi.fn(() => Promise.resolve({
+      openCases: 5,
+      activeMonitors: 3,
+      highRiskEntities: 2,
+      pendingEDD: 1,
+      unreviewedMedia: 4,
+      txnAlerts: 7,
+    })),
+  },
+}))
+
+describe('ComplianceMetrics', () => {
+  it('renders section title', async () => {
+    render(<ComplianceMetrics />)
+    const title = await screen.findByText('Compliance Overview')
+    expect(title).toBeInTheDocument()
+  })
+
+  it('renders stat cards', async () => {
+    render(<ComplianceMetrics />)
+    const card = await screen.findByText('Open Cases')
+    expect(card).toBeInTheDocument()
+    expect(screen.getByText('Active Monitors')).toBeInTheDocument()
+    expect(screen.getByText('Txn Alerts')).toBeInTheDocument()
+  })
+})

package/src/components/data/ComplianceMetrics.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StatCard } from './StatCard';
+import { api } from '../../api/client';
+
+interface ComplianceStats {
+  openCases: number;
+  activeMonitors: number;
+  highRiskEntities: number;
+  pendingEDD: number;
+  unreviewedMedia: number;
+  txnAlerts: number;
+}
+
+export function ComplianceMetrics() {
+  const { t } = useTranslation('dashboard');
+  const [stats, setStats] = useState<ComplianceStats | null>(null);
+
+  useEffect(() => {
+    api.get<ComplianceStats>('/dashboard/compliance')
+      .then((data) => setStats(data ?? null))
+      .catch(() => setStats(null));
+  }, []);
+
+  if (!stats) return null;
+
+  return (
+    <div>
+      <h3 className="sf-headline mb-lg">{t('compliance_overview')}</h3>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-lg">
+        <StatCard title={t('open_cases')} value={stats.openCases} color="orange" />
+        <StatCard title={t('active_monitors')} value={stats.activeMonitors} />
+        <StatCard title={t('high_risk')} value={stats.highRiskEntities} color="red" />
+        <StatCard title={t('pending_edd')} value={stats.pendingEDD} color="orange" />
+        <StatCard title={t('unreviewed_media')} value={stats.unreviewedMedia} />
+        <StatCard title={t('txn_alerts')} value={stats.txnAlerts} color="red" />
+      </div>
+    </div>
+  );
+}

package/src/components/data/ConfidenceScore.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { ConfidenceScore } from './ConfidenceScore'
+
+describe('ConfidenceScore', () => {
+  it('displays score as percentage', () => {
+    render(<ConfidenceScore score={75} />)
+    expect(screen.getByText('75%')).toBeInTheDocument()
+  })
+
+  it('rounds score to nearest integer', () => {
+    render(<ConfidenceScore score={75.6} />)
+    expect(screen.getByText('76%')).toBeInTheDocument()
+  })
+
+  it('renders high score with red color', () => {
+    render(<ConfidenceScore score={85} />)
+    const element = screen.getByText('85%')
+    expect(element).toHaveClass('text-apple-red', 'bg-apple-red/20')
+  })
+
+  it('renders medium score with orange color', () => {
+    render(<ConfidenceScore score={65} />)
+    const element = screen.getByText('65%')
+    expect(element).toHaveClass('text-apple-orange', 'bg-apple-orange/20')
+  })
+
+  it('renders low score with green color', () => {
+    render(<ConfidenceScore score={50} />)
+    const element = screen.getByText('50%')
+    expect(element).toHaveClass('text-apple-green', 'bg-apple-green/20')
+  })
+
+  it('uses boundary score 80 for red threshold', () => {
+    render(<ConfidenceScore score={80} />)
+    expect(screen.getByText('80%')).toHaveClass('text-apple-red', 'bg-apple-red/20')
+  })
+
+  it('uses boundary score 60 for orange threshold', () => {
+    render(<ConfidenceScore score={60} />)
+    expect(screen.getByText('60%')).toHaveClass('text-apple-orange', 'bg-apple-orange/20')
+  })
+
+  it('renders different sizes', () => {
+    const { rerender } = render(<ConfidenceScore score={75} size="sm" />)
+    let element = screen.getByText('75%')
+    expect(element).toHaveClass('text-xs', 'px-md', 'py-xs')
+
+    rerender(<ConfidenceScore score={75} size="md" />)
+    element = screen.getByText('75%')
+    expect(element).toHaveClass('text-sm', 'px-lg', 'py-md')
+
+    rerender(<ConfidenceScore score={75} size="lg" />)
+    element = screen.getByText('75%')
+    expect(element).toHaveClass('text-base', 'px-xl', 'py-lg')
+  })
+
+  it('has rounded-full class', () => {
+    render(<ConfidenceScore score={50} />)
+    expect(screen.getByText('50%')).toHaveClass('rounded-full', 'font-semibold')
+  })
+})

package/src/components/data/ConfidenceScore.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface ConfidenceScoreProps {
+  score: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function ConfidenceScore({ score, size = 'md' }: ConfidenceScoreProps) {
+  const getColor = (s: number) => {
+    if (s >= 80) return 'text-apple-red bg-apple-red/20';
+    if (s >= 60) return 'text-apple-orange bg-apple-orange/20';
+    return 'text-apple-green bg-apple-green/20';
+  };
+
+  const sizes = {
+    sm: 'text-xs px-md py-xs',
+    md: 'text-sm px-lg py-md',
+    lg: 'text-base px-xl py-lg',
+  };
+
+  return (
+    <div className={clsx('rounded-full font-semibold inline-block', getColor(score), sizes[size])}>
+      {score.toFixed(0)}%
+    </div>
+  );
+}

package/src/components/data/StatCard.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { StatCard } from './StatCard'
+
+describe('StatCard', () => {
+  it('renders title and value', () => {
+    render(<StatCard title="Total Alerts" value={42} />)
+    expect(screen.getByText('Total Alerts')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+
+  it('renders string value', () => {
+    render(<StatCard title="Status" value="Active" />)
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('renders positive trend with TrendingUp icon', () => {
+    const { container } = render(
+      <StatCard title="Growth" value={100} trend={12} />
+    )
+    expect(screen.getByText('12%')).toBeInTheDocument()
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders negative trend with TrendingDown icon', () => {
+    render(<StatCard title="Decline" value={50} trend={-5} />)
+    expect(screen.getByText('5%')).toBeInTheDocument()
+  })
+
+  it('displays absolute trend value', () => {
+    render(<StatCard title="Test" value={100} trend={-25} />)
+    expect(screen.getByText('25%')).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(
+      <StatCard
+        title="Resolution Time"
+        value="2.5h"
+        description="Average time in hours"
+      />
+    )
+    expect(screen.getByText('Average time in hours')).toBeInTheDocument()
+  })
+
+  it('renders different color variants', () => {
+    const { rerender } = render(
+      <StatCard title="Growth" value={10} trend={5} color="green" />
+    )
+    let trendDiv = screen.getByText('5%').parentElement
+    expect(trendDiv?.className).toContain('text-apple-green')
+
+    rerender(<StatCard title="Decline" value={20} trend={-8} color="red" />)
+    trendDiv = screen.getByText('8%').parentElement
+    expect(trendDiv?.className).toContain('text-apple-red')
+
+    rerender(<StatCard title="Change" value={30} trend={3} color="orange" />)
+    trendDiv = screen.getByText('3%').parentElement
+    expect(trendDiv?.className).toContain('text-apple-orange')
+  })
+
+  it('applies default blue color', () => {
+    render(<StatCard title="Default" value={5} trend={2} />)
+    const trendDiv = screen.getByText('2%').parentElement
+    expect(trendDiv?.className).toContain('text-apple-blue')
+  })
+
+  it('does not render trend when undefined', () => {
+    render(<StatCard title="No Trend" value={100} />)
+    expect(screen.queryByText('%')).not.toBeInTheDocument()
+  })
+})

package/src/components/data/StatCard.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  trend?: number;
+  description?: string;
+  color?: 'blue' | 'green' | 'red' | 'orange';
+}
+
+const glows: Record<string, string> = {
+  blue: 'shadow-[0_0_32px_rgba(10,132,255,0.15)]',
+  green: 'shadow-[0_0_32px_rgba(48,209,88,0.15)]',
+  orange: 'shadow-[0_0_32px_rgba(255,159,10,0.15)]',
+  red: 'shadow-[0_0_32px_rgba(255,69,58,0.15)]',
+};
+
+const trendGlow: Record<string, string> = {
+  up: 'text-apple-green drop-shadow-[0_0_6px_rgba(48,209,88,0.6)]',
+  down: 'text-apple-red drop-shadow-[0_0_6px_rgba(255,69,58,0.6)]',
+};
+
+const iconBg: Record<string, string> = {
+  blue: 'bg-apple-blue/10', green: 'bg-apple-green/10',
+  orange: 'bg-apple-orange/10', red: 'bg-apple-red/10',
+};
+
+export function StatCard({ title, value, trend, description, color = 'blue' }: StatCardProps) {
+  const trendDir = trend !== undefined ? (trend > 0 ? 'up' : 'down') : null;
+
+  return (
+    <div className={clsx(
+      'card-vibrancy p-xl rounded-apple-lg transition-all hover:scale-[1.02]',
+      glows[color],
+    )}>
+      <div className="flex items-center justify-between mb-md">
+        <p className="sf-caption tracking-wide uppercase text-[11px]">{title}</p>
+        <div className={clsx(
+          'w-8 h-8 rounded-full flex items-center justify-center animate-pulse',
+          iconBg[color],
+        )}>
+          <div className={clsx('w-2 h-2 rounded-full', `bg-apple-${color}`)} />
+        </div>
+      </div>
+      <h3 className="text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 mb-sm">
+        {value}
+      </h3>
+      <div className="flex items-center justify-between">
+        {description && <p className="sf-caption">{description}</p>}
+        {trendDir && (
+          <div className={clsx('flex items-center gap-xs font-bold text-sm', trendGlow[trendDir])}>
+            {trendDir === 'up'
+              ? <TrendingUp className="w-5 h-5" />
+              : <TrendingDown className="w-5 h-5" />}
+            <span>{Math.abs(trend!)}%</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/data/StatusBadge.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { StatusBadge } from './StatusBadge'
+
+describe('StatusBadge', () => {
+  it('renders status badge with correct color for open', () => {
+    render(<StatusBadge status="open" type="status" />)
+    expect(screen.getByText('Open')).toBeInTheDocument()
+    expect(screen.getByText('Open')).toHaveClass('bg-apple-blue/20', 'text-apple-blue')
+  })
+
+  it('renders status badge with correct color for investigating', () => {
+    render(<StatusBadge status="investigating" type="status" />)
+    expect(screen.getByText('Investigating')).toBeInTheDocument()
+    expect(screen.getByText('Investigating')).toHaveClass('bg-apple-orange/20', 'text-apple-orange')
+  })
+
+  it('renders status badge with correct color for resolved', () => {
+    render(<StatusBadge status="resolved" type="status" />)
+    expect(screen.getByText('Resolved')).toBeInTheDocument()
+    expect(screen.getByText('Resolved')).toHaveClass('bg-apple-green/20', 'text-apple-green')
+  })
+
+  it('renders status badge with correct color for archived', () => {
+    render(<StatusBadge status="archived" type="status" />)
+    expect(screen.getByText('Archived')).toBeInTheDocument()
+    expect(screen.getByText('Archived')).toHaveClass('bg-white/10', 'text-white')
+  })
+
+  it('renders priority badge with correct color for critical', () => {
+    render(<StatusBadge priority="critical" type="priority" />)
+    expect(screen.getByText('CRITICAL')).toBeInTheDocument()
+    expect(screen.getByText('CRITICAL')).toHaveClass('bg-apple-red/20', 'text-apple-red')
+  })
+
+  it('renders priority badge with correct color for high', () => {
+    render(<StatusBadge priority="high" type="priority" />)
+    expect(screen.getByText('HIGH')).toBeInTheDocument()
+    expect(screen.getByText('HIGH')).toHaveClass('bg-apple-orange/20', 'text-apple-orange')
+  })
+
+  it('renders priority badge with correct color for medium', () => {
+    render(<StatusBadge priority="medium" type="priority" />)
+    expect(screen.getByText('MEDIUM')).toBeInTheDocument()
+    expect(screen.getByText('MEDIUM')).toHaveClass('bg-apple-orange/20', 'text-apple-orange')
+  })
+
+  it('renders priority badge with correct color for low', () => {
+    render(<StatusBadge priority="low" type="priority" />)
+    expect(screen.getByText('LOW')).toBeInTheDocument()
+    expect(screen.getByText('LOW')).toHaveClass('bg-white/10', 'text-white')
+  })
+
+  it('returns null when no status or priority provided', () => {
+    const { container } = render(<StatusBadge />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when type does not match prop', () => {
+    const { container } = render(<StatusBadge status="open" type="priority" />)
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/components/data/StatusBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Badge } from '../ui/Badge';
+import type { AlertStatus, AlertPriority } from '../../types';
+
+interface StatusBadgeProps {
+  status?: AlertStatus;
+  priority?: AlertPriority;
+  type?: 'status' | 'priority';
+}
+
+export function StatusBadge({ status, priority, type = 'status' }: StatusBadgeProps) {
+  if (type === 'status' && status) {
+    const colors: Record<AlertStatus, any> = {
+      open: 'blue',
+      investigating: 'orange',
+      resolved: 'green',
+      archived: 'gray',
+    };
+    const labels: Record<AlertStatus, string> = {
+      open: 'Open',
+      investigating: 'Investigating',
+      resolved: 'Resolved',
+      archived: 'Archived',
+    };
+    return <Badge color={colors[status]}>{labels[status]}</Badge>;
+  }
+
+  if (type === 'priority' && priority) {
+    const colors: Record<AlertPriority, any> = {
+      critical: 'red',
+      high: 'orange',
+      medium: 'orange',
+      low: 'gray',
+    };
+    return <Badge color={colors[priority]}>{priority.toUpperCase()}</Badge>;
+  }
+
+  return null;
+}

package/src/components/layout/AppShell.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useCallback } from 'react';
+import { Sidebar } from './Sidebar';
+import { Toolbar } from './Toolbar';
+import { Breadcrumbs } from './Breadcrumbs';
+import { useSidebar } from '../../hooks/useSidebar';
+
+interface AppShellProps {
+  children: React.ReactNode;
+}
+
+export function AppShell({ children }: AppShellProps) {
+  const { isOpen, toggle, close, open } = useSidebar();
+  const touchStart = useRef(0);
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    touchStart.current = e.touches[0].clientX;
+  }, []);
+
+  const onTouchEnd = useCallback((e: React.TouchEvent) => {
+    const dx = e.changedTouches[0].clientX - touchStart.current;
+    if (dx > 80 && touchStart.current < 40) open();
+    if (dx < -80 && isOpen) close();
+  }, [isOpen, open, close]);
+
+  return (
+    <div className="flex h-screen bg-apple-bg"
+      onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <Sidebar isOpen={isOpen} onClose={close} />
+      <div className="flex-1 flex flex-col overflow-hidden relative">
+        <div
+          className="absolute inset-0 pointer-events-none opacity-40"
+          style={{
+            background: 'radial-gradient(ellipse 60% 40% at 50% 0%, rgba(10,132,255,0.04) 0%, transparent 70%)',
+          }}
+          aria-hidden="true"
+        />
+        <Toolbar onMenuClick={toggle} />
+        <Breadcrumbs />
+        <main id="main-content" className="flex-1 overflow-y-auto relative" tabIndex={-1}>
+          <div className="p-lg md:p-xxl max-w-7xl mx-auto min-h-[60vh]">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/layout/Breadcrumbs.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { ChevronRight, Home } from 'lucide-react'
+
+const labelMap: Record<string, string> = {
+  dashboard: 'Dashboard', alerts: 'Alerts', screen: 'Screen',
+  monitoring: 'Monitoring', batch: 'Batch Jobs', compliance: 'Compliance',
+  cases: 'Cases', risk: 'Risk', pep: 'PEP', media: 'Adverse Media',
+  txn: 'Transactions', crypto: 'Crypto', analytics: 'Analytics',
+  audit: 'Audit Log', lists: 'Lists', marketplace: 'Marketplace',
+  config: 'Configuration', billing: 'Billing', team: 'Team',
+  admin: 'Admin', tenants: 'Tenants', health: 'Health',
+  keys: 'API Keys', webhooks: 'Webhooks', platform: 'Platform',
+  users: 'Users', overview: 'Overview',
+  'data-sources': 'Data Sources', 'txn-screen': 'Txn Screen',
+}
+
+export function Breadcrumbs() {
+  const location = useLocation()
+  const parts = location.pathname.split('/').filter(Boolean)
+
+  if (parts.length <= 1) return null
+
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-xs px-lg py-sm text-[12px]">
+      <Link to="/dashboard" className="text-apple-label-tertiary hover:text-white transition-colors">
+        <Home className="w-3.5 h-3.5" />
+      </Link>
+      {parts.map((part, i) => {
+        const path = '/' + parts.slice(0, i + 1).join('/')
+        const isLast = i === parts.length - 1
+        const label = labelMap[part] || part
+        return (
+          <React.Fragment key={path}>
+            <ChevronRight className="w-3 h-3 text-white/20" />
+            {isLast ? (
+              <span className="text-white/60">{label}</span>
+            ) : (
+              <Link to={path} className="text-apple-label-tertiary hover:text-white transition-colors">
+                {label}
+              </Link>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}

package/src/components/layout/CommandPalette.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search } from 'lucide-react'
+import { navSections, canAccess } from './navItems'
+import { useAuth } from '../../context/AuthContext'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+}
+
+export function CommandPalette({ open, onClose }: Props) {
+  const [query, setQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null!)
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const role = user?.role ?? 'viewer'
+
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        open ? onClose() : onClose() // toggle handled by parent
+      }
+      if (e.key === 'Escape' && open) onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const allItems = navSections
+    .filter((s) => canAccess(role, s.minRole))
+    .flatMap((s) => s.items.filter((i) => canAccess(role, i.minRole)))
+
+  const filtered = query
+    ? allItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()))
+    : allItems
+
+  const go = (path: string) => {
+    navigate(path)
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh]"
+      onClick={onClose}>
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div className="relative w-full max-w-lg bg-[#1a1a24] border border-white/10 rounded-apple-lg shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-md px-lg border-b border-white/[0.06]">
+          <Search className="w-4 h-4 text-apple-label-tertiary" />
+          <input ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search pages..." className="flex-1 py-lg bg-transparent text-white text-sm outline-none" />
+          <kbd className="text-[10px] text-apple-label-tertiary bg-white/5 px-1.5 py-0.5 rounded">ESC</kbd>
+        </div>
+        <div className="max-h-64 overflow-y-auto py-sm">
+          {filtered.map(({ icon: Icon, label, path }) => (
+            <button key={path} onClick={() => go(path)}
+              className="w-full flex items-center gap-md px-lg py-md hover:bg-white/5 text-left cursor-pointer transition-colors">
+              <Icon className="w-4 h-4 text-apple-label-secondary" />
+              <span className="text-sm text-white">{label}</span>
+              <span className="ml-auto text-[11px] text-apple-label-tertiary">{path}</span>
+            </button>
+          ))}
+          {filtered.length === 0 && (
+            <p className="px-lg py-md text-sm text-apple-label-tertiary">No results</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/layout/DashboardLayout.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+  sidebar?: React.ReactNode
+}
+
+export default function DashboardLayout({ children, sidebar }: DashboardLayoutProps) {
+  return (
+    <div className="flex h-screen bg-apple-bg">
+      {sidebar && (
+        <aside className="hidden md:block w-64 border-r border-white/10">{sidebar}</aside>
+      )}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+    </div>
+  )
+}