@bjsdistribution/dms-client-return 0.0.1

package/src/common/checkbox/index.tsx

@@ -0,0 +1,111 @@
+import React, { InputHTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  checked: boolean;
+  icon?: React.ReactNode;
+  imageSrc: string;
+  label: string;
+}
+
+function Checkbox(props: CheckboxProps) {
+  const { imageSrc, label, checked, ...rest } = props;
+  return (
+    <MainContainer $checked={checked}>
+      {/* Custom Checkbox */}
+      <CheckboxContainer>
+        <HiddenCheckbox type="checkbox" {...rest} />
+        <CircleContainer>
+          <Circle $checked={checked} />
+        </CircleContainer>
+      </CheckboxContainer>
+      <InformationContainer>
+        <Image src={imageSrc} $checked={checked} className="checkbox-img" />
+        <Text $checked={checked}>{label}</Text>
+      </InformationContainer>
+    </MainContainer>
+  );
+}
+
+const Image = styled.img<{ $checked: boolean }>`
+  height: 28px;
+  width: 20px;
+  filter: ${props => (props.$checked ? 'grayscale(0)' : 'grayscale(1)')};
+`;
+
+const CircleContainer = styled.span`
+  height: 20px;
+  width: 20px;
+  border: 1px solid #e0e2e7;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+`;
+
+const Circle = styled.span<{ $checked: boolean }>`
+  height: 14px;
+  width: 14px;
+  background: ${props => (props.$checked ? '#feba30' : 'white')};
+  border-radius: 50%;
+  display: inline-block;
+  transition: 0.2s ease all;
+`;
+
+const Text = styled.span<{ $checked: boolean }>`
+  color: ${props => (props.$checked ? '#3a3630' : 'rgba(58, 54, 48, 0.50)')};
+  font-family: 'lato', sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const InformationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+`;
+
+const CheckboxContainer = styled.div`
+  display: flex;
+`;
+
+const HiddenCheckbox = styled.input`
+  border: 0;
+  height: 100%;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 100%;
+  opacity: 0;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+`;
+
+const MainContainer = styled.div<{ $checked: boolean }>`
+  display: flex;
+  width: 130px;
+  height: 93px;
+  gap: 10px;
+  border-radius: 15px;
+  border: 1px solid ${props => (props.$checked ? '#cbc8c2' : '#e0e2e7')};
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &:hover {
+    border: 1px solid #cbc8c2;
+    .checkbox-img {
+      filter: grayscale(0);
+    }
+  }
+`;
+
+export default Checkbox;

package/src/common/copy/CopyText.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CopyIcon } from '../../assets/icons';
+import useCopyToClipboard from '../hooks/useCopyToClipboard';
+
+interface IProps {
+  text: string | number;
+}
+
+function CopyText(props: IProps) {
+  const copy = useCopyToClipboard();
+
+  return (
+    <IconContainer onClick={() => copy(props.text)}>
+      <CopyIcon fill="#6396e5" />
+    </IconContainer>
+  );
+}
+
+const IconContainer = styled.div`
+  cursor: pointer;
+`;
+
+export default CopyText;

package/src/common/custom-switch/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { options } from '../../components/fakeData';
+import SwitchSelector from 'react-switch-selector';
+
+interface CustomSwitchSelectorProps {
+  onSwitchChange: (newValue: string) => void;
+}
+
+const CustomSwitchSelector: React.FC<CustomSwitchSelectorProps> = ({
+  onSwitchChange,
+}) => {
+  const initialSelectedIndex = options.findIndex(
+    ({ value }) => value === 'task'
+  );
+
+  const handleSwitchChange = (selectedOptionValue: unknown) => {
+    if (typeof selectedOptionValue === 'string') {
+      onSwitchChange(selectedOptionValue);
+    } else {
+      console.error(
+        'Unexpected type for selectedOptionValue:',
+        typeof selectedOptionValue
+      );
+    }
+  };
+
+  return (
+    <StyledSwitch>
+      <SwitchSelector
+        onChange={handleSwitchChange}
+        options={options}
+        initialSelectedIndex={initialSelectedIndex}
+        backgroundColor={'#cbc8c2'}
+        fontColor={'#f5f6fa'}
+        optionBorderRadius={30}
+      />
+    </StyledSwitch>
+  );
+};
+
+const StyledSwitch = styled.div`
+  width: 35%;
+  height: 40px;
+  .react-switch-selector-wrapper {
+    background: #777777;
+  }
+`;
+
+export default CustomSwitchSelector;

