@bjsdistribution/dms-client-return 0.0.3 → 0.0.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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.0.94",
+    "@bjsdistribution/dms-component-library": "^0.1.3",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/common/expand-collapse/index.tsx

@@ -84,9 +84,9 @@ const IconContainer = styled.div<{ isExpanded: boolean }>`
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  width: 25px;
-  height: 25px;
-  padding: 2px;
+  width: 20px;
+  height: 20px;
+  padding: 0px;
   border-radius: 3px;
   background: #ffffff;
   box-shadow: 0px 1px 2px 0px #1018280d;

package/src/components/fakeData.ts

@@ -32,7 +32,6 @@ export const obtainProductMethodData = [
     value: 'full_stock_control',
   },
 ];
-
 export const options = [
   {
     label: 'Task',
@@ -47,7 +46,7 @@ export const options = [
     selectedFontColor: '#3a3630',
   },
 ];
-export const ReturnData =[
+export const ReturnData = [
   {
     label: 'Return1',
     value: 'return1',
@@ -60,8 +59,8 @@ export const ReturnData =[
     label: 'Return3',
     value: 'return3',
   },
-]
-export const CollectionData =[
+];
+export const CollectionData = [
   {
     label: 'Test1',
     value: 'test1',
@@ -74,9 +73,8 @@ export const CollectionData =[
     label: 'Test3',
     value: 'test3',
   },
-]
-
-export const UnReceivedata =[
+];
+export const UnReceivedata = [
   {
     label: 'Test1',
     value: 'test1',
@@ -89,7 +87,7 @@ export const UnReceivedata =[
     label: 'Test3',
     value: 'test3',
   },
-]
+];
 export const ProductType = [
   {
     label: 'Delivery',
@@ -102,8 +100,8 @@ export const ProductType = [
   {
     label: 'Collection',
     value: 'collection',
-  },]
-
+  },
+];
 export const TaskType = [
   {
     label: 'Client',
@@ -150,7 +148,6 @@ export const TaskType = [
     value: 'driver-compliance',
   },
 ];
-
 export const CustomOptions = [
   {
     label: 'Private',
@@ -161,7 +158,6 @@ export const CustomOptions = [
     value: 'public',
   },
 ];
-
 export const DefectConfirm = [
   {
     label: 'Yes',
@@ -172,7 +168,6 @@ export const DefectConfirm = [
     value: 'no',
   },
 ];
-
 export const TomTomColumns = [
   {
     header: 'Event Date',
@@ -191,34 +186,34 @@ export const TomTomColumns = [
     accessorKey: 'type',
   },
 ];
-
 export const orderResources = [
   {
     types: 'Workflow',
     category: 'ePOD',
     datetimes: '2024-06-01 10:30:30',
     action: 'action',
-    reference: 'Success Note'
+    reference: 'Success Note',
   },
   {
     types: 'Workflow',
     category: 'ePOD',
     datetimes: '2024-06-01 10:30:30',
     action: 'action',
-    reference: 'Success Note'
+    reference: 'Success Note',
   },
   {
     types: 'Workflow',
     category: 'ePOD',
     datetimes: '2024-06-01 10:30:30',
     action: 'action',
-    reference: 'Success Note'
-  },{
+    reference: 'Success Note',
+  },
+  {
     types: 'Workflow',
     category: 'ePOD',
     datetimes: '2024-06-01 10:30:30',
     action: 'action',
-    reference: 'Success Note'
+    reference: 'Success Note',
   },
 ];
 export const orderResourcesColumns = [
@@ -243,7 +238,6 @@ export const orderResourcesColumns = [
     accessorKey: 'action',
   },
 ];
-
 export const tomtomResources = [
   {
     route: 'Hammer',
@@ -264,7 +258,6 @@ export const tomtomResources = [
     type: 'workFlow',
   },
 ];
-
 export const toolboxResources = [
   {
     resources: 'Hammer',
@@ -303,7 +296,6 @@ export const toolboxColumns = [
     accessorKey: 'action',
   },
 ];
-
 export const SystemEventColumns = [
   {
     header: 'Date',
@@ -322,7 +314,6 @@ export const SystemEventColumns = [
     accessorKey: 'code',
   },
 ];
-
 export const systemLgsEvents = [
   {
     event: 'Order cretaed via Api',

package/src/components/order-daily-overview/filters/Filters.tsx

@@ -6,7 +6,7 @@ import {
 } from './FilterStyle';
 import BulkFilter from './BulkFilter';
 import { TableRowType } from '../shared/interface';
-import { filtersReducerAtom } from '../header-filters/filterStore';
+// import { filtersReducerAtom } from '../header-filters/filterStore';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 
 import {
@@ -14,16 +14,16 @@ import {
   useCountData,
   useRoutesTable,
 } from '../store/store';
-import { useAtom } from 'jotai';
+// import { useAtom } from 'jotai';
 
 const Filters = () => {
   const [, setData] = useRoutesTable();
-  const [state] = useAtom(filtersReducerAtom);
+  // const [state] = useAtom(filtersReducerAtom);
   const [, setPaginationObject] = UsePaginationData();
   const [, setCount] = useCountData();
 
   // Hooks
-  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  // const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const {
     data: fetchedData,
     loading: apiLoading,
@@ -33,8 +33,8 @@ const Filters = () => {
   }>({
     endpoint: 'orders/',
     method: 'GET',
-    pagination: pagination,
-    filters: filters,
+    // pagination: pagination,
+    // filters: filters,
   });
 
   useEffect(() => {

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

@@ -37,7 +37,7 @@ function SelectionFilter() {
   ] = useSelectedLocation();
   const [selectedClientId, setSelectedClient] = useSelectedClient();
   const [, setClientLabel] = useTableName();
-  const [name, setName] = useState<string>();
+  const [, setName] = useState<any>();
   const [isButtonEnabled, setIsButtonEnabled] = useState(false);
 
   //client options
@@ -69,7 +69,7 @@ function SelectionFilter() {
     setSelectedClient(selectedValue);
     setName(selectedLabel);
     localStorage.setItem('clientName', selectedLabel);
-
+    localStorage.setItem('clientId', selectedValue.toString());
     const filteredSubLocations = locationData
       ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
       .map((subCat: any) => ({
@@ -135,8 +135,18 @@ function SelectionFilter() {
   };
 
   const storedName = localStorage.getItem('clientName');
+  const storedClientId = localStorage.getItem('clientId');
+
   useEffect(() => {
-    if (selectedClientId || selectedFilterValue || selectedLocationValue) {
+    if (storedClientId) {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: storedClientId,
+      });
+    }
+  }, [storedClientId]);
+  useEffect(() => {
+    if (storedName || selectedFilterValue || selectedLocationValue) {
       setIsButtonEnabled(true);
     } else {
       setIsButtonEnabled(false);
@@ -144,7 +154,6 @@ function SelectionFilter() {
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
   console.log('check', storedName, selectedFilterValue, selectedLocationValue);
-
   return (
     <Wrapper>
       <FilterRow>
@@ -156,8 +165,7 @@ function SelectionFilter() {
               placeholder="Select Client Name"
               onChange={handleSelectChange}
               style={{ minWidth: '14vw' }}
-              allowClear
-              value={name}
+              value={storedName}
             />
           </FilterColumn>
 
@@ -186,6 +194,7 @@ function SelectionFilter() {
               onChange={handleLocationChange}
               style={{ minWidth: '14vw' }}
               allowClear
+              mode="multiple"
             />
           </FilterColumn>
         </LeftColumn>

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

@@ -201,6 +201,7 @@ export const ApplyButton = styled.button`
   background: transparent;
   color: #3a3620;
   border: 1px solid #3a3630;
