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,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ố 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 <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 (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"> 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/ <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">
đ (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>
);
}