feat: dashboard CRUD for Projects + Industrial Parks, listings delete, BĐS homepage card
Some checks failed
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m15s
Deploy / Build API Image (push) Failing after 20s
Deploy / Build AI Services Image (push) Failing after 12s
E2E Tests / Playwright E2E (push) Failing after 16s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 35s
Security Scanning / Trivy Filesystem Scan (push) Failing after 30s
Backup Verification / Backup Restore Verification (push) Failing after 14m37s
Security Scanning / Trivy Scan — API Image (push) Failing after 1m4s
Security Scanning / Trivy Scan — Web Image (push) Failing after 36s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 11m6s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 8s
CI / E2E Tests (push) Has been skipped
Security Scanning / Security Gate (push) Has been cancelled

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>
This commit is contained in:
Ho Ngoc Hai
2026-04-19 10:37:33 +07:00
parent d2488b1cc1
commit ba0bf97426
32 changed files with 2843 additions and 22 deletions

View File

@@ -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 </Label>
<Input id="developer" {...register('developer')} />
</div>
<div className="space-y-1.5">
<Label htmlFor="developerLogo">Logo chủ đu (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"> 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 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>
);
}