feat: ✨ adds CAN Cards on Spending Tab

frontend/cypress/e2e/canDetail.cy.js

@@ -21,13 +21,20 @@ describe("CAN detail page", () => {
     });
     it("shows the CAN Spending page", () => {
         cy.visit("/cans/504/spending");
-        cy.get("#fiscal-year-select").select("2021");
+        cy.get("#fiscal-year-select").select("2043");
         cy.get("h1").should("contain", "G994426"); // heading
         cy.get("p").should("contain", "HS - 5 Years"); // sub-heading
         // should contain the budget line table
         cy.get("table").should("exist");
         // table should have more than 1 row
         cy.get("tbody").children().should("have.length.greaterThan", 1);
+        cy.get("#big-budget-summary-card").should("exist");
+        cy.get("#big-budget-summary-card").should("contain", "-$ 3,000,000.00");
+        cy.get("#project-agreement-bli-card").should("exist");
+        cy.get("span").should("contain", "3 Draft");
+        cy.get("span").should("contain", "1 Executing");
+        cy.get("span").should("contain", "1 Planned");
+        cy.get("#donut-graph-with-legend-card").should("exist");
         // switch to a different fiscal year
         cy.get("#fiscal-year-select").select("2022");
         // table should not exist

frontend/src/api/opsAPI.js

@@ -204,7 +204,8 @@ export const opsApi = createApi({
             providesTags: ["Cans"]
         }),
         getCanFundingSummary: builder.query({
-            query: (id) => `/can-funding-summary/${id}`,
+            query: ({ id, fiscalYear }) =>
+                `/can-funding-summary/${id}${fiscalYear ? `?fiscal_year=${fiscalYear}` : ""}`,
             providesTags: ["CanFunding"]
         }),
         getNotificationsByUserId: builder.query({

frontend/src/components/Agreements/AgreementCANReviewAccordion/AgreementCANReviewAccordion.jsx

@@ -28,7 +28,7 @@ const AgreementCANReviewAccordion = ({
     action,
     isApprovePage = false
 }) => {
-    const { data: portfolios, error, isLoading } = useGetPortfoliosQuery();
+    const { data: portfolios, error, isLoading } = useGetPortfoliosQuery({});
     if (isLoading) {
         return <div>Loading...</div>;
     }

frontend/src/components/Agreements/AgreementTypes.d.ts

@@ -1,5 +1,5 @@
 import { SafeUser } from "../Users/UserTypes";
-import { Project } from "../Projects/ProjectTypes";
+import { ResearchProject } from "../Projects/ProjectTypes";
 import { BudgetLine } from "../BudgetLineItems/BudgetLineTypes";
 
 export type Agreement = {
@@ -16,7 +16,7 @@ export type Agreement = {
     procurement_tracker_id?: number;
     product_service_code?: ProductServiceCode;
     product_service_code_id?: number;
-    project?: Project;
+    project?: ResearchProject;
     project_id?: number;
     project_officer_id?: number;
     team_members?: SafeUser[];

frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx

@@ -2,21 +2,23 @@ import { formatDateNeeded } from "../../../helpers/utils";
 import Table from "../../UI/Table";
 import { TABLE_HEADERS } from "./CABBudgetLineTable.constants";
 import CANBudgetLineTableRow from "./CANBudgetLineTableRow";
+import { calculatePercent } from "../../../helpers/utils";
 /**
  * @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine
  */
 
 /**
  * @typedef {Object} CANBudgetLineTableProps
  * @property {BudgetLine[]} budgetLines
+ * @property {number} totalFunding
  */
 
 /**
  * @component - The CAN Budget Line Table.
  * @param {CANBudgetLineTableProps} props
  * @returns  {JSX.Element} - The component JSX.
  */
-const CANBudgetLineTable = ({ budgetLines }) => {
+const CANBudgetLineTable = ({ budgetLines, totalFunding }) => {
     if (budgetLines.length === 0) {
         return <p className="text-center">No budget lines have been added to this CAN.</p>;
     }
@@ -31,9 +33,9 @@ const CANBudgetLineTable = ({ budgetLines }) => {
                     agreementName="TBD"
                     obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
                     fiscalYear={budgetLine.fiscal_year || "TBD"}
-                    amount={budgetLine.amount || 0}
+                    amount={budgetLine.amount ?? 0}
                     fee={budgetLine.proc_shop_fee_percentage}
-                    percentOfCAN={3}
+                    percentOfCAN={calculatePercent(budgetLine.amount ?? 0, totalFunding)}
                     status={budgetLine.status}
                     inReview={budgetLine.in_review}
                     creatorId={budgetLine.created_by}

frontend/src/components/CANs/CANFundingCard/CANFundingCard.jsx

@@ -7,20 +7,21 @@ import CurrencyWithSmallCents from "../../UI/CurrencyWithSmallCents/CurrencyWith
 import RoundedBox from "../../UI/RoundedBox";
 import Tag from "../../UI/Tag";
 import LineGraph from "../../UI/DataViz/LineGraph";
-
 /**
- * A component that displays funding information for a CAN
- * @component
- * @param {Object} props - The props object.
- * @param {Object} props.can - The CAN object.
- * @param {number} props.pendingAmount - The pending amount.
- * @param {boolean} props.afterApproval - A flag indicating whether the funding is after approval.
+ * @typedef {Object} CANFundingCardProps
+ * @property {import("../../../components/CANs/CANTypes").CAN} can - The CAN object.
+ * @property {number} pendingAmount - The pending amount.
+ * @property {boolean} afterApproval - A flag indicating whether the funding is after approval.
+ */
+/**
+ * @component - displays funding information for a CAN in a card format
+ * @param {CANFundingCardProps} props - The component props.
  * @returns {JSX.Element} - The CANFundingCard component.
  */
 const CANFundingCard = ({ can, pendingAmount, afterApproval }) => {
     const adjustAmount = afterApproval ? pendingAmount : 0;
     const canId = can?.id;
-    const { data, error, isLoading } = useGetCanFundingSummaryQuery(canId);
+    const { data, error, isLoading } = useGetCanFundingSummaryQuery({ id: canId });
 
     if (isLoading) {
         return <div>Loading...</div>;

frontend/src/components/CANs/CANTable/CANTableRow.jsx

@@ -33,7 +33,11 @@ const CANTableRow = ({
     portfolio,
     transfer
 }) => {
-    const { data: fundingSummary, isError, isLoading } = useGetCanFundingSummaryQuery(canId);
+    const {
+        data: fundingSummary,
+        isError,
+        isLoading
+    } = useGetCanFundingSummaryQuery({ id: canId, fiscalYear: fiscalYear });
     const availableFunds = fundingSummary?.available_funding ?? 0;
 
     if (isLoading)

frontend/src/components/DebugCode/DebugCode.jsx

@@ -7,7 +7,7 @@ import PropTypes from "prop-types";
  * @component
  * @param {Object} props - The properties passed to the component.
  * @param {string} [props.title="DEBUG CODE"] - The title of the debug section.
- * @param {Object | []} props.data - The data to be displayed in the debug section.
+ * @param {Object | any[]} props.data - The data to be displayed in the debug section.
  *
  * @returns {JSX.Element | null | boolean } The rendered JSX element, or null if not in development mode.
  *

frontend/src/components/Portfolios/ResearchProjects/ProjectsAndAgreements.jsx

@@ -1,23 +1,20 @@
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
-import CurrencyCard from "../../UI/Cards/CurrencyCard";
+import RoundedBox from "../../UI/RoundedBox";
 import Tag from "../../UI/Tag/Tag";
 
-const ProjectsAndAgreements = ({
-    numberOfProjects = 0,
-    numOfResearchProjects = 0,
-    numOfAdminAndSupportProjects = 0
-}) => {
+const ProjectsAndAgreements = ({ numOfResearchProjects = 3, numOfAdminAndSupportProjects = 2 }) => {
     const fiscalYear = useSelector((state) => state.portfolio.selectedFiscalYear);
     const projectHeading = `FY ${fiscalYear.value} Projects`;
     const agreementHeading = `FY ${fiscalYear.value} Agreements`;
-    const plannedAgreements = "3";
-    const executingAgreements = "2";
-    const obligatedAgreements = "2";
-    const numberOfAgreements = "7";
+    const plannedAgreements = 3;
+    const executingAgreements = 2;
+    const obligatedAgreements = 2;
+    const numberOfProjects = numOfResearchProjects + numOfAdminAndSupportProjects;
+    const numberOfAgreements = plannedAgreements + executingAgreements + obligatedAgreements;
 
     return (
-        <CurrencyCard>
+        <RoundedBox className="padding-y-205 padding-x-4 display-inline-block">
             <div className="display-flex flex-justify">
                 {/* NOTE: left side */}
                 <article>
@@ -60,7 +57,7 @@ const ProjectsAndAgreements = ({
                     </div>
                 </article>
             </div>
-        </CurrencyCard>
+        </RoundedBox>
     );
 };
 

frontend/src/components/Projects/ProjectTypes.d.ts

@@ -1,16 +1,28 @@
 import { SafeUser } from "../Users/UserTypes";
 
-export type Project = {
-    created_by: number | null;
-    created_on: Date;
-    description: string;
+export type ResearchProject = {
     id: number;
+    description: string;
     methodologies: string[];
-    origination_date: Date;
     populations: string[];
-    short_title: string;
     team_leaders: SafeUser[];
+    origination_date: Date;
+    short_title: string;
     title: string;
-    updated_on: Date;
     url: string;
+    created_on: any;
+    updated_on: any;
+    created_by: any;
+    updated_by: any;
+    created_by_user: any;
+    updated_by_user: any;
+};
+
+export type Project = {
+    id: number;
+    project_type: string;
+    title: string;
+    short_title: string;
+    description: string;
+    url?: string;
 };

frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.jsx

@@ -0,0 +1,119 @@
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CurrencyFormat from "react-currency-format";
+import CurrencyWithSmallCents from "../../CurrencyWithSmallCents/CurrencyWithSmallCents";
+import LineGraph from "../../DataViz/LineGraph";
+import RoundedBox from "../../RoundedBox";
+import Tag from "../../Tag";
+
+/**
+ * @typedef {Object} BigBudgetCardProps
+ * @property {string} title - The title of the card.
+ * @property {number} totalSpending - The total spending.
+ * @property {number} totalFunding - The total funding.
+ */
+
+/**
+ * @component BigBudgetCard
+ * @param {BigBudgetCardProps} props - Properties passed to component
+ * @returns {JSX.Element} - The BudgetSummaryCard component.
+ */
+const BigBudgetCard = ({ title, totalSpending, totalFunding }) => {
+    const overBudget = totalSpending > totalFunding;
+    const remainingBudget = totalFunding - totalSpending;
+    const graphData = [
+        {
+            id: 1,
+            value: totalSpending,
+            color: overBudget ? "var(--feedback-error)" : "var(--data-viz-budget-graph-2)"
+        },
+        {
+            id: 2,
+            value: remainingBudget,
+            color: overBudget ? "var(--feedback-error)" : "var(--data-viz-budget-graph-1)"
+        }
+    ];
+
+    return (
+        <>
+            <RoundedBox
+                className={`padding-y-205 padding-x-4 display-inline-block width-full`}
+                id="big-budget-summary-card"
+                dataCy={`big-budget-summary-card`}
+                style={{ minHeight: "10.125rem" }}
+            >
+                <h3
+                    className="margin-0 margin-bottom-2 font-12px text-base-dark text-normal"
+                    style={{ whiteSpace: "pre-line", lineHeight: "20px" }}
+                >
+                    {title}
+                </h3>
+
+                <div className="font-32px margin-0 display-flex flex-justify">
+                    <div className="display-flex flex-align-center">
+                        <CurrencyWithSmallCents
+                            amount={remainingBudget}
+                            dollarsClasses="font-sans-xl text-bold margin-bottom-0"
+                            centsStyles={{ fontSize: "10px" }}
+                        />
+
+                        {overBudget ? (
+                            <Tag
+                                tagStyle={"lightTextRedBackground"}
+                                className="margin-left-1"
+                            >
+                                <FontAwesomeIcon
+                                    icon={faTriangleExclamation}
+                                    title="Over Budget"
+                                />{" "}
+                                Over Budget
+                            </Tag>
+                        ) : (
+                            <Tag
+                                tagStyle={"budgetAvailable"}
+                                className="margin-left-1"
+                            >
+                                Available
+                            </Tag>
+                        )}
+                    </div>
+
+                    <div className="font-12px margin-top-2 display-flex flex-justify-end">
+                        <div>
+                            Spending {""}
+                            <CurrencyFormat
+                                value={totalSpending ?? 0}
+                                displayType={"text"}
+                                thousandSeparator={true}
+                                prefix={"$"}
+                                renderText={(totalSpending) => <span>{totalSpending}</span>}
+                            />{" "}
+                            of{" "}
+                            <CurrencyFormat
+                                value={totalFunding ?? 0}
+                                displayType={"text"}
+                                thousandSeparator={true}
+                                prefix={"$"}
+                                renderText={(totalFunding) => <span>{totalFunding}</span>}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div
+                    id="currency-summary-card"
+                    className="margin-top-2"
+                >
+                    <LineGraph
+                        data={graphData}
+                        isStriped={true}
+                        overBudget={overBudget}
+                    />
+                </div>
+            </RoundedBox>
+            <p className="font-12px margin-0 text-base-dark">
+                *Spending equals the sum of Budget Lines in Planned, Executing and Obligated Status
+            </p>
+        </>
+    );
+};
+export default BigBudgetCard;