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

package/src/components/order-daily-overview/header/route-header/RouterHeader.tsx

@@ -12,10 +12,10 @@ import {
   useEndDate,
   useStartDate,
 } from '../../../store';
-import { filtersReducerReturnAtom } from '../../return-after-table/table-filters/ReturnFilterStore';
 import ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
 import { useParams } from 'react-router-dom';
 import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
+import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -30,44 +30,37 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubPart, // Optional
 }) => {
   const [clientPortal] = useClientPortal();
-  const [, dispatch] = useAtom(filtersReducerReturnAtom);
+  const [, dispatch] = useAtom(dateFilterCPReducer);
   //CP
   const [startDate, setStartDate] = useStartDate();
   const [endDate, setEndDate] = useEndDate();
   const { status } = useParams();
 
-  useEffect(() => {
-    const storedDates = JSON.parse(localStorage.getItem('returnDate') || '{}');
-    const initialStart = storedDates?.startDate
-      ? dayjs(storedDates.startDate)
-      : null;
-    const initialEnd = storedDates?.endDate ? dayjs(storedDates.endDate) : null;
-
-    if (initialStart) setStartDate(initialStart);
-    if (initialEnd) setEndDate(initialEnd);
-  }, []);
-
   useEffect(() => {
     if (clientPortal) {
       const formattedStart = startDate?.format('YYYY-MM-DD');
       const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
-
+      console.log(formattedStart, 'syart', formattedEnd, 'end');
       const payload = {
         startDate: formattedStart,
         endDate: formattedEnd,
       };
-      localStorage.setItem('returnDate', JSON.stringify(payload));
+
+      console.log(payload, 'PAYLOAD');
       if (formattedStart || formattedEnd) {
         dispatch({
           type: 'SET_CP_DATE_FILTER',
-          payload,
+          payload: {
+            startDate: formattedStart,
+            endDate: formattedEnd,
+          },
         });
       }
     }
   }, [startDate, endDate]);
 
   const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? dayjs());
