@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,210 @@
+export interface TableColumn {
+  key: string;
+  label: string;
+  alwaysVisible?: boolean;
+}
+
+// export interface TableRowType {
+//   id: string;
+//   route_detail: Array<{
+//     est_start: string;
+//     est_finish: string;
+//     vehicle_number: string;
+//     est_distance: number;
+//     est_distance_2:number;
+//     est_duration: number;
+//     status: string;
+//   }>;
+//   route_name: string;
+//   depot_id: string;
+//   tomtom_id: string;
+//   route_crew_info: Array<{
+//     crew1_id: string;
+//     crew1: string;
+//     crew2_id: string;
+//     crew2: string;
+//     crew_instructions: string;
+//   }>;
+//   assets: string;
+//   total_weight: number;
+//   total_cube: number;
+//   contains_heavy_item: boolean;
+//   contains_collection: boolean;
+//   // Add an index signature
+//   [key: string]: any;
+// }
+
+// //orders data
+export interface TableRowType {
+  depot_id:number,
+  gsit_order_id:number,
+  customer_id:number,
+  trading_name:string,
+  recipient_reference:string,
+  order_locked:boolean,
+  lock_notes:any,
+  order_type_id:any,
+  allow_live_tracking:any,
+  weight:number,
+  cube:number,
+  rescheduled:boolean,
+  zone_code:string,
+  status:string,
+  order_status_note:string,
+  print_pod:boolean,
+  order_number:string,
+  consignment:string,
+  action_date:any,
+  other_instructions:any,
+  schedule_after:any,
+  vehicle_type:string,
+  order_recipient:OrderRecipientData[],
+  order_services_detail:OrderServicesDetails[],
+  order_services:OrderServicesData[],
+  order_type:any,
+  order_routes:OrderRoutesData[],
+  id:number
+
+  // Add an index signature
+  [key: string]: any;
+
+
+}
+
+
+export interface OrderRecipientData{
+  id: number,
+  order_id: number,
+  recipient_name :string,
+  address: any,
+  postcode: any,
+  postcode_district:any,
+  postcode_short:any,
+  latitude:any,
+  longitude:any,
+  what_3words_address:any,
+  contact_home:any,
+  contact_work:any,
+  contact_mobile:any,
+  contact_email:any,
+  is_comms_enabled:boolean,
+}
+
+export interface OrderServicesDetails{
+  order_id:number,
+  timed_service_id:number,
+  order_delivery_point_id:number,
+  order_service_level_id:number,
+  heavy_order:boolean,
+  heavy_item:boolean,
+  bulky_order:boolean,
+  bulky_item:boolean,
+  id:number,
+}
+export interface OrderServicesData{
+  order_id:number,
+  order_service_list_id:number,
+  service_time:any,
+  is_refused:boolean,
+  service_note:string,
+  id:number,
+}
+export interface OrderRoutesData{
+  id:number,
+  order_id:number,
+  route_id:number,
+  est_arrival:string,
+  est_departure:string,
+
+  drop_time:string,
+  delivery_instructions:string,
+}
+export interface TableDataInterface {
+  tableHead: TableColumn[];
+}
+export interface FilterRoute {
+  id: number;
+  icon: string;
+  label: string;
+  value: string;
+}
+
+// types
+
+export type PrintData = {
+  icon: string;
+  label: string;
+};
+
+export type RouteDetailType = {
+  vehicle_number: string;
+  est_start: string;
+  est_finish: string;
+  est_distance: number;
+  est_distance_2:number;
+  est_duration: string;
+  est_drive_time: string | null;
+  vehicle_size: string;
+  start_location: string;
+  start_mileage: number;
+  start_latitude: number;
+  start_longitude: number;
+  end_location: string;
+  end_mileage: number;
+  end_latitude: number;
+  end_longitude: number;
+  actual_start_time: string;
+  actual_finish_time: string;
+  finish_date: string;
+  paper_work_printed: string;
+  allow_label_scanning: number;
+  allow_live_tracking: boolean;
+  route_zone: number;
+  actual_distance: number;
+  actual_duration: string;
+  actual_drive_time: string | null;
+};
+
+export interface CrewInfoType {
+  crew1: string;
+  crew1_id: number;
+  crew2: string;
+  crew2_id: number;
+  crew_instructions: string;
+}
+
+export interface RouteInfoType {
+  id: number;
+  depot_id: number;
+  tomtom_id: number;
+  route_name: string;
+  action_date: string;
+  assets: string;
+  fuel_card_id: number;
+  total_weight: number;
+  total_cube: number;
+  contains_collection: boolean;
+  contains_heavy_item: boolean;
+  route_detail: RouteDetailType[];
+  route_crew_info: CrewInfoType[];
+  route_breaks: any;
+}
+
+export interface PaginationData {
+  firstPage: number;
+  lastPage: number;
+  next_page: number;
+  page: number;
+  previous_page: number;
+  total: number;
+  totalPages: number;
+
+  // Add other properties if available
+}
+
+export type OrderViewType = 'view' | 'edit' | 'add';
+
+// export interface OrderProps {
+//   data?: any; 
+//   action: (path: string, view: OrderViewType, id?: number) => {};
+// }

