feat(issue #1010 and #1008):Implemented left and right arrow adjustments of timebox and date filters

frontend/app/src/pages/superadmin/header/HeaderStyles.tsx

@@ -137,6 +137,61 @@ export const Select = styled.select`
   color: var(--White, #fff);
 `;
 
+export const Option = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 130px;
+  right: 48px;
+  width: 169px;
+  height: 157px;
+  display: inline-flex;
+  padding: 12px 28px 12px 28px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    color: grey;
+  }
+
+  li {
+    padding: 4px;
+    cursor: pointer;
+    color: grey;
+    font-family: 'Barlow', sans-serif;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+
+    &:hover {
+      color: #3c3f41;
+    }
+  }
+`;
+
+export const CustomButton = styled.button`
+  display: flex;
+  width: 113px;
+  height: 40px;
+  padding: 8px 8px 8px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  outline: none;
+  border-radius: 6px;
+  background: var(--Primary-blue, #618aff);
+  box-shadow: 0px 2px 10px 0px rgba(97, 138, 255, 0.5);
+  color: white;
+`;
+
 export const Flex = styled.div`
   display: flex;
 `;

frontend/app/src/pages/superadmin/header/SuperAdminHeader.spec.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within, act } from '@testing-library/react';
+import moment from 'moment';
 import nock from 'nock';
 import React from 'react';
 import { setupStore } from '../../../__test__/__mockData__/setupStore';
@@ -16,16 +17,71 @@ beforeAll(() => {
 /**
  * @jest-environment jsdom
  */
-describe('AboutView Component', () => {
+describe('Header Component', () => {
+  beforeEach(() => {
+    nock.cleanAll();
+  });
+
   nock(user.url).get('/person/id/1').reply(200, {});
-  test('display about view with extras', () => {
-    const hardCodedDateRange = '01 Oct - 31 Dec 2023';
+
+  test('displays header with extras', async () => {
+    const setStartDateMock = jest.fn();
+    const setEndDateMock = jest.fn();
     const exportCSVText = 'Export CSV';
-    const initDateRange = '7 days';
 
-    render(<Header />);
-    expect(screen.queryByText(hardCodedDateRange)).toBeInTheDocument();
-    expect(screen.queryByText(exportCSVText)).toBeInTheDocument();
-    expect(screen.queryByText(initDateRange)).toBeInTheDocument();
+    const { rerender } = render(
+      <Header
+        startDate={moment().subtract(7, 'days').startOf('day').unix()}
+        endDate={moment().startOf('day').unix()}
+        setStartDate={setStartDateMock}
+        setEndDate={setEndDateMock}
+      />
+    );
+
+    const today = moment().startOf('day');
+    const expectedStartDate = today.clone().subtract(7, 'days');
+    const expectedEndDate = today;
+
+    const leftWrapperElement = screen.getByTestId('leftWrapper');
+    const monthElement = within(leftWrapperElement).getByTestId('month');
+
+    expect(monthElement).toBeInTheDocument();
+    expect(monthElement).toHaveTextContent(
+      `${expectedStartDate.format('DD-MMM')} - ${expectedEndDate.format('DD-MMM-YYYY')}`
+    );
+
+    expect(screen.getByText(exportCSVText)).toBeInTheDocument();
+
+    act(() => {
+      rerender(
+        <Header
+          startDate={moment().subtract(30, 'days').startOf('day').unix()}
+          endDate={moment().startOf('day').unix()}
+          setStartDate={setStartDateMock}
+          setEndDate={setEndDateMock}
+        />
+      );
+    });
+
+    const StartDate30 = today.clone().subtract(30, 'days');
+    expect(monthElement).toHaveTextContent(
+      `${StartDate30.format('DD-MMM')} - ${expectedEndDate.format('DD-MMM-YYYY')}`
+    );
+
+    act(() => {
+      rerender(
+        <Header
+          startDate={moment().subtract(90, 'days').startOf('day').unix()}
+          endDate={moment().startOf('day').unix()}
+          setStartDate={setStartDateMock}
+          setEndDate={setEndDateMock}
+        />
+      );
+    });
+
+    const StartDate90 = today.clone().subtract(90, 'days');
+    expect(monthElement).toHaveTextContent(
+      `${StartDate90.format('DD-MMM')} - ${expectedEndDate.format('DD-MMM-YYYY')}`
+    );
   });
 });

frontend/app/src/pages/superadmin/header/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import moment from 'moment';
 import {
   AlternateWrapper,
   ButtonWrapper,
@@ -8,48 +9,147 @@ import {
   ArrowButton,
   DropDown,
   LeftWrapper,
-  Select,
   RightWrapper,
-  Container
+  Container,
+  Option,
+  CustomButton
 } from './HeaderStyles';
 import arrowback from './icons/arrowback.svg';
 import arrowforward from './icons/arrowforward.svg';
+import expand_more from './icons/expand_more.svg';
 //import './Header.css';
+interface HeaderProps {
+  startDate?: number;
+  endDate?: number;
+  setStartDate: (newDate: number) => void;
+  setEndDate: (newDate: number) => void;
+}
+export const Header = ({ startDate, setStartDate, endDate, setEndDate }: HeaderProps) => {
+  const [showSelector, setShowSelector] = useState(false);
+  const [dateDiff, setDateDiff] = useState(7);
+  const formatUnixDate = (unixDate: number, includeYear: boolean = true) => {
+    const formatString = includeYear ? 'DD-MMM-YYYY' : 'DD-MMM';
+    return moment.unix(unixDate).format(formatString);
+  };
 
-const DateFilterObject = {
-  7: '7 days',
-  30: '30 days',
-  45: '45 days'
-};
+  const handleBackClick = () => {
+    if (startDate !== undefined && endDate !== undefined) {
+      const newStartDate = moment.unix(startDate).subtract(dateDiff, 'days').unix();
+      const newEndDate = moment.unix(endDate).subtract(dateDiff, 'days').unix();
+      setStartDate(newStartDate);
+      setEndDate(newEndDate);
+    }
+  };
+
+  const handleForwardClick = () => {
+    if (startDate !== undefined && endDate !== undefined) {
+      const newStartDate = moment.unix(startDate).add(dateDiff, 'days').unix();
+      const newEndDate = moment.unix(endDate).add(dateDiff, 'days').unix();
+
+      const todayUnix = moment().startOf('day').unix();
+      const cappedEndDate = Math.min(newEndDate, todayUnix);
+
+      setStartDate(newStartDate);
+      setEndDate(cappedEndDate);
+    }
+  };
+
+  const handleDropDownChange = (option: number) => {
+    const selectedValue = Number(option);
+    setDateDiff(selectedValue);
+
+    if (startDate && endDate) {
+      const currentEndDate = moment.unix(endDate);
+      let newStartDate;
+
+      if (selectedValue === 7) {
+        newStartDate = currentEndDate.clone().subtract(option, 'days').unix();
+      } else if (selectedValue === 30) {
+        newStartDate = currentEndDate.clone().subtract(option, 'days').unix();
+      } else if (selectedValue === 90) {
+        newStartDate = currentEndDate.clone().subtract(option, 'days').unix();
+      }
+      newStartDate = Math.max(
+        newStartDate,
+        currentEndDate.clone().subtract(selectedValue, 'days').unix()
+      );
 
-export const Header = () => (
-  <Container>
-    <AlternateWrapper>
-      <LeftWrapper>
-        <ButtonWrapper>
-          <ArrowButton>
-            <img src={arrowback} alt="" />
-          </ArrowButton>
-          <ArrowButton>
-            <img src={arrowforward} alt="" />
-          </ArrowButton>
-        </ButtonWrapper>
-        <Month>01 Oct - 31 Dec 2023</Month>
-      </LeftWrapper>
-      <RightWrapper>
-        <ExportButton>
-          <ExportText>Export CSV</ExportText>
-        </ExportButton>
-        <DropDown>
-          <Select name="" id="">
-            {Object.keys(DateFilterObject).map((key: any) => (
-              <option key={key} value={DateFilterObject[key]}>
-                {DateFilterObject[key]}
-              </option>
-            ))}
-          </Select>
-        </DropDown>
-      </RightWrapper>
-    </AlternateWrapper>
-  </Container>
-);
+      setStartDate(newStartDate);
+    }
+  };
+
+  const currentDateUnix = moment().unix();
+  const optionRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (optionRef.current && !optionRef.current.contains(event.target as Node)) {
+        setShowSelector(!showSelector);
+      }
+    };
+
+    window.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      window.removeEventListener('click', handleOutsideClick);
+    };
+  }, [showSelector]);
+
+  return (
+    <Container>
+      <AlternateWrapper>
+        <LeftWrapper data-testid="leftWrapper">
+          {startDate && endDate ? (
+            <>
+              <ButtonWrapper>
+                <ArrowButton onClick={() => handleBackClick()}>
+                  <img src={arrowback} alt="" />
+                </ArrowButton>
+                <ArrowButton
+                  disabled={
+                    endDate === currentDateUnix ||
+                    moment.unix(endDate).isSameOrAfter(moment().startOf('day'))
+                  }
+                  onClick={() => handleForwardClick()}
+                >
+                  <img src={arrowforward} alt="" />
+                </ArrowButton>
+              </ButtonWrapper>
+              <Month data-testid="month">
+                {formatUnixDate(startDate, false)} - {formatUnixDate(endDate)}
+              </Month>
+            </>
+          ) : null}
+        </LeftWrapper>
+        <RightWrapper>
+          <ExportButton>
+            <ExportText>Export CSV</ExportText>
+          </ExportButton>
+          <DropDown
+            data-testid="DropDown"
+            onClick={() => {
+              setShowSelector(!showSelector);
+            }}
+          >
+            Last {dateDiff} Days
+            <div>
+              <img src={expand_more} alt="a" />
+            </div>
+            {showSelector ? (
+              <Option ref={optionRef}>
+                <ul>
+                  <li onClick={() => handleDropDownChange(7)}>7 Days</li>
+                  <li onClick={() => handleDropDownChange(30)}>30 Days</li>
+                  <li onClick={() => handleDropDownChange(90)}>90 Days</li>
+                  <li>
+                    <CustomButton>Custom</CustomButton>
+                  </li>
+                </ul>
+              </Option>
+            ) : null}
+          </DropDown>
+        </RightWrapper>
+      </AlternateWrapper>
+    </Container>
+  );
+};