@bjsdistribution/dms-client-return 0.0.36 → 0.0.38

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.36",
+  "version": "0.0.38",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.1.4",
+    "@bjsdistribution/dms-component-library": "0.1.10",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/common/CaretDownFilledIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+function CaretDownFilledIcon(props: any) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_2034_435)">
+        <path
+          d="M13.5 6.75C14.139 6.75 14.4727 7.4895 14.0872 7.96725L14.0302 8.03025L9.53021 12.5303C9.40107 12.6594 9.22924 12.737 9.04698 12.7484C8.86471 12.7599 8.68452 12.7044 8.54021 12.5925L8.46971 12.5303L3.96972 8.03025L3.90746 7.95975L3.86697 7.902L3.82647 7.83L3.81371 7.803L3.79347 7.75275L3.76946 7.67175L3.76196 7.632L3.75446 7.587L3.75146 7.54425V7.45575L3.75521 7.41225L3.76196 7.36725L3.76946 7.32825L3.79347 7.24725L3.81371 7.197L3.86622 7.098L3.91496 7.0305L3.96972 6.96975L4.04021 6.9075L4.09797 6.867L4.16996 6.8265L4.19697 6.81375L4.24721 6.7935L4.32821 6.7695L4.36796 6.762L4.41296 6.7545L4.45571 6.7515L13.5 6.75Z"
+          fill="#9E9E9E"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2034_435">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default CaretDownFilledIcon;

package/src/common/CaretUpFilledIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+function CaretDownFilledIcon(props: any) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_2034_435)">
+        <path
+          d="M13.5 6.75C14.139 6.75 14.4727 7.4895 14.0872 7.96725L14.0302 8.03025L9.53021 12.5303C9.40107 12.6594 9.22924 12.737 9.04698 12.7484C8.86471 12.7599 8.68452 12.7044 8.54021 12.5925L8.46971 12.5303L3.96972 8.03025L3.90746 7.95975L3.86697 7.902L3.82647 7.83L3.81371 7.803L3.79347 7.75275L3.76946 7.67175L3.76196 7.632L3.75446 7.587L3.75146 7.54425V7.45575L3.75521 7.41225L3.76196 7.36725L3.76946 7.32825L3.79347 7.24725L3.81371 7.197L3.86622 7.098L3.91496 7.0305L3.96972 6.96975L4.04021 6.9075L4.09797 6.867L4.16996 6.8265L4.19697 6.81375L4.24721 6.7935L4.32821 6.7695L4.36796 6.762L4.41296 6.7545L4.45571 6.7515L13.5 6.75Z"
+          fill="#9E9E9E"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2034_435">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default CaretDownFilledIcon;

package/src/common/SortIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const SortIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="bxs:sort-alt">
+        <path
+          id="Vector"
+          d="M4.15138 7.83335H11.8494C12.424 7.83335 12.7294 7.15335 12.3474 6.72335L8.49871 2.39335C8.43628 2.32288 8.35961 2.26647 8.27377 2.22783C8.18792 2.1892 8.09485 2.16922 8.00071 2.16922C7.90657 2.16922 7.8135 2.1892 7.72766 2.22783C7.64181 2.26647 7.56514 2.32288 7.50271 2.39335L3.65271 6.72335C3.27071 7.15335 3.57604 7.83335 4.15138 7.83335ZM7.50204 14.606C7.56447 14.6765 7.64114 14.7329 7.72699 14.7715C7.81284 14.8102 7.9059 14.8301 8.00004 14.8301C8.09418 14.8301 8.18725 14.8102 8.2731 14.7715C8.35895 14.7329 8.43562 14.6765 8.49804 14.606L12.3467 10.276C12.7294 9.84668 12.424 9.16668 11.8487 9.16668H4.15138C3.57671 9.16668 3.27138 9.84668 3.65338 10.2767L7.50204 14.606Z"
+          fill="#9E9E9E"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default SortIcon;

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

