From ac9d144e79b3160d07386441145acfdf8dd439f5 Mon Sep 17 00:00:00 2001
From: Frank Pigeon Jr <fpigeon@flexion.us>
Date: Thu, 14 Nov 2024 15:14:44 -0600
Subject: [PATCH 1/4] feat: adds pagination

---
 .../CANBudgetLineTable/CANBudgetLineTable.jsx | 63 ++++++++++++-------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
index 4d2f47647e..8674b980ca 100644
--- a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
+++ b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
@@ -1,8 +1,9 @@
-import { formatDateNeeded } from "../../../helpers/utils";
+import React from "react";
+import { calculatePercent, formatDateNeeded } from "../../../helpers/utils";
 import Table from "../../UI/Table";
 import { TABLE_HEADERS } from "./CABBudgetLineTable.constants";
 import CANBudgetLineTableRow from "./CANBudgetLineTableRow";
-import { calculatePercent } from "../../../helpers/utils";
+import PaginationNav from "../../UI/PaginationNav";
 /**
  * @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine
  */
@@ -19,33 +20,49 @@ import { calculatePercent } from "../../../helpers/utils";
  * @returns  {JSX.Element} - The component JSX.
  */
 const CANBudgetLineTable = ({ budgetLines, totalFunding }) => {
+    // TODO: once in prod, change this to 25
+    const ITEMS_PER_PAGE = 10;
+    const [currentPage, setCurrentPage] = React.useState(1);
+    let visibleBudgetLines = [...budgetLines];
+    visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
     if (budgetLines.length === 0) {
         return <p className="text-center">No budget lines have been added to this CAN.</p>;
     }
 
     return (
-        <Table tableHeadings={TABLE_HEADERS}>
-            {budgetLines.map((budgetLine) => (
-                <CANBudgetLineTableRow
-                    key={budgetLine.id}
-                    budgetLine={budgetLine}
-                    blId={budgetLine.id}
-                    agreementName="TBD"
-                    obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
-                    fiscalYear={budgetLine.fiscal_year || "TBD"}
-                    amount={budgetLine.amount ?? 0}
-                    fee={budgetLine.proc_shop_fee_percentage}
-                    percentOfCAN={calculatePercent(budgetLine.amount ?? 0, totalFunding)}
-                    status={budgetLine.status}
-                    inReview={budgetLine.in_review}
-                    creatorId={budgetLine.created_by}
-                    creationDate={budgetLine.created_on}
-                    procShopCode="TBD"
-                    procShopFeePercentage={budgetLine.proc_shop_fee_percentage}
-                    notes={budgetLine.comments || "No Notes added"}
+        <>
+            <Table tableHeadings={TABLE_HEADERS}>
+                {visibleBudgetLines.map((budgetLine) => (
+                    <CANBudgetLineTableRow
+                        key={budgetLine.id}
+                        budgetLine={budgetLine}
+                        blId={budgetLine.id}
+                        agreementName="TBD"
+                        obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
+                        fiscalYear={budgetLine.fiscal_year || "TBD"}
+                        amount={budgetLine.amount ?? 0}
+                        fee={budgetLine.proc_shop_fee_percentage}
+                        percentOfCAN={calculatePercent(budgetLine.amount ?? 0, totalFunding)}
+                        status={budgetLine.status}
+                        inReview={budgetLine.in_review}
+                        creatorId={budgetLine.created_by}
+                        creationDate={budgetLine.created_on}
+                        procShopCode="TBD"
+                        procShopFeePercentage={budgetLine.proc_shop_fee_percentage}
+                        notes={budgetLine.comments || "No Notes added"}
+                    />
+                ))}
+            </Table>
+            {budgetLines.length > ITEMS_PER_PAGE && (
+                <PaginationNav
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                    items={budgetLines}
+                    itemsPerPage={ITEMS_PER_PAGE}
                 />
-            ))}
-        </Table>
+            )}
+        </>
     );
 };
 

