From 1522adf3882b6c765a3aa667e0bc70e1609034a8 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 8 Dec 2025 11:20:02 +0330
Subject: [PATCH] change orders list design

---
 src/app/[name]/(Main)/order/history/page.tsx | 115 ++++++++++++-------
 src/components/utils/RateSelectionBar.tsx    |   3 +-
 2 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/src/app/[name]/(Main)/order/history/page.tsx b/src/app/[name]/(Main)/order/history/page.tsx
index 05820b4..c0a1790 100644
--- a/src/app/[name]/(Main)/order/history/page.tsx
+++ b/src/app/[name]/(Main)/order/history/page.tsx
@@ -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}
                 />
diff --git a/src/components/utils/RateSelectionBar.tsx b/src/components/utils/RateSelectionBar.tsx
index f658325..c4f0dc2 100644
--- a/src/components/utils/RateSelectionBar.tsx
+++ b/src/components/utils/RateSelectionBar.tsx
@@ -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">