package/src/components/order-daily-overview/shared/types.ts

@@ -0,0 +1,3 @@
+export type ModalType =
+  | 'tablegrid'
+  | 'cardgrid'

package/src/components/order-daily-overview/shared/utlis.ts

@@ -0,0 +1,78 @@
+import CollectionLabelIcon from '../../../assets/icons/CollectionLabelIcon';
+import CustomerLabelIcon from '../../../assets/icons/CustomerLabelIcon';
+import DeliveryNotes from '../../../assets/icons/DeliveryNotes';
+import LoadSheetIcon from '../../../assets/icons/LoadSheetIcon';
+import RunsheetIcon from '../../../assets/icons/RunsheetIcon';
+
+export const getStatusBg = (status: string) => {
+  switch (status) {
+    case 'onTotalOrder':
+      return 'rgba(99, 150, 229, 0.20)';
+    case 'late':
+      return 'rgba(233, 82, 82, 0.20)';
+    case 'onComplete':
+      return 'rgba(87, 219, 122, 0.20)';
+    case 'onPending':
+      return 'rgba(254, 186, 48, 0.20)';
+    case 'onCollection':
+      return 'rgba(123, 97, 255, 0.20)';
+    default:
+      return 'gray';
+  }
+};
+
+export const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'onTotalOrder':
+      return '#6396E5';
+    case 'late':
+      return '#E95252';
+    case 'onComplete':
+      return '#29CC6A';
+    case 'onPending':
+      return '#FEBA30';
+    case 'onCollection':
+      return '#7B61FF';
+    default:
+      return 'gray';
+  }
+};
+
+export const iconMap: Record<
+  string,
+  React.ComponentType<React.SVGProps<SVGSVGElement>>
+> = {
+  assembly: RunsheetIcon,
+  heavyItems: RunsheetIcon,
+  supplier: RunsheetIcon,
+  vip: RunsheetIcon,
+};
+
+export const PrintIconMap: Record<
+  string,
+  React.ComponentType<React.SVGProps<SVGSVGElement>>
+> = {
+  runSheet: RunsheetIcon,
+  loadSheet: LoadSheetIcon,
+  deliveryLables: DeliveryNotes,
+  customerLables: CustomerLabelIcon,
+  collectionLables: CollectionLabelIcon,
+};
+
+// Date format
+export const formatDate = (date: any) => {
+  const padZero = (num: any) => num.toString().padStart(2, '0');
+  const year = date.getFullYear();
+  const month = padZero(date.getMonth() + 1);
+  const day = padZero(date.getDate());
+  // const hours = padZero(date.getHours());
+  // const minutes = padZero(date.getMinutes());
+  // const seconds = padZero(date.getSeconds());
+
+  return `${year}-${month}-${day}`;
+};
+
+export const displayValueOrNA = (value: any) => {
+  const isBlankArray = Array.isArray(value) && value.length === 0;
+  return value && !isBlankArray ? value : '--';
+};

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

@@ -0,0 +1,100 @@
+import { atom, useAtom } from 'jotai';
+// import { formatDate } from '../shared/utlis';
+import { format } from 'date-fns';
+
+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_DATE_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'action_date' && f.field !== 'status'), 
+          {
+            field: 'action_date',
+            op: '>=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T00:00:00+00:00`,
+          },
+          {
+            field: 'action_date',
+            op: '<=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T23:59:59+00:00`,
+          },
+          { field: 'status', op: 'count', value: '' },
+        ],
+      };
+
+    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,
+        },
+      };
+    default:
+      return state;
+  }
+};
+
+const filtersStateAtom = atom(initialState);
+
+export const filtersReducerAtom = atom(
+  get => get(filtersStateAtom),
+  (get, set, action) =>
+    set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))
+);

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

