From 0fb91fe60cc18e4af129e08afdf7ad4f65b35ec9 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Wed, 18 Mar 2026 23:39:30 -0400
Subject: [PATCH 1/9] Cashflow cards

---
 .../src/main-page/cash-flow/CashFlowPage.tsx  | 23 ++++--------
 .../cash-flow/components/CashFlowCard.tsx     | 37 +++++++++++++++++++
 2 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/main-page/cash-flow/components/CashFlowCard.tsx

diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index 2d96988c..addc105a 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -1,26 +1,17 @@
-import "../dashboard/styles/Dashboard.css";
 import { observer } from "mobx-react-lite";
+import CashFlowCard from "./components/CashFlowCard";
+import { faDollarSign, faArrowTrendUp, faUserGroup } from "@fortawesome/free-solid-svg-icons";
+import "../dashboard/styles/Dashboard.css";
 
 const CashFlowPage = observer(() => {
   return (
     <div className="dashboard-page">
       <div className="grid grid-cols-4 grid-rows-[1fr_3fr_3fr] gap-4 min-h-screen">
         {/* Row 1 */}
-        <div className="chart-container h-full">
-          {/* Card 1 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 2 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 3 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 4 placeholder */}
-        </div>
+        <CashFlowCard text="Current Cash" value="$50,000" logo={faDollarSign} className="text-blue"/>
+        <CashFlowCard text="Current Cash" value="$50,000" logo={faArrowTrendUp} className="text-green"/>
+        <CashFlowCard text="Current Cash" value="$50,000" logo={faUserGroup} className="text-primary"/>
+        <CashFlowCard text="Current Cash" value="Salary: 4.5% | Benefits: 4%" logo={faArrowTrendUp} className="text-green" size="small"/>
 
         {/* Row 2 */}
         <div className="chart-container col-span-2 h-full">
diff --git a/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
new file mode 100644
index 00000000..7ea3b7ad
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
@@ -0,0 +1,37 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type CardProps = {
+  text: string;
+  value: string;
+  className: string;
+  logo: IconProp;
+  size?: "small" | "medium";
+};
+
+export default function CashFlowCard({
+  text,
+  value,
+  className,
+  logo,
+  size,
+}: CardProps) {
+  return (
+    <div className="flex  flex-col bg-white rounded-md py-4 px-6">
+      <div className="flex flex-row justify-between mb-1 lg:mb-2">
+        <div className="text-md lg:text-lg  w-full text-left font-semibold">
+          {text}
+        </div>
+        <FontAwesomeIcon
+          icon={logo}
+          className="text-lg w-4 h-4 justify-self-end hidden lg:block"
+        />
+      </div>
+      <div
+        className={`font-semibold text-start  ${className} ${size == "small" ? "text-sm lg:text-base" : "text-lg lg:text-2xl"}`}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}

From 33bce84b86b75dc2ac11e71812a3d9e0752435ec Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Thu, 19 Mar 2026 02:10:30 -0400
Subject: [PATCH 2/9] Setting up components

---
 frontend/src/components/InputField.tsx        |   5 +-
 .../src/main-page/cash-flow/CashFlowPage.tsx  |  40 +++----
 .../cash-flow/components/CashAddCosts.tsx     |  42 +++++++
 .../cash-flow/components/CashAddRevenue.tsx   |  55 +++++++++
 .../components/CashAnnualSettings.tsx         |  26 ++++
 .../components/CashCreateLineItem.tsx         |  24 ++++
 .../cash-flow/components/CashPosition.tsx     |  17 +++
 .../cash-flow/components/CashProjection.tsx   |  33 ++++++
 .../components/CashProjectionChart.tsx        | 111 ++++++++++++++++++
 .../cash-flow/components/CashSourceList.tsx   |  15 +++
 frontend/src/sign-up/PasswordField.tsx        |   4 +-
 frontend/src/styles/index.css                 |   1 +
 12 files changed, 343 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashPosition.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashProjection.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashSourceList.tsx

diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx
index 719e827e..61361037 100644
--- a/frontend/src/components/InputField.tsx
+++ b/frontend/src/components/InputField.tsx
@@ -5,6 +5,7 @@ type InputFieldProps = {
   label: string;
   required?: boolean;
   error?: boolean;
+  className?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "className">;
 
 /**
@@ -20,7 +21,7 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-bold text-black">
+      <label htmlFor={id} className="block text-left font-semibold">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
@@ -29,7 +30,7 @@ export default function InputField({
           id={id}
           {...inputProps}
           className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-white "
+            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 " 
           }`}
           
         />
diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index addc105a..5e9ebb3f 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -2,11 +2,16 @@ import { observer } from "mobx-react-lite";
 import CashFlowCard from "./components/CashFlowCard";
 import { faDollarSign, faArrowTrendUp, faUserGroup } from "@fortawesome/free-solid-svg-icons";
 import "../dashboard/styles/Dashboard.css";
+import CashPosition from "./components/CashPosition";
+import CashAnnualSettings from "./components/CashAnnualSettings";
+import CashProjection from "./components/CashProjection";
+import CashAdd from "./components/CashCreateLineItem";
+import CashSourceList from "./components/CashSourceList";
 
 const CashFlowPage = observer(() => {
   return (
-    <div className="dashboard-page">
-      <div className="grid grid-cols-4 grid-rows-[1fr_3fr_3fr] gap-4 min-h-screen">
+    <div className="">
+      <div className="grid grid-cols-4 grid-rows-[auto_auto_1fr] gap-4">
         {/* Row 1 */}
         <CashFlowCard text="Current Cash" value="$50,000" logo={faDollarSign} className="text-blue"/>
         <CashFlowCard text="Current Cash" value="$50,000" logo={faArrowTrendUp} className="text-green"/>
@@ -14,33 +19,16 @@ const CashFlowPage = observer(() => {
         <CashFlowCard text="Current Cash" value="Salary: 4.5% | Benefits: 4%" logo={faArrowTrendUp} className="text-green" size="small"/>
 
         {/* Row 2 */}
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 1 placeholder */}
-          <div className="bg-grey-200 px-2 py-2 h-14 rounded-full">
-            <div className="bg-white h-full w-1/2 rounded-full">
-            </div>
-          </div>
-        </div>
-
-        <div className="chart-container col-span-2 h-full flex flex-col">
-          {/* Card 2 placeholder */}
-          <div className="mt-auto flex gap-2">
-            {/* 4 buttons at bottom */}
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-          </div>
-        </div>
+        <CashPosition/>
+        <CashAnnualSettings/>        
 
         {/* Row 3 */}
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 1 placeholder */}
-        </div>
+        <CashAdd/>
+        <CashProjection/>
 
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 2 placeholder */}
-        </div>
+        {/* Row 4 */}
+        <CashSourceList text="Revenue Sources"/>
+        <CashSourceList text="Cost Sources"/>
       </div>
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
new file mode 100644
index 00000000..d0f644de
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -0,0 +1,42 @@
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+
+export default function CashAddCosts() {
+  return (
+    <div className="flex flex-col p-2 col-span-2 h-full gap-2">
+      <div className="text-lg lg:text-xl w-full text-left font-bold">
+        {"Add Cost Source"}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-6">
+        <div className="flex flex-col col-span-1 w-full gap-3">
+          <InputField
+            id="category"
+            label="Category"
+            value={"Select Category"}
+            className=""
+          />
+        </div>
+        <div className="flex flex-col col-span-1 gap-3">
+          <InputField
+            type="text"
+            id="cost_name"
+            label="Cost Item Name"
+            value={"Program Directory"}
+          />
+        </div>
+      </div>
+      <InputField
+        type="number"
+        id="amount"
+        label="Annual Amount ($)"
+        value={"325000"}
+        className="w-full"
+      />
+      <Button
+        text="Add Cost Item"
+        onClick={() => alert("add cost source")}
+        className="bg-primary text-white mt-2"
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
new file mode 100644
index 00000000..3ab9bfe8
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -0,0 +1,55 @@
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+export default function CashAddRevenue() {
+  return (
+    <div className="flex flex-col p-2 col-span-2 h-full gap-2">
+      <div className="text-lg lg:text-xl w-full text-left font-bold">
+        {"Add Revenue Source"}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-6">
+        <div className="flex flex-col col-span-1 w-full gap-2">
+          <InputField
+            id="category"
+            label="Category"
+            value={"Select Category"}
+            className=""
+          />
+          <InputField
+            type="number"
+            id="amount"
+            label="Amount ($)"
+            value={"325000"}
+          />
+        </div>
+        <div className="flex flex-col col-span-1 gap-2">
+          <InputField
+            type="text"
+            id="source_name"
+            label="Revenue Source Name"
+            value={"Foundation Grant"}
+          />
+          <InputField
+            type="date"
+            id="date"
+            label="Date"
+            value={new Date().toDateString()}
+          />
+        </div>
+      </div>
+      <Button
+        text="Add Installment"
+        onClick={() => alert("add installment")}
+        logo={faPlus}
+        logoPosition="left"
+        className="bg-primary-900 text-white w-fit ml-auto text-sm"
+      />
+      <Button
+        text="Add Revenue Source"
+        onClick={() => alert("add revenue source")}
+        className="bg-green text-white mt-2"
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
new file mode 100644
index 00000000..984f7f1e
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
@@ -0,0 +1,26 @@
+import InputField from "../../../components/InputField";
+
+export default function CashAnnualSettings() {
+  return (
+    <div className="chart-container col-span-2 h-full">
+      <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+        {"Annual Increase Settings"}
+      </div>
+      <div className="flex flex-row justify-between gap-6">
+        <InputField
+          type="number"
+          id="salary_increase"
+          label="Personnel Salary Increase (%)"
+          value={"3.5"}
+          className=""
+        />
+        <InputField
+          type="number"
+          id="benefits_increase"
+          label="Personnel Benefits Increase (%)"
+          value={"4.0"}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
new file mode 100644
index 00000000..b73c0955
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import Button from "../../../components/Button";
+import CashAddRevenue from "./CashAddRevenue";
+import CashAddCosts from "./CashAddCosts";
+
+export default function CashCreateLineItem() {
+
+    const [showCosts, setShowCosts] = useState<boolean>(false);
+
+  return (
+    <div className="chart-container col-span-2 h-full">
+        <div className="flex flex-row rounded-4xl p-1 border border-grey-500 mb-2">
+            <Button text="Revenue" onClick={() => setShowCosts(!showCosts)} className={`w-1/2 font-semibold ${!showCosts ? "bg-primary-900 text-white" : "bg-white"}`} />
+            <Button text="Costs" onClick={() => setShowCosts(!showCosts)} className={`w-1/2 font-semibold ${showCosts ? "bg-primary-900 text-white" : "bg-white"}`}/>
+
+        </div>
+      
+      <div className="">
+        {!showCosts && <CashAddRevenue/>}
+        {showCosts && <CashAddCosts/>}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashPosition.tsx b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
new file mode 100644
index 00000000..05e7055f
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
@@ -0,0 +1,17 @@
+import InputField from "../../../components/InputField";
+
+export default function CashPosition() {
+  return (
+    <div className="chart-container col-span-2 h-full">
+      <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+        {"Starting Cash Position"}
+      </div>
+      <InputField
+        type="number"
+        id="starting_balance"
+        label="Current Cash Balance"
+        value={"25000"}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
new file mode 100644
index 00000000..064f5174
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -0,0 +1,33 @@
+import CashProjectionChart from "./CashProjectionChart";
+
+export default function CashProjection() {
+  const cards = [
+    { field: "Final Balance", value: 38784, color: "text-blue" },
+    { field: "Lowest Point", value: 38784, color: "text-grey" },
+    { field: "Total Revenue", value: 20000, color: "text-green" },
+    { field: "36-Mo Costs", value: 31212, color: "text-primary" },
+  ];
+
+  return (
+    <div className="chart-container col-span-2 h-full flex flex-col">
+      <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+        {"36-Month Cash Flow Projection"}
+      </div>
+      <CashProjectionChart />
+      <div className="flex flex-wrap gap-2  justify-between place-items-center">
+        {cards.map((c) => (
+          <div className="bg-grey-150 rounded px-4 py-2 min-w-fit h-full flex flex-col">
+            <div className={`font-semibold ${c.color}`}>{c.field}</div>
+            <div>
+              {c.value.toLocaleString("en-US", {
+                style: "currency",
+                currency: "USD",
+                maximumFractionDigits: 0,
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
new file mode 100644
index 00000000..37eb2a7f
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
@@ -0,0 +1,111 @@
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { observer } from "mobx-react-lite";
+import "../../dashboard/styles/Dashboard.css";
+
+const CashProjectionChart = observer(({}: {}) => {
+  // Wrap Legend with a React component type to satisfy JSX typing
+
+  const data = [
+    { date: new Date(), cash_balance: 68333, revenue: 10000, costs: 833 },
+    {
+      date: new Date("2026-04-20"),
+      cash_balance: 7856,
+      revenue: 19000,
+      costs: 793,
+    },
+    {
+      date: new Date("2026-05-19"),
+      cash_balance: 98000,
+      revenue: 16789,
+      costs: 1000,
+    },
+  ];
+
+  // Sort by date to ensure correct line order
+  data.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+  return (
+    <div className="h-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 30, left: 30, bottom: 20 }}
+        >
+          <CartesianGrid
+            vertical={false}
+            stroke="lightgray"
+            strokeDasharray="5 5"
+          />
+          <Line
+            type="monotone"
+            dataKey="cash_balance"
+            stroke="var(--color-blue)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Cash Balance"
+          />
+
+          <Line
+            type="monotone"
+            dataKey="revenue"
+            stroke="var(--color-green)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Revenue"
+          />
+          <Line
+            type="monotone"
+            dataKey="costs"
+            stroke="var(--color-primary)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Costs"
+          />
+          <XAxis
+            dataKey="date"
+            type="number"
+            domain={["auto", "auto"]}
+            scale="time"
+            dy={10}
+            style={{ fontSize: "var(--font-size-sm)" }}
+            tickFormatter={(date: Date) => date.getFullYear().toString()}
+            axisLine={false}
+            tickLine={false}
+          />
+
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            width="auto"
+            dx={-10}
+            className="axis"
+            tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
+          />
+
+          <Tooltip
+            contentStyle={{
+              borderRadius: "12px",
+              backgroundColor: "white",
+              border: "1px solid lightgray",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+            }}
+            labelFormatter={(date: Date) =>
+              date.getMonth().toLocaleString() + "/" + date.getFullYear()
+            }
+            formatter={(value: number) => `$${value.toLocaleString()}`}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+
+export default CashProjectionChart;
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
new file mode 100644
index 00000000..7c3f8367
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -0,0 +1,15 @@
+
+type SourceProps = {
+    text: string;
+}
+
+
+export default function CashSourceList({ text}: SourceProps) {
+  return (
+    <div className="chart-container col-span-2 h-full">
+          <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+            {text}
+          </div>
+        </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx
index 5f89ff6e..c3dfb499 100644
--- a/frontend/src/sign-up/PasswordField.tsx
+++ b/frontend/src/sign-up/PasswordField.tsx
@@ -69,7 +69,7 @@ export default function PasswordField({
 
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-bold text-black">
+      <label htmlFor={id} className="block text-left font-semibold text-black">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
@@ -78,7 +78,7 @@ export default function PasswordField({
           id={id}
           type={visible ? "text" : "password"}
           className={`block w-full rounded-md border-2 py-2.5 pl-4 pr-10 text-base placeholder:text-grey-500 ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-white "
+            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 "
           }`}
           {...inputProps}
         />
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index d255d631..a6de3a09 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -44,6 +44,7 @@
 
   --color-primary-900: #e16f39;
   --color-primary-800: #e78c61;
+  --color-primary: #e78c61;
   --color-primary-700: #eca380;
 
   --color-secondary-900: #001733;

From fec9778ea5cd3640aa9c668d6eda255e7b6345cc Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Thu, 19 Mar 2026 02:19:46 -0400
Subject: [PATCH 3/9] fixing projection cards

---
 frontend/src/main-page/cash-flow/components/CashAddCosts.tsx  | 2 +-
 .../src/main-page/cash-flow/components/CashAddRevenue.tsx     | 2 +-
 .../src/main-page/cash-flow/components/CashAnnualSettings.tsx | 2 +-
 .../src/main-page/cash-flow/components/CashProjection.tsx     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
index d0f644de..1e1dafae 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -7,7 +7,7 @@ export default function CashAddCosts() {
       <div className="text-lg lg:text-xl w-full text-left font-bold">
         {"Add Cost Source"}
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-3">
           <InputField
             id="category"
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index 3ab9bfe8..eba66445 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -8,7 +8,7 @@ export default function CashAddRevenue() {
       <div className="text-lg lg:text-xl w-full text-left font-bold">
         {"Add Revenue Source"}
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-2">
           <InputField
             id="category"
diff --git a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
index 984f7f1e..ad5b51cc 100644
--- a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
@@ -6,7 +6,7 @@ export default function CashAnnualSettings() {
       <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
         {"Annual Increase Settings"}
       </div>
-      <div className="flex flex-row justify-between gap-6">
+      <div className="flex flex-row justify-between gap-4">
         <InputField
           type="number"
           id="salary_increase"
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
index 064f5174..3f317902 100644
--- a/frontend/src/main-page/cash-flow/components/CashProjection.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -14,9 +14,9 @@ export default function CashProjection() {
         {"36-Month Cash Flow Projection"}
       </div>
       <CashProjectionChart />
-      <div className="flex flex-wrap gap-2  justify-between place-items-center">
+      <div className="flex-wrap gap-2 items-center grid grid-cols-2 lg:grid-cols-4 mt-1">
         {cards.map((c) => (
-          <div className="bg-grey-150 rounded px-4 py-2 min-w-fit h-full flex flex-col">
+          <div className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full">
             <div className={`font-semibold ${c.color}`}>{c.field}</div>
             <div>
               {c.value.toLocaleString("en-US", {

From 886b1fd5a872d8efe4fd5dcde7aa8c82dca93191 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Thu, 19 Mar 2026 02:23:17 -0400
Subject: [PATCH 4/9] Spacing fixes

---
 frontend/src/main-page/cash-flow/components/CashAddCosts.tsx   | 2 +-
 frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx | 2 +-
 frontend/src/main-page/cash-flow/components/CashFlowCard.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
index 1e1dafae..f7546c01 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -3,7 +3,7 @@ import InputField from "../../../components/InputField";
 
 export default function CashAddCosts() {
   return (
-    <div className="flex flex-col p-2 col-span-2 h-full gap-2">
+    <div className="flex flex-col pt-2 px-2 col-span-2 h-full gap-2">
       <div className="text-lg lg:text-xl w-full text-left font-bold">
         {"Add Cost Source"}
       </div>
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index eba66445..1405ec5b 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -4,7 +4,7 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
 export default function CashAddRevenue() {
   return (
-    <div className="flex flex-col p-2 col-span-2 h-full gap-2">
+    <div className="flex flex-col pt-2 px-2 col-span-2 h-full gap-2">
       <div className="text-lg lg:text-xl w-full text-left font-bold">
         {"Add Revenue Source"}
       </div>
diff --git a/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
index 7ea3b7ad..a24c88e6 100644
--- a/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
@@ -28,7 +28,7 @@ export default function CashFlowCard({
         />
       </div>
       <div
-        className={`font-semibold text-start  ${className} ${size == "small" ? "text-sm lg:text-base" : "text-lg lg:text-2xl"}`}
+        className={`font-semibold text-start mt-auto  ${className} ${size == "small" ? "text-sm lg:text-base" : "text-lg lg:text-2xl"}`}
       >
         {value}
       </div>

From a70f5ad3f6cae36ee692487e83388382651b7301 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Thu, 19 Mar 2026 20:19:14 -0400
Subject: [PATCH 5/9] Cash edit line item

---
 .../cash-flow/components/CashEditLineItem.tsx | 26 +++++++++++++++++++
 .../cash-flow/components/CashSourceList.tsx   |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx

diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
new file mode 100644
index 00000000..b9aad72f
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -0,0 +1,26 @@
+import Button from "../../../components/Button";
+import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+
+export default function CashEditLineItem() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 rounded border border-grey-500 p-4">
+        <div className="flex flex-col text-lg lg:text-xl font-bold text-start">{"Source Name"}</div>
+      <div className="flex flex-row gap-2">
+      <Button
+        text="Edit"
+        onClick={() => alert("edit")}
+        logo={faPenToSquare}
+        logoPosition="right"
+        className="bg-white text-black border-grey-500"
+      />
+      <Button
+        text="Remove"
+        logo={faTrash}
+        logoPosition="right"
+        onClick={() => alert("edit")}
+        className="bg-red-light text-red"
+      />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
index 7c3f8367..82cda08b 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -1,3 +1,4 @@
+import CashEditLineItem from "./CashEditLineItem";
 
 type SourceProps = {
     text: string;
@@ -10,6 +11,7 @@ export default function CashSourceList({ text}: SourceProps) {
           <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
             {text}
           </div>
+          <CashEditLineItem/>
         </div>
   );
 }
\ No newline at end of file

From ffec3c039c8c20d1a91c9759c5f41155c3221ffc Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 21 Mar 2026 02:01:20 -0400
Subject: [PATCH 6/9] Updating cash edit line item card

---
 frontend/src/components/Button.tsx            | 69 ++++++++++++-------
 frontend/src/external/bcanSatchel/store.ts    |  6 ++
 .../src/main-page/cash-flow/CashFlowPage.tsx  | 10 +--
 .../cash-flow/components/CashEditLineItem.tsx | 56 ++++++++++-----
 .../cash-flow/components/CashProjection.tsx   |  2 +-
 .../cash-flow/components/CashSourceList.tsx   | 26 ++++---
 .../main-page/grants/grant-list/GrantCard.tsx |  2 +-
 7 files changed, 111 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index f6c3e0fa..3b930814 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -2,39 +2,58 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type ButtonProps = {
-    text: string;
-    onClick: () => void;
-    className?: string;
-    logo?: IconProp;
-    logoPosition?: 'left' | 'right';
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-}
-
+  text: string;
+  onClick: () => void;
+  className?: string;
+  logo?: IconProp;
+  logoPosition?: "left" | "right" | "center";
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+};
 
 // Button component where you can pass in text, onClick handler, optional className
 // for styling, and an optional logo with its position.
 //Styling is default, but can be overridden by passing in a className prop
-export default function Button({ text, onClick, className, logo, logoPosition, disabled, type }: ButtonProps) {
+export default function Button({
+  text,
+  onClick,
+  className,
+  logo,
+  logoPosition,
+  disabled,
+  type,
+}: ButtonProps) {
   return (
-    <button onClick={onClick} disabled={disabled || false} type={type || "button"}
-    className={`
-        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
-        flex items-center justify-center transition-opacity
-        ${className} ${disabled
-          ? "cursor-not-allowed opacity-50"
-          : "hover:opacity-90"}
+    <button
+      onClick={onClick}
+      disabled={disabled || false}
+      type={type || "button"}
+      className={`
+        px-4 py-2 rounded-3xl font-medium text-black border-2 
+      active:bg-primary-900 active:border-primary-900 active:text-white
+        h-fit flex-grow-0 items-center justify-center     
+        transition-opacity flex whitespace-nowrap
+        ${className} ${
+          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
+        }
       `}
     >
-      {logo && logoPosition === 'left' &&
-      <span className="mr-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "left" && (
+        <span className="mr-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
       {text}
-      {logo && logoPosition === 'right' &&
-      <span className="ml-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "right" && (
+        <span className="ml-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
+      {logo && logoPosition === "center" && (
+        <span className="">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
     </button>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/external/bcanSatchel/store.ts b/frontend/src/external/bcanSatchel/store.ts
index 4af136d9..d99637e0 100644
--- a/frontend/src/external/bcanSatchel/store.ts
+++ b/frontend/src/external/bcanSatchel/store.ts
@@ -3,6 +3,8 @@ import { User } from '../../../../middle-layer/types/User'
 import { Grant } from '../../../../middle-layer/types/Grant'
 import { Status } from '../../../../middle-layer/types/Status'
 import { Notification } from '../../../../middle-layer/types/Notification'
+import { CashflowRevenue } from '../../../../middle-layer/types/CashflowRevenue'
+import { CashflowCost } from '../../../../middle-layer/types/CashflowCost'
 
 export interface AppState {
   isAuthenticated: boolean;
@@ -25,6 +27,8 @@ export interface AppState {
   userSort: {header: keyof User, sort: "asc" | "desc" | "none"} | null;
   notifications: Notification[];
   userQuery: string;
+  revenueSource: CashflowRevenue[];
+  costSource: CashflowCost[];
 }
 
 // Define initial state
@@ -48,6 +52,8 @@ const initialState: AppState = {
   sort: null,
   userSort: null,
   userQuery: '',
+  revenueSource: [],
+  costSource: [],
 };
 
 /**
diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index 5e9ebb3f..eec5b117 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -14,9 +14,9 @@ const CashFlowPage = observer(() => {
       <div className="grid grid-cols-4 grid-rows-[auto_auto_1fr] gap-4">
         {/* Row 1 */}
         <CashFlowCard text="Current Cash" value="$50,000" logo={faDollarSign} className="text-blue"/>
-        <CashFlowCard text="Current Cash" value="$50,000" logo={faArrowTrendUp} className="text-green"/>
-        <CashFlowCard text="Current Cash" value="$50,000" logo={faUserGroup} className="text-primary"/>
-        <CashFlowCard text="Current Cash" value="Salary: 4.5% | Benefits: 4%" logo={faArrowTrendUp} className="text-green" size="small"/>
+        <CashFlowCard text="Total Revenue" value="$50,000" logo={faArrowTrendUp} className="text-green"/>
+        <CashFlowCard text="Monthly Costs" value="$50,000" logo={faUserGroup} className="text-primary"/>
+        <CashFlowCard text="Annual Increases" value="Salary: 4.5% | Benefits: 4%" logo={faArrowTrendUp} className="text-green" size="small"/>
 
         {/* Row 2 */}
         <CashPosition/>
@@ -27,8 +27,8 @@ const CashFlowPage = observer(() => {
         <CashProjection/>
 
         {/* Row 4 */}
-        <CashSourceList text="Revenue Sources"/>
-        <CashSourceList text="Cost Sources"/>
+        <CashSourceList type="Revenue"/>
+        <CashSourceList type="Cost"/>
       </div>
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
index b9aad72f..c5afaff0 100644
--- a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -1,26 +1,44 @@
 import Button from "../../../components/Button";
 import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 
-export default function CashEditLineItem() {
+type CashEditLineItemProps = {
+  children: React.ReactNode;
+  sourceName: string;
+  onEdit: () => void;
+  onRemove: () => void;
+};
+
+export default function CashEditLineItem({
+  children,
+  sourceName,
+  onEdit,
+  onRemove,
+}: CashEditLineItemProps) {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 rounded border border-grey-500 p-4">
-        <div className="flex flex-col text-lg lg:text-xl font-bold text-start">{"Source Name"}</div>
-      <div className="flex flex-row gap-2">
-      <Button
-        text="Edit"
-        onClick={() => alert("edit")}
-        logo={faPenToSquare}
-        logoPosition="right"
-        className="bg-white text-black border-grey-500"
-      />
-      <Button
-        text="Remove"
-        logo={faTrash}
-        logoPosition="right"
-        onClick={() => alert("edit")}
-        className="bg-red-light text-red"
-      />
+    <div className="grid grid-cols-1 lg:grid-cols-2 rounded border border-grey-500 p-4 gap-2">
+      <div className="flex flex-col text-start">
+        <div className="text-lg lg:text-xl font-bold">
+          {sourceName}
+        </div>
+        {children}
+      </div>
+
+      <div className="flex flex-wrap gap-2 lg:ml-auto">
+        <Button
+          text="Edit"
+          onClick={onEdit}
+          logo={faPenToSquare}
+          logoPosition="right"
+          className="bg-white text-black border-grey-500"
+        />
+        <Button
+          text="Remove"
+          logo={faTrash}
+          logoPosition="right"
+          onClick={onRemove}
+          className="bg-red-light text-red"
+        />
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
index 3f317902..f33a7740 100644
--- a/frontend/src/main-page/cash-flow/components/CashProjection.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -16,7 +16,7 @@ export default function CashProjection() {
       <CashProjectionChart />
       <div className="flex-wrap gap-2 items-center grid grid-cols-2 lg:grid-cols-4 mt-1">
         {cards.map((c) => (
-          <div className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full">
+          <div key={c.field} className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full">
             <div className={`font-semibold ${c.color}`}>{c.field}</div>
             <div>
               {c.value.toLocaleString("en-US", {
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
index 82cda08b..530793fc 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -1,17 +1,25 @@
 import CashEditLineItem from "./CashEditLineItem";
 
 type SourceProps = {
-    text: string;
-}
-
+  type: "Revenue" | "Cost";
+};
 
-export default function CashSourceList({ text}: SourceProps) {
+export default function CashSourceList({ type }: SourceProps) {
   return (
     <div className="chart-container col-span-2 h-full">
-          <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
-            {text}
-          </div>
-          <CashEditLineItem/>
+      <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+        {type}{" Sources"}
+      </div>
+      <CashEditLineItem
+        sourceName="Source Name"
+        onEdit={() => alert("edit")}
+        onRemove={() => alert("remove")}
+      >
+        <div className="flex flex-col">
+          <div className="font-semibold">{"Individual Donations"}</div>
+          <div>{"$10,000 | 3/13/2323"}</div>
         </div>
+      </CashEditLineItem>
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main-page/grants/grant-list/GrantCard.tsx b/frontend/src/main-page/grants/grant-list/GrantCard.tsx
index 69ec5779..46050b45 100644
--- a/frontend/src/main-page/grants/grant-list/GrantCard.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantCard.tsx
@@ -51,7 +51,7 @@ const GrantCard: React.FC<GrantCardProps> = ({ grant, isSelected, onClick }) =>
             {grant.organization}
           </div>
           <div className="text-md font-medium text-gray-900 text-left">
-            ${grant.amount}
+            ${grant.amount.toLocaleString()}
           </div>
         </div>
       </div>

From 377730f1b9397f77b03060a0998cb112b8d187bf Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 21 Mar 2026 02:19:20 -0400
Subject: [PATCH 7/9] Adding dropdown

---
 .../cash-flow/components/CashAddCosts.tsx     |  9 ++---
 .../cash-flow/components/CashAddRevenue.tsx   |  9 ++---
 .../components/CashCategoryDropdown.tsx       | 38 +++++++++++++++++++
 3 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx

diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
index f7546c01..46ebdbb6 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -1,5 +1,7 @@
+import { CostType } from "../../../../../middle-layer/types/CostType";
 import Button from "../../../components/Button";
 import InputField from "../../../components/InputField";
+import CashCategoryDropdown from "./CashCategoryDropdown";
 
 export default function CashAddCosts() {
   return (
@@ -9,12 +11,7 @@ export default function CashAddCosts() {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-3">
-          <InputField
-            id="category"
-            label="Category"
-            value={"Select Category"}
-            className=""
-          />
+                    <CashCategoryDropdown type={CostType} onChange={()=>{}}/>
         </div>
         <div className="flex flex-col col-span-1 gap-3">
           <InputField
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index 1405ec5b..3ce11e81 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -1,6 +1,8 @@
+import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
 import Button from "../../../components/Button";
 import InputField from "../../../components/InputField";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import CashCategoryDropdown from "./CashCategoryDropdown";
 
 export default function CashAddRevenue() {
   return (
@@ -10,12 +12,7 @@ export default function CashAddRevenue() {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-2">
-          <InputField
-            id="category"
-            label="Category"
-            value={"Select Category"}
-            className=""
-          />
+          <CashCategoryDropdown type={RevenueType} onChange={()=>{}}/>
           <InputField
             type="number"
             id="amount"
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
new file mode 100644
index 00000000..ad8fc950
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -0,0 +1,38 @@
+import { CostType } from "../../../../../middle-layer/types/CostType";
+import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
+
+type CashCategoryDropdown = {
+  type: typeof RevenueType | typeof CostType;
+  onChange: () => void;
+};
+
+export default function CashCategoryDropdown({
+    type,
+  onChange,
+}: CashCategoryDropdown) {
+  return (
+    <div className="w-full">
+            <label
+              htmlFor={"Category"}
+              className="block text-left font-semibold"
+            >
+              {"Category"}
+            </label>
+            <div className="mt-2 flex items-center rounded-md">
+              <select
+                id="Category"
+                value={"Grants"}
+                onChange={onChange}
+                className="block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
+            border-grey-500 bg-grey-100  h-[3rem]"
+              >
+                {Object.values(type).map((r) => (
+                  <option key={r} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+  );
+}
\ No newline at end of file

From e2d60b46068b78927d41412aa0780effdd7d7ac1 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 21 Mar 2026 02:45:39 -0400
Subject: [PATCH 8/9] Parameterizing more, edit button

---
 .../src/main-page/cash-flow/CashFlowPage.tsx  | 49 +++++++++++----
 .../cash-flow/components/CashAddCosts.tsx     |  2 +-
 .../cash-flow/components/CashAddRevenue.tsx   |  2 +-
 .../components/CashAnnualSettings.tsx         |  1 +
 .../components/CashCategoryDropdown.tsx       | 43 ++++++-------
 .../components/CashCreateLineItem.tsx         | 24 ++++---
 .../cash-flow/components/CashEditLineItem.tsx | 62 +++++++++++--------
 .../cash-flow/components/CashProjection.tsx   |  7 ++-
 .../components/CashProjectionChart.tsx        |  4 +-
 .../cash-flow/components/CashSourceList.tsx   | 16 +++--
 10 files changed, 129 insertions(+), 81 deletions(-)

diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index eec5b117..1fc1da5e 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -1,6 +1,10 @@
 import { observer } from "mobx-react-lite";
 import CashFlowCard from "./components/CashFlowCard";
-import { faDollarSign, faArrowTrendUp, faUserGroup } from "@fortawesome/free-solid-svg-icons";
+import {
+  faDollarSign,
+  faArrowTrendUp,
+  faUserGroup,
+} from "@fortawesome/free-solid-svg-icons";
 import "../dashboard/styles/Dashboard.css";
 import CashPosition from "./components/CashPosition";
 import CashAnnualSettings from "./components/CashAnnualSettings";
@@ -13,25 +17,46 @@ const CashFlowPage = observer(() => {
     <div className="">
       <div className="grid grid-cols-4 grid-rows-[auto_auto_1fr] gap-4">
         {/* Row 1 */}
-        <CashFlowCard text="Current Cash" value="$50,000" logo={faDollarSign} className="text-blue"/>
-        <CashFlowCard text="Total Revenue" value="$50,000" logo={faArrowTrendUp} className="text-green"/>
-        <CashFlowCard text="Monthly Costs" value="$50,000" logo={faUserGroup} className="text-primary"/>
-        <CashFlowCard text="Annual Increases" value="Salary: 4.5% | Benefits: 4%" logo={faArrowTrendUp} className="text-green" size="small"/>
+        <CashFlowCard
+          text="Current Cash"
+          value="$50,000"
+          logo={faDollarSign}
+          className="text-blue"
+        />
+        <CashFlowCard
+          text="Total Revenue"
+          value="$50,000"
+          logo={faArrowTrendUp}
+          className="text-green"
+        />
+        <CashFlowCard
+          text="Monthly Costs"
+          value="$50,000"
+          logo={faUserGroup}
+          className="text-primary"
+        />
+        <CashFlowCard
+          text="Annual Increases"
+          value="Salary: 4.5% | Benefits: 4%"
+          logo={faArrowTrendUp}
+          className="text-green"
+          size="small"
+        />
 
         {/* Row 2 */}
-        <CashPosition/>
-        <CashAnnualSettings/>        
+        <CashPosition />
+        <CashAnnualSettings />
 
         {/* Row 3 */}
-        <CashAdd/>
-        <CashProjection/>
+        <CashAdd />
+        <CashProjection />
 
         {/* Row 4 */}
-        <CashSourceList type="Revenue"/>
-        <CashSourceList type="Cost"/>
+        <CashSourceList type="Revenue" />
+        <CashSourceList type="Cost" />
       </div>
     </div>
   );
 });
 
-export default CashFlowPage;
\ No newline at end of file
+export default CashFlowPage;
diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
index 46ebdbb6..35f0c9f9 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -11,7 +11,7 @@ export default function CashAddCosts() {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-3">
-                    <CashCategoryDropdown type={CostType} onChange={()=>{}}/>
+          <CashCategoryDropdown type={CostType} onChange={() => {}} />
         </div>
         <div className="flex flex-col col-span-1 gap-3">
           <InputField
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index 3ce11e81..82282597 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -12,7 +12,7 @@ export default function CashAddRevenue() {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
         <div className="flex flex-col col-span-1 w-full gap-2">
-          <CashCategoryDropdown type={RevenueType} onChange={()=>{}}/>
+          <CashCategoryDropdown type={RevenueType} onChange={() => {}} />
           <InputField
             type="number"
             id="amount"
diff --git a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
index ad5b51cc..e3ef8253 100644
--- a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
@@ -1,6 +1,7 @@
 import InputField from "../../../components/InputField";
 
 export default function CashAnnualSettings() {
+
   return (
     <div className="chart-container col-span-2 h-full">
       <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
index ad8fc950..ce417fe5 100644
--- a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -7,32 +7,29 @@ type CashCategoryDropdown = {
 };
 
 export default function CashCategoryDropdown({
-    type,
+  type,
   onChange,
 }: CashCategoryDropdown) {
   return (
     <div className="w-full">
-            <label
-              htmlFor={"Category"}
-              className="block text-left font-semibold"
-            >
-              {"Category"}
-            </label>
-            <div className="mt-2 flex items-center rounded-md">
-              <select
-                id="Category"
-                value={"Grants"}
-                onChange={onChange}
-                className="block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
+      <label htmlFor={"Category"} className="block text-left font-semibold">
+        {"Category"}
+      </label>
+      <div className="mt-2 flex items-center rounded-md">
+        <select
+          id="Category"
+          value={"Grants"}
+          onChange={onChange}
+          className="block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
             border-grey-500 bg-grey-100  h-[3rem]"
-              >
-                {Object.values(type).map((r) => (
-                  <option key={r} value={r}>
-                    {r}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
+        >
+          {Object.values(type).map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
index b73c0955..4f93c670 100644
--- a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
@@ -4,20 +4,26 @@ import CashAddRevenue from "./CashAddRevenue";
 import CashAddCosts from "./CashAddCosts";
 
 export default function CashCreateLineItem() {
-
-    const [showCosts, setShowCosts] = useState<boolean>(false);
+  const [showCosts, setShowCosts] = useState<boolean>(false);
 
   return (
     <div className="chart-container col-span-2 h-full">
-        <div className="flex flex-row rounded-4xl p-1 border border-grey-500 mb-2">
-            <Button text="Revenue" onClick={() => setShowCosts(!showCosts)} className={`w-1/2 font-semibold ${!showCosts ? "bg-primary-900 text-white" : "bg-white"}`} />
-            <Button text="Costs" onClick={() => setShowCosts(!showCosts)} className={`w-1/2 font-semibold ${showCosts ? "bg-primary-900 text-white" : "bg-white"}`}/>
+      <div className="flex flex-row rounded-4xl p-1 border border-grey-500 mb-2">
+        <Button
+          text="Revenue"
+          onClick={() => setShowCosts(!showCosts)}
+          className={`w-1/2 font-semibold ${!showCosts ? "bg-primary-900 text-white" : "bg-white"}`}
+        />
+        <Button
+          text="Costs"
+          onClick={() => setShowCosts(!showCosts)}
+          className={`w-1/2 font-semibold ${showCosts ? "bg-primary-900 text-white" : "bg-white"}`}
+        />
+      </div>
 
-        </div>
-      
       <div className="">
-        {!showCosts && <CashAddRevenue/>}
-        {showCosts && <CashAddCosts/>}
+        {!showCosts && <CashAddRevenue />}
+        {showCosts && <CashAddCosts />}
       </div>
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
index c5afaff0..9348f3d4 100644
--- a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -1,44 +1,54 @@
+import { useState } from "react";
 import Button from "../../../components/Button";
 import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 
 type CashEditLineItemProps = {
+  cardText: React.ReactNode;
   children: React.ReactNode;
   sourceName: string;
-  onEdit: () => void;
   onRemove: () => void;
 };
 
 export default function CashEditLineItem({
+  cardText,
   children,
   sourceName,
-  onEdit,
   onRemove,
 }: CashEditLineItemProps) {
+  const [editting, setEditing] = useState<Boolean>(false);
+
+  const onEdit = () => {
+    setEditing(true);
+  };
+
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 rounded border border-grey-500 p-4 gap-2">
-      <div className="flex flex-col text-start">
-        <div className="text-lg lg:text-xl font-bold">
-          {sourceName}
-        </div>
-        {children}
-      </div>
+    <div className="rounded border border-grey-500 p-4">
+      {!editting && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+          <div className="flex flex-col text-start">
+            <div className="text-lg lg:text-xl font-bold">{sourceName}</div>
+            {cardText}
+          </div>
 
-      <div className="flex flex-wrap gap-2 lg:ml-auto">
-        <Button
-          text="Edit"
-          onClick={onEdit}
-          logo={faPenToSquare}
-          logoPosition="right"
-          className="bg-white text-black border-grey-500"
-        />
-        <Button
-          text="Remove"
-          logo={faTrash}
-          logoPosition="right"
-          onClick={onRemove}
-          className="bg-red-light text-red"
-        />
-      </div>
+          <div className="flex flex-wrap gap-2 lg:ml-auto">
+            <Button
+              text="Edit"
+              onClick={onEdit}
+              logo={faPenToSquare}
+              logoPosition="right"
+              className="bg-white text-black border-grey-500"
+            />
+            <Button
+              text="Remove"
+              logo={faTrash}
+              logoPosition="right"
+              onClick={onRemove}
+              className="bg-red-light text-red"
+            />
+          </div>
+        </div>
+      )}
+      {editting && <div>{children}</div>}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
index f33a7740..253f047a 100644
--- a/frontend/src/main-page/cash-flow/components/CashProjection.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -1,6 +1,8 @@
 import CashProjectionChart from "./CashProjectionChart";
 
 export default function CashProjection() {
+
+  // replace with actual data
   const cards = [
     { field: "Final Balance", value: 38784, color: "text-blue" },
     { field: "Lowest Point", value: 38784, color: "text-grey" },
@@ -16,7 +18,10 @@ export default function CashProjection() {
       <CashProjectionChart />
       <div className="flex-wrap gap-2 items-center grid grid-cols-2 lg:grid-cols-4 mt-1">
         {cards.map((c) => (
-          <div key={c.field} className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full">
+          <div
+            key={c.field}
+            className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full"
+          >
             <div className={`font-semibold ${c.color}`}>{c.field}</div>
             <div>
               {c.value.toLocaleString("en-US", {
diff --git a/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
index 37eb2a7f..4e30b80b 100644
--- a/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
@@ -11,8 +11,8 @@ import { observer } from "mobx-react-lite";
 import "../../dashboard/styles/Dashboard.css";
 
 const CashProjectionChart = observer(({}: {}) => {
-  // Wrap Legend with a React component type to satisfy JSX typing
 
+  // replace with actual data, filter for 36 months
   const data = [
     { date: new Date(), cash_balance: 68333, revenue: 10000, costs: 833 },
     {
@@ -76,7 +76,7 @@ const CashProjectionChart = observer(({}: {}) => {
             scale="time"
             dy={10}
             style={{ fontSize: "var(--font-size-sm)" }}
-            tickFormatter={(date: Date) => date.getFullYear().toString()}
+            tickFormatter={(date: Date) => date.getMonth().toLocaleString() + "/" + date.getFullYear()}
             axisLine={false}
             tickLine={false}
           />
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
index 530793fc..6977061b 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -8,17 +8,21 @@ export default function CashSourceList({ type }: SourceProps) {
   return (
     <div className="chart-container col-span-2 h-full">
       <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
-        {type}{" Sources"}
+        {type}
+        {" Sources"}
       </div>
+      {/* map over list of source and put casheditlineitem for each */}
       <CashEditLineItem
+        cardText={
+          <div className="flex flex-col">
+            <div className="font-semibold">{"Individual Donations"}</div>
+            <div>{"$10,000 | 3/13/2323"}</div>
+          </div>
+        }
         sourceName="Source Name"
-        onEdit={() => alert("edit")}
         onRemove={() => alert("remove")}
       >
-        <div className="flex flex-col">
-          <div className="font-semibold">{"Individual Donations"}</div>
-          <div>{"$10,000 | 3/13/2323"}</div>
-        </div>
+        <div>{"Edit form"}</div>
       </CashEditLineItem>
     </div>
   );

From cd31b9ae5a60dabf28bf36ed01d6e718bc281f2b Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 21 Mar 2026 02:53:18 -0400
Subject: [PATCH 9/9] Button styling

---
 frontend/src/components/Button.tsx | 69 +++++++++++-------------------
 1 file changed, 25 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 3b930814..26ee736f 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -2,58 +2,39 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type ButtonProps = {
-  text: string;
-  onClick: () => void;
-  className?: string;
-  logo?: IconProp;
-  logoPosition?: "left" | "right" | "center";
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-};
+    text: string;
+    onClick: () => void;
+    className?: string;
+    logo?: IconProp;
+    logoPosition?: 'left' | 'right';
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+}
+
 
 // Button component where you can pass in text, onClick handler, optional className
 // for styling, and an optional logo with its position.
 //Styling is default, but can be overridden by passing in a className prop
-export default function Button({
-  text,
-  onClick,
-  className,
-  logo,
-  logoPosition,
-  disabled,
-  type,
-}: ButtonProps) {
+export default function Button({ text, onClick, className, logo, logoPosition, disabled, type }: ButtonProps) {
   return (
-    <button
-      onClick={onClick}
-      disabled={disabled || false}
-      type={type || "button"}
-      className={`
-        px-4 py-2 rounded-3xl font-medium text-black border-2 
-      active:bg-primary-900 active:border-primary-900 active:text-white
-        h-fit flex-grow-0 items-center justify-center     
-        transition-opacity flex whitespace-nowrap
-        ${className} ${
-          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
-        }
+    <button onClick={onClick} disabled={disabled || false} type={type || "button"}
+    className={`
+        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
+        h-fit flex items-center justify-center transition-opacity
+        ${className} ${disabled
+          ? "cursor-not-allowed opacity-50"
+          : "hover:opacity-90"}
       `}
     >
-      {logo && logoPosition === "left" && (
-        <span className="mr-2">
-          <FontAwesomeIcon icon={logo} className="" />
-        </span>
-      )}
+      {logo && logoPosition === 'left' &&
+      <span className="mr-2">
+        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
+      </span>}
       {text}
-      {logo && logoPosition === "right" && (
-        <span className="ml-2">
-          <FontAwesomeIcon icon={logo} className="" />
-        </span>
-      )}
-      {logo && logoPosition === "center" && (
-        <span className="">
-          <FontAwesomeIcon icon={logo} className="" />
-        </span>
-      )}
+      {logo && logoPosition === 'right' &&
+      <span className="ml-2">
+        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
+      </span>}
     </button>
   );
 }
\ No newline at end of file