order number and order status

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

@@ -5,7 +5,7 @@ import CalendarIcon from '@/components/icons/CalendarIcon';
 import LocationPinIcon from '@/components/icons/LocationPinIcon';
 import TabContainer from '@/components/tab/TabContainer'
 import { TabHeader } from '@/components/tab/TabHeader';
-import { Receipt2, ReceiptItem } from 'iconsax-react';
+import { Receipt2, ReceiptItem, DocumentText, TickCircle } from 'iconsax-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useMemo, useState } from 'react'
@@ -39,6 +39,21 @@ const formatDate = (dateString: string): string => {
     });
 };
 
+const getStatusColor = (status: string): string => {
+    const statusMap: Record<string, string> = {
+        'pendingPayment': 'text-yellow-600 dark:text-yellow-400',
+        'paid': 'text-green-600 dark:text-green-400',
+        'preparing': 'text-blue-600 dark:text-blue-400',
+        'deliveredToWaiter': 'text-purple-600 dark:text-purple-400',
+        'deliveredToReceptionist': 'text-indigo-600 dark:text-indigo-400',
+        'shipped': 'text-cyan-600 dark:text-cyan-400',
+        'completed': 'text-green-600 dark:text-green-400',
+        'canceled': 'text-red-600 dark:text-red-400',
+        'cancelled': 'text-red-600 dark:text-red-400',
+    };
+    return statusMap[status] || 'text-gray-600 dark:text-gray-400';
+};
+
 function OrdersIndex() {
 
     const { t } = useTranslation('orders');
@@ -67,7 +82,16 @@ function OrdersIndex() {
             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 gap-2'>
+                        <div className='flex items-center justify-between mb-2'>
+                            <div className='flex gap-2 items-center'>
+                                <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>
@@ -142,7 +166,17 @@ function OrdersIndex() {
             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 gap-2'>
+                        <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>

src/app/[name]/(Main)/order/history/types/Types.ts

@@ -112,7 +112,7 @@ export interface HistoryOrderPaymentMethod {
   updatedAt: string;
   deletedAt: string | null;
   restaurant: string;
-  method: "CardOnDelivery" | "Cash" | "Online";
+  method: "CardOnDelivery" | "Cash" | "Online" | "Wallet";
   gateway: string | null;
   description: string;
   enabled: boolean;