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)/projects/[id]/edit/page.tsx

@@ -0,0 +1,426 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { useParams, 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 {
+  duAnApi,
+  type ProjectStatus,
+  type UpdateProjectPayload,
+} from '@/lib/du-an-api';
+
+const editSchema = z.object({
+  name: z.string().optional(),
+  developer: z.string().optional(),
+  developerLogo: z
+    .string()
+    .optional()
+    .refine(
+      (v) => !v || /^https?:\/\//.test(v),
+      'URL không hợp lệ',
+    ),
+  status: z
+    .enum(['UPCOMING', 'SELLING', 'HANDOVER', 'COMPLETED'])
+    .optional()
+    .or(z.literal('')),
+  totalUnits: z
+    .string()
+    .optional()
+    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
+
+  description: z.string().optional(),
+  masterPlanUrl: z
+    .string()
+    .optional()
+    .refine(
+      (v) => !v || /^https?:\/\//.test(v),
+      'URL không hợp lệ',
+    ),
+
+  minPrice: z
+    .string()
+    .optional()
+    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
+  maxPrice: z
+    .string()
+    .optional()
+    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
+  totalArea: z
+    .string()
+    .optional()
+    .refine((v) => !v || (Number.isFinite(Number(v)) && Number(v) > 0), 'Phải lớn hơn 0'),
+  buildingCount: z
+    .string()
+    .optional()
+    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
+  floorCount: z
+    .string()
+    .optional()
+    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
+
+  startDate: z.string().optional(),
+  completionDate: z.string().optional(),
+
+  tags: z.string().optional(),
+});
+
+type EditFormData = z.infer<typeof editSchema>;
+
+function FormSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 sm:grid-cols-2">{children}</CardContent>
+    </Card>
+  );
+}
+
+function toDateInput(value: string | null | undefined): string {
+  if (!value) return '';
+  // Accept both ISO and YYYY-MM-DD
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return '';
+  return d.toISOString().slice(0, 10);
+}
+
+export default function EditProjectPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const {
+    data: project,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['admin-project', id],
+    queryFn: () => duAnApi.getBySlug(id),
+    enabled: Boolean(id),
+    retry: false,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<EditFormData>({
+    resolver: zodResolver(editSchema),
+    mode: 'onTouched',
+  });
+
+  React.useEffect(() => {
+    if (!project) return;
+    reset({
+      name: project.name,
+      developer: project.developer.name,
+      developerLogo: project.developer.logoUrl ?? '',
+      status: project.status,
+      totalUnits: project.totalUnits ? String(project.totalUnits) : '',
+      description: project.description ?? '',
+      minPrice: project.minPrice ?? '',
+      maxPrice: project.maxPrice ?? '',
+      totalArea: project.totalArea ? String(project.totalArea) : '',
+      startDate: '',
+      completionDate: toDateInput(project.completionDate),
+      tags: '',
+    });
+  }, [project, reset]);
+
+  const onSubmit = async (data: EditFormData) => {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const payload: UpdateProjectPayload = {};
+
+      if (data.name) payload.name = data.name;
+      if (data.developer) payload.developer = data.developer;
+      if (data.developerLogo !== undefined) {
+        payload.developerLogo = data.developerLogo || null;
+      }
+      if (data.status) payload.status = data.status as ProjectStatus;
+      if (data.totalUnits) payload.totalUnits = Number(data.totalUnits);
+      if (data.description !== undefined) {
+        payload.description = data.description || null;
+      }
+      if (data.masterPlanUrl !== undefined) {
+        payload.masterPlanUrl = data.masterPlanUrl || null;
+      }
+      if (data.minPrice !== undefined) {
+        payload.minPrice = data.minPrice || null;
+      }
+      if (data.maxPrice !== undefined) {
+        payload.maxPrice = data.maxPrice || null;
+      }
+      if (data.totalArea) payload.totalArea = Number(data.totalArea);
+      if (data.buildingCount) payload.buildingCount = Number(data.buildingCount);
+      if (data.floorCount) payload.floorCount = Number(data.floorCount);
+      if (data.startDate) payload.startDate = data.startDate;
+      if (data.completionDate) payload.completionDate = data.completionDate;
+      if (data.tags) {
+        payload.tags = data.tags
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean);
+      }
+
+      await duAnApi.update(id, payload);
+      await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
+      router.push('/projects');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!project) return;
+    if (!window.confirm(`Xoá dự án "${project.name}"? Thao tác này không thể hoàn tác.`)) {
+      return;
+    }
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await duAnApi.delete(id);
+      await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
+      router.push('/projects');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Không thể xoá dự án');
+      setIsDeleting(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (isError || !project) {
+    return (
+      <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
+        <p className="text-destructive">Không tìm thấy dự án</p>
+        <Link href="/projects">
+          <Button variant="outline">Quay lại</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div>
+        <Link
+          href="/projects"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Danh sách dự án
+        </Link>
+        <h1 className="mt-2 text-2xl font-bold">Chỉnh sửa dự án</h1>
+        <p className="text-sm text-muted-foreground">{project.name}</p>
+      </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 */}
+        <FormSection title="Thông tin cơ bản">
+          <div className="space-y-1.5">
+            <Label htmlFor="name">Tên dự án</Label>
+            <Input id="name" {...register('name')} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="developer">Chủ đầu tư</Label>
+            <Input id="developer" {...register('developer')} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="developerLogo">Logo chủ đầu tư (URL)</Label>
+            <Input
+              id="developerLogo"
+              {...register('developerLogo')}
+              placeholder="https://..."
+            />
+            {errors.developerLogo && (
+              <p className="text-xs text-destructive">{errors.developerLogo.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="status">Trạng thái</Label>
+            <Select id="status" {...register('status')}>
+              <option value="">-- Giữ nguyên --</option>
+              <option value="UPCOMING">Sắp mở bán</option>
+              <option value="SELLING">Đang bán</option>
+              <option value="HANDOVER">Đang bàn giao</option>
+              <option value="COMPLETED">Đã hoàn thành</option>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="totalUnits">Tổng số căn</Label>
+            <Input id="totalUnits" type="number" min={1} {...register('totalUnits')} />
+            {errors.totalUnits && (
+              <p className="text-xs text-destructive">{errors.totalUnits.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="description">Mô tả</Label>
+            <Textarea id="description" rows={4} {...register('description')} />
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="masterPlanUrl">Mặt bằng tổng thể (URL)</Label>
+            <Input
+              id="masterPlanUrl"
+              {...register('masterPlanUrl')}
+              placeholder="https://..."
+            />
+            {errors.masterPlanUrl && (
+              <p className="text-xs text-destructive">{errors.masterPlanUrl.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="tags">Tags (phân cách bởi dấu phẩy)</Label>
+            <Input
+              id="tags"
+              {...register('tags')}
+              placeholder="cao cấp, view sông, gần trung tâm"
+            />
+          </div>
+        </FormSection>
+
+        {/* Vị trí */}
+        <FormSection title="Vị trí">
+          <div className="space-y-1.5 sm:col-span-2 text-sm text-muted-foreground">
+            {project.address}
+            <br />
+            {project.district}, {project.city}
+            <br />
+            <span className="text-xs">
+              (Vị trí địa lý không thể chỉnh sửa sau khi tạo.)
+            </span>
+          </div>
+        </FormSection>
+
+        {/* Quy mô & giá */}
+        <FormSection title="Quy mô & giá">
+          <div className="space-y-1.5">
+            <Label htmlFor="minPrice">Giá thấp nhất</Label>
+            <Input id="minPrice" {...register('minPrice')} placeholder="2500000000" />
+            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
+            {errors.minPrice && (
+              <p className="text-xs text-destructive">{errors.minPrice.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="maxPrice">Giá cao nhất</Label>
+            <Input id="maxPrice" {...register('maxPrice')} placeholder="8500000000" />
+            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
+            {errors.maxPrice && (
+              <p className="text-xs text-destructive">{errors.maxPrice.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="totalArea">Tổng diện tích (m²)</Label>
+            <Input
+              id="totalArea"
+              type="number"
+              step="0.01"
+              {...register('totalArea')}
+            />
+            {errors.totalArea && (
+              <p className="text-xs text-destructive">{errors.totalArea.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="buildingCount">Số toà nhà</Label>
+            <Input id="buildingCount" type="number" {...register('buildingCount')} />
+            {errors.buildingCount && (
+              <p className="text-xs text-destructive">{errors.buildingCount.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="floorCount">Số tầng</Label>
+            <Input id="floorCount" type="number" {...register('floorCount')} />
+            {errors.floorCount && (
+              <p className="text-xs text-destructive">{errors.floorCount.message}</p>
+            )}
+          </div>
+        </FormSection>
+
+        {/* Thời gian */}
+        <FormSection title="Thời gian">
+          <div className="space-y-1.5">
+            <Label htmlFor="startDate">Ngày khởi công</Label>
+            <Input id="startDate" type="date" {...register('startDate')} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="completionDate">Ngày hoàn thành</Label>
+            <Input id="completionDate" type="date" {...register('completionDate')} />
+          </div>
+        </FormSection>
+
+        <div className="flex justify-end gap-3">
+          <Link href="/projects">
+            <Button type="button" variant="outline">
+              Huỷ
+            </Button>
+          </Link>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Đang lưu...' : 'Lưu thay đổi'}
+          </Button>
+        </div>
+      </form>
+
+      {/* Danger zone */}
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle className="text-lg text-destructive">Vùng nguy hiểm</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-sm text-muted-foreground">
+            Xoá dự án sẽ không thể hoàn tác. Mọi dữ liệu liên quan sẽ bị mất.
+          </p>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting ? 'Đang xoá...' : 'Xoá dự án'}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/app/[locale]/(dashboard)/projects/new/page.tsx

@@ -0,0 +1,436 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ArrowLeft } from 'lucide-react';
+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 { duAnApi, type CreateProjectPayload } from '@/lib/du-an-api';
+
+const SLUG_REGEX = /^[a-z0-9-]+$/;
+
+const projectSchema = z.object({
+  name: z.string().min(1, 'Bắt buộc'),
+  slug: z
+    .string()
+    .min(1, 'Bắt buộc')
+    .regex(SLUG_REGEX, 'Chỉ cho phép chữ thường, số và dấu -'),
+  developer: z.string().min(1, 'Bắt buộc'),
+  developerLogo: z
+    .string()
+    .optional()
+    .refine(
+      (v) => !v || /^https?:\/\//.test(v),
+      'URL không hợp lệ',
+    ),
+  status: z.enum(['UPCOMING', 'SELLING', 'HANDOVER', 'COMPLETED']),
+  totalUnits: z
+    .string()
+    .min(1, 'Bắt buộc')
+    .refine((v) => /^\d+$/.test(v) && Number(v) > 0, 'Phải là số nguyên > 0'),
+
+  address: z.string().min(1, 'Bắt buộc'),
+  ward: z.string().min(1, 'Bắt buộc'),
+  district: z.string().min(1, 'Bắt buộc'),
+  city: z.string().min(1, 'Bắt buộc'),
+  latitude: z
+    .string()
+    .min(1, 'Bắt buộc')
+    .refine((v) => {
+      const n = Number(v);
+      return Number.isFinite(n) && n >= -90 && n <= 90;
+    }, 'Từ -90 đến 90'),
+  longitude: z
+    .string()
+    .min(1, 'Bắt buộc')
+    .refine((v) => {
+      const n = Number(v);
+      return Number.isFinite(n) && n >= -180 && n <= 180;
+    }, 'Từ -180 đến 180'),
+
+  description: z.string().optional(),
+  masterPlanUrl: z
+    .string()
+    .optional()
+    .refine(
+      (v) => !v || /^https?:\/\//.test(v),
+      'URL không hợp lệ',
+    ),
+
+  minPrice: z
+    .string()
+    .optional()
+    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
+  maxPrice: z
+    .string()
+    .optional()
+    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
+  totalArea: z
+    .string()
+    .optional()
+    .refine((v) => !v || (Number.isFinite(Number(v)) && Number(v) > 0), 'Phải lớn hơn 0'),
+  buildingCount: z
+    .string()
+    .optional()
+    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
+  floorCount: z
+    .string()
+    .optional()
+    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
+
+  startDate: z.string().optional(),
+  completionDate: z.string().optional(),
+
+  tags: z.string().optional(),
+});
+
+type ProjectFormData = z.infer<typeof projectSchema>;
+
+function FormSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 sm:grid-cols-2">{children}</CardContent>
+    </Card>
+  );
+}
+
+export default function CreateProjectPage() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [success, setSuccess] = React.useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ProjectFormData>({
+    resolver: zodResolver(projectSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      status: 'UPCOMING',
+    },
+  });
+
+  const onSubmit = async (data: ProjectFormData) => {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const payload: CreateProjectPayload = {
+        name: data.name,
+        slug: data.slug,
+        developer: data.developer,
+        status: data.status,
+        totalUnits: Number(data.totalUnits),
+        address: data.address,
+        ward: data.ward,
+        district: data.district,
+        city: data.city,
+        latitude: Number(data.latitude),
+        longitude: Number(data.longitude),
+      };
+
+      if (data.developerLogo) payload.developerLogo = data.developerLogo;
+      if (data.description) payload.description = data.description;
+      if (data.masterPlanUrl) payload.masterPlanUrl = data.masterPlanUrl;
+      if (data.minPrice) payload.minPrice = data.minPrice;
+      if (data.maxPrice) payload.maxPrice = data.maxPrice;
+      if (data.totalArea) payload.totalArea = Number(data.totalArea);
+      if (data.buildingCount) payload.buildingCount = Number(data.buildingCount);
+      if (data.floorCount) payload.floorCount = Number(data.floorCount);
+      if (data.startDate) payload.startDate = data.startDate;
+      if (data.completionDate) payload.completionDate = data.completionDate;
+      if (data.tags) {
+        const tags = data.tags
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean);
+        if (tags.length > 0) payload.tags = tags;
+      }
+
+      await duAnApi.create(payload);
+      setSuccess(true);
+      setTimeout(() => router.push('/projects'), 600);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div>
+        <Link
+          href="/projects"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Danh sách dự án
+        </Link>
+        <h1 className="mt-2 text-2xl font-bold">Thêm dự án mới</h1>
+      </div>
+
+      {success && (
+        <div className="rounded-md border border-green-500/50 bg-green-50 p-3 text-sm text-green-700">
+          Đã tạo dự án
+        </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 */}
+        <FormSection title="Thông tin cơ bản">
+          <div className="space-y-1.5">
+            <Label htmlFor="name">
+              Tên dự án <span className="text-destructive">*</span>
+            </Label>
+            <Input id="name" {...register('name')} />
+            {errors.name && (
+              <p className="text-xs text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="slug">
+              Slug <span className="text-destructive">*</span>
+            </Label>
+            <Input id="slug" {...register('slug')} placeholder="vd: vinhomes-central-park" />
+            <p className="text-xs text-muted-foreground">
+              URL thân thiện, chỉ chữ thường, số và dấu -
+            </p>
+            {errors.slug && (
+              <p className="text-xs text-destructive">{errors.slug.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="developer">
+              Chủ đầu tư <span className="text-destructive">*</span>
+            </Label>
+            <Input id="developer" {...register('developer')} />
+            {errors.developer && (
+              <p className="text-xs text-destructive">{errors.developer.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="developerLogo">Logo chủ đầu tư (URL)</Label>
+            <Input
+              id="developerLogo"
+              {...register('developerLogo')}
+              placeholder="https://..."
+            />
+            {errors.developerLogo && (
+              <p className="text-xs text-destructive">{errors.developerLogo.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="status">
+              Trạng thái <span className="text-destructive">*</span>
+            </Label>
+            <Select id="status" {...register('status')}>
+              <option value="UPCOMING">Sắp mở bán</option>
+              <option value="SELLING">Đang bán</option>
+              <option value="HANDOVER">Đang bàn giao</option>
+              <option value="COMPLETED">Đã hoàn thành</option>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="totalUnits">
+              Tổng số căn <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="totalUnits"
+              type="number"
+              min={1}
+              {...register('totalUnits')}
+            />
+            {errors.totalUnits && (
+              <p className="text-xs text-destructive">{errors.totalUnits.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="description">Mô tả</Label>
+            <Textarea id="description" rows={4} {...register('description')} />
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="masterPlanUrl">Mặt bằng tổng thể (URL)</Label>
+            <Input
+              id="masterPlanUrl"
+              {...register('masterPlanUrl')}
+              placeholder="https://..."
+            />
+            {errors.masterPlanUrl && (
+              <p className="text-xs text-destructive">{errors.masterPlanUrl.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="tags">Tags (phân cách bởi dấu phẩy)</Label>
+            <Input id="tags" {...register('tags')} placeholder="cao cấp, view sông, gần trung tâm" />
+          </div>
+        </FormSection>
+
+        {/* Vị trí */}
+        <FormSection title="Vị trí">
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label htmlFor="address">
+              Địa chỉ <span className="text-destructive">*</span>
+            </Label>
+            <Input id="address" {...register('address')} />
+            {errors.address && (
+              <p className="text-xs text-destructive">{errors.address.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="ward">
+              Phường/Xã <span className="text-destructive">*</span>
+            </Label>
+            <Input id="ward" {...register('ward')} />
+            {errors.ward && (
+              <p className="text-xs text-destructive">{errors.ward.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="district">
+              Quận/Huyện <span className="text-destructive">*</span>
+            </Label>
+            <Input id="district" {...register('district')} />
+            {errors.district && (
+              <p className="text-xs text-destructive">{errors.district.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="city">
+              Thành phố <span className="text-destructive">*</span>
+            </Label>
+            <Input id="city" {...register('city')} />
+            {errors.city && (
+              <p className="text-xs text-destructive">{errors.city.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5" />
+          <div className="space-y-1.5">
+            <Label htmlFor="latitude">
+              Vĩ độ (latitude) <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="latitude"
+              type="number"
+              step="0.0001"
+              {...register('latitude')}
+            />
+            {errors.latitude && (
+              <p className="text-xs text-destructive">{errors.latitude.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="longitude">
+              Kinh độ (longitude) <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="longitude"
+              type="number"
+              step="0.0001"
+              {...register('longitude')}
+            />
+            {errors.longitude && (
+              <p className="text-xs text-destructive">{errors.longitude.message}</p>
+            )}
+          </div>
+        </FormSection>
+
+        {/* Quy mô & giá */}
+        <FormSection title="Quy mô & giá">
+          <div className="space-y-1.5">
+            <Label htmlFor="minPrice">Giá thấp nhất</Label>
+            <Input id="minPrice" {...register('minPrice')} placeholder="2500000000" />
+            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
+            {errors.minPrice && (
+              <p className="text-xs text-destructive">{errors.minPrice.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="maxPrice">Giá cao nhất</Label>
+            <Input id="maxPrice" {...register('maxPrice')} placeholder="8500000000" />
+            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
+            {errors.maxPrice && (
+              <p className="text-xs text-destructive">{errors.maxPrice.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="totalArea">Tổng diện tích (m²)</Label>
+            <Input
+              id="totalArea"
+              type="number"
+              step="0.01"
+              {...register('totalArea')}
+            />
+            {errors.totalArea && (
+              <p className="text-xs text-destructive">{errors.totalArea.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="buildingCount">Số toà nhà</Label>
+            <Input id="buildingCount" type="number" {...register('buildingCount')} />
+            {errors.buildingCount && (
+              <p className="text-xs text-destructive">{errors.buildingCount.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="floorCount">Số tầng</Label>
+            <Input id="floorCount" type="number" {...register('floorCount')} />
+            {errors.floorCount && (
+              <p className="text-xs text-destructive">{errors.floorCount.message}</p>
+            )}
+          </div>
+        </FormSection>
+
+        {/* Thời gian */}
+        <FormSection title="Thời gian">
+          <div className="space-y-1.5">
+            <Label htmlFor="startDate">Ngày khởi công</Label>
+            <Input id="startDate" type="date" {...register('startDate')} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="completionDate">Ngày hoàn thành</Label>
+            <Input id="completionDate" type="date" {...register('completionDate')} />
+          </div>
+        </FormSection>
+
+        <div className="flex justify-end gap-3">
+          <Link href="/projects">
+            <Button type="button" variant="outline">
+              Huỷ
+            </Button>
+          </Link>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Đang tạo...' : 'Tạo dự án'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

apps/web/app/[locale]/(dashboard)/projects/page.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Pencil, Plus, Trash2 } from 'lucide-react';
+import Image from 'next/image';
+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 { formatPrice } from '@/lib/currency';
+import {
+  duAnApi,
+  PROJECT_STATUS_COLORS,
+  PROJECT_STATUS_LABELS,
+  type ProjectStatus,
+  type SearchProjectsParams,
+} from '@/lib/du-an-api';
+import { shimmerBlurDataURL } from '@/lib/image-blur';
+
+const STATUS_OPTIONS: { value: ProjectStatus; label: string }[] = [
+  { value: 'UPCOMING', label: PROJECT_STATUS_LABELS.UPCOMING },
+  { value: 'SELLING', label: PROJECT_STATUS_LABELS.SELLING },
+  { value: 'HANDOVER', label: PROJECT_STATUS_LABELS.HANDOVER },
+  { value: 'COMPLETED', label: PROJECT_STATUS_LABELS.COMPLETED },
+];
+
+const INITIAL_FILTERS = {
+  q: '',
+  status: '' as '' | ProjectStatus,
+  city: '',
+  page: 1,
+};
+
+export default function ProjectsAdminPage() {
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+
+  const queryParams = React.useMemo<SearchProjectsParams>(() => {
+    const params: SearchProjectsParams = { page: filters.page, limit: 12 };
+    if (filters.q) params.q = filters.q;
+    if (filters.status) params.status = filters.status;
+    if (filters.city) params.city = filters.city;
+    return params;
+  }, [filters]);
+
+  const { data: result, isLoading } = useQuery({
+    queryKey: ['admin-projects', queryParams],
+    queryFn: () => duAnApi.search(queryParams),
+    staleTime: 30_000,
+  });
+
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => duAnApi.delete(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['admin-projects'] }),
+  });
+
+  const handleDelete = (id: string, name: string) => {
+    if (!window.confirm(`Xoá dự án "${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ý dự án</h1>
+          <p className="text-sm text-muted-foreground">
+            Tạo, chỉnh sửa và xoá dự án bất động sản.
+          </p>
+        </div>
+        <Link href="/projects/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Thêm dự án
+          </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 dự án..."
+          className="w-64"
+        />
+        <Select
+          value={filters.status}
+          onChange={(e) =>
+            setFilters((f) => ({
+              ...f,
+              status: e.target.value as '' | ProjectStatus,
+              page: 1,
+            }))
+          }
+          className="w-48"
+        >
+          <option value="">Tất cả trạng thái</option>
+          {STATUS_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </Select>
+        <Input
+          value={filters.city}
+          onChange={(e) => setFilters((f) => ({ ...f, city: e.target.value, page: 1 }))}
+          placeholder="Thành phố"
+          className="w-48"
+        />
+        <Button variant="outline" size="sm" onClick={resetFilters}>
+          Đặt lại
+        </Button>
+      </div>
+
+      {/* Error banner */}
+      {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á dự án. 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ó dự án nào</p>
+          <Link href="/projects/new" className="mt-2">
+            <Button variant="outline" size="sm">
+              Thêm dự án đầ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">Ảnh</th>
+                    <th className="p-3 font-medium">Tên dự án</th>
+                    <th className="p-3 font-medium">Chủ đầu tư</th>
+                    <th className="p-3 font-medium">Thành phố / Quận</th>
+                    <th className="p-3 font-medium text-right">Tổng căn</th>
+                    <th className="p-3 font-medium text-right">Giá từ</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((project) => (
+                    <tr
+                      key={project.id}
+                      className="border-b last:border-0 transition-colors hover:bg-accent/50"
+                    >
+                      <td className="p-3">
+                        <div className="relative h-10 w-14 flex-shrink-0 overflow-hidden rounded bg-muted">
+                          {project.thumbnailUrl ? (
+                            <Image
+                              src={project.thumbnailUrl}
+                              alt={project.name}
+                              fill
+                              sizes="56px"
+                              className="object-cover"
+                              placeholder="blur"
+                              blurDataURL={shimmerBlurDataURL()}
+                            />
+                          ) : (
+                            <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+                              N/A
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                      <td className="p-3">
+                        <a
+                          href={`/du-an/${project.slug}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-medium hover:text-primary hover:underline"
+                        >
+                          {project.name}
+                        </a>
+                      </td>
+                      <td className="p-3 text-muted-foreground">
+                        {project.developer.name}
+                      </td>
+                      <td className="p-3 text-muted-foreground">
+                        {project.city}
+                        {project.district ? ` / ${project.district}` : ''}
+                      </td>
+                      <td className="p-3 text-right">{project.totalUnits}</td>
+                      <td className="p-3 text-right font-medium text-primary">
+                        {project.minPrice ? formatPrice(project.minPrice) : '—'}
+                      </td>
+                      <td className="p-3 text-center">
+                        <Badge className={PROJECT_STATUS_COLORS[project.status]}>
+                          {PROJECT_STATUS_LABELS[project.status]}
+                        </Badge>
+                      </td>
+                      <td className="p-3 text-right">
+                        <div className="flex justify-end gap-2">
+                          <Link href={`/projects/${project.id}/edit`}>
+                            <Button variant="outline" size="sm">
+                              <Pencil className="mr-1 h-3.5 w-3.5" />
+                              Sửa
+                            </Button>
+                          </Link>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleDelete(project.id, project.name)}
+                            disabled={deleteMutation.isPending}
+                            className="text-destructive hover:text-destructive"
+                          >
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            Xoá
+                          </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>
+  );
+}