package/src/common/date-picker/CustomDatePicker.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import styled from 'styled-components';
+import DatePickerHeader from './header/DatePickerHeader';
+
+interface Props {
+  date: Date | undefined;
+  onSelect: (newDate: Date) => void;
+  type: string;
+  maxStartDate?: Date;
+  from: Date;
+  children?: React.ReactNode;
+}
+
+function CustomDatePicker({
+  date,
+  onSelect,
+  children,
+
+  type,
+  maxStartDate,
+  from,
+}: Props) {
+
+  return (
+    <Container>
+      {type === 'till' && (
+        <DatePicker
+          children={<div>{children}</div>}
+          inline
+          disabledKeyboardNavigation
+          showMonthDropdown
+          showPopperArrow={false}
+          selected={date}
+          maxDate={maxStartDate ? maxStartDate : new Date()}
+          minDate={from}
+          onChange={(date: Date) => onSelect(date)}
+          renderCustomHeader={props => <DatePickerHeader {...props} />}
+        />
+      )}
+      {type === 'from' && (
+        <DatePicker
+          children={<div>{children}</div>}
+          inline
+          showMonthDropdown
+          disabledKeyboardNavigation
+          showPopperArrow={false}
+          selected={date}
+          maxDate={maxStartDate ? maxStartDate : new Date()}
+          onChange={(date: Date) => onSelect(date)}
+          renderCustomHeader={props => <DatePickerHeader {...props} />}
+        />
+      )}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  .react-datepicker__current-month {
+    font-weight: 500;
+    font-size: 18px;
+    color: white;
+  }
+  .react-datepicker__header {
+    background: none;
+    display: flex;
+    flex-direction: column;
+    border-bottom: none;
+  }
+  .react-datepicker {
+    padding: 0 30px;
+    border: none;
+    background: #1b2020 0% 0% no-repeat padding-box;
+    /* box-shadow: 0px 0px 30px #4158a266; */
+    border-radius: 10px;
+  }
+
+  .react-datepicker__day-names {
+    display: flex;
+    justify-content: space-between;
+    max-width: 390px;
+    margin-left: 15px; //Magic values to align
+  }
+  .react-datepicker__day-name {
+    color: rgba(255, 255, 255, 0.5);
+    font-weight: bold;
+    font-size: 13px;
+  }
+
+  .react-datepicker__day {
+    font-size: 18px;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .react-datepicker__day:hover {
+    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
+      0% no-repeat padding-box;
+    border-radius: 50%;
+  }
+  .react-datepicker__day,
+  .react-datepicker__time-name {
+    color: white;
+  }
+
+  .react-datepicker__week {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
+      0% no-repeat padding-box;
+    border-radius: 50%;
+    color: black;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .react-datepicker__day--today {
+    color: #6396e5;
+    font-weight: normal;
+  }
+  .react-datepicker__day--selected {
+    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
+      0% no-repeat padding-box;
+    border-radius: 50%;
+    color: black;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .react-datepicker__day--disabled {
+    opacity: 0.5;
+    background: transparent;
+    color: #fff;
+  }
+`;
+export default styled(CustomDatePicker)``;

package/src/common/date-picker/FilterByType.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import RangeDateFilter from './range-date-filter';
+import SingleDateFilter from './single-date-filter/SingleDateFilter';
+
+function FilterByType({
+  startDate,
+  setStartDate,
+  setEndDate,
+  endDate,
+  type,
+}: any) {
+  if (type === 'single') {
+    return (
+      <SingleDateFilter
+        startDate={startDate}
+        setStartDate={setStartDate}
+        setEndDate={setEndDate}
+      />
+    );
+  }
+  return (
+    <RangeDateFilter
+      startDate={startDate}
+      endDate={endDate}
+      setStartDate={setStartDate}
+      setEndDate={setEndDate}
+    />
+  );
+}
+
+export default styled(FilterByType)``;

package/src/common/date-picker/header/ClearDate.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithoutRef } from 'react';
+import styled from 'styled-components';
+import CloseIcon from '../../../assets/icons/CloseIcon';
+
+type Props = PropsWithoutRef<JSX.IntrinsicElements['div']>;
+
+function ClearDate(props: Props) {
+  return (
+    <Container {...props}>
+      <CloseIcon />
+      <Text>Clear date</Text>
+    </Container>
+  );
+}
+
+const Text = styled.span`
+  color: #a3a5a5;
+  font-size: 15px;
+  font-family: 'Lato', sans-serif;
+  text-decoration: underline;
+  color: inherit;
+  cursor: pointer;
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #a3a5a5;
+`;
+
+export default styled(ClearDate)``;

package/src/common/date-picker/header/DatePickerHeader.tsx

@@ -0,0 +1,70 @@
+import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
+import styled, { css } from 'styled-components';
+import React from 'react';
+import MonthOrYearPicker from './MonthOrYearPicker';
+import Left from '../../../assets/icons/Leftarrow';
+import Right from '../../../assets/icons/Rightarrow';
+
+type Props = ReactDatePickerCustomHeaderProps;
+
+function DatePickerHeader(props: Props) {
+  return (
+    <Container>
+      <IconContainer
+        onClick={props.decreaseMonth}
+        $disabled={props.prevMonthButtonDisabled}
+      >
+        <Left />
+      </IconContainer>
+      <PickerContainer>
+        <MonthOrYearPicker
+          type={'month'}
+          date={props.date}
+          onSelect={(newMonthIndex: number) => props.changeMonth(newMonthIndex)}
+        />
+        <MonthOrYearPicker
+          type={'year'}
+          date={props.date}
+          onSelect={(newYear: number) => props.changeYear(newYear)}
+        />
+      </PickerContainer>
+      <Wrapper $disabled={props.nextMonthButtonDisabled}>
+        <IconContainer
+          onClick={props.increaseMonth}
+          $disabled={props.nextMonthButtonDisabled}
+        >
+          <Right />
+        </IconContainer>
+      </Wrapper>
+    </Container>
+  );
+}
+
+const DisabledArrow = css`
+  opacity: 0.3;
+  pointer-events: none;
+`;
+
+const Wrapper = styled.div<{ $disabled: boolean }>`
+  ${props => props.$disabled && 'cursor: not-allowed'};
+`;
+
+const IconContainer = styled.div<{ $disabled: boolean }>`
+  ${props => props.$disabled && DisabledArrow};
+`;
+
+const PickerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 186px;
+  max-width: 186px;
+`;
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export default styled(DatePickerHeader)``;

package/src/common/date-picker/header/DatePickerHeaderDropdown.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface Props {
+  options: string[];
+  selected?: string;
+  onSelect: (option: number) => void;
+  useIndex?: boolean;
+}
+function DatePickerHeaderDropdown({
+  options,
+  selected,
+  useIndex,
+  onSelect,
+}: Props) {
+  return (
+    <Container>
+      {options.map((option, index) => (
+        <Option
+          key={option}
+          onClick={() => {
+            if (useIndex) {
+              onSelect(index);
+            } else {
+              onSelect((option as any) as number);
+            }
+          }}
+          $selected={selected === option}
+        >
+          {option}
+        </Option>
+      ))}
+    </Container>
+  );
+}
+
+const SelectedStyle = css`
+  background: rgba(117, 133, 136, 0.15);
+  font-weight: bold;
+`;
+
+const Option = styled.div<{ $selected: boolean }>`
+  padding: 10px;
+  font-size: 15px;
+  color: #3a3630;
+
+  ${props => props.$selected && SelectedStyle};
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  max-height: 325px;
+  border-radius: 6px;
+  background: white;
+  padding: 5px;
+  position: absolute;
+  overflow: auto;
+  width: 185px;
+  z-index: 10;
+  top: 50px;
+`;
+export default DatePickerHeaderDropdown;

package/src/common/date-picker/header/Header.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import PromptOrClearDate from './PromptOrClearDate';
+
+function Header({ startDate, setStartDate }: any) {
+  const clearDate = () => setStartDate(undefined);
+
+  return (
+    <PromptOrClearDate
+      date={startDate}
+      clearDate={clearDate}
+      promptText="Please select a date"
+    />
+  );
+}
+
+export default styled(Header)``;

package/src/common/date-picker/header/MonthOrYearPicker.tsx

@@ -0,0 +1,106 @@
+import { format } from 'date-fns';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import DatePickerHeaderDropdown from './DatePickerHeaderDropdown';
+import ChevronDownIcon from '../../../assets/icons/ChevronDownIcon';
+
+type MonthOrYear = 'month' | 'year';
+interface Props {
+  type: MonthOrYear;
+  date: Date;
+  onSelect: (newValue: number) => void;
+}
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const generateYears = (): number[] => {
+  const years: any = [];
+  const currentYear = new Date().getFullYear();
+  for (let i = 1990; i < currentYear + 1; i++) {
+    years.push(i);
+  }
+  return years.reverse();
+};
+
+function MonthOrYearPicker({ type, date, onSelect }: Props) {
+  const [open, setOpen] = useState(false);
+  const toggle = () => setOpen(old => !old);
+
+  const current = useMemo(() => {
+    if (type === 'month') {
+      return format(date, 'LLLL');
+    } else if (type === 'year') {
+      return format(date, 'yyyy');
+    }
+    return `Cannot find ${type}`;
+  }, [date, type]);
+
+  const options: string[] = useMemo(() => {
+    switch (type) {
+      case 'month':
+        return months;
+      case 'year':
+        return generateYears().map(year => `${year}`);
+      default:
+        return [];
+    }
+  }, [type]);
+
+  return (
+    <Container onClick={toggle}>
+      <Current>{current}</Current>
+      <div>
+        {' '}
+        {open ? (
+          <ChevronDownIcon fill="#C2C6CE" />
+        ) : (
+          <ChevronUpIcon fill="#C2C6CE" />
+        )}{' '}
+      </div>
+      {open && (
+        <DatePickerHeaderDropdown
+          options={options}
+          selected={current}
+          onSelect={onSelect}
+          useIndex={type === 'month'}
+        />
+      )}
+    </Container>
+  );
+}
+
+const ChevronUpIcon = styled(ChevronDownIcon)`
+  transform: rotate(180deg);
+  cursor: pointer;
+`;
+
+const Current = styled.span`
+  color: white;
+  font-weight: 500;
+  font-size: 18px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  margin-right: 20px;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.4);
+  position: relative;
+`;
+
+export default MonthOrYearPicker;

package/src/common/date-picker/header/PromptOrClearDate.tsx

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import React from 'react';
+import ClearDate from './ClearDate';
+
+import { format } from 'date-fns';
+import { ReactElement, useMemo } from 'react';
+
+interface Props {
+  date?: Date;
+  clearDate: () => void;
+  promptText: string | ReactElement;
+}
+
+function PromptOrClearDate({ date, clearDate, promptText }: Props) {
+  const selectedDate = useMemo(() => {
+    if (!date) {
+      return '';
+    }
+    return format(date, 'dd MMMM yyyy');
+  }, [date]);
+
+  return (
+    <Container>
+      {date && (
+        <>
+          <SelectedDate>{selectedDate}</SelectedDate>
+          <ClearDate onClick={clearDate} />
+        </>
+      )}
+      {!date && <Prompt>{promptText}</Prompt>}
+    </Container>
+  );
+}
+
+const SelectedDate = styled.span`
+  font-size: 15px;
+  font-weight: bold;
+  font-family: 'Lato', sans-serif;
+  color: #55d5f2;
+`;
+
+export const Prompt: any = styled.span`
+  color: #feba30;
+  font-size: 15px;
+  font-family: 'Lato', sans-serif;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 90px;
+  padding: 0 30px;
+`;
+
+export default PromptOrClearDate;