+  cursor: pointer;
 
   &:not(:disabled):hover {
     background: #feba30;

package/src/components/order-daily-overview/header-filters/filterStore.ts

@@ -104,7 +104,7 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
           ...state['x-filters'].filter(f => f.field !== 'return_location'),
           {
             field: 'return_location',
-            op: '=',
+            op: 'in',
             value: action.payload,
           },
         ],

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

@@ -1,26 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
-  UsePaginationData,
-  useItemsPerPage,
+  // UsePaginationData,
+  // useItemsPerPage,
   useLoading,
+  // useSelectedAction,
+  // useSelectedLocation,
   useTableName,
 } from './store/store';
 import Filters from './filters/Filters';
 // import TableComponent from '../../components/order-daily-overview/table-view/table/Table';
 // import TableComponent from '../../components/order-daily-overview/Cards/CardsTable'
-import Pagination from './table-view/Pagination';
+// import Pagination from './table-view/Pagination';
 import styled from 'styled-components';
 import RouterHeader from './header/route-header/RouterHeader';
 // import Loader from './header/loader/Loader';
 import { useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
-import ReturnTable from './table/ReturnTable';
+// import ReturnTable from './table/ReturnTable';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { useClientData } from '../order-view/store';
 import { ClientData } from './common/interface';
-import ReturnOrderTable from './return-order-table/return-orders-filters/ReturnOrderTable';
+// import ReturnOrderTable from './return-order-table/return-orders-filters/ReturnOrderTable';
 import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
 import { Text } from './filters/FilterStyle';
+import ReturnTable from './table/ReturnTable';
 // import Loader from '../loader/Loader';
 
 // interface ApiResponse {
@@ -32,22 +35,24 @@ import { Text } from './filters/FilterStyle';
 // }
 
 function ReturnMainTable() {
-  const [paginationObj] = UsePaginationData();
-  const [, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
-  const [selectedClient] = useTableName();
+  // const [paginationObj] = UsePaginationData();
+  // const [, setCurrentPage] = useState(1);
+  // const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
 
-  const { page, total } = paginationObj;
+  // const { page, total } = paginationObj;
 
-  const [isScrolled] = useStickyStatus();
-  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 [selectedClient] = useTableName();
+
+  const [isScrolled] = useStickyStatus();
+
   const [, setLoading] = useLoading();
   const [, setClientData] = useClientData();
 
@@ -64,12 +69,6 @@ function ReturnMainTable() {
     if (fetchedClientData && fetchedClientData.data) {
       const result = fetchedClientData?.data;
       setClientData(result);
-
-      // Flatten the nested objects into an array
-
-      // const data = Object.values(fetchedClientData.data);
-      // console.log('data', data);
-      // setClientData(data);
     }
   }, [staticDataLoading]);
 
@@ -79,12 +78,14 @@ function ReturnMainTable() {
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <Row>
-            <Text> {selectedClient ? selectedClient : 'Client Return'}</Text>
-            {selectedClient ? <ReturnFilter /> : <Filters />}
-          </Row>
-          {selectedClient ? <ReturnOrderTable /> : <ReturnTable />}
-          {total > 0 && (
+          <Container>
+            <Row>
+              <Text>Client Return</Text>
+              {selectedClient ? <ReturnFilter /> : <Filters />}
+            </Row>
+            <ReturnTable />
+          </Container>
+          {/* {total > 0 && (
             <Pagination
               currentPage={page}
               totalItems={total}
@@ -92,7 +93,7 @@ function ReturnMainTable() {
               onPageChange={handlePageChange}
               onItemsPerPageChange={handleItemsPerPageChange}
             ></Pagination>
-          )}
+          )} */}
         </div>
       </DashBoardWrapper>
     </>
@@ -106,7 +107,10 @@ const Row = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
-
+const Container = styled.div`
+  position: relative;
+  top: -46px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;

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

@@ -35,14 +35,19 @@ const ReturnAfterTable = () => {
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <ReturnOrderFilter />
-          <OrderTable />
+          <Container>
+            <ReturnOrderFilter />
+            <OrderTable />
+          </Container>
         </div>
       </DashBoardWrapper>
     </div>
   );
 };
-
+const Container = styled.div`
+  position: relative;
+  top: -30px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;

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

@@ -7,7 +7,7 @@ import { Empty } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
 import { useSelectedOrders } from '../../../store';
-import { useReturnAfterOrderData } from '../../../order-view/store';
+import { useOrderId, useReturnAfterOrderData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../../assets/icons/DownIcon';
@@ -19,6 +19,8 @@ import {
 import LoadIcon from '../../../../assets/icons/LoadIcon';
 import { usePrintOptionTOggle } from '../../store/store';
 import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
+import { NavLink } from 'react-router-dom';
+import { formatDate } from '../../shared/utlis';
 
 const OrderTable = ({ loadingskeleton }: any) => {
   const [selectedOrders, setSelectedReturnOrder] = useSelectedOrders();
@@ -107,6 +109,8 @@ const OrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
+  const [id, setOrderId] = useOrderId();
+  console.log(id, 'idid');
   return (
     <>
       <StyledTableWrapper id="tableScrolling">
@@ -134,14 +138,14 @@ const OrderTable = ({ loadingskeleton }: any) => {
           <tbody>
             {loadingskeleton ? (
               <tr>
-                <td colSpan={6}>
+                <td colSpan={16}>
                   <Skeleton active />
                 </td>
-                <td colSpan={6}></td>
+                <td colSpan={16}></td>
               </tr>
             ) : returnAfterOrder?.length === 0 ? (
               <tr>
-                <td colSpan={7}>
+                <td colSpan={16}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>
@@ -170,10 +174,11 @@ const OrderTable = ({ loadingskeleton }: any) => {
                         onChange={() => handleSelectInvoice(item.id)}
                       />
                     </td>
-                    <td>{displayValueOrNA(item?.created_at)}</td>
+                    <td>{formatDate(new Date(item?.created_at))}</td>
                     <td>{displayValueOrNA(item?.return_locations)}</td>
                     <td>{displayValueOrNA(item?.pick_up_location)}</td>
-                    <td>
+
+                    <td onClick={() => setOrderId(item.id)}>
                       <ul style={{ listStyleType: 'none', padding: 0 }}>
                         <li
                           style={{
@@ -182,24 +187,24 @@ const OrderTable = ({ loadingskeleton }: any) => {
                             paddingLeft: 0,
                           }}
                         >
-                          {displayValueOrNA(
-                            item?.order_recipient?.recipient_name
-                          )}
+                          <NavLink to={`${item.id}`}>
+                            {displayValueOrNA(
+                              item?.order_recipient?.recipient_name
+                            )}
+                          </NavLink>
                         </li>
                         <li style={{ color: '#888075' }}>
                           {displayValueOrNA(item?.order_recipient?.postcode)}
                         </li>
                       </ul>
                     </td>
+
                     <td>
                       {displayValueOrNA(item?.customer_data?.customer_name)}
                     </td>
 
                     <td>{displayValueOrNA(item?.consignment)}</td>
-                    <td>
-                      {/* {displayValueOrNA(item?.created_at)} */}
-                      N/A
-                    </td>
+                    <td>{displayValueOrNA(item?.order_number)}</td>
 
                     <td>{displayValueOrNA(item?.box_count)}</td>
                     <td>{displayValueOrNA(item?.weight)}KG</td>
@@ -209,7 +214,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                         options={assigneOptions}
                         placeholder="Select"
                         onChange={() => {}}
-                        // defaultValue={item?.customer_name || ''}
+                        // defaultValue={item?.assign || ''}
                         style={defaultSelectStyle}
                         disabled={false}
                         // onSearch={handleSearch}
@@ -240,12 +245,13 @@ const OrderTable = ({ loadingskeleton }: any) => {
                           >
                             <PrinterIcon />
                             <DownIcon />
+
+                            {printToogle == index && (
+                              <div ref={dropdownRef}>
+                                <PrintDropDown />
+                              </div>
+                            )}
                           </li>
-                          {printToogle == index && (
-                            <div ref={dropdownRef}>
-                              <PrintDropDown />
-                            </div>
-                          )}
                         </CustomDrop>
                         <li className="downloadcontainer">
                           <LoadIcon />

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   LeftSideConatiner,
   StyledFIlterELements,
@@ -17,13 +17,9 @@ import {
   usePrevOrderDetails,
 } from '../../../order-view/store';
 import dayjs from 'dayjs';
+import styled from 'styled-components';
 
 const ReturnOrderFilter = () => {
-  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
-
-  const handleDateIconClick = () => {
-    setDatePickerVisible(prevState => !prevState);
-  };
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails] = usePrevOrderDetails();
 
@@ -79,29 +75,28 @@ const ReturnOrderFilter = () => {
               <div className="textcont">Filters</div>
             </div>
             <div className="datefilter">
-              <div className="dateiconcontainer" onClick={handleDateIconClick}>
+              <div className="dateiconcontainer">
                 <DateIcon />
               </div>
-              <div className="datetext">Date</div>
-              {isDatePickerVisible && (
+              <StyledDatePicker>
                 <DatePicker
+                  className="custom-datepicker"
                   onChange={onChange}
                   value={actionDate === null ? actionDate : dayjs(actionDate)}
                   format="DD/MM/YY"
+                  placeholder="Date"
                 />
-              )}
-              <div className="roundbox">
-                <DownArrowIcon />
-              </div>
+              </StyledDatePicker>
             </div>
 
             <div className="datefilter">
               <div className="dateiconcontainer">
-                <StatusIcon />
+                {' '}
+                <StatusIcon />{' '}
               </div>
               <div className="datetext">Status of Order</div>
               <div className="roundbox">
-                <DownArrowIcon />
+                <DownArrowIcon />{' '}
               </div>
             </div>
             <div className="datefilter">
@@ -130,4 +125,11 @@ const ReturnOrderFilter = () => {
   );
 };
 
+const StyledDatePicker = styled.div`
+  .custom-datepicker {
+    border: none;
+    width: 80px;
+  }
+`;
+
 export default ReturnOrderFilter;

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

@@ -5,6 +5,7 @@ import HeaderFilter from '../header-filters/HeaderFilter';
 
 import ReturnFilter from './return-orders-filters/ReturnFilter';
 import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
+import ModalManager from '../../order-view/modalsPopup/ModalManager';
 
 const ReturnTable = () => {
   return (
@@ -13,14 +14,20 @@ const ReturnTable = () => {
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <ReturnFilter />
-          <ReturnOrderTable />
+          <Container>
+            <ReturnFilter />
+            <ReturnOrderTable />
+          </Container>
         </div>
       </DashBoardWrapper>
+      <ModalManager />
     </div>
   );
 };
-
+const Container = styled.div`
+  position: relative;
+  top: -46px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;