change orders list design
This commit is contained in:
hamid zarghami
@@ -3,7 +3,6 @@
|
|||||||
import Button from '@/components/button/PrimaryButton';
|
import Button from '@/components/button/PrimaryButton';
|
||||||
import CalendarIcon from '@/components/icons/CalendarIcon';
|
import CalendarIcon from '@/components/icons/CalendarIcon';
|
||||||
import LocationPinIcon from '@/components/icons/LocationPinIcon';
|
import LocationPinIcon from '@/components/icons/LocationPinIcon';
|
||||||
import PerformantTabRenderer from '@/components/tab/PerformantTabRenderer';
|
|
||||||
import TabContainer from '@/components/tab/TabContainer'
|
import TabContainer from '@/components/tab/TabContainer'
|
||||||
import { TabHeader } from '@/components/tab/TabHeader';
|
import { TabHeader } from '@/components/tab/TabHeader';
|
||||||
import { Receipt2, ReceiptItem } from 'iconsax-react';
|
import { Receipt2, ReceiptItem } from 'iconsax-react';
|
||||||
@@ -89,27 +88,42 @@ function OrdersIndex() {
|
|||||||
|
|
||||||
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
|
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
|
||||||
|
|
||||||
<div className='flex justify-between mt-6'>
|
<div className='mt-6 space-y-3'>
|
||||||
<div className='flex justify-start gap-[9px]'>
|
{items.map((item) => {
|
||||||
{items.map((item) => {
|
const imageUrl = getFoodImage(item.food.images);
|
||||||
const imageUrl = getFoodImage(item.food.images);
|
const foodName = item.food.title || 'بدون نام';
|
||||||
return (
|
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
|
||||||
<span key={item.id} className='w-8 h-8 relative'>
|
return (
|
||||||
|
<div key={item.id} className='flex gap-3 items-center'>
|
||||||
|
<div className='relative w-16 h-16 shrink-0'>
|
||||||
<Image
|
<Image
|
||||||
priority
|
priority
|
||||||
className='rounded-lg'
|
className='rounded-lg object-cover'
|
||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
width={32}
|
width={64}
|
||||||
height={32}
|
height={64}
|
||||||
alt="order image"
|
alt={foodName}
|
||||||
/>
|
/>
|
||||||
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
|
</div>
|
||||||
{item.quantity}
|
<div className='flex-1 min-w-0'>
|
||||||
</span>
|
<p className='text-sm2 font-normal text-black dark:text-white truncate'>
|
||||||
</span>
|
{foodName}
|
||||||
)
|
</p>
|
||||||
})}
|
<div className='flex items-center gap-2 mt-1'>
|
||||||
</div>
|
<span className='text-xs text-disabled-text'>
|
||||||
|
{item.quantity}x
|
||||||
|
</span>
|
||||||
|
<span className='text-xs font-medium' dir='ltr'>
|
||||||
|
{itemTotalPrice} T
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex justify-end mt-4'>
|
||||||
<div className='font-medium text-sm' dir='ltr'>
|
<div className='font-medium text-sm' dir='ltr'>
|
||||||
{formattedPrice} T
|
{formattedPrice} T
|
||||||
</div>
|
</div>
|
||||||
@@ -149,38 +163,53 @@ function OrdersIndex() {
|
|||||||
|
|
||||||
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
|
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
|
||||||
|
|
||||||
<div className='flex justify-between mt-6'>
|
<div className='mt-6 space-y-3'>
|
||||||
<div className='flex justify-start gap-[9px]'>
|
{items.map((item) => {
|
||||||
{items.map((item) => {
|
const imageUrl = getFoodImage(item.food.images);
|
||||||
const imageUrl = getFoodImage(item.food.images);
|
const foodName = item.food.title || 'بدون نام';
|
||||||
return (
|
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
|
||||||
<span key={item.id} className='w-8 h-8 relative'>
|
return (
|
||||||
|
<div key={item.id} className='flex gap-3 items-center'>
|
||||||
|
<div className='relative w-16 h-16 shrink-0'>
|
||||||
<Image
|
<Image
|
||||||
priority
|
priority
|
||||||
className='rounded-lg'
|
className='rounded-lg object-cover'
|
||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
width={32}
|
width={64}
|
||||||
height={32}
|
height={64}
|
||||||
alt="order image"
|
alt={foodName}
|
||||||
/>
|
/>
|
||||||
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
|
</div>
|
||||||
{item.quantity}
|
<div className='flex-1 min-w-0'>
|
||||||
</span>
|
<p className='text-sm2 font-normal text-black dark:text-white truncate'>
|
||||||
</span>
|
{foodName}
|
||||||
)
|
</p>
|
||||||
})}
|
<div className='flex items-center gap-2 mt-1'>
|
||||||
</div>
|
<span className='text-xs text-disabled-text'>
|
||||||
|
{item.quantity}x
|
||||||
|
</span>
|
||||||
|
<span className='text-xs font-medium' dir='ltr'>
|
||||||
|
{itemTotalPrice} T
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{order.status === 'delivered' && (
|
||||||
|
<Link href={`rate/${order.id}?foodId=${item.food.id}`}>
|
||||||
|
<Button className='text-xs px-3 py-2 h-auto'>{t('Card.Rate')}</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex justify-end mt-4'>
|
||||||
<div className='font-medium text-sm' dir='ltr'>
|
<div className='font-medium text-sm' dir='ltr'>
|
||||||
{formattedPrice} T
|
{formattedPrice} T
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='grid grid-cols-2 gap-4'>
|
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
|
||||||
<Link href={`rate/${order.id}`}>
|
|
||||||
<Button className='mt-6 font-medium!'>{t('Card.Rate')}</Button>
|
|
||||||
</Link>
|
|
||||||
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text!'>{t('Card.Reorder')}</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -192,12 +221,12 @@ function OrdersIndex() {
|
|||||||
<div className='pt-8'>
|
<div className='pt-8'>
|
||||||
<TabContainer>
|
<TabContainer>
|
||||||
<TabHeader
|
<TabHeader
|
||||||
viewRenderer={<PerformantTabRenderer rowHeight={320}>{firstTab()}</PerformantTabRenderer>}
|
viewRenderer={<div className='pt-4'>{firstTab()}</div>}
|
||||||
title={categories[0].title}
|
title={categories[0].title}
|
||||||
icon={categories[0].icon}
|
icon={categories[0].icon}
|
||||||
/>
|
/>
|
||||||
<TabHeader
|
<TabHeader
|
||||||
viewRenderer={<PerformantTabRenderer rowHeight={320}>{secondTab()}</PerformantTabRenderer>}
|
viewRenderer={<div className='pt-4'>{secondTab()}</div>}
|
||||||
title={categories[1].title}
|
title={categories[1].title}
|
||||||
icon={categories[1].icon}
|
icon={categories[1].icon}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -22,10 +22,11 @@ function RateSelectionBar({ name, content = defaultContent, className = '' }: Pr
|
|||||||
return (
|
return (
|
||||||
<div className={`${className}`}>
|
<div className={`${className}`}>
|
||||||
<div className='relative w-full h-3 rounded-full'>
|
<div className='relative w-full h-3 rounded-full'>
|
||||||
<Slider
|
<Slider
|
||||||
min={1}
|
min={1}
|
||||||
max={content.length}
|
max={content.length}
|
||||||
name={name}
|
name={name}
|
||||||
|
defaultValue={[5]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center mt-2">
|
<div className="flex justify-between items-center mt-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user