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/new/page.tsx

@@ -0,0 +1,461 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  industrialApi,
+  PARK_STATUS_LABELS,
+  REGION_LABELS,
+  type CreateIndustrialParkPayload,
+  type IndustrialParkStatus,
+  type VietnamRegion,
+} from '@/lib/khu-cong-nghiep-api';
+
+const STATUS_OPTIONS: IndustrialParkStatus[] = [
+  'PLANNING',
+  'UNDER_CONSTRUCTION',
+  'OPERATIONAL',
+  'FULL',
+];
+const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];
+
+const optionalString = z
+  .string()
+  .optional()
+  .transform((v) => (v && v.trim() !== '' ? v.trim() : undefined));
+
+const requiredString = (msg: string) => z.string().min(1, msg);
+
+const nonNegativeNumber = (msg: string) =>
+  z
+    .string()
+    .min(1, msg)
+    .refine((v) => !isNaN(Number(v)) && Number(v) >= 0, 'Phải là số không âm');
+
+const optionalNonNegativeNumber = z
+  .string()
+  .optional()
+  .refine(
+    (v) => v === undefined || v === '' || (!isNaN(Number(v)) && Number(v) >= 0),
+    'Phải là số không âm',
+  );
+
+const parkFormSchema = z.object({
+  name: requiredString('Vui lòng nhập tên KCN'),
+  nameEn: optionalString,
+  slug: requiredString('Vui lòng nhập slug'),
+  developer: requiredString('Vui lòng nhập chủ đầu tư'),
+  operator: optionalString,
+  status: z.enum(['PLANNING', 'UNDER_CONSTRUCTION', 'OPERATIONAL', 'FULL']),
+
+  address: requiredString('Vui lòng nhập địa chỉ'),
+  district: requiredString('Vui lòng nhập quận/huyện'),
+  province: requiredString('Vui lòng nhập tỉnh/thành'),
+  region: z.enum(['NORTH', 'CENTRAL', 'SOUTH']),
+  latitude: z
+    .string()
+    .min(1, 'Vui lòng nhập vĩ độ')
+    .refine((v) => !isNaN(Number(v)) && Number(v) >= -90 && Number(v) <= 90, 'Vĩ độ từ -90 đến 90'),
+  longitude: z
+    .string()
+    .min(1, 'Vui lòng nhập kinh độ')
+    .refine(
+      (v) => !isNaN(Number(v)) && Number(v) >= -180 && Number(v) <= 180,
+      'Kinh độ từ -180 đến 180',
+    ),
+
+  totalAreaHa: nonNegativeNumber('Vui lòng nhập tổng diện tích'),
+  leasableAreaHa: nonNegativeNumber('Vui lòng nhập diện tích cho thuê'),
+
+  landRentUsdM2Year: optionalNonNegativeNumber,
+  rbfRentUsdM2Month: optionalNonNegativeNumber,
+  rbwRentUsdM2Month: optionalNonNegativeNumber,
+  managementFeeUsd: optionalNonNegativeNumber,
+
+  targetIndustries: optionalString,
+  infrastructure: optionalString,
+
+  establishedYear: optionalNonNegativeNumber,
+  tenantCount: optionalNonNegativeNumber,
+
+  description: optionalString,
+  descriptionEn: optionalString,
+});
+
+type ParkFormValues = z.input<typeof parkFormSchema>;
+
+function parseInfrastructure(text: string | undefined): Record<string, unknown> | undefined {
+  if (!text) return undefined;
+  const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
+  if (lines.length === 0) return undefined;
+  const out: Record<string, unknown> = {};
+  for (const line of lines) {
+    const idx = line.indexOf(':');
+    if (idx > 0) {
+      const key = line.slice(0, idx).trim();
+      const value = line.slice(idx + 1).trim();
+      if (key) out[key] = value;
+    } else {
+      out[line] = true;
+    }
+  }
+  return Object.keys(out).length > 0 ? out : undefined;
+}
+
+function toNumOrUndef(v: string | undefined): number | undefined {
+  if (v === undefined || v === '') return undefined;
+  const n = Number(v);
+  return isNaN(n) ? undefined : n;
+}
+
+export default function CreateIndustrialParkPage() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [error, setError] = React.useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ParkFormValues>({
+    resolver: zodResolver(parkFormSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      status: 'PLANNING',
+      region: 'NORTH',
+    },
+  });
+
+  const mutation = useMutation({
+    mutationFn: (payload: CreateIndustrialParkPayload) => industrialApi.createPark(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] });
+      router.push('/industrial-parks');
+    },
+    onError: (err: unknown) => {
+      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
+    },
+  });
+
+  const onSubmit = (data: ParkFormValues) => {
+    setError(null);
+
+    const totalArea = Number(data.totalAreaHa);
+    const leasableArea = Number(data.leasableAreaHa);
+
+    const industries = data.targetIndustries
+      ? data.targetIndustries
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+      : [];
+
+    const payload: CreateIndustrialParkPayload = {
+      name: data.name!,
+      slug: data.slug!,
+      developer: data.developer!,
+      status: data.status,
+      address: data.address!,
+      district: data.district!,
+      province: data.province!,
+      region: data.region,
+      latitude: Number(data.latitude),
+      longitude: Number(data.longitude),
+      totalAreaHa: totalArea,
+      leasableAreaHa: leasableArea,
+      occupancyRate: 0,
+      remainingAreaHa: leasableArea,
+      targetIndustries: industries,
+    };
+
+    if (data.nameEn) payload.nameEn = data.nameEn;
+    if (data.operator) payload.operator = data.operator;
+
+    const landRent = toNumOrUndef(data.landRentUsdM2Year);
+    if (landRent != null) payload.landRentUsdM2Year = landRent;
+    const rbfRent = toNumOrUndef(data.rbfRentUsdM2Month);
+    if (rbfRent != null) payload.rbfRentUsdM2Month = rbfRent;
+    const rbwRent = toNumOrUndef(data.rbwRentUsdM2Month);
+    if (rbwRent != null) payload.rbwRentUsdM2Month = rbwRent;
+    const mgmtFee = toNumOrUndef(data.managementFeeUsd);
+    if (mgmtFee != null) payload.managementFeeUsd = mgmtFee;
+
+    const year = toNumOrUndef(data.establishedYear);
+    if (year != null) payload.establishedYear = year;
+    const tenantCount = toNumOrUndef(data.tenantCount);
+    if (tenantCount != null) payload.tenantCount = tenantCount;
+
+    const infra = parseInfrastructure(data.infrastructure);
+    if (infra) payload.infrastructure = infra;
+
+    if (data.description) payload.description = data.description;
+    if (data.descriptionEn) payload.descriptionEn = data.descriptionEn;
+
+    mutation.mutate(payload);
+  };
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-4 sm:space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <Link
+            href="/industrial-parks"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            ← Danh sách KCN
+          </Link>
+          <h1 className="mt-1 text-xl font-bold sm:text-2xl">Thêm KCN</h1>
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+          {error}
+          <button className="ml-2 font-medium underline" onClick={() => setError(null)}>
+            Đóng
+          </button>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        {/* Thông tin cơ bản */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Thông tin cơ bản</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <Label htmlFor="name">Tên KCN *</Label>
+              <Input id="name" {...register('name')} />
+              {errors.name && (
+                <p className="mt-1 text-xs text-destructive">{errors.name.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="nameEn">Tên tiếng Anh</Label>
+              <Input id="nameEn" {...register('nameEn')} />
+            </div>
+            <div>
+              <Label htmlFor="slug">Slug *</Label>
+              <Input id="slug" {...register('slug')} placeholder="vd: kcn-vsip-1" />
+              {errors.slug && (
+                <p className="mt-1 text-xs text-destructive">{errors.slug.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="status">Trạng thái *</Label>
+              <Select id="status" {...register('status')}>
+                {STATUS_OPTIONS.map((s) => (
+                  <option key={s} value={s}>
+                    {PARK_STATUS_LABELS[s]}
+                  </option>
+                ))}
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor="developer">Chủ đầu tư *</Label>
+              <Input id="developer" {...register('developer')} />
+              {errors.developer && (
+                <p className="mt-1 text-xs text-destructive">{errors.developer.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="operator">Đơn vị vận hành</Label>
+              <Input id="operator" {...register('operator')} />
+            </div>
+            <div className="sm:col-span-2">
+              <Label htmlFor="description">Mô tả</Label>
+              <Textarea id="description" rows={3} {...register('description')} />
+            </div>
+            <div className="sm:col-span-2">
+              <Label htmlFor="descriptionEn">Mô tả (Tiếng Anh)</Label>
+              <Textarea id="descriptionEn" rows={3} {...register('descriptionEn')} />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Vị trí */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Vị trí</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-4 sm:grid-cols-2">
+            <div className="sm:col-span-2">
+              <Label htmlFor="address">Địa chỉ *</Label>
+              <Input id="address" {...register('address')} />
+              {errors.address && (
+                <p className="mt-1 text-xs text-destructive">{errors.address.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="district">Quận/Huyện *</Label>
+              <Input id="district" {...register('district')} />
+              {errors.district && (
+                <p className="mt-1 text-xs text-destructive">{errors.district.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="province">Tỉnh/Thành phố *</Label>
+              <Input id="province" {...register('province')} />
+              {errors.province && (
+                <p className="mt-1 text-xs text-destructive">{errors.province.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="region">Vùng *</Label>
+              <Select id="region" {...register('region')}>
+                {REGION_OPTIONS.map((r) => (
+                  <option key={r} value={r}>
+                    {REGION_LABELS[r]}
+                  </option>
+                ))}
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="latitude">Vĩ độ *</Label>
+                <Input id="latitude" type="number" step="any" {...register('latitude')} />
+                {errors.latitude && (
+                  <p className="mt-1 text-xs text-destructive">{errors.latitude.message}</p>
+                )}
+              </div>
+              <div>
+                <Label htmlFor="longitude">Kinh độ *</Label>
+                <Input id="longitude" type="number" step="any" {...register('longitude')} />
+                {errors.longitude && (
+                  <p className="mt-1 text-xs text-destructive">{errors.longitude.message}</p>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Quy mô & giá thuê */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Quy mô & giá thuê</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <Label htmlFor="totalAreaHa">Tổng diện tích (ha) *</Label>
+              <Input
+                id="totalAreaHa"
+                type="number"
+                step="any"
+                {...register('totalAreaHa')}
+              />
+              {errors.totalAreaHa && (
+                <p className="mt-1 text-xs text-destructive">{errors.totalAreaHa.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="leasableAreaHa">Diện tích cho thuê (ha) *</Label>
+              <Input
+                id="leasableAreaHa"
+                type="number"
+                step="any"
+                {...register('leasableAreaHa')}
+              />
+              {errors.leasableAreaHa && (
+                <p className="mt-1 text-xs text-destructive">{errors.leasableAreaHa.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="landRentUsdM2Year">Giá thuê đất (USD/m²/năm)</Label>
+              <Input
+                id="landRentUsdM2Year"
+                type="number"
+                step="any"
+                {...register('landRentUsdM2Year')}
+              />
+            </div>
+            <div>
+              <Label htmlFor="rbfRentUsdM2Month">Giá thuê nhà xưởng (USD/m²/tháng)</Label>
+              <Input
+                id="rbfRentUsdM2Month"
+                type="number"
+                step="any"
+                {...register('rbfRentUsdM2Month')}
+              />
+            </div>
+            <div>
+              <Label htmlFor="rbwRentUsdM2Month">Giá thuê kho (USD/m²/tháng)</Label>
+              <Input
+                id="rbwRentUsdM2Month"
+                type="number"
+                step="any"
+                {...register('rbwRentUsdM2Month')}
+              />
+            </div>
+            <div>
+              <Label htmlFor="managementFeeUsd">Phí quản lý (USD)</Label>
+              <Input
+                id="managementFeeUsd"
+                type="number"
+                step="any"
+                {...register('managementFeeUsd')}
+              />
+            </div>
+            <div>
+              <Label htmlFor="establishedYear">Năm thành lập</Label>
+              <Input id="establishedYear" type="number" {...register('establishedYear')} />
+            </div>
+            <div>
+              <Label htmlFor="tenantCount">Số khách thuê</Label>
+              <Input id="tenantCount" type="number" {...register('tenantCount')} />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Tiện ích & ngành nghề */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Tiện ích & ngành nghề</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <Label htmlFor="targetIndustries">Ngành nghề mục tiêu</Label>
+              <Textarea
+                id="targetIndustries"
+                rows={2}
+                placeholder="Phân tách bằng dấu phẩy, vd: Điện tử, Dệt may, Logistics"
+                {...register('targetIndustries')}
+              />
+            </div>
+            <div>
+              <Label htmlFor="infrastructure">Hạ tầng & tiện ích</Label>
+              <Textarea
+                id="infrastructure"
+                rows={4}
+                placeholder={'Mỗi dòng một mục, dạng "key: value"\nvd:\nĐiện: 22kV\nNước: 5000 m³/ngày'}
+                {...register('infrastructure')}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-end gap-3">
+          <Link href="/industrial-parks">
+            <Button type="button" variant="outline">
+              Huỷ
+            </Button>
+          </Link>
+          <Button type="submit" disabled={mutation.isPending}>
+            {mutation.isPending ? 'Đang lưu...' : 'Tạo KCN'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}