style: ux review

HHS · Dec 9, 2024 · c54e751 · c54e751
1 parent 4450ff7
commit c54e751
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx b/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx
@@ -9,14 +9,15 @@ import Tag from "../../UI/Tag";
  * @property {string} portfolioName
  * @property {import("../../Users/UserTypes").SafeUser[]} teamLeaders
  * @property {string} divisionDirectorFullName
+ * @property {string} divisionName
  */
 /**
  * This component needs to wrapped in a <dl> element.
  * @component - Renders a term with a tag.
  * @param {CANDetailViewProps} props - The properties passed to the component.
  * @returns {JSX.Element} - The rendered component.
  */
-const CANDetailView = ({ description, number, nickname, portfolioName, teamLeaders, divisionDirectorFullName, }) => {
+const CANDetailView = ({ description, number, nickname, portfolioName, teamLeaders, divisionDirectorFullName, divisionName}) => {
     return (
         <div className="grid-row font-12px">
             {/* // NOTE: Left Column */}
@@ -53,6 +54,10 @@ const CANDetailView = ({ description, number, nickname, portfolioName, teamLeade
                         term="Portfolio"
                         description={portfolioName}
                     />
+                    <TermTag
+                        term="Division"
+                        description={divisionName}
+                    />
                 </dl>
                 <dl>
                     <dt className="margin-0 text-base-dark margin-top-3">Team Leader</dt>

diff --git a/frontend/src/pages/cans/detail/Can.hooks.js b/frontend/src/pages/cans/detail/Can.hooks.js
@@ -78,7 +78,7 @@ export default function useCan() {
         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"}` : "",
+        subTitle: can?.nick_name ?? "",
         projectTypesCount,
         budgetLineTypesCount,
         agreementTypesCount,

diff --git a/frontend/src/pages/cans/detail/CanDetail.jsx b/frontend/src/pages/cans/detail/CanDetail.jsx
@@ -1,11 +1,12 @@
+import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 import { useGetDivisionQuery } from "../../../api/opsAPI";
-import useGetUserFullNameFromId from "../../../hooks/user.hooks";
-import { faPen } from "@fortawesome/free-solid-svg-icons";
-import { getCurrentFiscalYear } from "../../../helpers/utils";
-import CANDetailView from "../../../components/CANs/CANDetailView";
 import CANDetailForm from "../../../components/CANs/CANDetailForm";
-import React from "react";
+import CANDetailView from "../../../components/CANs/CANDetailView";
+import { NO_DATA } from "../../../constants.js";
+import { getCurrentFiscalYear } from "../../../helpers/utils";
+import useGetUserFullNameFromId from "../../../hooks/user.hooks";
 
 /**
     @typedef {import("../../../components/Users/UserTypes").SafeUser} SafeUser
@@ -52,6 +53,7 @@ const CanDetail = ({
 
     const currentFiscalYear = getCurrentFiscalYear();
     const showButton = isBudgetTeamMember && fiscalYear === Number(currentFiscalYear);
+    const divisionName = division?.display_name ?? NO_DATA;
 
     return (
         <article>
@@ -91,6 +93,7 @@ const CanDetail = ({
                     portfolioName={portfolioName}
                     teamLeaders={teamLeaders}
                     divisionDirectorFullName={divisionDirectorFullName}
+                    divisionName={divisionName}
                 />
             )}
         </article>