@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,272 @@
+import React from 'react';
+import {
+  ApplyButton,
+  // DatePickerWrap,
+  FilterColumn,
+  FilterRow,
+  Label,
+  LeftColumn,
+  // RangeSelect,
+  RightColumn,
+  StyledAntSelect,
+  Wrapper,
+} from './Styledfilters';
+// import {
+//   displayFormattedDate,
+//   // overviewFiltersReducerAtom,
+//   lastSundayDate,
+//   filtersReducerAtom,
+//   usefilterApplied,
+// } from './FilterStore';
+import { atom } from 'jotai';
+// import {
+//   allCustomerData,
+//   usePrevSelectedClients,
+//   useSelectedClients,
+//   useSelectedFilter,
+//   useSelectedSubClients,
+// } from '../store';
+// import { useApiHook } from '@bjsdistribution/dms-component-library';
+// import { ApiResponse } from '../../readyforinvoice/types';
+// import { DatePicker, Tooltip } from 'antd';
+// import dayjs from 'dayjs';
+// import { compareArrays, prepareData } from '../utils';
+// import { useReadyForInvoiceView } from '../../readyforinvoice/store';
+// import { emailFiltersReducerAtom } from '../../emailInvoice/EmailFilterStore';
+export const clickedState = atom<boolean>(false);
+
+function SelectionFilter() {
+  // const [, setFilterAplied] = usefilterApplied();
+  // const [selectedFilter] = useSelectedFilter();
+  // const [, dispatchEmailFilters] = useAtom(emailFiltersReducerAtom);
+
+  // const [, dispatchOverviewFilters] = useAtom(overviewFiltersReducerAtom);
+  // const [, dispatchFilters] = useAtom(filtersReducerAtom);
+  // const [
+  //   readyForInvoiceView,
+  //   setReadyForInvoiceView,
+  // ] = useReadyForInvoiceView();
+  // const [prevSelectedDate, setPrevSelectedDate] = useState<
+  //   Date | string | null
+  // >(lastSundayDate); // for comparison
+  // const [selectedDate, setDate] = useState<Date | string | null>(
+  //   lastSundayDate
+  // );
+  // const [customerData, setCustomerData] = allCustomerData();
+
+  // const [
+  //   prevSelectedClients,
+  //   setPrevSelectedClients,
+  // ] = usePrevSelectedClients();
+
+  // const [selectedClients, setClients] = useSelectedClients();
+
+  // const [subAccounts, setSubaccounts] = useState<any>([]);
+
+  // const [selectedSubClients, setSelectedSubClients] = useSelectedSubClients();
+
+  // const [, setIsClicked] = useAtom(clickedState);
+
+  //API
+  // const { data: fetchedStaticData, loading: loading } = useApiHook<ApiResponse>(
+  //   {
+  //     endpoint: `/customer/`,
+  //     method: 'GET',
+  //     pagination: { page: 1, per_page: 50 },
+  //   }
+  // );
+
+  // useEffect(() => {
+  //   if (!loading) {
+  //     setCustomerData(fetchedStaticData?.data);
+  //   }
+  // }, [loading]);
+
+  // const clientOptions = customerData
+  //   ?.filter((x: any) => x.id === x?.parent_id || x?.parent_id === null)
+  //   ?.map((option: any) => ({
+  //     label: option?.name?.charAt(0)?.toUpperCase() + option?.name?.slice(1),
+  //     value: option?.id,
+  //   }));
+
+  // const selectedClientValues = selectedClients?.map(item => item?.value);
+  // const prevSelectedClientValues = prevSelectedClients?.map(
+  //   item => item?.value
+  // );
+
+  // const subAccountData = customerData
+  //   ?.filter(item => selectedClientValues?.includes(item?.parent_id))
+  //   ?.filter(x => x.id !== x.parent_id);
+
+  // const preparedData = prepareData(clientOptions, subAccountData);
+
+  // const subAccountOptions = preparedData?.filter(
+  //   (item: any) => item?.options?.length > 0
+  // );
+
+  // const handleDateChange: DatePickerProps['onChange'] = (date, _dateString) => {
+  //   setFilterAplied(true);
+  //   const newDate = date?.format('YYYY-MM-DDTHH:mm:ss');
+  //   if (newDate !== undefined) {
+  //     setDate(newDate);
+  //   } else {
+  //     setDate(null);
+  //   }
+  // };
+
+  // const handleCustomerChange = (_label: any, value: any) => {
+  //   if (value.length === 0) {
+  //     setReadyForInvoiceView(undefined);
+  //     setPrevSelectedClients(value);
+  //     dispatchOverviewFilters({
+  //       type: 'SET_DATE_FILTER',
+  //       payload: selectedDate,
+  //     });
+  //   }
+  //   setClients(value);
+  // };
+
+  // const onChangeSubAccount = (value: any) => {
+  //   setSubaccounts(value);
+  // };
+
+  // const ApplyFilters = () => {
+  //   setIsClicked(true);
+  //   if (
+  //     readyForInvoiceView !== 'client' &&
+  //     selectedClientValues?.length === 0
+  //   ) {
+  //     console.log('inside if rfiview');
+  //     dispatchOverviewFilters({
+  //       type: 'SET_DATE_FILTER',
+  //       payload: selectedDate,
+  //     });
+  //   }
+  //   if (selectedClientValues?.length > 0) {
+  //     console.log('inside if rfiview asdfasdf');
+  //     dispatchFilters({
+  //       type: 'SET_CUSTOMER_FILTER',
+  //       payload: selectedClientValues,
+  //     });
+  //     dispatchFilters({
+  //       type: 'SET_DATE_FILTER',
+  //       payload: selectedDate,
+  //     });
+  //     if (readyForInvoiceView !== 'client') {
+  //       setReadyForInvoiceView('client');
+  //     }
+  //   }
+  //   dispatchEmailFilters({
+  //     type: 'SET_CUSTOMER_FILTER',
+  //     payload: selectedClientValues,
+  //   });
+  //   dispatchEmailFilters({
+  //     type: 'SET_DATE_FILTERS',
+  //     payload: selectedDate,
+  //   });
+
+  //   // need to update prev selected clients state for comparison
+  //   setPrevSelectedClients(selectedClients);
+  //   setPrevSelectedDate(selectedDate);
+  //   setSelectedSubClients(subAccounts);
+  //   if (selectedClients?.length === 0) {
+  //     setIsClicked(false);
+  //   }
+  // };
+
+  // const isDifferent = () => {
+  //   let actualDate = null;
+  //   let isDateDiff;
+  //   if (selectedDate !== null) {
+  //     actualDate = new Date(selectedDate);
+  //   }
+  //   if (prevSelectedDate !== null && actualDate !== null) {
+  //     isDateDiff =
+  //       actualDate.getTime() !== new Date(prevSelectedDate).getTime();
+  //   }
+  //   if (prevSelectedDate !== null && actualDate === null) {
+  //     isDateDiff = false;
+  //   }
+  //   const isClientDiff = compareArrays(
+  //     selectedClientValues,
+  //     prevSelectedClientValues
+  //   );
+  //   const isSubAccountDiff = compareArrays(subAccounts, selectedSubClients);
+  //   const isSame = isDateDiff || isClientDiff || isSubAccountDiff;
+  //   return !isSame;
+  // };
+  const ActionOptions = [
+    { label: 'RTS', value: 'rt' },
+    { label: 'Dispose', value: 'dispose' },
+    { label: 'Pending', value: 'pending' },
+    { label: 'Re-allocated', value: 're-allocate' },
+    { label: 'Re-Del', value: 're-del' },
+    { label: 'Re-Recycle', value: 're-recycle' },
+    { label: 'Unknown', value: 'unknown' },
+  ];
+
+  const ReturnLocationOptions = [
+    { label: 'bedkingdom wf14 0dq ', value: 'bedkingdom' },
+    { label: 'cotswold returns', value: 'cotswold-returns' },
+    { label: 'appliance house c/o hdl', value: 'appliance' },
+  ];
+
+  return (
+    <Wrapper>
+      <FilterRow>
+        <LeftColumn>
+          <FilterColumn>
+            <Label>Clients</Label>
+            <StyledAntSelect
+              options={[]}
+              placeholder="Select Client Name"
+              onChange={() => {}}
+              mode="multiple"
+              style={{ minWidth: '14vw' }}
+            />
+          </FilterColumn>
+
+          <FilterColumn>
+            <Label>Action Type</Label>
+            <StyledAntSelect
+              options={ActionOptions}
+              placeholder="Select Action Type"
+              // value={""}
+              onChange={() => {}}
+              style={{ minWidth: '14vw' }}
+              // style={{ width: '18vw', overflow: 'hidden' }}
+              mode="multiple"
+              // maxTagCount={0}
+              // maxTagPlaceholder={(omittedValues: any) => (
+              //   <Tooltip
+              //     overlayStyle={{ pointerEvents: 'none' }}
+              //     title={omittedValues
+              //       .map(({ label }: any) => label)
+              //       .join(', ')}
+              //   >
+              //     <span>{`${omittedValues.length} selected`}</span>
+              //   </Tooltip>
+              // )}
+            />
+          </FilterColumn>
+
+          <FilterColumn>
+            <Label>Location </Label>
+            <StyledAntSelect
+              options={ReturnLocationOptions}
+              placeholder="Select Location"
+              onChange={() => {}}
+              mode="multiple"
+              style={{ minWidth: '14vw' }}
+            />
+          </FilterColumn>
+        </LeftColumn>
+        <RightColumn>
+          <ApplyButton colors="secondary">Apply</ApplyButton>
+        </RightColumn>
+      </FilterRow>
+    </Wrapper>
+  );
+}
+
+export default SelectionFilter;

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

