@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "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.87",
+    "@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/common/fakedata.tsx

@@ -94,12 +94,11 @@ export const TableData = [
 ];
 
 export const optionsPrint = [
-  // { icon: 'runSheet', label: 'Proof Of Delivery' },
-  // { icon: 'loadSheet', label: 'Proof Of Delivery (DOC)' },
-  { icon: 'deliveryLables', label: 'Order Delivery Labels' },
-  { icon: 'customerLables', label: 'Order Collection Labels' },
-  { icon: 'collectionLables', label: 'Order Return Labels' },
-  // { icon: 'collectionLables', label: 'Returns Cover Note' },
+  { icon: 'runSheet', label: 'Print Runsheet' },
+  { icon: 'loadSheet', label: 'Print Loadsheet' },
+  { icon: 'deliveryLables', label: 'Print Delivery Labels' },
+  { icon: 'customerLables', label: 'Print Customer Labels' },
+  { icon: 'collectionLables', label: 'Print Collection Labels' },
 ];
 
 export const Depots = [

package/src/components/order-daily-overview/common/interface.ts

@@ -1,98 +1,121 @@
 export interface TableColumn {
-    key: string;
-    label: string;
-    alwaysVisible?: boolean;
-  }
-  
-  export interface TableBodyItem {
-    startFinish: {
-      status: string;
-      startTime: string;
-      endTime: string;
-    };
-    routeDetails: {
-      name: string;
-      lockRoute: boolean;
-      overnight: boolean;
-    };
-    tomtom: {
-      id: string;
-      allEventCompleted: boolean;
-    };
-    vehicle: {
-      name: string;
-    };
-    driver: {
-      pdaId: string;
-      name: string;
-    };
-    mate: {
-      pdaId: string;
-      name: string;
-    };
-    asset: {
-      id: string;
-    };
-    orders: {
-      countOrdersInRoute: number;
-      collection: boolean;
-      assembly: boolean;
-    };
-    weight: {
-      totalWeight: string;
-      overweighted: string;
-      overweightedIcon: boolean;
-      heavyItems: boolean;
-    };
-    distance: {
-      totalDistance: number;
-    };
-    duration: {
-      totalDuration: string;
-    };
-    escalations: {
-      numberOfEscalations: number;
-    };
-    crewInstructions: {
-      deliveryTeamMessage: string;
-    };
-    action: {
-      print: boolean;
-      trackerPage: boolean;
-      deBriefing: boolean;
-    };
-  }
-  
-  export interface TableDataInterface {
-    tableHead: TableColumn[];
-    tableBody: TableBodyItem[];
-  }
-  export interface FilterRoute {
-    icon: string;
-    label: string;
-  }
-  
-  // types
-  
-  export type PrintData = {
-    icon: string;
-    label: string;
-  };
-  
-  //route details
-  export interface TableBodyVal {
-    created: {
-      auditid: string;
-      date: string;
-    };
-    notesDetails: {
-      info: string;
-      IP: string;
-    };
-  }
-  
-  export interface NotesDataInterface {
-    tableHead: TableColumn[];
-    tableBody: TableBodyVal[];
-  }
-  
+  key: string;
+  label: string;
+  alwaysVisible?: boolean;
+}
+
+export interface TableBodyItem {
+  startFinish: {
+    status: string;
+    startTime: string;
+    endTime: string;
+  };
+  routeDetails: {
+    name: string;
+    lockRoute: boolean;
+    overnight: boolean;
+  };
+  tomtom: {
+    id: string;
+    allEventCompleted: boolean;
+  };
+  vehicle: {
+    name: string;
+  };
+  driver: {
+    pdaId: string;
+    name: string;
+  };
+  mate: {
+    pdaId: string;
+    name: string;
+  };
+  asset: {
+    id: string;
+  };
+  orders: {
+    countOrdersInRoute: number;
+    collection: boolean;
+    assembly: boolean;
+  };
+  weight: {
+    totalWeight: string;
+    overweighted: string;
+    overweightedIcon: boolean;
+    heavyItems: boolean;
+  };
+  distance: {
+    totalDistance: number;
+  };
+  duration: {
+    totalDuration: string;
+  };
+  escalations: {
+    numberOfEscalations: number;
+  };
+  crewInstructions: {
+    deliveryTeamMessage: string;
+  };
+  action: {
+    print: boolean;
+    trackerPage: boolean;
+    deBriefing: boolean;
+  };
+}
+
+export interface TableDataInterface {
+  tableHead: TableColumn[];
+  tableBody: TableBodyItem[];
+}
+export interface FilterRoute {
+  icon: string;
+  label: string;
+}
+
+// types
+
+export type PrintData = {
+  icon: string;
+  label: string;
+};
+
+//route details
+export interface TableBodyVal {
+  created: {
+    auditid: string;
+    date: string;
+  };
+  notesDetails: {
+    info: string;
+    IP: string;
+  };
+}
+
+export interface NotesDataInterface {
+  tableHead: TableColumn[];
+  tableBody: TableBodyVal[];
+}
+
+export interface ClientData {
+  trading_as: string;
+  customer_name: string;
+  return_orders: number;
+  return_order_products: number;
+  DISPOSE: number;
+  'RE-DEL': number;
+  CLAIMS_PAID: number;
+  'RE-ALLOCATE': number;
+  RTS: number;
+  RECYCLE: number;
+  PENDING: number;
+  UNKNOWN: number;
+  [key: string]: any;
+}
+
+export interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: any[];
+}

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

