amliq-dashboard 2.0.0

package/src/components/ui/EmptyState.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { EmptyState } from './EmptyState'
+import { Button } from './Button'
+
+describe('EmptyState', () => {
+  it('renders title', () => {
+    render(<EmptyState title="No results" />)
+    expect(screen.getByText('No results')).toBeInTheDocument()
+  })
+
+  it('renders description', () => {
+    render(
+      <EmptyState
+        title="No data"
+        description="Try adjusting your filters"
+      />
+    )
+    expect(screen.getByText('Try adjusting your filters')).toBeInTheDocument()
+  })
+
+  it('renders action button', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        action={<Button>Go Back</Button>}
+      />
+    )
+    expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument()
+  })
+
+  it('renders all content together', () => {
+    render(
+      <EmptyState
+        title="No alerts"
+        description="Your alert queue is clear"
+        action={<Button variant="secondary">Refresh</Button>}
+      />
+    )
+    expect(screen.getByText('No alerts')).toBeInTheDocument()
+    expect(screen.getByText('Your alert queue is clear')).toBeInTheDocument()
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('renders without optional props', () => {
+    render(<EmptyState title="Minimal" />)
+    expect(screen.getByText('Minimal')).toBeInTheDocument()
+  })
+})

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InboxIcon } from 'lucide-react';
+
+export interface EmptyStateProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({ title, description, icon, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-xxl px-lg text-center">
+      <div className="mb-lg text-apple-label-tertiary">
+        {icon || <InboxIcon className="w-12 h-12 mx-auto" />}
+      </div>
+      <h3 className="sf-headline mb-sm">{title}</h3>
+      {description && <p className="sf-caption mb-lg max-w-xs">{description}</p>}
+      {action}
+    </div>
+  );
+}

