@bjsdistribution/dms-client-return 0.0.43 → 0.0.44

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.43",
+  "version": "0.0.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -347,7 +347,7 @@ function SelectionFilter() {
               value={selectedLocationValue}
               placeholder="Select Location"
               onChange={handleLocationChange}
-              style={{ minWidth: '14vw' }}
+              style={{ minWidth: '150px' }}
               allowClear
               mode="multiple"
             />

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -1,5 +1,5 @@
 import { Empty, notification, Select } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
 // import { useSelectedOrders } from '../../../store';
 import { useOrderId, useReturnAfterOrderData } from '../../../order-view/store';
@@ -25,6 +25,8 @@ import styled from 'styled-components';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../common/interface';
 import Loader from '../../header/loader/Loader';
+import CaretDownFilledIcon from '../../../../common/CaretDownFilledIcon';
+import SortIcon from '../../../../common/SortIcon';
 
 const OrderTable = ({ loadingskeleton }: any) => {
   // const [, setSelectedReturnOrder] = useSelectedOrders();
@@ -39,6 +41,52 @@ const OrderTable = ({ loadingskeleton }: any) => {
   const [, setAssign] = useState<boolean>(false);
   const [, setCallAPi] = useCallApiAgain();
 
+  //sorting
+  const [sortConfig, setSortConfig] = useState<{
+    key: string;
+    direction: 'asc' | 'desc';
+  } | null>(null);
+
+  const handleSort = (key: string) => {
+    setSortConfig((prev: any) => {
+      if (prev?.key === key && prev.direction === 'asc') {
+        return { key, direction: 'desc' };
+      }
+      return { key, direction: 'asc' };
+    });
+  };
+
+  const sortedData = useMemo(() => {
+    if (!returnAfterOrder || !sortConfig) return returnAfterOrder;
+
+    const { key, direction } = sortConfig;
+    return [...returnAfterOrder].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;
+    });
+  }, [returnAfterOrder, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
   };
@@ -169,16 +217,37 @@ const OrderTable = ({ loadingskeleton }: any) => {
               {/* <th className="emailInvoiceCheckbox">
                 <Checkbox checked={false} />
               </th> */}
-              <th>Created</th>
-              <th>Return Location</th>
+              <th onClick={() => handleSort('created_at')}>
+                <div className="sortIconClass">
+                  Created {renderSortIcon('created_at')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('return_locations.location_name')}>
+                <div className="sortIconClass">
+                  Return Location{' '}
+                  {renderSortIcon('return_locations.location_name')}
+                </div>
+              </th>
               <th>Pick Up Location</th>
-              <th>Recipient</th>
+              <th onClick={() => handleSort('order_recipient.recipient_name')}>
+                <div className="sortIconClass">
+                  Recipient {renderSortIcon('order_recipient.recipient_name')}
+                </div>
+              </th>
               <th> Client</th>
               <th>Consignment</th>
               <th>Return Order No</th>
               <th> Total Parts</th>
-              <th>Total Weight</th>
-              <th>Total CBM</th>
+              <th onClick={() => handleSort('weight')}>
+                <div className="sortIconClass">
+                  Total Weight {renderSortIcon('weight')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('cube')}>
+                <div className="sortIconClass">
+                  Total CBM {renderSortIcon('cube')}
+                </div>
+              </th>
               <th>Assign</th>
               <th>Status</th>
               <th className="emailInvoiceShare">Labels</th>
@@ -192,7 +261,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 </td>
                 <td colSpan={16}></td>
               </tr>
-            ) : returnAfterOrder?.length === 0 ? (
+            ) : sortedData?.length === 0 ? (
               <tr>
                 <td colSpan={16}>
                   <EmptyDataContainer>
@@ -201,7 +270,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 </td>
               </tr>
             ) : (
-              returnAfterOrder?.map((item: any, index: any) => {
+              sortedData?.map((item: any, index: any) => {
                 const statusMapping: any = {
                   cancelled: 'Cancelled',
                   OO: 'On Hold',