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

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

@@ -26,11 +26,13 @@ import styled from 'styled-components';
 import { Select } from 'antd';
 import { useLocationOptions } from '../../order-view/store';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../common/interface';
 
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  const [customers] = useCustomerData();
+  const [customers, setCustomers] = useCustomerData();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
@@ -47,6 +49,25 @@ function SelectionFilter() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
+  //API for client data
+  const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
+    ApiResponse
+  >({
+    endpoint: `/v1/return/product/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading]);
   //new codee
   const urlCustomerId = searchParams.get('customerId');
   const urlActiontype = searchParams.get('type');
@@ -54,7 +75,6 @@ function SelectionFilter() {
   const selectedCustomer = customers?.find(
     (customer: any) => customer?.customer_id?.toString() === urlCustomerId
   );
-
   const accountNumber = selectedCustomer?.account_number;
 
   //customer name
@@ -91,10 +111,14 @@ function SelectionFilter() {
       setActionTypeOptions(mappedActions);
 
       const mappedLocations = Array.isArray(filteredClient?.return_locations)
-        ? filteredClient?.return_locations?.map((location: any) => ({
-            label: location?.location_name,
-            value: location?.token,
-          }))
+        ? filteredClient.return_locations
+            .filter(
+              (location: any) => location?.location_name && location?.token
+            )
+            .map((location: any) => ({
+              label: location.location_name,
+              value: location.token,
+            }))
         : [];
 
       setLocationOptions(mappedLocations);
@@ -135,10 +159,16 @@ function SelectionFilter() {
         setActionTypeOptions(mappedActions);
 
         const mappedLocations = Array.isArray(filteredClient?.return_locations)
-          ? filteredClient?.return_locations?.map((location: any) => ({
-              label: location?.location_name,
-              value: location?.token,
-            }))
+          ? filteredClient.return_locations
+              .filter((location: any) => {
+                const name = location?.location_name;
+                const token = location?.token;
+                return name && name !== 'null' && token && token !== 'null';
+              })
+              .map((location: any) => ({
+                label: location?.location_name,
+                value: location?.token,
+              }))
           : [];
 
         setLocationOptions(mappedLocations);
@@ -166,9 +196,7 @@ function SelectionFilter() {
       console.log(currentSearch, 'currentSearch');
 
       if (!currentSearch.includes('filter')) {
-        console.log('inside include');
         // for dev
-        //navigate(`filter?${queryParams.toString()}`);
         navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
         // for local
@@ -328,7 +356,7 @@ function SelectionFilter() {
                 options={clientOptions}
                 placeholder="Select Client Name"
                 onChange={handleClientChange}
-                style={{ minWidth: '150px' }}
+                style={{ minWidth: '250px' }}
                 value={selectedClient}
                 allowClear
                 onClear={handleClear}
@@ -349,7 +377,7 @@ function SelectionFilter() {
                     placeholder="Select Action Type"
                     value={selectedFilterValue}
                     onChange={handleActionClick}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     onClear={handleClearAction}
                   />
@@ -362,7 +390,7 @@ function SelectionFilter() {
                     value={selectedLocationValue}
                     placeholder="Select Location"
                     onChange={handleLocationChange}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     mode="multiple"
                   />

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

@@ -6,9 +6,12 @@ import {
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
-import { useCustomerData, useStickyStatus } from '../store';
+import { useClientPortal, useCustomerData, useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
 import { useAtom, useClientData } from '../order-view/store';
 import { ClientData } from './common/interface';
 import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
@@ -33,6 +36,7 @@ function ReturnMainTable() {
   const [, setCustomers] = useCustomerData();
   // const [tableName] = useTableName();
   const queryParams = new URLSearchParams(location.search);
+  const [clientPortal] = useClientPortal();
 
   const customerId = queryParams.get('customerId');
 
@@ -44,14 +48,20 @@ function ReturnMainTable() {
   };
 
   //API for client data
-  const { data: fetchedCustomerData, loading: loading } = useApiHook<
+  const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
   >({
     endpoint: `/v1/return/product/customers/`,
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
+    showLoader: false,
   });
+  useEffect(() => {
+    if (!clientPortal) {
+      fetchData();
+    }
+  }, []);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
@@ -63,7 +73,8 @@ function ReturnMainTable() {
     data: fetchedClientData,
     loading: statsDataLoading,
     paginationData,
-  } = useApiHook<{
+    fetchData: fetchProductStats,
+  } = useAxios<{
     data: ClientData[];
   }>({
     endpoint: `/v1/return/product/stats/`,
@@ -71,8 +82,15 @@ function ReturnMainTable() {
     //@ts-ignore
     pagination: pagination,
     filters: filters,
+    showLoader: false,
   });
 
+  useEffect(() => {
+    if (!clientPortal) {
+      fetchProductStats();
+    }
+  }, []);
+
   useEffect(() => {
     setLoading(statsDataLoading);
     if (fetchedClientData && fetchedClientData.data) {
@@ -95,6 +113,7 @@ function ReturnMainTable() {
 
   return (
     <>
+      <DocumentTitle title="Client Return Products" />
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
         {/* <RouterHeader /> */}
         <div className="Tableconatiner">

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

@@ -10,19 +10,17 @@ import {
   UsePaginationReturnData,
 } from '../store/store';
 import { ApiResponse } from '../common/interface';
-import { useAxios } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  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,78 +31,65 @@ 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,
+    showLoader: 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>
+      <DocumentTitle title="Return Order List" />
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
         <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')}
@@ -241,6 +239,7 @@ const OrderTable = () => {
               <th>Consignment</th>
               <th>Return Order No</th>
               <th> Total Parts</th>
+              <th> Total Orders</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
                   Total Weight {renderSortIcon('weight')}
@@ -251,7 +250,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 +298,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 }}>
@@ -332,6 +329,8 @@ const OrderTable = () => {
                     <td>{displayValueOrNA(item?.order_number)}</td>
 
                     <td>{displayValueOrNA(item?.total_products)}</td>
+                    <td>{displayValueOrNA(item?.total_orders)}</td>
+
                     <td>
                       {displayValueOrNA(item?.weight)}{' '}
                       {item?.weight && item?.weight > 0 ? 'KG' : ''}
@@ -339,19 +338,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

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnFilterStore.ts

@@ -171,46 +171,46 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       }
 
     //client portal
-    case 'SET_CP_DATE_FILTER': {
-      let { startDate, endDate } = action.payload;
+    // case 'SET_CP_DATE_FILTER': {
+    //   let { startDate, endDate } = action.payload;
 
-      if (!startDate || !endDate) {
-        const storedDates = JSON.parse(
-          localStorage.getItem('returnDate') || '{}'
-        );
-        startDate = startDate ?? storedDates?.startDate;
-        endDate = endDate ?? storedDates?.endDate ?? startDate;
-      }
+    //   if (!startDate || !endDate) {
+    //     const storedDates = JSON.parse(
+    //       localStorage.getItem('returnDate') || '{}'
+    //     );
+    //     startDate = startDate ?? storedDates?.startDate;
+    //     endDate = endDate ?? storedDates?.endDate ?? startDate;
+    //   }
 
-      const filters = state['x-filters'].filter(f => f.field !== 'created_at');
+    //   const filters = state['x-filters'].filter(f => f.field !== 'created_at');
 
-      if (startDate === endDate) {
-        filters.push({
-          field: 'created_at',
-          op: '=',
-          value: format(new Date(startDate), 'yyyy-MM-dd'),
-        });
-      } else if (startDate && endDate) {
-        filters.push(
-          {
-            field: 'created_at',
-            op: '>=',
-            value: format(new Date(startDate), 'yyyy-MM-dd'),
-          },
-          {
-            field: 'created_at',
-            op: '<=',
-            value: format(new Date(endDate), 'yyyy-MM-dd'),
-          }
-        );
-      }
+    //   if (startDate === endDate) {
+    //     filters.push({
+    //       field: 'created_at',
+    //       op: '=',
+    //       value: format(new Date(startDate), 'yyyy-MM-dd'),
+    //     });
+    //   } else if (startDate && endDate) {
+    //     filters.push(
+    //       {
+    //         field: 'created_at',
+    //         op: '>=',
+    //         value: format(new Date(startDate), 'yyyy-MM-dd'),
+    //       },
+    //       {
+    //         field: 'created_at',
+    //         op: '<=',
+    //         value: format(new Date(endDate), 'yyyy-MM-dd'),
+    //       }
+    //     );
+    //   }
 
-      return {
-        ...state,
-        'x-filters': filters,
-        'x-pagination': { ...state['x-pagination'], page: 1 },
-      };
-    }
+    //   return {
+    //     ...state,
+    //     'x-filters': filters,
+    //     'x-pagination': { ...state['x-pagination'], page: 1 },
+    //   };
+    // }
     // case 'CLEAR_CLIENT':
     //   return {
     //     ...state,

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

@@ -209,7 +209,7 @@ const ReturnOrderFilter = () => {
                   className="custom-select"
                   placeholder="Status of Order"
                   onChange={handleStatusOfOrder}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{ minWidth: '250px', maxWidth: '300px' }}
                   value={statusOrder}
                   onClear={handleClear}
                   allowClear
@@ -227,9 +227,19 @@ const ReturnOrderFilter = () => {
                   placeholder="Clients"
                   onChange={handleClientChange}
                   value={selectedClient}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{
+                    minWidth: '150px',
+                    width: 'auto',
+                    cursor: 'pointer',
+                  }}
                   allowClear
                   onClear={handleClearClient}
+                  filterOption={(input: any, option: any) =>
+                    (option?.label ?? '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                  }
+                  showSearch
                 />
               </StyledAntSelect>
             </div>

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

@@ -8,12 +8,15 @@ import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
 import ModalManager from '../../order-view/modalsPopup/ModalManager';
 import { useItemsPerPage, UsePaginationData } from '../store/store';
 import Pagination from '../table-view/Pagination';
+import { useCustomerData } from '../../store';
+import { DocumentTitle } from '@bjsdistribution/dms-component-library';
 // import { useLocation } from 'react-router-dom';
 
 const ReturnTable = () => {
   const [paginationObj] = UsePaginationData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+  const [customers] = useCustomerData();
   // const location = useLocation();
   const { page, total } = paginationObj;
 
@@ -30,10 +33,23 @@ const ReturnTable = () => {
   //   const clientId = queryParams.get('customerId');
   // }, [location]);
 
+  const queryParams = new URLSearchParams(location.search);
+
+  const customerId = queryParams.get('customerId');
+
+  const selectedCustomer = customers?.find(
+    (customer: any) => customer?.customer_id?.toString() === customerId
+  );
+
+  const customerName = selectedCustomer?.customer_name;
+
+  const docTitle = `${customerName}: Return Product`;
+
   return (
     <div>
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
+        <DocumentTitle title={docTitle} />
         <div className="Tableconatiner">
           <HeaderFilter />
           <Container>