+    setStartDate(date ?? null);
   };
 
   const handleEndDateChange: DatePickerProps['onChange'] = date => {
@@ -127,7 +120,7 @@ export const DatePickerWrap = styled.div`
   align-self: stretch;
   border-radius: 20px;
   border: 1px solid #e0e2e7;
-  background: var(--Neutral-White, #fff);
+  background: #fff;
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   min-width: 22vw;
   height: 35px;

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,7 +10,10 @@ import {
   UsePaginationReturnData,
 } from '../store/store';
 import { ApiResponse } from '../common/interface';
-import { useApiHook } 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';
@@ -47,6 +50,7 @@ const ReturnAfterTable = () => {
     filters: filters && filters?.length > 0 ? filters : undefined,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -79,6 +83,7 @@ const ReturnAfterTable = () => {
 
   return (
     <div>
+      <DocumentTitle title="Return Order List" />
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
         <div className="Tableconatiner">

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

@@ -239,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')}
@@ -328,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' : ''}

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>

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

@@ -10,6 +10,7 @@ import SortIcon from '../../../../common/SortIcon';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { usefetchAgain, useReturnData } from '../../../order-view/store';
 import {
+  useCustomerData,
   useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
@@ -27,7 +28,7 @@ import {
 } from '../../store/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -39,13 +40,14 @@ const ReturnOrderTable = () => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
-  const [createReturn, setReturnPayload] = useReturnPayload();
+  const [, setReturnPayload] = useReturnPayload();
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
   const [locationData] = useLocationData();
   const [, setPaginationObject] = UsePaginationData();
   const [callForFetch] = usefetchAgain();
-
+  const [searchParams] = useSearchParams();
+  const urlCustomerId = searchParams.get('customerId');
   //sorting
   const [sortConfig, setSortConfig] = useState<{
     key: string;
@@ -122,6 +124,7 @@ const ReturnOrderTable = () => {
     filters: filters,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -168,7 +171,15 @@ const ReturnOrderTable = () => {
     }
     // setShouldPerformAction(false);
   }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+  const [customers] = useCustomerData();
+
+  const selectedCustomer = customers?.find((customer: any) => {
+    const customerId = customer?.customer_id?.toString();
+    return customerId && customerId === urlCustomerId;
+  });
 
+  const accountNumber = selectedCustomer?.account_number;
+  console.log(selectedCustomer, 'selectedCustomer');
   const handleSelectAll = (e: any) => {
     const isChecked = e.target.checked;
     setSelectAll(isChecked);
@@ -187,8 +198,8 @@ const ReturnOrderTable = () => {
       }));
       const newPayload = filteredData.map((loc: any) => ({
         id: loc.id,
-        account_number: createReturn?.account_number,
-        customer_id: +createReturn?.customer_id,
+        account_number: accountNumber,
+        customer_id: Number(urlCustomerId),
         products: [loc?.legacy_product_id],
         return_action: loc?.product_return_action,
         return_location_token: loc?.return_location || null,
@@ -214,7 +225,6 @@ const ReturnOrderTable = () => {
       const isSelected = prevSelectedLocations?.some(
         (loc: any) => loc.id === id
       );
-
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id
@@ -237,8 +247,8 @@ const ReturnOrderTable = () => {
       } else {
         const newReturnPayload = {
           id,
-          account_number: createReturn?.account_number,
-          customer_id: +createReturn?.customer_id,
+          account_number: accountNumber,
+          customer_id: Number(urlCustomerId),
           products: [legacy_product_id],
           return_action: product_return_action || null,
           return_location_token: return_location || null,
@@ -299,7 +309,6 @@ const ReturnOrderTable = () => {
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-
   return (
     <>
       <StyledTableWrapper className="fortables">
@@ -310,7 +319,10 @@ const ReturnOrderTable = () => {
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th> */}
               {returnData?.some(
-                (item: any) => item?.product_return_action === 'RTS'
+                (item: any) =>
+                  item?.product_return_action === 'RTS' &&
+                  item?.return_location !== 'null' &&
+                  item?.return_location !== null
               ) ? (
                 <th className="emailInvoiceCheckbox">
                   <Checkbox checked={selectAll} onChange={handleSelectAll} />
@@ -376,7 +388,9 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {item?.product_return_action === 'RTS' ? (
+                    {item?.product_return_action === 'RTS' &&
+                    item?.return_location !== 'null' &&
+                    item?.return_location !== null ? (
                       <Checkbox
                         className="custom-check"
                         checked={selectedReturnOrder.some(

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

@@ -108,7 +108,6 @@ const ReturnTable: React.FC = () => {
       customerId: customerId?.toString(),
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -138,7 +137,6 @@ const ReturnTable: React.FC = () => {
       type: RTS,
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -158,6 +156,7 @@ const ReturnTable: React.FC = () => {
                 { label: 'Products', key: 'return_order_products' },
                 { label: 'RTS', key: 'RTS' },
                 { label: 'Pending', key: 'PENDING' },
+                { label: 'Claims Paid', key: 'CLAIMS PAID' },
                 { label: 'Dispose', key: 'DISPOSE' },
                 { label: 'Re-allocate', key: 'RE-ALLOCATE' },
                 { label: 'Re-Del', key: 'RE-DEL' },
@@ -175,13 +174,13 @@ const ReturnTable: React.FC = () => {
           <tbody>
             {statsLoading ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <Skeleton active />
                 </td>
               </tr>
             ) : sortedData?.length === 0 ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>
@@ -249,6 +248,11 @@ const ReturnTable: React.FC = () => {
                         <GreyBox>{key?.PENDING}</GreyBox>
                       </ColumStyle>
                     </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.['CLAIMS PAID']}</GreyBox>
+                      </ColumStyle>
+                    </td>
                     <td>
                       <ColumStyle>
                         <GreyBox>{key?.DISPOSE}</GreyBox>