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