@@ -106,19 +106,21 @@ function SelectionFilter() {
       );
 
       if (filteredClient) {
-        const mappedActions = filteredClient?.actions?.map((action: any) => ({
-          label: action,
-          value: action,
-        }));
+        const mappedActions = Array.isArray(filteredClient?.actions)
+          ? filteredClient?.actions?.map((action: any) => ({
+              label: action,
+              value: action,
+            }))
+          : [];
 
         setActionTypeOptions(mappedActions);
 
-        const mappedLocations = filteredClient?.return_locations?.map(
-          (location: any) => ({
-            label: location,
-            value: location,
-          })
-        );
+        const mappedLocations = Array.isArray(filteredClient?.return_locations)
+          ? filteredClient?.return_locations?.map((location: any) => ({
+              label: location?.location_name,
+              value: location?.token,
+            }))
+          : [];
 
         setLocationOptions(mappedLocations);
       }
@@ -300,7 +302,6 @@ function SelectionFilter() {
               />
             </FilterColumn>
           </>
-          {/* ) : null} */}
         </LeftColumn>
         <RightColumn>
           <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>

package/src/components/order-daily-overview/index.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  // useItemsPerOverviewPage,
-  //useItemsPerPage,
-  useLoading,
-  // UsePaginationOverviewData,
+  useItemsPerOverviewPage,
+  useStatsLoading,
+  UsePaginationOverviewData,
   useTableName,
-  //UsePaginationData,
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
@@ -17,36 +15,34 @@ import { ClientData } from './common/interface';
 import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
 import { Text } from './filters/FilterStyle';
 import ReturnTable from './table/ReturnTable';
+import { notification } from 'antd';
 import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
-// import { notification } from 'antd';
-// import Pagination from './table-view/Pagination';
-// import Pagination from './table-view/Pagination';
-// import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
+import Pagination from './table-view/Pagination';
 
 function ReturnMainTable() {
   const [state] = useAtom(overviewfiltersReducerAtom);
-  // const [paginationObj] = UsePaginationOverviewData();
-  // const [, setCurrentPage] = useState(1);
-  // const [itemsPerPage, setItemsPerPage] = useItemsPerOverviewPage();
+  const [paginationObj, setPaginationObject] = UsePaginationOverviewData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerOverviewPage();
   const { 'x-pagination': pagination } = state;
-  // const { page, total } = paginationObj;
+  const { page, total } = paginationObj;
   // const [selectedClient] = useTableName();
   const [isScrolled] = useStickyStatus();
-  const [, setLoading] = useLoading();
+  const [, setLoading] = useStatsLoading();
   const [, setClientData] = useClientData();
   const [tableName] = useTableName();
 
-  // const handlePageChange = (page: number) => {
-  //   setCurrentPage(page);
-  // };
-  // const handleItemsPerPageChange = (itemsPerPage: number) => {
-  //   setItemsPerPage(itemsPerPage);
-  // };
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
 
   const {
     data: fetchedClientData,
     loading: statsDataLoading,
-    // paginationData,
+    paginationData,
   } = useApiHook<{
     data: ClientData[];
   }>({
@@ -61,15 +57,15 @@ function ReturnMainTable() {
     if (fetchedClientData && fetchedClientData.data) {
       const result = fetchedClientData?.data;
       setClientData(result);
-      // if (paginationData !== null) {
-      //   const { count, ...rest } = JSON.parse(paginationData);
-      //   setPaginationObject(rest);
-      // } else {
-      //   notification.error({
-      //     message: 'Error',
-      //     description: 'Pagination data is null',
-      //   });
-      // }
+      if (paginationData !== null) {
+        const { count, ...rest } = JSON.parse(paginationData);
+        setPaginationObject(rest);
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null',
+        });
+      }
     }
   }, [statsDataLoading]);
 
@@ -86,7 +82,7 @@ function ReturnMainTable() {
             </Row>
             <ReturnTable />
           </Container>
-          {/* {total > 0 && (
+          {total > 0 && (
             <Pagination
               currentPage={page}
               totalItems={total}
@@ -94,7 +90,7 @@ function ReturnMainTable() {
               onPageChange={handlePageChange}
               onItemsPerPageChange={handleItemsPerPageChange}
             ></Pagination>
-          )} */}
+          )}
         </div>
       </DashBoardWrapper>
     </>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -1,7 +1,7 @@
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import { Empty, notification } from 'antd';
 import { useAtom } from 'jotai';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
 import {
   useGroupedPayload,
@@ -28,6 +28,8 @@ import { displayValueOrNA } from '../../shared/utlis';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { format } from 'date-fns';
 import Loader from '../../header/loader/Loader';
+import CaretDownFilledIcon from '../../../../common/CaretDownFilledIcon';
+import SortIcon from '../../../../common/SortIcon';
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
 
@@ -46,6 +48,53 @@ const ReturnOrderTable = () => {
   const [locationData] = useLocationData();
   const [, setPaginationObject] = UsePaginationData();
   const [callForFetch] = usefetchAgain();
+
+  //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 (!returnData || !sortConfig) return returnData;
+
+    const { key, direction } = sortConfig;
+    return [...returnData].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;
+    });
+  }, [returnData, 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));
   };
