feat: dashboard CRUD for Projects + Industrial Parks, listings delete, BĐS homepage card

Backend — DELETE endpoints (hard delete, ADMIN or owner):
- DELETE /projects/:id (Admin) — new DeleteProjectCommand/Handler,
  repository.delete() adapter, module wiring.
- DELETE /industrial/parks/:id (Admin) — same pattern.
- DELETE /listings/:id (JWT + owner-or-Admin check in handler).

Frontend — API clients:
- lib/du-an-api.ts: add create/update/delete + CreateProjectPayload,
  UpdateProjectPayload types.
- lib/khu-cong-nghiep-api.ts: add createPark/updatePark/deletePark +
  Create/Update payload types.
- lib/listings-api.ts: add delete().

Dashboard pages — new:
- /projects (Quản lý dự án): list with filters + edit/delete actions,
  /projects/new form (sectioned Cards, zod-validated), /projects/[id]/edit
  with danger-zone delete.
- /industrial-parks (Quản lý KCN): same triad. Fix occupancy-rate display
  (percentage already 0-100, no need to *100).

Dashboard listings page:
- Add Edit/Delete row actions with confirm + useMutation; error banner
  on mutation failure. Table view gains a "Thao tác" column; list view
  gains a footer action bar below each card.

Dashboard nav:
- Catalog group: /du-an → /projects (Quản lý dự án), /khu-cong-nghiep
  → /industrial-parks (Quản lý KCN). Desktop primaryNav updated too.

Public homepage:
- Add "Bất động sản" as a 5th feature card/tab → /search, using
  listingsApi for the "Featured listings" section.
