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,3 @@
export class DeleteIndustrialParkCommand {
constructor(public readonly id: string) {}
}

View File

@@ -0,0 +1,25 @@
import { Inject } from '@nestjs/common';
import { type ICommandHandler, CommandHandler } from '@nestjs/cqrs';
import { NotFoundException } from '@modules/shared';
import {
INDUSTRIAL_PARK_REPOSITORY,
type IIndustrialParkRepository,
} from '../../../domain/repositories/industrial-park.repository';
import { DeleteIndustrialParkCommand } from './delete-industrial-park.command';
@CommandHandler(DeleteIndustrialParkCommand)
export class DeleteIndustrialParkHandler implements ICommandHandler<DeleteIndustrialParkCommand> {
constructor(
@Inject(INDUSTRIAL_PARK_REPOSITORY)
private readonly repo: IIndustrialParkRepository,
) {}
async execute(cmd: DeleteIndustrialParkCommand): Promise<void> {
const entity = await this.repo.findById(cmd.id);
if (!entity) {
throw new NotFoundException('Khu công nghiệp', cmd.id);
}
await this.repo.delete(cmd.id);
}
}

View File

@@ -110,6 +110,7 @@ export interface IIndustrialParkRepository {
findDetailById(id: string): Promise<IndustrialParkDetailData | null>;
save(entity: IndustrialParkEntity): Promise<void>;
update(entity: IndustrialParkEntity): Promise<void>;
delete(id: string): Promise<void>;
search(params: IndustrialParkSearchParams): Promise<PaginatedResult<IndustrialParkListItem>>;
compareParks(ids: string[]): Promise<IndustrialParkDetailData[]>;
getStats(): Promise<IndustrialParkStatsData>;

View File

@@ -4,6 +4,7 @@ import { SearchModule } from '@modules/search';
import { CreateIndustrialListingHandler } from './application/commands/create-industrial-listing/create-industrial-listing.handler';
import { CreateIndustrialParkHandler } from './application/commands/create-industrial-park/create-industrial-park.handler';
import { DeleteIndustrialListingHandler } from './application/commands/delete-industrial-listing/delete-industrial-listing.handler';
import { DeleteIndustrialParkHandler } from './application/commands/delete-industrial-park/delete-industrial-park.handler';
import { UpdateIndustrialListingHandler } from './application/commands/update-industrial-listing/update-industrial-listing.handler';
import { UpdateIndustrialParkHandler } from './application/commands/update-industrial-park/update-industrial-park.handler';
import { AnalyzeIndustrialLocationHandler } from './application/queries/analyze-industrial-location/analyze-industrial-location.handler';
@@ -26,6 +27,7 @@ import { IndustrialParksController } from './presentation/controllers/industrial
const CommandHandlers = [
CreateIndustrialParkHandler,
UpdateIndustrialParkHandler,
DeleteIndustrialParkHandler,
CreateIndustrialListingHandler,
UpdateIndustrialListingHandler,
DeleteIndustrialListingHandler,

View File

@@ -95,6 +95,10 @@ export class PrismaIndustrialParkRepository implements IIndustrialParkRepository
`;
}
async delete(id: string): Promise<void> {
await this.prisma.industrialPark.delete({ where: { id } });
}
async update(entity: IndustrialParkEntity): Promise<void> {
await this.prisma.$executeRaw`
UPDATE "IndustrialPark" SET

View File

@@ -1,4 +1,4 @@
import { Body, Controller, Get, Param, Patch, Post, Query, UseGuards } from '@nestjs/common';
import { Body, Controller, Delete, Get, Param, Patch, Post, Query, UseGuards } from '@nestjs/common';
import { CommandBus, QueryBus } from '@nestjs/cqrs';
import { ApiBearerAuth, ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
import { UserRole } from '@prisma/client';
@@ -6,6 +6,7 @@ import { JwtAuthGuard, Roles, RolesGuard } from '@modules/auth';
import { NotFoundException } from '@modules/shared';
import { AnalyzeIndustrialLocationQuery } from '../../application/queries/analyze-industrial-location/analyze-industrial-location.query';
import { CreateIndustrialParkCommand } from '../../application/commands/create-industrial-park/create-industrial-park.command';
import { DeleteIndustrialParkCommand } from '../../application/commands/delete-industrial-park/delete-industrial-park.command';
import { EstimateIndustrialRentQuery } from '../../application/queries/estimate-industrial-rent/estimate-industrial-rent.query';
import { UpdateIndustrialParkCommand } from '../../application/commands/update-industrial-park/update-industrial-park.command';
import { CompareIndustrialParksQuery } from '../../application/queries/compare-industrial-parks/compare-industrial-parks.query';
@@ -195,4 +196,18 @@ export class IndustrialParksController {
),
);
}
@ApiOperation({ summary: 'Xóa KCN (admin)', description: 'Xóa vĩnh viễn khu công nghiệp' })
@ApiResponse({ status: 200, description: 'KCN đã xóa' })
@ApiResponse({ status: 401, description: 'Chưa xác thực' })
@ApiResponse({ status: 403, description: 'Không có quyền' })
@ApiResponse({ status: 404, description: 'Không tìm thấy tài nguyên' })
@ApiBearerAuth('JWT')
@UseGuards(JwtAuthGuard, RolesGuard)
@Roles(UserRole.ADMIN)
@Delete('parks/:id')
async deletePark(@Param('id') id: string): Promise<{ success: true }> {
await this.commandBus.execute(new DeleteIndustrialParkCommand(id));
return { success: true };
}
}

View File

@@ -0,0 +1,7 @@
export class DeleteListingCommand {
constructor(
public readonly listingId: string,
public readonly userId: string,
public readonly userRole?: string,
) {}
}

View File

@@ -0,0 +1,29 @@
import { Inject } from '@nestjs/common';
import { CommandHandler, type ICommandHandler } from '@nestjs/cqrs';
import { ForbiddenException, NotFoundException } from '@modules/shared';
import { LISTING_REPOSITORY, type IListingRepository } from '../../../domain/repositories/listing.repository';
import { DeleteListingCommand } from './delete-listing.command';
@CommandHandler(DeleteListingCommand)
export class DeleteListingHandler implements ICommandHandler<DeleteListingCommand> {
constructor(
@Inject(LISTING_REPOSITORY) private readonly listingRepo: IListingRepository,
) {}
async execute(command: DeleteListingCommand): Promise<void> {
const listing = await this.listingRepo.findById(command.listingId);
if (!listing) {
throw new NotFoundException('Listing', command.listingId);
}
const isOwner = listing.sellerId === command.userId;
const isAdmin = command.userRole === 'ADMIN';
if (!isOwner && !isAdmin) {
throw new ForbiddenException(
'Chỉ người bán hoặc quản trị viên mới có thể xóa tin đăng',
);
}
await this.listingRepo.delete(command.listingId);
}
}

View File

