feat: implement Assets page with Carbon Design System

package.json

@@ -15,6 +15,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.28.6",
+    "@carbon/react": "^1.100.0",
+    "@carbon/styles": "^1.99.0",
     "@date-io/core": "^3.2.0",
     "@date-io/date-fns": "^3.2.1",
     "@emotion/react": "^11.14.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, 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 (

src/components/Page.js

@@ -24,11 +24,9 @@ const Page = (props) => {
         <div
           style={{
             position: "relative",
-            height: "100vh",
             flexGrow: 1,
-            overflowX: "auto",
             paddingLeft: "2rem",
-            paddingRight: "rem",
+            paddingRight: "2rem",
             paddingTop: "2.5rem",
           }}
         >

src/components/assets/AssetsCostBreakdown.js

@@ -0,0 +1,116 @@
+import React from "react";
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
+import { toCurrency } from "../../util";
+
+const ASSET_TYPE_COLORS = {
+  Node: "#0043ce",
+  Disk: "#8a3ffc",
+  Network: "#00539a",
+  LoadBalancer: "#009d9a",
+  ClusterManagement: "#da1e28",
+  Cluster: "#ff832b",
+  Cloud: "#be95ff",
+  default: "#6b7280",
+};
+
+const AssetsCostBreakdown = ({ costByType, totalCost, currency }) => {
+  if (!costByType || Object.keys(costByType).length === 0) {
+    return (
+      <div className="assets-cost-breakdown">
+        <p style={{ color: "#6f6f6f", fontStyle: "italic" }}>
+          No cost breakdown data available.
+        </p>
+      </div>
+    );
+  }
+
+  const chartData = Object.entries(costByType)
+    .map(([type, cost]) => ({
+      name: type,
+      value: cost,
+      percentage: totalCost > 0 ? ((cost / totalCost) * 100).toFixed(1) : 0,
+    }))
+    .sort((a, b) => b.value - a.value);
+
+  const getColor = (type) =>
+    ASSET_TYPE_COLORS[type] || ASSET_TYPE_COLORS.default;
+
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="assets-chart-tooltip">
+          <p className="assets-chart-tooltip__label">{data.name}</p>
+          <p className="assets-chart-tooltip__value">
+            {toCurrency(data.value, currency)}
+          </p>
+          <p className="assets-chart-tooltip__percent">{data.percentage}%</p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="assets-cost-breakdown">
+      <div className="assets-cost-breakdown__tags">
+        {chartData.map(({ name, value, percentage }) => {
+          const tagClass = `assets-type-tag assets-type-tag--${name.toLowerCase()}`;
+          return (
+            <div key={name} className={tagClass}>
+              {name} — {toCurrency(value, currency)} ({percentage}%)
+            </div>
+          );
+        })}
+      </div>
+      <div className="assets-cost-breakdown__chart">
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            textAlign: "center",
+            pointerEvents: "none",
+          }}
+        >
+          <div
+            style={{ fontSize: "12px", color: "#6f6f6f", fontWeight: "500" }}
+          >
+            Total Cost
+          </div>
+          <div
+            style={{ fontSize: "24px", color: "#161616", fontWeight: "700" }}
+          >
+            {toCurrency(totalCost, currency)}
+          </div>
+        </div>
+        <ResponsiveContainer width="100%" height={280}>
+          <PieChart>
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="50%"
+              innerRadius={80}
+              outerRadius={120}
+              paddingAngle={2}
+              minAngle={8}
+              dataKey="value"
+            >
+              {chartData.map((entry) => (
+                <Cell
+                  key={entry.name}
+                  fill={getColor(entry.name)}
+                  style={{ cursor: "pointer" }}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
+
+export default AssetsCostBreakdown;

src/components/assets/AssetsDataTable.js

@@ -0,0 +1,118 @@
+import React, { useState, useMemo } from "react";
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from "@carbon/react";
+import { toCurrency, bytesToString } from "../../util";
+
+const headers = [
+  { key: "name", header: "Name" },
+  { key: "type", header: "Type" },
+  { key: "provider", header: "Provider" },
+  { key: "cluster", header: "Cluster" },
+  { key: "cpuCores", header: "CPU Cores" },
+  { key: "ramBytes", header: "RAM" },
+  { key: "totalCost", header: "Total Cost" },
+];
+
+const AssetsDataTable = ({ assets, currency }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const safeAssets = Array.isArray(assets) ? assets : [];
+
+  const sortedAssets = useMemo(() => {
+    return [...safeAssets].sort(
+      (a, b) => (b.totalCost || 0) - (a.totalCost || 0),
+    );
+  }, [safeAssets]);
+
+  const filteredAssets = useMemo(() => {
+    if (!searchTerm) return sortedAssets;
+    const lowerSearch = searchTerm.toLowerCase();
+    return sortedAssets.filter(
+      (asset) =>
+        (asset.name || "").toLowerCase().includes(lowerSearch) ||
+        (asset.type || "").toLowerCase().includes(lowerSearch) ||
+        (asset.provider || "").toLowerCase().includes(lowerSearch) ||
+        (asset.cluster || "").toLowerCase().includes(lowerSearch),
+    );
+  }, [sortedAssets, searchTerm]);
+
+  const rows = filteredAssets.map((asset, index) => ({
+    id: asset.key || `${asset.name || "asset"}-${index}`,
+    name: asset.name || "-",
+    type: asset.type || "-",
+    provider: asset.provider || "-",
+    cluster: asset.cluster || "-",
+    cpuCores: asset.cpuCores != null ? asset.cpuCores.toFixed(2) : "-",
+    ramBytes: asset.ramBytes != null ? bytesToString(asset.ramBytes) : "-",
+    totalCost: toCurrency(asset.totalCost || 0, currency),
+    rawCost: asset.totalCost || 0,
+  }));
+
+  return (
+    <div className="assets-data-table">
+      <DataTable rows={rows} headers={headers} isSortable>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getTableProps,
+          getTableContainerProps,
+          getToolbarProps,
+        }) => (
+          <TableContainer
+            title="Infrastructure Assets"
+            description="Detailed view of all infrastructure assets and their costs"
+            {...getTableContainerProps()}
+          >
+            <TableToolbar {...getToolbarProps()}>
+              <TableToolbarContent>
+                <TableToolbarSearch
+                  persistent
+                  placeholder="Search assets..."
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} size="lg">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({ header })}
+                    >
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default AssetsDataTable;

src/components/assets/AssetsFilters.js

@@ -0,0 +1,24 @@
+import React from "react";
+import AssetsSelectWindow from "./AssetsSelectWindow";
+import AssetsSelectType from "./AssetsSelectType";
+
+const AssetsFilters = ({
+  window,
+  setWindow,
+  assetType,
+  setAssetType,
+  assetTypeOptions,
+}) => {
+  return (
+    <div className="assets-filters">
+      <AssetsSelectWindow window={window} setWindow={setWindow} />
+      <AssetsSelectType
+        assetType={assetType}
+        setAssetType={setAssetType}
+        assetTypeOptions={assetTypeOptions}
+      />
+    </div>
+  );
+};
+
+export default AssetsFilters;