feat: added Assets page with carbon design system and service

package.json

@@ -15,6 +15,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.28.6",
+    "@carbon/icons-react": "^11.58.0",
+    "@carbon/react": "^1.100.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,Dns  } 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: <Dns  /> }, 
   ];
 
   return (

src/components/Page.js

@@ -8,9 +8,9 @@ const Page = (props) => {
     <div
       style={{
         display: "flex",
-        overflowY: "scroll",
         margin: "0px",
         backgroundColor: "f3f3f3",
+        minHeight: "100vh",
       }}
     >
       <SidebarNav active={pathname} />
@@ -24,12 +24,11 @@ const Page = (props) => {
         <div
           style={{
             position: "relative",
-            height: "100vh",
             flexGrow: 1,
-            overflowX: "auto",
             paddingLeft: "2rem",
-            paddingRight: "rem",
+            paddingRight: "2rem",
             paddingTop: "2.5rem",
+            paddingBottom: "2rem",
           }}
         >
           <div

src/components/assets/SavingsOpportunities.js

@@ -0,0 +1,151 @@
+import React, { useMemo } from "react";
+import { Tile, Heading, Tag } from "@carbon/react";
+import { toCurrency } from "../../util";
+
+const SavingsOpportunities = ({ assets, currency }) => {
+  const { underutilized, anomalies, totalPotentialSavings, avgNodeCost } = useMemo(() => {
+    const under = assets
+      .filter((a) => a.type === "Node" && a.cpuBreakdown)
+      .map((a) => {
+        const cpuUtil = (1 - (a.cpuBreakdown.idle || 0)) * 100;
+        const ramUtil = a.ramBreakdown ? (1 - (a.ramBreakdown.idle || 0)) * 100 : null;
+        const wasteRatio = Math.max(0, 1 - cpuUtil / 100);
+        const potentialSavings = (a.totalCost || 0) * wasteRatio * 0.5;
+        return { ...a, cpuUtil, ramUtil, potentialSavings };
+      })
+      .filter((a) => a.cpuUtil < 30)
+      .sort((a, b) => b.potentialSavings - a.potentialSavings)
+      .slice(0, 5);
+
+    const nodeAssets = assets.filter((a) => a.type === "Node" && a.totalCost > 0);
+    const avgCost = nodeAssets.length > 0
+      ? nodeAssets.reduce((s, a) => s + (a.totalCost || 0), 0) / nodeAssets.length
+      : 0;
+    const anom = nodeAssets
+      .filter((a) => a.totalCost > avgCost * 2)
+      .sort((a, b) => b.totalCost - a.totalCost)
+      .slice(0, 3);
+
+    return {
+      underutilized: under,
+      anomalies: anom,
+      totalPotentialSavings: under.reduce((s, a) => s + a.potentialSavings, 0),
+      avgNodeCost: avgCost,
+    };
+  }, [assets]);
+
+  if (underutilized.length === 0 && anomalies.length === 0) return null;
+
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <Heading size="sm" style={{ marginBottom: 12, fontSize: "1.4rem", fontWeight: 700 }}>
+        Savings Opportunities
+      </Heading>
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
+        {totalPotentialSavings > 0 && (
+          <Tile
+            style={{
+              padding: 16,
+              border: "1px solid #c8e6c9",
+              borderRadius: 6,
+              backgroundColor: "#f1f8e9",
+              boxShadow: "none",
+            }}
+          >
+            <p
+              style={{ textTransform: "uppercase", letterSpacing: 0.8, fontSize: "0.65rem", fontWeight: 600, color: "#2e7d32", margin: 0 }}
+            >
+              Estimated Potential Savings
+            </p>
+            <Heading style={{ fontWeight: 700, color: "#2e7d32", marginTop: 6, fontSize: "1.05rem" }}>
+              {toCurrency(totalPotentialSavings, currency)}
+            </Heading>
+            <p style={{ color: "#6f6f6f", fontSize: "0.875rem", margin: 0 }}>
+              from {underutilized.length} underutilized {underutilized.length === 1 ? "asset" : "assets"}
+            </p>
+          </Tile>
+        )}
+
+        {underutilized.map((asset) => (
+          <Tile
+            key={asset.key}
+            style={{
+              padding: 16,
+              border: "1px solid #ffcdd2",
+              borderRadius: 6,
+              backgroundColor: "#fff8f8",
+              boxShadow: "none",
+            }}
+          >
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
+              <p
+                style={{
+                  fontWeight: 600,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  maxWidth: "65%",
+                  margin: 0,
+                }}
+                title={asset.properties?.name || asset.key || ""}
+              >
+                {asset.properties?.name || asset.key || "Unknown"}
+              </p>
+              <Tag type="red">{asset.cpuUtil.toFixed(0)}% CPU</Tag>
+            </div>
+            <p style={{ color: "#6f6f6f", fontSize: "0.875rem", margin: 0 }}>
+              Cost: {toCurrency(asset.totalCost || 0, currency)} | Save approx {toCurrency(asset.potentialSavings, currency)}
+            </p>
+            {asset.ramUtil !== null && (
+              <p style={{ color: "#6f6f6f", fontSize: "0.875rem", margin: 0 }}>
+                RAM utilization: {asset.ramUtil.toFixed(0)}%
+              </p>
+            )}
+            <p style={{ color: "#e65100", fontWeight: 600, marginTop: 6, fontSize: "0.875rem", marginBottom: 0 }}>
+              Consider right-sizing or scaling down
+            </p>
+          </Tile>
+        ))}
+
+        {anomalies.map((asset) => (
+          <Tile
+            key={`anomaly-${asset.key}`}
+            style={{
+              padding: 16,
+              border: "1px solid #fff3e0",
+              borderRadius: 6,
+              backgroundColor: "#fffde7",
+              boxShadow: "none",
+            }}
+          >
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
+              <p
+                style={{
+                  fontWeight: 600,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  maxWidth: "65%",
+                  margin: 0,
+                }}
+                title={asset.properties?.name || asset.key || ""}
+              >
+                {asset.properties?.name || asset.key || "Unknown"}
+              </p>
+              <Tag type="yellow">High Cost</Tag>
+            </div>
+            <p style={{ color: "#6f6f6f", fontSize: "0.875rem", margin: 0 }}>
+              {toCurrency(asset.totalCost || 0, currency)} - {((asset.totalCost / avgNodeCost) * 100 - 100).toFixed(0)}% above average
+            </p>
+            <p style={{ color: "#f57c00", fontWeight: 600, marginTop: 6, fontSize: "0.875rem", marginBottom: 0 }}>
+              Cost spike - review resource allocation
+            </p>
+          </Tile>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SavingsOpportunities);

src/components/assets/SummaryCard.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { Tile, Heading } from "@carbon/react";
+
+const trendConfig = {
+  success: { bg: "#e8f5e9", color: "#2e7d32", border: "#a5d6a7" },
+  error: { bg: "#ffebee", color: "#c62828", border: "#ef9a9a" },
+  warning: { bg: "#fff8e1", color: "#e65100", border: "#ffe082" },
+  default: { bg: "#f5f5f5", color: "#616161", border: "#e0e0e0" },
+};
+
+const SummaryCard = ({ label, value, secondary, icon, trend, accent, highlight }) => {
+  const strip = accent || highlight || "#1976d2";
+  const tc = trend ? trendConfig[trend.color] || trendConfig.default : null;
+
+  return (
+    <Tile
+      style={{
+        position: "relative",
+        borderRadius: "8px",
+        border: "1px solid #e4e7ec",
+        backgroundColor: "#fff",
+        overflow: "hidden",
+        minHeight: 110,
+        display: "flex",
+        flexDirection: "column",
+        padding: 0,
+      }}
+    >
+      <div style={{ height: 3, background: strip, flexShrink: 0 }} />
+
+      <div style={{ padding: "14px 16px 12px", display: "flex", flexDirection: "column", flex: 1 }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
+          <p
+            style={{
+              textTransform: "uppercase",
+              letterSpacing: 0.8,
+              fontSize: "0.62rem",
+              fontWeight: 600,
+              color: "#667085",
+              margin: 0,
+            }}
+          >
+            {label}
+          </p>
+          {icon ? <span style={{ color: strip, opacity: 0.7, display: "inline-flex" }}>{icon}</span> : null}
+        </div>
+
+        <Heading
+          style={{
+            fontWeight: 700,
+            color: "#101828",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            lineHeight: 1.15,
+            fontSize: "1.1rem",
+          }}
+          title={typeof value === "string" ? value : String(value)}
+        >
+          {value}
+        </Heading>
+
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto", paddingTop: 6, gap: 8 }}>
+          {secondary ? (
+            <p style={{ color: "#667085", fontSize: "0.68rem", lineHeight: 1.3, minWidth: 0, margin: 0 }}>
+              {secondary}
+            </p>
+          ) : <span />}
+
+          {tc && trend && (
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                padding: "2px 6px",
+                borderRadius: 10,
+                backgroundColor: tc.bg,
+                border: `1px solid ${tc.border}`,
+                flexShrink: 0,
+              }}
+            >
+              <span style={{ fontSize: "0.58rem", fontWeight: 600, color: tc.color, whiteSpace: "nowrap" }}>
+                {trend.label}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default React.memo(SummaryCard);