@@ -0,0 +1,16 @@
+export const routeInfoInitialValue = {
+  id: 0,
+  depot_id: 0,
+  tomtom_id: 0,
+  route_name: '',
+  action_date: '',
+  assets: '',
+  fuel_card_id: 0,
+  total_weight: 0,
+  total_cube: 0,
+  contains_collection: false,
+  contains_heavy_item: false,
+  route_detail: [],
+  route_crew_info: [],
+  route_breaks: [],
+};

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

@@ -0,0 +1,90 @@
+// Base
+import { atom, useAtom } from 'jotai';
+
+// Interface
+// import { routeInfoInitialValue } from './initialValues';
+import {
+  // RouteInfoType,
+  PaginationData,
+  TableColumn,
+  TableRowType,
+  // OrderRecipientData,
+} from '../shared/interface';
+
+import { ModalType } from '../shared/types';
+// import { routeInfoInitialValue } from './initialValues';
+// Table column filter
+export const visibleColumnsAtom = atom<string[]>([]);
+const toggleColumnMenuAtom = atom<boolean>(false);
+export const useToggleColumn = () => {
+  return useAtom(toggleColumnMenuAtom);
+};
+
+export const initialVisibleColumns = (tableData: TableColumn[]) => {
+  return tableData.map(column => column.key);
+};
+
+// Dropdown
+const PrintOptionTOggle = atom<number | null>(null);
+export const usePrintOptionTOggle = () => {
+  return useAtom(PrintOptionTOggle);
+};
+
+const menuDropDown = atom<boolean>(false);
+export const useMenuDropDown = () => {
+  return useAtom(menuDropDown);
+};
+
+//route page
+const modalTypeAtom = atom<ModalType>('tablegrid');
+
+export function useModalType() {
+  return useAtom(modalTypeAtom);
+}
+// Overview Table
+const atomRoutesTable = atom<TableRowType[]>([]);
+export const useRoutesTable = () => {
+  return useAtom(atomRoutesTable);
+};
+
+const loading = atom<boolean>(false);
+export const useLoading = () => {
+  return useAtom(loading);
+};
+
+// Paginations
+
+const atomPaginationData = atom<PaginationData>({
+  firstPage: 1,
+  lastPage: 1,
+  next_page: 1,
+  page: 0,
+  previous_page: 1,
+  total: 0,
+  totalPages: 0,
+});
+
+export const UsePaginationData = () => {
+  return useAtom(atomPaginationData);
+};
+
+const atomItemsPerPage = atom<number>(50);
+export const useItemsPerPage = () => {
+  return useAtom(atomItemsPerPage);
+};
+
+const countStatus = atom<any>([]);
+export const useCountData = () => {
+  return useAtom(countStatus);
+};
+// ROUTE DETAILS PAGE STATES ->
+
+// const orderId = atom<number | undefined>(undefined);
+// export const useOrderId = () => {
+//   return useAtom(orderId);
+// };
+
+// const routeInfoState = atom<OrderRecipientData>(routeInfoInitialValue);
+// export const useRouteInfo = () => {
+//   return useAtom(routeInfoState);
+// };

package/src/components/order-daily-overview/table/InfiniteScrolling.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useInfiniteScroll = (
+  paginationData: any,
+  setShouldPerformAction: Function,
+  tableScrolling: any
+) => {
+  const [page, setPage] = useState(1);
+  const [scrollActivated, setScrollActivated] = useState(false);
+  const debounce = (func: Function, wait: number) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    return (...args: any[]) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => func(...args), wait);
+    };
+  };
+
+  const handleInfiniteScroll = useCallback(
+    debounce(() => {
+      setScrollActivated(true);
+      const element = document.getElementById(tableScrolling);
+      if (element) {
+        const { scrollHeight, offsetHeight, scrollTop } = element;
+        let totalPages;
+        if (paginationData) {
+          totalPages = JSON.parse(paginationData)?.total_pages;
+        }
+        if (
+          offsetHeight + scrollTop >= scrollHeight &&
+          totalPages >= page &&
+          totalPages > page
+        ) {
+          setShouldPerformAction(true);
+          setPage(prev => prev + 1);
+        }
+      }
+    }, 700),
+    [paginationData, page, setShouldPerformAction]
+  );
+  useEffect(() => {
+    const element = document.getElementById(tableScrolling);
+    if (element) {
+      element.addEventListener('scroll', handleInfiniteScroll);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('scroll', handleInfiniteScroll);
+      }
+    };
+  }, [handleInfiniteScroll]);
+  return { page, scrollActivated };
+};
+
+export default useInfiniteScroll;

