@bjsdistribution/dms-client-return 0.0.11 → 0.0.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.11",
+  "version": "0.0.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/common/expand-collapse/index.tsx

@@ -39,7 +39,7 @@ function CollapsableForm(props: IProps) {
 const CustomizedFormSection = styled.div`
   display: flex;
   background: #ffffff;
-  padding: 15px;
+  padding: 12px;
   flex-direction: column;
   gap: 14px;
   border: 1px solid #f0f2f2;
@@ -84,9 +84,9 @@ const IconContainer = styled.div<{ isExpanded: boolean }>`
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  width: 20px;
-  height: 20px;
-  padding: 0px;
+  width: 25px;
+  height: 25px;
+  padding: 2px;
   border-radius: 3px;
   background: #ffffff;
   box-shadow: 0px 1px 2px 0px #1018280d;

package/src/components/order-daily-overview/common/css/TableStyle.tsx

@@ -1,40 +1,19 @@
 import styled from 'styled-components';
 
 // Styled components
-export const StyledTableWrapper = styled.div`
+export const TableWrapper = styled.div`
   overflow-x: auto;
-  margin-top: 20px;
-  max-height: calc(100vh - 420px);
-  min-height: calc(100vh - 420px);
-  &::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 100px;
-    height: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #777;
-    border-radius: 100px;
-  }
 
-  &::-webkit-scrollbar-thumb {
-    background: #7b61ff;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #7b61ff;
-  }
+  margin-top: 10px;
 `;
 
-export const StyledTable = styled.table`
+export const Table = styled.table`
   width: 100%;
   border-collapse: separate;
-  border-spacing: 0;
+  border-spacing: 0 12px;
 
   thead tr {
     border-radius: 40px;
-    border-spacing: 0;
 
     th:first-child {
       border-radius: 100px 0 0 100px;
@@ -48,49 +27,38 @@ export const StyledTable = styled.table`
 
   tbody tr {
     border-radius: 40px;
-
+    &.completed td {
+      background: rgba(87, 219, 122, 0.2) !important;
+    }
     td:first-child {
       border-radius: 100px 0 0 100px;
       border-left: 1px solid rgba(0, 0, 0, 0.08);
-
     }
     td:last-child {
       border-radius: 0px 100px 100px 0;
       border-right: 1px solid rgba(0, 0, 0, 0.08);
     }
-    td.notFound:last-child {
-      border-radius: 100px;
-    }
     &:nth-child(even) td {
       background: #f6fbff;
     }
     td {
-      .red {
-        background: red;
-      }
-      .redColor {
-        color: #e95252;
+      .red path {
+        fill: #e95252;
       }
-      &.fixWidth {
-        width: 200px;
+      .green path {
+        fill: #29cc6a;
       }
     }
   }
-  &.mainTable {
-    border-spacing: 0 6px;
-    svg.tomTomIcon { 
-    transform: scale(0.8);
-}
-  }
 `;
 
-export const StyledThBase = styled.th`
+export const Th = styled.th`
   color: #3a3630;
-  font-size: 12px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  padding: 5px 15px;
+  padding: 6px 15px;
   background: #f0f2f2;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-right: none;
@@ -98,20 +66,20 @@ export const StyledThBase = styled.th`
   text-align: left;
 `;
 
-export const StyledTdBasic = styled.td`
+export const Td = styled.td`
   color: #3a3630;
-  font-size: 12px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  padding: 5px 15px;
+  padding: 6px 15px;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-right: none;
   border-left: none;
 `;
 
-export const StyledFlex = styled.div`
+export const Flex = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
@@ -128,7 +96,7 @@ export const StyledFlex = styled.div`
     }
   }
 `;
-export const StyledRoundedBorder = styled.div`
+export const RoundedBorder = styled.div`
   border-radius: 30px;
   border: 1px solid #edefef;
   background: #f6fbff;
@@ -145,19 +113,19 @@ export const RouteName = styled.div`
   margin-bottom: 6px;
 `;
 
-export const StyledFlexGap4 = styled.div`
+export const FlexGap4 = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
 `;
 
 export const TomtomName = styled.div`