@@ -105,7 +154,7 @@ const ReturnOrderTable = () => {
         return {
           ...returnItem,
           new_location: matchingLocation
-            ? matchingLocation.location_name
+            ? matchingLocation?.location_name
             : null,
         };
       });
@@ -131,7 +180,7 @@ const ReturnOrderTable = () => {
             products: loc?.legacy_product_id,
             order_product_return_action: loc?.order_product_return_action,
             return_location_token: loc?.return_location,
-            new_location: loc?.new_location,
+            // new_location: loc?.new_location,
           }))
       );
 
@@ -147,7 +196,7 @@ const ReturnOrderTable = () => {
             products: [loc?.legacy_product_id],
             return_action: loc?.order_product_return_action?.type,
             return_location_token: loc?.return_location || null,
-            new_location: loc?.new_location,
+            // new_location: loc?.new_location,
           }))
       );
     } else {
@@ -162,7 +211,7 @@ const ReturnOrderTable = () => {
     return_location: any,
     return_locations: any,
     order_product_return_action: any,
-    new_location: any,
+    // new_location: any,
     legacy_product_id: any
   ) => {
     setSelectedReturnOrder((prevSelectedLocations: any) => {
@@ -180,7 +229,7 @@ const ReturnOrderTable = () => {
           products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
           return_location_token: return_location || null,
-          new_location: new_location,
+          // new_location: new_location,
         }));
 
         setNewPayload((prevPayload: any) =>
@@ -207,7 +256,7 @@ const ReturnOrderTable = () => {
           products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
           return_location_token: return_location || null,
-          new_location: new_location,
+          // new_location: new_location,
         }));
 
         return [
@@ -217,7 +266,7 @@ const ReturnOrderTable = () => {
             return_location,
             return_locations,
             order_product_return_action,
-            new_location,
+            // new_location,
           },
         ];
       }
@@ -257,6 +306,7 @@ const ReturnOrderTable = () => {
 
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
+    console.log(mergedPayload, 'mergedPayload');
   }, [newpayload]);
 
   return (
@@ -278,29 +328,60 @@ const ReturnOrderTable = () => {
               ) : (
                 <th></th>
               )}
-              <th>Product Location</th>
-              <th>Return Location</th>
-              <th>Recipient</th>
+              <th onClick={() => handleSort('orders_products_stock.location')}>
+                <div className="sortIconClass">
+                  Product Location{' '}
+                  {renderSortIcon('orders_products_stock.location')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('new_location')}>
+                <div className="sortIconClass">
+                  Return Location {renderSortIcon('new_location')}
+                </div>
+              </th>
+              <th
+                onClick={() =>
+                  handleSort('order_data.order_recipient.recipient_name')
+                }
+              >
+                <div className="sortIconClass">
+                  Recipient{' '}
+                  {renderSortIcon('order_data.order_recipient.recipient_name')}
+                </div>
+              </th>
               <th>Return Action</th>
               <th>Code</th>
               <th>Description</th>
               <th>Part</th>