- Bump grid to lg:grid-cols-5, update features subtitle copy ("Năm/Five
  core services").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(dashboard)/industrial-parks/page.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ExternalLink, Pencil, Trash2 } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Select } from '@/components/ui/select';
+import {
+  industrialApi,
+  PARK_STATUS_COLORS,
+  PARK_STATUS_LABELS,
+  REGION_LABELS,
+  type IndustrialParkStatus,
+  type SearchIndustrialParksParams,
+  type VietnamRegion,
+} from '@/lib/khu-cong-nghiep-api';
+
+const STATUS_OPTIONS: IndustrialParkStatus[] = [
+  'PLANNING',
+  'UNDER_CONSTRUCTION',
+  'OPERATIONAL',
+  'FULL',
+];
+
+const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];
+
+interface FiltersState {
+  q: string;
+  province: string;
+  status: IndustrialParkStatus | '';
+  region: VietnamRegion | '';
+  page: number;
+}
+
+const INITIAL_FILTERS: FiltersState = {
+  q: '',
+  province: '',
+  status: '',
+  region: '',
+  page: 1,
+};
+
+export default function IndustrialParksListPage() {
+  const [filters, setFilters] = React.useState<FiltersState>(INITIAL_FILTERS);
+
+  const queryParams = React.useMemo<SearchIndustrialParksParams>(() => {
+    const p: SearchIndustrialParksParams = { page: filters.page, limit: 12 };
+    if (filters.q) p.q = filters.q;
+    if (filters.province) p.province = filters.province;
+    if (filters.status) p.status = filters.status;
+    if (filters.region) p.region = filters.region;
+    return p;
+  }, [filters]);
+
+  const { data: result, isLoading } = useQuery({
+    queryKey: ['admin-industrial-parks', queryParams],
+    queryFn: () => industrialApi.search(queryParams),
+    staleTime: 30_000,
+  });
+
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => industrialApi.deletePark(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] }),
+  });
+
+  const handleDelete = (id: string, name: string) => {
+    if (!window.confirm(`Xoá KCN "${name}"? Thao tác này không thể hoàn tác.`)) return;
+    deleteMutation.mutate(id);
+  };
+
+  const resetFilters = () => setFilters(INITIAL_FILTERS);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Quản lý KCN</h1>
+          <p className="text-sm text-muted-foreground">
+            Quản lý danh sách khu công nghiệp, chủ đầu tư và tình trạng lấp đầy
+          </p>
+        </div>
+        <Link href="/industrial-parks/new">
+          <Button>Thêm KCN</Button>
+        </Link>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <Input
+          value={filters.q}
+          onChange={(e) => setFilters((f) => ({ ...f, q: e.target.value, page: 1 }))}
+          placeholder="Tìm theo tên, chủ đầu tư..."
+          className="w-64"
+        />
+        <Input
+          value={filters.province}
+          onChange={(e) => setFilters((f) => ({ ...f, province: e.target.value, page: 1 }))}
+          placeholder="Tỉnh/Thành phố"
+          className="w-48"
+        />
+        <Select
+          value={filters.region}
+          onChange={(e) =>
+            setFilters((f) => ({ ...f, region: e.target.value as VietnamRegion | '', page: 1 }))
+          }
+          className="w-40"
+        >
+          <option value="">Tất cả vùng</option>
+          {REGION_OPTIONS.map((r) => (
+            <option key={r} value={r}>
+              {REGION_LABELS[r]}
+            </option>
+          ))}
+        </Select>
+        <Select
+          value={filters.status}
+          onChange={(e) =>
+            setFilters((f) => ({
+              ...f,
+              status: e.target.value as IndustrialParkStatus | '',
+              page: 1,
+            }))
+          }
+          className="w-48"
+        >
+          <option value="">Tất cả trạng thái</option>
+          {STATUS_OPTIONS.map((s) => (
+            <option key={s} value={s}>
+              {PARK_STATUS_LABELS[s]}
+            </option>
+          ))}
+        </Select>
+        <Button variant="outline" size="sm" onClick={resetFilters}>
+          Đặt lại
+        </Button>
+      </div>
+
+      {deleteMutation.isError && (
+        <div className="flex items-center justify-between gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          <p>Không thể xoá KCN. Vui lòng thử lại.</p>
+          <button
+            type="button"
+            onClick={() => deleteMutation.reset()}
+            className="text-xs underline"
+          >
+            Đóng
+          </button>
+        </div>
+      )}
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="flex min-h-[300px] items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      ) : !result || result.data.length === 0 ? (
+        <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
+          <p>Chưa có KCN nào</p>
+          <Link href="/industrial-parks/new" className="mt-2">
+            <Button variant="outline" size="sm">
+              Thêm KCN đầu tiên
+            </Button>
+          </Link>
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="p-0">
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b text-left">
+                    <th className="p-3 font-medium">Tên KCN</th>
+                    <th className="p-3 font-medium">Chủ đầu tư</th>
+                    <th className="p-3 font-medium">Tỉnh</th>
+                    <th className="p-3 font-medium">Vùng</th>
+                    <th className="p-3 font-medium text-right">Diện tích (ha)</th>
+                    <th className="p-3 font-medium text-right">Tỉ lệ lấp đầy</th>
+                    <th className="p-3 font-medium text-center">Trạng thái</th>
+                    <th className="p-3 font-medium text-right">Thao tác</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {result.data.map((park) => (
+                    <tr
+                      key={park.id}
+                      className="border-b last:border-0 transition-colors hover:bg-accent/50"
+                    >
+                      <td className="p-3">
+                        <Link
+                          href={`/khu-cong-nghiep/${park.slug}`}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="group inline-flex items-center gap-1 font-medium hover:text-primary"
+                        >
+                          <span className="truncate">{park.name}</span>
+                          <ExternalLink className="h-3 w-3 opacity-60" />
+                        </Link>
+                        {park.nameEn && (
+                          <p className="truncate text-xs text-muted-foreground">{park.nameEn}</p>
+                        )}
+                      </td>
+                      <td className="p-3 text-muted-foreground">{park.developer}</td>
+                      <td className="p-3">{park.province}</td>
+                      <td className="p-3 text-xs text-muted-foreground">
+                        {REGION_LABELS[park.region]}
+                      </td>
+                      <td className="p-3 text-right">{park.totalAreaHa.toLocaleString('vi-VN')}</td>
+                      <td className="p-3 text-right">
+                        {park.occupancyRate.toFixed(1)}%
+                      </td>
+                      <td className="p-3 text-center">
+                        <Badge className={PARK_STATUS_COLORS[park.status]} variant="outline">
+                          {PARK_STATUS_LABELS[park.status]}
+                        </Badge>
+                      </td>
+                      <td className="p-3 text-right">
+                        <div className="flex justify-end gap-1">
+                          <Link href={`/industrial-parks/${park.id}/edit`}>
+                            <Button variant="ghost" size="sm" aria-label="Sửa KCN">
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                          </Link>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            aria-label="Xoá KCN"
+                            className="text-destructive"
+                            disabled={
+                              deleteMutation.isPending &&
+                              deleteMutation.variables === park.id
+                            }
+                            onClick={() => handleDelete(park.id, park.name)}
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Pagination */}
+      {result && result.totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={filters.page <= 1}
+            onClick={() => setFilters((f) => ({ ...f, page: f.page - 1 }))}
+          >
+            Trước
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            Trang {result.page} / {result.totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={filters.page >= result.totalPages}
+            onClick={() => setFilters((f) => ({ ...f, page: f.page + 1 }))}
+          >
+            Tiếp
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}