Referral Page Status Filter

frontend/src/components/StatusDropDown.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import { ClickAwayListener } from "./ClickAwayListener";
+
+import { REFERRAL_STATUSES, ReferralStatus } from "@/api/units";
+import { DropDownPopup, DropdownIcon, FilterSubContainer, Sort } from "@/components/FilterCommon";
+
+const SortDropDown = styled(DropDownPopup)`
+  width: 180px;
+  z-index: 1;
+`;
+
+const SortRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 5px;
+  border: 0.5px solid #cdcaca;
+  box-shadow: 1px 1px 2px 0px rgba(188, 186, 183, 0.4);
+  min-width: 180px;
+`;
+
+const PopupSortText = styled(Sort)`
+  margin: 0;
+  font-weight: 300;
+  font-size: 14px;
+`;
+
+export type StatusDropdownProps = {
+  value: ReferralStatus;
+  setValue(status: ReferralStatus): void;
+};
+
+const SORT_OPTIONS = ["Any", ...REFERRAL_STATUSES];
+
+export const StatusDropdown = ({ value, setValue }: StatusDropdownProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        setIsActive(false);
+      }}
+    >
+      <FilterSubContainer>
+        <SortRow
+          onClick={() => {
+            setIsActive(!isActive);
+          }}
+        >
+          <Sort active={isActive}>Status: {value || "Any"}</Sort>
+          <DropdownIcon src={isActive ? "/up_arrow.svg" : "/dropdown.svg"} />
+        </SortRow>
+        {isActive && (
+          <SortDropDown>
+            {SORT_OPTIONS.map((status, idx) => (
+              <PopupSortText
+                key={idx}
+                onClick={() => {
+                  if (status === "Any") {
+                    setValue("");
+                  } else {
+                    setValue(status);
+                  }
+                  setIsActive(false);
+                }}
+              >
+                {status}
+              </PopupSortText>
+            ))}
+          </SortDropDown>
+        )}
+      </FilterSubContainer>
+    </ClickAwayListener>
+  );
+};

frontend/src/components/Table.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { Pagination } from "./Pagination";
@@ -65,6 +65,11 @@ export const Table = (props: TableProps) => {
   const { columns, rows, rowsPerPage = 10 } = props;
   const [pageNumber, setPageNumber] = useState<number>(1);
 
+  useEffect(() => {
+    // Reset page number if data changes
+    setPageNumber(1);
+  }, [rows]);
+
   return (
     <TableContainer>
       <TableRow>

frontend/src/pages/Referrals.tsx

@@ -12,6 +12,7 @@ import { CustomCheckboxRadio } from "@/components/ListingForm/CommonStyles";
 import { NavBar } from "@/components/NavBar";
 import { Page } from "@/components/Page";
 import { ReferralPopup } from "@/components/ReferralPopup";
+import { StatusDropdown } from "@/components/StatusDropDown";
 import { Table, TableCellContent } from "@/components/Table";
 import { formatPhoneNumber } from "@/components/helpers";
 import { DataContext } from "@/contexts/DataContext";
@@ -60,6 +61,7 @@ const AddButton = styled(Button)`
 const FilterContainer = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: 27px;
 `;
 
@@ -230,6 +232,7 @@ export function Referrals() {
   const [popup, setPopup] = useState<boolean>(false);
   const [showNewClientPopup, setShowNewClientPopup] = useState<boolean>(false);
   const [successfulRemovalPopup, setSuccessfulRemovalPopup] = useState<boolean>(false);
+  const [statusFilter, setStatusFilter] = useState<string>("");
 
   const fetchReferrals = () => {
     if (filterMode === ReferralFilterOption.MY_REFERRALS) {
@@ -262,9 +265,12 @@ export function Referrals() {
             referral.renterCandidate.lastName.toLowerCase().includes(searchValue.toLowerCase())
           );
         })
+        .filter((referral) => {
+          return statusFilter === "" || referral.status === statusFilter;
+        })
         .sort((a, b) => a.renterCandidate.firstName.localeCompare(b.renterCandidate.firstName)),
     );
-  }, [referrals, searchValue]);
+  }, [referrals, searchValue, statusFilter]);
 
   useEffect(fetchReferrals, [filterMode, dataContext.currentUser]);
 
@@ -309,6 +315,7 @@ export function Referrals() {
               />
               <RadioLabel htmlFor="all-referrals">All Referrals</RadioLabel>
             </RadioGroup>
+            <StatusDropdown value={statusFilter} setValue={setStatusFilter} />
             <SearchBarContainer>
               <SearchBarInput
                 placeholder="Search Client"