feat: implement Assets page support with Carbon Design System (#28)

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",
@@ -23,6 +25,7 @@
     "@mui/material": "^7.3.6",
     "@mui/x-date-pickers": "^8.25.0",
     "axios": "^1.13.3",
+    "carbon-components": "^10.59.2",
     "date-fns": "^4.1.0",
     "html-to-react": "^1.7.0",
     "lodash": "^4.17.23",
@@ -38,11 +41,14 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "buffer": "^6.0.3",
     "parcel": "^2.16.3",
     "prettier": "^3.8.0",
     "process": "^0.11.10",
-    "set-value": "4.1.0"
+    "set-value": "4.1.0",
+    "typescript": "^5.9.3"
   },
   "resolutions": {
     "set-value": "4.1.0"

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, FactCheck } 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: <FactCheck /> },
   ];
 
   return (

src/css/assets.css

@@ -0,0 +1,95 @@
+/* assets.css - Premium Overrides and Enhancements */
+
+.assets-container {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.assets-summary-grid {
+    margin-bottom: 2rem;
+}
+
+.assets-viz-card {
+    background: #ffffff;
+    padding: 1.5rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.viz-heading {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #161616;
+}
+
+.summary-tile-mini {
+    height: 142px;
+    /* Calculated to match viz card height in grid ideally */
+    background: #ffffff;
+    transition: all 0.2s cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.summary-tile-mini:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.summary-label {
+    color: #525252;
+    font-size: 0.875rem;
+}
+
+.summary-value {
+    font-size: 1.75rem;
+    font-weight: 600;
+    color: #161616;
+}
+
+.assets-accordion {
+    margin-top: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+}
+
+.accordion-title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+}
+
+.type-title {
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.cost-cell {
+    font-weight: 600;
+    color: #0f62fe;
+}
+
+.assets-error-wrapper {
+    color: #da1e28;
+    padding: 2rem;
+    border: 1px solid #da1e28;
+    background: #fff1f1;
+    text-align: center;
+    border-radius: 4px;
+}
+
+/* Fix Carbon Table Search width */
+.cds--table-toolbar-content .cds--search {
+    max-width: 400px !important;
+}
+
+.cds--table-container {
+    padding: 0 !important;
+}
+
+.count-tag {
+    margin-left: auto;
+    margin-right: 2rem;
+}

src/css/index.css

@@ -1,4 +1,6 @@
 @import "../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
+@import "../../node_modules/@carbon/styles/css/styles.min.css";
+@import "./assets.css";
 
 body {
   background-color: #f3f3f3;
@@ -17,4 +19,4 @@ body .page-container {
 
 .recharts-tooltip-wrapper {
   z-index: 1000;
-}
+}