feat(web): add shared primitive components — TEC-3063

Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/status-chip.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { StatusChip, type PropertyStatus } from '../status-chip';
+
+const statuses: PropertyStatus[] = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'];
+
+describe('StatusChip', () => {
+  it.each(statuses)('renders label for status "%s"', (status) => {
+    const { container } = render(<StatusChip status={status} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for active', () => {
+    render(<StatusChip status="active" />);
+    expect(screen.getByText('Đang bán')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for pending', () => {
+    render(<StatusChip status="pending" />);
+    expect(screen.getByText('Chờ duyệt')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for sold', () => {
+    render(<StatusChip status="sold" />);
+    expect(screen.getByText('Đã bán')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for rented', () => {
+    render(<StatusChip status="rented" />);
+    expect(screen.getByText('Đã thuê')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for rejected', () => {
+    render(<StatusChip status="rejected" />);
+    expect(screen.getByText('Từ chối')).toBeInTheDocument();
+  });
+
+  it('renders Vietnamese label for draft', () => {
+    render(<StatusChip status="draft" />);
+    expect(screen.getByText('Bản nháp')).toBeInTheDocument();
+  });
+
+  it('renders dot by default', () => {
+    const { container } = render(<StatusChip status="active" />);
+    // dot is aria-hidden span
+    const dot = container.querySelector('[aria-hidden]');
+    expect(dot).toBeInTheDocument();
+  });
+
+  it('hides dot when hideDot=true', () => {
+    const { container } = render(<StatusChip status="active" hideDot />);
+    const dot = container.querySelector('[aria-hidden]');
+    expect(dot).not.toBeInTheDocument();
+  });
+});