@bjsdistribution/dms-client-return 0.0.11 → 0.0.13

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

@@ -1,8 +1,4 @@
-import {
-  AntSelect,
-  Checkbox,
-  displayValueOrNA,
-} from '@bjsdistribution/dms-component-library';
+import { AntSelect, Checkbox } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
@@ -18,9 +14,9 @@ import {
 } from '../../return-order-table/return-orders-filters/returnstyles';
 import LoadIcon from '../../../../assets/icons/LoadIcon';
 import { usePrintOptionTOggle } from '../../store/store';
-import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
+import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { NavLink } from 'react-router-dom';
-import { formatDate } from '../../shared/utlis';
+import { displayValueOrNA, formatDate } from '../../shared/utlis';
 
 const OrderTable = ({ loadingskeleton }: any) => {
   const [selectedOrders, setSelectedReturnOrder] = useSelectedOrders();
@@ -207,7 +203,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                     <td>{displayValueOrNA(item?.order_number)}</td>
 
                     <td>{displayValueOrNA(item?.box_count)}</td>
-                    <td>{displayValueOrNA(item?.weight)}KG</td>
+                    <td>{displayValueOrNA(item?.weight)} KG</td>
                     <td>{displayValueOrNA(item?.cube)}</td>
                     <td>
                       <AntSelect

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

@@ -67,20 +67,18 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
-    // case 'SET_ACTIONS_FILTER':
-    //   return {
-    //     ...state,
-    //     'x-filters': [
-    //       ...state['x-filters'].filter(
-    //         f => f.field !== 'product_return_action_id'
-    //       ),
-    //       {
-    //         field: 'product_return_action_id',
-    //         op: '=',
-    //         value: action.payload,
-    //       },
-    //     ],
-    //   };
+    case 'SET_STATUS_ORDER_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'status_id'),
+          {
+            field: 'status_id',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
 
     // case 'SET_LOCATION_FILTER':
     //   return {

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

@@ -10,17 +10,20 @@ import DateIcon from '../../../../assets/icons/DateIcon';
 // import StatusIcon from '../../../../assets/icons/StatusIcon';
 import ClientIcon from '../../../../assets/icons/ClientIcon';
 // import AssigneIcon from '../../../../assets/icons/AssigneIcon';
-import { DatePicker, Select, Tooltip } from 'antd';
+import { DatePicker, Select } from 'antd';
 import { useAtom } from '../../../order-view/store';
 import styled from 'styled-components';
 import { filtersReducerAtom } from './ReturnFilterStore';
 import dayjs from 'dayjs';
-import { useCustomerData } from '../../../store';
+import { useCustomerData, useStatusOrderData } from '../../../store';
+import StatusIcon from '../../../../assets/icons/StatusIcon';
+import AssigneIcon from '../../../../assets/icons/AssigneIcon';
 
 const ReturnOrderFilter = () => {
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [customers] = useCustomerData();
   const [selectedDate, setSelectedDate] = useState();
+  const [statusOfOrder] = useStatusOrderData();
   // const zoneOptions = [
   //   { label: 'Zone 1', value: 'zone1' },
   //   { label: 'Zone 2', value: 'zone2' },
@@ -52,6 +55,14 @@ const ReturnOrderFilter = () => {
     value: option?.id,
   }));
 
+  //status of order
+  const orderOptions = statusOfOrder?.map((option: any) => ({
+    label:
+      option?.status_type?.charAt(0)?.toUpperCase() +
+      option?.status_type?.slice(1),
+    value: option?.id,
+  }));
+
   const handleClientChange = (value: any) => {
     console.log(value, 'value');
     dispatch({
@@ -60,6 +71,14 @@ const ReturnOrderFilter = () => {
     });
   };
 
+  const handleStatusOfOrder = (value: any) => {
+    console.log(value, 'value');
+    dispatch({
+      type: 'SET_STATUS_ORDER_FILTER',
+      payload: value,
+    });
+  };
+
   return (
     <>
       <StyledFiter>
@@ -88,31 +107,21 @@ const ReturnOrderFilter = () => {
               </StyledDatePicker>
             </div>
 
-            {/* <div className="datefilter">
+            <div className="datefilter">
               <div className="dateiconcontainer">
                 <StatusIcon />
               </div>
               <StyledAntSelect>
                 <Select
-                  options={zoneOptions}
+                  options={orderOptions}
                   className="custom-select"
                   placeholder="Status of Order"
-                  onChange={() => {}}
-                  style={{ minWidth: '115px' }}
-                  maxTagCount={0}
-                  maxTagPlaceholder={(omittedValues: any) => (
-                    <Tooltip
-                      overlayStyle={{ pointerEvents: 'none' }}
-                      title={omittedValues
-                        .map(({ label }: any) => label)
-                        .join(', ')}
-                    >
-                      <span>{`${omittedValues.length} selected`}</span>
-                    </Tooltip>
-                  )}
+                  onChange={handleStatusOfOrder}
+                  style={{ minWidth: '130px' }}
+                  allowClear
                 />
               </StyledAntSelect>
-            </div> */}
+            </div>
             <div className="datefilter">
               <div className="dateiconcontainer">
                 <ClientIcon />
@@ -124,25 +133,15 @@ const ReturnOrderFilter = () => {
                   placeholder="Client"
                   onChange={handleClientChange}
                   style={{ width: '125px', border: 'none' }}
-                  maxTagCount={0}
-                  maxTagPlaceholder={(omittedValues: any) => (
-                    <Tooltip
-                      overlayStyle={{ pointerEvents: 'none' }}
-                      title={omittedValues
-                        .map(({ label }: any) => label)
-                        .join(', ')}
-                    >
-                      <span>{`${omittedValues.length} selected`}</span>
-                    </Tooltip>
-                  )}
+                  allowClear
                 />
               </StyledAntSelect>
             </div>
-            {/* <div className="datefilter">
+            <div className="datefilter">
               <div className="dateiconcontainer">
                 <AssigneIcon />
               </div>
-              <StyledAntSelect>
+              {/* <StyledAntSelect>
                 <Select
                   options={zoneOptions}
                   className="custom-select"
@@ -161,8 +160,8 @@ const ReturnOrderFilter = () => {
                     </Tooltip>
                   )}
                 />
-              </StyledAntSelect>
-            </div> */}
+              </StyledAntSelect> */}
+            </div>
           </LeftSideConatiner>
         </StyledFIlterELements>
         <TableFilters />

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import RouterHeader from '../header/route-header/RouterHeader';
+// import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
 
 import ReturnFilter from './return-orders-filters/ReturnFilter';
@@ -11,7 +11,7 @@ const ReturnTable = () => {
   return (
     <div>
       <DashBoardWrapper>
-        <RouterHeader />
+        {/* <RouterHeader /> */}
         <div className="Tableconatiner">
           <HeaderFilter />
           <Container>

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

@@ -1,12 +1,14 @@
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import { useAtom } from 'jotai';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
 import {
   useGroupedPayload,
+  useLocationData,
   useNewReturnPayload,
   useReturnPayload,
+  useSelectAll,
   useSelectedOrders,
 } from '../../../store';
 import { useReturnData } from '../../../order-view/store';
@@ -17,22 +19,23 @@ import DownIcon from '../../../../assets/icons/DownIcon';
 import { useLoading, usePrintOptionTOggle } from '../../store/store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
-import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
 import { displayValueOrNA } from '../../shared/utlis';
-const ReturnOrderTable = ({ loadingskeleton }: any) => {
+import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
+const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
 
   const [selectedReturnOrder, setSelectedReturnOrder] = useSelectedOrders();
-  const [selectAll, setSelectAll] = useState(false);
+  const [selectAll, setSelectAll] = useSelectAll();
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const [returnData, setReturnData] = useReturnData();
-  const [, setLoading] = useLoading();
+  const [load, setLoading] = useLoading();
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
   const [createReturn, setReturnPayload] = useReturnPayload();
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
+  const [locationData] = useLocationData();
 
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
@@ -54,7 +57,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const { data: fetchedOrderData, loading: staticDataLoading } = useApiHook<
+  const { data: fetchedOrderData, loading: returnDataLoad } = useApiHook<
     ApiResponse
   >({
     endpoint: '/return_order_products/',
@@ -64,11 +67,31 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
   });
 
   useEffect(() => {
-    setLoading(staticDataLoading);
+    setLoading(returnDataLoad);
     if (fetchedOrderData && fetchedOrderData?.data) {
       setReturnData(fetchedOrderData?.data);
     }
-  }, [fetchedOrderData, staticDataLoading]);
+  }, [fetchedOrderData, returnDataLoad]);
+
+  useEffect(() => {
+    setLoading(returnDataLoad);
+
+    if (fetchedOrderData && fetchedOrderData?.data && locationData) {
+      const updatedReturnData = fetchedOrderData.data.map(returnItem => {
+        const matchingLocation = locationData.find(
+          (location: any) => location?.token === returnItem?.return_location
+        );
+        return {
+          ...returnItem,
+          new_location: matchingLocation
+            ? matchingLocation.location_name
+            : null,
+        };
+      });
+
+      setReturnData(updatedReturnData);
+    }
+  }, [fetchedOrderData, returnDataLoad, locationData]);
 
   const handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
@@ -78,23 +101,27 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
           id: loc.id,
           return_locations: loc?.return_locations,
           return_location: loc?.return_location,
-          products: loc.id,
+          products: loc?.legacy_product_id,
           order_product_return_action: loc?.order_product_return_action,
-          return_location_token: loc?.return_locations?.token,
+          return_location_token: loc?.return_location,
+          new_location: loc?.new_location,
         }))
       );
       setNewPayload(
         returnData?.map((loc: any) => ({
           id: loc.id,
           account_number: createReturn?.account_number,
-          customer_id: createReturn?.customer_id,
-          products: loc.id,
-          return_action: loc?.order_product_return_action?.type || null,
-          return_location_token: loc?.return_locations?.token,
+          customer_id: +createReturn?.customer_id,
+          products: [loc?.legacy_product_id],
+          return_action: [loc?.order_product_return_action?.type] || null,
+          return_location_token: loc?.return_location || null,
+          new_location: loc?.new_location,
         }))
       );
     } else {
       setSelectedReturnOrder([]);
+      setNewPayload([]);
+      setGrouped([]);
     }
   };
 
