order number and order status

This commit is contained in:
hamid zarghami
2025-12-29 10:55:43 +03:30
parent b0cba5f5f9
commit 76882dc249
2 changed files with 38 additions and 4 deletions
+37 -3
View File
@@ -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>
@@ -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;