@bjsdistribution/dms-client-return 0.1.19-dev → 0.1.20-dev

package/src/components/client-portal/return-confirm/ReturnConfirmedTable.tsx

@@ -0,0 +1,404 @@
+import { Empty } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Skeleton } from 'antd';
+import { NavLink } from 'react-router-dom';
+import {
+  Checkbox,
+  displayValueOrNA,
+  // useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useLoading,
+  usePrintOptionTOggle,
+} from '../../order-daily-overview/store/store';
+import {
+  useReturnConfirmedOrderData,
+  useSelectedClientAfterOrders,
+} from '../../store';
+import { useOrderId } from '../../order-view/store';
+import SortIcon from '../../../common/SortIcon';
+import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
+import {
+  CustomDrop,
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from '../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
+import PrinterIcon from '../../../assets/icons/PrinterIcon';
+import DownIcon from '../../../assets/icons/DownIcon';
+import PrintDropDown from '../../order-daily-overview/shared/elements/PrintDropDown';
+import { formatDate } from '../../order-daily-overview/shared/utlis';
+
+const ReturnConfirmedTable = () => {
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+  const [, setOrderId] = useOrderId();
+  const [returnConfirmedTable] = useReturnConfirmedOrderData();
+  const [loading] = useLoading();
+  const [selectClientAll, setSelectClientAll] = useState(false);
+  const [
+    selectedOrderIds,
+    setSelectedOrderIds,
+  ] = useSelectedClientAfterOrders();
+  //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 (!returnConfirmedTable || !sortConfig) return returnConfirmedTable;
+
+    const { key, direction } = sortConfig;
+    return [...returnConfirmedTable].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;
+    });
+  }, [returnConfirmedTable, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle((prevIndex: any) => (prevIndex === index ? null : index));
+  };
+
+  // Close dropdown outside click
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setPrintToggle(null);
+    }
+  };
+
+  // const handleSelectAll = (e: any) => {
+  //   setSelectAll(e.target.checked);
+  //   if (e.target.checked) {
+  //     setSelectedReturnOrder(
+  //       returnAfterOrder.map((e: any) => ({
+  //         id: e.id,
+  //         status_id: 3,
+  //       }))
+  //     );
+  //   } else {
+  //     setSelectedReturnOrder([]);
+  //   }
+  // };
+
+  // const handleSelectInvoice = (id: any) => {
+  //   setSelectedReturnOrder((prevSelectedInvoices: any) => {
+  //     const isSelected = prevSelectedInvoices?.some(
+  //       (item: any) => item.id === id
+  //     );
+
+  //     if (isSelected) {
+  //       return prevSelectedInvoices.filter((items: any) => items.id !== id);
+  //     } else {
+  //       return [...prevSelectedInvoices, { id, status_id: 3 }];
+  //     }
+  //   });
+  // };
+
+  const getStatusClass = (status: string) => {
+    switch (status) {
+      case 'Cancelled':
+        return { color: '#E95252', background: 'rgba(233, 82, 82, 0.15)' };
+      case 'On Hold':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Sub-Contracted':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Awaiting route':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Awaiting':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Completed':
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)',
+        };
+      case 'Outstanding':
+        return { color: '#FF9900', background: 'rgba(255, 153, 0, 0.15)' };
+      case 'Routed':
+        return { color: '#6396E5', background: 'rgba(99, 150, 229, 0.15)' };
+      default:
+        return { color: '#000', background: '#fff' };
+    }
+  };
+
+  // API for Assign
+  // const {
+  //   data: actionResponse,
+  //   setShouldPerformAction: setAssignAction,
+  //   error: apiError,
+  // } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `return_orders/update/assign/`,
+  //   method: 'PUT',
+  //   body: [assignPayload],
+  //   performAction: false,
+  // });
+
+  //client options
+  // const assignOptions = assignData?.map((option: any) => ({
+  //   label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
+  //   value: option?.bjs_delivery,
+  // }));
+
+  // const handleAssignPayload = (Id: number, value: boolean) => {
+  //   setCallAPi(false);
+  //   setAssign(value);
+  //   setAssignPayload({
+  //     ...assignPayload,
+  //     return_order_id: Id,
+  //     bjs_delivery: value,
+  //   });
+  //   setAssignAction(true);
+  // };
+
+  // useEffect(() => {
+  //   //@ts-ignore
+  //   if (actionResponse?.code === 200) {
+  //     setCallAPi(true);
+  //     notification.success({
+  //       message: 'Success',
+  //       // @ts-ignore
+  //       description: `${actionResponse?.message}`,
+  //     });
+  //     // @ts-ignore
+  //   } else if (apiError?.detail) {
+  //     notification.error({
+  //       message: 'Failure',
+  //       // @ts-ignore
+  //       description: `${apiError?.detail[0]?.msg}`,
+  //     });
+  //   }
+  // }, [actionResponse, apiError]);
+
+  const handleSelectOrderId = (id: string | number) => {
+    setSelectedOrderIds(prev =>
+      prev.includes(id) ? prev.filter(orderId => orderId !== id) : [...prev, id]
+    );
+  };
+  const handleClientSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    setSelectClientAll(isChecked);
+
+    if (isChecked) {
+      setSelectedOrderIds(
+        returnConfirmedTable?.map((item: any) => item?.id) || []
+      );
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+  console.log('selectedOrderIds===>', selectedOrderIds);
+  console.log('returnConfirmedTable=====>', returnConfirmedTable);
+  return (
+    <>
+      <StyledTableWrapper className="fortables">
+        <StyledTable>
+          <thead>
+            <tr>
+              {/* <th className="emailInvoiceCheckbox">
+                <Checkbox checked={false} />
+              </th> */}
+              <th className="emailInvoiceCheckbox">
+                <Checkbox
+                  checked={selectClientAll}
+                  onChange={handleClientSelectAll}
+                />
+              </th>
+              <th onClick={() => handleSort('created_at')}>
+                <div className="sortIconClass">
+                  Created {renderSortIcon('created_at')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('return_location_name')}>
+                <div className="sortIconClass">
+                  Return Location {renderSortIcon('return_location_name')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('recipient_name')}>
+                <div className="sortIconClass">
+                  Recipient {renderSortIcon('recipient_name')}
+                </div>
+              </th>
+              <th> Client</th>
+              <th>Consignment</th>
+              <th>Return Order No</th>
+              <th> Total Parts</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>Status</th>
+              <th className="emailInvoiceShare">Labels</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={16}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={16}></td>
+              </tr>
+            ) : sortedData?.length === 0 ? (
+              <tr>
+                <td colSpan={16}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              sortedData?.map((item: any, index: any) => {
+                const statusMapping: any = {
+                  cancelled: 'Cancelled',
+                  'on hold': 'On Hold',
+                  SC: 'Sub-Contracted',
+                  'awaiting route': 'Awaiting',
+                  'awaiting confirmation': 'Awaiting',
+                  complete: 'Completed',
+                  outstanding: 'Outstanding',
+                  routed: 'Routed',
+                  failed: 'Failed',
+                };
+                const status = statusMapping[item?.status_value] || 'Unknown';
+                const statusClass = getStatusClass(status);
+
+                return (
+                  <tr key={item.id}>
+                    <td>
+                      <Checkbox
+                        checked={selectedOrderIds.includes(item?.id)}
+                        onChange={() => handleSelectOrderId(item?.id)}
+                      />
+                    </td>
+                    <td>{formatDate(new Date(item?.created_at))}</td>
+                    <td>{displayValueOrNA(item?.return_location_name)}</td>
+                    <td onClick={() => setOrderId(item.id)}>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          <NavLink to={`../${item.id}`}>
+                            {displayValueOrNA(item?.recipient_name)}
+                          </NavLink>
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(item?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
+
+                    <td>{displayValueOrNA(item?.customer_name)}</td>
+
+                    <td>{displayValueOrNA(item?.consignment)}</td>
+                    <td>{displayValueOrNA(item?.order_number)}</td>
+
+                    <td>{displayValueOrNA(item?.total_products)}</td>
+                    <td>
+                      {displayValueOrNA(item?.weight)}{' '}
+                      {item?.weight && item?.weight > 0 ? 'KG' : ''}
+                    </td>
+
+                    <td>{displayValueOrNA(item?.cube)}</td>
+
+                    <td>
+                      <ul
+                        className="statuscontainer"
+                        style={{
+                          listStyleType: 'none',
+                          background: statusClass.background,
+                        }}
+                      >
+                        <li
+                          className="statustext"
+                          style={{ color: statusClass.color }}
+                        >
+                          {status}
+                        </li>
+                      </ul>
+                    </td>
+                    <td>
+                      <ul className="actionbox">
+                        <CustomDrop
+                          ref={dropdownRefParent}
+                          className={printToogle === index ? 'active' : ''}
+                        >
+                          <li
+                            className="shareIconContainer"
+                            onClick={() => OpenDropDown(index)}
+                          >
+                            <PrinterIcon />
+                            <DownIcon />
+
+                            {printToogle === index && (
+                              <div ref={dropdownRef}>
+                                <PrintDropDown legacyProductId={item} />
+                              </div>
+                            )}
+                          </li>
+                        </CustomDrop>
+                      </ul>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
+  );
+};
+
+export default ReturnConfirmedTable;

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

@@ -10,19 +10,14 @@ import {
   UsePaginationReturnData,
 } from '../store/store';
 import { ApiResponse } from '../common/interface';
-import { useAxios } from '@bjsdistribution/dms-component-library';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
 import { notification } from 'antd';
 import ReturnPagination from '../table-view/ReturnPagination';
-import {
-  useCallApiAgain,
-  useClientPortal,
-  useSearchAfterText,
-} from '../../store';
-import { useParams } from 'react-router-dom';
+import { useCallApiAgain } from '../../store';
 
 const ReturnAfterTable = () => {
-  const [, setReturnOrderData] = useReturnAfterOrderData();
+  const [returnAfterOrder, setReturnOrderData] = useReturnAfterOrderData();
   const [, setLoading] = useLoading();
   const [state] = useAtom(filtersReducerReturnAtom);
   const [callApi] = useCallApiAgain();
@@ -33,69 +28,54 @@ const ReturnAfterTable = () => {
   const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
   const [, setPaginationObject] = UsePaginationData();
   const { page, total } = paginationObj;
-  const [clientPortal] = useClientPortal();
-  const [debouncedSearchText] = useSearchAfterText();
+
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
   };
   const handleItemsPerPageChange = (itemsPerPage: number) => {
     setItemsPerPage(itemsPerPage);
   };
-  const { status } = useParams();
 
   const {
     data: fetchedReturnOrderData,
     loading,
+    setShouldPerformAction,
     paginationData,
-    fetchData,
-  } = useAxios<ApiResponse>({
+  } = useApiHook<ApiResponse>({
     endpoint: '/v1/return/orders/',
     method: 'GET',
     filters: filters && filters?.length > 0 ? filters : undefined,
     pagination: pagination,
+    performAction: false,
   });
 
   useEffect(() => {
-    if (callApi) {
-      fetchData();
-    }
+    callApi ? setShouldPerformAction(true) : setShouldPerformAction(false);
   }, [callApi]);
 
-  useEffect(() => {
-    if (!clientPortal) {
-      fetchData();
-    }
-  }, []);
-
-  //CP
-  useEffect(() => {
-    if (clientPortal && debouncedSearchText.trim().length === 0) {
-      fetchData();
-    }
-  }, [debouncedSearchText, clientPortal, status]);
-
   useEffect(() => {
     setLoading(loading);
-
-    if (
-      fetchedReturnOrderData?.data &&
-      (!clientPortal || debouncedSearchText.trim().length === 0)
-    ) {
-      setReturnOrderData(fetchedReturnOrderData.data);
-
+    if (fetchedReturnOrderData && fetchedReturnOrderData?.data) {
+      setReturnOrderData(fetchedReturnOrderData?.data);
       if (paginationData) {
         try {
           const { count, ...rest } = JSON.parse(paginationData);
           setPaginationObject(rest);
         } catch (error) {
+          console.error('Error parsing paginationData:', error);
           notification.error({
             message: 'Error',
             description: 'Failed to parse pagination data',
           });
         }
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null or undefined',
+        });
       }
     }
-  }, [fetchedReturnOrderData, loading]);
+  }, [fetchedReturnOrderData, loading, returnAfterOrder]);
 
   return (
     <div>
@@ -104,7 +84,7 @@ const ReturnAfterTable = () => {
         <div className="Tableconatiner">
           {/* <HeaderFilter /> */}
           <Container>
-            {!clientPortal && <ReturnOrderFilter />}
+            <ReturnOrderFilter />
             <OrderTable />
             {total > 0 && (
               <ReturnPagination

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

@@ -19,7 +19,6 @@ import {
   useAssignData,
   useAssignPayload,
   useCallApiAgain,
-  useClientPortal,
 } from '../../../store';
 import styled from 'styled-components';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
@@ -40,7 +39,6 @@ const OrderTable = () => {
   const [, setAssign] = useState<boolean>(false);
   const [, setCallAPi] = useCallApiAgain();
   const [loading] = useLoading();
-  const [clientPortal] = useClientPortal();
 
   //sorting
   const [sortConfig, setSortConfig] = useState<{
@@ -231,7 +229,7 @@ const OrderTable = () => {
                   Return Location {renderSortIcon('return_location_name')}
                 </div>
               </th>
-              {!clientPortal && <th>Pick Up Location</th>}
+              <th>Pick Up Location</th>
               <th onClick={() => handleSort('recipient_name')}>
                 <div className="sortIconClass">
                   Recipient {renderSortIcon('recipient_name')}
@@ -251,7 +249,7 @@ const OrderTable = () => {
                   Total CBM {renderSortIcon('cube')}
                 </div>
               </th>
-              {!clientPortal && <th>Assign</th>}
+              <th>Assign</th>
               <th>Status</th>
               <th className="emailInvoiceShare">Labels</th>
             </tr>
@@ -299,13 +297,11 @@ const OrderTable = () => {
                     <td>{formatDate(new Date(item?.created_at))}</td>
                     <td>{displayValueOrNA(item?.return_location_name)}</td>
 
-                    {!clientPortal && (
-                      <td>
-                        {item?.locations?.length
-                          ? item?.locations.join(', ')
-                          : 'N/A'}
-                      </td>
-                    )}
+                    <td>
+                      {item?.locations?.length
+                        ? item?.locations.join(', ')
+                        : 'N/A'}
+                    </td>
 
                     <td onClick={() => setOrderId(item.id)}>
                       <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -339,19 +335,17 @@ const OrderTable = () => {
 
                     <td>{displayValueOrNA(item?.cube)}</td>
 
-                    {!clientPortal && (
-                      <td key={item.id}>
-                        <StyledAntSelect
-                          options={assignOptions}
-                          placeholder="Select"
-                          onChange={(value: any) =>
-                            handleAssignPayload(item?.id, value)
-                          }
-                          style={{ width: '150px' }}
-                          value={item?.bjs_delivery}
-                        />
-                      </td>
-                    )}
+                    <td key={item.id}>
+                      <StyledAntSelect
+                        options={assignOptions}
+                        placeholder="Select"
+                        onChange={(value: any) =>
+                          handleAssignPayload(item?.id, value)
+                        }
+                        style={{ width: '150px' }}
+                        value={item?.bjs_delivery}
+                      />
+                    </td>
 
                     <td>
                       <ul