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/status-chip.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export type PropertyStatus =
+  | 'active'
+  | 'pending'
+  | 'sold'
+  | 'rented'
+  | 'rejected'
+  | 'draft';
+
+const STATUS_CONFIG: Record<
+  PropertyStatus,
+  { label: string; colorClass: string; dotClass: string }
+> = {
+  active: {
+    label: 'Đang bán',
+    colorClass: 'bg-signal-up-bg text-signal-up ring-signal-up/20',
+    dotClass: 'bg-signal-up',
+  },
+  pending: {
+    label: 'Chờ duyệt',
+    colorClass: 'bg-warning/10 text-warning ring-warning/20',
+    dotClass: 'bg-warning',
+  },
+  sold: {
+    label: 'Đã bán',
+    colorClass: 'bg-muted text-foreground-muted ring-border',
+    dotClass: 'bg-foreground-muted',
+  },
+  rented: {
+    label: 'Đã thuê',
+    colorClass: 'bg-accent-blue/10 text-accent-blue ring-accent-blue/20',
+    dotClass: 'bg-accent-blue',
+  },
+  rejected: {
+    label: 'Từ chối',
+    colorClass: 'bg-destructive/10 text-destructive ring-destructive/20',
+    dotClass: 'bg-destructive',
+  },
+  draft: {
+    label: 'Bản nháp',
+    colorClass: 'bg-muted text-foreground-dim ring-border',
+    dotClass: 'bg-foreground-dim',
+  },
+};
+
+export interface StatusChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status: PropertyStatus;
+  /** Ẩn dot indicator */
+  hideDot?: boolean;
+}
+
+/**
+ * StatusChip — hiển thị trạng thái bất động sản với màu sắc và nhãn tiếng Việt.
+ */
+export function StatusChip({ status, hideDot = false, className, ...props }: StatusChipProps) {
+  const cfg = STATUS_CONFIG[status];
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset',
+        cfg.colorClass,
+        className,
+      )}
+      {...props}
+    >
+      {!hideDot && (
+        <span className={cn('h-1.5 w-1.5 rounded-full', cfg.dotClass)} aria-hidden />
+      )}
+      {cfg.label}
+    </span>
+  );
+}