order history ui

src/app/[name]/(Main)/order/history/page.tsx

@@ -67,9 +67,10 @@ function OrdersIndex() {
         { id: 1, title: t('Tab.PreviousOrders'), icon: <Receipt2 size={22} /> }
     ]
 
-    const firstTab = () => {
+    const renderOrders = (isActiveTab: boolean) => {
+        const emptyMessage = isActiveTab ? 'سفارش فعالی وجود ندارد' : 'سفارش قبلی وجود ندارد';
         if (orders.length === 0) {
-            return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش فعالی وجود ندارد</div>];
+            return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>{emptyMessage}</div>];
         }
 
         return orders.map((order) => {
@@ -83,6 +84,7 @@ function OrdersIndex() {
                     <div className="text-sm2">
                         <div className='flex items-center justify-between mb-2'>
                             <div className='flex gap-2 items-center'>
+                                {!isActiveTab && <DocumentText size={16} />}
                                 <p>#{order.orderNumber}</p>
                             </div>
                             <div className={`flex gap-2 items-center ${getStatusColor(order.status)}`}>
@@ -109,10 +111,10 @@ function OrdersIndex() {
                             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'>
+                                    <div className='relative max-w-16 max-h-16 w-16 h-16 overflow-hidden shrink-0'>
                                         <Image
                                             priority
-                                            className='rounded-lg object-cover'
+                                            className='rounded-lg max-h-16 max-w-16 object-contain'
                                             src={imageUrl}
                                             width={64}
                                             height={64}
@@ -132,92 +134,7 @@ function OrdersIndex() {
                                             </span>
                                         </div>
                                     </div>
-                                </div>
+                                    {!isActiveTab && order.status === OrderStatus.COMPLETED && (
-                            );
-                        })}
-                    </div>
-
-                    <div className='flex justify-end mt-4'>
-                        <div className='font-medium text-sm' dir='ltr'>
-                            {formattedPrice} T
-                        </div>
-                    </div>
-
-                    <Link href={`track/${order.id}`}>
-                        <Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
-                    </Link>
-                </div>
-            )
-        })
-    }
-
-    const secondTab = () => {
-        if (orders.length === 0) {
-            return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش قبلی وجود ندارد</div>];
-        }
-
-        return orders.map((order) => {
-            const address = order.userAddress?.address || 'آدرس ثبت نشده';
-            const formattedDate = formatDate(order.createdAt);
-            const formattedPrice = order.total.toLocaleString('fa-IR');
-            const items: HistoryOrderItem[] = order.items || [];
-
-            return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
-                    <div className="text-sm2">
-                        <div className='flex items-center justify-between mb-2'>
-                            <div className='flex gap-2 items-center'>
-                                <DocumentText size={16} />
-                                <p>#{order.orderNumber}</p>
-                            </div>
-                            <div className={`flex gap-2 items-center ${getStatusColor(order.status)}`}>
-                                <TickCircle size={16} />
-                                <p className='font-medium'>{t(`status.${order.status}`)}</p>
-                            </div>
-                        </div>
-                        <div className='mt-2 flex gap-2'>
-                            <LocationPinIcon size={16} />
-                            <p>{address}</p>
-                        </div>
-                        <div className='mt-2 flex gap-2'>
-                            <CalendarIcon size={16} />
-                            <p>{formattedDate}</p>
-                        </div>
-                    </div>
-
-                    <hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
-
-                    <div className='mt-6 space-y-3'>
-                        {items.map((item) => {
-                            const imageUrl = getFoodImage(item.variant?.product.images);
-                            const foodName = item.variant?.product.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 object-cover'
-                                            src={imageUrl}
-                                            width={64}
-                                            height={64}
-                                            alt={foodName}
-                                        />
-                                    </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 === OrderStatus.COMPLETED && (
                                         <Link href={`rate/${order.id}?foodId=${item.variant?.product.id}`}>
                                             <Button className='text-xs px-3 py-2 h-auto'>{t('Card.Rate')}</Button>
                                         </Link>
@@ -233,8 +150,13 @@ function OrdersIndex() {
                         </div>
                     </div>
 
-                    <Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
+                    {isActiveTab ? (
-
+                        <Link href={`track/${order.id}`}>
+                            <Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
+                        </Link>
+                    ) : (
+                        <Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
+                    )}
                 </div>
             )
         })
@@ -245,12 +167,12 @@ function OrdersIndex() {
         <div className='pt-8'>
             <TabContainer selectedTab={selectedTab} onTabChange={setSelectedTab}>
                 <TabHeader
-                    viewRenderer={<div className='pt-4'>{firstTab()}</div>}
+                    viewRenderer={<div className='pt-4'>{renderOrders(true)}</div>}
                     title={categories[0].title}
                     icon={categories[0].icon}
                 />
                 <TabHeader
-                    viewRenderer={<div className='pt-4'>{secondTab()}</div>}
+                    viewRenderer={<div className='pt-4'>{renderOrders(false)}</div>}
                     title={categories[1].title}
                     icon={categories[1].icon}
                 />