danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

change orders list design

Browse Source
This commit is contained in:
hamid zarghami
2025-12-08 11:20:02 +03:30
parent 6653cba5a0
commit 1522adf388
2 changed files with 74 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/order/history/page.tsx
+72 -43
View File
@@ -3,7 +3,6 @@
import Button from '@/components/button/PrimaryButton';
import CalendarIcon from '@/components/icons/CalendarIcon';
import LocationPinIcon from '@/components/icons/LocationPinIcon';
import PerformantTabRenderer from '@/components/tab/PerformantTabRenderer';
import TabContainer from '@/components/tab/TabContainer'
import { TabHeader } from '@/components/tab/TabHeader';
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' />
<div className='flex justify-between mt-6'>
<div className='flex justify-start gap-[9px]'>
{items.map((item) => {
const imageUrl = getFoodImage(item.food.images);
return (
<span key={item.id} className='w-8 h-8 relative'>
<div className='mt-6 space-y-3'>
{items.map((item) => {
const imageUrl = getFoodImage(item.food.images);
const foodName = item.food.title || 'بدون نام';
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
return (
<div key={item.id} className='flex gap-3 items-center'>
<div className='relative w-16 h-16 shrink-0'>
<Image
priority
className='rounded-lg'
className='rounded-lg object-cover'
src={imageUrl}
width={32}
height={32}
alt="order image"
width={64}
height={64}
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">
{item.quantity}
</span>
</span>
)
})}
</div>
</div>
<div className='flex-1 min-w-0'>
<p className='text-sm2 font-normal text-black dark:text-white truncate'>
{foodName}
</p>
<div className='flex items-center gap-2 mt-1'>
<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'>
{formattedPrice} T
</div>
@@ -149,38 +163,53 @@ function OrdersIndex() {
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
<div className='flex justify-between mt-6'>
<div className='flex justify-start gap-[9px]'>
{items.map((item) => {
const imageUrl = getFoodImage(item.food.images);
return (
<span key={item.id} className='w-8 h-8 relative'>
<div className='mt-6 space-y-3'>
{items.map((item) => {
const imageUrl = getFoodImage(item.food.images);
const foodName = item.food.title || 'بدون نام';
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
return (
<div key={item.id} className='flex gap-3 items-center'>
<div className='relative w-16 h-16 shrink-0'>
<Image
priority
className='rounded-lg'
className='rounded-lg object-cover'
src={imageUrl}
width={32}
height={32}
alt="order image"
width={64}
height={64}
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">
{item.quantity}
</span>
</span>
)
})}
</div>
</div>
<div className='flex-1 min-w-0'>
<p className='text-sm2 font-normal text-black dark:text-white truncate'>
{foodName}
</p>
<div className='flex items-center gap-2 mt-1'>
<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'>
{formattedPrice} T
</div>
</div>
<div className='grid grid-cols-2 gap-4'>
<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>
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
</div>
)
@@ -192,12 +221,12 @@ function OrdersIndex() {
<div className='pt-8'>
<TabContainer>
<TabHeader
viewRenderer={<PerformantTabRenderer rowHeight={320}>{firstTab()}</PerformantTabRenderer>}
viewRenderer={<div className='pt-4'>{firstTab()}</div>}
title={categories[0].title}
icon={categories[0].icon}
/>
<TabHeader
viewRenderer={<PerformantTabRenderer rowHeight={320}>{secondTab()}</PerformantTabRenderer>}
viewRenderer={<div className='pt-4'>{secondTab()}</div>}
title={categories[1].title}
icon={categories[1].icon}
/>
src/components/utils/RateSelectionBar.tsx
+2 -1
View File
@@ -22,10 +22,11 @@ function RateSelectionBar({ name, content = defaultContent, className = '' }: Pr
return (
<div className={`${className}`}>
<div className='relative w-full h-3 rounded-full'>
<Slider
<Slider
min={1}
max={content.length}
name={name}
defaultValue={[5]}
/>
</div>
<div className="flex justify-between items-center mt-2">