#32

src/Pages/Coupon/Page.tsx

@@ -5,9 +5,6 @@ import DashHeader from '../../Layout/Dashboard/DashHeader'
 import LyTable from '../../Layout/Dashboard/LyTable'
 import useTableColumns from './useTableColumns'
 import { QueryStatusEnum } from '../../config/QueryStatus'
-import { useGetProduct } from '../../api/product'
-import { Button } from 'antd'
-import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
 import { useGetCoupon } from '../../api/Coupon'
@@ -17,7 +14,6 @@ function Page() {
 
     const column   =useTableColumns()
     const {data  ,status } = useGetCoupon()
-    const [t] = useTranslation()
     const navigate = useNavigate()
     const totalRows = data?.meta?.total;
     

src/Pages/order/Edit/EditForm.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../Components/ValidationField/ValidationField';
 import { useFormikContext } from 'formik';
+import { FaCheck, FaTimes, FaClock, FaBan } from 'react-icons/fa';
 
 import { useTranslation } from 'react-i18next';
 
@@ -12,8 +13,11 @@ function Form() {
 
   // 'pending_approve', 'approved', 'rejected', 'pending_cancellation', 'cancelled'
   const stateSelect = [
-    { label: "pending_approve", value: "pending_approve" }, { label: "approved", value: "approved" },
+    { label: <div className='orderStatus_select'><FaClock /> Pending Approve</div>, value: "pending_approve" },
-    { label: "rejected", value: "rejected" }, { label: "pending_cancellation", value: "pending_cancellation" }]
+    { label: <div className='orderStatus_select'><FaCheck /> Approved</div>, value: "approved" },
+    { label: <div className='orderStatus_select'><FaTimes /> Rejected</div>, value: "rejected" },
+    { label: <div className='orderStatus_select'><FaBan /> Pending Cancellation</div>, value: "pending_cancellation" }
+  ];
 
 
   return (

src/Pages/order/useTableColumns.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { useDeleteOrder } from "../../api/order";
 import Actions from "../../Components/Ui/tables/Actions";
 import { useNavigate } from "react-router-dom";
+import { FaCheck, FaTimes, FaClock, FaBan } from 'react-icons/fa';
 
 const useTableColumns = () => {
   const [t] = useTranslation();
@@ -31,18 +32,41 @@ const useTableColumns = () => {
         selector:(row:any) => row?.user?.email,
 
       },
+
       {
         name: t("status"),
         center: true,
-        
+        width:"250",
         cell: (row: any) => {
+          let status = row?.state;
+          let icon;
       
-          return row?.state;
+          // Assigning an icon component based on the status
-          // return <OrderStatus  order_status={row?.order_status}/>
+          switch (status) {
+            case 'pending_approve':
+              icon = <FaClock />;
+              break;
+            case 'approved':
+              icon = <FaCheck />;
+              break;
+            case 'rejected':
+              icon = <FaTimes />;
+              break;
+            case 'pending_cancellation':
+              icon = <FaBan />;
+              break;
+            default:
+              icon = null;
+          }
       
+          // Rendering the status with its corresponding icon
+          return (
+            <div className="orderStatus">
+              {icon} {status}
+            </div>
+          );
         }
       },
-  
       {
         name: t("total"),
         center: true,

src/Styles/Layout/Layout.scss

@@ -583,3 +583,26 @@ padding: 10px 40px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }
+.orderStatus{
+    display: flex;
+    gap: 5px;
+    padding-inline: 10px;
+    text-wrap: nowrap;
+    width: 250px;
+    align-items: center;
+    justify-content: center;
+    svg{
+        color: var(--primary);
+    }
+
+}
+.orderStatus_select{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    svg{
+        color: var(--primary);
+    }
+
+}