From b7b5654db9b02cc64a321922162c9b2cb7e1c7e1 Mon Sep 17 00:00:00 2001
From: "Yumiko (Yumi) Chow" <75456756+yumi520@users.noreply.github.com>
Date: Mon, 23 Feb 2026 12:50:07 -0500
Subject: [PATCH 1/3] filter card component

---
 .../filter-bar/components/FilterCard.tsx      | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx

diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
new file mode 100644
index 0000000..220a22c
--- /dev/null
+++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import Button from "../../../settings/components/Button";
+
+type SortDirection = "increasing" | "decreasing";
+
+interface FilterCardProps {
+	directionFirst?: boolean;
+	initialDirection?: SortDirection;
+	initialStartDate?: string;
+	initialEndDate?: string;
+	onClearAll?: () => void;
+	onDirectionChange?: (direction: SortDirection) => void;
+	onDateRangeChange?: (startDate: string, endDate: string) => void;
+}
+
+export default function FilterCard({
+	directionFirst = true, //if true, direction section is shown before date range section
+	initialDirection = "increasing", //default sort direction is increasing
+	initialStartDate = "", //default start date is empty string (no filter)
+	initialEndDate = "", //default end date is empty string (no filter)
+	onClearAll, //optional callback for when "Clear all" is clicked
+	onDirectionChange, //optional callback for when sort direction changes
+	onDateRangeChange, //optional callback for when date range changes
+}: FilterCardProps) {
+	const [direction, setDirection] = useState<SortDirection>(initialDirection);
+	const [startDate, setStartDate] = useState(initialStartDate);
+	const [endDate, setEndDate] = useState(initialEndDate);
+
+	const handleClearAll = () => {
+		setDirection("increasing");
+		setStartDate("");
+		setEndDate("");
+		onClearAll?.();
+	};
+
+	const directionSection = (
+		<div className="flex flex-col gap-2">
+			<div className="text-sm font-semibold flex justify-between items-center">
+				<span>Direction</span>
+				<Button
+					text="Clear all"
+					onClick={handleClearAll}
+					className="bg-opacity-0 border-0 hover:border-0 text-xs font-semibold text-secondary-400 px-0 py-0"
+				/>
+			</div>
+			<div className="flex gap-2">
+				<Button
+					text="Increasing"
+					onClick={() => {
+						setDirection("increasing");
+						onDirectionChange?.("increasing");
+					}}
+					className={
+						direction === "increasing"
+							? "bg-primary-900 text-white px-3 py-1 text-sm"
+							: "bg-white px-3 py-1 text-sm border-1 border-grey-600"
+					}
+				/>
+				<span className="text-sm font-semibold pt-2"> or </span>
+				<Button
+					text="Decreasing"
+					onClick={() => {
+						setDirection("decreasing");
+						onDirectionChange?.("decreasing");
+					}}
+					className={
+						direction === "decreasing"
+							? "bg-primary-900 text-white px-3 py-1 text-sm"
+							: "bg-white px-3 py-1 text-sm border-1 border-grey-600"
+					}
+				/>
+			</div>
+		</div>
+	);
+
+    // date format: "YYYY-MM-DD"
+	const dateRangeSection = (
+		<div className="flex flex-col gap-2">
+			<div className="text-sm font-semibold flex justify-start">Date Range</div>
+			<div className="flex gap-2">
+				<input
+					className="w-full rounded border border-grey-600 px-2 py-1 text-sm bg-white"
+					type="date"
+					value={startDate}
+					onChange={(e) => {
+						setStartDate(e.target.value);
+						onDateRangeChange?.(e.target.value, endDate);
+					}}
+				/>
+				<span className="text-sm font-semibold pt-2"> to </span>
+				<input
+					className="w-full rounded border border-grey-600 px-2 py-1 text-sm bg-white"
+					type="date"
+					value={endDate}
+					onChange={(e) => {
+						setEndDate(e.target.value);
+						onDateRangeChange?.(startDate, e.target.value);
+					}}
+				/>
+			</div>
+		</div>
+	);
+
+	const sections = directionFirst
+		? [directionSection, dateRangeSection]
+		: [dateRangeSection, directionSection];
+
+	return (
+		<div className="flex flex-col gap-2 rounded-[0.5rem] border-[0.1rem] border-x-primary-900 p-4">
+			{sections}
+		</div>
+	);
+}
\ No newline at end of file

From 75dfe2cb52917fecef9536751e88d0583411b6e3 Mon Sep 17 00:00:00 2001
From: "Yumiko (Yumi) Chow" <75456756+yumi520@users.noreply.github.com>
Date: Mon, 23 Feb 2026 13:24:14 -0500
Subject: [PATCH 2/3] fixed styling

---
 frontend/src/main-page/grants/filter-bar/FilterBar.tsx        | 2 +-
 .../src/main-page/grants/filter-bar/components/FilterCard.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
index 729f6f2..eeab6f9 100644
--- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
+++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
@@ -59,7 +59,7 @@ const FilterBar: React.FC = observer(() => {
                 to={item.linkTo ? item.linkTo : "#"}
               >
                 <div
-                  className={`border hover:bg-primary-800 ${
+                  className={`grant-button border hover:bg-primary-800 ${
                     selected === item.name ? "bg-primary-900" : "bg-white"
                   }`}
                 >
diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
index 220a22c..f7e2723 100644
--- a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
+++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
@@ -40,7 +40,7 @@ export default function FilterCard({
 				<Button
 					text="Clear all"
 					onClick={handleClearAll}
-					className="bg-opacity-0 border-0 hover:border-0 text-xs font-semibold text-secondary-400 px-0 py-0"
+					className="bg-opacity-0 border-0 hover:border-0 focus:outline-none focus:ring-0 focus:border-0 text-xs font-semibold text-secondary-400 px-0 py-0"
 				/>
 			</div>
 			<div className="flex gap-2">
@@ -106,7 +106,7 @@ export default function FilterCard({
 		: [dateRangeSection, directionSection];
 
 	return (
-		<div className="flex flex-col gap-2 rounded-[0.5rem] border-[0.1rem] border-x-primary-900 p-4">
+		<div className="flex flex-col gap-2 rounded-[1rem] border-[0.13rem] border-primary-900 p-4">
 			{sections}
 		</div>
 	);

From cfb0fd6bd3a28cd75aed5e7c9d1f72508ec1efbf Mon Sep 17 00:00:00 2001
From: Yumiko Chow <75456756+yumi520@users.noreply.github.com>
Date: Mon, 23 Feb 2026 13:27:32 -0500
Subject: [PATCH 3/3] Remove unused import of React in FilterCard.tsx

---
 .../src/main-page/grants/filter-bar/components/FilterCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
index f7e2723..ea811ee 100644
--- a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
+++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import Button from "../../../settings/components/Button";
 
 type SortDirection = "increasing" | "decreasing";
@@ -110,4 +110,4 @@ export default function FilterCard({
 			{sections}
 		</div>
 	);
-}
\ No newline at end of file
+}