@@ -102,13 +129,17 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     id: any,
     return_location: any,
     return_locations: any,
-    order_product_return_action: any
+    order_product_return_action: any,
+    new_location: any,
+    legacy_product_id: any
   ) => {
     setSelectedReturnOrder((prevSelectedLocations: any) => {
       const isSelected = prevSelectedLocations?.some(
         (loc: any) => loc.id === id
       );
 
+      console.log(new_location, 'new_location');
+
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id
@@ -116,9 +147,10 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
 
         setReturnPayload(prevState => ({
           ...prevState,
-          products: id,
+          products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          return_location_token: return_location || null,
+          new_location: new_location,
         }));
 
         setNewPayload((prevPayload: any) =>
@@ -130,19 +162,20 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
         const newReturnPayload = {
           id,
           account_number: createReturn?.account_number,
-          customer_id: createReturn?.customer_id,
-          products: id,
-          return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          customer_id: +createReturn?.customer_id,
+          products: [legacy_product_id],
+          return_action: [order_product_return_action?.type] || null,
+          return_location_token: return_location || null,
         };
 
         setNewPayload((prevPayload: any) => [...prevPayload, newReturnPayload]);
 
         setReturnPayload(prevState => ({
           ...prevState,
-          products: id,
+          products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          return_location_token: return_location || null,
+          new_location: new_location,
         }));
 
         return [
@@ -152,6 +185,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
             return_location,
             return_locations,
             order_product_return_action,
+            new_location,
           },
         ];
       }
@@ -217,7 +251,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
             </tr>
           </thead>
           <tbody>
-            {loadingskeleton ? (
+            {load ? (
               <tr>
                 <td colSpan={6}>
                   <Skeleton active />
@@ -237,6 +271,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                 <tr key={item.id}>
                   <td>
                     <Checkbox
+                      className="custom-check"
                       checked={selectedReturnOrder?.some(
                         (selectedInvoice: any) =>
                           selectedInvoice?.id === item.id
@@ -246,19 +281,24 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           item.id,
                           item.return_location,
                           item.return_locations,
-                          item.order_product_return_action
+                          item.order_product_return_action,
+                          item.new_location,
+                          item.legacy_product_id
                         )
                       }
                     />
                   </td>
 
                   <td>
-                    {item?.orders_products_stock?.location ? null : (
-                      <div className="awaiting">Awating</div>
+                    {item?.orders_products_stock?.location !== null &&
+                    item?.orders_products_stock?.location !== undefined ? (
+                      item.orders_products_stock.location
+                    ) : (
+                      <div className="awaiting">Awaiting</div>
                     )}
                   </td>
 
-                  <td> {displayValueOrNA(item?.return_location)}</td>
+                  <td> {displayValueOrNA(item?.new_location)}</td>
 
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -286,7 +326,11 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                   <td>{displayValueOrNA(item?.weight)}KG</td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
-                  <td>N/A</td>
+                  <td>
+                    {displayValueOrNA(
+                      item?.order_product_returns?.collected_at
+                    )}
+                  </td>
                   <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
                   <td>
                     <ul className="actionbox">
@@ -302,7 +346,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           <DownIcon />
                           {printToogle == index && (
                             <div ref={dropdownRef}>
-                              <PrintDropDown />
+                              <PrintDropDownReturn />
                             </div>
                           )}
                         </li>

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

@@ -245,6 +245,9 @@ export const StyledTable = styled.table`
           width: fit-content;
         }
       }
+      .custom-check {
+        position: relative;
+      }
       .emailInvoiceNo {
         padding-left: 0px;
       }
@@ -510,9 +513,9 @@ export const StyledTable = styled.table`
 // Styled components
 export const StyledTableWrapper = styled.div`
   overflow-x: auto;
-  max-height: calc(100vh - 396px);
+  max-height: 300px;
   scrollbar-width: none;
-  height: 600px;
+  /* height: 600px; */
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
   &::-webkit-scrollbar {
     width: 5px;

package/src/components/order-daily-overview/table/table-data/styles.ts

@@ -45,7 +45,7 @@ export const StyledTableWrapper = styled.div`
 export const StyledTable = styled.table`
   border-spacing: 0 10px;
   width: 100%;
-  min-width: 1600px;
+  /* min-width: 1600px; */
   thead {
     tr {
       border-radius: 40px;

package/src/components/order-daily-overview/table-view/Pagination.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import {
   StyledContainer,
   StyledContentWrapper,
+  // StyledDropdown,
   StyledInfoBox,
   StyledLabel,
   StyledPaginationItem,
   StyledPaginationWrapper,
+  // StyledDropdownData,
 } from './PaginationStyle';
 import PrevIcon from '../../../assets/icons/PrevIcon';
 import NextIcon from '../../../assets/icons/NextIcon';
 import { useAtom } from 'jotai';
-import { filtersReducerAtom } from '../store/filterStore';
 import { Select } from 'antd';
+import { filtersReducerAtom } from '../return-after-table/table-filters/ReturnFilterStore';
 
 const PAGE_SIZE_OPTIONS = [50, 100, 150];
 const MAX_PAGES_TO_SHOW = 5;
@@ -46,18 +48,17 @@ const Pagination: React.FC<any> = ({
       type: 'SET_PERPAGE',
       payload: newItemsPerPage,
     });
-  
+
     // Reset to the first page
     dispatch({
       type: 'SET_PAGE',
       payload: 1,
     });
-  
+
     onPageChange(1);
     onItemsPerPageChange(newItemsPerPage);
   };
 
-
   const getPageNumbers = (
     currentPage: number,
     totalPages: number
@@ -96,16 +97,16 @@ const Pagination: React.FC<any> = ({
         </StyledInfoBox>
         <StyledLabel>Row on Page</StyledLabel>
         <Select
-  value={itemsPerPage}
-  onChange={handleItemsPerPageChange}
-  style={{ width: 75 }} 
->
-  {PAGE_SIZE_OPTIONS.map(option => (
-    <Select.Option key={option} value={option}>
-      {option}
-    </Select.Option>
-  ))}
-</Select>
+          value={itemsPerPage}
+          onChange={handleItemsPerPageChange}
+          style={{ width: 75 }}
+        >
+          {PAGE_SIZE_OPTIONS.map(option => (
+            <Select.Option key={option} value={option}>
+              {option}
+            </Select.Option>
+          ))}
+        </Select>
         <StyledPaginationWrapper>
           <StyledPaginationItem
             onClick={() => handlePageChange(currentPage - 1)}

package/src/components/order-view/DynamicTable.tsx

@@ -26,9 +26,18 @@ function DynamicTable({ columns, data }: DynamicTableProps) {
 
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
-  const smallColumns = ['types','sources', 'event', 'code', 'type', 'route', 'category','action'];
+  const smallColumns = [
+    'types',
+    'sources',
+    'event',
+    'code',
+    'type',
+    'route',
+    'category',
+    'action',
+  ];
   const mediumColumns = ['date'];
-  const largeColumns = [ 'reference','notes','details','datetime'];
+  const largeColumns = ['reference', 'notes', 'details', 'datetime'];
 
   return (
     <MainContainer>
@@ -152,7 +161,7 @@ const TableHeadData = styled.th`
 
 const TableData = styled.td`
   border-spacing: 0px;
-  padding: 20px;
+  padding: 13px;
   font-family: 'Lato', sans-serif;
   font-size: 13px;
   font-weight: 400;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/{PrintDropDown.tsx → PrintDropDownReturn.tsx}

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import { PrintIconMap } from '../../../../order-daily-overview/shared/utlis';
 import { PrintData } from '../../../../order-daily-overview/shared/interface';
-import { optionsPrint } from '../../../../order-daily-overview/common/fakedata';
+import { optionsForReturnPrint } from '../../../../order-daily-overview/common/fakedata';
 // import { PrintIconMap } from '../utils';
 // import { optionsPrint } from '../fakeData';
 // import { PrintData } from '../interface';
 
-const options: PrintData[] = optionsPrint;
+const options: PrintData[] = optionsForReturnPrint;
 
-const PrintDropDown = () => {
+const PrintDropDownReturn = () => {
   const downloadFiles = () => {};
   return (
     <OptionsList>
@@ -26,7 +26,7 @@ const PrintDropDown = () => {
   );
 };
 
-export default PrintDropDown;
+export default PrintDropDownReturn;
 
 export const OptionsList = styled.ul`
   margin: 0;

package/src/components/order-view/flags-action-modal/Actions.tsx

@@ -27,10 +27,9 @@ function ActionSection() {
   const onSubmit = async () => {
     setLoading(true);
     await updateFlag([payload]);
-    await fetchData();
-    //modal close
     setCurrentAction(undefined);
     setLoading(false);
+    await fetchData();
   };
 
   const onCancel = () => {