Can Spending Tab: remove hardcoded in draft budge lines funding

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

@@ -26,6 +26,8 @@
     let visibleBudgetLines = [...budgetLines];
     visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
 
+    console.log({budgetLines})
+
     if (budgetLines.length === 0) {
         return <p className="text-center">No budget lines have been added to this CAN.</p>;
     }
@@ -38,7 +40,7 @@
                         key={budgetLine.id}
                         budgetLine={budgetLine}
                         blId={budgetLine.id}
-                        agreementName="TBD"
+                        agreementName={budgetLine.agreement.name ?? "TBD"}
                         obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
                         fiscalYear={budgetLine.fiscal_year || "TBD"}
                         amount={budgetLine.amount ?? 0}
@@ -48,7 +50,7 @@
                         inReview={budgetLine.in_review}
                         creatorId={budgetLine.created_by}
                         creationDate={budgetLine.created_on}
-                        procShopCode="TBD"
+                        procShopCode={budgetLine.agreement.awarding_entity_id}
                         procShopFeePercentage={budgetLine.proc_shop_fee_percentage}
                         notes={budgetLine.comments || "No Notes added"}
                     />

frontend/src/components/UI/Cards/LineGraphWithLegendCard/LegendItem.jsx

@@ -23,8 +23,8 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
     const isGraphActive = activeId === id;
 
     return (
-        <div className="grid-row margin-top-2 font-12px">
-            <div className="grid-col-5">
+        <div className="display-flex flex-justify margin-top-2 font-12px">
+            <div>
                 <div className="display-flex flex-align-center">
                     <FontAwesomeIcon
                         icon={faCircle}
@@ -41,12 +41,13 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
                     </span>
                 </div>
             </div>
-            <div className="grid-col-5">
+            <div >
                 <CurrencyFormat
                     value={value}
                     displayType={"text"}
                     thousandSeparator={true}
                     prefix={"$"}
+                    decimalScale={2}
                     renderText={(value) => (
                         <span
                             className={isGraphActive ? "fake-bold" : ""}
@@ -55,16 +56,17 @@ const LegendItem = ({ activeId, id, label, value, color, percent, tagStyleActive
                             {value}
                         </span>
                     )}
+                    fixedDecimalScale
                 />
-            </div>
-            <div className="grid-col-2">
                 <Tag
+                    className="margin-left-1"
                     tagStyle="darkTextWhiteBackground"
                     text={percent}
                     label={label}
                     active={isGraphActive}
                     tagStyleActive={tagStyleActive}
                     dataTestId="legend-tag"
+                    isLegend={true}
                 />
             </div>
         </div>

frontend/src/components/UI/Cards/ProjectAgreementBLICard/ProjectAgreementBLICard.jsx

@@ -90,7 +90,7 @@ const ProjectAgreementBLICard = ({ fiscalYear, projects, agreements, budgetLines
                                         className={`bg-brand-primary-light text-brand-primary-dark ${
                                             index > 0 ? "margin-top-1" : ""
                                         }`}
-                                        text={`${count} ${convertCodeForDisplay("agreementType", type)}`}
+                                        text={`${count} ${convertCodeForDisplay("agreement", type)}`}
                                     />
                                 ))}
                         </div>

frontend/src/components/UI/Tag/Tag.jsx

@@ -9,6 +9,7 @@ import PropTypes from "prop-types";
  * @property {string} [label] - The label of the tag.
  * @property {string} [className] - Additional CSS classes.
  * @property {number} [dataTestId] - The data test id.
+ * @property {boolean} [isLegend] - Used within a legend.
  * @property {Object} [rest] - Additional props.
  * @property {React.ReactNode} [children] - Child elements.
  */
@@ -18,7 +19,7 @@ import PropTypes from "prop-types";
  * @param {TagProps} props - The props.
  * @returns {JSX.Element} - The tag element.
  */
-const Tag = ({ tagStyle, tagStyleActive, text, active = false, label, className, children, ...rest }) => {
+const Tag = ({ tagStyle, tagStyleActive, text, active = false, label, className, children, isLegend = false, ...rest }) => {
     let tagClasses = "font-12px height-205 radius-md",
         activeClass = "";
     // OVERRIDES FOR DEFAULT CLASSES
@@ -108,13 +109,24 @@ const Tag = ({ tagStyle, tagStyleActive, text, active = false, label, className,
         }
     }
 
+    /**
+     * @param {boolean} isLegend
+     * @returns {Object} - The styles for the tag.
+     */
+    const handleLegendStyles = (isLegend) => {
+        if (isLegend) {
+            return {width: "40px", padding: ".25em .5em", display: "inline-block",textAlign: "center"}
+        } else {
+            return {
+            width: "fit-content", // Ensures the tag's width adapts to its content
+            padding: ".25em .5em" // Adds some space inside the tag for better readability}
+        }
+    }}
+
     return (
         <span
             className={`${tagClasses} ${activeClass} ${className}`}
-            style={{
-                width: "fit-content", // Ensures the tag's width adapts to its content
-                padding: ".25em .5em" // Adds some space inside the tag for better readability
-            }}
+            style={handleLegendStyles(isLegend)}
             data-testid={rest.dataTestId}
         >
             {text ? text : children}

frontend/src/helpers/utils.js

@@ -192,6 +192,13 @@ export const codesToDisplayText = {
     project: {
         ADMINISTRATIVE_AND_SUPPORT: "Admin & Support",
         RESEARCH: "Research"
+    },
+    agreement: {
+        "AgreementType.CONTRACT": "Contract",
+        "AgreementType.GRANT": "Grant",
+        "AgreementType.DIRECT_ALLOCATION": "Direct Allocation",
+        "AgreementType.IAA": "IAA",
+        "AgreementType.MISCELLANEOUS": "Misc"
     }
 };
 

frontend/src/pages/cans/detail/Can.hooks.js

@@ -43,13 +43,17 @@ export default function useCan() {
         [budgetLineItemsByFiscalYear]
     );
 
-    const testAgreements = [
-        { type: "CONTRACT", count: 8 },
-        { type: "GRANT", count: 2 },
-        { type: "DIRECT_ALLOCATION", count: 1 },
-        { type: "IAA", count: 1 },
-        { type: "MISCELLANEOUS", count: 1 }
-    ];
+
+    const budgetLineAgreements = can?.budget_line_items?.map(
+        (item) => item.agreement
+    ) ?? [];
+
+
+    const agreementTypesCount = React.useMemo(
+        () => getTypesCounts(budgetLineAgreements, "agreement_type"),
+        [fiscalYear, can]
+    );
+
 
     return {
         can: can ?? null,
@@ -71,11 +75,12 @@ export default function useCan() {
         plannedFunding: CANFunding?.planned_funding,
         obligatedFunding: CANFunding?.obligated_funding,
         inExecutionFunding: CANFunding?.in_execution_funding,
+        inDraftFunding: CANFunding?.in_draft_funding,
         expectedFunding: CANFunding?.expected_funding,
         receivedFunding: CANFunding?.received_funding,
         subTitle: can ? `${can.nick_name} - ${can.active_period} ${can.active_period > 1 ? "Years" : "Year"}` : "",
         projectTypesCount,
         budgetLineTypesCount,
-        testAgreements
+        agreementTypesCount
     };
 }

frontend/src/pages/cans/detail/Can.jsx

@@ -34,10 +34,11 @@ const Can = () => {
         plannedFunding,
         obligatedFunding,
         inExecutionFunding,
+        inDraftFunding,
         subTitle,
         projectTypesCount,
         budgetLineTypesCount,
-        testAgreements,
+        agreementTypesCount,
         receivedFunding
     } = useCan();
 
@@ -85,8 +86,9 @@ const Can = () => {
                             fiscalYear={fiscalYear}
                             projectTypesCount={projectTypesCount}
                             budgetLineTypesCount={budgetLineTypesCount}
-                            agreementTypesCount={testAgreements}
+                            agreementTypesCount={agreementTypesCount}
                             inExecutionFunding={inExecutionFunding}
+                            inDraftFunding={inDraftFunding}
                             obligatedFunding={obligatedFunding}
                             plannedFunding={plannedFunding}
                             totalFunding={totalFunding}

frontend/src/pages/cans/detail/CanSpending.jsx

@@ -24,6 +24,7 @@ import { calculatePercent } from "../../../helpers/utils";
  * @property {ItemCount[]} [agreementTypesCount]
  * @property {number} plannedFunding
  * @property {number} inExecutionFunding
+ * @property {number} inDraftFunding
  * @property {number} obligatedFunding
  * @property {number} totalFunding
  */
@@ -41,19 +42,19 @@ const CanSpending = ({
     agreementTypesCount,
     plannedFunding,
     inExecutionFunding,
+    inDraftFunding,
     obligatedFunding,
     totalFunding
 }) => {
     const totalSpending = Number(plannedFunding) + Number(obligatedFunding) + Number(inExecutionFunding);
-    const DRAFT_FUNDING = 1_000_000; // replace with actual data
 
     const graphData = [
         {
             id: 1,
             label: "Draft",
-            value: Math.round(DRAFT_FUNDING) || 0,
+            value: Math.round(inDraftFunding) || 0,
             color: "var(--neutral-lighter)",
-            percent: `${calculatePercent(DRAFT_FUNDING, totalFunding)}%`
+            percent: `${calculatePercent(inDraftFunding, totalFunding)}%`
         },
         {
             id: 2,