restructure project

frontend/package.json

@@ -6,27 +6,36 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.20.0",
+    "axios": "^1.6.7",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.3.0",
+    "lucide-react": "^0.563.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "lucide-react": "^0.563.0",
-    "recharts": "^3.7.0",
-    "axios": "^1.6.7",
     "react-router-dom": "^6.22.0",
-    "zustand": "^4.5.0",
-    "@tanstack/react-query": "^5.20.0",
-    "date-fns": "^3.3.0",
-    "clsx": "^2.1.0"
+    "recharts": "^3.7.0",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.17",
+    "jsdom": "^27.4.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.8.2",
     "vite": "^6.2.0",
-    "tailwindcss": "^3.4.1",
-    "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35"
+    "vitest": "^4.0.18"
   }
 }

frontend/src/components/Badge.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Badge } from './Badge';
+import { DocumentStatus } from '../types';
+
+describe('Badge', () => {
+  it('renders Exported badge with check icon', () => {
+    render(<Badge status="Exported" />);
+    expect(screen.getByText('Exported')).toBeInTheDocument();
+  });
+
+  it('renders Pending status', () => {
+    render(<Badge status={DocumentStatus.PENDING} />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('renders Verified status', () => {
+    render(<Badge status={DocumentStatus.VERIFIED} />);
+    expect(screen.getByText('Verified')).toBeInTheDocument();
+  });
+
+  it('renders Labeled status', () => {
+    render(<Badge status={DocumentStatus.LABELED} />);
+    expect(screen.getByText('Labeled')).toBeInTheDocument();
+  });
+
+  it('renders Partial status with warning indicator', () => {
+    render(<Badge status={DocumentStatus.PARTIAL} />);
+    expect(screen.getByText('Partial')).toBeInTheDocument();
+    expect(screen.getByText('!')).toBeInTheDocument();
+  });
+});

frontend/src/components/Button.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders children text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('calls onClick handler', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('applies variant styles', () => {
+    const { rerender } = render(<Button variant="primary">Primary</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-warm-text-secondary');
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByRole('button').className).toContain('border');
+  });
+
+  it('applies size styles', () => {
+    render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole('button').className).toContain('h-8');
+  });
+});

frontend/tests/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

frontend/vitest.config.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}', 'tests/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/**/*.test.{ts,tsx}', 'src/main.tsx'],
+    },
+  },
+});