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
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:
426
apps/web/app/[locale]/(dashboard)/projects/[id]/edit/page.tsx
Normal file
426
apps/web/app/[locale]/(dashboard)/projects/[id]/edit/page.tsx
Normal 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 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user