feat(web): add i18n locale routes and language switcher component

Add locale-prefixed routes for admin, auth, dashboard, and public pages.
Add error, loading, and not-found pages for locale context. Add language
switcher UI component for Vietnamese/English toggle.

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

apps/web/app/[locale]/(admin)/admin/users/page.tsx

@@ -0,0 +1,478 @@
+'use client';
+
+import {
+  Search,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  UserX,
+  UserCheck,
+  Eye,
+  X,
+} from 'lucide-react';
+import { useEffect, useState, useCallback } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Select } from '@/components/ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import {
+  adminApi,
+  type UserListItem,
+  type UserDetail,
+  type PaginatedResult,
+} from '@/lib/admin-api';
+
+function kycBadgeVariant(status: string) {
+  switch (status) {
+    case 'VERIFIED': return 'success' as const;
+    case 'PENDING': return 'warning' as const;
+    case 'REJECTED': return 'destructive' as const;
+    default: return 'secondary' as const;
+  }
+}
+
+function roleBadgeVariant(role: string) {
+  switch (role) {
+    case 'ADMIN': return 'default' as const;
+    case 'AGENT': return 'info' as const;
+    default: return 'secondary' as const;
+  }
+}
+
+function UserDetailPanel({
+  user,
+  onClose,
+  onToggleStatus,
+}: {
+  user: UserDetail;
+  onClose: () => void;
+  onToggleStatus: (userId: string, isActive: boolean) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">{user.fullName}</h3>
+          <p className="text-sm text-muted-foreground">{user.phone}</p>
+          {user.email && (
+            <p className="text-sm text-muted-foreground">{user.email}</p>
+          )}
+        </div>
+        <button onClick={onClose}>
+          <X className="h-5 w-5 text-muted-foreground" />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="rounded-md border p-3">
+          <div className="text-xs text-muted-foreground">Vai trò</div>
+          <Badge variant={roleBadgeVariant(user.role)} className="mt-1">{user.role}</Badge>
+        </div>
+        <div className="rounded-md border p-3">
+          <div className="text-xs text-muted-foreground">KYC</div>
+          <Badge variant={kycBadgeVariant(user.kycStatus)} className="mt-1">{user.kycStatus}</Badge>
+        </div>
+        <div className="rounded-md border p-3">
+          <div className="text-xs text-muted-foreground">Trạng thái</div>
+          <Badge variant={user.isActive ? 'success' : 'destructive'} className="mt-1">
+            {user.isActive ? 'Hoạt động' : 'Bị khóa'}
+          </Badge>
+        </div>
+        <div className="rounded-md border p-3">
+          <div className="text-xs text-muted-foreground">Ngày tạo</div>
+          <div className="mt-1 text-sm font-medium">
+            {new Date(user.createdAt).toLocaleDateString('vi-VN')}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3">
+        <div className="rounded-md border p-3 text-center">
+          <div className="text-2xl font-bold">{user.listingsCount}</div>
+          <div className="text-xs text-muted-foreground">Tin đăng</div>
+        </div>
+        <div className="rounded-md border p-3 text-center">
+          <div className="text-2xl font-bold">{user.activeListingsCount}</div>
+          <div className="text-xs text-muted-foreground">Đang hiển thị</div>
+        </div>
+        <div className="rounded-md border p-3 text-center">
+          <div className="text-2xl font-bold">{user.transactionsCount}</div>
+          <div className="text-xs text-muted-foreground">Giao dịch</div>
+        </div>
+      </div>
+
+      {user.subscription && (
+        <div className="rounded-md border p-3">
+          <div className="text-xs text-muted-foreground mb-1">Gói đăng ký</div>
+          <div className="flex items-center gap-2">
+            <Badge variant="info">{user.subscription.planTier}</Badge>
+            <Badge variant={user.subscription.status === 'active' ? 'success' : 'warning'}>
+              {user.subscription.status}
+            </Badge>
+            <span className="text-xs text-muted-foreground">
+              đến {new Date(user.subscription.currentPeriodEnd).toLocaleDateString('vi-VN')}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {user.recentActivity.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium mb-2">Hoạt động gần đây</h4>
+          <div className="space-y-2">
+            {user.recentActivity.slice(0, 5).map((activity, i) => (
+              <div key={i} className="flex items-start gap-2 text-sm">
+                <div className="mt-0.5 h-2 w-2 rounded-full bg-muted-foreground flex-shrink-0" />
+                <div>
+                  <span>{activity.description}</span>
+                  <span className="ml-2 text-xs text-muted-foreground">
+                    {new Date(activity.createdAt).toLocaleDateString('vi-VN')}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <Button
+          variant={user.isActive ? 'destructive' : 'default'}
+          size="sm"
+          className="flex-1"
+          onClick={() => onToggleStatus(user.id, !user.isActive)}
+        >
+          {user.isActive ? (
+            <>
+              <UserX className="mr-2 h-4 w-4" /> Khóa tài khoản
+            </>
+          ) : (
+            <>
+              <UserCheck className="mr-2 h-4 w-4" /> Mở khóa
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function AdminUsersPage() {
+  const [result, setResult] = useState<PaginatedResult<UserListItem> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
+  const [roleFilter, setRoleFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+
+  // Detail panel
+  const [selectedUser, setSelectedUser] = useState<UserDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // Ban dialog
+  const [banDialog, setBanDialog] = useState<{ userId: string; isActive: boolean } | null>(null);
+  const [banReason, setBanReason] = useState('');
+  const [actionLoading, setActionLoading] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await adminApi.getUsers({
+        page,
+        limit: 20,
+        role: roleFilter || undefined,
+        isActive: statusFilter === '' ? undefined : statusFilter === 'active',
+        search: search || undefined,
+      });
+      setResult(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Không thể tải danh sách');
+    } finally {
+      setLoading(false);
+    }
+  }, [page, roleFilter, statusFilter, search]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  const openDetail = async (userId: string) => {
+    setDetailLoading(true);
+    try {
+      const detail = await adminApi.getUserDetail(userId);
+      setSelectedUser(detail);
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : 'Không thể tải chi tiết người dùng');
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleToggleStatus = (userId: string, newActive: boolean) => {
+    setBanDialog({ userId, isActive: newActive });
+    setBanReason('');
+  };
+
+  const confirmToggleStatus = async () => {
+    if (!banDialog) return;
+    setActionLoading(true);
+    try {
+      await adminApi.banUser(
+        banDialog.userId,
+        banReason || 'Admin action',
+        banDialog.isActive, // unban = true if making active
+      );
+      setBanDialog(null);
+      setSelectedUser(null);
+      fetchUsers();
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : 'Thao tác thất bại. Vui lòng thử lại.');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setPage(1);
+    fetchUsers();
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Quản lý người dùng</h1>
+        <p className="text-sm text-muted-foreground">
+          Danh sách và quản lý tài khoản người dùng
+        </p>
+      </div>
+
+      {actionError && (
+        <div className="flex items-center justify-between rounded-md border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+          <span>{actionError}</span>
+          <button onClick={() => setActionError(null)} className="ml-2">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+        <form onSubmit={handleSearch} className="flex flex-1 gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Tìm theo tên, SĐT, email..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <Button type="submit" size="sm">
+            Tìm
+          </Button>
+        </form>
+
+        <Select
+          value={roleFilter}
+          onChange={(e) => { setRoleFilter(e.target.value); setPage(1); }}
+          className="w-40"
+        >
+          <option value="">Tất cả vai trò</option>
+          <option value="USER">Người dùng</option>
+          <option value="AGENT">Đại lý</option>
+          <option value="ADMIN">Admin</option>
+        </Select>
+
+        <Select
+          value={statusFilter}
+          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+          className="w-40"
+        >
+          <option value="">Tất cả trạng thái</option>
+          <option value="active">Hoạt động</option>
+          <option value="inactive">Bị khóa</option>
+        </Select>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[1fr_380px]">
+        {/* Table */}
+        <Card>
+          <CardContent className="p-0">
+            {loading ? (
+              <div className="flex h-48 items-center justify-center">
+                <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="flex h-48 flex-col items-center justify-center gap-2">
+                <p className="text-sm text-destructive">{error}</p>
+                <Button variant="outline" size="sm" onClick={fetchUsers}>
+                  Thử lại
+                </Button>
+              </div>
+            ) : !result || result.data.length === 0 ? (
+              <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+                Không tìm thấy người dùng nào
+              </div>
+            ) : (
+              <>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Họ tên</TableHead>
+                      <TableHead className="hidden sm:table-cell">SĐT</TableHead>
+                      <TableHead>Vai trò</TableHead>
+                      <TableHead>KYC</TableHead>
+                      <TableHead className="hidden md:table-cell">Trạng thái</TableHead>
+                      <TableHead className="w-10"></TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {result.data.map((user) => (
+                      <TableRow
+                        key={user.id}
+                        className="cursor-pointer"
+                        onClick={() => openDetail(user.id)}
+                      >
+                        <TableCell>
+                          <div className="font-medium">{user.fullName}</div>
+                          {user.email && (
+                            <div className="text-xs text-muted-foreground">{user.email}</div>
+                          )}
+                        </TableCell>
+                        <TableCell className="hidden sm:table-cell">{user.phone}</TableCell>
+                        <TableCell>
+                          <Badge variant={roleBadgeVariant(user.role)}>{user.role}</Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={kycBadgeVariant(user.kycStatus)}>{user.kycStatus}</Badge>
+                        </TableCell>
+                        <TableCell className="hidden md:table-cell">
+                          <Badge variant={user.isActive ? 'success' : 'destructive'}>
+                            {user.isActive ? 'Hoạt động' : 'Bị khóa'}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Eye className="h-4 w-4 text-muted-foreground" />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+
+                {/* Pagination */}
+                {result.totalPages > 1 && (
+                  <div className="flex items-center justify-between border-t px-4 py-3">
+                    <span className="text-sm text-muted-foreground">
+                      Trang {result.page}/{result.totalPages} ({result.total} người dùng)
+                    </span>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        disabled={page <= 1}
+                        onClick={() => setPage((p) => p - 1)}
+                      >
+                        <ChevronLeft className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        disabled={page >= result.totalPages}
+                        onClick={() => setPage((p) => p + 1)}
+                      >
+                        <ChevronRight className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Detail sidebar */}
+        <div className="hidden lg:block">
+          <Card>
+            <CardContent className="p-4">
+              {detailLoading ? (
+                <div className="flex h-48 items-center justify-center">
+                  <RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
+                </div>
+              ) : selectedUser ? (
+                <UserDetailPanel
+                  user={selectedUser}
+                  onClose={() => setSelectedUser(null)}
+                  onToggleStatus={handleToggleStatus}
+                />
+              ) : (
+                <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+                  Chọn người dùng để xem chi tiết
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Mobile detail dialog */}
+      <Dialog open={!!selectedUser && typeof window !== 'undefined' && window.innerWidth < 1024} onOpenChange={() => setSelectedUser(null)}>
+        <DialogContent>
+          {selectedUser && (
+            <UserDetailPanel
+              user={selectedUser}
+              onClose={() => setSelectedUser(null)}
+              onToggleStatus={handleToggleStatus}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Ban/unban confirmation */}
+      <Dialog open={!!banDialog} onOpenChange={() => setBanDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {banDialog?.isActive ? 'Mở khóa tài khoản' : 'Khóa tài khoản'}
+            </DialogTitle>
+            <DialogDescription>
+              {banDialog?.isActive
+                ? 'Người dùng sẽ có thể đăng nhập và sử dụng hệ thống.'
+                : 'Người dùng sẽ không thể đăng nhập và các tin đăng sẽ bị ẩn.'}
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            placeholder="Lý do..."
+            value={banReason}
+            onChange={(e) => setBanReason(e.target.value)}
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBanDialog(null)}>
+              Hủy
+            </Button>
+            <Button
+              variant={banDialog?.isActive ? 'default' : 'destructive'}
+              onClick={confirmToggleStatus}
+              disabled={actionLoading}
+            >
+              {actionLoading ? 'Đang xử lý...' : 'Xác nhận'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}