-  color: #6E7079;
+  color: #29cc6a;
   font-size: 14px;
   font-weight: 600;
   line-height: 24px;
 `;
-export const StyledLineBreak = styled.div``;
+export const LineBreak = styled.div``;
 export const Weight = styled.div`
   font-size: 10px;
   font-style: normal;
@@ -165,18 +133,12 @@ export const Weight = styled.div`
   line-height: 16px;
 `;
 
-export const StyledIconCover = styled.div`
+export const IconCover = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
   span {
     margin-top: 4px;
-    &.ascending svg path:first-child {
-      fill: #000;
-    }
-    &.descending svg path:last-child {
-      fill: #000;
-    }
   }
 `;
 
@@ -211,292 +173,30 @@ export const IconCoverData = styled.div`
   }
 `;
 
-//  For route details
-export const StyledCollapseWrapper = styled.div`
-  border-radius: 15px;
-  border: 1px solid #e3e3e3;
-  background: #fff;
-  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-  padding-bottom: 10px;
-`;
-
-export const StyledCollapseHeadWrapper = styled.div`
-  border-bottom: 1px solid #e3e3e3;
-  background: #f8fafc;
-  display: flex;
-  padding: 10px 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 15px 15px 0 0;
-`;
-
-export const StyledCollapseBody = styled.div`
-  /* padding-left: 45px; */
-  position: relative;
-  padding-right: 15px;
-`;
-
-// Inside table
-export const StyledTableNexted = styled(StyledTable)`
-  border-spacing: 0;
-  td {
-    position: relative;
-  }
-  .outerBorder {
-    border-radius: 100px;
-    border: 1px solid #edefef;
-    background: #fff;
-    padding: 8px 0;
-    margin-top: 12px;
-    position: relative;
-    margin-left: 42px;
-    padding-left: 15px;
-    width: 98%;
-    overflow: auto;
-
-    td {
-      em {
-        color: #8e8a85;
-        span {
-          white-space: nowrap;
-        }
-      }
-      .recepientName {
-        color: #09f;
-        font-weight: 600;
-      }
-      td td {
-        padding: 0 10px;
-      }
-    }
-
-    .HiddenArea {
-      display: block;
-      min-width: 30px;
-      visibility: hidden;
-    }
-    .HiddenAreaLink {
-      display: block;
-      min-width: 40px;
-      visibility: hidden;
-    }
-    &.activeList {
-      border-radius: 15px;
-    }
-  }
-  tbody {
-    tr {
-      td {
-        &:last-child {
-          border: none;
-        }
-      }
-      &:nth-child(even) td {
-        background: none;
-      }
-    }
-  }
-
-  .secondLable {
-    margin-left: 15px;
-    border-radius: 12px;
-
-    border: 1px solid #edefef;
-    background: #fff;
-    border-spacing: 0;
-    overflow: hidden;
-    margin-top: 20px;
-    tr {
-      td {
-        padding: 15px 10px;
-        &:first-child {
-          width: 128px;
-        }
-        border-bottom: 1px solid #edefef;
-      }
-    }
-    tbody tr td {
-      border-bottom: 1px solid #edefef !important;
-      border-radius: 0;
-    }
-  }
-
-  .topHead {
-    border-radius: 40px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    background: #f0f2f2;
-    padding: 2px 15px;
-    margin-left: 45px;
-
-    svg.tomTomIcon {
-      transform: scale(0.7);
-      position: relative;
-      left: 4px;
-    }
-  }
-
-  .headCoverFLex {
-    display: flex;
-
-    > div {
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      font-size: 13px;
-      /* margin: 0 7px; // head space */
-      padding: 0 4px 0 15px;
-    }
-  }
-  .row {
-    &:last-child .timeTrackOuter {
-      display: none;
-    }
-  }
-`;
-export const StyledTh = styled(StyledThBase)`
-  background: none;
-  padding: 0px;
-  border-radius: 0 !important;
-  border: none;
-  padding: 14px 20px;
-  border-radius: 15px 0px 0px 0px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-  background: #f8fafc;
-`;
-
-export const StyledTd = styled(StyledTdBasic)`
-  background: none;
-  border: none;
-  padding: 0;
-  td td {
-    padding: 0 10px;
-  }
-`;
-
-export const StyledDateWrapper = styled.div`
-  border-radius: 100px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: #faf9f9;
-  padding: 6px 8px;
-  color: #888075;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  display: inline-block;
-`;
-
-export const StyledLocationName = styled.div`
-  color: #fc7743;
-`;
-
-export const StyledCompleteState = styled.div`
-  border-radius: 22px;
-  background: rgba(41, 204, 106, 0.15);
-  display: flex;
-  padding: 6px 10px;
-  justify-content: center;
-  align-items: center;
-  color: #1f9254;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: capitalize;
+//Route Details Style
+export const AuditTableWrapper = styled.div`
+  overflow-x: auto;
 `;
 
-export const StyledToggleStatus = styled.div`
-  border-radius: 20px;
-  border: 1px solid rgba(233, 82, 82, 0.5);
-  background: rgba(233, 82, 82, 0.15);
-  padding: 2px 8px;
-  display: flex;
-  cursor: pointer;
-
-  &.active .coverArrow {
-    transform: rotate(0deg);
-    position: relative;
-    top: 2px;
-  }
-  .coverArrow {
-    transform: rotate(180deg);
-    position: relative;
-    top: -2px;
-  }
-
-  .circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 100px;
-    border: 1px solid #e95252;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:after {
-      content: '';
-      width: 10px;
-      height: 10px;
-      border-radius: 100px;
-      background: #e95252;
-    }
-  }
+export const RowHeading = styled.div`
+  font-family: 'lato', sans-serif;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
 `;
 
