@bjsdistribution/dms-client-return 0.0.36 → 0.0.38

package/src/components/order-daily-overview/table/ReturnTable.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   useAtom,
   useClientData,
   useOrderStaticData,
 } from '../../order-view/store';
-import { useLoading } from '../store/store';
+import { useStatsLoading } from '../store/store';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
   ColumStyle,
@@ -17,6 +17,9 @@ import { Empty, Skeleton } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { filtersReducerAtom } from '../header-filters/filterStore';
 import { useCustomerData } from '../../store';
+import SortIcon from '../../../common/SortIcon';
+import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
+import Loader from '../header/loader/Loader';
 
 interface ApiResponse {
   message: string;
@@ -29,12 +32,59 @@ interface ApiResponse {
 const ReturnTable: React.FC = () => {
   const [clientData] = useClientData();
   const [updatedData, setUpdatedData] = useState<any>([]);
-  const [statsLoading, setLoading] = useLoading();
+  const [statsLoading, setLoading] = useStatsLoading();
   const [, setOrderStaticData] = useOrderStaticData();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const navigate = useNavigate();
   const [customers] = useCustomerData();
 
+  //sorting
+  const [sortConfig, setSortConfig] = useState<{
+    key: string;
+    direction: 'asc' | 'desc';
+  } | null>(null);
+
+  const handleSort = (key: string) => {
+    setSortConfig(prev => {
+      if (prev?.key === key && prev.direction === 'asc') {
+        return { key, direction: 'desc' };
+      }
+      return { key, direction: 'asc' };
+    });
+  };
+
+  const sortedData = useMemo(() => {
+    if (!updatedData || !sortConfig) return updatedData;
+
+    const { key, direction } = sortConfig;
+    return [...updatedData].sort((a, b) => {
+      const valueA = a[key];
+      const valueB = b[key];
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      }
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc'
+          ? valueA.localeCompare(valueB)
+          : valueB.localeCompare(valueA);
+      }
+      return 0;
+    });
+  }, [updatedData, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
+  //API call
   const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -91,29 +141,38 @@ const ReturnTable: React.FC = () => {
         payload: [],
       });
     }
-    navigate(`filter/${customerId}`);
+    //navigate(`filter/${customerId}`);
 
     //forlocal
-    // navigate(`/filter/${customerId}`);
+    navigate(`/filter/${customerId}`);
   };
 
   return (
     <>
+      {statsLoading && <Loader />}
       <StyledTableWrapper id="tableScrolling">
         <StyledTable>
           <thead>
             <tr>
-              <th>Trading Name</th>
-              <th>Client</th>
-              <th>Orders</th>
-              <th>Products</th>
-              <th>RTS</th>
-              <th>Pending</th>
-              <th>Dispose</th>
-              <th>Re-allocate</th>
-              <th>Re-Del</th>
-              <th>Recycle</th>
-              <th>Unknown</th>
+              {[
+                { label: 'Trading Name', key: 'trading_as' },
+                { label: 'Client', key: 'customer_name' },
+                { label: 'Orders', key: 'orders' },
+                { label: 'Products', key: 'return_order_products' },
+                { label: 'RTS', key: 'RTS' },
+                { label: 'Pending', key: 'PENDING' },
+                { label: 'Dispose', key: 'DISPOSE' },
+                { label: 'Re-allocate', key: 'RE-ALLOCATE' },
+                { label: 'Re-Del', key: 'RE-DEL' },
+                { label: 'Recycle', key: 'RECYCLE' },
+                { label: 'Unknown', key: 'UNKNOWN' },
+              ].map(({ label, key }) => (
+                <th key={key} onClick={() => handleSort(key)}>
+                  <div style={{ display: 'flex', cursor: 'pointer' }}>
+                    {label} <span>{renderSortIcon(key)}</span>
+                  </div>
+                </th>
+              ))}
             </tr>
           </thead>
           <tbody>
@@ -123,7 +182,7 @@ const ReturnTable: React.FC = () => {
                   <Skeleton active />
                 </td>
               </tr>
-            ) : updatedData?.length === 0 ? (
+            ) : sortedData?.length === 0 ? (
               <tr>
                 <td colSpan={11}>
                   <EmptyDataContainer>
@@ -132,7 +191,7 @@ const ReturnTable: React.FC = () => {
                 </td>
               </tr>
             ) : (
-              updatedData?.map((key: any, index: any) => {
+              sortedData?.map((key: any, index: number) => {
                 return (
                   <tr key={index}>
                     <td>{key?.trading_as}</td>

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -78,38 +78,14 @@ const ModalManager = () => {
     dispatch({ type: 'close' });
   };
 
-  // useEffect(() => {
-  //   console.log(error, 'error');
-  //   //@ts-ignore
-  //   if (!confirmLoading) {
-  //     // if (error && error.errorStatus !== 200) {
-  //     //   console.log(error, 'errorINsodeofIFFFFFF');
-  //     //   notification.error({
-  //     //     message: error.errorStatus || 'Error',
-  //     //     description: error.errorMessage || 'Something went wrong',
-  //     //   });
-  //     //   setError(null);
-  //     // }
-
-  //     //@ts-ignore
-  //     if (error === null && response && response?.code === 200) {
-  //       notification.success({
-  //         message: 'Success',
-  //         // @ts-ignore
-  //         description: `${response?.message}`,
-  //       });
-  //       dispatch({ type: 'close' });
-  //       setSelectedReturnOrder([]);
-  //       setCheck([]);
-  //       setNewPayload([]);
-  //       setSelectAll(false);
-  //     }
-  //   }
-  // }, [confirmLoading]); //forCheck
-
   useEffect(() => {
     // @ts-ignore
     if (apiError && apiError?.code !== 200) {
+      notification.error({
+        message: 'Failure',
+        // @ts-ignore
+        description: `${apiError?.message}`,
+      });
       dispatch({ type: 'close' });
       setSelectedReturnOrder([]);
       setCheck([]);
@@ -117,11 +93,6 @@ const ModalManager = () => {
       setGrouped([]);
       setSelectAll(false);
       setShouldPerformAction(false);
-      notification.error({
-        message: 'Failure',
-        // @ts-ignore
-        description: `${apiError?.message}`,
-      });
       setError(null);
       // @ts-ignore
     } else if (response?.code === 200) {