feat: ✨ adds Cans list summary card for Total Budget

frontend/cypress/e2e/canList.cy.js

@@ -148,9 +148,11 @@ describe("CAN List", () => {
         cy.get("button").should("have.class", "usa-current").contains("1");
     });
 
-    it("should display the can budget summary card", () => {
+    it("should display the summary cards", () => {
         cy.get("#fiscal-year-select").select("2023");
-        cy.get("[data-cy='budget-summary-card']").should("exist")
-        cy.get("[data-cy='budget-summary-card']").contains("FY 2023 CANs Available Budget *")
+        cy.get("[data-cy='budget-summary-card']").should("exist");
+        cy.get("[data-cy='budget-summary-card']").contains("FY 2023 CANs Available Budget *");
+        cy.get("[data-cy='line-graph-with-legend-card']").should("exist");
+        cy.get("[data-cy='line-graph-with-legend-card']").contains("FY 2023 CANs Total Budget");
     });
 });

frontend/sass/uswds/styles.scss

@@ -63,6 +63,7 @@ html {
     --data-viz-bl-by-status-4: #8b4687;
     --data-viz-budget-graph-1: #3a835b;
     --data-viz-budget-graph-2: #a6deb5;
+    --can-total-budget-2: #1f468e;
 }
 
 $themeColors: (
@@ -119,7 +120,8 @@ $themeColors: (
     "data-viz-bl-by-status-3": var(--data-viz-bl-by-status-3),
     "data-viz-bl-by-status-4": var(--data-viz-bl-by-status-4),
     "data-viz-budget-graph-1": var(--data-viz-budget-graph-1),
-    "data-viz-budget-graph-2": var(--data-viz-budget-graph-2)
+    "data-viz-budget-graph-2": var(--data-viz-budget-graph-2),
+    "can-total-budget-2": var(--can-total-budget-2)
 );
 
 @each $name, $color in $themeColors {

frontend/src/components/Agreements/AgreementActionAccordion/AgreementActionAccordion.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import RadioButtonTile from "../../UI/RadioButtonTile";
+import RadioButtonTile from "../../UI/Form/RadioButtonTile";
 import Accordion from "../../UI/Accordion";
 import { actionOptions } from "../../../pages/agreements/review/ReviewAgreement.constants";
 

frontend/src/components/Agreements/AgreementDetailsCards/AgreementTotalBudgetLinesCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import StatusTagList from "../../UI/Tag/StatusTagList";
-import SummaryCard from "../../UI/SummaryCard";
+import Card from "../../UI/Cards/Card";
 
 /**
  * A component that displays the total budget lines for an agreement.
@@ -15,7 +15,7 @@ const AgreementTotalBudgetLinesCard = ({ numberOfAgreements = 0, countsByStatus
     const headerText = "Total Budget Lines";
 
     return (
-        <SummaryCard>
+        <Card>
             <article data-cy="agreement-total-budget-lines-card-article">
                 <h3 className="margin-0 margin-bottom-3 font-12px text-base-dark text-normal">{headerText}</h3>
                 <div className="display-flex flex-justify width-fit-content">
@@ -33,7 +33,7 @@ const AgreementTotalBudgetLinesCard = ({ numberOfAgreements = 0, countsByStatus
                     </div>
                 </div>
             </article>
-        </SummaryCard>
+        </Card>
     );
 };
 

frontend/src/components/Agreements/AgreementDetailsCards/AgreementTotalCard/AgreementTotalCard.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import CurrencySummaryCard from "../../../UI/CurrencySummaryCard/CurrencySummaryCard";
+import CurrencyCard from "../../../UI/Cards/CurrencyCard";
 import CurrencyFormat from "react-currency-format";
 import { getDecimalScale } from "../../../../helpers/currencyFormat.helpers";
 
@@ -15,7 +15,7 @@ import { getDecimalScale } from "../../../../helpers/currencyFormat.helpers";
  */
 const AgreementTotalCard = ({ total, subtotal, fees, procurementShopAbbr = "TBD", procurementShopFee = 0 }) => {
     return (
-        <CurrencySummaryCard
+        <CurrencyCard
             headerText="Agreement Total"
             amount={total}
             className="margin-top-neg-105"
@@ -56,7 +56,7 @@ const AgreementTotalCard = ({ total, subtotal, fees, procurementShopAbbr = "TBD"
                     </div>
                 </div>
             </div>
-        </CurrencySummaryCard>
+        </CurrencyCard>
     );
 };
 

frontend/src/components/Agreements/AgreementDetailsCards/AgreementValuesCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { ResponsiveBar } from "@nivo/bar";
-import CurrencySummaryCard from "../../UI/CurrencySummaryCard/CurrencySummaryCard";
+import CurrencyCard from "../../UI/Cards/CurrencyCard";
 import { fiscalYearFromDate } from "../../../helpers/utils";
 import constants from "../../../constants";
 const { barChartColors } = constants;
@@ -44,7 +44,7 @@ const AgreementTotalBudgetLinesCard = ({ budgetLineItems }) => {
         .sort((a, b) => b.FY - a.FY);
 
     return (
-        <CurrencySummaryCard
+        <CurrencyCard
             headerText={headerText}
             amount={totalValue}
         >
@@ -81,7 +81,7 @@ const AgreementTotalBudgetLinesCard = ({ budgetLineItems }) => {
             ) : (
                 <p>No budget lines in the next 3 FYs</p>
             )}
-        </CurrencySummaryCard>
+        </CurrencyCard>
     );
 };
 

frontend/src/components/Agreements/AgreementDetailsCards/BLIsByFYSummaryCard/BLIsByFYSummaryCard.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CurrencyFormat from "react-currency-format";
-import SummaryCard from "../../../UI/SummaryCard";
+import Card from "../../../UI/Cards/Card";
 import styles from "./BLIsByFYSummaryCard.styles.module.scss";
 import { summaryCard } from "./BLIsFYSummaryCard.helpers";
 import { getDecimalScale } from "../../../../helpers/currencyFormat.helpers";
@@ -18,7 +18,7 @@ const BLIsByFYSummaryCard = ({ budgetLineItems = [] }) => {
     const { chartData } = summaryCard(budgetLineItems);
 
     return (
-        <SummaryCard
+        <Card
             title="Budget Lines by Fiscal Year"
             dataCy="blis-by-fy-card"
         >
@@ -51,7 +51,7 @@ const BLIsByFYSummaryCard = ({ budgetLineItems = [] }) => {
                     </div>
                 ))}
             </div>
-        </SummaryCard>
+        </Card>
     );
 };
 

frontend/src/components/Agreements/AgreementEditor/AgreementEditorContext.hooks.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { AGREEMENT_TYPES, SERVICE_REQ_TYPES } from "../../ServicesComponents/ServicesComponents.constants";
-import { AgreementEditorContext, EditAgreementDispatchContext } from "./AgreementEditorContext";
+import { AgreementEditorContext, EditAgreementDispatchContext } from "./contexts";
 
 export const defaultState = {
     agreement: {

frontend/src/components/Agreements/AgreementEditor/AgreementEditorContext.jsx

@@ -1,8 +1,6 @@
-import { createContext, useReducer } from "react";
-import { editAgreementReducer, initialState, defaultState } from "./AgreementEditorContext.hooks";
-
-export const AgreementEditorContext = createContext(null);
-export const EditAgreementDispatchContext = createContext(null);
+import { useReducer } from "react";
+import { defaultState, editAgreementReducer, initialState } from "./AgreementEditorContext.hooks";
+import { AgreementEditorContext, EditAgreementDispatchContext } from "./contexts";
 
 let modifiedInitialState = { ...initialState };
 

frontend/src/components/Agreements/AgreementEditor/contexts.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+
+export const AgreementEditorContext = createContext(null);
+export const EditAgreementDispatchContext = createContext(null);

frontend/src/components/Agreements/AgreementTypeSelect.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import Select from "../UI/Select";
+import Select from "../UI/Form/Select";
 import { useGetAgreementTypesQuery } from "../../api/opsAPI";
 import { convertCodeForDisplay } from "../../helpers/utils";
 

frontend/src/components/Agreements/Documents/DocumentCollectionView.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import DocumentCard from "../../UI/DocumentCard/DocumentCard";
+import DocumentCard from "../../UI/Cards/DocumentCard";
 
 /**
  * Renders the list of documents for an agreement.

frontend/src/components/BudgetLineItems/BLIStatusSummaryCard/BLIStatusSummaryCard.jsx

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 import CurrencyFormat from "react-currency-format";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import { ResponsiveDonutWithInnerPercent } from "../../UI/ResponsiveDonutWithInnerPercent/ResponsiveDonutWithInnerPercent";
-import CustomLayerComponent from "../../UI/ResponsiveDonutWithInnerPercent/CustomLayerComponent";
+import ResponsiveDonutWithInnerPercent from "../../UI/DataViz/ResponsiveDonutWithInnerPercent";
+import CustomLayerComponent from "../../UI/DataViz/ResponsiveDonutWithInnerPercent/CustomLayerComponent";
 import Tag from "../../UI/Tag/Tag";
 import RoundedBox from "../../UI/RoundedBox";
 import { calculatePercent, totalBudgetLineFeeAmount } from "../../../helpers/utils";

frontend/src/components/BudgetLineItems/BudgetLinesForm/BudgetLinesForm.jsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAdd } from "@fortawesome/free-solid-svg-icons";
 import CanComboBox from "../../CANs/CanComboBox";
 import TextArea from "../../UI/Form/TextArea/TextArea";
-import CurrencyInput from "../../UI/CurrencyInput";
+import CurrencyInput from "../../UI/Form/CurrencyInput";
 import AllServicesComponentSelect from "../../ServicesComponents/AllServicesComponentSelect";
 import DatePicker from "../../UI/USWDS/DatePicker";
 import suite from "./suite";

frontend/src/components/BudgetLineItems/BudgetLinesTotalSummaryCard/BudgetLinesTotalSummaryCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import CurrencyWithSmallCents from "../../UI/CurrencyWithSmallCents/CurrencyWithSmallCents";
 import { totalBudgetLineAmountPlusFees, totalBudgetLineFeeAmount } from "../../../helpers/utils";
-import SummaryCard from "../../UI/SummaryCard";
+import Card from "../../UI/Cards/Card";
 
 const calculateTotalAmountWithFees = (budgetLines) => {
     return budgetLines.reduce((total, budgetLine) => {
@@ -26,7 +26,7 @@ const calculateTotalAmountWithFees = (budgetLines) => {
 const BudgetLineTotalSummaryCard = ({ title, budgetLines }) => {
     const totalAmountWithFees = calculateTotalAmountWithFees(budgetLines);
     return (
-        <SummaryCard
+        <Card
             title={title}
             dataCy="bl-total-summary-card"
         >
@@ -35,7 +35,7 @@ const BudgetLineTotalSummaryCard = ({ title, budgetLines }) => {
                 dollarsClasses="font-sans-xl text-bold margin-bottom-0"
                 centsStyles={{ fontSize: "10px" }}
             />
-        </SummaryCard>
+        </Card>
     );
 };
 

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

@@ -6,7 +6,7 @@ import { calculatePercent } from "../../../helpers/utils";
 import CurrencyWithSmallCents from "../../UI/CurrencyWithSmallCents/CurrencyWithSmallCents";
 import RoundedBox from "../../UI/RoundedBox";
 import Tag from "../../UI/Tag";
-import CANFundingBar from "../CANFundingBar";
+import LineGraph from "../../UI/DataViz/LineGraph";
 
 /**
  * A component that displays funding information for a CAN
@@ -93,7 +93,7 @@ const CANFundingCard = ({ can, pendingAmount, afterApproval }) => {
                 id="currency-summary-card"
                 className="margin-top-2"
             >
-                <CANFundingBar
+                <LineGraph
                     data={canFundingBarData}
                     isStriped={true}
                     overBudget={overBudget}

frontend/src/components/CANs/CANFundingYTD/CANFundingYTD.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./styles.module.css";
 import CurrencyFormat from "react-currency-format";
-import CANFundingBar from "../CANFundingBar/CANFundingBar";
+import LineGraph from "../../UI/DataViz/LineGraph";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import Tag from "../../UI/Tag/Tag";
@@ -103,7 +103,7 @@ const CANFundingYTD = ({
                 />
             </div>
             <div className={`margin-top-2 ${styles.barBox}`}>
-                <CANFundingBar
+                <LineGraph
                     setActiveId={setActiveId}
                     data={data}
                 />

frontend/src/components/CANs/CANSummaryCards/CANSummaryCards.jsx

@@ -1,19 +1,51 @@
-import BudgetSummaryCard from "../../UI/SummaryCard/BudgetSummaryCard";
+import { calculatePercent } from "../../../helpers/utils";
+import BudgetCard from "../../UI/Cards/BudgetCard";
+import LineGraphWithLegendCard from "../../UI/Cards/LineGraphWithLegendCard";
 
 /**
- * @component
- * @param {Object} props - Properties passed to component
- * @param {number} props.fiscalYear - The fiscal year.
+ * @typedef {Object} CANSummaryCardsProps
+ * @property {number} fiscalYear - The fiscal year.
+ */
+
+/**
+ * @component CANSummaryCards - Wraps the LineGraphWithLegend and BudgetCard components.
+ * @param {CANSummaryCardsProps} props
  * @returns {JSX.Element} - The CANSummaryCards component.
  */
 const CANSummaryCards = ({ fiscalYear }) => {
+    const totalSpending = 42_650_000;
+    const totalBudget = 56_000_000;
+    const newFunding = 41_000_000;
+    const carryForward = 15_000_000;
+    const data = [
+        {
+            id: 1,
+            label: "Previous FYs Carry-Forward",
+            value: carryForward,
+            color: "var(--feedback-info)",
+            percent: `${calculatePercent(carryForward, totalBudget)}%`,
+            tagActiveStyle: "darkTextOnLightBlue"
+        },
+        {
+            id: 2,
+            label: `FY ${fiscalYear} New Funding`,
+            value: newFunding,
+            color: "var(--can-total-budget-2)",
+            percent: `${calculatePercent(newFunding, totalBudget)}%`,
+            tagActiveStyle: "lightTextOnDarkBlue"
+        }
+    ];
     return (
         <div className="display-flex flex-justify">
-            <p> Summary Cards Left</p>
-            <BudgetSummaryCard
+            <LineGraphWithLegendCard
+                heading={`FY ${fiscalYear} CANs Total Budget`}
+                data={data}
+                bigNumber={totalBudget}
+            />
+            <BudgetCard
                 title={`FY ${fiscalYear} CANs Available Budget *`}
-                totalSpending={1_500_000}
-                totalFunding={2_000_000}
+                totalSpending={totalSpending}
+                totalFunding={totalBudget}
             />
         </div>
     );

frontend/src/components/CANs/CanCard/CanCard.jsx

@@ -5,8 +5,8 @@ import { useEffect, useState } from "react";
 import CurrencyFormat from "react-currency-format";
 import { getPortfolioCansFundingDetails } from "../../../api/getCanFundingSummary";
 import { calculatePercent, formatDateNeeded } from "../../../helpers/utils";
-import CustomLayerComponent from "../../UI/ResponsiveDonutWithInnerPercent/CustomLayerComponent";
-import { ResponsiveDonutWithInnerPercent } from "../../UI/ResponsiveDonutWithInnerPercent/ResponsiveDonutWithInnerPercent";
+import CustomLayerComponent from "../../UI/DataViz/ResponsiveDonutWithInnerPercent/CustomLayerComponent";
+import ResponsiveDonutWithInnerPercent from "../../UI/DataViz/ResponsiveDonutWithInnerPercent";
 import Tag from "../../UI/Tag/Tag";
 import CANFundingYTD from "../CANFundingYTD/CANFundingYTD";
 import style from "./styles.module.css";