@bjsdistribution/dms-client-return 0.0.2 → 0.0.3

package/package.json

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

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 {
@@ -20,10 +17,7 @@ import {
 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 [, setPaginationObject] = UsePaginationData();
   const [, setCount] = useCountData();
@@ -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;