@@ -32,6 +32,7 @@ export interface IListingRepository {
findByIdWithProperty(id: string): Promise<ListingDetailData | null>;
save(listing: ListingEntity): Promise<void>;
update(listing: ListingEntity): Promise<void>;
delete(id: string): Promise<void>;
search(params: ListingSearchParams): Promise<PaginatedResult<ListingSearchItem>>;
findByStatus(status: ListingStatus, page: number, limit: number): Promise<PaginatedResult<ListingSearchItem>>;
findBySellerId(sellerId: string, page: number, limit: number): Promise<PaginatedResult<ListingSellerItem>>;

View File

@@ -47,6 +47,10 @@ export class PrismaListingRepository implements IListingRepository {
});
}
async delete(id: string): Promise<void> {
await this.prisma.listing.delete({ where: { id } });
}
async update(entity: ListingEntity): Promise<void> {
await this.prisma.listing.update({
where: { id: entity.id },

View File

@@ -3,6 +3,7 @@ import { CqrsModule } from '@nestjs/cqrs';
import { MulterModule } from '@nestjs/platform-express';
import { AdminFeatureListingHandler } from './application/commands/admin-feature-listing/admin-feature-listing.handler';
import { CreateListingHandler } from './application/commands/create-listing/create-listing.handler';
import { DeleteListingHandler } from './application/commands/delete-listing/delete-listing.handler';
import { FeatureListingHandler } from './application/commands/feature-listing/feature-listing.handler';
import { ModerateListingHandler } from './application/commands/moderate-listing/moderate-listing.handler';
import { PromoteFeaturedListingHandler } from './application/commands/promote-featured-listing/promote-featured-listing.handler';
@@ -36,6 +37,7 @@ const CommandHandlers = [
UpdateListingStatusHandler,
UploadMediaHandler,
ModerateListingHandler,
DeleteListingHandler,
];
const QueryHandlers = [

View File

@@ -1,6 +1,7 @@
import {
Body,
Controller,
Delete,
Get,
Ip,
Param,
@@ -31,6 +32,7 @@ import { NotFoundException, EndpointRateLimit, EndpointRateLimitGuard, FileValid
import { RequireQuota, QuotaGuard } from '@modules/subscriptions';
import { CreateListingCommand } from '../../application/commands/create-listing/create-listing.command';
import type { CreateListingResult } from '../../application/commands/create-listing/create-listing.handler';
import { DeleteListingCommand } from '../../application/commands/delete-listing/delete-listing.command';
import { FeatureListingCommand } from '../../application/commands/feature-listing/feature-listing.command';
import type { FeatureListingResult } from '../../application/commands/feature-listing/feature-listing.handler';
import { ModerateListingCommand } from '../../application/commands/moderate-listing/moderate-listing.command';
@@ -352,6 +354,23 @@ export class ListingsController {
);
}
@ApiBearerAuth('JWT')
@ApiOperation({ summary: 'Delete a listing (owner or admin)' })
@ApiParam({ name: 'id', description: 'Listing UUID' })
@ApiResponse({ status: 200, description: 'Listing deleted successfully' })
@ApiResponse({ status: 401, description: 'Unauthorized' })
@ApiResponse({ status: 403, description: 'Forbidden — not the seller or admin' })
@ApiResponse({ status: 404, description: 'Listing not found' })
@UseGuards(JwtAuthGuard)
@Delete(':id')
async deleteListing(
@Param('id') id: string,
@CurrentUser() user: JwtPayload,
): Promise<{ success: true }> {
await this.commandBus.execute(new DeleteListingCommand(id, user.sub, user.role));
return { success: true };
}
@ApiBearerAuth('JWT')
@ApiOperation({
summary: 'Promote a listing via subscription entitlement (no payment)',

View File

@@ -0,0 +1,3 @@
export class DeleteProjectCommand {
constructor(public readonly id: string) {}
}

View File

@@ -0,0 +1,25 @@
import { Inject } from '@nestjs/common';
import { type ICommandHandler, CommandHandler } from '@nestjs/cqrs';
import { NotFoundException } from '@modules/shared';
import {
PROJECT_REPOSITORY,
type IProjectRepository,
} from '../../../domain/repositories/project-development.repository';
import { DeleteProjectCommand } from './delete-project.command';
@CommandHandler(DeleteProjectCommand)
export class DeleteProjectHandler implements ICommandHandler<DeleteProjectCommand> {
constructor(
@Inject(PROJECT_REPOSITORY)
private readonly repo: IProjectRepository,
) {}
async execute(cmd: DeleteProjectCommand): Promise<void> {
const entity = await this.repo.findById(cmd.id);
if (!entity) {
throw new NotFoundException('Dự án', cmd.id);
}
await this.repo.delete(cmd.id);
}
}

View File

@@ -68,5 +68,6 @@ export interface IProjectRepository {
findDetailById(id: string): Promise<ProjectDetailData | null>;
save(entity: ProjectDevelopmentEntity): Promise<void>;
update(entity: ProjectDevelopmentEntity): Promise<void>;
delete(id: string): Promise<void>;
search(params: ProjectSearchParams): Promise<PaginatedResult<ProjectListItem>>;
}

View File

@@ -91,6 +91,10 @@ export class PrismaProjectDevelopmentRepository implements IProjectRepository {
`;
}
async delete(id: string): Promise<void> {
await this.prisma.projectDevelopment.delete({ where: { id } });
}
async update(entity: ProjectDevelopmentEntity): Promise<void> {
await this.prisma.$executeRaw`
UPDATE "ProjectDevelopment" SET

View File

@@ -1,10 +1,11 @@
import { Body, Controller, Get, Param, Patch, Post, Query, UseGuards } from '@nestjs/common';
import { Body, Controller, Delete, Get, Param, Patch, Post, Query, UseGuards } from '@nestjs/common';
import { CommandBus, QueryBus } from '@nestjs/cqrs';
import { ApiBearerAuth, ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
import { UserRole } from '@prisma/client';
import { JwtAuthGuard, Roles, RolesGuard } from '@modules/auth';
import { NotFoundException } from '@modules/shared';
import { CreateProjectCommand } from '../../application/commands/create-project/create-project.command';
import { DeleteProjectCommand } from '../../application/commands/delete-project/delete-project.command';
import { UpdateProjectCommand } from '../../application/commands/update-project/update-project.command';
import { GetProjectQuery } from '../../application/queries/get-project/get-project.query';
import { ListProjectsQuery } from '../../application/queries/list-projects/list-projects.query';
@@ -172,4 +173,18 @@ export class ProjectsController {
),
);
}
@ApiOperation({ summary: 'Xóa dự án (admin)', description: 'Xóa vĩnh viễn dự án bất động sản' })
@ApiResponse({ status: 200, description: 'Dự án đã xóa' })
@ApiResponse({ status: 401, description: 'Chưa xác thực' })
@ApiResponse({ status: 403, description: 'Không có quyền' })
@ApiResponse({ status: 404, description: 'Không tìm thấy tài nguyên' })
@ApiBearerAuth('JWT')
@UseGuards(JwtAuthGuard, RolesGuard)
@Roles(UserRole.ADMIN)
@Delete(':id')
async deleteProject(@Param('id') id: string): Promise<{ success: true }> {
await this.commandBus.execute(new DeleteProjectCommand(id));
return { success: true };
}
}

View File

@@ -1,6 +1,7 @@
import { Module } from '@nestjs/common';
import { CqrsModule } from '@nestjs/cqrs';
import { CreateProjectHandler } from './application/commands/create-project/create-project.handler';
import { DeleteProjectHandler } from './application/commands/delete-project/delete-project.handler';
import { UpdateProjectHandler } from './application/commands/update-project/update-project.handler';
import { GetProjectHandler } from './application/queries/get-project/get-project.handler';
import { ListProjectsHandler } from './application/queries/list-projects/list-projects.handler';
@@ -8,7 +9,7 @@ import { PROJECT_REPOSITORY } from './domain/repositories/project-development.re
import { PrismaProjectDevelopmentRepository } from './infrastructure/repositories/prisma-project-development.repository';
import { ProjectsController } from './presentation/controllers/projects.controller';
const CommandHandlers = [CreateProjectHandler, UpdateProjectHandler];
const CommandHandlers = [CreateProjectHandler, UpdateProjectHandler, DeleteProjectHandler];
const QueryHandlers = [GetProjectHandler, ListProjectsHandler];
@Module({

View File

@@ -0,0 +1,551 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
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 {
industrialApi,
PARK_STATUS_LABELS,
REGION_LABELS,
type IndustrialParkStatus,
type UpdateIndustrialParkPayload,
type VietnamRegion,
} from '@/lib/khu-cong-nghiep-api';
const STATUS_OPTIONS: IndustrialParkStatus[] = [
'PLANNING',
'UNDER_CONSTRUCTION',
'OPERATIONAL',
'FULL',
];
const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];
const optionalString = z
.string()
.optional()
.transform((v) => (v && v.trim() !== '' ? v.trim() : undefined));
const optionalNonNegativeNumber = z
.string()
.optional()
.refine(
(v) => v === undefined || v === '' || (!isNaN(Number(v)) && Number(v) >= 0),
'Phải là số không âm',
);
const editSchema = z.object({
name: optionalString,
nameEn: optionalString,
slug: optionalString,
developer: optionalString,
operator: optionalString,
status: z.enum(['PLANNING', 'UNDER_CONSTRUCTION', 'OPERATIONAL', 'FULL']),
address: optionalString,
district: optionalString,
province: optionalString,
region: z.enum(['NORTH', 'CENTRAL', 'SOUTH']),
latitude: z
.string()
.optional()
.refine(
(v) => v === undefined || v === '' || (!isNaN(Number(v)) && Number(v) >= -90 && Number(v) <= 90),
'Vĩ độ từ -90 đến 90',
),
longitude: z
.string()
.optional()
.refine(
(v) =>
v === undefined || v === '' || (!isNaN(Number(v)) && Number(v) >= -180 && Number(v) <= 180),
'Kinh độ từ -180 đến 180',
),
totalAreaHa: optionalNonNegativeNumber,
leasableAreaHa: optionalNonNegativeNumber,
landRentUsdM2Year: optionalNonNegativeNumber,
rbfRentUsdM2Month: optionalNonNegativeNumber,
rbwRentUsdM2Month: optionalNonNegativeNumber,
managementFeeUsd: optionalNonNegativeNumber,
targetIndustries: optionalString,
infrastructure: optionalString,
establishedYear: optionalNonNegativeNumber,
tenantCount: optionalNonNegativeNumber,
description: optionalString,
descriptionEn: optionalString,
});
type EditFormValues = z.input<typeof editSchema>;
function infraToText(infra: Record<string, unknown> | null | undefined): string {
if (!infra) return '';
return Object.entries(infra)
.map(([k, v]) => {
if (v === true) return k;
return `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`;
})
.join('\n');
}
function parseInfrastructure(text: string | undefined): Record<string, unknown> | undefined {
if (!text) return undefined;
const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
if (lines.length === 0) return undefined;
const out: Record<string, unknown> = {};
for (const line of lines) {
const idx = line.indexOf(':');
if (idx > 0) {
const key = line.slice(0, idx).trim();
const value = line.slice(idx + 1).trim();
if (key) out[key] = value;
} else {
out[line] = true;
}
}
return Object.keys(out).length > 0 ? out : undefined;
}
function toNumOrUndef(v: string | undefined): number | undefined {
if (v === undefined || v === '') return undefined;
const n = Number(v);
return isNaN(n) ? undefined : n;
}
export default function EditIndustrialParkPage() {
const { id } = useParams<{ id: string }>();
const router = useRouter();
const queryClient = useQueryClient();
const [error, setError] = React.useState<string | null>(null);
const {
data: park,
isLoading,
isError,
} = useQuery({
queryKey: ['admin-industrial-park', id],
queryFn: () => industrialApi.getBySlug(id),
enabled: Boolean(id),
});
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<EditFormValues>({
resolver: zodResolver(editSchema),
mode: 'onTouched',
defaultValues: {
status: 'PLANNING',
region: 'NORTH',
},
});
React.useEffect(() => {
if (!park) return;
reset({
name: park.name,
nameEn: park.nameEn ?? '',
slug: park.slug,
developer: park.developer,
operator: park.operator ?? '',
status: park.status,
address: park.address,
district: park.district,
province: park.province,
region: park.region,
latitude: String(park.latitude),
longitude: String(park.longitude),
totalAreaHa: String(park.totalAreaHa),
leasableAreaHa: String(park.leasableAreaHa),
landRentUsdM2Year: park.landRentUsdM2Year != null ? String(park.landRentUsdM2Year) : '',
rbfRentUsdM2Month: park.rbfRentUsdM2Month != null ? String(park.rbfRentUsdM2Month) : '',
rbwRentUsdM2Month: park.rbwRentUsdM2Month != null ? String(park.rbwRentUsdM2Month) : '',
managementFeeUsd: park.managementFeeUsd != null ? String(park.managementFeeUsd) : '',
targetIndustries: park.targetIndustries.join(', '),
infrastructure: infraToText(park.infrastructure),
establishedYear: park.establishedYear != null ? String(park.establishedYear) : '',
tenantCount: String(park.tenantCount),
description: park.description ?? '',
descriptionEn: park.descriptionEn ?? '',
});
}, [park, reset]);
const updateMutation = useMutation({
mutationFn: (payload: UpdateIndustrialParkPayload) =>
industrialApi.updatePark(park?.id ?? id, payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] });
queryClient.invalidateQueries({ queryKey: ['admin-industrial-park', id] });
router.push('/industrial-parks');
},
onError: (err: unknown) => {
setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
},
});
const deleteMutation = useMutation({
mutationFn: () => industrialApi.deletePark(park?.id ?? id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] });
router.push('/industrial-parks');
},
onError: (err: unknown) => {
setError(err instanceof Error ? err.message : 'Không thể xoá KCN');
},
});
const onSubmit = (data: EditFormValues) => {
setError(null);
const payload: UpdateIndustrialParkPayload = {
status: data.status,
};
if (data.name) payload.name = data.name;
if (data.nameEn !== undefined) payload.nameEn = data.nameEn;
if (data.developer) payload.developer = data.developer;
if (data.operator !== undefined) payload.operator = data.operator;
const landRent = toNumOrUndef(data.landRentUsdM2Year);
if (landRent != null) payload.landRentUsdM2Year = landRent;
const rbfRent = toNumOrUndef(data.rbfRentUsdM2Month);
if (rbfRent != null) payload.rbfRentUsdM2Month = rbfRent;
const rbwRent = toNumOrUndef(data.rbwRentUsdM2Month);
if (rbwRent != null) payload.rbwRentUsdM2Month = rbwRent;
const mgmtFee = toNumOrUndef(data.managementFeeUsd);
if (mgmtFee != null) payload.managementFeeUsd = mgmtFee;
const tenantCount = toNumOrUndef(data.tenantCount);
if (tenantCount != null) payload.tenantCount = tenantCount;
if (data.targetIndustries !== undefined) {
payload.targetIndustries = data.targetIndustries
? data.targetIndustries
.split(',')
.map((s) => s.trim())
.filter(Boolean)
: [];
}
const infra = parseInfrastructure(data.infrastructure);
if (infra) payload.infrastructure = infra;
if (data.description !== undefined) payload.description = data.description;
if (data.descriptionEn !== undefined) payload.descriptionEn = data.descriptionEn;
updateMutation.mutate(payload);
};
const handleDelete = () => {
if (!park) return;
if (!window.confirm(`Xoá KCN "${park.name}"? Thao tác này không thể hoàn tác.`)) return;
deleteMutation.mutate();
};
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 || !park) {
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 KCN</p>
<Button variant="outline" onClick={() => router.push('/industrial-parks')}>
Quay lại danh sách
</Button>
</div>
);
}
return (
<div className="mx-auto max-w-4xl space-y-4 sm:space-y-6">
<div className="flex items-center justify-between gap-3">
<div>
<Link
href="/industrial-parks"
className="text-sm text-muted-foreground hover:text-foreground"
>
Danh sách KCN
</Link>
<h1 className="mt-1 text-xl font-bold sm:text-2xl">Chỉnh sửa KCN</h1>
</div>
<Link href={`/khu-cong-nghiep/${park.slug}`} target="_blank" rel="noreferrer">
<Button variant="outline">Xem trang công khai</Button>
</Link>
</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 */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Thông tin bản</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div>
<Label htmlFor="name">Tên KCN</Label>
<Input id="name" {...register('name')} />
</div>
<div>
<Label htmlFor="nameEn">Tên tiếng Anh</Label>
<Input id="nameEn" {...register('nameEn')} />
</div>
<div>
<Label htmlFor="slug">Slug</Label>
<Input id="slug" {...register('slug')} disabled />
</div>
<div>
<Label htmlFor="status">Trạng thái</Label>
<Select id="status" {...register('status')}>
{STATUS_OPTIONS.map((s) => (
<option key={s} value={s}>
{PARK_STATUS_LABELS[s]}
</option>
))}
</Select>
</div>
<div>
<Label htmlFor="developer">Chủ đu </Label>
<Input id="developer" {...register('developer')} />
</div>
<div>
<Label htmlFor="operator">Đơn vị vận hành</Label>
<Input id="operator" {...register('operator')} />
</div>
<div className="sm:col-span-2">
<Label htmlFor="description"> tả</Label>
<Textarea id="description" rows={3} {...register('description')} />
</div>
<div className="sm:col-span-2">
<Label htmlFor="descriptionEn"> tả (Tiếng Anh)</Label>
<Textarea id="descriptionEn" rows={3} {...register('descriptionEn')} />
</div>
</CardContent>
</Card>
{/* Vị trí */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Vị trí</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div className="sm:col-span-2">
<Label htmlFor="address">Đa chỉ</Label>
<Input id="address" {...register('address')} disabled />
</div>
<div>
<Label htmlFor="district">Quận/Huyện</Label>
<Input id="district" {...register('district')} disabled />
</div>
<div>
<Label htmlFor="province">Tỉnh/Thành phố</Label>
<Input id="province" {...register('province')} disabled />
</div>
<div>
<Label htmlFor="region">Vùng</Label>
<Select id="region" {...register('region')} disabled>
{REGION_OPTIONS.map((r) => (
<option key={r} value={r}>
{REGION_LABELS[r]}
</option>
))}
</Select>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="latitude"> đ</Label>
<Input
id="latitude"
type="number"
step="any"
{...register('latitude')}
disabled
/>
</div>
<div>
<Label htmlFor="longitude">Kinh đ</Label>
<Input
id="longitude"
type="number"
step="any"
{...register('longitude')}
disabled
/>
</div>
</div>
<p className="text-xs text-muted-foreground sm:col-span-2">
Thông tin vị trí đưc khoá sau khi tạo. Vui lòng tạo KCN mới nếu cần thay đi.
</p>
</CardContent>
</Card>
{/* Quy mô & giá thuê */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Quy & giá thuê</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div>
<Label htmlFor="totalAreaHa">Tổng diện tích (ha)</Label>
<Input
id="totalAreaHa"
type="number"
step="any"
{...register('totalAreaHa')}
disabled
/>
</div>
<div>
<Label htmlFor="leasableAreaHa">Diện tích cho thuê (ha)</Label>
<Input
id="leasableAreaHa"
type="number"
step="any"
{...register('leasableAreaHa')}
disabled
/>
</div>
<div>
<Label htmlFor="landRentUsdM2Year">Giá thuê đt (USD/m²/năm)</Label>
<Input
id="landRentUsdM2Year"
type="number"
step="any"
{...register('landRentUsdM2Year')}
/>
{errors.landRentUsdM2Year && (
<p className="mt-1 text-xs text-destructive">
{errors.landRentUsdM2Year.message}
</p>
)}
</div>
<div>
<Label htmlFor="rbfRentUsdM2Month">Giá thuê nhà xưởng (USD/m²/tháng)</Label>
<Input
id="rbfRentUsdM2Month"
type="number"
step="any"
{...register('rbfRentUsdM2Month')}
/>
</div>
<div>
<Label htmlFor="rbwRentUsdM2Month">Giá thuê kho (USD/m²/tháng)</Label>
<Input
id="rbwRentUsdM2Month"
type="number"
step="any"
{...register('rbwRentUsdM2Month')}
/>
</div>
<div>
<Label htmlFor="managementFeeUsd">Phí quản (USD)</Label>
<Input
id="managementFeeUsd"
type="number"
step="any"
{...register('managementFeeUsd')}
/>
</div>
<div>
<Label htmlFor="establishedYear">Năm thành lập</Label>
<Input
id="establishedYear"
type="number"
{...register('establishedYear')}
disabled
/>
</div>
<div>
<Label htmlFor="tenantCount">Số khách thuê</Label>
<Input id="tenantCount" type="number" {...register('tenantCount')} />
</div>
</CardContent>
</Card>
{/* Tiện ích & ngành nghề */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Tiện ích & ngành nghề</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<Label htmlFor="targetIndustries">Ngành nghề mục tiêu</Label>
<Textarea
id="targetIndustries"
rows={2}
placeholder="Phân tách bằng dấu phẩy"
{...register('targetIndustries')}
/>
</div>
<div>
<Label htmlFor="infrastructure">Hạ tầng & tiện ích</Label>
<Textarea
id="infrastructure"
rows={4}
placeholder={'Mỗi dòng một mục, dạng "key: value"'}
{...register('infrastructure')}
/>
</div>
</CardContent>
</Card>
<div className="flex justify-end gap-3">
<Link href="/industrial-parks">
<Button type="button" variant="outline">
Huỷ
</Button>
</Link>
<Button type="submit" disabled={updateMutation.isPending}>
{updateMutation.isPending ? 'Đ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 items-center justify-between gap-3">
<p className="text-sm text-muted-foreground">
Xoá KCN sẽ gỡ khỏi danh sách công khai không thể hoàn tác.
</p>
<Button
type="button"
variant="destructive"
onClick={handleDelete}
disabled={deleteMutation.isPending}
>
{deleteMutation.isPending ? 'Đang xoá...' : 'Xoá KCN'}
</Button>
</CardContent>
</Card>
</div>
);
}

View File

@@ -0,0 +1,461 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQueryClient } from '@tanstack/react-query';
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 {
industrialApi,
PARK_STATUS_LABELS,
REGION_LABELS,
type CreateIndustrialParkPayload,
type IndustrialParkStatus,
type VietnamRegion,
} from '@/lib/khu-cong-nghiep-api';
const STATUS_OPTIONS: IndustrialParkStatus[] = [
'PLANNING',
'UNDER_CONSTRUCTION',
'OPERATIONAL',
'FULL',
];
const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];
const optionalString = z
.string()
.optional()
.transform((v) => (v && v.trim() !== '' ? v.trim() : undefined));
const requiredString = (msg: string) => z.string().min(1, msg);
const nonNegativeNumber = (msg: string) =>
z
.string()
.min(1, msg)
.refine((v) => !isNaN(Number(v)) && Number(v) >= 0, 'Phải là số không âm');
const optionalNonNegativeNumber = z
.string()
.optional()
.refine(
(v) => v === undefined || v === '' || (!isNaN(Number(v)) && Number(v) >= 0),
'Phải là số không âm',
);
const parkFormSchema = z.object({
name: requiredString('Vui lòng nhập tên KCN'),
nameEn: optionalString,
slug: requiredString('Vui lòng nhập slug'),
developer: requiredString('Vui lòng nhập chủ đầu tư'),
operator: optionalString,
status: z.enum(['PLANNING', 'UNDER_CONSTRUCTION', 'OPERATIONAL', 'FULL']),
address: requiredString('Vui lòng nhập địa chỉ'),
district: requiredString('Vui lòng nhập quận/huyện'),
province: requiredString('Vui lòng nhập tỉnh/thành'),
region: z.enum(['NORTH', 'CENTRAL', 'SOUTH']),
latitude: z
.string()
.min(1, 'Vui lòng nhập vĩ độ')
.refine((v) => !isNaN(Number(v)) && Number(v) >= -90 && Number(v) <= 90, 'Vĩ độ từ -90 đến 90'),
longitude: z
.string()
.min(1, 'Vui lòng nhập kinh độ')
.refine(
(v) => !isNaN(Number(v)) && Number(v) >= -180 && Number(v) <= 180,
'Kinh độ từ -180 đến 180',
),
totalAreaHa: nonNegativeNumber('Vui lòng nhập tổng diện tích'),
leasableAreaHa: nonNegativeNumber('Vui lòng nhập diện tích cho thuê'),
landRentUsdM2Year: optionalNonNegativeNumber,
rbfRentUsdM2Month: optionalNonNegativeNumber,
rbwRentUsdM2Month: optionalNonNegativeNumber,
managementFeeUsd: optionalNonNegativeNumber,
targetIndustries: optionalString,
infrastructure: optionalString,
establishedYear: optionalNonNegativeNumber,
tenantCount: optionalNonNegativeNumber,
description: optionalString,
descriptionEn: optionalString,
});
type ParkFormValues = z.input<typeof parkFormSchema>;
function parseInfrastructure(text: string | undefined): Record<string, unknown> | undefined {
if (!text) return undefined;
const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
if (lines.length === 0) return undefined;
const out: Record<string, unknown> = {};
for (const line of lines) {
const idx = line.indexOf(':');
if (idx > 0) {
const key = line.slice(0, idx).trim();
const value = line.slice(idx + 1).trim();
if (key) out[key] = value;
} else {
out[line] = true;
}
}
return Object.keys(out).length > 0 ? out : undefined;
}
function toNumOrUndef(v: string | undefined): number | undefined {
if (v === undefined || v === '') return undefined;
const n = Number(v);
return isNaN(n) ? undefined : n;
}
export default function CreateIndustrialParkPage() {
const router = useRouter();
const queryClient = useQueryClient();
const [error, setError] = React.useState<string | null>(null);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<ParkFormValues>({
resolver: zodResolver(parkFormSchema),
mode: 'onTouched',
defaultValues: {
status: 'PLANNING',
region: 'NORTH',
},
});
const mutation = useMutation({
mutationFn: (payload: CreateIndustrialParkPayload) => industrialApi.createPark(payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] });
router.push('/industrial-parks');
},
onError: (err: unknown) => {
setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
},
});
const onSubmit = (data: ParkFormValues) => {
setError(null);
const totalArea = Number(data.totalAreaHa);
const leasableArea = Number(data.leasableAreaHa);
const industries = data.targetIndustries
? data.targetIndustries
.split(',')
.map((s) => s.trim())
.filter(Boolean)
: [];
const payload: CreateIndustrialParkPayload = {
name: data.name!,
slug: data.slug!,
developer: data.developer!,
status: data.status,
address: data.address!,
district: data.district!,
province: data.province!,
region: data.region,
latitude: Number(data.latitude),
longitude: Number(data.longitude),
totalAreaHa: totalArea,
leasableAreaHa: leasableArea,
occupancyRate: 0,
remainingAreaHa: leasableArea,
targetIndustries: industries,
};
if (data.nameEn) payload.nameEn = data.nameEn;
if (data.operator) payload.operator = data.operator;
const landRent = toNumOrUndef(data.landRentUsdM2Year);
if (landRent != null) payload.landRentUsdM2Year = landRent;
const rbfRent = toNumOrUndef(data.rbfRentUsdM2Month);
if (rbfRent != null) payload.rbfRentUsdM2Month = rbfRent;
const rbwRent = toNumOrUndef(data.rbwRentUsdM2Month);
if (rbwRent != null) payload.rbwRentUsdM2Month = rbwRent;
const mgmtFee = toNumOrUndef(data.managementFeeUsd);
if (mgmtFee != null) payload.managementFeeUsd = mgmtFee;
const year = toNumOrUndef(data.establishedYear);
if (year != null) payload.establishedYear = year;
const tenantCount = toNumOrUndef(data.tenantCount);
if (tenantCount != null) payload.tenantCount = tenantCount;
const infra = parseInfrastructure(data.infrastructure);
if (infra) payload.infrastructure = infra;
if (data.description) payload.description = data.description;
if (data.descriptionEn) payload.descriptionEn = data.descriptionEn;
mutation.mutate(payload);
};
return (
<div className="mx-auto max-w-4xl space-y-4 sm:space-y-6">
<div className="flex items-center justify-between gap-3">
<div>
<Link
href="/industrial-parks"
className="text-sm text-muted-foreground hover:text-foreground"
>
Danh sách KCN
</Link>
<h1 className="mt-1 text-xl font-bold sm:text-2xl">Thêm KCN</h1>
</div>
</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 */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Thông tin bản</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div>
<Label htmlFor="name">Tên KCN *</Label>
<Input id="name" {...register('name')} />
{errors.name && (
<p className="mt-1 text-xs text-destructive">{errors.name.message}</p>
)}
</div>
<div>
<Label htmlFor="nameEn">Tên tiếng Anh</Label>
<Input id="nameEn" {...register('nameEn')} />
</div>
<div>
<Label htmlFor="slug">Slug *</Label>
<Input id="slug" {...register('slug')} placeholder="vd: kcn-vsip-1" />
{errors.slug && (
<p className="mt-1 text-xs text-destructive">{errors.slug.message}</p>
)}
</div>
<div>
<Label htmlFor="status">Trạng thái *</Label>
<Select id="status" {...register('status')}>
{STATUS_OPTIONS.map((s) => (
<option key={s} value={s}>
{PARK_STATUS_LABELS[s]}
</option>
))}
</Select>
</div>
<div>
<Label htmlFor="developer">Chủ đu *</Label>
<Input id="developer" {...register('developer')} />
{errors.developer && (
<p className="mt-1 text-xs text-destructive">{errors.developer.message}</p>
)}
</div>
<div>
<Label htmlFor="operator">Đơn vị vận hành</Label>
<Input id="operator" {...register('operator')} />
</div>
<div className="sm:col-span-2">
<Label htmlFor="description"> tả</Label>
<Textarea id="description" rows={3} {...register('description')} />
</div>
<div className="sm:col-span-2">
<Label htmlFor="descriptionEn"> tả (Tiếng Anh)</Label>
<Textarea id="descriptionEn" rows={3} {...register('descriptionEn')} />
</div>
</CardContent>
</Card>
{/* Vị trí */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Vị trí</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div className="sm:col-span-2">
<Label htmlFor="address">Đa chỉ *</Label>
<Input id="address" {...register('address')} />
{errors.address && (
<p className="mt-1 text-xs text-destructive">{errors.address.message}</p>
)}
</div>
<div>
<Label htmlFor="district">Quận/Huyện *</Label>
<Input id="district" {...register('district')} />
{errors.district && (
<p className="mt-1 text-xs text-destructive">{errors.district.message}</p>
)}
</div>
<div>
<Label htmlFor="province">Tỉnh/Thành phố *</Label>
<Input id="province" {...register('province')} />
{errors.province && (
<p className="mt-1 text-xs text-destructive">{errors.province.message}</p>
)}
</div>
<div>
<Label htmlFor="region">Vùng *</Label>
<Select id="region" {...register('region')}>
{REGION_OPTIONS.map((r) => (
<option key={r} value={r}>
{REGION_LABELS[r]}
</option>
))}
</Select>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="latitude"> đ *</Label>
<Input id="latitude" type="number" step="any" {...register('latitude')} />
{errors.latitude && (
<p className="mt-1 text-xs text-destructive">{errors.latitude.message}</p>
)}
</div>
<div>
<Label htmlFor="longitude">Kinh đ *</Label>
<Input id="longitude" type="number" step="any" {...register('longitude')} />
{errors.longitude && (
<p className="mt-1 text-xs text-destructive">{errors.longitude.message}</p>
)}
</div>
</div>
</CardContent>
</Card>
{/* Quy mô & giá thuê */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Quy & giá thuê</CardTitle>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2">
<div>
<Label htmlFor="totalAreaHa">Tổng diện tích (ha) *</Label>
<Input
id="totalAreaHa"
type="number"
step="any"
{...register('totalAreaHa')}
/>
{errors.totalAreaHa && (
<p className="mt-1 text-xs text-destructive">{errors.totalAreaHa.message}</p>
)}
</div>
<div>
<Label htmlFor="leasableAreaHa">Diện tích cho thuê (ha) *</Label>
<Input
id="leasableAreaHa"
type="number"
step="any"
{...register('leasableAreaHa')}
/>
{errors.leasableAreaHa && (
<p className="mt-1 text-xs text-destructive">{errors.leasableAreaHa.message}</p>
)}
</div>
<div>
<Label htmlFor="landRentUsdM2Year">Giá thuê đt (USD/m²/năm)</Label>
<Input
id="landRentUsdM2Year"
type="number"
step="any"
{...register('landRentUsdM2Year')}
/>
</div>
<div>
<Label htmlFor="rbfRentUsdM2Month">Giá thuê nhà xưởng (USD/m²/tháng)</Label>
<Input
id="rbfRentUsdM2Month"
type="number"
step="any"
{...register('rbfRentUsdM2Month')}
/>
</div>
<div>
<Label htmlFor="rbwRentUsdM2Month">Giá thuê kho (USD/m²/tháng)</Label>
<Input
id="rbwRentUsdM2Month"
type="number"
step="any"
{...register('rbwRentUsdM2Month')}
/>
</div>
<div>
<Label htmlFor="managementFeeUsd">Phí quản (USD)</Label>
<Input
id="managementFeeUsd"
type="number"
step="any"
{...register('managementFeeUsd')}
/>
</div>
<div>
<Label htmlFor="establishedYear">Năm thành lập</Label>
<Input id="establishedYear" type="number" {...register('establishedYear')} />
</div>
<div>
<Label htmlFor="tenantCount">Số khách thuê</Label>
<Input id="tenantCount" type="number" {...register('tenantCount')} />
</div>
</CardContent>
</Card>
{/* Tiện ích & ngành nghề */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Tiện ích & ngành nghề</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<Label htmlFor="targetIndustries">Ngành nghề mục tiêu</Label>
<Textarea
id="targetIndustries"
rows={2}
placeholder="Phân tách bằng dấu phẩy, vd: Điện tử, Dệt may, Logistics"
{...register('targetIndustries')}
/>
</div>
<div>
<Label htmlFor="infrastructure">Hạ tầng & tiện ích</Label>
<Textarea
id="infrastructure"
rows={4}
placeholder={'Mỗi dòng một mục, dạng "key: value"\nvd:\nĐiện: 22kV\nNước: 5000 m³/ngày'}
{...register('infrastructure')}
/>
</div>
</CardContent>
</Card>
<div className="flex justify-end gap-3">
<Link href="/industrial-parks">
<Button type="button" variant="outline">
Huỷ
</Button>
</Link>
<Button type="submit" disabled={mutation.isPending}>
{mutation.isPending ? 'Đang lưu...' : 'Tạo KCN'}
</Button>
</div>
</form>
</div>
);
}

View File

@@ -0,0 +1,279 @@
'use client';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ExternalLink, Pencil, Trash2 } from 'lucide-react';
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 {
industrialApi,
PARK_STATUS_COLORS,
PARK_STATUS_LABELS,
REGION_LABELS,
type IndustrialParkStatus,
type SearchIndustrialParksParams,
type VietnamRegion,
} from '@/lib/khu-cong-nghiep-api';
const STATUS_OPTIONS: IndustrialParkStatus[] = [
'PLANNING',
'UNDER_CONSTRUCTION',
'OPERATIONAL',
'FULL',
];
const REGION_OPTIONS: VietnamRegion[] = ['NORTH', 'CENTRAL', 'SOUTH'];
interface FiltersState {
q: string;
province: string;
status: IndustrialParkStatus | '';
region: VietnamRegion | '';
page: number;
}
const INITIAL_FILTERS: FiltersState = {
q: '',
province: '',
status: '',
region: '',
page: 1,
};
export default function IndustrialParksListPage() {
const [filters, setFilters] = React.useState<FiltersState>(INITIAL_FILTERS);
const queryParams = React.useMemo<SearchIndustrialParksParams>(() => {
const p: SearchIndustrialParksParams = { page: filters.page, limit: 12 };
if (filters.q) p.q = filters.q;
if (filters.province) p.province = filters.province;
if (filters.status) p.status = filters.status;
if (filters.region) p.region = filters.region;
return p;
}, [filters]);
const { data: result, isLoading } = useQuery({
queryKey: ['admin-industrial-parks', queryParams],
queryFn: () => industrialApi.search(queryParams),
staleTime: 30_000,
});
const queryClient = useQueryClient();
const deleteMutation = useMutation({
mutationFn: (id: string) => industrialApi.deletePark(id),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['admin-industrial-parks'] }),
});
const handleDelete = (id: string, name: string) => {
if (!window.confirm(`Xoá KCN "${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 KCN</h1>
<p className="text-sm text-muted-foreground">
Quản danh sách khu công nghiệp, chủ đu tình trạng lấp đy
</p>
</div>
<Link href="/industrial-parks/new">
<Button>Thêm KCN</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, chủ đầu tư..."
className="w-64"
/>
<Input
value={filters.province}
onChange={(e) => setFilters((f) => ({ ...f, province: e.target.value, page: 1 }))}
placeholder="Tỉnh/Thành phố"
className="w-48"
/>
<Select
value={filters.region}
onChange={(e) =>
setFilters((f) => ({ ...f, region: e.target.value as VietnamRegion | '', page: 1 }))
}
className="w-40"
>
<option value="">Tất cả vùng</option>
{REGION_OPTIONS.map((r) => (
<option key={r} value={r}>
{REGION_LABELS[r]}
</option>
))}
</Select>
<Select
value={filters.status}
onChange={(e) =>
setFilters((f) => ({
...f,
status: e.target.value as IndustrialParkStatus | '',
page: 1,
}))
}
className="w-48"
>
<option value="">Tất cả trạng thái</option>
{STATUS_OPTIONS.map((s) => (
<option key={s} value={s}>
{PARK_STATUS_LABELS[s]}
</option>
))}
</Select>
<Button variant="outline" size="sm" onClick={resetFilters}>
Đt lại
</Button>
</div>
{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á KCN. 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 KCN nào</p>
<Link href="/industrial-parks/new" className="mt-2">
<Button variant="outline" size="sm">
Thêm KCN đ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">Tên KCN</th>
<th className="p-3 font-medium">Chủ đu </th>
<th className="p-3 font-medium">Tỉnh</th>
<th className="p-3 font-medium">Vùng</th>
<th className="p-3 font-medium text-right">Diện tích (ha)</th>
<th className="p-3 font-medium text-right">Tỉ lệ lấp đy</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((park) => (
<tr
key={park.id}
className="border-b last:border-0 transition-colors hover:bg-accent/50"
>
<td className="p-3">
<Link
href={`/khu-cong-nghiep/${park.slug}`}
target="_blank"
rel="noreferrer"
className="group inline-flex items-center gap-1 font-medium hover:text-primary"
>
<span className="truncate">{park.name}</span>
<ExternalLink className="h-3 w-3 opacity-60" />
</Link>
{park.nameEn && (
<p className="truncate text-xs text-muted-foreground">{park.nameEn}</p>
)}
</td>
<td className="p-3 text-muted-foreground">{park.developer}</td>
<td className="p-3">{park.province}</td>
<td className="p-3 text-xs text-muted-foreground">
{REGION_LABELS[park.region]}
</td>
<td className="p-3 text-right">{park.totalAreaHa.toLocaleString('vi-VN')}</td>
<td className="p-3 text-right">
{park.occupancyRate.toFixed(1)}%
</td>
<td className="p-3 text-center">
<Badge className={PARK_STATUS_COLORS[park.status]} variant="outline">
{PARK_STATUS_LABELS[park.status]}
</Badge>
</td>
<td className="p-3 text-right">
<div className="flex justify-end gap-1">
<Link href={`/industrial-parks/${park.id}/edit`}>
<Button variant="ghost" size="sm" aria-label="Sửa KCN">
<Pencil className="h-3.5 w-3.5" />
</Button>
</Link>
<Button
variant="ghost"
size="sm"
aria-label="Xoá KCN"
className="text-destructive"
disabled={
deleteMutation.isPending &&
deleteMutation.variables === park.id
}
onClick={() => handleDelete(park.id, park.name)}
>
<Trash2 className="h-3.5 w-3.5" />
</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>
);
}

View File

@@ -87,8 +87,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
{
label: t('dashboard.catalogs'),
items: [
{ href: '/du-an', label: t('nav.projects'), icon: Building2 },
{ href: '/khu-cong-nghiep', label: t('nav.industrialParks'), icon: Factory },
{ href: '/projects', label: t('dashboard.manageProjects'), icon: Building2 },
{ href: '/industrial-parks', label: t('dashboard.manageIndustrialParks'), icon: Factory },
],
},
{
@@ -121,8 +121,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const primaryNav: NavItem[] = [
{ href: '/dashboard', label: t('dashboard.title'), icon: Home },
{ href: '/listings', label: t('dashboard.listings'), icon: List },
{ href: '/du-an', label: t('nav.projects'), icon: Building2 },
{ href: '/khu-cong-nghiep', label: t('nav.industrialParks'), icon: Factory },
{ href: '/projects', label: t('dashboard.manageProjects'), icon: Building2 },
{ href: '/industrial-parks', label: t('dashboard.manageIndustrialParks'), icon: Factory },
{ href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
{ href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
];

View File

@@ -1,5 +1,7 @@
'use client';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Pencil, Trash2 } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import * as React from 'react';
@@ -11,7 +13,7 @@ import { Select } from '@/components/ui/select';
import { formatPrice } from '@/lib/currency';
import { useListingsSearch } from '@/lib/hooks/use-listings';
import { shimmerBlurDataURL, staticBlurDataURL } from '@/lib/image-blur';
import type { ListingDetail as _ListingDetail } from '@/lib/listings-api';
import { listingsApi, type ListingDetail as _ListingDetail } from '@/lib/listings-api';
import { PROPERTY_TYPES, TRANSACTION_TYPES, LISTING_STATUSES } from '@/lib/validations/listings';
function formatDate(dateStr: string | null): string {
@@ -44,6 +46,17 @@ export default function ListingsPage() {
const { data: result, isLoading: loading } = useListingsSearch(searchParams);
const queryClient = useQueryClient();
const deleteMutation = useMutation({
mutationFn: (id: string) => listingsApi.delete(id),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['listings'] }),
});
const handleDelete = (id: string, title: string) => {
if (!window.confirm(`Xoá tin "${title}"? Thao tác này không thể hoàn tác.`)) return;
deleteMutation.mutate(id);
};
// Stats from current page data
const stats = React.useMemo(() => {
if (!result) return { total: 0, active: 0, pending: 0, views: 0 };
@@ -163,6 +176,20 @@ export default function ListingsPage() {
</div>
</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á tin. Vui lòng thử lại.</p>
<button
type="button"
onClick={() => deleteMutation.reset()}
className="text-xs underline"
>
Đóng
</button>
</div>
)}
{/* Content */}
{loading ? (
<div className="flex min-h-[300px] items-center justify-center">
@@ -182,8 +209,8 @@ export default function ListingsPage() {
<ul className="flex flex-col gap-3">
{result.data.map((listing) => (
<li key={listing.id}>
<Link href={`/listings/${listing.id}`} className="group block">
<Card className="overflow-hidden transition-shadow hover:shadow-md">
<Card className="overflow-hidden transition-shadow hover:shadow-md">
<Link href={`/listings/${listing.id}`} className="group block">
<div className="flex flex-col sm:flex-row">
<div className="relative h-40 w-full shrink-0 bg-muted sm:h-32 sm:w-48">
{(listing.property.media?.length ?? 0) > 0 ? (
@@ -241,8 +268,31 @@ export default function ListingsPage() {
</div>
</CardContent>
</div>
</Card>
</Link>
</Link>
<div className="flex justify-end gap-2 border-t px-4 py-2">
<Link href={`/listings/${listing.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"
className="text-destructive"
disabled={
deleteMutation.isPending && deleteMutation.variables === listing.id
}
onClick={(e) => {
e.preventDefault();
handleDelete(listing.id, listing.property.title);
}}
>
<Trash2 className="mr-1 h-3.5 w-3.5" />
Xoá
</Button>
</div>
</Card>
</li>
))}
</ul>
@@ -262,6 +312,7 @@ export default function ListingsPage() {
<th className="p-3 font-medium text-right">Lượt xem</th>
<th className="p-3 font-medium text-right">Liên hệ</th>
<th className="p-3 font-medium text-right">Ngày đăng</th>
<th className="p-3 font-medium text-right">Thao tác</th>
</tr>
</thead>
<tbody>
@@ -317,6 +368,28 @@ export default function ListingsPage() {
<td className="p-3 text-right text-xs text-muted-foreground">
{formatDate(listing.publishedAt ?? listing.createdAt)}
</td>
<td className="p-3 text-right">
<div className="flex justify-end gap-1">
<Link href={`/listings/${listing.id}/edit`}>
<Button variant="ghost" size="sm" aria-label="Sửa tin">
<Pencil className="h-3.5 w-3.5" />
</Button>
</Link>
<Button
variant="ghost"
size="sm"
aria-label="Xoá tin"
className="text-destructive"
disabled={
deleteMutation.isPending &&
deleteMutation.variables === listing.id
}
onClick={() => handleDelete(listing.id, listing.property.title)}
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
</td>
</tr>
))}
</tbody>

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>
);
}

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>
);
}