-              <th>Weight</th>
+              <th onClick={() => handleSort('weight')}>
+                <div className="sortIconClass">
+                  Weight {renderSortIcon('weight')}
+                </div>
+              </th>
               <th>CBM</th>
-              <th>Return Reason</th>
+              <th onClick={() => handleSort('return_reasons.reason')}>
+                <div className="sortIconClass">
+                  Return Reason {renderSortIcon('return_reasons.reason')}
+                </div>
+              </th>
               <th>Collected</th>
-              <th>Collection Reason</th>
+              <th onClick={() => handleSort('collection_reasons.reason')}>
+                <div className="sortIconClass">
+                  Collection Reason{' '}
+                  {renderSortIcon('collection_reasons.reason')}
+                </div>
+              </th>
               <th className="emailInvoiceShare">Labels</th>
             </tr>
           </thead>
           <tbody>
             {load ? (
               <tr>
-                <td colSpan={13}>
+                <td colSpan={14}>
                   <Skeleton active />
                 </td>
               </tr>
-            ) : returnData?.length === 0 ? (
+            ) : sortedData?.length === 0 ? (
               <tr>
                 <td colSpan={14}>
                   <EmptyDataContainer>
@@ -309,7 +390,7 @@ const ReturnOrderTable = () => {
                 </td>
               </tr>
             ) : (
-              returnData?.map((item: any, index: any) => (
+              sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
                     {item?.order_product_return_action?.type == 'RTS' ? (
@@ -326,7 +407,7 @@ const ReturnOrderTable = () => {
                               item.return_location,
                               item.return_locations,
                               item.order_product_return_action,
-                              item.new_location,
+                              // item.new_location,
                               item.legacy_product_id
                             )
                           }
@@ -382,9 +463,9 @@ const ReturnOrderTable = () => {
                   <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
                   <td>
                     {item?.order_product_returns?.length > 0
-                      ? item.order_product_returns.map((ret: any) =>
+                      ? item?.order_product_returns?.map((ret: any) =>
                           ret?.collected_at
-                            ? format(new Date(ret.collected_at), 'dd/MM/yyyy')
+                            ? format(new Date(ret?.collected_at), 'dd/MM/yyyy')
                             : 'UNKNOWN'
                         )
                       : 'UNKNOWN'}
@@ -405,7 +486,7 @@ const ReturnOrderTable = () => {
                           {printToogle == index && (
                             <div ref={dropdownRef}>
                               <PrintDropDownReturn
-                                legacyProductId={item.legacy_product_id}
+                                legacyProductId={item?.legacy_product_id}
                               />
                             </div>
                           )}

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -277,6 +277,10 @@ export const StyledTable = styled.table`
           border-radius: 0px 100px 100px 0;
           border-right: 1px solid rgba(0, 0, 0, 0.08);
         }
+        .sortIconClass {
+          cursor: pointer;
+          display: flex;
+        }
       }
     }
   }

package/src/components/order-daily-overview/store/store.ts

@@ -35,12 +35,18 @@ const atomRoutesTable = atom<TableRowType[]>([]);
 export const useRoutesTable = () => {
   return useAtom(atomRoutesTable);
 };
-
+//this
 const loading = atom<boolean>(false);
-export const useLoading = () => {
+export const useStatsLoading = () => {
   return useAtom(loading);
 };
 
+//this
+const loadingState = atom<boolean>(false);
+export const useLoading = () => {
+  return useAtom(loadingState);
+};
+
 const selectedAction = atom<number | null>(null);
 export function useSelectedAction() {
   return useAtom(selectedAction);