From fac8f863156ad2ee35521c31f3f92dce3a5c148e Mon Sep 17 00:00:00 2001
From: Frank Pigeon Jr <fpigeon@flexion.us>
Date: Thu, 14 Nov 2024 15:23:11 -0600
Subject: [PATCH 2/4] test: adds e2e test

set pagination to 3 to be able to test. probably want to set to 25 in prod
---
 frontend/cypress/e2e/canDetail.cy.js          | 29 +++++++++++++++++++
 .../CANBudgetLineTable/CANBudgetLineTable.jsx |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/e2e/canDetail.cy.js b/frontend/cypress/e2e/canDetail.cy.js
index e16d1a2298..9374f5feb8 100644
--- a/frontend/cypress/e2e/canDetail.cy.js
+++ b/frontend/cypress/e2e/canDetail.cy.js
@@ -41,4 +41,33 @@ describe("CAN detail page", () => {
         cy.get("tbody").should("not.exist");
         cy.get("p").should("contain", "No budget lines have been added to this CAN.");
     });
+    it("pagination on the bli table works as expected", () => {
+        cy.visit("/cans/504/spending");
+        cy.get("#fiscal-year-select").select("2043");
+        cy.get("ul").should("have.class", "usa-pagination__list");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("1");
+        cy.get("button").should("have.class", "usa-current").contains("1");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("2");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("Next");
+        cy.get("tbody").find("tr").should("have.length", 3);
+        cy.get("li")
+            .should("have.class", "usa-pagination__item")
+            .contains("Previous")
+            .find("svg")
+            .should("have.attr", "aria-hidden", "true");
+
+        // go to the second page
+        cy.get("li").should("have.class", "usa-pagination__item").contains("2").click();
+        cy.get("button").should("have.class", "usa-current").contains("2");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("Previous");
+        cy.get("li")
+            .should("have.class", "usa-pagination__item")
+            .contains("Next")
+            .find("svg")
+            .should("have.attr", "aria-hidden", "true");
+
+        // go back to the first page
+        cy.get("li").should("have.class", "usa-pagination__item").contains("1").click();
+        cy.get("button").should("have.class", "usa-current").contains("1");
+    });
 });
diff --git a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
index 8674b980ca..3d4853710e 100644
--- a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
+++ b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx
@@ -21,7 +21,7 @@ import PaginationNav from "../../UI/PaginationNav";
  */
 const CANBudgetLineTable = ({ budgetLines, totalFunding }) => {
     // TODO: once in prod, change this to 25
-    const ITEMS_PER_PAGE = 10;
+    const ITEMS_PER_PAGE = 3;
     const [currentPage, setCurrentPage] = React.useState(1);
     let visibleBudgetLines = [...budgetLines];
     visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);

From cdeb9e61938c8b5f76511c5239aac6319814c73d Mon Sep 17 00:00:00 2001
From: Frank Pigeon Jr <fpigeon@flexion.us>
Date: Thu, 14 Nov 2024 15:36:09 -0600
Subject: [PATCH 3/4] test: adds waiting

---
 frontend/cypress/e2e/canDetail.cy.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/cypress/e2e/canDetail.cy.js b/frontend/cypress/e2e/canDetail.cy.js