-export const StyledTimeTrack = styled.div`
-  border-radius: 12px;
-  background: #fff;
-
-  position: absolute;
-  top: 86px;
-  left: 3px;
-  min-width: 36px;
-  span {
-    padding: 2px 6px;
-    color: #687d9b;
-    font-weight: 600;
-    font-size: 11px;
-    position: relative;
-    z-index: 2;
-    background: #fff;
-    border-radius: 100px;
-    border: 1px solid #edefef;
-  }
-
-  i {
-    width: 2px;
-    height: 36px;
-    background: #7b91b0;
-    display: block;
-    position: absolute;
-    top: 58%;
-    transform: translateY(-50%);
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    z-index: 1;
-    &:after,
-    &::before {
-      width: 5px;
-      height: 5px;
-      display: block;
-      background: #7b91b0;
-      position: absolute;
-      top: -5px;
-      content: '';
-      border-radius: 100px;
-      left: -1px;
-    }
-    &:after {
-      top: auto;
-      bottom: -4px;
-    }
-  }
+export const Heading = styled.div`
+  color: var(--Neutral-Gray-Gray-500, #667085);
+  font-family: 'lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
 `;
 
-export const StyledWeight = styled.div`
+export const SubHeading = styled.span`
+  color: var(--Neutral-Gray-Gray-500, #667085);
+  font-family: 'lato', sans-serif;
   font-size: 13px;
-  color: #e95252;
-`;
-export const StyledCube = styled(StyledWeight)`
-  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
 `;

package/src/components/order-daily-overview/common/fakedata.tsx

@@ -101,6 +101,10 @@ export const optionsPrint = [
   { icon: 'collectionLables', label: 'Print Collection Labels' },
 ];
 
+export const optionsForReturnPrint = [
+  { icon: 'deliveryLables', label: 'Print Return Labels' },
+];
+
 export const Depots = [
   { value: 'bjsCouriers', label: 'BJS COURIERS' },
   { value: 'bjsSales', label: 'BJS SALES' },

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

@@ -3,12 +3,18 @@ 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';
+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<
@@ -50,6 +56,9 @@ function HeaderFilter() {
           (i: any) => i?.order_product_return_action
         )
       );
+      setStatusOfOrders(
+        fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
+      );
     }
   }, [actionLoading, fetchedStaticData]);
 

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

