@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-daily-overview/header/loader/Loader.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+interface LoaderProps {
+  title?: string;
+  subtitle?: string;
+}
+
+function Loader(props: LoaderProps) {
+  return (
+    <MainContainer id="loder">
+      <Container>
+        <Spinner />
+        <Wrapper>
+          <Title>{props.title || 'Loading...'}</Title>
+          <Subtitle>{props.subtitle || `Sit tight - won't be long!`}</Subtitle>
+        </Wrapper>
+      </Container>
+    </MainContainer>
+  );
+}
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+// Styled components for the loading spinner
+const Spinner = styled.div`
+  border: 4px solid rgb(0 0 0 / 50%);
+  border-left-color: #feba30;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: ${rotate} 1s linear infinite;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 25px;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+`;
+
+const Subtitle = styled.span`
+  color: white;
+  font-size: 25px;
+  text-transform: capitalize;
+  font-weight: bold;
+`;
+
+const Title = styled.span`
+  color: white;
+  font-size: 25px;
+  text-transform: capitalize;
+  font-weight: bold;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const MainContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export default Loader;

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

@@ -0,0 +1,71 @@
+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 HeaderTitle from './title/HeaderTitle';
+import Breadcrumb from './breadCrumb/BreadCrumb';
+// import DatePickerIcon from '../../../../assets/icons/DatePickerIcon';
+
+interface RouterHeaderProps {
+  breadcrumbTitle?: string;
+  breadcrumbSubtitle?: string;
+  breadcrumbSubPart?: string;
+  showDateFilter?: boolean;
+}
+
+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">
+        <StyledFlex>
+          <div>
+            <HeaderTitle title={'Return'} />
+            <Breadcrumb
+              title={breadcrumbTitle}
+              subtitle={breadcrumbSubtitle}
+              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>
+    </>
+  );
+};
+
+export default RouterHeader;

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

@@ -0,0 +1,52 @@
+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 GlobalFilterWrapper = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  z-index: 999;
+`;
+
+export const DatePickerWrap = styled.div`
+  position: relative;
+
+  input[type='text'] {
+    border-radius: 20px;
+    background: var(--Flowkit-White, #fff);
+    border: none;
+    color: #6a7378;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 8px 0;
+    padding-left: 33px;
+    max-width: 154px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  svg {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface BreadCrumbProps {
+  title?: string;
+  subtitle?: string;
+  subPart?: string;
+}
+
+function Breadcrumb(props: BreadCrumbProps) {
+  return (
+    <BreadcrumbContainer>
+      <BreadcrumbList>{props.title || ''}</BreadcrumbList>
+      <BreadcrumbList>{props.subtitle || ''}</BreadcrumbList>
+      {props.subPart && (
+        <>
+          <BreadcrumbList>{props.subPart}</BreadcrumbList>
+        </>
+      )}
+    </BreadcrumbContainer>
+  );
+}
+
+const BreadcrumbContainer = styled.div`
+  display: flex;
+`;
+
+const BreadcrumbList = styled.span`
+  color: #edebe8;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+
+export default Breadcrumb;

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+//common
+import styled from 'styled-components';
+import { SearchIcon } from '../../../../../assets/icons';
+
+const SearchType = () => {
+  const [searchText, setSearchText] = useState('');
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  return (
+    <Search>
+      <SearchIcon />
+      <SearchInput
+        type="text"
+        placeholder="Search"
+        value={searchText}
+        onChange={handleInputChange}
+      />
+    </Search>
+  );
+};
+const Search = styled.div`
+  position: relative;
+  svg {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+Search;
+const SearchInput = styled.input`
+  border-radius: 20px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  display: flex;
+  padding: 8.5px 12px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  padding-left: 39px;
+`;
+export default SearchType;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface TitleProps {
+  title: string;
+}
+
+const HeaderTitle = (props: TitleProps) => {
+  return (
+    <>
+      <Title>{props.title}</Title>
+    </>
+  );
+};
+
+export default HeaderTitle;
+const Title = styled.h2`
+  margin: 0px;
+  padding: 0px;
+  color: #fff;
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 36px;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+`;

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import { useAtom } from 'jotai';
+
+// Shared
+import { TableColumn } from '../../shared/interface';
+import {
+  visibleColumnsAtom,
+  initialVisibleColumns,
+  useToggleColumn,
+} from '../../store/store';
+import {
+  StyledFilterData,
+  StyledFilterDataCover,
+  StyledFilterOptions,
+  StyledSvgCover,
+} from './TableFilterStyle';
+
+// Componets
+// import BulkFilterIcon from '../../../assets/icons/BulkFilterIcon';
+import CheckBoxWrapper from '../checkbox-wrapper/CheckBoxWrapper';
+import BulkFilterIcon from '../../../../assets/icons/BulkFilterIcon';
+
+// Interface & Types
+interface TableFilterProps {
+  tableData: TableColumn[];
+}
+
+const StyledTableFilter: React.FC<TableFilterProps> = ({ tableData }) => {
+  // States
+  const [isDropdownOpen, setIsDropdownOpen] = useToggleColumn();
+  const [visibleColumns, setVisibleColumns] = useAtom(visibleColumnsAtom);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Hooks
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setIsDropdownOpen]);
+
+  useEffect(() => {
+    const storedColumns = localStorage.getItem('visibleColumnsOrder');
+    if (storedColumns) {
+      setVisibleColumns(JSON.parse(storedColumns));
+    } else {
+      setVisibleColumns(initialVisibleColumns(tableData));
+    }
+  }, [tableData, setVisibleColumns]);
+
+  useEffect(() => {
+    localStorage.setItem('visibleColumnsOrder', JSON.stringify(visibleColumns));
+  }, [visibleColumns]);
+
+  // Functions
+  const handleColumnVisibilityChange = (key: string) => {
+    setVisibleColumns((prevState :any) =>
+      prevState.includes(key)
+        ? prevState.filter((col:any) => col !== key)
+        : [...prevState, key]
+    );
+  };
+
+  const toggleMenu = () => {
+    setIsDropdownOpen((prevState:any) => !prevState);
+  };
+
+  return (
+    <StyledFilterDataCover>
+      <StyledFilterData onClick={toggleMenu}>
+        <StyledSvgCover>
+          <BulkFilterIcon />
+        </StyledSvgCover>
+      </StyledFilterData>
+
+      {isDropdownOpen && (
+        <div ref={dropdownRef}>
+          <StyledFilterOptions>
+            <CheckBoxWrapper
+              columns={tableData}
+              visibleColumns={visibleColumns}
+              handleColumnVisibilityChange={handleColumnVisibilityChange}
+            />
+          </StyledFilterOptions>
+        </div>
+      )}
+    </StyledFilterDataCover>
+  );
+};
+
+export default StyledTableFilter;

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

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+// Styled Components
+export const StyledFilterDataCover = styled.div`
+  position: relative;
+`;
+
+export const StyledFilterData = styled.div`
+  position: relative;
+  padding: 3px 4px;
+  cursor: pointer;
+`;
+
+export const StyledSvgCover = styled.div`
+  margin-right: 9px;
+  display: flex;
+  align-items: center;
+`;
+
+export const StyledFilterOptions = styled.div`
+         position: absolute;
+         top: 42px;
+         width: 169px;
+         padding: 5px 1px 3px 1px;
+         border-radius: 6px;
+         border: 1px solid rgba(224, 226, 231, 0.5);
+         background: #fff;
+         box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+         right: -9px;
+         z-index: 99;
+
+         label {
+           display: block;
+           text-align: left;
+           padding: 6px 10px;
+           margin-right: 0;
+           display: flex;
+           gap: 8px;
+           position: relative;
+           padding-left: 39px;
+           input {
+             position: absolute;
+             left: 7px;
+             top: 4px;
+             opacity: 0;
+           }
+         }
+       `;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+// import styled from 'styled-components';
+// import { CoverPage, StatusPanel } from '../invoice-header/InvoiceStyles';
+
+import { CoverPage } from './Styledfilters';
+import SelectionFilter from './SelectionFilter';
+
+function HeaderFilter() {
+
+
+  return (
+    <CoverPage>
+     
+        <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;