@@ -3,13 +3,10 @@ import {
   StyledFIlterELements,
   StyledFiter,
   StyledTableFilter,
-  Text,
 } from './FilterStyle';
-
 import BulkFilter from './BulkFilter';
 import { TableRowType } from '../shared/interface';
-import { filtersReducerAtom } from '../store/filterStore';
-
+// import { filtersReducerAtom } from '../header-filters/filterStore';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 
 import {
@@ -17,19 +14,16 @@ import {
   useCountData,
   useRoutesTable,
 } from '../store/store';
-import { useAtom } from 'jotai';
+// import { useAtom } from 'jotai';
 
 const Filters = () => {
-  // const [apiData, setApiData] = useState<TableRowType[] | undefined>(undefined);
-  // Stats and variables
   const [, setData] = useRoutesTable();
-  // const [loading, setLoading] = useLoading();
-  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,
@@ -39,8 +33,8 @@ const Filters = () => {
   }>({
     endpoint: 'orders/',
     method: 'GET',
-    pagination: pagination,
-    filters: filters,
+    // pagination: pagination,
+    // filters: filters,
   });
 
   useEffect(() => {
@@ -67,7 +61,6 @@ const Filters = () => {
     <>
       <StyledFiter>
         <StyledFIlterELements>
-          <Text>Client Return</Text>
           <StyledTableFilter />
         </StyledFIlterELements>
         <BulkFilter />

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

@@ -1,79 +1,68 @@
-import React from 'react';
-// import styled from 'styled-components';
-// import { CoverPage, StatusPanel } from '../invoice-header/InvoiceStyles';
-
+import React, { useEffect } from 'react';
 import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
+import { ApiResponse } from '../../types';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { useActionType, useCustomerData, useLocationData } from '../../store';
 
 function HeaderFilter() {
+  const [, setCustomers] = useCustomerData();
+  const [, setActionType] = useActionType();
+  const [, setLocationData] = useLocationData();
+
+  //API for client data
+  const { data: fetchedCustomerData, loading: loading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: `/customers/`,
+    method: 'GET',
+    pagination: { page: 1, per_page: 50 },
+  });
+
+  //API for action type
+  const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: `/orders/getStaticData/all/`,
+    method: 'GET',
+    pagination: { page: 1, per_page: 50 },
+  });
+
+  //API for return locations
+  const { data: fetchedLocationData, loading: locationloading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: `/return_locations/`,
+    method: 'GET',
+    pagination: { page: 1, per_page: 50 },
+  });
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading, fetchedCustomerData]);
 
+  useEffect(() => {
+    if (fetchedStaticData && fetchedStaticData?.data) {
+      setActionType(
+        fetchedStaticData?.data?.flatMap(
+          (i: any) => i.order_contact_action_type
+        )
+      );
+    }
+  }, [actionLoading, fetchedStaticData]);
+
+  useEffect(() => {
+    if (fetchedLocationData && fetchedLocationData?.data) {
+      setLocationData(fetchedLocationData?.data);
+    }
+  }, [locationloading, fetchedLocationData]);
 
   return (
     <CoverPage>
-     
-        <SelectionFilter />
+      <SelectionFilter />
     </CoverPage>
   );
 }
-
-// const Row = styled.div`
-//   display: flex;
-//   flex-direction: row;
-//   gap: 15px;
-//   align-items: center;
-// `;
-
-// const ExportButton = styled.button`
-//   display: flex;
-//   align-items: center;
-//   background-color: #f0f2f2;
-//   border-radius: 25px;
-//   border: 1px solid #cdcdcd !important;
-//   color: #3a3630;
-//   padding: 4px 10px;
-//   gap: 8px;
-//   height: 34px;
-
-//   > svg {
-//     height: 20px;
-//     width: 20px;
-//   }
-// `;
-// const FilterList = styled.li`
-//   color: #6a7378;
-//   text-align: center;
-//   font-size: 14px;
-//   font-style: normal;
-//   font-weight: 400;
-//   line-height: 18px;
-//   &:first-child {
-//     border-radius: 13px 0 0 13px;
-//     overflow: hidden;
-//   }
-//   &:last-child {
-//     border-radius: 0 13px 13px 0;
-//     overflow: hidden;
-//   }
-// `;
-// const StyledFilterList = styled(FilterList)<{ $isActive: boolean }>`
-//   cursor: pointer;
-//   list-style: none;
-//   border-radius: 0;
-//   background: ${props =>
-//     props.$isActive ? 'rgba(117, 133, 136, 0.12)' : 'transparent'};
-//   color: ${props => (props.$isActive ? '#3a3630' : '#6A7378')};
-//   &:hover {
-//     color: #3a3630;
-//   }
-//   a {
-//     display: block;
-//     padding: 8px 16px;
-//     color: inherit;
-//     text-decoration: none;
-//     &.active {
-//       background-color: rgba(117, 133, 136, 0.12);
-//       color: #3a3630;
-//     }
-//   }
-// `;
 export default HeaderFilter;