fix(web,prisma): fix TypeScript errors in transfer wizard and schema
- Fix Zod v4 enum API: replace deprecated `required_error` with `error` - Create missing TransferWizardClient component (4-step wizard: category, items, AI estimate, submit) - Add CANCELLED status to TransferListingStatus enum for soft-delete support Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
337
apps/web/components/chuyen-nhuong/transfer-wizard-client.tsx
Normal file
337
apps/web/components/chuyen-nhuong/transfer-wizard-client.tsx
Normal file
@@ -0,0 +1,337 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ChevronLeft, ChevronRight, Loader2, Send } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import * as React from 'react';
|
||||||
|
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 { Textarea } from '@/components/ui/textarea';
|
||||||
|
import {
|
||||||
|
type TransferCategory,
|
||||||
|
type TransferCondition,
|
||||||
|
CATEGORY_ICONS,
|
||||||
|
CATEGORY_LABELS,
|
||||||
|
CONDITION_LABELS,
|
||||||
|
transferApi,
|
||||||
|
} from '@/lib/chuyen-nhuong-api';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import {
|
||||||
|
type TransferItemDraft,
|
||||||
|
useTransferWizardStore,
|
||||||
|
} from '@/lib/transfer-wizard-store';
|
||||||
|
|
||||||
|
const STEPS = [
|
||||||
|
'Danh mục',
|
||||||
|
'Sản phẩm',
|
||||||
|
'Định giá AI',
|
||||||
|
'Thông tin & Gửi',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
// ─── Step 1: Category Selection ────────────────────────
|
||||||
|
|
||||||
|
function StepCategory() {
|
||||||
|
const { category, setCategory, setStep } = useTransferWizardStore();
|
||||||
|
const categories = Object.entries(CATEGORY_LABELS) as [TransferCategory, string][];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-muted-foreground text-sm">Chọn danh mục chuyển nhượng:</p>
|
||||||
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||||
|
{categories.map(([value, label]) => (
|
||||||
|
<button
|
||||||
|
key={value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setCategory(value);
|
||||||
|
setStep(1);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col items-center gap-2 rounded-lg border p-4 text-sm transition hover:border-primary',
|
||||||
|
category === value && 'border-primary bg-primary/5 ring-1 ring-primary',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="text-2xl">{CATEGORY_ICONS[value]}</span>
|
||||||
|
<span>{label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Step 2: Items ─────────────────────────────────────
|
||||||
|
|
||||||
|
function StepItems() {
|
||||||
|
const { items, addItem, removeItem, category } = useTransferWizardStore();
|
||||||
|
const [name, setName] = React.useState('');
|
||||||
|
const [condition, setCondition] = React.useState<TransferCondition>('GOOD');
|
||||||
|
const [askingPrice, setAskingPrice] = React.useState('');
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
if (!name || !askingPrice || !category) return;
|
||||||
|
addItem({
|
||||||
|
name,
|
||||||
|
condition,
|
||||||
|
askingPriceVND: Number(askingPrice),
|
||||||
|
quantity: 1,
|
||||||
|
});
|
||||||
|
setName('');
|
||||||
|
setAskingPrice('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid gap-3 sm:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<Label>Tên sản phẩm</Label>
|
||||||
|
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="VD: Bàn làm việc" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Tình trạng</Label>
|
||||||
|
<select
|
||||||
|
value={condition}
|
||||||
|
onChange={(e) => setCondition(e.target.value as TransferCondition)}
|
||||||
|
className="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm"
|
||||||
|
>
|
||||||
|
{Object.entries(CONDITION_LABELS).map(([v, l]) => (
|
||||||
|
<option key={v} value={v}>{l}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Giá (VND)</Label>
|
||||||
|
<Input type="number" value={askingPrice} onChange={(e) => setAskingPrice(e.target.value)} placeholder="0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button type="button" variant="outline" size="sm" onClick={handleAdd} disabled={!name || !askingPrice}>
|
||||||
|
+ Thêm sản phẩm
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{items.length > 0 && (
|
||||||
|
<div className="divide-y rounded-md border">
|
||||||
|
{items.map((item) => (
|
||||||
|
<div key={item.id} className="flex items-center justify-between px-3 py-2 text-sm">
|
||||||
|
<span>{item.name} — {CONDITION_LABELS[item.condition]}</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="font-medium">{new Intl.NumberFormat('vi-VN').format(item.askingPriceVND)} VND</span>
|
||||||
|
<Button type="button" variant="ghost" size="sm" onClick={() => removeItem(item.id)}>Xoá</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Step 3: AI Estimate ───────────────────────────────
|
||||||
|
|
||||||
|
function StepAiEstimate() {
|
||||||
|
const { items, category, aiEstimate, isEstimating, setAiEstimate, setIsEstimating } = useTransferWizardStore();
|
||||||
|
|
||||||
|
const handleEstimate = async () => {
|
||||||
|
if (!category || items.length === 0) return;
|
||||||
|
setIsEstimating(true);
|
||||||
|
try {
|
||||||
|
const payload = items.map((item) => ({
|
||||||
|
category,
|
||||||
|
condition: item.condition,
|
||||||
|
originalPriceVND: item.askingPriceVND,
|
||||||
|
purchaseYear: new Date().getFullYear(),
|
||||||
|
}));
|
||||||
|
const result = await transferApi.estimate(payload);
|
||||||
|
setAiEstimate(result);
|
||||||
|
} catch {
|
||||||
|
setAiEstimate(null);
|
||||||
|
} finally {
|
||||||
|
setIsEstimating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-muted-foreground text-sm">
|
||||||
|
Sử dụng AI để ước tính giá trị chuyển nhượng dựa trên danh mục, tình trạng và giá gốc.
|
||||||
|
</p>
|
||||||
|
<Button type="button" onClick={handleEstimate} disabled={isEstimating || items.length === 0}>
|
||||||
|
{isEstimating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
{isEstimating ? 'Đang ước tính...' : 'Ước tính giá bằng AI'}
|
||||||
|
</Button>
|
||||||
|
{aiEstimate && (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<p className="text-lg font-semibold">
|
||||||
|
Tổng ước tính: {new Intl.NumberFormat('vi-VN').format(Number(aiEstimate.totalEstimateVND))} VND
|
||||||
|
</p>
|
||||||
|
<p className="text-muted-foreground text-sm">
|
||||||
|
Độ tin cậy: {Math.round(aiEstimate.avgConfidence * 100)}%
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Step 4: Details & Submit ──────────────────────────
|
||||||
|
|
||||||
|
function StepDetails() {
|
||||||
|
const store = useTransferWizardStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const [submitting, setSubmitting] = React.useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!store.category) return;
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
category: store.category,
|
||||||
|
title: store.title,
|
||||||
|
description: store.description || undefined,
|
||||||
|
address: store.address,
|
||||||
|
district: store.district,
|
||||||
|
city: store.city,
|
||||||
|
latitude: 0,
|
||||||
|
longitude: 0,
|
||||||
|
askingPriceVND: store.askingPriceVND || store.items.reduce((sum, i) => sum + i.askingPriceVND * i.quantity, 0),
|
||||||
|
pricingSource: store.pricingSource,
|
||||||
|
isNegotiable: store.isNegotiable,
|
||||||
|
items: store.items.map((i) => ({
|
||||||
|
name: i.name,
|
||||||
|
brand: i.brand,
|
||||||
|
modelName: i.modelName,
|
||||||
|
category: store.category!,
|
||||||
|
condition: i.condition,
|
||||||
|
purchaseYear: i.purchaseYear,
|
||||||
|
originalPriceVND: i.askingPriceVND,
|
||||||
|
askingPriceVND: i.askingPriceVND,
|
||||||
|
quantity: i.quantity,
|
||||||
|
notes: i.notes,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
await transferApi.create(payload);
|
||||||
|
store.reset();
|
||||||
|
router.push('/chuyen-nhuong');
|
||||||
|
} catch {
|
||||||
|
// Error handling deferred to toast integration
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<Label>Tiêu đề</Label>
|
||||||
|
<Input
|
||||||
|
value={store.title}
|
||||||
|
onChange={(e) => store.setListingDetails({ title: e.target.value })}
|
||||||
|
placeholder="VD: Chuyển nhượng bộ nội thất văn phòng"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<Label>Mô tả</Label>
|
||||||
|
<Textarea
|
||||||
|
value={store.description}
|
||||||
|
onChange={(e) => store.setListingDetails({ description: e.target.value })}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Địa chỉ</Label>
|
||||||
|
<Input
|
||||||
|
value={store.address}
|
||||||
|
onChange={(e) => store.setListingDetails({ address: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Quận/Huyện</Label>
|
||||||
|
<Input
|
||||||
|
value={store.district}
|
||||||
|
onChange={(e) => store.setListingDetails({ district: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Thành phố</Label>
|
||||||
|
<Input
|
||||||
|
value={store.city}
|
||||||
|
onChange={(e) => store.setListingDetails({ city: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button type="button" onClick={handleSubmit} disabled={submitting || !store.title || !store.address || !store.district}>
|
||||||
|
{submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
|
||||||
|
{submitting ? 'Đang gửi...' : 'Đăng tin'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Main Wizard ───────────────────────────────────────
|
||||||
|
|
||||||
|
export function TransferWizardClient() {
|
||||||
|
const { currentStep, setStep, items, category } = useTransferWizardStore();
|
||||||
|
|
||||||
|
const canNext = () => {
|
||||||
|
if (currentStep === 0) return !!category;
|
||||||
|
if (currentStep === 1) return items.length > 0;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto max-w-3xl py-8">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Đăng tin chuyển nhượng</CardTitle>
|
||||||
|
{/* Step indicator */}
|
||||||
|
<div className="mt-4 flex items-center gap-2">
|
||||||
|
{STEPS.map((label, i) => (
|
||||||
|
<React.Fragment key={label}>
|
||||||
|
{i > 0 && <div className={cn('h-px flex-1', i <= currentStep ? 'bg-primary' : 'bg-border')} />}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => i < currentStep && setStep(i)}
|
||||||
|
className={cn(
|
||||||
|
'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition',
|
||||||
|
i === currentStep && 'bg-primary text-primary-foreground',
|
||||||
|
i < currentStep && 'bg-primary/20 text-primary cursor-pointer',
|
||||||
|
i > currentStep && 'bg-muted text-muted-foreground',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{i + 1}
|
||||||
|
</button>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted-foreground mt-1 text-center text-sm">{STEPS[currentStep]}</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{currentStep === 0 && <StepCategory />}
|
||||||
|
{currentStep === 1 && <StepItems />}
|
||||||
|
{currentStep === 2 && <StepAiEstimate />}
|
||||||
|
{currentStep === 3 && <StepDetails />}
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="mt-6 flex justify-between">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setStep(currentStep - 1)}
|
||||||
|
disabled={currentStep === 0}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="mr-1 h-4 w-4" /> Quay lại
|
||||||
|
</Button>
|
||||||
|
{currentStep < 3 && (
|
||||||
|
<Button type="button" onClick={() => setStep(currentStep + 1)} disabled={!canNext()}>
|
||||||
|
Tiếp theo <ChevronRight className="ml-1 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
76
apps/web/lib/validations/transfer.ts
Normal file
76
apps/web/lib/validations/transfer.ts
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
// ─── Step 1: Category Selection ─────────────────────────
|
||||||
|
|
||||||
|
export const TRANSFER_CATEGORIES = [
|
||||||
|
{ value: 'FURNITURE', label: 'Nội thất', icon: '🛋️' },
|
||||||
|
{ value: 'APPLIANCE', label: 'Thiết bị gia dụng', icon: '🧊' },
|
||||||
|
{ value: 'OFFICE_EQUIPMENT', label: 'Thiết bị văn phòng', icon: '🖥️' },
|
||||||
|
{ value: 'KITCHEN', label: 'Bếp & thiết bị', icon: '🍳' },
|
||||||
|
{ value: 'PREMISES', label: 'Mặt bằng', icon: '🏪' },
|
||||||
|
{ value: 'FULL_UNIT', label: 'Trọn bộ', icon: '🏠' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const TRANSFER_CONDITIONS = [
|
||||||
|
{ value: 'NEW', label: 'Mới' },
|
||||||
|
{ value: 'LIKE_NEW', label: 'Như mới' },
|
||||||
|
{ value: 'GOOD', label: 'Tốt' },
|
||||||
|
{ value: 'FAIR', label: 'Khá' },
|
||||||
|
{ value: 'WORN', label: 'Cũ' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const transferCategorySchema = z.object({
|
||||||
|
category: z.enum(['FURNITURE', 'APPLIANCE', 'OFFICE_EQUIPMENT', 'KITCHEN', 'PREMISES', 'FULL_UNIT'], {
|
||||||
|
error: 'Vui lòng chọn danh mục',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Step 2: Items ──────────────────────────────────────
|
||||||
|
|
||||||
|
export const transferItemSchema = z.object({
|
||||||
|
name: z.string().min(1, 'Tên sản phẩm là bắt buộc'),
|
||||||
|
brand: z.string().optional(),
|
||||||
|
modelName: z.string().optional(),
|
||||||
|
condition: z.enum(['NEW', 'LIKE_NEW', 'GOOD', 'FAIR', 'WORN'], {
|
||||||
|
error: 'Vui lòng chọn tình trạng',
|
||||||
|
}),
|
||||||
|
purchaseYear: z.coerce.number().int().min(2000).max(new Date().getFullYear()).optional(),
|
||||||
|
originalPriceVND: z.coerce.number().positive('Giá phải lớn hơn 0').optional(),
|
||||||
|
askingPriceVND: z.coerce.number().positive('Giá phải lớn hơn 0'),
|
||||||
|
quantity: z.coerce.number().int().min(1).default(1),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TransferItemFormData = z.infer<typeof transferItemSchema>;
|
||||||
|
|
||||||
|
// For premises-specific fields
|
||||||
|
export const premisesFieldsSchema = z.object({
|
||||||
|
areaM2: z.coerce.number().positive('Diện tích phải lớn hơn 0').optional(),
|
||||||
|
monthlyRentVND: z.coerce.number().positive().optional(),
|
||||||
|
depositMonths: z.coerce.number().int().min(0).optional(),
|
||||||
|
remainingLeaseMo: z.coerce.number().int().min(0).optional(),
|
||||||
|
businessType: z.string().optional(),
|
||||||
|
footTraffic: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Step 3: Location & Contact ─────────────────────────
|
||||||
|
|
||||||
|
export const transferLocationSchema = z.object({
|
||||||
|
title: z.string().min(5, 'Tiêu đề tối thiểu 5 ký tự').max(200, 'Tiêu đề tối đa 200 ký tự'),
|
||||||
|
description: z.string().optional(),
|
||||||
|
address: z.string().min(1, 'Địa chỉ là bắt buộc'),
|
||||||
|
ward: z.string().optional(),
|
||||||
|
district: z.string().min(1, 'Quận/Huyện là bắt buộc'),
|
||||||
|
city: z.string().min(1, 'Thành phố là bắt buộc').default('Hồ Chí Minh'),
|
||||||
|
contactName: z.string().optional(),
|
||||||
|
contactPhone: z.string().optional(),
|
||||||
|
isNegotiable: z.boolean().default(true),
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Full form schema ───────────────────────────────────
|
||||||
|
|
||||||
|
export const createTransferListingSchema = transferCategorySchema
|
||||||
|
.merge(transferLocationSchema)
|
||||||
|
.merge(premisesFieldsSchema);
|
||||||
|
|
||||||
|
export type CreateTransferFormData = z.infer<typeof createTransferListingSchema>;
|
||||||
@@ -1122,6 +1122,7 @@ enum TransferListingStatus {
|
|||||||
SOLD
|
SOLD
|
||||||
EXPIRED
|
EXPIRED
|
||||||
REJECTED
|
REJECTED
|
||||||
|
CANCELLED
|
||||||
}
|
}
|
||||||
|
|
||||||
enum TransferPricingSource {
|
enum TransferPricingSource {
|
||||||
|
|||||||
Reference in New Issue
Block a user