diff --git a/src/components/assets/AssetsCostBreakdown.js b/src/components/assets/AssetsCostBreakdown.js
new file mode 100644
index 00000000..248f7bbe
--- /dev/null
+++ b/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 (
+
+
+ No cost breakdown data available.
+
+
+ );
+ }
+
+ 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 (
+
+
{data.name}
+
+ {toCurrency(data.value, currency)}
+
+
{data.percentage}%
+
+ );
+ }
+ return null;
+ };
+
+ return (
+
+
+ {chartData.map(({ name, value, percentage }) => {
+ const tagClass = `assets-type-tag assets-type-tag--${name.toLowerCase()}`;
+ return (
+
+ {name} — {toCurrency(value, currency)} ({percentage}%)
+
+ );
+ })}
+
+
+
+
+ Total Cost
+
+
+ {toCurrency(totalCost, currency)}
+
+
+
+
+
+ {chartData.map((entry) => (
+ |
+ ))}
+
+ } />
+
+
+
+
+ );
+};
+
+export default AssetsCostBreakdown;
diff --git a/src/components/assets/AssetsDataTable.js b/src/components/assets/AssetsDataTable.js
new file mode 100644
index 00000000..c0ea4313
--- /dev/null
+++ b/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 (
+
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getTableProps,
+ getTableContainerProps,
+ getToolbarProps,
+ }) => (
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+ {headers.map((header) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row) => (
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+ ))}
+
+
+
+ )}
+
+
+ );
+};
+
+export default AssetsDataTable;
diff --git a/src/components/assets/AssetsFilters.js b/src/components/assets/AssetsFilters.js
new file mode 100644
index 00000000..8d54a948
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default AssetsFilters;
diff --git a/src/components/assets/AssetsSelectType.js b/src/components/assets/AssetsSelectType.js
new file mode 100644
index 00000000..449c6570
--- /dev/null
+++ b/src/components/assets/AssetsSelectType.js
@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import TextField from "@mui/material/TextField";
+import Popover from "@mui/material/Popover";
+
+const AssetsSelectType = ({ assetType, setAssetType, assetTypeOptions }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const typeOptions = [
+ { id: "all", text: "All Types" },
+ ...assetTypeOptions.map((type) => ({ id: type, text: type })),
+ ];
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const handleSelect = (id) => {
+ setAssetType(id);
+ handleClose();
+ };
+
+ const open = Boolean(anchorEl);
+ const selectedText =
+ typeOptions.find((opt) => opt.id === assetType)?.text || "All Types";
+
+ return (
+ <>
+
+
+
+ {typeOptions.map((opt) => (
+ handleSelect(opt.id)}
+ style={{
+ color: assetType === opt.id ? "#0f62fe" : "#525252",
+ fontWeight: assetType === opt.id ? 600 : 400,
+ fontSize: 14,
+ cursor: "pointer",
+ transition: "color 0.15s ease",
+ }}
+ onMouseEnter={(e) => {
+ e.target.style.color = "#0f62fe";
+ e.target.style.textDecoration = "underline";
+ }}
+ onMouseLeave={(e) => {
+ e.target.style.color =
+ assetType === opt.id ? "#0f62fe" : "#525252";
+ e.target.style.textDecoration = "none";
+ }}
+ >
+ {opt.text}
+
+ ))}
+
+
+
+ );
+};
+
+export default AssetsSelectType;
diff --git a/src/components/assets/AssetsSelectWindow.js b/src/components/assets/AssetsSelectWindow.js
new file mode 100644
index 00000000..c3914db1
--- /dev/null
+++ b/src/components/assets/AssetsSelectWindow.js
@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from "react";
+import { endOfDay, startOfDay, isValid } from "date-fns";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import Button from "@mui/material/Button";
+import Popover from "@mui/material/Popover";
+import TextField from "@mui/material/TextField";
+import { find, get } from "lodash";
+
+const windowOptions = [
+ { name: "Today", value: "today" },
+ { name: "Yesterday", value: "yesterday" },
+ { name: "Last 24h", value: "24h" },
+ { name: "Last 48h", value: "48h" },
+ { name: "Week-to-date", value: "week" },
+ { name: "Last week", value: "lastweek" },
+ { name: "Last 7 days", value: "7d" },
+ { name: "Last 14 days", value: "14d" },
+];
+
+const AssetsSelectWindow = ({ window, setWindow }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [startDate, setStartDate] = useState(null);
+ const [endDate, setEndDate] = useState(null);
+ const [intervalString, setIntervalString] = useState(null);
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const handleStartDateChange = (date) => {
+ if (isValid(date)) {
+ setStartDate(startOfDay(date));
+ }
+ };
+
+ const handleEndDateChange = (date) => {
+ if (isValid(date)) {
+ setEndDate(endOfDay(date));
+ }
+ };
+
+ const handlePresetClick = (value) => {
+ setWindow(value);
+ setStartDate(null);
+ setEndDate(null);
+ handleClose();
+ };
+
+ const handleApplyCustom = () => {
+ if (intervalString !== null) {
+ setWindow(intervalString);
+ handleClose();
+ }
+ };
+
+ useEffect(() => {
+ if (startDate !== null && endDate !== null) {
+ let adjustedStartDate = new Date(
+ startDate - startDate.getTimezoneOffset() * 60000,
+ );
+ let adjustedEndDate = new Date(
+ endDate - endDate.getTimezoneOffset() * 60000,
+ );
+ setIntervalString(
+ adjustedStartDate.toISOString().split(".")[0] +
+ "Z" +
+ "," +
+ adjustedEndDate.toISOString().split(".")[0] +
+ "Z",
+ );
+ }
+ }, [startDate, endDate]);
+
+ const open = Boolean(anchorEl);
+ const selectedName = get(
+ find(windowOptions, { value: window }),
+ "name",
+ "Custom",
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {/* Presets Section */}
+
+ {windowOptions.map((opt) => (
+ handlePresetClick(opt.value)}
+ style={{
+ color: window === opt.value ? "#0f62fe" : "#525252",
+ fontWeight: window === opt.value ? 600 : 400,
+ fontSize: 14,
+ cursor: "pointer",
+ transition: "color 0.15s ease",
+ }}
+ onMouseEnter={(e) => {
+ e.target.style.color = "#0f62fe";
+ e.target.style.textDecoration = "underline";
+ }}
+ onMouseLeave={(e) => {
+ e.target.style.color =
+ window === opt.value ? "#0f62fe" : "#525252";
+ e.target.style.textDecoration = "none";
+ }}
+ >
+ {opt.name}
+
+ ))}
+
+
+
+ );
+};
+
+export default AssetsSelectWindow;
diff --git a/src/components/assets/AssetsSkeleton.js b/src/components/assets/AssetsSkeleton.js
new file mode 100644
index 00000000..1de50b20
--- /dev/null
+++ b/src/components/assets/AssetsSkeleton.js
@@ -0,0 +1,78 @@
+import React from "react";
+import { DataTableSkeleton } from "@carbon/react";
+
+const AssetsSkeleton = () => {
+ return (
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AssetsSkeleton;
diff --git a/src/components/assets/AssetsSummaryTiles.js b/src/components/assets/AssetsSummaryTiles.js
new file mode 100644
index 00000000..df874880
--- /dev/null
+++ b/src/components/assets/AssetsSummaryTiles.js
@@ -0,0 +1,55 @@
+import { Tile } from "@carbon/react";
+import { toCurrency } from "../../util";
+
+const AssetsSummaryTiles = ({
+ assets,
+ totalCost,
+ assetTypes,
+ avgCost,
+ currency,
+}) => {
+ return (
+
+
+
+ Total Assets
+ {assets}
+
+
+
+
+ Total Cost
+
+ {toCurrency(totalCost, currency)}
+
+
+
+
+
+ Asset Types
+ {assetTypes}
+
+
+
+
+
+ Average Cost Per Asset
+
+
+ {toCurrency(avgCost, currency)}
+
+
+
+
+ );
+};
+
+export default AssetsSummaryTiles;
diff --git a/src/components/assets/assets.css b/src/components/assets/assets.css
new file mode 100644
index 00000000..2768c377
--- /dev/null
+++ b/src/components/assets/assets.css
@@ -0,0 +1,289 @@
+/* Assets Page Styles */
+.assets-page-zoom {
+ zoom: 95%;
+}
+
+.assets-summary-grid {
+ margin-bottom: 32px;
+}
+
+.assets-summary-tile {
+ height: 100px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 16px 20px 16px 24px;
+ border-radius: 8px;
+ background: #ffffff !important;
+ border: 1px solid #e0e0e0;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+ position: relative;
+ overflow: hidden;
+ transition: all 0.2s ease;
+}
+
+.assets-summary-tile::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 6px;
+}
+
+.assets-summary-tile:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ transform: translateY(-1px);
+}
+
+.assets-summary-tile--primary::before {
+ background-color: #0043ce; /* Brighter Blue */
+}
+
+.assets-summary-tile--cost::before {
+ background-color: #24a148; /* Brighter Green */
+}
+
+.assets-summary-tile--types::before {
+ background-color: #a020f0; /* Brighter Purple */
+}
+
+.assets-summary-tile--avg::before {
+ background-color: #0072c3; /* Bright Blue */
+}
+
+.assets-summary-tile__label {
+ font-size: 11px;
+ font-weight: 500;
+ margin-bottom: 8px;
+ color: #525252;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.assets-summary-tile__value {
+ font-size: 2.5rem;
+ font-weight: 700;
+ line-height: 1;
+ color: #161616;
+}
+
+/* Cost Section - White Card Container */
+.assets-cost-section {
+ margin-top: 32px;
+ padding: 24px;
+ background: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+/* Cost Breakdown - Two Column Layout */
+.assets-cost-breakdown {
+ display: grid;
+ grid-template-columns: 30% 70%;
+ gap: 24px; /* Reduced gap slightly to fit better if needed, or keep standard */
+ align-items: center;
+}
+
+.assets-cost-breakdown__tags {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.assets-cost-breakdown__chart {
+ width: 100%;
+ height: 280px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.assets-type-tag {
+ display: inline-block;
+ padding: 6px 16px;
+ border-radius: 16px;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.assets-type-tag--node {
+ background: rgba(15, 98, 254, 0.1);
+ color: #0043ce;
+}
+
+.assets-type-tag--clustermanagement {
+ background: rgba(159, 24, 83, 0.1);
+ color: #da1e28;
+}
+.assets-type-tag--disk {
+ background: rgba(138, 63, 252, 0.1);
+ color: #8a3ffc;
+}
+
+.assets-type-tag--loadbalancer {
+ background: rgba(0, 93, 93, 0.1);
+ color: #009d9a;
+}
+.assets-type-tag--network {
+ background: rgba(0, 114, 195, 0.1);
+ color: #00539a;
+}
+
+.assets-type-tag--cluster {
+ background: rgba(250, 77, 86, 0.1);
+ color: #ff832b;
+}
+.assets-type-tag--cloud {
+ background: rgba(105, 41, 196, 0.1);
+ color: #be95ff;
+}
+
+.assets-type-tag--default {
+ background: rgba(107, 114, 128, 0.1);
+ color: #6b7280;
+}
+.assets-chart-tooltip {
+ background: #ffffff;
+ border: 1px solid #e5e7eb;
+ border-radius: 8px;
+ padding: 12px 16px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ color: #161616;
+}
+
+.assets-chart-tooltip__label {
+ font-weight: 600;
+ margin: 0 0 4px 0;
+ color: #374151;
+}
+
+.assets-chart-tooltip__value {
+ font-size: 1.125rem;
+ margin: 0 0 2px 0;
+ color: #059669;
+ font-weight: 600;
+}
+
+.assets-chart-tooltip__percent {
+ font-size: 0.8125rem;
+ color: #6b7280;
+ margin: 0;
+}
+
+.assets-filters {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ margin-bottom: 16px;
+}
+
+.assets-filters .cds--dropdown {
+ min-width: 180px;
+ background-color: #ffffff !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__label,
+.assets-filters .cds--list-box__label {
+ color: #161616 !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__field,
+.assets-filters .cds--list-box__field {
+ background-color: #ffffff !important;
+ border: 1px solid #8d8d8d !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__menu,
+.assets-filters .cds--list-box__menu {
+ background-color: #ffffff !important;
+ z-index: 9999 !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__menu-item,
+.assets-filters .cds--list-box__menu-item {
+ color: #161616 !important;
+ background-color: #ffffff !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__menu-item:hover,
+.assets-filters .cds--list-box__menu-item:hover {
+ background-color: #e8e8e8 !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__menu-item--active,
+.assets-filters .cds--list-box__menu-item--active {
+ background-color: #e0e0e0 !important;
+}
+
+.assets-filters .cds--dropdown .cds--list-box__menu-item__option,
+.assets-filters .cds--list-box__menu-item__option {
+ color: #161616 !important;
+}
+
+.assets-filters .cds--form__label,
+.assets-filters .cds--label {
+ color: #161616 !important;
+}
+
+.assets-data-table {
+ margin-top: 32px;
+}
+
+.assets-data-table .cds--data-table-container {
+ padding-top: 0;
+}
+
+.assets-data-table .cds--data-table thead th {
+ background-color: #393939;
+ color: #ffffff;
+}
+
+.assets-data-table .cds--data-table tbody tr:hover {
+ background-color: #e8e8e8;
+}
+
+.assets-data-table .cds--table-toolbar {
+ background: #f4f4f4;
+}
+
+@media (max-width: 768px) {
+ .assets-cost-breakdown {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+
+ .assets-cost-breakdown__chart {
+ max-width: 100%;
+ }
+}
+
+/* Custom minimal tooltip for refresh button */
+.assets-refresh-btn {
+ position: relative !important;
+}
+
+.assets-refresh-btn::after {
+ content: "Refresh";
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background-color: transparent;
+ color: #161616;
+ font-weight: 600;
+ font-size: 12px;
+ padding: 4px 6px 0 0;
+ white-space: nowrap;
+ pointer-events: none;
+ transition: opacity 0.2s;
+}
+
+.assets-refresh-btn:hover::after {
+ visibility: visible;
+ opacity: 1;
+}
diff --git a/src/components/assets/index.js b/src/components/assets/index.js
new file mode 100644
index 00000000..4271815b
--- /dev/null
+++ b/src/components/assets/index.js
@@ -0,0 +1,5 @@
+export { default as AssetsSummaryTiles } from "./AssetsSummaryTiles";
+export { default as AssetsCostBreakdown } from "./AssetsCostBreakdown";
+export { default as AssetsFilters } from "./AssetsFilters";
+export { default as AssetsDataTable } from "./AssetsDataTable";
+export { default as AssetsSkeleton } from "./AssetsSkeleton";
diff --git a/src/css/index.css b/src/css/index.css
index 8ace1e31..bb85ece1 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,10 +1,25 @@
@import "../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
+@import "../../node_modules/@carbon/styles/css/styles.css";
+
+*,
+*::before,
+*::after {
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ sans-serif !important;
+}
body {
background-color: #f3f3f3;
display: flex;
flex-flow: column;
- font-family: "Roboto", sans-serif;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ sans-serif;
margin: 0px;
overflow-y: scroll;
}
diff --git a/src/index.html b/src/index.html
index 43e4459b..0e949b56 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,12 @@
+
+
+
diff --git a/src/pages/Assets.js b/src/pages/Assets.js
new file mode 100644
index 00000000..26338cef
--- /dev/null
+++ b/src/pages/Assets.js
@@ -0,0 +1,236 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router";
+import IconButton from "@mui/material/IconButton";
+import { Renew } from "@carbon/icons-react";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+import Page from "../components/Page";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import Warnings from "../components/Warnings";
+import AssetsService from "../services/assets";
+
+import {
+ AssetsSummaryTiles,
+ AssetsCostBreakdown,
+ AssetsFilters,
+ AssetsDataTable,
+ AssetsSkeleton,
+} from "../components/assets";
+
+import "../components/assets/assets.css";
+
+const Assets = () => {
+ const [loading, setLoading] = useState(true);
+ const [errors, setErrors] = useState([]);
+ const [rawAssets, setRawAssets] = useState({});
+ const [assetTypeOptions, setAssetTypeOptions] = useState([]);
+
+ const routerLocation = useLocation();
+ const searchParams = new URLSearchParams(routerLocation.search);
+ const navigate = useNavigate();
+
+ const window = searchParams.get("window") || "7d";
+ const assetType = searchParams.get("type") || "all";
+ const currency = searchParams.get("currency") || "USD";
+
+ const setWindow = (win) => {
+ searchParams.set("window", win);
+ navigate({ search: `?${searchParams.toString()}` });
+ };
+
+ const setAssetType = (type) => {
+ searchParams.set("type", type);
+ navigate({ search: `?${searchParams.toString()}` });
+ };
+
+ async function fetchData() {
+ setLoading(true);
+ setErrors([]);
+
+ try {
+ const resp = await AssetsService.fetchAssets(window);
+
+ if (resp && resp.data) {
+ const assetsData = resp.data;
+ setRawAssets(assetsData);
+
+ const types = new Set();
+ Object.values(assetsData).forEach((asset) => {
+ if (asset.type) {
+ types.add(asset.type);
+ }
+ });
+ setAssetTypeOptions(Array.from(types).sort());
+ } else {
+ setRawAssets({});
+ setAssetTypeOptions([]);
+ }
+ } catch (err) {
+ if (err.message && err.message.indexOf("404") === 0) {
+ setErrors([
+ {
+ primary: "Assets API not available",
+ secondary:
+ "Please ensure your OpenCost instance supports the Assets API.",
+ },
+ ]);
+ } else {
+ setErrors([
+ {
+ primary: "Failed to load assets data",
+ secondary: err.message || "Please try again later.",
+ },
+ ]);
+ }
+ setRawAssets({});
+ }
+
+ setLoading(false);
+ }
+
+ useEffect(() => {
+ fetchData();
+ }, [window]);
+
+ const processedAssets = useMemo(() => {
+ const assets = [];
+
+ Object.entries(rawAssets).forEach(([key, asset]) => {
+ if (!asset || !asset.properties) return;
+
+ const props = asset.properties;
+ assets.push({
+ key,
+ name: props.name || key,
+ type: asset.type || "Unknown",
+ provider: props.provider || "-",
+ cluster: props.cluster || "-",
+ category: props.category || "-",
+ cpuCores: asset.cpuCores || null,
+ ramBytes: asset.ramBytes || null,
+ totalCost: asset.totalCost || 0,
+ });
+ });
+
+ if (assetType !== "all") {
+ return assets.filter((a) => a.type === assetType);
+ }
+ return assets;
+ }, [rawAssets, assetType]);
+
+ const summaryMetrics = useMemo(() => {
+ const totalAssets = processedAssets.length;
+ const totalCost = processedAssets.reduce((sum, a) => sum + a.totalCost, 0);
+ const types = new Set(processedAssets.map((a) => a.type));
+ const assetTypesCount = types.size;
+ const avgCost = totalAssets > 0 ? totalCost / totalAssets : 0;
+
+ return { totalAssets, totalCost, assetTypesCount, avgCost };
+ }, [processedAssets]);
+
+ const costByType = useMemo(() => {
+ const costs = {};
+ processedAssets.forEach((asset) => {
+ costs[asset.type] = (costs[asset.type] || 0) + asset.totalCost;
+ });
+ return costs;
+ }, [processedAssets]);
+
+ return (
+
+
+ fetchData()}
+ style={{ padding: 12 }}
+ >
+
+
+
+
+ {!loading && errors.length > 0 && (
+
+
+
+ )}
+
+
+
+
+ Infrastructure Assets
+
+ {window === "7d"
+ ? "Last 7 days"
+ : window === "14d"
+ ? "Last 14 days"
+ : window === "30d"
+ ? "Last 30 days"
+ : window}
+
+
+
+
+
+ No assets found
+
+
+ No infrastructure assets were found for the selected time window.
+
+
+ )}
+
+ {!loading && processedAssets.length > 0 && (
+ <>
+
+
+
+
+ Cost by asset type
+
+
+
+ );
+};
+
+export default React.memo(Assets);
diff --git a/src/route.js b/src/route.js
index 919717b2..fedff43a 100644
--- a/src/route.js
+++ b/src/route.js
@@ -6,6 +6,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import Allocations from "./pages/Allocations.js";
import CloudCosts from "./pages/CloudCosts.js";
import ExternalCosts from "./pages/ExternalCosts.js";
+import Assets from "./pages/Assets.js";
const basename = (process.env.UI_PATH || "").replace(/\/+$/, "");
@@ -18,6 +19,7 @@ const RouteSet = () => {
} />
} />
} />
+
} />
diff --git a/src/services/assets.js b/src/services/assets.js
new file mode 100644
index 00000000..c0e1dd0c
--- /dev/null
+++ b/src/services/assets.js
@@ -0,0 +1,20 @@
+import client from "./api_client";
+
+class AssetsService {
+ async fetchAssets(window = "7d") {
+ const params = {
+ window: window,
+ };
+
+ try {
+ const result = await client.get("/assets", {
+ params,
+ });
+ return result.data;
+ } catch (error) {
+ throw error;
+ }
+ }
+}
+
+export default new AssetsService();