package/src/components/order-daily-overview/table/Return.tsx

@@ -0,0 +1,156 @@
+import React, { useEffect } from 'react';
+// import { ApiResponse, Column } from './types';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+// import MultiRFI from './ReadyforInvoicemulti';
+import { useAtom } from 'jotai';
+// import useInfiniteScroll from './InfiniteScrolling';
+// import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
+// import {
+//   usePrevSelectedClients,
+//   useSelectedClients,
+// } from '../header-for-invoice/store';
+import Table from './table-data/Table';
+import { useMaiNTableView } from '../../store';
+import { overviewFiltersReducerAtom } from '../return-order-table/FilterStore';
+import { ApiResponse, Column } from '../../types';
+import useInfiniteScroll from './InfiniteScrolling';
+
+const RFI: React.FC = () => {
+  //   const [, setClient] = useSelectedClients();
+  const [tabledata, setMainTableData] = useMaiNTableView();
+  const [filterState, dispatchOverviewFilter] = useAtom(
+    overviewFiltersReducerAtom
+  );
+  console.log('tabledata', tabledata);
+  const columns: Column[] = [
+    {
+      Header: 'Trading Name',
+      accessor: 'name',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Client',
+      accessor: 'customer_name',
+      sortable: true,
+      showIcon: false,
+    },
+    {
+      Header: 'Orders',
+      accessor: 'total_amount',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Products',
+      accessor: 'total_orders',
+      sortable: true,
+      showIcon: false,
+    },
+    {
+      Header: 'RTS',
+      accessor: 'total_amount',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Pending',
+      accessor: 'total_items',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Dispose',
+      accessor: 'customer_id',
+      sortable: true,
+      showIcon: false,
+    },
+    {
+      Header: 'Re-allocate',
+      accessor: 'debrief_status',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Re-Del',
+      accessor: 'vat_rate_amount',
+      sortable: true,
+      showIcon: true,
+    },
+    {
+      Header: 'Recycle',
+      accessor: 'fuel_surcharge_amount',
+      sortable: true,
+      showIcon: false,
+    },
+    {
+      Header: 'unknown',
+      accessor: 'discount_amount',
+      sortable: true,
+      showIcon: true,
+    },
+  ];
+  // const [invoiceData, setInvoiceData] = useInvoiceData();
+  //   const [
+  //     readyForInvoiceOverview,
+  //     setReadyForInvoiceOverview,
+  //   ] = useReadyForInvoiceOverview();
+  // const [filterApplied] = usefilterApplied();
+
+  const { 'x-filters': filters, 'x-pagination': pagination } = filterState;
+  const {
+    data: fetchedOverviewData,
+    setShouldPerformAction, // need for  infinite
+    paginationData, // need for  infinite
+    // loadingskeleton, // need for  infinite
+  } = useApiHook<ApiResponse>({
+    endpoint: `/invoices/ready_for_invoice/overview/`,
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+    performAction: true,
+  });
+
+  console.log('fetchedOverviewData', fetchedOverviewData);
+  //  infinite scrolling code start here
+  const { page, scrollActivated } = useInfiniteScroll(
+    paginationData,
+    setShouldPerformAction,
+    'tableScrolling'
+  );
+  useEffect(() => {
+    dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
+  }, [page]);
+
+  useEffect(() => {
+    if (fetchedOverviewData && fetchedOverviewData?.data) {
+      const invoiceData = fetchedOverviewData?.data;
+
+      if (scrollActivated) {
+        setMainTableData((prev: any) => {
+          const newData = invoiceData?.filter(
+            (newItem: any) =>
+              !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
+          );
+          return [...prev, ...newData];
+        });
+      } else {
+        setMainTableData(invoiceData);
+      }
+    }
+  }, [fetchedOverviewData, scrollActivated]);
+
+  return (
+    <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
+      {/* {renderContent} */}
+      <Table
+        columns={columns}
+        data={tabledata}
+        loading={false}
+        // loadingskeleton={loadingskeleton}
+        view="rfi"
+      />
+    </div>
+  );
+};
+export default RFI;