@@ -12,9 +12,12 @@ import { atom, useAtom } from 'jotai';
 import {
   useActionType,
   useCustomerData,
+  useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
   useReturnPayload,
+  useSelectAll,
+  useSelectedOrders,
 } from '../../store';
 import { filtersReducerAtom } from './filterStore';
 import {
@@ -49,6 +52,9 @@ function SelectionFilter() {
   const [storedAccNumber, setStoredAccNumber] = useState<any>();
   const [storedCustomerId, setStoredCustomerId] = useState<any>();
   const [, setNewPayload] = useNewReturnPayload();
+  const [, setGrouped] = useGroupedPayload();
+  const [, setSelectedReturnOrder] = useSelectedOrders();
+  const [, setSelectAll] = useSelectAll();
 
   //client options
   const clientOptions = customers?.map((option: any) => ({
@@ -69,7 +75,7 @@ function SelectionFilter() {
 
   const LocationOptions = locationData?.map((option: any) => ({
     label: option?.location_name,
-    value: option?.customer_id,
+    value: option?.token,
   }));
 
   //client change
@@ -94,7 +100,6 @@ function SelectionFilter() {
       account_number: storedAccNo,
       customer_id: storedCustomerId,
     }));
-    console.log(selectedUuids, 'selectedUuids');
     const filteredSubLocations = locationData
       ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
       .map((subCat: any) => ({
@@ -104,6 +109,10 @@ function SelectionFilter() {
 
     setFilteredLocationOptions(filteredSubLocations);
     setUuid('');
+    setSelectedReturnOrder([]);
+    setNewPayload([]);
+    setGrouped([]);
+    setSelectAll(false);
   };
 
   useEffect(() => {
@@ -127,10 +136,9 @@ function SelectionFilter() {
   useEffect(() => {}, [getUuid, filteredLocationOptions]);
 
   //location change
-  const handleLocationChange = (value: unknown, option: DefaultOptionType) => {
+  const handleLocationChange = (value: any, option: DefaultOptionType) => {
     const selectedLabel = option?.label as string;
-    console.log(value, 'value');
-    setSelectedLocationValue(selectedLabel);
+    setSelectedLocationValue(value);
 
     if (selectedLocationValue === selectedLabel) {
       dispatch({
@@ -196,9 +204,9 @@ function SelectionFilter() {
     }
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
-  console.log(filteredLocationOptions, 'filteredLocationOptions');
+  // console.log(filteredLocationOptions, 'filteredLocationOptions');
 
-  console.log('check', storedName, selectedFilterValue, selectedLocationValue);
+  // console.log('check', storedName, selectedFilterValue, selectedLocationValue);
   return (
     <Wrapper>
       <FilterRow>

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

@@ -12,7 +12,7 @@ import Filters from './filters/Filters';
 // 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 RouterHeader from './header/route-header/RouterHeader';
 // import Loader from './header/loader/Loader';
 import { useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
@@ -62,7 +62,7 @@ function ReturnMainTable() {
     endpoint: `/return_orders/get/client-returns/`,
     method: 'GET',
   });
-  console.log('fetchedClientData', fetchedClientData?.data);
+  // console.log('fetchedClientData', fetchedClientData?.data);
 
   useEffect(() => {
     setLoading(staticDataLoading);
@@ -75,7 +75,7 @@ function ReturnMainTable() {
   return (
     <>
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
-        <RouterHeader />
+        {/* <RouterHeader /> */}
         <div className="Tableconatiner">
           <HeaderFilter />
           <Container>

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import RouterHeader from '../header/route-header/RouterHeader';
+// import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
 import OrderTable from './table/OrderTable';
 import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
@@ -33,7 +33,7 @@ const ReturnAfterTable = () => {
   return (
     <div>
       <DashBoardWrapper>
-        <RouterHeader />
+        {/* <RouterHeader /> */}
         <div className="Tableconatiner">
           <HeaderFilter />
           <Container>