Assets Page Implementation using Carbon Design System

package.json

@@ -15,6 +15,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.28.6",
+    "@carbon/icons-react": "^11.74.0",
+    "@carbon/react": "^1.100.0",
     "@date-io/core": "^3.2.0",
     "@date-io/date-fns": "^3.2.1",
     "@emotion/react": "^11.14.0",
@@ -38,6 +40,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
+    "@parcel/transformer-sass": "^2.16.3",
     "buffer": "^6.0.3",
     "parcel": "^2.16.3",
     "prettier": "^3.8.0",
@@ -47,4 +50,4 @@
   "resolutions": {
     "set-value": "4.1.0"
   }
-}
+}

src/components/Controls/Edit.js

@@ -2,72 +2,78 @@ import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
-
 import React from "react";
-
 import SelectWindow from "../SelectWindow";
 
 function EditControl({
-  windowOptions,
-  window,
+  windowOptions = [],
+  window = "",
   setWindow,
-  aggregationOptions,
-  aggregateBy,
+  aggregationOptions = [],
+  aggregateBy = "",
   setAggregateBy,
-  accumulateOptions,
-  accumulate,
+  accumulateOptions = [],
+  accumulate = "",
   setAccumulate,
-  currencyOptions,
-  currency,
+  currencyOptions = [],
+  currency = "",
   setCurrency,
 }) {
   return (
     <div style={{ display: "inline-flex" }}>
+      {/* Time Window Selector */}
       <SelectWindow
         windowOptions={windowOptions}
         window={window}
         setWindow={setWindow}
       />
+
+      {/* Breakdown / Aggregation Selector */}
       <FormControl style={{ margin: 8, minWidth: 120 }} variant="standard">
         <InputLabel id="aggregation-select-label">Breakdown</InputLabel>
         <Select
+          labelId="aggregation-select-label"
           id="aggregation-select"
-          value={aggregateBy}
-          onChange={(e) => {
-            setAggregateBy(e.target.value);
-          }}
+          value={aggregateBy || ""}
+          onChange={(e) => setAggregateBy(e.target.value)}
         >
-          {aggregationOptions.map((opt) => (
+          {aggregationOptions && aggregationOptions.map((opt) => (
             <MenuItem key={opt.value} value={opt.value}>
               {opt.name}
             </MenuItem>
           ))}
         </Select>
       </FormControl>
+
+      {/* Resolution / Accumulate Selector */}
       <FormControl style={{ margin: 8, minWidth: 120 }} variant="standard">
         <InputLabel id="accumulate-label">Resolution</InputLabel>
         <Select
+          labelId="accumulate-label"
           id="accumulate"
-          value={accumulate}
+          value={accumulate || ""}
           onChange={(e) => setAccumulate(e.target.value)}
         >
-          {accumulateOptions.map((opt) => (
+          {accumulateOptions && accumulateOptions.map((opt) => (
             <MenuItem key={opt.value} value={opt.value}>
               {opt.name}
             </MenuItem>
           ))}
         </Select>
       </FormControl>
+
+      {/* Currency Selector */}
       <FormControl style={{ margin: 8, minWidth: 120 }} variant="standard">
         <InputLabel id="currency-label">Currency</InputLabel>
         <Select
+          labelId="currency-label"
           id="currency"
-          value={currency}
+          value={currency || ""}
           onChange={(e) => setCurrency(e.target.value)}
         >
-          {currencyOptions?.map((currency) => (
-            <MenuItem key={currency} value={currency}>
-              {currency}
+          {currencyOptions && currencyOptions.map((c) => (
+            <MenuItem key={c} value={c}>
+              {c}
             </MenuItem>
           ))}
         </Select>
@@ -76,4 +82,4 @@ function EditControl({
   );
 }
 
-export default React.memo(EditControl);
+export default React.memo(EditControl);

src/components/Nav/SidebarNav.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Drawer, List } from "@mui/material";
 
 import { NavItem } from "./NavItem";
-import { BarChart, Cloud } from "@mui/icons-material";
+import { BarChart, Cloud, Storage } from "@mui/icons-material";
 
 const logo = new URL("../../images/logo.png", import.meta.url).href;
 
@@ -25,6 +25,7 @@ const SidebarNav = ({ active }) => {
     },
     { name: "Cloud Costs", href: "/cloud", icon: <Cloud /> },
     { name: "External Costs", href: "/external-costs", icon: <Cloud /> },
+    {name: "Assets", href: "/assets", icon: <Storage />},
   ];
 
   return (
@@ -57,4 +58,4 @@ const SidebarNav = ({ active }) => {
   );
 };
 
-export { SidebarNav };
+export { SidebarNav };

src/css/index.css

@@ -18,3 +18,13 @@ body .page-container {
 .recharts-tooltip-wrapper {
   z-index: 1000;
 }
+/* Increase padding and make click target feel bigger */
+.cds--overflow-menu-options__option-content {
+  padding-block: 0.25rem;
+  padding-inline: 0.75rem;
+}
+
+/* Ensure the option row has a visible hover background */
+.cds--overflow-menu-options__btn:hover {
+  background-color: var(--cds-layer-hover, #e5e5e5);
+}

src/index.html

@@ -5,6 +5,7 @@
     <meta content="utf-8" http-equiv="encoding" />
     <link rel="icon" href="./images/favicon.ico" />
     <link rel="stylesheet" href="./css/index.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@carbon/react/2.17.0/index.css">
   </head>
 
   <body>