@bjsdistribution/dms-client-return 0.0.18 → 0.0.20

package/package.json

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

package/src/assets/icons/DustbinIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const DustbinIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+    >
+      <path
+        d="M6.76699 11L8.50033 9.26667L10.2337 11L11.167 10.0667L9.43366 8.33333L11.167 6.6L10.2337 5.66667L8.50033 7.4L6.76699 5.66667L5.83366 6.6L7.56699 8.33333L5.83366 10.0667L6.76699 11ZM5.16699 14C4.80033 14 4.48655 13.8696 4.22566 13.6087C3.96477 13.3478 3.8341 13.0338 3.83366 12.6667V4H3.16699V2.66667H6.50033V2H10.5003V2.66667H13.8337V4H13.167V12.6667C13.167 13.0333 13.0365 13.3473 12.7757 13.6087C12.5148 13.87 12.2008 14.0004 11.8337 14H5.16699ZM11.8337 4H5.16699V12.6667H11.8337V4Z"
+        fill="#E95252"
+      />
+    </svg>
+  );
+};
+
+export default DustbinIcon;

package/src/common/modals/order-action-modal/OrderActionModal.tsx

@@ -14,7 +14,7 @@ interface ActionModalProps {
   children: React.ReactNode;
   onCloseHeader: () => void;
   onSubmit: () => void;
-  isSubmitDisabled?: boolean; 
+  isSubmitDisabled?: boolean;
 }
 
 function OrderActionModal(props: ActionModalProps) {
@@ -48,10 +48,12 @@ const MainContainer = styled.div`
   box-shadow: 0px 20px 24px -4px #10182814;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  /* gap: 15px; */
   align-items: center;
   justify-content: space-between;
   overflow-x: hidden;
+  max-width: 75vw;
+  min-width: 30vw;
 `;
 
 export default OrderActionModal;

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

@@ -24,20 +24,8 @@ interface FilterState {
 }
 // let todayDate = new Date();
 const initialState: FilterState = {
-  'x-filters': [
-    // {
-    //   field: 'action_date',
-    //   op: '>=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
-    // },
-    // {
-    //   field: 'action_date',
-    //   op: '<=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
-    // },
-    // { field: 'status', op: 'count', value: '' },
-  ],
-  'x-pagination': { page: 1, per_page: 50 },
+  'x-filters': [],
+  'x-pagination': { page: 1, per_page: 5 },
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
@@ -110,6 +98,23 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
+    case 'CLEAR_LOC':
+      return {
+        ...state,
+        'x-filters': state['x-filters'].filter(
+          f => f.field !== 'return_location'
+        ),
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+
+    case 'CLEAR_ALL_FILTER':
+      return {
+        ...state,
+      };
+
     case 'SET_PAGE':
       return {
         ...state,
@@ -127,10 +132,6 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
           per_page: action.payload,
         },
       };
-    case 'CLEAR_FILTERS':
-      return {
-        ...state,
-      };
     default:
       return state;
   }

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

@@ -0,0 +1,80 @@
+import { atom, useAtom } from 'jotai';
+
+const date = atom(new Date());
+export const usedate = () => {
+  return useAtom(date);
+};
+
+interface Filter {
+  field: string;
+  op: string;
+  value: any;
+}
+
+interface Pagination {
+  page: number;
+  per_page: number;
+}
+
+interface FilterState {
+  'x-filters': Filter[];
+  'x-pagination': Pagination;
+}
+// let todayDate = new Date();
+const initialState: FilterState = {
+  'x-filters': [
+    // {
+    //   field: 'action_date',
+    //   op: '>=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
+    // },
+    // {
+    //   field: 'action_date',
+    //   op: '<=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
+    // },
+    // { field: 'status', op: 'count', value: '' },
+  ],
+  'x-pagination': { page: 1, per_page: 50 },
+};
+
+const filterReducer = (state: FilterState, action: any): FilterState => {
+  switch (action.type) {
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+
+    case 'CLEAR_ALL_FILTER':
+      return {
+        ...state,
+      };
+    default:
+      return state;
+  }
+};
+
+const filtersStateAtom = atom(initialState);
+
+export const overviewfiltersReducerAtom = atom(
+  get => get(filtersStateAtom),
+  (get, set, action) =>
+    set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))
+);

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