View File

@@ -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 dự án</h1>
<p className="text-sm text-muted-foreground">
Tạo, chỉnh sửa 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 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 </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>
);
}

View File

@@ -22,10 +22,12 @@ import { Link, useRouter } from '@/i18n/navigation';
import { transferApi, type TransferListingListItem } from '@/lib/chuyen-nhuong-api';
import { duAnApi, type ProjectSummary } from '@/lib/du-an-api';
import { industrialApi, type IndustrialParkListItem } from '@/lib/khu-cong-nghiep-api';
import { listingsApi, type ListingDetail } from '@/lib/listings-api';
type FeatureKey = 'projects' | 'industrial' | 'transfer' | 'valuation';
type FeatureKey = 'listings' | 'projects' | 'industrial' | 'transfer' | 'valuation';
const FEATURES: { key: FeatureKey; href: string; icon: LucideIcon }[] = [
{ key: 'listings', href: '/search', icon: Home },
{ key: 'projects', href: '/du-an', icon: Building2 },
{ key: 'industrial', href: '/khu-cong-nghiep', icon: Factory },
{ key: 'transfer', href: '/chuyen-nhuong', icon: ArrowRightLeft },
@@ -56,6 +58,7 @@ type FeaturedItem = {
};
const VIEW_ALL_HREFS: Record<FeatureKey, string> = {
listings: '/search',
projects: '/du-an',
industrial: '/khu-cong-nghiep',
transfer: '/chuyen-nhuong',
@@ -81,6 +84,7 @@ export default function LandingPage() {
const [projects, setProjects] = React.useState<ProjectSummary[]>([]);
const [parks, setParks] = React.useState<IndustrialParkListItem[]>([]);
const [transfers, setTransfers] = React.useState<TransferListingListItem[]>([]);
const [listings, setListings] = React.useState<ListingDetail[]>([]);
const [loadingFeatured, setLoadingFeatured] = React.useState(true);
const [featuredError, setFeaturedError] = React.useState(false);
@@ -93,11 +97,13 @@ export default function LandingPage() {
setLoadingFeatured(true);
setFeaturedError(false);
const request =
feature === 'projects'
? duAnApi.search({ limit: 4 }).then((res) => setProjects(res.data))
: feature === 'industrial'
? industrialApi.search({ limit: 4 }).then((res) => setParks(res.data))
: transferApi.search({ limit: 4 }).then((res) => setTransfers(res.data));
feature === 'listings'
? listingsApi.search({ limit: 4, status: 'ACTIVE' }).then((res) => setListings(res.data))
: feature === 'projects'
? duAnApi.search({ limit: 4 }).then((res) => setProjects(res.data))
: feature === 'industrial'
? industrialApi.search({ limit: 4 }).then((res) => setParks(res.data))
: transferApi.search({ limit: 4 }).then((res) => setTransfers(res.data));
request
.catch(() => setFeaturedError(true))
.finally(() => setLoadingFeatured(false));
@@ -108,6 +114,22 @@ export default function LandingPage() {
}, [activeFeature, fetchFeatured]);
const featuredItems: FeaturedItem[] = React.useMemo(() => {
if (activeFeature === 'listings') {
return listings.map((l) => ({
id: l.id,
href: `/listings/${l.id}`,
imageUrl: l.property.media?.[0]?.url ?? null,
fallbackIcon: Home,
title: l.property.title,
location: `${l.property.district}, ${l.property.city}`,
priceLabel: `${formatVND(l.priceVND)} VNĐ`,
meta: [
`${l.property.areaM2}`,
l.property.bedrooms != null ? `${l.property.bedrooms} PN` : null,
l.transactionType === 'SALE' ? 'Bán' : 'Cho thuê',
].filter(Boolean) as string[],
}));
}
if (activeFeature === 'projects') {
return projects.map((p) => ({
id: p.id,
@@ -145,7 +167,7 @@ export default function LandingPage() {
}));
}
return [];
}, [activeFeature, projects, parks, transfers]);
}, [activeFeature, projects, parks, transfers, listings]);
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
@@ -244,7 +266,7 @@ export default function LandingPage() {
</p>
</div>
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
{FEATURES.map((feature) => (
<Link key={feature.key} href={feature.href} className="group">
<div className="flex h-full flex-col rounded-xl border bg-card p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">

View File

@@ -128,6 +128,59 @@ export interface PaginatedResult<T> {
totalPages: number;
}
export interface CreateProjectPayload {
name: string;
slug: string;
developer: string;
developerLogo?: string;
totalUnits: number;
status: string;
latitude: number;
longitude: number;
address: string;
ward: string;
district: string;
city: string;
description?: string;
amenities?: Record<string, unknown>;
masterPlanUrl?: string;
minPrice?: string;
maxPrice?: string;
pricePerM2Range?: Record<string, unknown>;
totalArea?: number;
buildingCount?: number;
floorCount?: number;
unitTypes?: Record<string, unknown>;
tags?: string[];
startDate?: string;
completionDate?: string;
}
export interface UpdateProjectPayload {
name?: string;
developer?: string;
developerLogo?: string | null;
totalUnits?: number;
completedUnits?: number;
status?: string;
description?: string | null;
amenities?: Record<string, unknown> | null;
masterPlanUrl?: string | null;
minPrice?: string | null;
maxPrice?: string | null;
pricePerM2Range?: Record<string, unknown> | null;
totalArea?: number | null;
buildingCount?: number | null;
floorCount?: number | null;
unitTypes?: Record<string, unknown> | null;
media?: Record<string, unknown>[] | null;
documents?: Record<string, unknown>[] | null;
tags?: string[];
isVerified?: boolean;
startDate?: string | null;
completionDate?: string | null;
}
export interface SearchProjectsParams {
city?: string;
district?: string;
@@ -196,4 +249,13 @@ export const duAnApi = {
submitInquiry: (projectId: string, data: { name: string; phone: string; message: string }) =>
apiClient.post<{ inquiryId: string }>(`/projects/${projectId}/inquiries`, data),
create: (payload: CreateProjectPayload) =>
apiClient.post<{ id: string; slug: string }>('/projects', payload),
update: (id: string, payload: UpdateProjectPayload) =>
apiClient.patch<ProjectDetail>(`/projects/${id}`, payload),
delete: (id: string) =>
apiClient.delete<{ success: boolean }>(`/projects/${id}`),
};

View File

@@ -149,6 +149,59 @@ export interface SearchIndustrialListingsParams {
limit?: number;
}
export interface CreateIndustrialParkPayload {
name: string;
nameEn?: string;
slug: string;
developer: string;
operator?: string;
status: IndustrialParkStatus;
latitude: number;
longitude: number;
address: string;
district: string;
province: string;
region: VietnamRegion;
totalAreaHa: number;
leasableAreaHa: number;
occupancyRate: number;
remainingAreaHa: number;
tenantCount?: number;
establishedYear?: number;
landRentUsdM2Year?: number;
rbfRentUsdM2Month?: number;
rbwRentUsdM2Month?: number;
managementFeeUsd?: number;
infrastructure?: Record<string, unknown>;
connectivity?: Record<string, unknown>;
incentives?: Record<string, unknown>;
targetIndustries: string[];
description?: string;
descriptionEn?: string;
}
export interface UpdateIndustrialParkPayload {
name?: string;
nameEn?: string;
developer?: string;
operator?: string;
status?: IndustrialParkStatus;
occupancyRate?: number;
remainingAreaHa?: number;
tenantCount?: number;
landRentUsdM2Year?: number;
rbfRentUsdM2Month?: number;
rbwRentUsdM2Month?: number;
managementFeeUsd?: number;
infrastructure?: Record<string, unknown>;
connectivity?: Record<string, unknown>;
incentives?: Record<string, unknown>;
targetIndustries?: string[];
description?: string;
descriptionEn?: string;
isVerified?: boolean;
}
export interface PaginatedResult<T> {
data: T[];
total: number;
@@ -243,4 +296,13 @@ export const industrialApi = {
`/industrial/listings${qs ? `?${qs}` : ''}`,
);
},
createPark: (payload: CreateIndustrialParkPayload) =>
apiClient.post<IndustrialParkDetail>('/industrial/parks', payload),
updatePark: (id: string, payload: UpdateIndustrialParkPayload) =>
apiClient.patch<IndustrialParkDetail>(`/industrial/parks/${id}`, payload),
deletePark: (id: string) =>
apiClient.delete<{ success: boolean }>(`/industrial/parks/${id}`),
};

View File

@@ -165,6 +165,9 @@ export const listingsApi = {
data,
),
delete: (id: string) =>
apiClient.delete<{ success: boolean }>(`/listings/${id}`),
getById: (id: string) => apiClient.get<ListingDetail>(`/listings/${id}`),
search: (params: SearchListingsParams = {}) => {

View File

@@ -41,6 +41,8 @@
"listings": "Listings",
"createListing": "Create listing",
"catalogs": "Catalogs",
"manageProjects": "Manage projects",
"manageIndustrialParks": "Manage industrial parks",
"inquiries": "Inquiries",
"leads": "Leads",
"analytics": "Analytics",
@@ -68,7 +70,7 @@
"searchPlaceholder": "Enter area, project, or keyword...",
"transactionTypeLabel": "Type",
"featuresTitle": "GoodGo solutions",
"featuresSubtitle": "Four core services for Vietnam's real estate market",
"featuresSubtitle": "Five core services for Vietnam's real estate market",
"features": {
"explore": "Explore",
"projects": {
@@ -86,6 +88,10 @@
"valuation": {
"title": "Property valuation",
"description": "AI-powered valuation based on real market data"
},
"listings": {
"title": "Listings",
"description": "Browse for-sale and rental property listings nationwide"
}
},
"featuredTitle": "Featured listings",

View File

@@ -41,6 +41,8 @@
"listings": "Tin đăng",
"createListing": "Đăng tin",
"catalogs": "Danh mục",
"manageProjects": "Quản lý dự án",
"manageIndustrialParks": "Quản lý KCN",
"inquiries": "Liên hệ",
"leads": "Lead",
"analytics": "Phân tích",
@@ -68,7 +70,7 @@
"searchPlaceholder": "Nhập khu vực, dự án, hoặc từ khóa...",
"transactionTypeLabel": "Loại GD",
"featuresTitle": "Giải pháp GoodGo",
"featuresSubtitle": "Bốn dịch vụ cốt lõi cho thị trường bất động sản Việt Nam",
"featuresSubtitle": "Năm dịch vụ cốt lõi cho thị trường bất động sản Việt Nam",
"features": {
"explore": "Khám phá",
"projects": {
@@ -86,6 +88,10 @@
"valuation": {
"title": "Định giá BĐS",
"description": "Định giá tài sản bằng AI dựa trên dữ liệu thị trường thực"
},
"listings": {
"title": "Bất động sản",
"description": "Duyệt kho tin mua bán và cho thuê nhà đất trên toàn quốc"
}
},
"featuredTitle": "Tin đăng nổi bật",