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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user