index 9374f5feb8..e7c6257cf3 100644
--- a/frontend/cypress/e2e/canDetail.cy.js
+++ b/frontend/cypress/e2e/canDetail.cy.js
@@ -44,6 +44,7 @@ describe("CAN detail page", () => {
     it("pagination on the bli table works as expected", () => {
         cy.visit("/cans/504/spending");
         cy.get("#fiscal-year-select").select("2043");
+        cy.wait(1000);
         cy.get("ul").should("have.class", "usa-pagination__list");
         cy.get("li").should("have.class", "usa-pagination__item").contains("1");
         cy.get("button").should("have.class", "usa-current").contains("1");

From 1bf60c4be0329d4f4217d0aa091755d11935d169 Mon Sep 17 00:00:00 2001
From: Frank Pigeon Jr <fpigeon@flexion.us>
Date: Thu, 14 Nov 2024 17:51:22 -0600
Subject: [PATCH 4/4] feat: adds CANFundingInfoCard

---
 .../BLIStatusSummaryCard.jsx                  |   5 +-
 .../CANs/CANFundingCard/CANFundingCard.jsx    |   1 -
 .../CANFundingInfoCard/CANFundingInfoCard.jsx | 118 ++++++++++++++++++
 .../CANs/CANFundingInfoCard/index.js          |   1 +
 frontend/src/components/CANs/CANTypes.d.ts    |   4 +-
 .../PortfolioFundingByBudgetStatus.jsx        |   2 +-
 .../UI/Cards/BudgetCard/BigBudgetCard.jsx     |   2 +-
 .../UI/Cards/BudgetCard/BudgetCard.jsx        |   1 -
 .../src/components/UI/Cards/Card/Card.jsx     |   4 +-
 .../DonutGraphWithLegendCard.jsx              |   5 +-
 .../ProjectAgreementBLICard.jsx               |   5 +-
 .../components/UI/RoundedBox/RoundedBox.jsx   |   4 +-
 .../UI/RoundedBox/styles.module.css           |   4 +-
 frontend/src/pages/Home.jsx                   |   2 +-
 frontend/src/pages/cans/detail/Can.jsx        |   9 +-
 frontend/src/pages/cans/detail/CanFunding.jsx |  34 ++++-
 16 files changed, 172 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/components/CANs/CANFundingInfoCard/CANFundingInfoCard.jsx
 create mode 100644 frontend/src/components/CANs/CANFundingInfoCard/index.js

diff --git a/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx b/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx
index 96bf1ce777..426ffb7072 100644
--- a/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx
+++ b/frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx
@@ -123,10 +123,7 @@ const BLIStatusSummaryCard = ({ budgetLines }) => {
     };
 
     return (
-        <RoundedBox
-            className="display-inline-block"
-            dataCy="bli-status-summary-card"
-        >
+        <RoundedBox dataCy="bli-status-summary-card">
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">Budget Lines By Status</h3>
 
             <div className="display-flex flex-justify">
diff --git a/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx b/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx
index c380322e04..307a97c54a 100644
--- a/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx
+++ b/frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx
@@ -61,7 +61,6 @@ const CANFundingCard = ({ can, pendingAmount, afterApproval }) => {
 
     return (
         <RoundedBox
-            className={"display-inline-block"}
             dataCy={`can-funding-summary-card-${canId}`}
             style={{ height: "14.5rem" }}
         >
diff --git a/frontend/src/components/CANs/CANFundingInfoCard/CANFundingInfoCard.jsx b/frontend/src/components/CANs/CANFundingInfoCard/CANFundingInfoCard.jsx
new file mode 100644
index 0000000000..370dcc1e3e
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingInfoCard/CANFundingInfoCard.jsx
@@ -0,0 +1,118 @@
+import { NO_DATA } from "../../../constants";
+import Card from "../../UI/Cards/Card";
+import TermTag from "../../UI/Term/TermTag";
+/**
+ *  @typedef {import("../../../components/CANs/CANTypes").FundingDetails} FundingDetails
+ */
+
+/**
+ * @typedef {Object} CANFundingInfoCard
+ * @property {FundingDetails} [funding]
+ * @property {number} fiscalYear
+ */
+
+/**
+ * @component - The CAN Funding component.
+ * @param {CANFundingInfoCard} props
+ * @returns  {JSX.Element} - The component JSX.
+ */
+const CANFundingInfoCard = ({ funding, fiscalYear }) => {
+    if (!funding) {
+        return <div>No funding information available for this CAN.</div>;
+    }
+
+    return (
+        <Card className="width-full">
+            <h3
+                className="margin-0 margin-bottom-2 font-12px text-base-dark text-normal"
+                style={{ whiteSpace: "pre-line", lineHeight: "20px" }}
+            >
+                {`FY ${fiscalYear} CAN Funding Information`}
+            </h3>
+            <div className="grid-row grid-gap">
+                <div className="grid-col">
+                    <dl>
+                        <TermTag
+                            term="FY"
+                            description={funding.fiscal_year.toString()}
+                        />
+                        <TermTag
+                            term="Fund Code"
+                            description={funding.fund_code}
+                        />
+                    </dl>
+                </div>
+                <div className="grid-col">
+                    <dl>
+                        {funding.active_period && (
+                            <TermTag
+                                term="Active Period"
+                                description={
+                                    funding.active_period > 1
+                                        ? `${funding.active_period} Years`
+                                        : `${funding.active_period} Year`
+                                }
+                            />
+                        )}
+                        <TermTag
+                            term="Allowance"
+                            description={funding.allowance ?? NO_DATA}
+                        />
+                    </dl>
+                </div>
+                <div className="grid-col">
+                    <dl>
+                        <TermTag
+                            term="Obligate By"
+                            description={funding.obligate_by?.toString() ?? NO_DATA}
+                        />
+                        <TermTag
+                            term="Allotment"
+                            description={funding.allotment ?? NO_DATA}
+                        />
+                    </dl>
+                </div>
+                <div className="grid-col">
+                    <dl>
+                        {/* TODO: ask where this comes from */}
+                        <TermTag
+                            term="Funding Received*"
+                            description={NO_DATA}
+                        />
+                        <TermTag
+                            term="Funding Source"
+                            description={funding.funding_source ?? NO_DATA}
+                        />
+                    </dl>
+                </div>
+                <div className="grid-col">
+                    <dl>
+                        <TermTag
+                            term="Funding Method"
+                            description={funding.method_of_transfer}
+                        />
+                        <TermTag
+                            term="Partner"
+                            description={funding.funding_partner ?? NO_DATA}
+                        />
+                    </dl>
+                </div>
+                <div className="grid-col">
+                    <dl>
+                        {/* TODO: ask where this comes from */}
+                        <TermTag
+                            term="Funding Type*"
+                            description={NO_DATA}
+                        />
+                        <TermTag
+                            term="Method of Transfer"
+                            description={funding.method_of_transfer ?? NO_DATA}
+                        />
+                    </dl>
+                </div>
+            </div>
+        </Card>
+    );
+};
+
+export default CANFundingInfoCard;
diff --git a/frontend/src/components/CANs/CANFundingInfoCard/index.js b/frontend/src/components/CANs/CANFundingInfoCard/index.js
new file mode 100644
index 0000000000..9a8dc9b94f
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingInfoCard/index.js
@@ -0,0 +1 @@
+export { default } from "./CANFundingInfoCard";
diff --git a/frontend/src/components/CANs/CANTypes.d.ts b/frontend/src/components/CANs/CANTypes.d.ts
index c4980ae7ee..78499b5bd3 100644
--- a/frontend/src/components/CANs/CANTypes.d.ts
+++ b/frontend/src/components/CANs/CANTypes.d.ts
@@ -66,6 +66,7 @@ export type FundingBudget = {
 };
 
 export type FundingDetails = {
+    active_period?: number;
     allotment?: string;
     allowance?: string;
     appropriation?: string;
@@ -73,9 +74,10 @@ export type FundingDetails = {
     fiscal_year: number;
     fund_code: string;
     funding_partner?: string;
-    funding_source?: string;
+    funding_source?: "OPRE" | "ACF" | "HHS";
     id: number;
     method_of_transfer?: keyof typeof CAN_TRANSFER;
+    obligate_by?: number;
     sub_allowance?: string;
     created_by?: any;
     created_by_user?: any;
diff --git a/frontend/src/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx b/frontend/src/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx
index 0adab43058..459e8bfea8 100644
--- a/frontend/src/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx
+++ b/frontend/src/components/Portfolios/PortfolioFundingByBudgetStatus/PortfolioFundingByBudgetStatus.jsx
@@ -82,7 +82,7 @@ const PortfolioFundingByBudgetStatus = () => {
     };
 
     return (
-        <RoundedBox className="display-inline-block">
+        <RoundedBox>
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">
                 FY {fiscalYear.value} Budget Status
             </h3>
diff --git a/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx b/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx
index 1c3b70cfe4..817aed24e5 100644
--- a/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx
+++ b/frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx
@@ -37,7 +37,7 @@ const BigBudgetCard = ({ title, totalSpending, totalFunding }) => {
     return (
         <>
             <RoundedBox
-                className="display-inline-block width-full"
+                className="width-full"
                 id="big-budget-summary-card"
                 dataCy={`big-budget-summary-card`}
                 style={{ minHeight: "10.125rem" }}
diff --git a/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx b/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx
index 47d6fc73cc..7b01fa5262 100644
--- a/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx
+++ b/frontend/src/components/UI/Cards/BudgetCard/BudgetCard.jsx
@@ -36,7 +36,6 @@ const BudgetCard = ({ title, totalSpending, totalFunding }) => {
 
     return (
         <RoundedBox
-            className="display-inline-block"
             dataCy={`budget-summary-card`}
             style={{ height: "14.5rem" }}
         >
diff --git a/frontend/src/components/UI/Cards/Card/Card.jsx b/frontend/src/components/UI/Cards/Card/Card.jsx
index 4b972425e3..76c54051fe 100644
--- a/frontend/src/components/UI/Cards/Card/Card.jsx
+++ b/frontend/src/components/UI/Cards/Card/Card.jsx
@@ -1,11 +1,10 @@
 import RoundedBox from "../../RoundedBox";
 
 /**
- * @typedef {Object} CardProps
+ * @typedef {Object & React.HTMLAttributes<HTMLDivElement>} CardProps
  * @property {string} [title] - The title of the card.
  * @property {string} [dataCy] - The data-cy attribute to add to the card.
  * @property {Object} [style] - The style object to apply to the card.
- * @property {Object} [rest] - Additional props to be passed to the card.
  * @property {React.ReactNode} children - The children to render.
  */
 
@@ -17,7 +16,6 @@ import RoundedBox from "../../RoundedBox";
 const Card = ({ title, children, dataCy = "", ...rest }) => {
     return (
         <RoundedBox
-            className="display-inline-block"
             dataCy={dataCy}
             data-testid={dataCy}
             {...rest} // this is real trust 🧡
diff --git a/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx b/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx
index 85bc961cd5..878f34ac5d 100644
--- a/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx
+++ b/frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.jsx
@@ -33,10 +33,7 @@ const DonutGraphWithLegendCard = ({ data, title, totalFunding }) => {
     const id = crypto.randomUUID();
 
     return (
-        <RoundedBox
-            className="display-inline-block"
-            id="donut-graph-with-legend-card"
-        >
+        <RoundedBox id="donut-graph-with-legend-card">
             <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{title}</h3>
             <div className="display-flex flex-justify">
                 <div className={totalFunding > 0 ? `${styles.widthLegend} font-12px` : "width-card-lg font-12px"}>
diff --git a/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx b/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx
index 84cfdc2f23..a14bdd2ff2 100644
--- a/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx
+++ b/frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx
@@ -53,10 +53,7 @@ const ProjectAgreementBLICard = ({ fiscalYear, projects, agreements, budgetLines
     };
 
     return (
-        <RoundedBox
-            className="display-inline-block"
-            id="project-agreement-bli-card"
-        >
+        <RoundedBox id="project-agreement-bli-card">
             <div className="display-flex flex-justify">
                 <article>
                     <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{projectHeading}</h3>
diff --git a/frontend/src/components/UI/RoundedBox/RoundedBox.jsx b/frontend/src/components/UI/RoundedBox/RoundedBox.jsx
index 97b80d16aa..1dc1e404b8 100644
--- a/frontend/src/components/UI/RoundedBox/RoundedBox.jsx
+++ b/frontend/src/components/UI/RoundedBox/RoundedBox.jsx
@@ -8,11 +8,11 @@ import cssClasses from "./styles.module.css";
  * @param {string} [props.id] - Element ID.
  * @param {string} [props.dataCy] - Data attribute for Cypress tests.
  * @param {Object} [props.style] - Inline styles.
- * @param {Object} [props.rest] - Additional props to be passed
+ * @property {React.HTMLAttributes<HTMLDivElement>} [rest] - Additional props to be spread onto
  * @returns {JSX.Element} Rendered component.
  */
 const RoundedBox = ({ children, className, dataCy, ...rest }) => {
-    const cardContainer = `bg-brand-base-light-variant border-base-light font-family-sans display-flex ${cssClasses.container} ${className ? className : ""}`;
+    const cardContainer = `bg-brand-base-light-variant border-base-light font-family-sans ${cssClasses.container} ${className ? className : ""}`;
 
     return (
         <div
diff --git a/frontend/src/components/UI/RoundedBox/styles.module.css b/frontend/src/components/UI/RoundedBox/styles.module.css
index f4e92cbce6..a5d5989160 100644
--- a/frontend/src/components/UI/RoundedBox/styles.module.css
+++ b/frontend/src/components/UI/RoundedBox/styles.module.css
@@ -6,6 +6,6 @@
     border-style: solid;
 }
 
-.cardBody {
+/* .cardBody {
     flex: 3;
-}
+} */
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index e4950793ba..480faa0c77 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -5,7 +5,7 @@ const Home = () => {
     return (
         <App>
             <div className="display-flex flex-justify-center">
-                <RoundedBox className="margin-top-4 display-inline-block text-center">
+                <RoundedBox className="margin-top-4 text-center">
                     <h1>This is the OPRE OPS system prototype</h1>
                     <p>⚠️Tread with caution</p>
                 </RoundedBox>
diff --git a/frontend/src/pages/cans/detail/Can.jsx b/frontend/src/pages/cans/detail/Can.jsx
index 06adaf0759..872035cd07 100644
--- a/frontend/src/pages/cans/detail/Can.jsx
+++ b/frontend/src/pages/cans/detail/Can.jsx
@@ -52,7 +52,7 @@ const Can = () => {
         return <div>CAN not found</div>;
     }
 
-    const { number, description, nick_name: nickname, portfolio, projects } = can;
+    const { number, description, nick_name: nickname, portfolio, projects, funding_details: fundingDetails } = can;
     const { division_id: divisionId, team_leaders: teamLeaders, name: portfolioName } = portfolio;
 
     const subTitle = `${can.nick_name} - ${can.active_period} ${can.active_period > 1 ? "Years" : "Year"}`;
@@ -110,7 +110,12 @@ const Can = () => {
                 />
                 <Route
                     path="funding"
-                    element={<CanFunding />}
+                    element={
+                        <CanFunding
+                            funding={fundingDetails}
+                            fiscalYear={fiscalYear}
+                        />
+                    }
                 />
             </Routes>
         </App>
diff --git a/frontend/src/pages/cans/detail/CanFunding.jsx b/frontend/src/pages/cans/detail/CanFunding.jsx
index 2119bf9fce..9891dac4c6 100644
--- a/frontend/src/pages/cans/detail/CanFunding.jsx
+++ b/frontend/src/pages/cans/detail/CanFunding.jsx
@@ -1,8 +1,38 @@
-const CanFunding = () => {
+import CANFundingInfoCard from "../../../components/CANs/CANFundingInfoCard";
+import DebugCode from "../../../components/DebugCode";
+
+/**
+ *  @typedef {import("../../../components/CANs/CANTypes").FundingDetails} FundingDetails
+ *  @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine
+ */
+
+/**
+ * @typedef {Object} CanFundingProps
+ * @property {FundingDetails} [funding]
+ * @property {number} fiscalYear
+ */
+
+/**
+ * @component - The CAN Funding component.
+ * @param {CanFundingProps} props
+ * @returns  {JSX.Element} - The component JSX.
+ */
+const CanFunding = ({ funding, fiscalYear }) => {
+    if (!funding) {
+        return <div>No funding information available for this CAN.</div>;
+    }
     return (
         <div>
             <h2>Can Funding</h2>
-            <p>coming soon...</p>
+            <p>The summary below shows the funding for this CAN for the select fiscal year.</p>
+            <CANFundingInfoCard
+                funding={funding}
+                fiscalYear={fiscalYear}
+            />
+            <DebugCode
+                title="can.funding_details"
+                data={funding}
+            />
         </div>
     );
 };