package/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from './Button';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <div className="flex flex-col items-center justify-center h-64 text-center">
+          <h2 className="sf-title mb-md">Something went wrong</h2>
+          <p className="sf-caption mb-lg">{this.state.error?.message}</p>
+          <Button variant="primary" onClick={this.handleReset}>
+            Try Again
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/components/ui/ExportMenu.tsx

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect } from 'react'
+import { Download, FileSpreadsheet, FileText, FileJson } from 'lucide-react'
+import clsx from 'clsx'
+
+interface ExportOption {
+  label: string
+  format: string
+  icon: typeof FileText
+  gradient: string
+}
+
+const options: ExportOption[] = [
+  { label: 'Export CSV', format: 'csv', icon: FileSpreadsheet, gradient: 'from-green-500 to-emerald-600' },
+  { label: 'Export PDF', format: 'pdf', icon: FileText, gradient: 'from-red-500 to-rose-600' },
+  { label: 'Export JSON', format: 'json', icon: FileJson, gradient: 'from-blue-500 to-indigo-600' },
+]
+
+interface ExportMenuProps {
+  onExport: (format: string) => void
+  className?: string
+}
+
+export function ExportMenu({ onExport, className }: ExportMenuProps) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  return (
+    <div ref={ref} className={clsx('relative', className)}>
+      <button type="button" onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium
+          text-apple-label-secondary border border-white/[0.08]
+          hover:bg-white/[0.06] transition-all cursor-pointer">
+        <Download className="w-4 h-4" />
+        Export
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full mt-2 w-48 rounded-xl overflow-hidden z-50
+          bg-[rgba(18,18,26,0.95)] backdrop-blur-xl border border-white/[0.08]
+          shadow-[0_12px_40px_rgba(0,0,0,0.4)]
+          animate-in fade-in slide-in-from-top-2 duration-200">
+          {options.map(opt => {
+            const Icon = opt.icon
+            return (
+              <button key={opt.format} type="button"
+                onClick={() => { onExport(opt.format); setOpen(false) }}
+                className="w-full flex items-center gap-3 px-4 py-3
+                  text-sm text-white/80 hover:bg-white/[0.06] hover:text-white
+                  transition-all cursor-pointer hover:scale-[1.01]">
+                <div className={clsx(
+                  'w-7 h-7 rounded-lg flex items-center justify-center bg-gradient-to-br',
+                  opt.gradient,
+                )}>
+                  <Icon className="w-3.5 h-3.5 text-white" />
+                </div>
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/LanguageSwitcher.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Globe } from 'lucide-react'
+
+const LANGUAGES = [
+  { code: 'en', label: 'English', flag: '🇺🇸' },
+  { code: 'he', label: 'עברית', flag: '🇮🇱' },
+  { code: 'ar', label: 'العربية', flag: '🇸🇦' },
+] as const
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation()
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    i18n.changeLanguage(e.target.value)
+  }
+
+  return (
+    <div className="flex items-center gap-xs">
+      <Globe className="w-4 h-4 text-apple-label-secondary" />
+      <select
+        value={i18n.language}
+        onChange={handleChange}
+        className="bg-transparent text-sm text-apple-label-secondary
+          border-none cursor-pointer appearance-none pr-4
+          focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-blue"
+        aria-label="Select language"
+      >
+        {LANGUAGES.map(({ code, label, flag }) => (
+          <option key={code} value={code}>
+            {flag} {label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

package/src/components/ui/LoadingSpinner.test.tsx

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { LoadingSpinner } from './LoadingSpinner'
+
+describe('LoadingSpinner', () => {
+  it('renders spinner element', () => {
+    const { container } = render(<LoadingSpinner />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toBeInTheDocument()
+  })
+
+  it('renders small size', () => {
+    const { container } = render(<LoadingSpinner size="sm" />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toHaveClass('w-4', 'h-4')
+  })
+
+  it('renders medium size by default', () => {
+    const { container } = render(<LoadingSpinner />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toHaveClass('w-8', 'h-8')
+  })
+
+  it('renders large size', () => {
+    const { container } = render(<LoadingSpinner size="lg" />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toHaveClass('w-12', 'h-12')
+  })
+
+  it('has circular styling', () => {
+    const { container } = render(<LoadingSpinner />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toHaveClass('rounded-full', 'border-2')
+  })
+
+  it('uses apple blue color', () => {
+    const { container } = render(<LoadingSpinner />)
+    const spinner = container.querySelector('div[class*="spinner"]')
+    expect(spinner).toHaveClass('border-apple-blue', 'border-t-transparent')
+  })
+})

package/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
+  const sizes = {
+    sm: 'w-4 h-4',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12',
+  };
+
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={`${sizes[size]} rounded-full border-2 border-apple-blue border-t-transparent spinner`}
+    />
+  );
+}

package/src/components/ui/MetricCard.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import clsx from 'clsx'
+import type { LucideIcon } from 'lucide-react'
+
+interface MetricCardProps {
+  title: string
+  value: string | number
+  icon: LucideIcon
+  color?: 'blue' | 'green' | 'red' | 'orange' | 'teal'
+  subtitle?: string
+  className?: string
+}
+
+const gradients: Record<string, string> = {
+  blue: 'from-[#0A84FF] to-[#6366F1]',
+  green: 'from-[#30D158] to-[#00B894]',
+  red: 'from-[#FF453A] to-[#EC4899]',
+  orange: 'from-[#FF9F0A] to-[#F59E0B]',
+  teal: 'from-[#00B894] to-[#059669]',
+}
+
+const glows: Record<string, string> = {
+  blue: 'group-hover:shadow-[0_0_40px_rgba(10,132,255,0.15)]',
+  green: 'group-hover:shadow-[0_0_40px_rgba(48,209,88,0.15)]',
+  red: 'group-hover:shadow-[0_0_40px_rgba(255,69,58,0.15)]',
+  orange: 'group-hover:shadow-[0_0_40px_rgba(255,159,10,0.15)]',
+  teal: 'group-hover:shadow-[0_0_40px_rgba(0,184,148,0.15)]',
+}
+
+export function MetricCard({
+  title, value, icon: Icon, color = 'blue', subtitle, className,
+}: MetricCardProps) {
+  return (
+    <div className={clsx(
+      'group card-vibrancy p-xl rounded-2xl transition-all duration-300',
+      'hover:scale-[1.02] hover:border-white/[0.12]',
+      'relative overflow-hidden',
+      glows[color], className,
+    )}>
+      {/* shimmer hover effect */}
+      <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full
+        transition-transform duration-700 bg-gradient-to-r from-transparent via-white/[0.04] to-transparent" />
+
+      <div className="flex items-center justify-between mb-md relative">
+        <p className="text-[11px] tracking-wider uppercase text-apple-label-secondary font-medium">
+          {title}
+        </p>
+        <div className={clsx(
+          'w-9 h-9 rounded-xl flex items-center justify-center bg-gradient-to-br',
+          gradients[color],
+        )}>
+          <Icon className="w-4 h-4 text-white" />
+        </div>
+      </div>
+      <h3 className="text-[36px] font-extrabold tracking-tight text-white leading-none mb-sm">
+        {value}
+      </h3>
+      {subtitle && (
+        <p className="text-[12px] text-apple-label-tertiary">{subtitle}</p>
+      )}
+    </div>
+  )
+}

package/src/components/ui/ScoreRing.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+interface ScoreRingProps {
+  score: number
+  size?: number
+  strokeWidth?: number
+}
+
+export function ScoreRing({ score, size = 64, strokeWidth = 4 }: ScoreRingProps) {
+  const radius = (size - strokeWidth * 2) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+  const center = size / 2
+
+  const color = score >= 80 ? '#FF453A' : score >= 60 ? '#FF9F0A' : '#30D158'
+  const colorEnd = score >= 80 ? '#EC4899' : score >= 60 ? '#F59E0B' : '#00B894'
+  const glowId = `glow-${score}`
+  const gradId = `grad-${score}`
+
+  return (
+    <div className="relative flex-shrink-0" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="-rotate-90">
+        <defs>
+          <linearGradient id={gradId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor={color} />
+            <stop offset="100%" stopColor={colorEnd} />
+          </linearGradient>
+          <filter id={glowId}>
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <circle cx={center} cy={center} r={radius}
+          fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={strokeWidth} />
+        <circle cx={center} cy={center} r={radius}
+          fill="none" stroke={`url(#${gradId})`} strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          filter={`url(#${glowId})`}
+          className="transition-all duration-1000 ease-out" />
+      </svg>
+      <span className="absolute inset-0 flex items-center justify-center text-[13px] font-bold text-white">
+        {score}%
+      </span>
+    </div>
+  )
+}

package/src/components/ui/SearchField.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { SearchField } from './SearchField'
+
+describe('SearchField', () => {
+  it('renders search input with placeholder', () => {
+    render(<SearchField value="" onChange={vi.fn()} />)
+    const input = screen.getByPlaceholderText('Search...')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'search')
+  })
+
+  it('renders custom placeholder', () => {
+    render(<SearchField placeholder="Find entities..." value="" onChange={vi.fn()} />)
+    expect(screen.getByPlaceholderText('Find entities...')).toBeInTheDocument()
+  })
+
+  it('updates input value when user types', async () => {
+    const handler = vi.fn()
+    render(<SearchField value="" onChange={handler} />)
+    const input = screen.getByPlaceholderText('Search...')
+    await userEvent.type(input, 'test')
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('displays provided value', () => {
+    render(<SearchField value="test value" onChange={vi.fn()} />)
+    const input = screen.getByDisplayValue('test value')
+    expect(input).toBeInTheDocument()
+  })
+
+  it('calls onSubmit when Enter is pressed', async () => {
+    const handler = vi.fn()
+    render(<SearchField value="test" onChange={vi.fn()} onSubmit={handler} />)
+    const input = screen.getByPlaceholderText('Search...')
+    await userEvent.click(input)
+    await userEvent.keyboard('{Enter}')
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('does not call onSubmit for other keys', async () => {
+    const handler = vi.fn()
+    render(<SearchField value="" onChange={vi.fn()} onSubmit={handler} />)
+    const input = screen.getByPlaceholderText('Search...')
+    await userEvent.type(input, 'a')
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('renders search icon', () => {
+    const { container } = render(<SearchField value="" onChange={vi.fn()} />)
+    const svg = container.querySelector('svg')
+    expect(svg).toBeInTheDocument()
+  })
+})

package/src/components/ui/SearchField.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+
+interface SearchFieldProps {
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+}
+
+export function SearchField({
+  placeholder = 'Search...',
+  value,
+  onChange,
+  onSubmit,
+}: SearchFieldProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-md top-1/2 transform -translate-y-1/2 w-4 h-4 text-apple-label-tertiary" aria-hidden="true" />
+      <input
+        type="search"
+        aria-label={placeholder}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && onSubmit?.()}
+        className="input-field pl-10 w-full"
+      />
+    </div>
+  );
+}

package/src/components/ui/SeverityBadge.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx'
+
+type Severity = 'critical' | 'high' | 'medium' | 'low' | 'info'
+type Size = 'sm' | 'md' | 'lg'
+
+interface SeverityBadgeProps {
+  severity: Severity
+  size?: Size
+  className?: string
+}
+
+const config: Record<Severity, { gradient: string; dot: string; border: string; text: string }> = {
+  critical: {
+    gradient: 'bg-gradient-to-r from-red-500/20 to-rose-500/10',
+    dot: 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]',
+    border: 'border-red-500/30', text: 'text-red-400',
+  },
+  high: {
+    gradient: 'bg-gradient-to-r from-orange-500/20 to-amber-500/10',
+    dot: 'bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.6)]',
+    border: 'border-orange-500/30', text: 'text-orange-400',
+  },
+  medium: {
+    gradient: 'bg-gradient-to-r from-yellow-500/20 to-amber-400/10',
+    dot: 'bg-yellow-500 shadow-[0_0_8px_rgba(234,179,8,0.6)]',
+    border: 'border-yellow-500/30', text: 'text-yellow-400',
+  },
+  low: {
+    gradient: 'bg-gradient-to-r from-green-500/20 to-emerald-400/10',
+    dot: 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]',
+    border: 'border-green-500/30', text: 'text-green-400',
+  },
+  info: {
+    gradient: 'bg-gradient-to-r from-blue-500/20 to-indigo-400/10',
+    dot: 'bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.6)]',
+    border: 'border-blue-500/30', text: 'text-blue-400',
+  },
+}
+
+const sizeClasses: Record<Size, string> = {
+  sm: 'px-2 py-0.5 text-[10px]',
+  md: 'px-2.5 py-1 text-[11px]',
+  lg: 'px-3 py-1.5 text-xs',
+}
+
+export function SeverityBadge({ severity, size = 'md', className }: SeverityBadgeProps) {
+  const c = config[severity]
+  return (
+    <span className={clsx(
+      'inline-flex items-center gap-1.5 rounded-full font-semibold uppercase tracking-wider border',
+      c.gradient, c.border, c.text, sizeClasses[size], className,
+    )}>
+      <span className={clsx('w-1.5 h-1.5 rounded-full animate-pulse', c.dot)} />
+      {severity}
+    </span>
+  )
+}

package/src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+import { Sun, Moon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const [dark, setDark] = useState(() => {
+    if (typeof window === 'undefined') return true
+    return localStorage.getItem('theme') !== 'light'
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (dark) {
+      root.classList.add('dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      root.classList.remove('dark')
+      localStorage.setItem('theme', 'light')
+    }
+  }, [dark])
+
+  return (
+    <button
+      type="button"
+      onClick={() => setDark(d => !d)}
+      className="w-9 h-9 flex items-center justify-center rounded-xl
+        bg-white/[0.06] hover:bg-white/[0.1] border border-white/[0.08]
+        transition-all duration-200 cursor-pointer
+        active:scale-90"
+      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark
+        ? <Sun className="w-4 h-4 text-amber-400" />
+        : <Moon className="w-4 h-4 text-indigo-400" />
+      }
+    </button>
+  )
+}

package/src/components/ui/Toast.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, act } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { ToastProvider, useToast } from './Toast'
+
+function TestConsumer() {
+  const { toast } = useToast()
+  return (
+    <div>
+      <button onClick={() => toast('Info message')}>Show Info</button>
+      <button onClick={() => toast('Success!', 'success')}>Show Success</button>
+      <button onClick={() => toast('Error!', 'error')}>Show Error</button>
+    </div>
+  )
+}
+
+const renderToast = () =>
+  render(
+    <ToastProvider>
+      <TestConsumer />
+    </ToastProvider>
+  )
+
+describe('ToastProvider', () => {
+  it('renders children', () => {
+    renderToast()
+    expect(screen.getByText('Show Info')).toBeInTheDocument()
+  })
+
+  it('shows toast when triggered', async () => {
+    renderToast()
+    await act(async () => {
+      screen.getByText('Show Info').click()
+    })
+    expect(screen.getByRole('alert')).toHaveTextContent('Info message')
+  })
+
+  it('renders success toast with green background', async () => {
+    renderToast()
+    await act(async () => {
+      screen.getByText('Show Success').click()
+    })
+    expect(screen.getByRole('alert')).toHaveClass('bg-green-500')
+  })
+
+  it('renders error toast with red background', async () => {
+    renderToast()
+    await act(async () => {
+      screen.getByText('Show Error').click()
+    })
+    expect(screen.getByRole('alert')).toHaveClass('bg-red-500')
+  })
+
+  it('renders info toast with blue background', async () => {
+    renderToast()
+    await act(async () => {
+      screen.getByText('Show Info').click()
+    })
+    expect(screen.getByRole('alert')).toHaveClass('bg-blue-500')
+  })
+
+  it('has aria-live polite region', () => {
+    const { container } = renderToast()
+    expect(container.querySelector('[aria-live="polite"]')).toBeInTheDocument()
+  })
+
+  it('auto-removes toast after timeout', async () => {
+    vi.useFakeTimers()
+    renderToast()
+    await act(async () => {
+      screen.getByText('Show Info').click()
+    })
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    await act(async () => {
+      vi.advanceTimersByTime(4100)
+    })
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    vi.useRealTimers()
+  })
+})