@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.82",
+  "version": "0.0.84",
   "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.47",
+    "@bjsdistribution/dms-component-library": "0.1.58",
     "@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/interface.ts

@@ -4,74 +4,6 @@ export interface TableColumn {
   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 = {
@@ -79,23 +11,6 @@ export type PrintData = {
   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;

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

@@ -5,64 +5,8 @@ import {
   StyledTableFilter,
 } from './FilterStyle';
 import BulkFilter from './BulkFilter';
-// import { TableRowType } from '../shared/interface';
-// import { filtersReducerAtom } from '../header-filters/filterStore';
-// import { useApiHook } from '@bjsdistribution/dms-component-library';
-
-// import {
-//   UsePaginationData,
-//   useCountData,
-//   useRoutesTable,
-// } from '../store/store';
-// import { notification } from 'antd';
-// import { useAtom } from 'jotai';
 
 const Filters = () => {
-  // const [, setData] = useRoutesTable();
-  // const [state] = useAtom(filtersReducerAtom);
-  // const [, setPaginationObject] = UsePaginationData();
-  // const [, setCount] = useCountData();
-
-  // Hooks
-  // const { 'x-filters': filters, 'x-pagination': pagination } = state;
-  // const {
-  //   data: fetchedData,
-  //   loading: apiLoading,
-  //   paginationData,
-  // } = useApiHook<{
-  //   data: TableRowType[];
-  // }>({
-  //   endpoint: 'orders/',
-  //   method: 'GET',
-  //   // pagination: pagination,
-  //   // filters: filters,
-  // });
-
-  // useEffect(() => {
-  //   if (fetchedData && fetchedData.data) {
-  //     const data = fetchedData.data;
-  //     setData(data);
-  //     if (paginationData !== null) {
-  //       const { count, ...rest } = JSON.parse(paginationData);
-  //       setPaginationObject(rest);
-  //       setCount(count);
-  //     } else {
-  //       // console.error('Pagination data is null');
-
-  //       notification.error({
-  //         message: 'Error',
-  //         description: 'Pagination data is null',
-  //       });
-  //     }
-  //   }
-  // }, [apiLoading]);
-
-  // const [] = useState(true);
-
-  // const ToggleView = () => {
-  //   setDataView(!DataView);
-  // };
-
   return (
     <>
       <StyledFiter>

package/src/components/order-daily-overview/header/input/dropdown/index.tsx

@@ -1,4 +1,3 @@
-// SelectDropdown.tsx
 import React from 'react';
 import Select, { Props as SelectProps } from 'react-select';
 import { StylesConfig } from 'react-select';

package/src/components/order-daily-overview/header/route-header/RouterHeader.tsx

@@ -1,17 +1,8 @@
 import React from 'react';
-// import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import {
-  HeaderWrapper,
-  StyledFlex,
-  // GlobalFilterWrapper,
-  // DatePickerWrap,
-} from './RouterHeaderStyle';
-// import { useAtom } from 'jotai';
-// import { filtersReducerAtom, usedate } from '../../store/filterStore';
+import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
 import HeaderTitle from './title/HeaderTitle';
 import Breadcrumb from './breadCrumb/BreadCrumb';
-// import DatePickerIcon from '../../../../assets/icons/DatePickerIcon';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -24,13 +15,7 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbTitle = 'Clients >', // Default value
   breadcrumbSubtitle = ' Return', // Default value
   breadcrumbSubPart, // Optional
-  // showDateFilter = true,
 }) => {
-  // const [, dispatch] = useAtom(filtersReducerAtom);
-  // const [today, setToday] = usedate();
-
-  // const maxDate = new Date();
-
   return (
     <>
       <HeaderWrapper className="headerWrap">
@@ -43,25 +28,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
               subPart={breadcrumbSubPart}
             />
           </div>
-          {/* <GlobalFilterWrapper> 
-            {showDateFilter && (
-              <DatePickerWrap>
-                <DatePicker
-                  dateFormat="EEE, dd MMM yyyy"
-                  selected={today}
-                  onChange={(date: Date) => {
-                    setToday(date);
-                    dispatch({
-                      type: 'SET_DATE_FILTER',
-                      payload: date,
-                    });
-                  }}
-                  maxDate={maxDate} // Disable future dates
-                />
-                <DatePickerIcon />
-              </DatePickerWrap>
-            )}
-          </GlobalFilterWrapper> */}
         </StyledFlex>
       </HeaderWrapper>
     </>

package/src/components/order-daily-overview/header/table-filter/TableFilter.tsx

@@ -16,7 +16,6 @@ import {
 } from './TableFilterStyle';
 
 // Componets
-// import BulkFilterIcon from '../../../assets/icons/BulkFilterIcon';
 import CheckBoxWrapper from '../checkbox-wrapper/CheckBoxWrapper';
 import BulkFilterIcon from '../../../../assets/icons/BulkFilterIcon';
 
@@ -62,15 +61,15 @@ const StyledTableFilter: React.FC<TableFilterProps> = ({ tableData }) => {
 
   // Functions
   const handleColumnVisibilityChange = (key: string) => {
-    setVisibleColumns((prevState :any) =>
+    setVisibleColumns((prevState: any) =>
       prevState.includes(key)
-        ? prevState.filter((col:any) => col !== key)
+        ? prevState.filter((col: any) => col !== key)
         : [...prevState, key]
     );
   };
 
   const toggleMenu = () => {
-    setIsDropdownOpen((prevState:any) => !prevState);
+    setIsDropdownOpen((prevState: any) => !prevState);
   };
 
   return (

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

@@ -1,73 +1,8 @@
 import React 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,
-//   useStatusOrderData,
-// } from '../../store';
 
 function HeaderFilter() {
-  // const [, setCustomers] = useCustomerData();
-  // const [, setActionType] = useActionType();
-  // const [, setLocationData] = useLocationData();
-  // const [, setStatusOfOrders] = useStatusOrderData();
-
-  //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]);
-
-  // useEffect(() => {
-  //   if (fetchedStaticData && fetchedStaticData?.data) {
-  //     setActionType(
-  //       fetchedStaticData?.data?.flatMap(
-  //         (i: any) => i?.order_product_return_action
-  //       )
-  //     );
-  //     setStatusOfOrders(
-  //       fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
-  //     );
-  //   }
-  // }, [actionLoading]);
-
-  // useEffect(() => {
-  //   if (fetchedLocationData && fetchedLocationData?.data) {
-  //     setLocationData(fetchedLocationData?.data);
-  //   }
-  // }, [locationloading]);
-
   return (
     <CoverPage>
       <SelectionFilter />

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

@@ -1,117 +1,12 @@
 import React from 'react';
-
-// import { StyledBulkItem } from '../../filters/BulkFilterStyle';
-// import SearchType from '../../header/route-header/search/SearchType';
 import styled from 'styled-components';
-// import DownloadIcon from '../../../../assets/icons/DownloadIcon';
 
 const TableFilters = () => {
-  return (
-    <Container>
-      {/* <TextConatiner>
-        <Text>Create Return</Text>
-      </TextConatiner> */}
-
-      {/* <StyledBulkItem>
-        <SearchType />
-      </StyledBulkItem> */}
-      {/* <IconConatiner>
-         <Mid>
-          <IconText>Export</IconText>
-          <DownloadIcon />
-        </Mid> 
-      </IconConatiner> */}
-    </Container>
-  );
-
-  //   return (
-  //     // <StyledBulkFilterCover>
-
-  //       <StyledBulkItem>
-  //       <SearchType />
-  //       </StyledBulkItem>
-  //       /* {showTableFilter && (
-  //         <StyledBulkItem>
-  //           <TableFilter tableData={TableData[0].tableHead} />
-  //         </StyledBulkItem>
-  //       )} */
-  //     // </StyledBulkFilterCover>
-  //   );
+  return <Container></Container>;
 };
 const Container = styled.div`
   display: flex;
-  /* align-items: flex-start; */
   gap: 16px;
   align-items: center;
 `;
-// const Mid = styled.div`
-//   display: flex;
-//   padding: 10px 10px 10px 10px;
-//   align-items: center;
-//   gap: 8px;
-//   align-self: stretch;
-//   /* border-radius: 15px 15px 15px 15px; */
-// `;
-
-// const TextConatiner = styled.div`
-//   display: flex;
-//   padding: 7px 12px;
-//   justify-content: center;
-//   align-items: center;
-//   gap: 2px;
-//   border-radius: 15px;
-//   background: rgba(136, 128, 117, 0.35);
-// `;
-// const Text = styled.div`
-//   color: #888075;
-//   font-family: "'Lato";
-//   font-size: 14px;
-//   font-style: normal;
-//   font-weight: 600;
-//   line-height: 20px;
-// `;
-
-// const IconConatiner = styled.div`
-//   /* display: flex;
-//   height: 34px;
-//   padding: 4px 10px;
-//   align-items: flex-start;
-//   border-radius: 8px 8px 8px 8px; */
-
-//   ///working
-//   /* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-//   background: #f0f2f2;
-//   border: 1px solid #e2e0db;
-//   display: flex;
-//   padding: 7px 12px;
-//   justify-content: center;
-//   align-items: center;
-//   gap: 2px;
-//   border-radius: 15px;
-//   height: 34px; */
-//   ///////
-
-//   display: flex;
-//   height: 34px;
-//   padding: 1px;
-//   align-items: flex-start;
-//   background: #f0f2f2;
-//   border: 1px solid #e2e0db;
-//   border-radius: 20px 20px 20px 20px;
-
-//   /* shadow/shadow-xs */
-//   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-// `;
-
-// const IconText = styled.div`
-//   color: #3a3630;
-//   text-align: center;
-
-//   /* body/captions */
-//   font-family: 'Lato';
-//   font-size: 13px;
-//   font-style: normal;
-//   font-weight: 400;
-//   line-height: 16px;
-// `;
 export default TableFilters;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -528,7 +528,7 @@ export const StyledTable = styled.table`
 export const StyledTableWrapper = styled.div`
   max-height: 60vh;
   overflow-x: auto;
-  min-height: 50vh;
+  // min-height: 50vh;
 
   .fortables {
     max-height: 60vh;

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

@@ -117,16 +117,3 @@ 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-view/details-filters/left-side-filters/ActionsMenu.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import DropDowns from './dropdowns/DropDowns';
-// import Actions from './actions/Actions';
 
 const ActionsMenu = () => {
   return (
     <Flex>
       <DropDowns />
-      {/* <Actions /> */}
     </Flex>
   );
 };

package/src/components/order-view/details-filters/left-side-filters/actions/Actions.tsx

@@ -20,19 +20,6 @@ const Actions: React.FC = () => {
           name="SEND SMS"
           onClick={() => console.log('ROUTING MAP clicked')}
         />
-        {/* <ActionItem
-          name="TomTom"
-          onClick={() => console.log('TomTom clicked')}
-        //   icon={<TomtomIcon />}
-        />
-        <ActionItem
-          name="Tracker"
-          onClick={() => console.log('Tracker clicked')}
-        />
-        <ActionItem
-          name="Videos"
-          onClick={() => console.log('Videos clicked')}
-        /> */}
       </Flex>
     </>
   );

package/src/components/order-view/fakedata.ts

@@ -1,10 +1,10 @@
 import { ChargeLogData } from './types';
 
 export const bjsMenu = [
-  // {
-  //   label: 'Add Order Resources',
-  //   value: 'add-resources',
-  // },
+  {
+    label: 'Add Order Resources',
+    value: 'add-resources',
+  },
   {
     label: 'Split Order',
     value: 'split-order',
@@ -12,15 +12,24 @@ export const bjsMenu = [
 ];
 
 export const optionsMenu = [
-  { label: 'Create Reminder', value: 'create-task' },
+  { label: 'Create Reminder', value: 'create-reminder' },
+  { label: 'Create Task', value: 'create-task' },
   { label: 'Confirm', value: 'confirm-order' },
   { label: 'Hold', value: 'hold-order' },
   { label: 'Cancel', value: 'cancel-order' },
   { label: 'Un Hold', value: 'unhold-order' },
+  {
+    label: 'Remove from Route',
+    value: 'remove-from-route',
+  },
   {
     label: 'Un-Cancel',
     value: 'uncancel-order',
   },
+  {
+    label: 'Clear Booking Status',
+    value: 'clear-date',
+  },
   // { label: 'Charge Log', value: 'charge-log' },
 ];
 

package/src/components/order-view/hooks/AddResources.tsx

@@ -0,0 +1,54 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { notification } from 'antd';
+import { getCookie } from '../utils';
+import {
+  selectedCategoryIdAtom,
+  selectedDocumentTypeAtom,
+  selectedTypeAtom,
+  selectedVisibilityAtom,
+} from '../order-actions/store';
+import { useAtom } from 'jotai';
+import { useOrderId } from '../store';
+
+function useUploadFiles() {
+  const ssoToken = getCookie('id_token');
+
+  const [selectedCategoryId] = useAtom(selectedCategoryIdAtom);
+  const [selectedDocumentType] = useAtom(selectedDocumentTypeAtom);
+  const [selectedType] = useAtom(selectedTypeAtom);
+  const [orderId] = useOrderId();
+  const [selectedVisibility] = useAtom(selectedVisibilityAtom);
+
+  const create = async (formData: FormData) => {
+    const endpoint = `${getBaseEndpoint()}/orders/${orderId}/order_resources/?document_type=${selectedDocumentType}&type=${selectedType}&category=${selectedCategoryId}&visibility=${selectedVisibility}`;
+
+    try {
+      const requestOptions = {
+        headers: {
+          Authorization: `Bearer ${ssoToken}`,
+        },
+        method: 'POST',
+        body: formData,
+      };
+
+      const response = await fetch(endpoint, requestOptions);
+      if (!response.ok) {
+        throw new Error('Failed to upload files');
+      }
+
+      const json = await response.json();
+      return json;
+    } catch (err) {
+      notification.error({
+        message: 'Error',
+        //@ts-ignore
+        description: `${err.message}` || 'Upload error:', // Using err.message for clearer output
+      });
+      throw err;
+    }
+  };
+
+  return create;
+}
+
+export default useUploadFiles;

package/src/components/order-view/index.tsx

@@ -33,7 +33,9 @@ import useSystemLogs from './hooks/useGetSystemLogs';
 import { notification } from 'antd';
 // import { useAssignData } from '../store';
 import DetailsFilters from './details-filters/DetailsFilters';
-import { useVisibilityData } from '../store';
+import { useSubContracterData, useVisibilityData } from '../store';
+import Notification from './notification';
+import Order from './order-resources/expanded-content';
 
 interface ApiResponse {
   message: string;
@@ -68,6 +70,7 @@ function OrderView() {
   const [liveRecalling] = useLiveRecalling();
   const systemLogsData = useSystemLogs();
   const [, setVisibilityData] = useVisibilityData();
+  const [, setSubContracterData] = useSubContracterData();
 
   // query param
   const location = useLocation();
@@ -351,10 +354,31 @@ function OrderView() {
 
   console.log(orderId, 'orderId');
 
+  const { data: fetchedSubcontractotData, loading: apiLoading } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/sub-contractor/sub_contractor/get/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (fetchedSubcontractotData && fetchedSubcontractotData?.data) {
+      const formattedData = fetchedSubcontractotData?.data?.map(
+        (item: any) => ({
+          id: item.id,
+          name: item.name,
+        })
+      );
+      setSubContracterData(formattedData);
+    }
+  }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
+
   return (
     <MainContainer>
       <GeneralHeader />
+
       <DetailsFilters />
+      <Notification />
       <OrderDetails />
       <ProductsInfo />
       <SplitLayout>
@@ -362,6 +386,7 @@ function OrderView() {
           <Notes />
         </NotesContainer>
         <TablesContainer>
+          <Order />
           <SystemLogs />
         </TablesContainer>
       </SplitLayout>