@@ -1,45 +1,35 @@
 import React, { useEffect } from 'react';
 import {
-  // UsePaginationData,
-  // useItemsPerPage,
+  //useItemsPerPage,
   useLoading,
-  // useSelectedAction,
-  // useSelectedLocation,
+  //UsePaginationData,
   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 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 { useApiHook } from '@bjsdistribution/dms-component-library';
-import { useClientData } from '../order-view/store';
+import { useAtom, useClientData } from '../order-view/store';
 import { ClientData } from './common/interface';
-// 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 {
-//   message: string;
-//   code: number;
-//   error: string | null;
-//   error_traceback: string | null;
-//   data: [];
-// }
+// import Pagination from './table-view/Pagination';
+import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
 
 function ReturnMainTable() {
+  const [state] = useAtom(overviewfiltersReducerAtom);
   // const [paginationObj] = UsePaginationData();
   // const [, setCurrentPage] = useState(1);
   // const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
-
+  const { 'x-pagination': pagination } = state;
   // const { page, total } = paginationObj;
+  const [selectedClient] = useTableName();
+  // const [, setPaginationObject] = UsePaginationData();
+  const [isScrolled] = useStickyStatus();
+  const [, setLoading] = useLoading();
+  const [, setClientData] = useClientData();
 
   // const handlePageChange = (page: number) => {
   //   setCurrentPage(page);
@@ -48,28 +38,32 @@ function ReturnMainTable() {
   //   setItemsPerPage(itemsPerPage);
   // };
 
-  ////
-  const [selectedClient] = useTableName();
-
-  const [isScrolled] = useStickyStatus();
-
-  const [, setLoading] = useLoading();
-  const [, setClientData] = useClientData();
-
-  const { data: fetchedClientData, loading: staticDataLoading } = useApiHook<{
+  const {
+    data: fetchedClientData,
+    loading: staticDataLoading,
+    // paginationData,
+  } = useApiHook<{
     data: ClientData[];
   }>({
     endpoint: `/return_orders/get/client-returns/`,
     method: 'GET',
-    pagination: { page: 1, per_page: 50 },
+    pagination: pagination,
   });
-  // console.log('fetchedClientData', fetchedClientData?.data);
 
   useEffect(() => {
     setLoading(staticDataLoading);
     if (fetchedClientData && fetchedClientData.data) {
       const result = fetchedClientData?.data;
       setClientData(result);
+      // if (paginationData !== null) {
+      //   const { count, ...rest } = JSON.parse(paginationData);
+      //   setPaginationObject(rest);
+      // } else {
+      //   notification.error({
+      //     message: 'Error',
+      //     description: 'Pagination data is null',
+      //   });
+      // }
     }
   }, [staticDataLoading]);
 

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

@@ -1,33 +1,66 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 // import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
 import OrderTable from './table/OrderTable';
 import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
 import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
-import { useLoading } from '../store/store';
+import {
+  useItemsPerReturnPage,
+  useLoading,
+  UsePaginationData,
+  UsePaginationReturnData,
+} from '../store/store';
 import { ApiResponse } from '../common/interface';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-import { filtersReducerAtom } from './table-filters/ReturnFilterStore';
+import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
+import { notification } from 'antd';
+import ReturnPagination from '../table-view/ReturnPagination';
 
 const ReturnAfterTable = () => {
   const [, setReturnOrderData] = useReturnAfterOrderData();
   const [, setLoading] = useLoading();
-  const [state] = useAtom(filtersReducerAtom);
-  const { 'x-filters': filters } = state;
+  const [state] = useAtom(filtersReducerReturnAtom);
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+
+  const [paginationObj] = UsePaginationReturnData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
+  const [, setPaginationObject] = UsePaginationData();
+
+  const { page, total } = paginationObj;
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
 
   const {
     data: fetchedReturnOrderData,
     loading: staticDataLoading,
+    paginationData,
   } = useApiHook<ApiResponse>({
     endpoint: '/return_orders/?skip_filters=0',
     method: 'GET',
     filters: filters,
+    pagination: pagination,
   });
+
   useEffect(() => {
     setLoading(staticDataLoading);
     if (fetchedReturnOrderData && fetchedReturnOrderData?.data) {
       setReturnOrderData(fetchedReturnOrderData?.data);
+      if (paginationData !== null) {
+        const { count, ...rest } = JSON.parse(paginationData);
+        setPaginationObject(rest);
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null',
+        });
+      }
     }
   }, [fetchedReturnOrderData, staticDataLoading]);
   return (
@@ -39,6 +72,15 @@ const ReturnAfterTable = () => {
           <Container>
             <ReturnOrderFilter />
             <OrderTable />
+            {total > 0 && (
+              <ReturnPagination
+                currentPage={page}
+                totalItems={total}
+                itemsPerPage={itemsPerPage}
+                onPageChange={handlePageChange}
+                onItemsPerPageChange={handleItemsPerPageChange}
+              ></ReturnPagination>
+            )}
           </Container>
         </div>
       </DashBoardWrapper>

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

@@ -77,7 +77,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
   //     }
   //   });
   // };
-  console.log('', returnAfterOrder);
+  // console.log('', returnAfterOrder);
 
   const assigneOptions = [
     {
@@ -168,7 +168,9 @@ const OrderTable = ({ loadingskeleton }: any) => {
                       />
                     </td>
                     <td>{formatDate(new Date(item?.created_at))}</td>
-                    <td>{displayValueOrNA(item?.return_locations)}</td>
+                    <td>
+                      {displayValueOrNA(item?.return_locations?.location_name)}
+                    </td>
                     <td>{displayValueOrNA(item?.pick_up_location)}</td>
 
                     <td onClick={() => setOrderId(item.id)}>
@@ -200,7 +202,10 @@ 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)}{' '}
+                      {item?.weight && item?.weight !== null ? 'KG' : ''}
+                    </td>
                     <td>{displayValueOrNA(item?.cube)}</td>
                     <td>
                       <AntSelect
@@ -209,8 +214,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                         onChange={() => {}}
                         // defaultValue={item?.assign || ''}
                         // style={defaultSelectStyle}
-                        // disabled={false}
-                        // onSearch={handleSearch}
+                        disabled // onSearch={handleSearch}
                         showSearch
                         popupClassName={defaultPopupClassName}
                         selectWrapperClass={defaultSelectWrapperClass}

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

@@ -113,7 +113,7 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
 
 const filtersStateAtom = atom(initialState);
 
-export const filtersReducerAtom = atom(
+export const filtersReducerReturnAtom = atom(
   get => get(filtersStateAtom),
   (get, set, action) =>
     set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))

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

@@ -13,7 +13,7 @@ import ClientIcon from '../../../../assets/icons/ClientIcon';
 import { DatePicker, Select } from 'antd';
 import { useAtom } from '../../../order-view/store';
 import styled from 'styled-components';
-import { filtersReducerAtom } from './ReturnFilterStore';
+import { filtersReducerReturnAtom } from './ReturnFilterStore';
 import dayjs from 'dayjs';
 import { useCustomerData, useStatusOrderData } from '../../../store';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
@@ -25,7 +25,7 @@ import {
 } from '../../table/table-data/styles';
 
 const ReturnOrderFilter = () => {
-  const [, dispatch] = useAtom(filtersReducerAtom);
+  const [, dispatch] = useAtom(filtersReducerReturnAtom);
   const [customers] = useCustomerData();
   const [selectedDate, setSelectedDate] = useState<any | null>();
   const [statusOfOrder] = useStatusOrderData();

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 // import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
@@ -6,8 +6,23 @@ 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';
+import { useItemsPerPage, UsePaginationData } from '../store/store';
+import Pagination from '../table-view/Pagination';
 
 const ReturnTable = () => {
+  const [paginationObj] = UsePaginationData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+
+  const { page, total } = paginationObj;
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+
   return (
     <div>
       <DashBoardWrapper>
@@ -17,6 +32,15 @@ const ReturnTable = () => {
           <Container>
             <ReturnFilter />
             <ReturnOrderTable />
+            {total > 0 && (
+              <Pagination
+                currentPage={page}
+                totalItems={total}
+                itemsPerPage={itemsPerPage}
+                onPageChange={handlePageChange}
+                onItemsPerPageChange={handleItemsPerPageChange}
+              ></Pagination>
+            )}
           </Container>
         </div>
       </DashBoardWrapper>

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

@@ -1,5 +1,5 @@
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
-import { Empty } from 'antd';
+import { Empty, notification } from 'antd';
 import { useAtom } from 'jotai';
 import React, { useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
@@ -11,12 +11,16 @@ import {
   useSelectAll,
   useSelectedOrders,
 } from '../../../store';
-import { useReturnData } from '../../../order-view/store';
+import { usefetchAgain, useReturnData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../../assets/icons/DownIcon';
-import { useLoading, usePrintOptionTOggle } from '../../store/store';
+import {
+  useLoading,
+  UsePaginationData,
+  usePrintOptionTOggle,
+} from '../../store/store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
 import { displayValueOrNA } from '../../shared/utlis';
@@ -37,7 +41,9 @@ const ReturnOrderTable = () => {
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
   const [locationData] = useLocationData();
-
+  const [, setPaginationObject] = UsePaginationData();
+  const [callForFetch] = usefetchAgain();
+  // console.log(callForFetch, 'callForFetchcallForFetchcallForFetchcallForFetch');
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
   };
@@ -58,25 +64,38 @@ const ReturnOrderTable = () => {
     }
   };
 
-  const { data: fetchedOrderData, loading: returnDataLoad } = useApiHook<
-    ApiResponse
-  >({
+  const {
+    data: fetchedOrderData,
+    loading: returnDataLoad,
+    paginationData,
+    setShouldPerformAction,
+  } = useApiHook<ApiResponse>({
     endpoint: '/return_order_products/',
     method: 'GET',
     filters: filters,
     pagination: pagination,
+    performAction: false,
   });
 
   useEffect(() => {
     setLoading(returnDataLoad);
     if (fetchedOrderData && fetchedOrderData?.data) {
       setReturnData(fetchedOrderData?.data);
+      if (paginationData !== null) {
+        const { count, ...rest } = JSON.parse(paginationData);
+        setPaginationObject(rest);
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null',
+        });
+      }
     }
   }, [fetchedOrderData, returnDataLoad]);
 
   useEffect(() => {
     setLoading(returnDataLoad);
-
+    setShouldPerformAction(true);
     if (fetchedOrderData && fetchedOrderData?.data && locationData) {
       const updatedReturnData = fetchedOrderData.data.map(returnItem => {
         const matchingLocation = locationData.find(
@@ -92,7 +111,8 @@ const ReturnOrderTable = () => {
 
       setReturnData(updatedReturnData);
     }
-  }, [fetchedOrderData, returnDataLoad, locationData]);
+    // setShouldPerformAction(false);
+  }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
 
   const handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
@@ -139,8 +159,6 @@ const ReturnOrderTable = () => {
         (loc: any) => loc.id === id
       );
 
-      console.log(new_location, 'new_location');
-
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id

package/src/components/order-daily-overview/store/store.ts

@@ -72,7 +72,7 @@ const atomPaginationData = atom<PaginationData>({
   total: 0,
   totalPages: 0,
 });
-
+//client filter
 export const UsePaginationData = () => {
   return useAtom(atomPaginationData);
 };
@@ -82,6 +82,16 @@ export const useItemsPerPage = () => {
   return useAtom(atomItemsPerPage);
 };
 
+//return after order
+export const UsePaginationReturnData = () => {
+  return useAtom(atomPaginationData);
+};
+
+const atomItemsPerReturnPage = atom<number>(50);
+export const useItemsPerReturnPage = () => {
+  return useAtom(atomItemsPerReturnPage);
+};
+
 const countStatus = atom<any>([]);
 export const useCountData = () => {
   return useAtom(countStatus);

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

@@ -13,9 +13,10 @@ import PrevIcon from '../../../assets/icons/PrevIcon';
 import NextIcon from '../../../assets/icons/NextIcon';
 import { useAtom } from 'jotai';
 import { Select } from 'antd';
-import { filtersReducerAtom } from '../return-after-table/table-filters/ReturnFilterStore';
+import { filtersReducerAtom } from '../header-filters/filterStore';
 
 const PAGE_SIZE_OPTIONS = [50, 100, 150];
+
 const MAX_PAGES_TO_SHOW = 5;
 
 const Pagination: React.FC<any> = ({