@@ -0,0 +1,202 @@
+import { Button } from '@bjsdistribution/dms-component-library';
+import { Select } from 'antd';
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  padding: 20px;
+  gap: 10px;
+  border-radius: 0px 0px 30px 30px;
+  background: #313130;
+  height: 151px;
+  background: url(./assets/bgBlack.png) no-repeat;
+  background-size: cover;
+  background-color: #000000d9;
+`;
+
+export const StyledFlex = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const CoverPage = styled.div`
+  position: relative;
+  border-radius: 16px;
+  border: 1px solid #e3e3e3;
+  background: #fff;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  padding:  20px 20px 20px 20px;
+  top: -60px;
+`;
+export const StatusPanel = styled.div`
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  display: flex;
+  padding: 10px 15px;
+  justify-content: space-between;
+  align-items: center;
+  width: 98%;
+  margin: 0 auto;
+  align-items: center;
+  margin-top: -71px;
+  margin-bottom: 3px;
+
+  h2 {
+    color: #3a3630;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 32px;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 0;
+  }
+  ul {
+    border-radius: 15px;
+    border: 1px solid #d0d5dd;
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background: #f7f7f7;
+
+    li {
+      color: #6a7378;
+      text-align: center;
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      border-right: 1px solid #d0d5dd;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      cursor: pointer;
+
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  padding: 15px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #F8FAFC;
+`;
+
+export const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+`;
+
+export const Label = styled.div`
+  color: #8e8a85;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+export const FilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  justify-content: space-between;
+`;
+
+export const FilterColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  margin: 10px;
+`;
+
+export const RightColumn = styled.div`
+  flex-direction: row;
+  display: flex;
+`;
+
+export const LeftColumn = styled.div`
+  flex-direction: row;
+  display: flex;
+`;
+
+export const DatePickerWrap = styled.div`
+  display: flex;
+  padding-right: 10px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 20px;
+  border: 1px solid #e0e2e7;
+  background: var(--Neutral-White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  min-width: 12vw;
+
+  input[type='text'] {
+    border-radius: 20px;
+    background: var(--Flowkit-White, #fff);
+    border: none;
+    color: #6a7378;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 8px 0;
+    padding-left: 10px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  .react-datepicker-wrapper {
+    background-color: white;
+    border-radius: 66px;
+  }
+
+  .ant-picker-outlined {
+    border-style: none !important;
+  }
+  .ant-btn {
+    background-color: #3348ff !important;
+  }
+`;
+
+export const RangeSelect = styled.div`
+  display: flex;
+  padding: 8px 8px 8px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-right: 1px solid #e0e2e7;
+  background: #f0f2f2;
+  border-radius: 20px 0 0 20px;
+  font-size: 14px;
+  white-space: nowrap;
+  color: #8e8a85;
+`;
+
+export const ApplyButton = styled(Button)`
+  border-radius: 15px !important;
+  display: flex;
+  padding: 7px 12px !important;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px !important;
+  font-family: 'Lato', sans-serif;
+  background: transparent;
+`;

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

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { UsePaginationData, useItemsPerPage } from './store/store';
+import Filters from './filters/Filters';
+// import TableComponent from '../../components/order-daily-overview/table-view/table/Table';
+// 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 Loader from './header/loader/Loader';
+import { useStickyStatus } from '../store';
+import HeaderFilter from './header-filters/HeaderFilter';
+import ReturnTable from './table/ReturnTable';
+// import Loader from '../loader/Loader';
+
+function ReturnMainTable() {
+  const [paginationObj] = UsePaginationData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+
+  const { page, total } = paginationObj;
+
+  const [isScrolled] = useStickyStatus();
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+  ////
+  return (
+    <>
+      {/* <Loader /> */}
+      <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
+        <RouterHeader />
+        <div className="Tableconatiner">
+          <HeaderFilter />
+          <Filters />
+          <ReturnTable />
+          {total > 0 && (
+            <Pagination
+              currentPage={page}
+              totalItems={total}
+              itemsPerPage={itemsPerPage}
+              onPageChange={handlePageChange}
+              onItemsPerPageChange={handleItemsPerPageChange}
+            ></Pagination>
+          )}
+        </div>
+      </DashBoardWrapper>
+      {/* {<Loader />} */}
+    </>
+  );
+}
+
+export default ReturnMainTable;
+
+const DashBoardWrapper = styled.section`
+  .Tableconatiner {
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    display: block;
+    padding: 15px 20px;
+  }
+  .headerWrap,
+  .tableData,
+  .styleCovered {
+    transition: all ease 0.5s;
+  }
+  &.stickyTableHead {
+    h2 {
+      font-size: 21px;
+    }
+    .headerWrap {
+      height: 84px;
+      padding: 10px;
+      border-radius: 0px 0px 15px 15px;
+      > div {
+        position: relative;
+        z-index: 10;
+      }
+    }
+    .styleCovered {
+      margin-top: -32px;
+      width: 67%;
+      float: right;
+      gap: 5px;
+      padding-right: 11px;
+
+      li {
+        padding: 4px 10px 5px 5px;
+        gap: 5px;
+        .svgCover {
+          width: 30px;
+          height: 30px;
+          svg {
+            height: auto;
+            width: 58%;
+          }
+        }
+        .countDigit {
+          font-size: 19px;
+        }
+      }
+      .countMess {
+        font-size: 13px;
+      }
+    }
+    .dmsBulkFilter {
+      min-height: unset;
+      gap: 4px;
+      > div {
+        padding: 4px 12px;
+        label {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .StyledFilterList {
+      gap: 4px;
+      li {
+        height: 29px;
+        padding: 3px 8px;
+        gap: 4px;
+        .StyledFilterBtnIcon {
+          width: 20px;
+          height: 20px;
+          svh {
+            width: 10px;
+            height: auto;
+          }
+        }
+        .StyledFilterBtnLabel {
+          font-size: 13px;
+        }
+      }
+    }
+    .StyledFilterLabel {
+      padding-left: 10px;
+      span {
+        font-size: 13px;
+      }
+    }
+    .cardcontainer.tableData {
+      max-height: calc(100vh - 310px);
+      min-height: calc(100vh - 310px);
+    }
+
+    .tableData {
+      max-height: calc(100vh - 320px);
+      min-height: calc(100vh - 320px);
+
+      margin-top: 8px;
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        th {
+          font-size: 13px;
+          padding: 2px 15px;
+        }
+      }
+    }
+  }
+`;