Implement sort by newest and oldest filters on org page

package.json

@@ -206,4 +206,4 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.2"
   }
-}
+}

src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx

@@ -66,9 +66,10 @@ describe('Header Component', () => {
     });
 
     const StartDate30 = today.clone().subtract(30, 'days');
-    expect(monthElement).toHaveTextContent(
-      `${StartDate30.format('DD MMM')} - ${expectedEndDate.format('DD MMM YYYY')}`
-    );
+    const expectedTextForSameYear = `${StartDate30.format('DD MMM')} - ${expectedEndDate.format(
+      'DD MMM YYYY'
+    )}`;
+    expect(monthElement).toHaveTextContent(expectedTextForSameYear);
 
     act(() => {
       rerender(

src/pages/tickets/org/orgHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { EuiCheckboxGroup, EuiPopover, EuiText } from '@elastic/eui';
 import MaterialIcon from '@material/react-material-icon';
 import { PostModal } from 'people/widgetViews/postBounty/PostModal';
@@ -53,6 +53,18 @@ const color = colors['light'];
 const Coding_Languages = GetValue(coding_languages);
 
 const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
+
+const sortDirectionOptions = [
+  {
+    id: 'desc',
+    label: 'Newest First'
+  },
+  {
+    id: 'asc',
+    label: 'Oldest First'
+  }
+];
+
 export const OrgHeader = ({
   onChangeLanguage,
   checkboxIdToSelectedMapLanguage,
@@ -67,6 +79,9 @@ export const OrgHeader = ({
   const [filterClick, setFilterClick] = useState(false);
   const [canPostBounty, setCanPostBounty] = useState(false);
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
+  const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false);
+  const [sortDirection, setSortDirection] = useState<string>('desc');
+
   const onButtonClick = async () => {
     setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
@@ -85,6 +100,30 @@ export const OrgHeader = ({
     }
   }, [ui.meInfo, org_uuid, main]);
 
+  const sortDirectionLabel = useMemo(
+    () => (sortDirection === 'asc' ? 'Oldest First' : 'Newest First'),
+    [sortDirection]
+  );
+
+  const onSortButtonClick = async () => {
+    setIsSortByPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
+  };
+
+  const closeSortByPopover = () => setIsSortByPopoverOpen(false);
+
+  useEffect(() => {
+    const checkUserPermissions = async () => {
+      const isLoggedIn = !!ui.meInfo;
+      const hasPermission =
+        isLoggedIn && (await userCanManageBounty(org_uuid, ui.meInfo?.pubkey, main));
+      setCanPostBounty(hasPermission);
+    };
+
+    if (ui.meInfo && org_uuid) {
+      checkUserPermissions();
+    }
+  }, [ui.meInfo, org_uuid, main]);
+
   const selectedWidget = 'wanted';
 
   const filterRef = useRef<HTMLDivElement | null>(null);
@@ -109,7 +148,8 @@ export const OrgHeader = ({
         page: 1,
         resetPage: true,
         ...checkboxIdToSelectedMap,
-        languageString
+        languageString,
+        direction: sortDirection
       });
     }
   }, [org_uuid, checkboxIdToSelectedMap, main, languageString]);
@@ -134,12 +174,36 @@ export const OrgHeader = ({
     return () => {
       window.removeEventListener('click', handleWindowClick);
     };
-  }, [filterClick]);
+  }, [org_uuid, checkboxIdToSelectedMap, languageString, main, filterClick]);
 
   return (
     <>
       <FillContainer>
         <Header>
+          <Leftheader>
+            <ImageContainer src={img} width="72px" height="72px" alt="organization icon" />
+            <CompanyNameAndLink>
+              <CompanyLabel>{name}</CompanyLabel>
+              <UrlButtonContainer data-testid="url-button-container">
+                {website !== '' ? (
+                  <UrlButton onClick={() => handleWebsiteButton(website ?? '')}>
+                    <img src={websiteIcon} alt="" />
+                    Website
+                  </UrlButton>
+                ) : (
+                  ''
+                )}
+                {github !== '' ? (
+                  <UrlButton onClick={() => handleGithubButton(github ?? '')}>
+                    <img src={githubIcon} alt="" />
+                    Github
+                  </UrlButton>
+                ) : (
+                  ''
+                )}
+              </UrlButtonContainer>
+            </CompanyNameAndLink>
+          </Leftheader>
           <Leftheader>
             <ImageContainer src={img} width="72px" height="72px" alt="organization icon" />
             <CompanyNameAndLink>
@@ -222,7 +286,7 @@ export const OrgHeader = ({
                 <div
                   style={{
                     display: 'flex',
-                    flexDirection: 'row'
+                    flex: 'row'
                   }}
                 >
                   <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
@@ -266,14 +330,61 @@ export const OrgHeader = ({
               <Icon src={searchIcon} alt="Search" />
             </SearchWrapper>
           </FiltersRight>
-          <FiltersLeft>
-            <SoryByContainer>
-              <FilterLabel>Sort by:Newest First</FilterLabel>
-              <DropDownButton>
-                <Img src={dropdown} alt="" />
-              </DropDownButton>
-            </SoryByContainer>
-          </FiltersLeft>
+          <EuiPopover
+            button={
+              <StatusContainer onClick={onSortButtonClick} className="CheckboxOuter" color={color}>
+                <div style={{ minWidth: '145px' }}>
+                  <EuiText
+                    className="statusText"
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  >
+                    Sort By: {sortDirectionLabel}
+                  </EuiText>
+                </div>
+
+                <div className="filterStatusIconContainer">
+                  <MaterialIcon
+                    className="materialStatusIcon"
+                    icon={`${isSortByPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}`}
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  />
+                </div>
+              </StatusContainer>
+            }
+            panelStyle={{
+              border: 'none',
+              boxShadow: `0px 1px 20px ${color.black90}`,
+              background: `${color.pureWhite}`,
+              borderRadius: '0px 0px 6px 6px',
+              maxWidth: '140px',
+              marginTop: '0px',
+              marginRight: '30px'
+            }}
+            isOpen={isSortByPopoverOpen}
+            closePopover={closeSortByPopover}
+            panelClassName="yourClassNameHere"
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row'
+              }}
+            >
+              <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
+                <EuiCheckboxGroup
+                  options={sortDirectionOptions}
+                  idToSelectedMap={{ [sortDirection]: true }}
+                  onChange={(id: string) => setSortDirection(id)}
+                />
+              </EuiPopOverCheckbox>
+            </div>
+          </EuiPopover>
         </Filters>
       </FillContainer>
       <NumberOfBounties>

src/people/interfaces.ts

@@ -427,6 +427,7 @@ export interface OrgBountyHeaderProps {
   languageString?: string;
   org_uuid?: string;
   organizationData: Organization;
+  direction: string
 }
 export interface PeopleHeaderProps {
   onChangeLanguage: (number) => void;

src/people/widgetViews/__tests__/OrgHeader.spec.tsx

@@ -36,6 +36,7 @@ const MockProps: OrgBountyHeaderProps = {
     Completed: false
   },
   languageString: '',
+  direction: 'desc',
   org_uuid: 'clf6qmo4nncmf23du7ng',
   onChangeStatus: jest.fn(),
   onChangeLanguage: jest.fn(),
@@ -122,7 +123,8 @@ describe('OrgHeader Component', () => {
 
       const updatedCheckboxIdToSelectedMap = {
         ...MockProps.checkboxIdToSelectedMap,
-        Open: true
+        Open: true,
+        direction: 'desc'
       };
 
       rerender(