complated
This commit is contained in:
Samandar Turgunboyev
@@ -1,38 +1,35 @@
|
||||
import { usePathname, useRouter } from '@/shared/config/i18n/navigation';
|
||||
import formatDate from '@/shared/lib/formatDate';
|
||||
'use client';
|
||||
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { Card, CardContent } from '@/shared/ui/card';
|
||||
import { GlobalPagination } from '@/shared/ui/global-pagination';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
Package,
|
||||
RefreshCw,
|
||||
ShoppingBag,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { order_api, OrderListRes } from '../lib/api';
|
||||
import { order_api, OrderList } from '../lib/api';
|
||||
|
||||
const HistoryTabs = () => {
|
||||
const t = useTranslations();
|
||||
const searchParams = useSearchParams();
|
||||
const [page, setPage] = useState(1);
|
||||
const PAGE_SIZE = 36;
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['order_list', page],
|
||||
queryFn: () => order_api.list({ page, page_size: PAGE_SIZE }),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
queryFn: () => order_api.list(),
|
||||
select: (res) => res.data,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -40,206 +37,257 @@ const HistoryTabs = () => {
|
||||
setPage(urlPage);
|
||||
}, [searchParams]);
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', newPage.toString());
|
||||
|
||||
router.push(`${pathname}?${params.toString()}`, {
|
||||
scroll: true,
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusConfig = (status: 'NEW' | 'DONE') => {
|
||||
return status === 'DONE'
|
||||
? {
|
||||
bgColor: 'bg-emerald-100',
|
||||
textColor: 'text-emerald-600',
|
||||
icon: CheckCircle,
|
||||
text: 'Yetkazildi',
|
||||
}
|
||||
: {
|
||||
bgColor: 'bg-yellow-100',
|
||||
textColor: 'text-yellow-600',
|
||||
icon: Clock,
|
||||
text: 'Kutilmoqda',
|
||||
};
|
||||
};
|
||||
|
||||
const getPaymentTypeText = (type: 'CASH' | 'ACCOUNT_NUMBER') => {
|
||||
return type === 'CASH' ? 'Naqd pul' : 'Hisob raqami';
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data?.results || data.results.length === 0) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Package className="w-16 h-16 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-semibold text-foreground mb-2">
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="bg-gray-100 p-6 rounded-full mb-4">
|
||||
<Package className="w-16 h-16 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-xl font-bold text-gray-800 mb-2">
|
||||
{t('Buyurtmalar topilmadi')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('Hali buyurtma qilmagansiz')}
|
||||
<p className="text-sm text-gray-500 max-w-md">
|
||||
{t(
|
||||
"Hali buyurtma qilmagansiz. Mahsulotlarni ko'rib chiqing va birinchi buyurtmangizni bering!",
|
||||
)}
|
||||
</p>
|
||||
<Button onClick={() => router.push('/')} className="mt-6">
|
||||
<ShoppingBag className="w-4 h-4 mr-2" />
|
||||
{t('Xarid qilish')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4 md:mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-foreground">
|
||||
{t('Buyurtmalar tarixi')}
|
||||
</h2>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{data.results.length} ta buyurtma
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6 pb-4 border-b">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
|
||||
{t('Buyurtmalar tarixi')}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{data.length} {t('ta buyurtma')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
{data.results.map((order: OrderListRes, idx: number) => {
|
||||
const statusConfig = getStatusConfig(order.status);
|
||||
const StatusIcon = statusConfig.icon;
|
||||
{/* Orders List */}
|
||||
<div className="space-y-6">
|
||||
{data.map((order: OrderList) => {
|
||||
const totalPrice = order.items.reduce(
|
||||
(sum, item) => sum + Number(item.price) * item.quantity,
|
||||
0,
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={order.id} className="flex gap-3 md:gap-4">
|
||||
{/* Status Timeline */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shrink-0',
|
||||
statusConfig.bgColor,
|
||||
)}
|
||||
>
|
||||
<StatusIcon
|
||||
className={cn(
|
||||
'w-4 h-4 md:w-5 md:h-5',
|
||||
statusConfig.textColor,
|
||||
<Card
|
||||
key={order.id}
|
||||
className="border-2 border-gray-200 hover:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-lg"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
{/* Order Header */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border-b-2 border-gray-200">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">
|
||||
#{order.id}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">
|
||||
{t('Buyurtma raqami')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{order.delivery_date && (
|
||||
<div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg shadow-sm">
|
||||
<Calendar className="w-4 h-4 text-blue-600" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">
|
||||
{t('Yetkazib berish')}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-gray-800">
|
||||
{order.delivery_date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
{order.comment && (
|
||||
<div className="mt-3 bg-white p-3 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="flex items-start gap-2">
|
||||
<MessageSquare className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-xs font-medium text-gray-500 mb-1">
|
||||
{t('Izoh')}:
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 leading-relaxed">
|
||||
{order.comment}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{idx < data.results.length - 1 && (
|
||||
<div className="w-0.5 flex-1 bg-slate-200 my-2" />
|
||||
)}
|
||||
</div>
|
||||
{/* Products */}
|
||||
<div className="p-4 space-y-3">
|
||||
{order.items.map((item, index) => {
|
||||
const product = item.product;
|
||||
|
||||
{/* Order Card */}
|
||||
<Card className="flex-1 border-0 shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-3 md:p-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-3 gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-semibold text-sm md:text-base text-foreground">
|
||||
#{order.order_number}
|
||||
</p>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs px-2 py-0.5 rounded-full',
|
||||
statusConfig.bgColor,
|
||||
statusConfig.textColor,
|
||||
)}
|
||||
>
|
||||
{statusConfig.text}
|
||||
</span>
|
||||
// Get product image
|
||||
const productImage = product.images?.[0]?.images
|
||||
? product.images[0].images.includes(BASE_URL)
|
||||
? product.images[0].images
|
||||
: BASE_URL + product.images[0].images
|
||||
: '/placeholder.svg';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border-2 border-gray-100 rounded-xl p-4 bg-gradient-to-br from-white to-gray-50 hover:shadow-md transition-shadow"
|
||||
>
|
||||
{/* Product Header with Image */}
|
||||
<div className="flex gap-4 mb-3">
|
||||
{/* Product Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-20 h-20 md:w-24 md:h-24 bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
|
||||
<Image
|
||||
src={productImage}
|
||||
alt={product.name}
|
||||
width={96}
|
||||
height={96}
|
||||
className="w-full h-full object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded">
|
||||
{index + 1}
|
||||
</span>
|
||||
<h3 className="font-bold text-base md:text-lg text-gray-900 truncate">
|
||||
{product.name}
|
||||
</h3>
|
||||
</div>
|
||||
{product.short_name && (
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{product.short_name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0">
|
||||
<p className="text-xs text-gray-500 mb-1">
|
||||
{t('Mahsulotlar narxi')}
|
||||
</p>
|
||||
<p className="text-lg font-bold text-blue-600">
|
||||
{formatPrice(Number(item.price), true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details Grid */}
|
||||
<div className="grid grid-cols-2 gap-3 p-3 bg-white rounded-lg border border-gray-200">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
{t('Miqdor')}
|
||||
</span>
|
||||
<span className="text-base font-bold text-gray-900">
|
||||
{item.quantity}{' '}
|
||||
{product.meansurement || t('dona')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
{t('Jami')}
|
||||
</span>
|
||||
<span className="text-base font-bold text-green-600">
|
||||
{formatPrice(
|
||||
Number(item.price) * item.quantity,
|
||||
true,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
|
||||
{formatDate.format(
|
||||
order.created_at,
|
||||
'DD.MM.YYYY HH:mm',
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Order Footer */}
|
||||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 p-4 border-t-2 border-gray-200">
|
||||
{/* Price Breakdown */}
|
||||
<div className="mb-4 space-y-2">
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<span>{t('Mahsulotlar narxi')}:</span>
|
||||
<span className="font-semibold">
|
||||
{formatPrice(totalPrice, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<span>{t('Mahsulotlar soni')}:</span>
|
||||
<span className="font-semibold">
|
||||
{order.items.reduce(
|
||||
(sum, item) => sum + item.quantity,
|
||||
0,
|
||||
)}
|
||||
{t('dona')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="border-t-2 border-dashed border-gray-300 pt-2 mt-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-base font-bold text-gray-800">
|
||||
{t('Umumiy summa')}:
|
||||
</span>
|
||||
<span className="text-2xl font-bold text-green-600">
|
||||
{formatPrice(totalPrice, true)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-base md:text-lg text-foreground">
|
||||
{formatPrice(
|
||||
order.total_price + order.delivery_price,
|
||||
true,
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{getPaymentTypeText(order.payment_type)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{order.comment && (
|
||||
<div className="mb-3 p-2 bg-slate-50 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
Izoh:
|
||||
</p>
|
||||
<p className="text-sm text-foreground">{order.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Total Price Breakdown */}
|
||||
<div className="border-t pt-3 mb-3 space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
Mahsulotlar narxi:
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{formatPrice(order.total_price, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Yetkazish:</span>
|
||||
<span className="font-medium">
|
||||
{formatPrice(order.delivery_price, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-base pt-1 border-t">
|
||||
<span>Jami:</span>
|
||||
<span>
|
||||
{formatPrice(
|
||||
order.total_price + order.delivery_price,
|
||||
true,
|
||||
)}
|
||||
</span>
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="default"
|
||||
onClick={() =>
|
||||
router.push(`/profile/refresh-order?id=${order.id}`)
|
||||
}
|
||||
className="flex-1 md:flex-none gap-2 font-semibold hover:bg-blue-50 hover:text-blue-600 hover:border-blue-600 transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
{t('Qayta buyurtma')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
router.push('/profile/refresh-order');
|
||||
// setOrder(order);
|
||||
}}
|
||||
className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
|
||||
{t('Qayta buyurtma')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="w-full flex justify-end mt-5">
|
||||
<GlobalPagination
|
||||
onChange={handlePageChange}
|
||||
page={page}
|
||||
total={data.total_pages}
|
||||
pageSize={PAGE_SIZE}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user