feat: dashboard CRUD for Projects + Industrial Parks, listings delete, BĐS homepage card
Some checks failed
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m15s
Deploy / Build API Image (push) Failing after 20s
Deploy / Build AI Services Image (push) Failing after 12s
E2E Tests / Playwright E2E (push) Failing after 16s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 35s
Security Scanning / Trivy Filesystem Scan (push) Failing after 30s
Backup Verification / Backup Restore Verification (push) Failing after 14m37s
Security Scanning / Trivy Scan — API Image (push) Failing after 1m4s
Security Scanning / Trivy Scan — Web Image (push) Failing after 36s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 11m6s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 8s
CI / E2E Tests (push) Has been skipped
Security Scanning / Security Gate (push) Has been cancelled
Some checks failed
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m15s
Deploy / Build API Image (push) Failing after 20s
Deploy / Build AI Services Image (push) Failing after 12s
E2E Tests / Playwright E2E (push) Failing after 16s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 35s
Security Scanning / Trivy Filesystem Scan (push) Failing after 30s
Backup Verification / Backup Restore Verification (push) Failing after 14m37s
Security Scanning / Trivy Scan — API Image (push) Failing after 1m4s
Security Scanning / Trivy Scan — Web Image (push) Failing after 36s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 11m6s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 8s
CI / E2E Tests (push) Has been skipped
Security Scanning / Security Gate (push) Has been cancelled
Backend — DELETE endpoints (hard delete, ADMIN or owner):
- DELETE /projects/:id (Admin) — new DeleteProjectCommand/Handler,
repository.delete() adapter, module wiring.
- DELETE /industrial/parks/:id (Admin) — same pattern.
- DELETE /listings/:id (JWT + owner-or-Admin check in handler).
Frontend — API clients:
- lib/du-an-api.ts: add create/update/delete + CreateProjectPayload,
UpdateProjectPayload types.
- lib/khu-cong-nghiep-api.ts: add createPark/updatePark/deletePark +
Create/Update payload types.
- lib/listings-api.ts: add delete().
Dashboard pages — new:
- /projects (Quản lý dự án): list with filters + edit/delete actions,
/projects/new form (sectioned Cards, zod-validated), /projects/[id]/edit
with danger-zone delete.
- /industrial-parks (Quản lý KCN): same triad. Fix occupancy-rate display
(percentage already 0-100, no need to *100).
Dashboard listings page:
- Add Edit/Delete row actions with confirm + useMutation; error banner
on mutation failure. Table view gains a "Thao tác" column; list view
gains a footer action bar below each card.
Dashboard nav:
- Catalog group: /du-an → /projects (Quản lý dự án), /khu-cong-nghiep
→ /industrial-parks (Quản lý KCN). Desktop primaryNav updated too.
Public homepage:
- Add "Bất động sản" as a 5th feature card/tab → /search, using
listingsApi for the "Featured listings" section.
- Bump grid to lg:grid-cols-5, update features subtitle copy ("Năm/Five
core services").
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
export class DeleteIndustrialParkCommand {
|
||||
constructor(public readonly id: string) {}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export class DeleteListingCommand {
|
||||
constructor(
|
||||
public readonly listingId: string,
|
||||
public readonly userId: string,
|
||||
public readonly userRole?: string,
|
||||
) {}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>>;
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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)',
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export class DeleteProjectCommand {
|
||||
constructor(public readonly id: string) {}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>>;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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 cơ 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 tư</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">Mô tả</Label>
|
||||
<Textarea id="description" rows={3} {...register('description')} />
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Label htmlFor="descriptionEn">Mô 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">Vĩ độ</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 mô & 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 lý (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 và 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>
|
||||
);
|
||||
}
|
||||
461
apps/web/app/[locale]/(dashboard)/industrial-parks/new/page.tsx
Normal file
461
apps/web/app/[locale]/(dashboard)/industrial-parks/new/page.tsx
Normal 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 cơ 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 tư *</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">Mô tả</Label>
|
||||
<Textarea id="description" rows={3} {...register('description')} />
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Label htmlFor="descriptionEn">Mô 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">Vĩ độ *</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 mô & 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 lý (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>
|
||||
);
|
||||
}
|
||||
279
apps/web/app/[locale]/(dashboard)/industrial-parks/page.tsx
Normal file
279
apps/web/app/[locale]/(dashboard)/industrial-parks/page.tsx
Normal 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 lý KCN</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Quản lý danh sách khu công nghiệp, chủ đầu tư và 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 có 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 tư</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>
|
||||
);
|
||||
}
|
||||
@@ -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 },
|
||||
];
|
||||
|
||||
@@ -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>
|
||||
|
||||
426
apps/web/app/[locale]/(dashboard)/projects/[id]/edit/page.tsx
Normal file
426
apps/web/app/[locale]/(dashboard)/projects/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import * as React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
duAnApi,
|
||||
type ProjectStatus,
|
||||
type UpdateProjectPayload,
|
||||
} from '@/lib/du-an-api';
|
||||
|
||||
const editSchema = z.object({
|
||||
name: z.string().optional(),
|
||||
developer: z.string().optional(),
|
||||
developerLogo: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
(v) => !v || /^https?:\/\//.test(v),
|
||||
'URL không hợp lệ',
|
||||
),
|
||||
status: z
|
||||
.enum(['UPCOMING', 'SELLING', 'HANDOVER', 'COMPLETED'])
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
totalUnits: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
|
||||
|
||||
description: z.string().optional(),
|
||||
masterPlanUrl: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
(v) => !v || /^https?:\/\//.test(v),
|
||||
'URL không hợp lệ',
|
||||
),
|
||||
|
||||
minPrice: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
|
||||
maxPrice: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
|
||||
totalArea: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (Number.isFinite(Number(v)) && Number(v) > 0), 'Phải lớn hơn 0'),
|
||||
buildingCount: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
|
||||
floorCount: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
|
||||
|
||||
startDate: z.string().optional(),
|
||||
completionDate: z.string().optional(),
|
||||
|
||||
tags: z.string().optional(),
|
||||
});
|
||||
|
||||
type EditFormData = z.infer<typeof editSchema>;
|
||||
|
||||
function FormSection({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 sm:grid-cols-2">{children}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function toDateInput(value: string | null | undefined): string {
|
||||
if (!value) return '';
|
||||
// Accept both ISO and YYYY-MM-DD
|
||||
const d = new Date(value);
|
||||
if (isNaN(d.getTime())) return '';
|
||||
return d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
export default function EditProjectPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const [isDeleting, setIsDeleting] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data: project,
|
||||
isLoading,
|
||||
isError,
|
||||
} = useQuery({
|
||||
queryKey: ['admin-project', id],
|
||||
queryFn: () => duAnApi.getBySlug(id),
|
||||
enabled: Boolean(id),
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<EditFormData>({
|
||||
resolver: zodResolver(editSchema),
|
||||
mode: 'onTouched',
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!project) return;
|
||||
reset({
|
||||
name: project.name,
|
||||
developer: project.developer.name,
|
||||
developerLogo: project.developer.logoUrl ?? '',
|
||||
status: project.status,
|
||||
totalUnits: project.totalUnits ? String(project.totalUnits) : '',
|
||||
description: project.description ?? '',
|
||||
minPrice: project.minPrice ?? '',
|
||||
maxPrice: project.maxPrice ?? '',
|
||||
totalArea: project.totalArea ? String(project.totalArea) : '',
|
||||
startDate: '',
|
||||
completionDate: toDateInput(project.completionDate),
|
||||
tags: '',
|
||||
});
|
||||
}, [project, reset]);
|
||||
|
||||
const onSubmit = async (data: EditFormData) => {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const payload: UpdateProjectPayload = {};
|
||||
|
||||
if (data.name) payload.name = data.name;
|
||||
if (data.developer) payload.developer = data.developer;
|
||||
if (data.developerLogo !== undefined) {
|
||||
payload.developerLogo = data.developerLogo || null;
|
||||
}
|
||||
if (data.status) payload.status = data.status as ProjectStatus;
|
||||
if (data.totalUnits) payload.totalUnits = Number(data.totalUnits);
|
||||
if (data.description !== undefined) {
|
||||
payload.description = data.description || null;
|
||||
}
|
||||
if (data.masterPlanUrl !== undefined) {
|
||||
payload.masterPlanUrl = data.masterPlanUrl || null;
|
||||
}
|
||||
if (data.minPrice !== undefined) {
|
||||
payload.minPrice = data.minPrice || null;
|
||||
}
|
||||
if (data.maxPrice !== undefined) {
|
||||
payload.maxPrice = data.maxPrice || null;
|
||||
}
|
||||
if (data.totalArea) payload.totalArea = Number(data.totalArea);
|
||||
if (data.buildingCount) payload.buildingCount = Number(data.buildingCount);
|
||||
if (data.floorCount) payload.floorCount = Number(data.floorCount);
|
||||
if (data.startDate) payload.startDate = data.startDate;
|
||||
if (data.completionDate) payload.completionDate = data.completionDate;
|
||||
if (data.tags) {
|
||||
payload.tags = data.tags
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
await duAnApi.update(id, payload);
|
||||
await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
|
||||
router.push('/projects');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!project) return;
|
||||
if (!window.confirm(`Xoá dự án "${project.name}"? Thao tác này không thể hoàn tác.`)) {
|
||||
return;
|
||||
}
|
||||
setIsDeleting(true);
|
||||
setError(null);
|
||||
try {
|
||||
await duAnApi.delete(id);
|
||||
await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
|
||||
router.push('/projects');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Không thể xoá dự án');
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[400px] items-center justify-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !project) {
|
||||
return (
|
||||
<div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
|
||||
<p className="text-destructive">Không tìm thấy dự án</p>
|
||||
<Link href="/projects">
|
||||
<Button variant="outline">Quay lại</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Danh sách dự án
|
||||
</Link>
|
||||
<h1 className="mt-2 text-2xl font-bold">Chỉnh sửa dự án</h1>
|
||||
<p className="text-sm text-muted-foreground">{project.name}</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button className="ml-2 font-medium underline" onClick={() => setError(null)}>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Thông tin cơ bản */}
|
||||
<FormSection title="Thông tin cơ bản">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">Tên dự án</Label>
|
||||
<Input id="name" {...register('name')} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="developer">Chủ đầu tư</Label>
|
||||
<Input id="developer" {...register('developer')} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="developerLogo">Logo chủ đầu tư (URL)</Label>
|
||||
<Input
|
||||
id="developerLogo"
|
||||
{...register('developerLogo')}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
{errors.developerLogo && (
|
||||
<p className="text-xs text-destructive">{errors.developerLogo.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="status">Trạng thái</Label>
|
||||
<Select id="status" {...register('status')}>
|
||||
<option value="">-- Giữ nguyên --</option>
|
||||
<option value="UPCOMING">Sắp mở bán</option>
|
||||
<option value="SELLING">Đang bán</option>
|
||||
<option value="HANDOVER">Đang bàn giao</option>
|
||||
<option value="COMPLETED">Đã hoàn thành</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="totalUnits">Tổng số căn</Label>
|
||||
<Input id="totalUnits" type="number" min={1} {...register('totalUnits')} />
|
||||
{errors.totalUnits && (
|
||||
<p className="text-xs text-destructive">{errors.totalUnits.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="description">Mô tả</Label>
|
||||
<Textarea id="description" rows={4} {...register('description')} />
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="masterPlanUrl">Mặt bằng tổng thể (URL)</Label>
|
||||
<Input
|
||||
id="masterPlanUrl"
|
||||
{...register('masterPlanUrl')}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
{errors.masterPlanUrl && (
|
||||
<p className="text-xs text-destructive">{errors.masterPlanUrl.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="tags">Tags (phân cách bởi dấu phẩy)</Label>
|
||||
<Input
|
||||
id="tags"
|
||||
{...register('tags')}
|
||||
placeholder="cao cấp, view sông, gần trung tâm"
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Vị trí */}
|
||||
<FormSection title="Vị trí">
|
||||
<div className="space-y-1.5 sm:col-span-2 text-sm text-muted-foreground">
|
||||
{project.address}
|
||||
<br />
|
||||
{project.district}, {project.city}
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
(Vị trí địa lý không thể chỉnh sửa sau khi tạo.)
|
||||
</span>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Quy mô & giá */}
|
||||
<FormSection title="Quy mô & giá">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="minPrice">Giá thấp nhất</Label>
|
||||
<Input id="minPrice" {...register('minPrice')} placeholder="2500000000" />
|
||||
<p className="text-xs text-muted-foreground">VND, số nguyên</p>
|
||||
{errors.minPrice && (
|
||||
<p className="text-xs text-destructive">{errors.minPrice.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="maxPrice">Giá cao nhất</Label>
|
||||
<Input id="maxPrice" {...register('maxPrice')} placeholder="8500000000" />
|
||||
<p className="text-xs text-muted-foreground">VND, số nguyên</p>
|
||||
{errors.maxPrice && (
|
||||
<p className="text-xs text-destructive">{errors.maxPrice.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="totalArea">Tổng diện tích (m²)</Label>
|
||||
<Input
|
||||
id="totalArea"
|
||||
type="number"
|
||||
step="0.01"
|
||||
{...register('totalArea')}
|
||||
/>
|
||||
{errors.totalArea && (
|
||||
<p className="text-xs text-destructive">{errors.totalArea.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="buildingCount">Số toà nhà</Label>
|
||||
<Input id="buildingCount" type="number" {...register('buildingCount')} />
|
||||
{errors.buildingCount && (
|
||||
<p className="text-xs text-destructive">{errors.buildingCount.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="floorCount">Số tầng</Label>
|
||||
<Input id="floorCount" type="number" {...register('floorCount')} />
|
||||
{errors.floorCount && (
|
||||
<p className="text-xs text-destructive">{errors.floorCount.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Thời gian */}
|
||||
<FormSection title="Thời gian">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="startDate">Ngày khởi công</Label>
|
||||
<Input id="startDate" type="date" {...register('startDate')} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="completionDate">Ngày hoàn thành</Label>
|
||||
<Input id="completionDate" type="date" {...register('completionDate')} />
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Link href="/projects">
|
||||
<Button type="button" variant="outline">
|
||||
Huỷ
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Đang lưu...' : 'Lưu thay đổi'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Danger zone */}
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg text-destructive">Vùng nguy hiểm</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Xoá dự án sẽ không thể hoàn tác. Mọi dữ liệu liên quan sẽ bị mất.
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? 'Đang xoá...' : 'Xoá dự án'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
436
apps/web/app/[locale]/(dashboard)/projects/new/page.tsx
Normal file
436
apps/web/app/[locale]/(dashboard)/projects/new/page.tsx
Normal file
@@ -0,0 +1,436 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import * as React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { duAnApi, type CreateProjectPayload } from '@/lib/du-an-api';
|
||||
|
||||
const SLUG_REGEX = /^[a-z0-9-]+$/;
|
||||
|
||||
const projectSchema = z.object({
|
||||
name: z.string().min(1, 'Bắt buộc'),
|
||||
slug: z
|
||||
.string()
|
||||
.min(1, 'Bắt buộc')
|
||||
.regex(SLUG_REGEX, 'Chỉ cho phép chữ thường, số và dấu -'),
|
||||
developer: z.string().min(1, 'Bắt buộc'),
|
||||
developerLogo: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
(v) => !v || /^https?:\/\//.test(v),
|
||||
'URL không hợp lệ',
|
||||
),
|
||||
status: z.enum(['UPCOMING', 'SELLING', 'HANDOVER', 'COMPLETED']),
|
||||
totalUnits: z
|
||||
.string()
|
||||
.min(1, 'Bắt buộc')
|
||||
.refine((v) => /^\d+$/.test(v) && Number(v) > 0, 'Phải là số nguyên > 0'),
|
||||
|
||||
address: z.string().min(1, 'Bắt buộc'),
|
||||
ward: z.string().min(1, 'Bắt buộc'),
|
||||
district: z.string().min(1, 'Bắt buộc'),
|
||||
city: z.string().min(1, 'Bắt buộc'),
|
||||
latitude: z
|
||||
.string()
|
||||
.min(1, 'Bắt buộc')
|
||||
.refine((v) => {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) && n >= -90 && n <= 90;
|
||||
}, 'Từ -90 đến 90'),
|
||||
longitude: z
|
||||
.string()
|
||||
.min(1, 'Bắt buộc')
|
||||
.refine((v) => {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) && n >= -180 && n <= 180;
|
||||
}, 'Từ -180 đến 180'),
|
||||
|
||||
description: z.string().optional(),
|
||||
masterPlanUrl: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
(v) => !v || /^https?:\/\//.test(v),
|
||||
'URL không hợp lệ',
|
||||
),
|
||||
|
||||
minPrice: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
|
||||
maxPrice: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
|
||||
totalArea: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (Number.isFinite(Number(v)) && Number(v) > 0), 'Phải lớn hơn 0'),
|
||||
buildingCount: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
|
||||
floorCount: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
|
||||
|
||||
startDate: z.string().optional(),
|
||||
completionDate: z.string().optional(),
|
||||
|
||||
tags: z.string().optional(),
|
||||
});
|
||||
|
||||
type ProjectFormData = z.infer<typeof projectSchema>;
|
||||
|
||||
function FormSection({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 sm:grid-cols-2">{children}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CreateProjectPage() {
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<ProjectFormData>({
|
||||
resolver: zodResolver(projectSchema),
|
||||
mode: 'onTouched',
|
||||
defaultValues: {
|
||||
status: 'UPCOMING',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: ProjectFormData) => {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const payload: CreateProjectPayload = {
|
||||
name: data.name,
|
||||
slug: data.slug,
|
||||
developer: data.developer,
|
||||
status: data.status,
|
||||
totalUnits: Number(data.totalUnits),
|
||||
address: data.address,
|
||||
ward: data.ward,
|
||||
district: data.district,
|
||||
city: data.city,
|
||||
latitude: Number(data.latitude),
|
||||
longitude: Number(data.longitude),
|
||||
};
|
||||
|
||||
if (data.developerLogo) payload.developerLogo = data.developerLogo;
|
||||
if (data.description) payload.description = data.description;
|
||||
if (data.masterPlanUrl) payload.masterPlanUrl = data.masterPlanUrl;
|
||||
if (data.minPrice) payload.minPrice = data.minPrice;
|
||||
if (data.maxPrice) payload.maxPrice = data.maxPrice;
|
||||
if (data.totalArea) payload.totalArea = Number(data.totalArea);
|
||||
if (data.buildingCount) payload.buildingCount = Number(data.buildingCount);
|
||||
if (data.floorCount) payload.floorCount = Number(data.floorCount);
|
||||
if (data.startDate) payload.startDate = data.startDate;
|
||||
if (data.completionDate) payload.completionDate = data.completionDate;
|
||||
if (data.tags) {
|
||||
const tags = data.tags
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
if (tags.length > 0) payload.tags = tags;
|
||||
}
|
||||
|
||||
await duAnApi.create(payload);
|
||||
setSuccess(true);
|
||||
setTimeout(() => router.push('/projects'), 600);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Danh sách dự án
|
||||
</Link>
|
||||
<h1 className="mt-2 text-2xl font-bold">Thêm dự án mới</h1>
|
||||
</div>
|
||||
|
||||
{success && (
|
||||
<div className="rounded-md border border-green-500/50 bg-green-50 p-3 text-sm text-green-700">
|
||||
Đã tạo dự án
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button className="ml-2 font-medium underline" onClick={() => setError(null)}>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Thông tin cơ bản */}
|
||||
<FormSection title="Thông tin cơ bản">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">
|
||||
Tên dự án <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="name" {...register('name')} />
|
||||
{errors.name && (
|
||||
<p className="text-xs text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="slug">
|
||||
Slug <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="slug" {...register('slug')} placeholder="vd: vinhomes-central-park" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
URL thân thiện, chỉ chữ thường, số và dấu -
|
||||
</p>
|
||||
{errors.slug && (
|
||||
<p className="text-xs text-destructive">{errors.slug.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="developer">
|
||||
Chủ đầu tư <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="developer" {...register('developer')} />
|
||||
{errors.developer && (
|
||||
<p className="text-xs text-destructive">{errors.developer.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="developerLogo">Logo chủ đầu tư (URL)</Label>
|
||||
<Input
|
||||
id="developerLogo"
|
||||
{...register('developerLogo')}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
{errors.developerLogo && (
|
||||
<p className="text-xs text-destructive">{errors.developerLogo.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="status">
|
||||
Trạng thái <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select id="status" {...register('status')}>
|
||||
<option value="UPCOMING">Sắp mở bán</option>
|
||||
<option value="SELLING">Đang bán</option>
|
||||
<option value="HANDOVER">Đang bàn giao</option>
|
||||
<option value="COMPLETED">Đã hoàn thành</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="totalUnits">
|
||||
Tổng số căn <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="totalUnits"
|
||||
type="number"
|
||||
min={1}
|
||||
{...register('totalUnits')}
|
||||
/>
|
||||
{errors.totalUnits && (
|
||||
<p className="text-xs text-destructive">{errors.totalUnits.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="description">Mô tả</Label>
|
||||
<Textarea id="description" rows={4} {...register('description')} />
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="masterPlanUrl">Mặt bằng tổng thể (URL)</Label>
|
||||
<Input
|
||||
id="masterPlanUrl"
|
||||
{...register('masterPlanUrl')}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
{errors.masterPlanUrl && (
|
||||
<p className="text-xs text-destructive">{errors.masterPlanUrl.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="tags">Tags (phân cách bởi dấu phẩy)</Label>
|
||||
<Input id="tags" {...register('tags')} placeholder="cao cấp, view sông, gần trung tâm" />
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Vị trí */}
|
||||
<FormSection title="Vị trí">
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="address">
|
||||
Địa chỉ <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="address" {...register('address')} />
|
||||
{errors.address && (
|
||||
<p className="text-xs text-destructive">{errors.address.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ward">
|
||||
Phường/Xã <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="ward" {...register('ward')} />
|
||||
{errors.ward && (
|
||||
<p className="text-xs text-destructive">{errors.ward.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="district">
|
||||
Quận/Huyện <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="district" {...register('district')} />
|
||||
{errors.district && (
|
||||
<p className="text-xs text-destructive">{errors.district.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="city">
|
||||
Thành phố <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input id="city" {...register('city')} />
|
||||
{errors.city && (
|
||||
<p className="text-xs text-destructive">{errors.city.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5" />
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="latitude">
|
||||
Vĩ độ (latitude) <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="latitude"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register('latitude')}
|
||||
/>
|
||||
{errors.latitude && (
|
||||
<p className="text-xs text-destructive">{errors.latitude.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="longitude">
|
||||
Kinh độ (longitude) <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="longitude"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register('longitude')}
|
||||
/>
|
||||
{errors.longitude && (
|
||||
<p className="text-xs text-destructive">{errors.longitude.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Quy mô & giá */}
|
||||
<FormSection title="Quy mô & giá">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="minPrice">Giá thấp nhất</Label>
|
||||
<Input id="minPrice" {...register('minPrice')} placeholder="2500000000" />
|
||||
<p className="text-xs text-muted-foreground">VND, số nguyên</p>
|
||||
{errors.minPrice && (
|
||||
<p className="text-xs text-destructive">{errors.minPrice.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="maxPrice">Giá cao nhất</Label>
|
||||
<Input id="maxPrice" {...register('maxPrice')} placeholder="8500000000" />
|
||||
<p className="text-xs text-muted-foreground">VND, số nguyên</p>
|
||||
{errors.maxPrice && (
|
||||
<p className="text-xs text-destructive">{errors.maxPrice.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="totalArea">Tổng diện tích (m²)</Label>
|
||||
<Input
|
||||
id="totalArea"
|
||||
type="number"
|
||||
step="0.01"
|
||||
{...register('totalArea')}
|
||||
/>
|
||||
{errors.totalArea && (
|
||||
<p className="text-xs text-destructive">{errors.totalArea.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="buildingCount">Số toà nhà</Label>
|
||||
<Input id="buildingCount" type="number" {...register('buildingCount')} />
|
||||
{errors.buildingCount && (
|
||||
<p className="text-xs text-destructive">{errors.buildingCount.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="floorCount">Số tầng</Label>
|
||||
<Input id="floorCount" type="number" {...register('floorCount')} />
|
||||
{errors.floorCount && (
|
||||
<p className="text-xs text-destructive">{errors.floorCount.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Thời gian */}
|
||||
<FormSection title="Thời gian">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="startDate">Ngày khởi công</Label>
|
||||
<Input id="startDate" type="date" {...register('startDate')} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="completionDate">Ngày hoàn thành</Label>
|
||||
<Input id="completionDate" type="date" {...register('completionDate')} />
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Link href="/projects">
|
||||
<Button type="button" variant="outline">
|
||||
Huỷ
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Đang tạo...' : 'Tạo dự án'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
apps/web/app/[locale]/(dashboard)/projects/page.tsx
Normal file
273
apps/web/app/[locale]/(dashboard)/projects/page.tsx
Normal 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 lý dự án</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Tạo, chỉnh sửa và 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 có 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 tư</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>
|
||||
);
|
||||
}
|
||||
@@ -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} m²`,
|
||||
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">
|
||||
|
||||
@@ -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}`),
|
||||
};
|
||||
|
||||
@@ -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}`),
|
||||
};
|
||||
|
||||
@@ -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 = {}) => {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user