feat: Implemented Assets Dashboard with Carbon Design & Actionable Insights

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -15,22 +15,28 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.28.6",
+    "@carbon/charts": "^1.27.2",
+    "@carbon/charts-react": "^1.27.2",
+    "@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",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.6",
     "@mui/x-date-pickers": "^8.25.0",
-    "axios": "^1.13.2",
+    "axios": "^1.13.3",
+    "d3": "^7.9.0",
     "date-fns": "^4.1.0",
     "html-to-react": "^1.7.0",
     "lodash": "^4.17.23",
     "material-design-icons-iconfont": "^6.7.0",
     "prop-types": "^15.8.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-router": "^7.12.0",
+    "react-router": "^6.30.3",
+    "react-router-dom": "^6.30.3",
     "recharts": "^3.6.0"
   },
   "devDependencies": {

src/components/Assets/AssetCharts.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { DonutChart, SimpleBarChart } from "@carbon/charts-react";
+import "@carbon/charts/styles.css";
+
+
+const getSafeCost = (item) => {
+  if (typeof item.totalCost === 'number') return item.totalCost;
+  if (typeof item.cost === 'number') return item.cost;
+  return (item.cpuCost || 0) + (item.ramCost || 0) + (item.gpuCost || 0) + (item.pvCost || 0);
+};
+
+
+const processTypeData = (items) => {
+  const groups = {};
+  items.forEach(item => {
+    const type = item.type || "Unknown";
+    const cost = getSafeCost(item);
+    groups[type] = (groups[type] || 0) + cost;
+  });
+
+
+  return Object.keys(groups).map(type => ({
+    group: type,
+    value: parseFloat(groups[type].toFixed(2))
+  })).sort((a, b) => b.value - a.value);
+};
+
+
+const processProviderData = (items) => {
+  const groups = {};
+  items.forEach(item => {
+
+    const provider = item.properties?.provider || item.provider || "Custom";
+    const cost = getSafeCost(item);
+    groups[provider] = (groups[provider] || 0) + cost;
+  });
+
+  return Object.keys(groups).map(prov => ({
+    group: prov,
+    value: parseFloat(groups[prov].toFixed(2))
+  })).sort((a, b) => b.value - a.value);
+};
+
+
+
+export const AssetTypeChart = ({ items, height = "300px" }) => {
+  const data = processTypeData(items);
+  const options = {
+    title: "Cost by Asset Type",
+    resizable: true,
+    height,
+    donut: {
+      center: { label: "Assets" },
+      alignment: "center"
+    },
+    legend: { position: 'right' }
+  };
+
+  return (
+    <div style={{ height: height }}>
+      <DonutChart data={data} options={options} />
+    </div>
+  );
+};
+
+export const AssetProviderChart = ({ items, height = "300px" }) => {
+  const data = processProviderData(items);
+  const options = {
+    title: "Cost by Provider",
+    resizable: true,
+    height,
+    axes: {
+      left: { mapsTo: "value", title: "Cost ($)" },
+      bottom: { mapsTo: "group", scaleType: "labels", title: "Provider" }
+    },
+    color: {
+      scale: { 
+        "Oracle": "#0f62fe", 
+        "AWS": "#ff9900",    
+        "GCP": "#34a853",    
+        "Azure": "#0078d4"   
+      } 
+    }
+  };
+
+  return (
+    <div style={{ height: height }}>
+      <SimpleBarChart data={data} options={options} />
+    </div>
+  );
+};
+
+export default AssetTypeChart;

src/components/Assets/AssetSummary.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Tile, Grid, Column } from '@carbon/react';
+import { 
+  Cube,             // For "Total Assets"
+  CurrencyDollar,   // For "Total Cost"
+  ChartClusterBar,  // For "Asset Types"
+  WarningFilled     // For "Insight"
+} from '@carbon/icons-react';
+
+const AssetSummary = ({ assets }) => {
+  // 1. Calculations
+  const totalAssets = assets.length;
+
+  // Find the single most expensive item
+  const topSpender = assets.reduce((prev, current) => {
+    const prevCost = prev.totalCost || prev.cost || 0;
+    const currCost = current.totalCost || current.cost || 0;
+    return (prevCost > currCost) ? prev : current;
+  }, { totalCost: 0, name: 'None' });
+
+  const totalCost = assets.reduce((sum, item) => {
+    const cost = item.totalCost || item.cost || (item.cpuCost + item.ramCost) || 0;
+    return sum + cost;
+  }, 0);
+
+  const uniqueTypes = new Set(assets.map(a => a.type)).size;
+
+
+  const fmtMoney = (val) => new Intl.NumberFormat('en-US', { 
+    style: 'currency', 
+    currency: 'USD',
+    minimumFractionDigits: 2 
+  }).format(val);
+
+
+  const SummaryCard = ({ title, value, Icon, subtext }) => (
+    <Tile style={{ 
+      height: '100%', 
+      minHeight: '160px', 
+      backgroundColor: '#ffffff',
+      borderTop: '4px solid #0f62fe', 
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between'
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <h6 style={{ color: '#525252', fontSize: '0.75rem', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          {title}
+        </h6>
+        <Icon size={24} style={{ fill: '#0f62fe', opacity: 0.8 }} />
+      </div>
+      <div>
+        <h2 style={{ fontSize: '2.5rem', fontWeight: '300', lineHeight: '1', marginBottom: '0.25rem' }}>
+          {value}
+        </h2>
+        {subtext && <p style={{ fontSize: '0.75rem', color: '#6f6f6f' }}>{subtext}</p>}
+      </div>
+    </Tile>
+  );
+
+  return (
+    <Grid narrow className="asset-summary-grid" style={{ padding: 0, marginBottom: '2rem' }}>
+
+
+      <Column lg={4} md={4} sm={4}>
+        <SummaryCard title="Total Assets" value={totalAssets} Icon={Cube} subtext="Active resources found" />
+      </Column>
+
+      <Column lg={4} md={4} sm={4}>
+        <SummaryCard title="Total Cost" value={fmtMoney(totalCost)} Icon={CurrencyDollar} subtext="Cumulative cost for window" />
+      </Column>
+
+      <Column lg={4} md={4} sm={4}>
+        <SummaryCard title="Asset Types" value={uniqueTypes} Icon={ChartClusterBar} subtext="Categories (Nodes, Disks, etc.)" />
+      </Column>
+
+
+      <Column lg={4} md={4} sm={4}>
+        <Tile style={{ 
+          height: '100%', 
+          minHeight: '160px', 
+          backgroundColor: '#fff0f0', 
+          borderTop: '4px solid #da1e28', 
+          display: 'flex', 
+          flexDirection: 'column', 
+          justifyContent: 'space-between'
+        }}>
+
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <h6 style={{ color: '#da1e28', fontSize: '0.75rem', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                 Top Spending Asset
+              </h6>
+
+              <span style={{ 
+                  fontSize: '0.625rem', 
+                  backgroundColor: '#da1e28', 
+                  color: 'white', 
+                  padding: '2px 6px', 
+                  borderRadius: '2px', 
+                  marginTop: '4px',
+                  alignSelf: 'flex-start',
+                  fontWeight: 'bold',
+                  letterSpacing: '0.5px'
+              }}>
+                REVIEW REQUIRED
+              </span>
+            </div>
+            <WarningFilled size={24} style={{ fill: '#da1e28' }} />
+          </div>
+
+          <div>
+            <h4 style={{ 
+               fontSize: '1.25rem', 
+               fontWeight: '600', 
+               marginBottom: '0.25rem', 
+               whiteSpace: 'nowrap', 
+               overflow: 'hidden', 
+               textOverflow: 'ellipsis' 
+            }} title={topSpender.name || topSpender.properties?.name}>
+              {topSpender.name || topSpender.properties?.name || "N/A"}
+            </h4>
+            <p style={{ fontSize: '1.5rem', fontWeight: '300', color: '#161616' }}>
+               {fmtMoney(topSpender.totalCost || topSpender.cost || 0)}
+            </p>
+          </div>
+        </Tile>
+      </Column>
+
+    </Grid>
+  );
+};
+
+export default AssetSummary;