order number and order status
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user