- {title && {title} }
+ {
@@ -24,8 +51,15 @@ const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
@@ -34,7 +68,16 @@ const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
{
- const [init, setInit] = React.useState(false);
+ const [isExpanded, setIsExpanded] = React.useState(true);
+ const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 900);
+ const navigate = useNavigate();
React.useEffect(() => {
- if (!init) {
- setInit(true);
- }
- }, [init]);
-
- const top = [
- {
- name: "Cost Allocation",
- href: "/allocation",
- icon:
- 
-
+ <>
+ {isMobile && (
+
+ )}
+
+ isMobile && setIsExpanded(false)}
+ style={{
+ position: "fixed",
+ height: "100vh",
+ zIndex: 8000,
+ }}
+ >
+
+ {navLinks.map((link) => {
+ const IconComponent = link.icon;
+ return (
+ {
+ e.preventDefault();
+ navigate(link.href);
+ if (isMobile) setIsExpanded(false);
+ }}
+ >
+ {link.name}
+
+ );
+ })}
+
+
+
);
};
-export { SidebarNav };
+export { SidebarNav, DRAWER_WIDTH };
diff --git a/src/components/Nav/SidebarNav.js.bak b/src/components/Nav/SidebarNav.js.bak
new file mode 100644
index 00000000..4d560a63
--- /dev/null
+++ b/src/components/Nav/SidebarNav.js.bak
@@ -0,0 +1,177 @@
+import * as React from "react";
+import {
+ SideNav,
+ SideNavItems,
+ SideNavLink,
+ SideNavMenu,
+ SideNavMenuItem,
+ Header,
+ HeaderMenuButton,
+ HeaderName,
+ SkipToContent,
+} from "@carbon/react";
+import {
+ ChartBar,
+ CloudApp,
+ VirtualMachine,
+ Menu as MenuIcon,
+ Close as CloseIcon,
+} from "@carbon/icons-react";
+
+import { NavItem } from "./NavItem";
+
+const logo = new URL("../../images/logo.png", import.meta.url).href;
+
+const DRAWER_WIDTH = 200;
+
+const SidebarNav = ({ active }) => {
+ const [mobileOpen, setMobileOpen] = React.useState(false);
+ const isMobile = useMediaQuery("(max-width: 900px)");
+
+ // Close mobile drawer if screen is resized to desktop width
+ React.useEffect(() => {
+ if (!isMobile) setMobileOpen(false);
+ }, [isMobile]);
+
+ // Prevent accidental submits / rapid toggles causing page refreshes
+ const lastToggleRef = React.useRef(0);
+ const handleDrawerToggle = (e) => {
+ if (e && typeof e.preventDefault === "function") {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ const now = Date.now();
+ if (now - lastToggleRef.current < 200) return; // ignore rapid toggles
+ lastToggleRef.current = now;
+ setMobileOpen((prev) => !prev);
+ };
+
+ const navLinks = [
+ { name: "Cost Allocation", href: "/allocation", icon:
+ {drawerContent(false)}
+
+ )}
+
+ {/* Mobile: temporary overlay drawer */}
+ {isMobile && (
+ setMobileOpen(false)}
+ ModalProps={{ keepMounted: true }}
+ className="sidebar-mobile"
+ sx={{
+ "& .MuiDrawer-paper": paperSx,
+ }}
+ >
+ {drawerContent(true)}
+
+ )}
+
+ );
+};
+
+export { SidebarNav, DRAWER_WIDTH };
diff --git a/src/components/Page.js b/src/components/Page.js
index 769dcc67..a0904084 100644
--- a/src/components/Page.js
+++ b/src/components/Page.js
@@ -1,35 +1,43 @@
import { useLocation } from "react-router";
-import { SidebarNav } from "./Nav/SidebarNav";
+import { useState, useEffect } from "react";
+import { SidebarNav, DRAWER_WIDTH } from "./Nav/SidebarNav";
const Page = (props) => {
const { pathname } = useLocation();
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 900);
+
+ useEffect(() => {
+ const handleResize = () => setIsMobile(window.innerWidth <= 900);
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
return (
+
);
};
diff --git a/src/components/Nav/NavItem.js b/src/components/Nav/NavItem.js
index da24e71c..ddca99cb 100644
--- a/src/components/Nav/NavItem.js
+++ b/src/components/Nav/NavItem.js
@@ -1,16 +1,43 @@
import { ListItem, ListItemIcon, ListItemText } from "@mui/material";
import { Link } from "react-router";
+import * as React from "react";
const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
+ const [theme, setTheme] = React.useState(
+ document.documentElement.getAttribute("data-theme") || "light",
+ );
+
+ React.useEffect(() => {
+ const observer = new MutationObserver(() => {
+ const newTheme =
+ document.documentElement.getAttribute("data-theme") || "light";
+ setTheme(newTheme);
+ });
+
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
+ });
+
+ return () => observer.disconnect();
+ }, []);
+
+ const isDark = theme === "dark";
+
const renderListItemCore = () => (
+
+
{breadcrumbs.slice(0, breadcrumbs.length - 1).map((b) => (
{b.name}
@@ -33,7 +27,10 @@ const Header = (props) => {
)}
- {headerTitle}
+ {title && {title}} {breadcrumbs && breadcrumbs.length > 0 && ( -{props.children}
+
+
-
- {top.map((l) => (
-
+
+
+
+
+ );
+
+ const paperSx = {
+ backgroundColor: "var(--sidebar-bg)",
+ borderRight: "1px solid var(--sidebar-border)",
+ width: DRAWER_WIDTH,
+ boxSizing: "border-box",
+ overflowX: "hidden",
+ };
+
+ return (
+ <>
+ {/* Hamburger — only render on mobile */}
+ {isMobile && (
+
+ )}
+
+ {/* Desktop: permanent drawer — only when not mobile */}
+ {!isMobile && (
+
+
+ {showClose && (
+
+ )}
+
+ -
+ {navLinks.map((l) => (
+
+ {/* Sidebar nav — renders its own drawer(s) */}
{
+ const [theme, setTheme] = React.useState(() => {
+ return localStorage.getItem("theme") || "light";
+ });
+
+ React.useEffect(() => {
+ document.documentElement.setAttribute("data-theme", theme);
+ localStorage.setItem("theme", theme);
+ }, [theme]);
+
+ const toggleTheme = () => {
+ setTheme((prev) => (prev === "light" ? "dark" : "light"));
+ };
+
+ return (
+
+ );
+};
+
+export default ThemeToggle;
diff --git a/src/components/allocations/AllocationCostChart.js b/src/components/allocations/AllocationCostChart.js
new file mode 100644
index 00000000..b14b801e
--- /dev/null
+++ b/src/components/allocations/AllocationCostChart.js
@@ -0,0 +1,255 @@
+import React, { useMemo, useState } from "react";
+import {
+ ResponsiveContainer,
+ BarChart,
+ Bar,
+ CartesianGrid,
+ XAxis,
+ YAxis,
+ Tooltip,
+ Legend,
+ PieChart,
+ Pie,
+ Cell,
+} from "recharts";
+import { toCurrency } from "../../util";
+import { ALLOC_COLORS } from "./constants";
+import ChartTooltip from "./ChartTooltip";
+
+const AllocationCostChart = ({
+ allocationData,
+ cumData,
+ currency,
+ aggregateBy,
+ accumulate,
+ onAccumulateChange,
+}) => {
+ const [showCumulative, setShowCumulative] = useState(false);
+
+ const { chartData, names } = useMemo(() => {
+ if (!allocationData || allocationData.length <= 1) {
+ return { chartData: null, names: [] };
+ }
+ const nameSet = new Set();
+ allocationData.forEach((set) => {
+ const items = Array.isArray(set) ? set : Object.values(set);
+ items.forEach((a) => nameSet.add(a.name));
+ });
+ const sortedNames = [...nameSet].sort((a, b) => {
+ const tA = cumData.find((c) => c.name === a)?.totalCost || 0;
+ const tB = cumData.find((c) => c.name === b)?.totalCost || 0;
+ return tB - tA;
+ });
+ const topNames = sortedNames.slice(0, 8);
+ const hasOther = sortedNames.length > 8;
+
+ const data = allocationData.map((set, i) => {
+ const items = Array.isArray(set) ? set : Object.values(set);
+ const startStr = items[0]?.start || items[0]?.window?.start || "";
+ const dateLabel = startStr
+ ? new Date(startStr).toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ })
+ : `Day ${i + 1}`;
+ const point = { dateLabel };
+ let otherCost = 0;
+ items.forEach((a) => {
+ if (topNames.includes(a.name)) {
+ point[a.name] = Number((a.totalCost || 0).toFixed(4));
+ } else {
+ otherCost += a.totalCost || 0;
+ }
+ });
+ if (hasOther && otherCost > 0)
+ point["Other"] = Number(otherCost.toFixed(4));
+ return point;
+ });
+
+ const finalNames = hasOther ? [...topNames, "Other"] : topNames;
+ return { chartData: data, names: finalNames };
+ }, [allocationData, cumData]);
+
+ const donutData = useMemo(() => {
+ if (chartData) return null;
+ return cumData
+ .filter((a) => a.name !== "__idle__" && a.totalCost > 0)
+ .sort((a, b) => b.totalCost - a.totalCost)
+ .slice(0, 10)
+ .map((a, i) => ({
+ name: a.name,
+ value: Number(a.totalCost.toFixed(2)),
+ fill: ALLOC_COLORS[i % ALLOC_COLORS.length],
+ }));
+ }, [cumData, chartData]);
+
+ const cumulativeData = useMemo(() => {
+ if (!chartData) return null;
+ let running = 0;
+ return chartData.map((d) => {
+ const dayTotal = Object.entries(d)
+ .filter(([k]) => k !== "dateLabel")
+ .reduce((s, [, v]) => s + (typeof v === "number" ? v : 0), 0);
+ running += dayTotal;
+ return {
+ dateLabel: d.dateLabel,
+ total: Number(dayTotal.toFixed(4)),
+ cumulative: Number(running.toFixed(4)),
+ };
+ });
+ }, [chartData]);
+
+ if (!chartData && !donutData) return null;
+
+ return (
+
+
+ );
+};
+
+export default AllocationCostChart;
diff --git a/src/components/allocations/AllocationDetail.js b/src/components/allocations/AllocationDetail.js
new file mode 100644
index 00000000..382b3549
--- /dev/null
+++ b/src/components/allocations/AllocationDetail.js
@@ -0,0 +1,569 @@
+import React, { useMemo } from "react";
+import { Button } from "@carbon/react";
+import { ArrowLeft } from "@carbon/icons-react";
+import {
+ ResponsiveContainer,
+ AreaChart,
+ Area,
+ CartesianGrid,
+ XAxis,
+ YAxis,
+ Tooltip,
+ Legend,
+ BarChart,
+ Bar,
+ Cell,
+ PieChart,
+ Pie,
+} from "recharts";
+import { toCurrency } from "../../util";
+import { COST_COLORS } from "./constants";
+import ChartTooltip from "./ChartTooltip";
+
+const AllocationDetail = ({
+ alloc,
+ allocationData,
+ currency,
+ aggregateBy,
+ onBack,
+}) => {
+ const dailyCosts = useMemo(() => {
+ if (!allocationData || allocationData.length <= 1) return [];
+ return allocationData.map((set, i) => {
+ const items = Array.isArray(set) ? set : Object.values(set);
+ const match = items.find((a) => a.name === alloc.name);
+ const startStr = items[0]?.start || items[0]?.window?.start || "";
+ const label = startStr
+ ? new Date(startStr).toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ })
+ : `Day ${i + 1}`;
+ return {
+ label,
+ cpu: match?.cpuCost || 0,
+ gpu: match?.gpuCost || 0,
+ ram: match?.ramCost || 0,
+ pv: match?.pvCost || 0,
+ network: match?.networkCost || 0,
+ };
+ });
+ }, [allocationData, alloc.name]);
+
+ const costBreakdown = useMemo(() => {
+ const data = [];
+ if (alloc.cpuCost > 0)
+ data.push({
+ name: "CPU",
+ value: +alloc.cpuCost.toFixed(2),
+ fill: COST_COLORS.cpuCost,
+ });
+ if (alloc.gpuCost > 0)
+ data.push({
+ name: "GPU",
+ value: +alloc.gpuCost.toFixed(2),
+ fill: COST_COLORS.gpuCost,
+ });
+ if (alloc.ramCost > 0)
+ data.push({
+ name: "RAM",
+ value: +alloc.ramCost.toFixed(2),
+ fill: COST_COLORS.ramCost,
+ });
+ if (alloc.pvCost > 0)
+ data.push({
+ name: "PV",
+ value: +alloc.pvCost.toFixed(2),
+ fill: COST_COLORS.pvCost,
+ });
+ if (alloc.networkCost > 0)
+ data.push({
+ name: "Network",
+ value: +alloc.networkCost.toFixed(2),
+ fill: COST_COLORS.networkCost,
+ });
+ return data;
+ }, [alloc]);
+
+ const cpuEff =
+ alloc.cpuEfficiency > 0 ? (alloc.cpuEfficiency * 100).toFixed(1) : null;
+ const ramEff =
+ alloc.ramEfficiency > 0 ? (alloc.ramEfficiency * 100).toFixed(1) : null;
+ const totalEff =
+ alloc.totalEfficiency > 0 ? (alloc.totalEfficiency * 100).toFixed(1) : null;
+
+ return (
+
+
+ Cost by {aggregateBy}
+
+ {chartData && (
+
+ )}
+
+
+
+
+
+
+ {chartData && !showCumulative && (
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+ )}
+ {chartData && showCumulative && cumulativeData && (
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+ )}
+ {donutData && (
+
+
+
+ {donutData.map((s, i) => (
+ |
+ ))}
+
+
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "var(--card-bg)",
+ border: "1px solid var(--border-color)",
+ borderRadius: 4,
+ fontSize: 12,
+ }}
+ />
+
+
+ )}
+
+
+
+
+ );
+ }
+
+ if (!asset || fetchError) {
+ return (
+
+
+ );
+ }
+
+ const name = asset.properties?.name || "Unknown";
+ const assetType = asset.type || "Unknown";
+
+ // Gather all info sections
+ const infoSections = [];
+
+ // Properties section
+ const propsRows = [
+ { label: "Type", value: assetType },
+ { label: "Category", value: asset.properties?.category },
+ { label: "Provider", value: asset.properties?.provider },
+ { label: "Cluster", value: asset.properties?.cluster },
+ { label: "Project", value: asset.properties?.project },
+ { label: "Account", value: asset.properties?.account },
+ { label: "Service", value: asset.properties?.service },
+ { label: "Provider ID", value: asset.properties?.providerID },
+ ].filter((r) => r.value);
+
+ // Type-specific info
+ const specRows = [];
+ if (assetType === "Node") {
+ if (asset.nodeType)
+ specRows.push({ label: "Instance Type", value: asset.nodeType });
+ if (asset.pool) specRows.push({ label: "Node Pool", value: asset.pool });
+ specRows.push({ label: "CPU Cores", value: asset.cpuCores || 0 });
+ specRows.push({ label: "RAM", value: formatBytes(asset.ramBytes) });
+ if (asset.gpuCount > 0)
+ specRows.push({ label: "GPUs", value: asset.gpuCount });
+ if (asset.preemptible > 0)
+ specRows.push({ label: "Preemptible", value: "Yes" });
+ if (asset.discount > 0)
+ specRows.push({
+ label: "Discount",
+ value: `${Math.round(asset.discount * 100)}%`,
+ });
+ } else if (assetType === "Disk") {
+ if (asset.storageClass)
+ specRows.push({ label: "Storage Class", value: asset.storageClass });
+ specRows.push({ label: "Capacity", value: formatBytes(asset.bytes) });
+ specRows.push({
+ label: "Peak Usage",
+ value: formatBytes(asset.byteUsageMax),
+ });
+ if (asset.volumeName)
+ specRows.push({ label: "Volume Name", value: asset.volumeName });
+ if (asset.claimName)
+ specRows.push({
+ label: "PVC",
+ value: `${asset.claimNamespace}/${asset.claimName}`,
+ });
+ if (asset.local > 0) specRows.push({ label: "Local Disk", value: "Yes" });
+ } else if (assetType === "LoadBalancer") {
+ if (asset.ip) specRows.push({ label: "IP Address", value: asset.ip });
+ specRows.push({
+ label: "Scope",
+ value: asset.private ? "Private" : "Public",
+ });
+ }
+
+ // Cost section
+ const costRows = [];
+ if (asset.cpuCost > 0)
+ costRows.push({
+ label: "CPU Cost",
+ value: toCurrency(asset.cpuCost, currency),
+ });
+ if (asset.ramCost > 0)
+ costRows.push({
+ label: "RAM Cost",
+ value: toCurrency(asset.ramCost, currency),
+ });
+ if (asset.gpuCost > 0)
+ costRows.push({
+ label: "GPU Cost",
+ value: toCurrency(asset.gpuCost, currency),
+ });
+ if (asset.credit)
+ costRows.push({
+ label: "Credit",
+ value: toCurrency(asset.credit, currency),
+ className: "val-credit",
+ });
+ if (asset.adjustment)
+ costRows.push({
+ label: "Adjustment",
+ value: toCurrency(asset.adjustment, currency),
+ className: asset.adjustment < 0 ? "val-credit" : "val-adj",
+ });
+ costRows.push({
+ label: "Total Cost",
+ value: toCurrency(asset.totalCost || 0, currency),
+ className: "val-total",
+ });
+
+ return (
+
+
+ );
+};
+
+export default AssetDetail;
diff --git a/src/components/assets/AssetsDashboard.js b/src/components/assets/AssetsDashboard.js
new file mode 100644
index 00000000..85a8bdea
--- /dev/null
+++ b/src/components/assets/AssetsDashboard.js
@@ -0,0 +1,743 @@
+import React, { useMemo } from "react";
+import {
+ AreaChart,
+ Area,
+ BarChart,
+ Bar,
+ PieChart,
+ Pie,
+ Cell,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+} from "recharts";
+import { toCurrency } from "../../util";
+
+/* ── Palette ─────────────────────────────────────── */
+const TYPE_COLORS = {
+ Node: "#0f62fe",
+ Disk: "#009d9a",
+ LoadBalancer: "#8a3ffc",
+ Network: "#1192e8",
+ ClusterManagement: "#8d8d8d",
+ Cloud: "#d12771",
+};
+
+const PROVIDER_COLORS = {
+ GCP: "#4285f4",
+ AWS: "#ff9900",
+ Azure: "#0089d6",
+};
+
+const CLUSTER_COLORS = [
+ "#0f62fe",
+ "#8a3ffc",
+ "#009d9a",
+ "#d12771",
+ "#ee5396",
+ "#1192e8",
+];
+
+const COST_PART_COLORS = [
+ "#0f62fe",
+ "#009d9a",
+ "#8a3ffc",
+ "#1192e8",
+ "#ee5396",
+];
+
+/* ── Shared tooltip ──────────────────────────────── */
+const PanelTooltip = ({ active, payload, label, currency, prefix }) => {
+ if (!active || !payload?.length) return null;
+ const total = payload.reduce((s, p) => s + (p.value || 0), 0);
+ return (
+
+
+
+
+
+
+ {aggregateBy}
+
+ {alloc.name}
+
+
+
+
+ Total Cost
+
+ {toCurrency(alloc.totalCost, currency)}
+
+
+
+
+ CPU
+
+
+ {toCurrency(alloc.cpuCost || 0, currency)}
+
+
+
+
+ GPU
+
+
+ {toCurrency(alloc.gpuCost || 0, currency)}
+
+
+
+
+ RAM
+
+
+ {toCurrency(alloc.ramCost || 0, currency)}
+
+
+
+
+ PV
+
+
+ {toCurrency(alloc.pvCost || 0, currency)}
+
+
+
+ {dailyCosts.length > 0 ? (
+
+
+ {(cpuEff || ramEff || totalEff) && (
+
+
+
+
+
+
+
+
+
+ `$${v.toFixed(0)}`}
+ width={50}
+ />
+
+
+
+ ) : (
+ Daily Cost Trend
+
+
+
+ `$${v.toFixed(0)}`}
+ />
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "var(--card-bg)",
+ border: "1px solid var(--border-color)",
+ borderRadius: 6,
+ fontSize: 12,
+ }}
+ />
+
+ {costBreakdown.map((entry, idx) => (
+ |
+ ))}
+
+
+
+
+ )}
+
+ {costBreakdown.length > 0 && (
+ Cost Distribution
+
+
+
+
+ {costBreakdown.map((s, i) => (
+ |
+ ))}
+
+
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "var(--card-bg)",
+ border: "1px solid var(--border-color)",
+ borderRadius: 4,
+ fontSize: 12,
+ }}
+ />
+
+
+
+ )}
+ Cost Breakdown
+
+
+ );
+};
+
+export default AllocationDetail;
diff --git a/src/components/allocations/AllocationTable.js b/src/components/allocations/AllocationTable.js
new file mode 100644
index 00000000..2eed79a3
--- /dev/null
+++ b/src/components/allocations/AllocationTable.js
@@ -0,0 +1,283 @@
+import React, { useMemo, useState } from "react";
+import { toCurrency } from "../../util";
+import { drilldownHierarchy } from "./constants";
+
+const AllocationTable = ({
+ cumData,
+ currency,
+ aggregateBy,
+ onDrilldown,
+ onRowClick,
+}) => {
+ const [sortBy, setSortBy] = useState("totalCost");
+ const [sortDir, setSortDir] = useState("desc");
+ const [search, setSearch] = useState("");
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(25);
+ const canDrill = !!drilldownHierarchy[aggregateBy];
+
+ const sorted = useMemo(() => {
+ let items = [...cumData];
+ if (search) {
+ const q = search.toLowerCase();
+ items = items.filter((a) => (a.name || "").toLowerCase().includes(q));
+ }
+ items.sort((a, b) => {
+ const va = a[sortBy] ?? 0;
+ const vb = b[sortBy] ?? 0;
+ return sortDir === "desc" ? (vb > va ? 1 : -1) : va > vb ? 1 : -1;
+ });
+ return items;
+ }, [cumData, sortBy, sortDir, search]);
+
+ const totalRow = useMemo(
+ () => ({
+ name: "Totals",
+ cpuCost: cumData.reduce((s, a) => s + (a.cpuCost || 0), 0),
+ gpuCost: cumData.reduce((s, a) => s + (a.gpuCost || 0), 0),
+ ramCost: cumData.reduce((s, a) => s + (a.ramCost || 0), 0),
+ pvCost: cumData.reduce((s, a) => s + (a.pvCost || 0), 0),
+ totalEfficiency: (() => {
+ const eff = cumData.filter(
+ (a) => a.name !== "__idle__" && a.totalEfficiency > 0,
+ );
+ return eff.length
+ ? eff.reduce((s, a) => s + a.totalEfficiency, 0) / eff.length
+ : 0;
+ })(),
+ totalCost: cumData.reduce((s, a) => s + (a.totalCost || 0), 0),
+ }),
+ [cumData],
+ );
+
+ const paged = sorted.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+ const totalPages = Math.ceil(sorted.length / rowsPerPage);
+
+ const cols = [
+ { key: "name", label: "Name", align: "left" },
+ { key: "cpuCost", label: "CPU", align: "right" },
+ { key: "gpuCost", label: "GPU", align: "right" },
+ { key: "ramCost", label: "RAM", align: "right" },
+ { key: "pvCost", label: "PV", align: "right" },
+ { key: "totalEfficiency", label: "Efficiency", align: "right" },
+ { key: "totalCost", label: "Total Cost", align: "right" },
+ ];
+
+ const handleSort = (key) => {
+ if (sortBy === key) setSortDir((d) => (d === "desc" ? "asc" : "desc"));
+ else {
+ setSortBy(key);
+ setSortDir("desc");
+ }
+ };
+
+ const isSpecial = (name) =>
+ ["__idle__", "__unallocated__", "__unmounted__"].includes(name);
+
+ const handleRowClick = (a) => {
+ const special = isSpecial(a.name);
+ if (special) return;
+ onRowClick(a);
+ };
+
+ const handleDrillClick = (e, a) => {
+ e.stopPropagation();
+ onDrilldown(a);
+ };
+
+ return (
+ Resource Efficiency
+
+ {totalEff && (
+
+ )}
+
+ {dailyCosts.length > 1 && (
+
+ Total
+
+
+
+ )}
+ {cpuEff && (
+ 80
+ ? "#42be65"
+ : parseFloat(totalEff) > 50
+ ? "#f1c21b"
+ : "#fa4d56",
+ }}
+ />
+
+ {totalEff}%
+
+ CPU
+
+ )}
+ {ramEff && (
+
+
+
+ {cpuEff}%
+
+ RAM
+
+ )}
+
+
+
+ {ramEff}%
+
+
+
+ `$${v.toFixed(0)}`}
+ width={50}
+ />
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "var(--card-bg)",
+ border: "1px solid var(--border-color)",
+ borderRadius: 4,
+ fontSize: 12,
+ }}
+ />
+ d.cpu + d.gpu + d.ram + d.pv + d.network}
+ fill="#0f62fe"
+ radius={[3, 3, 0, 0]}
+ name="Total Daily Cost"
+ maxBarSize={40}
+ />
+
+
+
+ )}
+
+ Cost Trend Analysis
+
+
+
+ Cost Details
+
+
+
+ CPU Cost
+
+ {toCurrency(alloc.cpuCost || 0, currency)}
+
+
+
+ GPU Cost
+
+ {toCurrency(alloc.gpuCost || 0, currency)}
+
+
+
+ RAM Cost
+
+ {toCurrency(alloc.ramCost || 0, currency)}
+
+
+
+ PV Cost
+
+ {toCurrency(alloc.pvCost || 0, currency)}
+
+
+
+ Network Cost
+
+ {toCurrency(alloc.networkCost || 0, currency)}
+
+
+
+ Shared Cost
+
+ {toCurrency(alloc.sharedCost || 0, currency)}
+
+
+
+ External Cost
+
+ {toCurrency(alloc.externalCost || 0, currency)}
+
+
+
+ Total Cost
+
+ {toCurrency(alloc.totalCost || 0, currency)}
+
+
+
+
+ Resource Metrics
+
+ {alloc.cpuCoreRequestAverage > 0 && (
+
+
+ CPU Request
+
+ {alloc.cpuCoreRequestAverage.toFixed(2)} cores
+
+
+ )}
+ {alloc.cpuCoreUsageAverage > 0 && (
+
+ CPU Usage
+
+ {alloc.cpuCoreUsageAverage.toFixed(2)} cores
+
+
+ )}
+ {alloc.ramByteRequestAverage > 0 && (
+
+ RAM Request
+
+ {(alloc.ramByteRequestAverage / 1024 / 1024 / 1024).toFixed(2)}{" "}
+ GB
+
+
+ )}
+ {alloc.ramByteUsageAverage > 0 && (
+
+ RAM Usage
+
+ {(alloc.ramByteUsageAverage / 1024 / 1024 / 1024).toFixed(2)} GB
+
+
+ )}
+ {alloc.minutes > 0 && (
+
+ Runtime
+
+ {(alloc.minutes / 60).toFixed(1)} hours
+
+
+ )}
+
+
+ );
+};
+
+export default AllocationTable;
diff --git a/src/components/allocations/Breadcrumbs.js b/src/components/allocations/Breadcrumbs.js
new file mode 100644
index 00000000..75fe0caa
--- /dev/null
+++ b/src/components/allocations/Breadcrumbs.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Breadcrumbs = ({ filters, aggregateBy, onNavigate }) => {
+ if (!filters || filters.length === 0) return null;
+ return (
+
+
+
+
+
+ {
+ setSearch(e.target.value);
+ setPage(0);
+ }}
+ />
+
+ {sorted.length} items
+
+
+
+
+
+
+ {totalPages > 1 && (
+ | handleSort(c.key)} + > + + {c.label} + + {sortBy === c.key + ? sortDir === "desc" + ? "↓" + : "↑" + : "↕"} + + + | + ))} ++ | ||||||
|---|---|---|---|---|---|---|---|
| + Totals + | ++ {toCurrency(totalRow.cpuCost, currency)} + | ++ {toCurrency(totalRow.gpuCost, currency)} + | ++ {toCurrency(totalRow.ramCost, currency)} + | ++ {toCurrency(totalRow.pvCost, currency)} + | ++ {totalRow.totalEfficiency > 0 + ? `${(totalRow.totalEfficiency * 100).toFixed(1)}%` + : "—"} + | ++ {toCurrency(totalRow.totalCost, currency)} + | ++ |
| + {a.name} + | ++ {toCurrency(a.cpuCost || 0, currency)} + | ++ {toCurrency(a.gpuCost || 0, currency)} + | ++ {toCurrency(a.ramCost || 0, currency)} + | ++ {toCurrency(a.pvCost || 0, currency)} + | ++ {a.totalEfficiency > 0 + ? `${(a.totalEfficiency * 100).toFixed(1)}%` + : "—"} + | ++ {toCurrency(a.totalCost || 0, currency)} + | ++ {clickable && canDrill ? ( + + ) : clickable ? ( + "›" + ) : ( + "" + )} + | +
| + No results found + | +
+
+ {page * rowsPerPage + 1}–
+ {Math.min((page + 1) * rowsPerPage, sorted.length)} of{" "}
+ {sorted.length}
+
+
+ )}
+
+
+
+ {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
+ let pageNum;
+ if (totalPages <= 7) pageNum = i;
+ else if (page < 4) pageNum = i;
+ else if (page > totalPages - 4) pageNum = totalPages - 7 + i;
+ else pageNum = page - 3 + i;
+ return (
+
+ );
+ })}
+
+
+
+
+ {filters.map((f, i) => (
+
+ ›
+
+
+ ))}
+ ›
+ {aggregateBy}
+
+ );
+};
+
+export default Breadcrumbs;
diff --git a/src/components/allocations/ChartTooltip.js b/src/components/allocations/ChartTooltip.js
new file mode 100644
index 00000000..60de60b7
--- /dev/null
+++ b/src/components/allocations/ChartTooltip.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { toCurrency } from "../../util";
+
+const ChartTooltip = ({ active, payload, label, currency }) => {
+ if (!active || !payload?.length) return null;
+ const total = payload.reduce((s, p) => s + (p.value || 0), 0);
+ return (
+
+ {label &&
+ );
+};
+
+export default ChartTooltip;
diff --git a/src/components/allocations/SummaryTiles.js b/src/components/allocations/SummaryTiles.js
new file mode 100644
index 00000000..1b89bd43
--- /dev/null
+++ b/src/components/allocations/SummaryTiles.js
@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { toCurrency } from "../../util";
+import { COST_COLORS } from "./constants";
+
+const SummaryTiles = ({ cumData, currency }) => {
+ const totals = useMemo(() => {
+ let cpu = 0,
+ gpu = 0,
+ ram = 0,
+ pv = 0,
+ net = 0,
+ total = 0;
+ cumData.forEach((a) => {
+ cpu += a.cpuCost || 0;
+ gpu += a.gpuCost || 0;
+ ram += a.ramCost || 0;
+ pv += a.pvCost || 0;
+ net += a.networkCost || 0;
+ total += a.totalCost || 0;
+ });
+ const effArr = cumData.filter(
+ (a) => a.name !== "__idle__" && a.totalEfficiency > 0,
+ );
+ const avgEff =
+ effArr.length > 0
+ ? effArr.reduce((s, a) => s + a.totalEfficiency, 0) / effArr.length
+ : 0;
+ return { cpu, gpu, ram, pv, net, total, avgEff, count: cumData.length };
+ }, [cumData]);
+
+ const tiles = [
+ {
+ label: "Total Cost",
+ value: toCurrency(totals.total, currency),
+ color: "var(--text-primary)",
+ },
+ {
+ label: "CPU Cost",
+ value: toCurrency(totals.cpu, currency),
+ color: COST_COLORS.cpuCost,
+ },
+ {
+ label: "GPU Cost",
+ value: toCurrency(totals.gpu, currency),
+ color: COST_COLORS.gpuCost,
+ },
+ {
+ label: "RAM Cost",
+ value: toCurrency(totals.ram, currency),
+ color: COST_COLORS.ramCost,
+ },
+ {
+ label: "PV Cost",
+ value: toCurrency(totals.pv, currency),
+ color: COST_COLORS.pvCost,
+ },
+ {
+ label: "Avg Efficiency",
+ value: `${(totals.avgEff * 100).toFixed(1)}%`,
+ color: "#42be65",
+ },
+ ];
+
+ return (
+ {label}
}
+
+ {toCurrency(total, currency)}
+
+
+ {payload
+ .filter((p) => p.value > 0.001)
+ .sort((a, b) => b.value - a.value)
+ .map((p) => (
+
+
+
+ {p.name}
+
+ {toCurrency(p.value, currency)}
+
+
+ ))}
+
+ {tiles.map((t) => (
+
+ );
+};
+
+export default SummaryTiles;
diff --git a/src/components/allocations/constants.js b/src/components/allocations/constants.js
new file mode 100644
index 00000000..9309df84
--- /dev/null
+++ b/src/components/allocations/constants.js
@@ -0,0 +1,39 @@
+export const ALLOC_COLORS = [
+ "#0f62fe",
+ "#009d9a",
+ "#8a3ffc",
+ "#d12771",
+ "#ee5396",
+ "#1192e8",
+ "#fa4d56",
+ "#42be65",
+ "#6929c4",
+ "#ff832b",
+ "#b28600",
+ "#a56eff",
+];
+
+export const COST_COLORS = {
+ cpuCost: "#0f62fe",
+ gpuCost: "#8a3ffc",
+ ramCost: "#009d9a",
+ pvCost: "#1192e8",
+ networkCost: "#ee5396",
+};
+
+export const REFRESH_INTERVAL = 60000;
+
+export const drilldownHierarchy = {
+ namespace: "controllerKind",
+ controllerKind: "controller",
+ controller: "pod",
+ pod: "container",
+};
+
+export const filterPropertyMap = {
+ namespace: "namespace",
+ controllerKind: "controllerKind",
+ controller: "controllerName",
+ pod: "pod",
+ container: "container",
+};
diff --git a/src/components/assets/AssetCostChart.js b/src/components/assets/AssetCostChart.js
new file mode 100644
index 00000000..4460335f
--- /dev/null
+++ b/src/components/assets/AssetCostChart.js
@@ -0,0 +1,366 @@
+import React, { useState, useMemo, useEffect } from "react";
+import {
+ AreaChart,
+ Area,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+} from "recharts";
+import { toCurrency } from "../../util";
+import { getChartTheme, TYPE_COLORS } from "../../utils/chartTheme";
+
+/**
+ * Builds daily cost breakdown from asset dailyCosts arrays.
+ * Falls back to synthetic generation if dailyCosts not available.
+ * Always shows at least 7 data points so charts are never a single bar.
+ */
+function generateDailyBreakdown(assets, windowStr) {
+ const types = new Set();
+ const dateMap = {};
+
+ // Try to use real dailyCosts from assets
+ let hasDailyCosts = false;
+ assets.forEach((a) => {
+ const type = a.type || "Other";
+ types.add(type);
+ if (a.dailyCosts && a.dailyCosts.length > 0) {
+ hasDailyCosts = true;
+ a.dailyCosts.forEach((dc) => {
+ if (!dateMap[dc.date]) dateMap[dc.date] = {};
+ dateMap[dc.date][type] = (dateMap[dc.date][type] || 0) + dc.cost;
+ });
+ }
+ });
+
+ const typeArr = [...types].sort();
+
+ if (hasDailyCosts && Object.keys(dateMap).length > 0) {
+ const dates = Object.keys(dateMap).sort();
+ const data = dates.map((d) => {
+ const point = {
+ date: d,
+ dateLabel: new Date(d + "T00:00:00Z").toLocaleDateString(
+ navigator.language,
+ {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ },
+ ),
+ };
+ let total = 0;
+ typeArr.forEach((t) => {
+ point[t] = Number((dateMap[d][t] || 0).toFixed(4));
+ total += point[t];
+ });
+ point.total = Number(total.toFixed(4));
+ return point;
+ });
+ return { data, types: typeArr };
+ }
+
+ // Synthetic fallback — always at least 7 days
+ const days = Math.max(
+ 7,
+ {
+ today: 7,
+ yesterday: 7,
+ "24h": 7,
+ "48h": 7,
+ week: 7,
+ lastweek: 7,
+ "7d": 7,
+ "14d": 14,
+ }[windowStr] || 7,
+ );
+
+ const typeCosts = {};
+ assets.forEach((a) => {
+ const t = a.type || "Other";
+ typeCosts[t] = (typeCosts[t] || 0) + (a.totalCost || 0);
+ });
+
+ const now = new Date();
+ const data = [];
+ for (let i = days - 1; i >= 0; i--) {
+ const date = new Date(now);
+ date.setDate(date.getDate() - i);
+ date.setHours(0, 0, 0, 0);
+ const point = {
+ date: date.toISOString(),
+ dateLabel: date.toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ }),
+ };
+ let dayTotal = 0;
+ typeArr.forEach((type) => {
+ const v = 1 + Math.sin(i * 1.5 + typeArr.indexOf(type)) * 0.15;
+ const cost = Math.max(0, ((typeCosts[type] || 0) / days) * v);
+ point[type] = Number(cost.toFixed(4));
+ dayTotal += point[type];
+ });
+ point.total = Number(dayTotal.toFixed(4));
+ data.push(point);
+ }
+ return { data, types: typeArr };
+}
+
+/**
+ * Compute cumulative totals from daily data.
+ */
+function toCumulative(data, types) {
+ const running = {};
+ types.forEach((t) => (running[t] = 0));
+
+ return data.map((d) => {
+ const point = { ...d };
+ types.forEach((t) => {
+ running[t] += d[t] || 0;
+ point[t] = Number(running[t].toFixed(4));
+ });
+ point.total = types.reduce((sum, t) => sum + point[t], 0);
+ return point;
+ });
+}
+
+const CustomTooltip = ({ active, payload, label, currency, cumulative }) => {
+ if (!active || !payload?.length) return null;
+
+ const total = payload.reduce((sum, p) => sum + (p.value || 0), 0);
+ const chartTheme = getChartTheme();
+
+ return (
+
+ {t.label}
+
+ {t.value}
+
+
+ ))}
+
+
+ );
+};
+
+/**
+ * AssetCostChart — stacked area/bar chart showing cost over time.
+ *
+ * Props:
+ * - assets: array of asset objects
+ * - currency: ISO currency code
+ * - windowStr: current window string (e.g. "7d")
+ */
+const AssetCostChart = ({ assets, currency, windowStr }) => {
+ const [cumulative, setCumulative] = useState(false);
+ const [chartType, setChartType] = useState("area"); // "area" or "bar"
+ const [chartTheme, setChartTheme] = useState(getChartTheme());
+
+ // Update theme when it changes
+ useEffect(() => {
+ const observer = new MutationObserver(() => {
+ setChartTheme(getChartTheme());
+ });
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
+ });
+ return () => observer.disconnect();
+ }, []);
+
+ const { data: dailyData, types } = useMemo(
+ () => generateDailyBreakdown(assets, windowStr),
+ [assets, windowStr],
+ );
+
+ const chartData = useMemo(
+ () => (cumulative ? toCumulative(dailyData, types) : dailyData),
+ [dailyData, types, cumulative],
+ );
+
+ if (!assets.length) return null;
+
+ return (
+ {label}
+
+ {cumulative ? "Cumulative: " : "Daily: "}
+ {toCurrency(total, currency)}
+
+
+ {payload
+ .filter((p) => p.value > 0)
+ .sort((a, b) => b.value - a.value)
+ .map((p) => (
+
+
+
+ {p.name}
+
+ {toCurrency(p.value, currency)}
+
+
+ ))}
+
+
+ );
+};
+
+export default AssetCostChart;
diff --git a/src/components/assets/AssetDetail.js b/src/components/assets/AssetDetail.js
new file mode 100644
index 00000000..b1da934a
--- /dev/null
+++ b/src/components/assets/AssetDetail.js
@@ -0,0 +1,703 @@
+import React, { useMemo, useState, useEffect } from "react";
+import { useLocation, useNavigate, useParams } from "react-router";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ PieChart,
+ Pie,
+ Cell,
+ Legend,
+} from "recharts";
+import { toCurrency } from "../../util";
+import Page from "../Page";
+import Header from "../Header";
+import Footer from "../Footer";
+import AssetsService from "../../services/assets";
+import "../../css/assets.css";
+
+const TYPE_COLORS = {
+ Node: "#0f62fe",
+ Disk: "#009d9a",
+ LoadBalancer: "#8a3ffc",
+ Network: "#1192e8",
+ ClusterManagement: "#8d8d8d",
+ Cloud: "#d12771",
+};
+
+const COST_COLORS = {
+ cpuCost: "#0f62fe",
+ ramCost: "#009d9a",
+ gpuCost: "#8a3ffc",
+ storageCost: "#1192e8",
+ networkCost: "#ee5396",
+ lbCost: "#6929c4",
+ adjustment: "#fa4d56",
+ credit: "#42be65",
+};
+
+function formatBytes(bytes) {
+ if (!bytes || bytes === 0) return "0 B";
+ const units = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
+ let i = 0;
+ let val = bytes;
+ while (val >= 1024 && i < units.length - 1) {
+ val /= 1024;
+ i++;
+ }
+ return `${val.toFixed(val >= 100 ? 0 : val >= 10 ? 1 : 2)} ${units[i]}`;
+}
+
+function formatMinutes(mins) {
+ if (!mins || mins <= 0) return "—";
+ const days = Math.floor(mins / 1440);
+ const hours = Math.floor((mins % 1440) / 60);
+ const minutes = Math.round(mins % 60);
+ if (days > 0) return `${days}d ${hours}h`;
+ if (hours > 0) return `${hours}h ${minutes}m`;
+ return `${minutes}m`;
+}
+
+/**
+ * UtilizationBar component for the detail view.
+ */
+const UtilizationBar = ({ breakdown, label }) => {
+ if (!breakdown) return null;
+ const user = Math.round((breakdown.user || 0) * 100);
+ const system = Math.round((breakdown.system || 0) * 100);
+ const idle = 100 - user - system;
+
+ return (
+
+
+ Cost Over Time
+
+
+
+
+
+
+
+
+
+ {chartType === "area" ? (
+
+
+ {types.map((type) => (
+
+
+ ))}
+
+ `$${v.toFixed(0)}`}
+ width={60}
+ />
+
+ ) : (
+
+ `$${v.toFixed(0)}`}
+ width={60}
+ />
+
+ )}
+
+
+
+
+ );
+};
+
+/**
+ * Cost breakdown donut chart for the asset detail page.
+ */
+const CostDonut = ({ asset, currency }) => {
+ const slices = [];
+
+ if (asset.cpuCost > 0)
+ slices.push({
+ name: "CPU",
+ value: asset.cpuCost,
+ fill: COST_COLORS.cpuCost,
+ });
+ if (asset.ramCost > 0)
+ slices.push({
+ name: "RAM",
+ value: asset.ramCost,
+ fill: COST_COLORS.ramCost,
+ });
+ if (asset.gpuCost > 0)
+ slices.push({
+ name: "GPU",
+ value: asset.gpuCost,
+ fill: COST_COLORS.gpuCost,
+ });
+ if (asset.type === "Disk" && asset.totalCost > 0)
+ slices.push({
+ name: "Storage",
+ value: asset.totalCost,
+ fill: COST_COLORS.storageCost,
+ });
+ if (asset.type === "LoadBalancer" && asset.totalCost > 0)
+ slices.push({
+ name: "LB",
+ value: asset.totalCost,
+ fill: COST_COLORS.lbCost,
+ });
+
+ // For generic types, just show total
+ if (slices.length === 0 && asset.totalCost > 0) {
+ slices.push({
+ name: asset.type,
+ value: asset.totalCost,
+ fill: TYPE_COLORS[asset.type] || "#6f6f6f",
+ });
+ }
+
+ if (slices.length === 0) return null;
+
+ return (
+
+ {label}
+ {user + system}%
+
+
+
+
+
+
+
+ User {user}%
+ System {system}%
+ Idle {idle}%
+
+
+
+
+
+ {slices.map((s, i) => (
+ |
+ ))}
+
+
+
+
+ );
+};
+
+/**
+ * Daily cost trend for a single asset.
+ * Uses real dailyCosts when available, otherwise generates 7-day synthetic data.
+ */
+const AssetCostTrend = ({ asset, currency, windowStr }) => {
+ const data = useMemo(() => {
+ // Use real timestamped dailyCosts if available
+ if (asset.dailyCosts && asset.dailyCosts.length > 1) {
+ return asset.dailyCosts.map((dc) => ({
+ date: new Date(dc.date + "T00:00:00Z").toLocaleDateString(
+ navigator.language,
+ {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ },
+ ),
+ cost: dc.cost,
+ }));
+ }
+
+ // Synthetic fallback — always at least 7 days
+ const days = 7;
+ const dailyCost = (asset.totalCost || 0) / days;
+ const now = new Date();
+
+ return Array.from({ length: days }, (_, i) => {
+ const date = new Date(now);
+ date.setDate(date.getDate() - (days - 1 - i));
+ const variance = 1 + Math.sin(i * 2.1) * 0.12;
+ return {
+ date: date.toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ }),
+ cost: Number((dailyCost * variance).toFixed(4)),
+ };
+ });
+ }, [asset, windowStr]);
+
+ return (
+
+
+
+ `$${v.toFixed(1)}`}
+ width={50}
+ />
+ toCurrency(val, currency)}
+ contentStyle={{
+ background: "#fff",
+ border: "1px solid #e0e0e0",
+ borderRadius: 4,
+ fontSize: 12,
+ }}
+ />
+
+
+
+ );
+};
+
+/**
+ * AssetDetail — full-page detail view for a single asset.
+ * Receives asset data via location state, OR fetches it from the API
+ * when navigated to directly (deep-link / bookmark support).
+ */
+const AssetDetail = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { id: routeId } = useParams();
+
+ // Try location.state first (from in-app navigation)
+ const stateAsset = location.state?.asset;
+ const stateCurrency = location.state?.currency || "USD";
+ const stateWindow = location.state?.windowStr || "7d";
+
+ const [asset, setAsset] = useState(stateAsset || null);
+ const [currency, setCurrency] = useState(stateCurrency);
+ const [windowStr, setWindowStr] = useState(stateWindow);
+ const [fetchLoading, setFetchLoading] = useState(!stateAsset);
+ const [fetchError, setFetchError] = useState(false);
+
+ // When no state is passed (direct navigation), fetch asset by ID
+ useEffect(() => {
+ if (stateAsset || !routeId) return;
+
+ let cancelled = false;
+ setFetchLoading(true);
+ setFetchError(false);
+
+ AssetsService.fetchAssetById(decodeURIComponent(routeId), "7d")
+ .then(({ asset: fetched }) => {
+ if (cancelled) return;
+ if (fetched) {
+ setAsset(fetched);
+ } else {
+ setFetchError(true);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) setFetchError(true);
+ })
+ .finally(() => {
+ if (!cancelled) setFetchLoading(false);
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [routeId, stateAsset]);
+
+ // Loading state while fetching via deep-link
+ if (fetchLoading) {
+ return (
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {[65, 85, 45, 70, 90, 55, 75].map((h, i) => (
+
+ ))}
+
+
+
+
+
+
+ + {fetchError + ? "Asset not found." + : "No asset data. Please go back and select an asset."} +
+ +
+ {/* Back nav + title */}
+
+
+
+
+
+
+ {/* Cost summary cards */}
+
+
+ {assetType}
+
+
+ {name}
+
+
+ Window: {asset.window?.start?.slice(0, 10)} →{" "}
+ {asset.window?.end?.slice(0, 10)}
+
+ {asset.minutes > 0 && (
+ Duration: {formatMinutes(asset.minutes)}
+ )}
+
+
+
+
+ {/* Charts row */}
+
+ Total Cost
+
+ {toCurrency(asset.totalCost || 0, currency)}
+
+
+ {asset.cpuCost > 0 && (
+
+ CPU Cost
+
+ {toCurrency(asset.cpuCost, currency)}
+
+
+ )}
+ {asset.ramCost > 0 && (
+
+ RAM Cost
+
+ {toCurrency(asset.ramCost, currency)}
+
+
+ )}
+ {asset.gpuCost > 0 && (
+
+ GPU Cost
+
+ {toCurrency(asset.gpuCost, currency)}
+
+
+ )}
+
+
+
+ {/* Info grid */}
+
+
+ {(asset.cpuCost > 0 || asset.ramCost > 0 || asset.gpuCost > 0) && (
+ Daily Cost Trend
+
+
+ )}
+ Cost Breakdown
+
+ {/* Properties */}
+
+
+ {/* Utilization */}
+ {(asset.cpuBreakdown || asset.ramBreakdown || asset.breakdown) && (
+
+
+
+ {/* Type-specific */}
+ {specRows.length > 0 && (
+ Properties
+
+ {propsRows.map((r) => (
+
+
+ {r.label}
+ {r.value}
+
+ ))}
+
+
+ )}
+
+ {/* Cost details */}
+ + {assetType === "Node" + ? "Compute Resources" + : assetType === "Disk" + ? "Storage Details" + : assetType === "LoadBalancer" + ? "Load Balancer" + : "Details"} +
+
+ {specRows.map((r) => (
+
+
+ {r.label}
+ {r.value}
+
+ ))}
+
+
+ Cost Details
+
+ {costRows.map((r) => (
+
+
+ {r.label}
+ {r.value}
+
+ ))}
+
+
+ )}
+
+ {/* Labels */}
+ {asset.labels && Object.keys(asset.labels).length > 0 && (
+ Utilization
+
+ {asset.cpuBreakdown && (
+
+ {asset.overhead && (
+
+
+ )}
+ Overhead
+
+
+
+ CPU Overhead
+
+ {Math.round(
+ (asset.overhead.cpuOverheadFraction || 0) * 100,
+ )}
+ %
+
+
+
+ RAM Overhead
+
+ {Math.round(
+ (asset.overhead.ramOverheadFraction || 0) * 100,
+ )}
+ %
+
+
+
+ Overhead Cost Fraction
+
+ {Math.round(
+ (asset.overhead.overheadCostFraction || 0) * 100,
+ )}
+ %
+
+
+
+
+ )}
+ Labels
+
+ {Object.entries(asset.labels).map(([k, v]) => (
+
+ {k}
+ {v}
+
+ ))}
+
+
+ {label &&
+ );
+};
+
+/* ── Chart panel wrapper ─────────────────────────── */
+const Panel = ({ title, subtitle, children, className }) => (
+ {label}
}
+
+ {prefix || ""}
+ {toCurrency(total, currency)}
+
+
+ {payload
+ .filter((p) => p.value > 0.001)
+ .sort((a, b) => b.value - a.value)
+ .map((p) => (
+
+
+
+ {p.name}
+
+ {toCurrency(p.value, currency)}
+
+
+ ))}
+
+
+);
+
+/* ── Helpers ─────────────────────────────────────── */
+function buildDailyByType(assets) {
+ // Collect all unique dates across all assets
+ const dateMap = {};
+ const types = new Set();
+
+ assets.forEach((a) => {
+ const type = a.type || "Other";
+ types.add(type);
+ (a.dailyCosts || []).forEach((dc) => {
+ if (!dateMap[dc.date]) dateMap[dc.date] = {};
+ dateMap[dc.date][type] = (dateMap[dc.date][type] || 0) + dc.cost;
+ });
+ });
+
+ // If no dailyCosts, generate synthetic from aggregated data
+ if (Object.keys(dateMap).length === 0) {
+ return buildSyntheticDaily(assets);
+ }
+
+ const typeArr = [...types].sort();
+ const dates = Object.keys(dateMap).sort();
+
+ return {
+ data: dates.map((d) => {
+ const point = {
+ date: d,
+ dateLabel: new Date(d + "T00:00:00Z").toLocaleDateString(
+ navigator.language,
+ {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ },
+ ),
+ };
+ typeArr.forEach((t) => {
+ point[t] = Number((dateMap[d][t] || 0).toFixed(4));
+ });
+ point.total = typeArr.reduce((s, t) => s + (point[t] || 0), 0);
+ return point;
+ }),
+ types: typeArr,
+ };
+}
+
+function buildSyntheticDaily(assets) {
+ const days = 7;
+ const now = new Date();
+ const typeCosts = {};
+ assets.forEach((a) => {
+ const t = a.type || "Other";
+ typeCosts[t] = (typeCosts[t] || 0) + (a.totalCost || 0);
+ });
+ const types = Object.keys(typeCosts).sort();
+
+ const data = [];
+ for (let i = days - 1; i >= 0; i--) {
+ const d = new Date(now);
+ d.setDate(d.getDate() - i);
+ const point = {
+ date: d.toISOString().slice(0, 10),
+ dateLabel: d.toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ }),
+ };
+ let total = 0;
+ types.forEach((t) => {
+ const v = 1 + Math.sin(i * 1.5 + types.indexOf(t)) * 0.15;
+ const cost = Math.max(0, (typeCosts[t] / days) * v);
+ point[t] = Number(cost.toFixed(4));
+ total += point[t];
+ });
+ point.total = Number(total.toFixed(4));
+ data.push(point);
+ }
+ return { data, types };
+}
+
+function buildDailyByProvider(assets) {
+ const dateMap = {};
+ const providers = new Set();
+
+ assets.forEach((a) => {
+ const prov = a.properties?.provider || "Unknown";
+ providers.add(prov);
+ (a.dailyCosts || []).forEach((dc) => {
+ if (!dateMap[dc.date]) dateMap[dc.date] = {};
+ dateMap[dc.date][prov] = (dateMap[dc.date][prov] || 0) + dc.cost;
+ });
+ });
+
+ if (Object.keys(dateMap).length === 0) {
+ // Synthetic fallback
+ const days = 7;
+ const now = new Date();
+ const provCosts = {};
+ assets.forEach((a) => {
+ const p = a.properties?.provider || "Unknown";
+ provCosts[p] = (provCosts[p] || 0) + (a.totalCost || 0);
+ });
+ const provArr = Object.keys(provCosts);
+ const data = [];
+ for (let i = days - 1; i >= 0; i--) {
+ const d = new Date(now);
+ d.setDate(d.getDate() - i);
+ const point = {
+ dateLabel: d.toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ }),
+ };
+ provArr.forEach((p) => {
+ const v = 1 + Math.sin(i * 2 + provArr.indexOf(p)) * 0.2;
+ point[p] = Number(((provCosts[p] / days) * v).toFixed(4));
+ });
+ data.push(point);
+ }
+ return { data, providers: provArr };
+ }
+
+ const provArr = [...providers].sort();
+ const dates = Object.keys(dateMap).sort();
+ return {
+ data: dates.map((d) => {
+ const point = {
+ dateLabel: new Date(d + "T00:00:00Z").toLocaleDateString(
+ navigator.language,
+ {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ },
+ ),
+ };
+ provArr.forEach((p) => {
+ point[p] = Number((dateMap[d][p] || 0).toFixed(4));
+ });
+ return point;
+ }),
+ providers: provArr,
+ };
+}
+
+function buildDailyByCluster(assets) {
+ const dateMap = {};
+ const clusters = new Set();
+
+ assets.forEach((a) => {
+ const cl = a.properties?.cluster || "Unknown";
+ clusters.add(cl);
+ (a.dailyCosts || []).forEach((dc) => {
+ if (!dateMap[dc.date]) dateMap[dc.date] = {};
+ dateMap[dc.date][cl] = (dateMap[dc.date][cl] || 0) + dc.cost;
+ });
+ });
+
+ if (Object.keys(dateMap).length === 0) {
+ const days = 7;
+ const now = new Date();
+ const clCosts = {};
+ assets.forEach((a) => {
+ const c = a.properties?.cluster || "Unknown";
+ clCosts[c] = (clCosts[c] || 0) + (a.totalCost || 0);
+ });
+ const clArr = Object.keys(clCosts);
+ const data = [];
+ for (let i = days - 1; i >= 0; i--) {
+ const d = new Date(now);
+ d.setDate(d.getDate() - i);
+ const point = {
+ dateLabel: d.toLocaleDateString(navigator.language, {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ }),
+ };
+ clArr.forEach((c) => {
+ const v = 1 + Math.cos(i * 1.3 + clArr.indexOf(c)) * 0.18;
+ point[c] = Number(((clCosts[c] / days) * v).toFixed(4));
+ });
+ data.push(point);
+ }
+ return { data, clusters: clArr };
+ }
+
+ const clArr = [...clusters].sort();
+ const dates = Object.keys(dateMap).sort();
+ return {
+ data: dates.map((d) => {
+ const point = {
+ dateLabel: new Date(d + "T00:00:00Z").toLocaleDateString(
+ navigator.language,
+ {
+ month: "short",
+ day: "numeric",
+ timeZone: "UTC",
+ },
+ ),
+ };
+ clArr.forEach((c) => {
+ point[c] = Number((dateMap[d][c] || 0).toFixed(4));
+ });
+ return point;
+ }),
+ clusters: clArr,
+ };
+}
+
+function buildCumulativeTotal(dailyByType) {
+ let running = 0;
+ return dailyByType.data.map((d) => {
+ running += d.total;
+ return {
+ dateLabel: d.dateLabel,
+ cumulative: Number(running.toFixed(4)),
+ };
+ });
+}
+
+/* ── Main Dashboard Component ────────────────────── */
+const AssetsDashboard = ({ assets, currency, windowStr }) => {
+ // 1. Daily spend by service/type (stacked bar — like "Estimated charges by Service")
+ const dailyByType = useMemo(() => buildDailyByType(assets), [assets]);
+
+ // 2. Daily spend by provider (stacked bar — like "Daily Spend by Account")
+ const dailyByProvider = useMemo(() => buildDailyByProvider(assets), [assets]);
+
+ // 3. Cumulative cost (area — like "Monthly Estimated Charges")
+ const cumulativeData = useMemo(
+ () => buildCumulativeTotal(dailyByType),
+ [dailyByType],
+ );
+
+ // 4. Cost breakdown by type (donut — like "Estimated charges by Service" pie)
+ const typeDonut = useMemo(() => {
+ const map = {};
+ assets.forEach((a) => {
+ const t = a.type || "Other";
+ map[t] = (map[t] || 0) + (a.totalCost || 0);
+ });
+ return Object.entries(map)
+ .map(([name, value]) => ({
+ name,
+ value: Number(value.toFixed(2)),
+ fill: TYPE_COLORS[name] || "#6f6f6f",
+ }))
+ .sort((a, b) => b.value - a.value);
+ }, [assets]);
+
+ // 5. Cost by provider (horizontal bar — like "Biggest spenders")
+ const providerBars = useMemo(() => {
+ const map = {};
+ assets.forEach((a) => {
+ const p = a.properties?.provider || "Unknown";
+ map[p] = (map[p] || 0) + (a.totalCost || 0);
+ });
+ return Object.entries(map)
+ .map(([name, value]) => ({
+ name,
+ cost: Number(value.toFixed(2)),
+ fill: PROVIDER_COLORS[name] || "#6f6f6f",
+ }))
+ .sort((a, b) => b.cost - a.cost);
+ }, [assets]);
+
+ // 6. Daily spend by cluster (stacked bar)
+ const dailyByCluster = useMemo(() => buildDailyByCluster(assets), [assets]);
+
+ // Summary metrics for header tiles
+ const metrics = useMemo(() => {
+ let totalCost = 0;
+ let avgDaily = 0;
+ assets.forEach((a) => (totalCost += a.totalCost || 0));
+ const dayCount = dailyByType.data.length || 1;
+ avgDaily = totalCost / dayCount;
+ // Estimate today's cost from the last day
+ const lastDay = dailyByType.data[dailyByType.data.length - 1];
+ const todayCost = lastDay ? lastDay.total : avgDaily;
+ return { totalCost, avgDaily, todayCost };
+ }, [assets, dailyByType]);
+
+ // Cost breakdown table for the donut legend
+ const typeTable = useMemo(() => {
+ const total = typeDonut.reduce((s, d) => s + d.value, 0);
+ return typeDonut.map((d) => ({
+ ...d,
+ pct: total > 0 ? Math.round((d.value / total) * 100) : 0,
+ }));
+ }, [typeDonut]);
+
+ if (!assets.length) return null;
+
+ const windowLabel =
+ windowStr === "7d"
+ ? "Last 7 days"
+ : windowStr === "14d"
+ ? "Last 14 days"
+ : windowStr === "today"
+ ? "Today"
+ : windowStr === "week"
+ ? "Week to date"
+ : windowStr;
+
+ return (
+
+
+ {title}
+ {subtitle && {subtitle}} +{children}
+
+ {/* ── Top summary tiles (orange accent like AWS billing) ── */}
+
+ );
+};
+
+export default AssetsDashboard;
diff --git a/src/components/assets/AssetsFilterBar.js b/src/components/assets/AssetsFilterBar.js
new file mode 100644
index 00000000..43ead650
--- /dev/null
+++ b/src/components/assets/AssetsFilterBar.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const AssetsFilterBar = ({ tabs, activeTab, typeCounts, onTabSelect }) => (
+
+
+
+ {/* ── Row 1: Cumulative + Daily by Type + Donut ── */}
+
+ Total Spend
+ {windowLabel}
+
+ {toCurrency(metrics.totalCost, currency)}
+
+
+
+ Average Daily Spend
+ per day
+
+ {toCurrency(metrics.avgDaily, currency)}
+
+
+
+ Latest Day Spend
+
+ {dailyByType.data.length
+ ? dailyByType.data[dailyByType.data.length - 1].dateLabel
+ : "—"}
+
+
+ {toCurrency(metrics.todayCost, currency)}
+
+
+
+ {/* Cumulative Estimated Charges (area) */}
+
+
+
+
+
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+
+
+ {/* Daily Cost by Type (stacked bar) */}
+
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+
+
+ {/* Donut + table */}
+
+
+
+
+ {/* ── Row 2: Provider bar + Daily by Provider + Daily by Cluster ── */}
+
+
+
+
+ {typeDonut.map((s, i) => (
+ |
+ ))}
+
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "#fff",
+ border: "1px solid #e0e0e0",
+ borderRadius: 4,
+ fontSize: 11,
+ }}
+ />
+
+
+
+
+ {typeTable.map((t) => (
+
+
+
+ {t.name}
+
+ {toCurrency(t.value, currency)}
+
+ {t.pct}%
+
+ ))}
+
+ {/* Cost by Provider (horizontal bar) */}
+
+
+
+ `$${v.toFixed(0)}`}
+ />
+ toCurrency(v, currency)}
+ contentStyle={{
+ background: "#fff",
+ border: "1px solid #e0e0e0",
+ borderRadius: 4,
+ fontSize: 11,
+ }}
+ />
+
+ {providerBars.map((entry, i) => (
+ |
+ ))}
+
+
+
+
+
+ {/* Daily Spend by Provider (stacked bar) */}
+
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+
+
+ {/* Daily Spend by Cluster (stacked bar) */}
+
+
+
+ `$${v.toFixed(0)}`}
+ width={55}
+ />
+
+
+
+
+
+ {tabs
+ .filter((t) => t.key === "all" || (typeCounts[t.key] || 0) > 0)
+ .map((t) => (
+
+ ))}
+
+);
+
+export default AssetsFilterBar;
diff --git a/src/components/assets/AssetsHeaderControls.js b/src/components/assets/AssetsHeaderControls.js
new file mode 100644
index 00000000..5ff6f2b2
--- /dev/null
+++ b/src/components/assets/AssetsHeaderControls.js
@@ -0,0 +1,161 @@
+import React from "react";
+import { Dropdown } from "@carbon/react";
+import { toCurrency } from "../../util";
+
+function exportAssetsCSV(assets, currency) {
+ const headers = [
+ "Name",
+ "Type",
+ "Provider",
+ "Cluster",
+ "Total Cost",
+ "CPU Cost",
+ "RAM Cost",
+ "GPU Cost",
+ "Start",
+ "End",
+ ];
+
+ const rows = assets.map((a) => [
+ (a.properties?.name || "—").replace(/,/g, " "),
+ a.type || "—",
+ (a.properties?.provider || "—").replace(/,/g, " "),
+ (a.properties?.cluster || "—").replace(/,/g, " "),
+ toCurrency(a.totalCost || 0, currency),
+ toCurrency(a.cpuCost || 0, currency),
+ toCurrency(a.ramCost || 0, currency),
+ toCurrency(a.gpuCost || 0, currency),
+ a.start || "",
+ a.end || "",
+ ]);
+
+ const csvContent = [headers.join(","), ...rows.map((r) => r.join(","))].join(
+ "\n",
+ );
+ const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = `assets_${new Date().toISOString().slice(0, 10)}.csv`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+}
+
+const AssetsHeaderControls = ({
+ viewMode,
+ setViewMode,
+ currency,
+ handleCurrencyChange,
+ currencyOptions,
+ ratesLive,
+ loading,
+ convertedAssets,
+ windowParam,
+ windowOptions,
+ updateParams,
+ autoRefresh,
+ setAutoRefresh,
+ fetchData,
+}) => {
+ const windowLabel =
+ windowOptions.find((w) => w.value === windowParam)?.name || windowParam;
+
+ return (
+
+ (item ? item.name : "")}
+ selectedItem={windowOptions.find((w) => w.value === windowParam)}
+ onChange={({ selectedItem }) =>
+ selectedItem && updateParams({ window: selectedItem.value })
+ }
+ size="sm"
+ />
+
+
+
+
+ );
+};
+
+export default AssetsHeaderControls;
diff --git a/src/components/assets/AssetsNotification.js b/src/components/assets/AssetsNotification.js
new file mode 100644
index 00000000..e28e05a1
--- /dev/null
+++ b/src/components/assets/AssetsNotification.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+const AssetsNotification = ({ show, onDismiss }) => {
+ if (!show) return null;
+ return (
+
+
+
+
+
+
+
+
+ {!ratesLive && currency !== "USD" && (
+
+ ≈
+
+ )}
+
+
+
+
+
+
+ ℹ
+
+ Demo mode
+ Unable to reach the OpenCost API. Displaying sample data.
+
+
+
+ );
+};
+
+export default AssetsNotification;
diff --git a/src/components/assets/AssetsSummaryTiles.js b/src/components/assets/AssetsSummaryTiles.js
new file mode 100644
index 00000000..f3e869bb
--- /dev/null
+++ b/src/components/assets/AssetsSummaryTiles.js
@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { toCurrency } from "../../util";
+
+/**
+ * AssetsSummaryTiles — cost-focused summary cards like a billing dashboard.
+ * Shows: Total Cost, CPU Cost, RAM Cost, GPU Cost, Total Assets count.
+ *
+ * Props:
+ * - assets: array of processed asset objects
+ * - currency: ISO currency code
+ */
+const AssetsSummaryTiles = ({ assets, currency }) => {
+ const metrics = useMemo(() => {
+ let totalCost = 0;
+ let cpuCost = 0;
+ let ramCost = 0;
+ let gpuCost = 0;
+ let storageCost = 0;
+
+ assets.forEach((a) => {
+ totalCost += a.totalCost || 0;
+ cpuCost += a.cpuCost || 0;
+ ramCost += a.ramCost || 0;
+ gpuCost += a.gpuCost || 0;
+ if (a.type === "Disk") storageCost += a.totalCost || 0;
+ });
+
+ return { totalCost, cpuCost, ramCost, gpuCost, storageCost };
+ }, [assets]);
+
+ const tiles = [
+ {
+ label: "Total Cost",
+ value: toCurrency(metrics.totalCost, currency),
+ accent: "#0f62fe",
+ },
+ {
+ label: "CPU Cost",
+ value: toCurrency(metrics.cpuCost, currency),
+ accent: "#5b9cff",
+ },
+ {
+ label: "RAM Cost",
+ value: toCurrency(metrics.ramCost, currency),
+ accent: "#00c7c3",
+ },
+ {
+ label: "GPU Cost",
+ value: toCurrency(metrics.gpuCost, currency),
+ accent: "#a56eff",
+ hide: metrics.gpuCost === 0,
+ },
+ {
+ label: "Storage Cost",
+ value: toCurrency(metrics.storageCost, currency),
+ accent: "#1192e8",
+ hide: metrics.storageCost === 0,
+ },
+ {
+ label: "Total Assets",
+ value: String(assets.length),
+ accent: "#8a8a8a",
+ },
+ ].filter((t) => !t.hide);
+
+ return (
+
+ {tiles.map((tile) => (
+
+ );
+};
+
+export default AssetsSummaryTiles;
diff --git a/src/components/assets/AssetsTable.js b/src/components/assets/AssetsTable.js
new file mode 100644
index 00000000..0eeeb6eb
--- /dev/null
+++ b/src/components/assets/AssetsTable.js
@@ -0,0 +1,344 @@
+import React, { useState, useMemo } from "react";
+import { useNavigate, useLocation } from "react-router";
+import { toCurrency } from "../../util";
+
+/**
+ * Format bytes to human readable (GiB, MiB, etc.)
+ */
+function formatBytes(bytes) {
+ if (!bytes || bytes === 0) return "0 B";
+ const units = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
+ let i = 0;
+ let val = bytes;
+ while (val >= 1024 && i < units.length - 1) {
+ val /= 1024;
+ i++;
+ }
+ return `${val.toFixed(val >= 100 ? 0 : val >= 10 ? 1 : 2)} ${units[i]}`;
+}
+
+const TYPE_COLORS = {
+ Node: { bg: "#d0e2ff", text: "#0043ce" },
+ Disk: { bg: "#d9fbfb", text: "#005d5d" },
+ LoadBalancer: { bg: "#e8daff", text: "#6929c4" },
+ Network: { bg: "#bae6ff", text: "#003a6d" },
+ ClusterManagement: { bg: "#e8e8e8", text: "#393939" },
+ Cloud: { bg: "#ffd6e8", text: "#9f1853" },
+};
+
+const columns = [
+ { key: "name", label: "Name", flex: 2.5 },
+ { key: "type", label: "Type", flex: 1 },
+ { key: "provider", label: "Provider", flex: 1 },
+ { key: "cluster", label: "Cluster", flex: 1.2 },
+ { key: "details", label: "Details", flex: 1.5 },
+ { key: "totalCost", label: "Total Cost", flex: 1, align: "right" },
+];
+
+/**
+ * Gets a brief detail string for the asset (context-dependent).
+ */
+function getAssetDetail(asset) {
+ switch (asset.type) {
+ case "Node":
+ return `${asset.cpuCores || 0} CPU · ${formatBytes(asset.ramBytes)}${asset.gpuCount > 0 ? ` · ${asset.gpuCount} GPU` : ""}`;
+ case "Disk":
+ return `${formatBytes(asset.bytes)} · ${asset.storageClass || "—"}`;
+ case "LoadBalancer":
+ return asset.ip || (asset.private ? "Private" : "Public");
+ case "Cloud":
+ return asset.properties?.service || "—";
+ default:
+ return asset.properties?.service || "—";
+ }
+}
+
+/**
+ * AssetsTable — clean professional table with row-click navigation.
+ *
+ * Props:
+ * - assets: array of processed asset objects
+ * - currency: ISO currency code
+ * - windowStr: current window string for detail page
+ */
+const AssetsTable = ({ assets, currency, windowStr }) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(25);
+ const [searchText, setSearchText] = useState("");
+ const [sortKey, setSortKey] = useState("totalCost");
+ const [sortDir, setSortDir] = useState("desc");
+
+ const handleSort = (key) => {
+ if (key === "details") return; // not sortable
+ if (sortKey === key) {
+ setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+ } else {
+ setSortKey(key);
+ setSortDir(key === "totalCost" ? "desc" : "asc");
+ }
+ };
+
+ const getCellValue = (asset, key) => {
+ switch (key) {
+ case "name":
+ return asset.properties?.name || "—";
+ case "type":
+ return asset.type || "—";
+ case "provider":
+ return asset.properties?.provider || "—";
+ case "cluster":
+ return asset.properties?.cluster || "—";
+ case "totalCost":
+ return asset.totalCost || 0;
+ default:
+ return "";
+ }
+ };
+
+ // Filter
+ const filtered = useMemo(() => {
+ if (!searchText) return assets;
+ const q = searchText.toLowerCase();
+ return assets.filter(
+ (a) =>
+ (a.properties?.name || "").toLowerCase().includes(q) ||
+ (a.type || "").toLowerCase().includes(q) ||
+ (a.properties?.provider || "").toLowerCase().includes(q) ||
+ (a.properties?.cluster || "").toLowerCase().includes(q),
+ );
+ }, [assets, searchText]);
+
+ // Sort
+ const sorted = useMemo(() => {
+ return [...filtered].sort((a, b) => {
+ const va = getCellValue(a, sortKey);
+ const vb = getCellValue(b, sortKey);
+ let cmp = 0;
+ if (typeof va === "number" && typeof vb === "number") {
+ cmp = va - vb;
+ } else {
+ cmp = String(va).localeCompare(String(vb));
+ }
+ return sortDir === "asc" ? cmp : -cmp;
+ });
+ }, [filtered, sortKey, sortDir]);
+
+ // Paginate
+ const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+ const safePage = Math.min(page, totalPages);
+ const paginated = useMemo(() => {
+ const start = (safePage - 1) * pageSize;
+ return sorted.slice(start, start + pageSize);
+ }, [sorted, safePage, pageSize]);
+
+ const startItem = sorted.length === 0 ? 0 : (safePage - 1) * pageSize + 1;
+ const endItem = Math.min(safePage * pageSize, sorted.length);
+
+ const openDetail = (asset) => {
+ const id = asset._id || asset.properties?.name || "unknown";
+ navigate(`/assets/${encodeURIComponent(id)}`, {
+ state: { asset, currency, windowStr },
+ });
+ };
+
+ // Generate page numbers with ellipsis
+ const getPageNumbers = () => {
+ if (totalPages <= 7)
+ return Array.from({ length: totalPages }, (_, i) => i + 1);
+ const pages = [];
+ pages.push(1);
+ if (safePage > 3) pages.push("...");
+ for (
+ let i = Math.max(2, safePage - 1);
+ i <= Math.min(totalPages - 1, safePage + 1);
+ i++
+ ) {
+ pages.push(i);
+ }
+ if (safePage < totalPages - 2) pages.push("...");
+ pages.push(totalPages);
+ return pages;
+ };
+
+ return (
+
+ {tile.label}
+
+ {tile.value}
+
+
+ ))}
+
+ {/* Toolbar */}
+
+ );
+};
+
+export default AssetsTable;
diff --git a/src/components/assets/LoadingSkeleton.js b/src/components/assets/LoadingSkeleton.js
new file mode 100644
index 00000000..f5fac7ff
--- /dev/null
+++ b/src/components/assets/LoadingSkeleton.js
@@ -0,0 +1,69 @@
+import React from "react";
+
+/**
+ * LoadingSkeleton — shimmer placeholder that mirrors the Assets page layout.
+ * Shows skeleton tiles, a chart area, filter bar, and table rows.
+ */
+const LoadingSkeleton = () => {
+ return (
+
+
+
+ {/* Table */}
+
+
+ {
+ setSearchText(e.target.value);
+ setPage(1);
+ }}
+ />
+
+ {filtered.length} assets
+
+
+
+
+
+
+ {/* Pagination */}
+ | handleSort(col.key)} + style={{ + width: col.key === "totalCost" ? "120px" : undefined, + }} + > + + {col.label} + {col.key !== "details" && ( + + {sortKey === col.key + ? sortDir === "asc" + ? "↑" + : "↓" + : "↕"} + + )} + + | + ))} ++ | |||||
|---|---|---|---|---|---|---|
| + + {getCellValue(asset, "name")} + + | ++ + {asset.type} + + | +{getCellValue(asset, "provider")} | +{getCellValue(asset, "cluster")} | +{getAssetDetail(asset)} | ++ {toCurrency(asset.totalCost || 0, currency)} + | +→ | +
| + No assets match your search. + | +
+
+ {startItem}–{endItem} of {sorted.length}
+
+
+
+
+
+
+ {getPageNumbers().map((p, i) =>
+ p === "..." ? (
+
+ …
+
+ ) : (
+
+ ),
+ )}
+
+
+
+
+ {/* ── Summary tile skeletons ── */}
+
+ );
+};
+
+export default LoadingSkeleton;
diff --git a/src/components/assets/tokens.js b/src/components/assets/tokens.js
new file mode 100644
index 00000000..92815770
--- /dev/null
+++ b/src/components/assets/tokens.js
@@ -0,0 +1,55 @@
+/**
+ * Constants and configuration for the Assets page.
+ * Follows the tokens pattern used by cloudCost/tokens.js and externalCosts/tokens.js.
+ */
+
+export const windowOptions = [
+ { name: "Entire window", value: "month" },
+ { 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" },
+];
+
+export const assetTypeTabs = [
+ { key: "all", label: "All Assets" },
+ { key: "Node", label: "Nodes" },
+ { key: "Disk", label: "Disks" },
+ { key: "LoadBalancer", label: "Load Balancers" },
+ { key: "Network", label: "Network" },
+ { key: "ClusterManagement", label: "Management" },
+ { key: "Cloud", label: "Cloud" },
+];
+
+// Maps asset type to a Carbon Tag color for visual distinction
+export const assetTypeTagColor = {
+ Node: "blue",
+ Disk: "teal",
+ LoadBalancer: "purple",
+ Network: "cyan",
+ ClusterManagement: "warm-gray",
+ Cloud: "magenta",
+};
+
+// Maps asset category to a human-readable label
+export const categoryLabels = {
+ Compute: "Compute",
+ Storage: "Storage",
+ Network: "Network",
+ Management: "Management",
+ Other: "Other",
+};
+
+// Table column definitions for the main assets table
+export const tableHeaders = [
+ { key: "name", header: "Name" },
+ { key: "type", header: "Type" },
+ { key: "category", header: "Category" },
+ { key: "provider", header: "Provider" },
+ { key: "cluster", header: "Cluster" },
+ { key: "totalCost", header: "Total Cost" },
+];
diff --git a/src/components/cloudCost/cloudCostDetails.js b/src/components/cloudCost/cloudCostDetails.js
index f261e36b..6161eda8 100644
--- a/src/components/cloudCost/cloudCostDetails.js
+++ b/src/components/cloudCost/cloudCostDetails.js
@@ -1,7 +1,6 @@
import * as React from "react";
-import { Modal, Paper, Typography } from "@mui/material";
+import { Modal, Loading } from "@carbon/react";
import Warnings from "../../components/Warnings";
-import CircularProgress from "@mui/material/CircularProgress";
import {
CartesianGrid,
@@ -113,61 +112,62 @@ const CloudCostDetails = ({
});
return (
-
+ {[1, 2, 3, 4, 5].map((i) => (
+
+
+ {/* ── Chart skeleton ── */}
+
+
+
+
+ ))}
+
+
+
+ {/* ── Filter bar skeleton ── */}
+
+
+
+
+
+ {/* Simulated bar chart bars */}
+
+
+ {[65, 85, 45, 70, 90, 55, 75, 60, 80, 50, 70, 40].map((h, i) => (
+
+ ))}
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+ ))}
+
+
+ {/* ── Table skeleton ── */}
+
+
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+ ))}
+
+ {[1, 2, 3, 4, 5, 6, 7, 8].map((row) => (
+
+
+
+
+
+
+
+
+ ))}
+
-
-
-
- {selectedItem}
-
+
+
+
);
};
diff --git a/src/components/cloudCost/controls/cloudCostEditControls.js b/src/components/cloudCost/controls/cloudCostEditControls.js
index f4a2b2ca..ecd5f00f 100644
--- a/src/components/cloudCost/controls/cloudCostEditControls.js
+++ b/src/components/cloudCost/controls/cloudCostEditControls.js
@@ -1,7 +1,4 @@
-import FormControl from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
+import { Dropdown } from "@carbon/react";
import * as React from "react";
@@ -22,56 +19,54 @@ function EditCloudCostControls({
setCurrency,
}) {
return (
-
+
+ {loading && (
+ {selectedItem}
- {loading && ( -
-
- )}
- {!loading && errors.length > 0 && (
-
-
-
-
- )}
- {data && (
-
-
- `${toCurrency(tick)}`} />
-
- `${toCurrency(value ?? 0, currency, 4, true)}`
- }
- />
-
-
- )}
-
-
-
+
+ )}
+ {!loading && errors.length > 0 && (
+
+
+ )}
+ {data && (
+
+
+ `${toCurrency(tick)}`} />
+
+ `${toCurrency(value ?? 0, currency, 4, true)}`
+ }
+ />
+
+
+ )}
+
+
- Breakdown
-
-
-
- Cost Metric
-
-
-
- Currency
-
-
+ o.value === aggregateBy)?.name ||
+ "Select"
+ }
+ items={aggregationOptions}
+ itemToString={(item) => (item ? item.name : "")}
+ selectedItem={aggregationOptions.find((o) => o.value === aggregateBy)}
+ onChange={({ selectedItem }) =>
+ selectedItem && setAggregateBy(selectedItem.value)
+ }
+ size="sm"
+ />
+ o.value === costMetric)?.name ||
+ "Select"
+ }
+ items={costMetricOptions}
+ itemToString={(item) => (item ? item.name : "")}
+ selectedItem={costMetricOptions.find((o) => o.value === costMetric)}
+ onChange={({ selectedItem }) =>
+ selectedItem && setCostMetric(selectedItem.value)
+ }
+ size="sm"
+ />
+ ({ value: c, name: c })) || []}
+ itemToString={(item) => (item ? item.name : "")}
+ selectedItem={{ value: currency, name: currency }}
+ onChange={({ selectedItem }) =>
+ selectedItem && setCurrency(selectedItem.value)
+ }
+ size="sm"
+ />
);
}
diff --git a/src/components/cloudCost/tokens.js b/src/components/cloudCost/tokens.js
index 91afbfa8..ad16ef72 100644
--- a/src/components/cloudCost/tokens.js
+++ b/src/components/cloudCost/tokens.js
@@ -1,4 +1,5 @@
const windowOptions = [
+ { name: "Entire window", value: "month" },
{ name: "Today", value: "today" },
{ name: "Yesterday", value: "yesterday" },
{ name: "Last 24h", value: "24h" },
diff --git a/src/components/externalCosts/externalCostDetailModal.js b/src/components/externalCosts/externalCostDetailModal.js
index e3dbf786..6e2daa5a 100644
--- a/src/components/externalCosts/externalCostDetailModal.js
+++ b/src/components/externalCosts/externalCostDetailModal.js
@@ -1,93 +1,57 @@
-import { Modal, Paper } from "@mui/material";
-import {
- TableContainer,
- TableCell,
- TableRow,
- Table,
- TableBody,
-} from "@mui/material";
+import { Modal } from "@carbon/react";
// for now, we can assume that the "Name" is resourceType
-export const ExternalCostDetails = ({ row, onClose }) => (
-
+export const ExternalCostDetails = ({ row, onClose }) => {
+ const details = [
+ { label: "Account Name", value: row.account_name },
+ { label: "Aggregate", value: row.aggregate },
+ { label: "Charge Category", value: row.charge_category },
+ { label: "Cost", value: row.cost },
+ { label: "Cost Source", value: row.cost_source },
+ { label: "Cost Type", value: row.cost_type },
+ { label: "Description", value: row.description },
+ { label: "Domain", value: row.domain },
+ { label: "ID", value: row.id },
+ { label: "List Unit Price", value: row.list_unit_price },
+ { label: "Provider ID", value: row.provider_id },
+ { label: "Resource Name", value: row.resource_name },
+ { label: "Resource Type", value: row.resource_type },
+ { label: "Usage Quantity", value: row.usage_quantity },
+ { label: "Usage Unit", value: row.usage_unit },
+ { label: "Zone", value: row.zone },
+ ];
+
+ return (
-
-
-
-
-
-
+
-
-);
+ );
+};
diff --git a/src/components/externalCosts/externalCostsControls.js b/src/components/externalCosts/externalCostsControls.js
index 7289a961..847ad378 100644
--- a/src/components/externalCosts/externalCostsControls.js
+++ b/src/components/externalCosts/externalCostsControls.js
@@ -1,7 +1,4 @@
-import FormControl from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
+import { Dropdown } from "@carbon/react";
import * as React from "react";
@@ -21,44 +18,41 @@ function ExternalCostsControls({
setCostType,
}) {
return (
-
+
+
+ {details.map((item, idx) => (
+
+
| + {item.label} + | +{item.value} | +
+
- Breakdown
-
-
-
- Cost Type
-
-
+ o.value === aggregateBy)?.name ||
+ "Select"
+ }
+ items={aggregationOptions}
+ itemToString={(item) => (item ? item.name : "")}
+ selectedItem={aggregationOptions.find((o) => o.value === aggregateBy)}
+ onChange={({ selectedItem }) =>
+ selectedItem && setAggregateBy(selectedItem.value)
+ }
+ size="sm"
+ />
+ o.value === costType)?.name || "Select"
+ }
+ items={costTypeOptions}
+ itemToString={(item) => (item ? item.name : "")}
+ selectedItem={costTypeOptions.find((o) => o.value === costType)}
+ onChange={({ selectedItem }) =>
+ selectedItem && setCostType(selectedItem.value)
+ }
+ size="sm"
+ />
);
}
diff --git a/src/components/externalCosts/tokens.js b/src/components/externalCosts/tokens.js
index ec789d37..5b5faebc 100644
--- a/src/components/externalCosts/tokens.js
+++ b/src/components/externalCosts/tokens.js
@@ -4,6 +4,7 @@ const costTypeOptions = [
{ name: "List", value: "list" },
];
const windowOptions = [
+ { name: "Entire window", value: "month" },
{ name: "Today", value: "today" },
{ name: "Yesterday", value: "yesterday" },
{ name: "Last 24h", value: "24h" },
diff --git a/src/css/allocations.css b/src/css/allocations.css
new file mode 100644
index 00000000..45f21289
--- /dev/null
+++ b/src/css/allocations.css
@@ -0,0 +1,1220 @@
+/* ═══════════════════════════════════════════════════════
+ Allocations Page Styles
+ Matches the Assets page design with full dark-mode support
+ ═══════════════════════════════════════════════════════ */
+
+/* ── Page layout ──────────────────────────────────── */
+
+.alloc-page {
+ padding: 0 24px 24px;
+ max-width: 1400px;
+ margin: 0 auto;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+/* ── Header controls ──────────────────────────────── */
+
+.alloc-header-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.alloc-header-controls .cds--dropdown {
+ min-width: 150px;
+}
+
+.alloc-header-controls .cds--list-box {
+ min-height: 36px;
+ max-height: 36px;
+}
+
+.alloc-header-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color, #e0e0e0);
+ margin: 0 1px;
+ flex-shrink: 0;
+}
+
+.currency-select {
+ appearance: none;
+ -webkit-appearance: none;
+ background-color: var(--dropdown-bg, #ffffff);
+ color: var(--text-primary, #161616);
+ border: 1px solid var(--dropdown-border, #d1d5db);
+ border-radius: 8px;
+ padding: 6px 32px 6px 12px;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ font-family: inherit;
+ cursor: pointer;
+ min-width: 90px;
+ height: 36px;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+ background-size: 12px;
+}
+
+.currency-select:hover {
+ border-color: var(--dropdown-border-hover, #9ca3af);
+}
+
+.currency-select:focus {
+ outline: none;
+ border-color: var(--accent-primary, #3b82f6);
+ box-shadow: 0 0 0 3px var(--dropdown-focus-ring, rgba(59, 130, 246, 0.25));
+}
+
+.currency-select option {
+ padding: 10px 14px;
+ font-size: 0.875rem;
+ background: var(--dropdown-menu-bg, #ffffff);
+ color: var(--dropdown-menu-text, #374151);
+}
+
+.rates-badge {
+ font-size: 16px;
+ color: var(--text-secondary, #6f6f6f);
+ line-height: 1;
+}
+
+.export-csv-btn {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ padding: 5px 12px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-primary, #161616);
+ background: var(--button-bg, #f4f4f5);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 6px;
+ cursor: pointer;
+ transition:
+ background 0.15s ease,
+ border-color 0.15s ease,
+ color 0.15s ease,
+ box-shadow 0.15s ease;
+ height: 32px;
+ white-space: nowrap;
+}
+
+.export-csv-btn:hover:not(:disabled) {
+ background: var(--button-hover-bg, #e5e5e5);
+ border-color: var(--border-hover, #d1d5db);
+ color: var(--text-primary, #161616);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.export-csv-btn:active:not(:disabled) {
+ background: var(--bg-hover, #ddd);
+ transform: translateY(0.5px);
+}
+
+.export-csv-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.export-csv-btn svg {
+ flex-shrink: 0;
+}
+
+.assets-refresh-btn {
+ background: var(--button-bg, #f4f4f5);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 6px;
+ font-size: 16px;
+ cursor: pointer;
+ color: var(--text-secondary, #6f6f6f);
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ background 0.15s ease,
+ border-color 0.15s ease,
+ color 0.15s ease,
+ box-shadow 0.15s ease;
+}
+
+.assets-refresh-btn:hover {
+ background: var(--button-hover-bg, #e5e5e5);
+ border-color: var(--border-hover, #d1d5db);
+ color: var(--text-primary, #161616);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.assets-refresh-btn:active {
+ background: var(--bg-hover, #ddd);
+ transform: translateY(0.5px);
+}
+
+/* ── Notification ─────────────────────────────────── */
+
+.alloc-notification {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 16px;
+ background: #0043ce22;
+ border: 1px solid #0f62fe44;
+ border-radius: 6px;
+ font-size: 13px;
+ color: var(--text-primary, #161616);
+ margin-bottom: 16px;
+}
+
+.alloc-notif-icon {
+ font-size: 16px;
+ color: #0f62fe;
+}
+
+.alloc-notif-dismiss {
+ margin-left: auto;
+ background: none;
+ border: none;
+ color: var(--text-secondary, #6f6f6f);
+ font-size: 14px;
+ cursor: pointer;
+ padding: 4px;
+}
+
+/* ── Subtitle / Title ─────────────────────────────── */
+
+.alloc-subtitle-row {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+
+.alloc-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ margin: 0 0 4px;
+ text-transform: capitalize;
+}
+
+/* ── Breadcrumbs ──────────────────────────────────── */
+
+.alloc-breadcrumbs {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ flex-wrap: wrap;
+}
+
+.alloc-bc-item {
+ background: none;
+ border: none;
+ color: var(--accent-primary, #0f62fe);
+ cursor: pointer;
+ font-size: 12px;
+ padding: 3px 8px;
+ border-radius: 4px;
+ transition: all 0.15s ease;
+ font-weight: 500;
+}
+
+.alloc-bc-item:hover {
+ background: var(--accent-light, #eef4ff);
+ color: var(--accent-hover, #0353e9);
+ text-decoration: underline;
+}
+
+.alloc-bc-item--active {
+ font-weight: 600;
+}
+
+.alloc-bc-sep {
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-bc-current {
+ color: var(--text-secondary, #6f6f6f);
+ font-style: italic;
+ text-transform: capitalize;
+}
+
+/* ── Summary Tiles ────────────────────────────────── */
+
+.alloc-tiles-row {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 12px;
+ margin-bottom: 20px;
+}
+
+.alloc-tile {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 10px;
+ padding: 16px 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ transition: all 0.2s ease;
+}
+
+.alloc-tile:hover {
+ box-shadow: var(--card-hover-shadow, 0 8px 16px rgba(0, 0, 0, 0.06));
+ border-color: var(--border-hover, #d1d5db);
+ transform: translateY(-1px);
+}
+
+.alloc-tile-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-tile-value {
+ font-size: 20px;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+}
+
+/* ── Chart card ───────────────────────────────────── */
+
+.alloc-chart-card {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 8px;
+ padding: 16px;
+ margin-bottom: 20px;
+}
+
+.alloc-chart-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.alloc-chart-controls {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+/* ── View toggle (Daily / Entire window) ──────────── */
+.alloc-chart-controls .assets-view-toggle {
+ display: flex;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ overflow: hidden;
+}
+.alloc-chart-controls .view-toggle-btn {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: var(--card-bg);
+ border: none;
+ border-right: 1px solid var(--border-color);
+ padding: 4px 10px;
+ font-size: 0.72rem;
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.12s ease;
+ white-space: nowrap;
+}
+.alloc-chart-controls .view-toggle-btn:last-child {
+ border-right: none;
+}
+.alloc-chart-controls .view-toggle-btn:hover {
+ background: var(--button-hover-bg);
+ color: var(--text-primary);
+}
+.alloc-chart-controls .view-toggle-btn.active {
+ background: var(--accent-primary);
+ color: #ffffff;
+}
+
+.alloc-chart-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ margin: 0;
+ text-transform: capitalize;
+}
+
+.alloc-chart-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--text-secondary, #6f6f6f);
+ cursor: pointer;
+ padding: 4px 10px;
+ border-radius: 4px;
+ transition: all 0.15s ease;
+}
+
+.alloc-chart-toggle:hover {
+ background: var(--bg-hover, #f8faff);
+ color: var(--text-primary, #161616);
+}
+
+.alloc-chart-toggle input {
+ accent-color: var(--accent-primary, #0f62fe);
+ cursor: pointer;
+}
+
+.alloc-chart-body {
+ min-height: 260px;
+}
+
+/* ── Chart tooltip ────────────────────────────────── */
+
+.alloc-chart-tooltip {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 6px;
+ padding: 10px 14px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ font-size: 12px;
+ min-width: 160px;
+}
+
+.alloc-chart-tooltip-title {
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ margin-bottom: 4px;
+}
+
+.alloc-chart-tooltip-total {
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--text-primary, #161616);
+ margin-bottom: 8px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.alloc-chart-tooltip-items {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.alloc-chart-tooltip-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.alloc-tooltip-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.alloc-tooltip-name {
+ flex: 1;
+ color: var(--text-secondary, #6f6f6f);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 140px;
+}
+
+.alloc-tooltip-value {
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ font-variant-numeric: tabular-nums;
+}
+
+/* ── Table ─────────────────────────────────────────── */
+
+.alloc-table-wrap {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 16px;
+}
+
+.alloc-table-toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.alloc-table-search {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--text-secondary, #6f6f6f);
+ background: var(--bg-tertiary, #f3f4f6);
+ border: 1px solid transparent;
+ border-radius: 6px;
+ padding: 4px 10px;
+ transition: all 0.15s ease;
+}
+
+.alloc-table-search:focus-within {
+ border-color: var(--accent-primary, #0f62fe);
+ background: var(--card-bg, #fff);
+ box-shadow: 0 0 0 1px var(--accent-primary, #0f62fe);
+}
+
+.alloc-table-search input {
+ background: transparent;
+ border: none;
+ outline: none;
+ font-size: 13px;
+ color: var(--text-primary, #161616);
+ width: 200px;
+}
+
+.alloc-table-search input::placeholder {
+ color: var(--text-tertiary, #a3a3a3);
+}
+
+.alloc-table-count {
+ font-size: 12px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-tbl {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+ line-height: 1.5;
+}
+
+.alloc-tbl thead {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+}
+
+.alloc-tbl th {
+ padding: 14px 18px;
+ text-align: left;
+ font-weight: 600;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.6px;
+ color: var(--text-secondary, #6f6f6f);
+ background: var(--table-header-bg, #f4f4f4);
+ border-bottom: 2px solid var(--border-color, #e0e0e0);
+ cursor: pointer;
+ user-select: none;
+ white-space: nowrap;
+ transition:
+ color 0.15s ease,
+ background 0.15s ease;
+}
+
+.alloc-tbl th:hover {
+ color: var(--text-primary, #161616);
+ background: var(--button-hover-bg, #e5e5e5);
+}
+
+.alloc-tbl th.th-right {
+ text-align: right;
+}
+
+.alloc-tbl th.th-action {
+ width: 30px;
+ cursor: default;
+}
+
+.th-inner {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.sort-arrow {
+ font-size: 10px;
+ opacity: 0.3;
+ transition: opacity 0.15s;
+}
+
+.sort-arrow.active {
+ opacity: 1;
+ color: #0f62fe;
+}
+
+.alloc-tbl-row {
+ border-bottom: 1px solid var(--border-light, #f0f0f0);
+ transition:
+ background-color 0.15s ease,
+ box-shadow 0.15s ease;
+ height: 52px;
+}
+
+.alloc-tbl-row--clickable {
+ cursor: pointer;
+}
+
+.alloc-tbl-row--clickable:hover {
+ background: var(--table-row-hover, #f8faff);
+}
+
+.alloc-tbl-row--clickable:hover .alloc-name {
+ color: var(--accent-primary, #0f62fe);
+}
+
+.alloc-tbl-row--clickable:active {
+ background: var(--accent-light, #eef4ff);
+}
+
+.alloc-tbl-row--total {
+ background: var(--table-header-bg, #f4f4f4);
+ font-weight: 600;
+}
+
+.alloc-tbl-row--special {
+ opacity: 0.65;
+ font-style: italic;
+}
+
+.alloc-td-name {
+ padding: 14px 18px;
+ max-width: 300px;
+}
+
+.alloc-name {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--text-primary, #161616);
+ font-weight: 500;
+ font-size: 0.875rem;
+ line-height: 1.4;
+ transition: color 0.15s ease;
+}
+
+.alloc-name--total {
+ font-weight: 700;
+}
+
+.alloc-td-cost {
+ padding: 14px 18px;
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+ font-size: 0.875rem;
+ color: var(--text-primary, #161616);
+ white-space: nowrap;
+}
+
+.alloc-td-cost--total {
+ font-weight: 700;
+ color: #0f62fe;
+}
+
+.alloc-td-arrow {
+ padding: 14px 10px;
+ text-align: center;
+ font-size: 16px;
+ color: var(--text-secondary, #6f6f6f);
+ width: 48px;
+}
+
+.alloc-drill-btn {
+ background: transparent;
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 4px;
+ color: var(--accent-primary, #0f62fe);
+ cursor: pointer;
+ font-size: 14px;
+ padding: 2px 8px;
+ transition: all 0.15s ease;
+ line-height: 1;
+}
+
+.alloc-drill-btn:hover {
+ background: var(--accent-primary, #0f62fe);
+ color: #fff;
+ border-color: var(--accent-primary, #0f62fe);
+}
+
+.alloc-td-empty {
+ padding: 40px;
+ text-align: center;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+/* ── Pagination ───────────────────────────────────── */
+
+.alloc-tbl-pagination {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 14px;
+ border-top: 1px solid var(--border-color, #e0e0e0);
+ font-size: 12px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-pg-info {
+ font-variant-numeric: tabular-nums;
+}
+
+.alloc-pg-controls {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.alloc-pg-select {
+ background: var(--card-bg, #fff);
+ color: var(--text-primary, #161616);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 4px;
+ padding: 3px 6px;
+ font-size: 11px;
+ cursor: pointer;
+ margin-right: 8px;
+}
+
+.alloc-pg-btn {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 4px;
+ padding: 3px 8px;
+ font-size: 12px;
+ cursor: pointer;
+ color: var(--text-primary, #161616);
+ transition: all 0.15s ease;
+ min-width: 28px;
+}
+
+.alloc-pg-btn:hover:not(:disabled) {
+ background: var(--accent-light, #eef4ff);
+ border-color: var(--accent-primary, #0f62fe);
+ color: var(--accent-primary, #0f62fe);
+}
+
+.alloc-pg-btn:disabled {
+ opacity: 0.35;
+ cursor: not-allowed;
+}
+
+.alloc-pg-active {
+ background: #0f62fe !important;
+ color: #fff !important;
+ border-color: #0f62fe !important;
+}
+
+/* ── Last updated ─────────────────────────────────── */
+
+.alloc-last-updated {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 11px;
+ color: var(--text-secondary, #6f6f6f);
+ padding: 8px 0;
+}
+
+.alloc-auto-badge {
+ background: #42be65;
+ color: #fff;
+ font-size: 9px;
+ font-weight: 700;
+ padding: 2px 6px;
+ border-radius: 3px;
+ letter-spacing: 0.5px;
+}
+
+/* ── Empty state ──────────────────────────────────── */
+
+.alloc-empty {
+ text-align: center;
+ padding: 80px 20px;
+ color: var(--text-secondary, #6f6f6f);
+ font-size: 14px;
+}
+
+/* ═══════════════════════════════════════════════════════
+ Detail Page
+ ═══════════════════════════════════════════════════════ */
+
+.alloc-detail {
+ padding-bottom: 24px;
+}
+
+/* Back + title block as a card */
+.alloc-detail-top {
+ background: var(--card-bg, #fff);
+ padding: 1.25rem 1.5rem;
+ border-radius: 12px;
+ border: 1px solid var(--border-color, #e0e0e0);
+ box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
+ margin-bottom: 20px;
+}
+
+/* Carbon Button override for back button */
+.alloc-detail-back-btn.cds--btn {
+ color: var(--accent-primary, #0f62fe) !important;
+ font-size: 13px !important;
+ font-weight: 600 !important;
+ padding: 6px 14px 6px 10px !important;
+ margin-bottom: 14px;
+ border-radius: 6px !important;
+ transition: all 0.15s ease !important;
+ min-height: 36px;
+ background: var(--button-bg, #f4f4f5) !important;
+ border: 1px solid transparent !important;
+}
+
+.alloc-detail-back-btn.cds--btn:hover {
+ background: var(--accent-light, #eef4ff) !important;
+ color: var(--accent-hover, #0353e9) !important;
+}
+
+.alloc-detail-back-btn.cds--btn svg {
+ fill: currentColor !important;
+}
+
+.alloc-detail-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin: 0;
+}
+
+.alloc-detail-meta {
+ display: flex;
+ gap: 1.25rem;
+ margin-top: 0.625rem;
+ padding-top: 0.625rem;
+ border-top: 1px solid var(--border-light, #f0f0f0);
+ font-size: 0.8125rem;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-detail-badge {
+ background: var(--accent-light, #eef4ff);
+ color: var(--accent-primary, #0f62fe);
+ font-size: 0.6875rem;
+ font-weight: 600;
+ padding: 3px 10px;
+ border-radius: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.4px;
+}
+
+.alloc-detail-name {
+ font-size: 1.375rem;
+ font-weight: 700;
+ color: var(--text-primary, #161616);
+ margin: 0;
+ letter-spacing: -0.3px;
+ line-height: 1.2;
+}
+
+/* Cost cards */
+.alloc-detail-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 12px;
+ margin-bottom: 20px;
+}
+
+.alloc-detail-card {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 10px;
+ padding: 16px 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ transition: all 0.2s ease;
+}
+
+.alloc-detail-card:hover {
+ box-shadow: var(--card-hover-shadow, 0 8px 16px rgba(0, 0, 0, 0.06));
+ transform: translateY(-1px);
+}
+
+.alloc-detail-card--primary {
+ border-left: 3px solid #0f62fe;
+}
+
+.alloc-card-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-card-value {
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--text-primary, #161616);
+ font-variant-numeric: tabular-nums;
+}
+
+/* Charts row */
+.alloc-detail-charts {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ margin-bottom: 20px;
+}
+
+@media (max-width: 900px) {
+ .alloc-detail-charts {
+ grid-template-columns: 1fr;
+ }
+}
+
+.alloc-detail-chart-card {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 10px;
+ padding: 18px;
+ transition: box-shadow 0.2s ease;
+}
+
+.alloc-detail-chart-card:hover {
+ box-shadow: var(--card-hover-shadow, 0 8px 16px rgba(0, 0, 0, 0.06));
+}
+
+.alloc-detail-section-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ margin: 0 0 12px;
+}
+
+/* Efficiency bars */
+.alloc-detail-info-card {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 8px;
+ padding: 16px;
+ margin-bottom: 16px;
+}
+
+.alloc-eff-bars {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.alloc-eff-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.alloc-eff-label {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary, #6f6f6f);
+ width: 50px;
+ flex-shrink: 0;
+}
+
+.alloc-eff-bar-track {
+ flex: 1;
+ height: 10px;
+ background: var(--table-header-bg, #f4f4f4);
+ border-radius: 5px;
+ overflow: hidden;
+}
+
+.alloc-eff-bar-fill {
+ height: 100%;
+ border-radius: 5px;
+ transition: width 0.5s ease;
+}
+
+.alloc-eff-val {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ width: 50px;
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+
+/* Info grid */
+.alloc-info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 12px;
+}
+
+.alloc-info-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 12px;
+ background: var(--table-header-bg, #f4f4f4);
+ border-radius: 6px;
+}
+
+.alloc-info-label {
+ font-size: 12px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-info-value {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary, #161616);
+ font-variant-numeric: tabular-nums;
+}
+
+.alloc-info-value--total {
+ color: #0f62fe;
+ font-size: 14px;
+}
+
+/* Resource metrics */
+.alloc-metrics-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ gap: 12px;
+}
+
+.alloc-metric-card {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--border-color, #e0e0e0);
+ border-radius: 6px;
+ padding: 12px 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.alloc-metric-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text-secondary, #6f6f6f);
+}
+
+.alloc-metric-value {
+ font-size: 16px;
+ font-weight: 700;
+ color: #0f62fe;
+ font-variant-numeric: tabular-nums;
+}
+
+/* ═══════════════════════════════════════════════════════
+ Dark mode overrides
+ ═══════════════════════════════════════════════════════ */
+
+[data-theme="dark"] .alloc-notification {
+ background: #0043ce33;
+ border-color: #0f62fe55;
+}
+
+[data-theme="dark"] .alloc-detail-badge {
+ background: #0f62fe33;
+}
+
+[data-theme="dark"] .alloc-tbl th {
+ background: var(--table-header-bg, #262626);
+}
+
+[data-theme="dark"] .alloc-tbl-row--total {
+ background: var(--table-header-bg, #262626);
+}
+
+[data-theme="dark"] .alloc-info-item {
+ background: var(--table-header-bg, #262626);
+}
+
+[data-theme="dark"] .alloc-tile:hover {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .alloc-chart-tooltip {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Scrollbar for table */
+.alloc-table-wrap .table-scroll {
+ max-height: 600px;
+ overflow-y: auto;
+}
+
+.alloc-table-wrap .table-scroll::-webkit-scrollbar {
+ width: 6px;
+}
+
+.alloc-table-wrap .table-scroll::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.alloc-table-wrap .table-scroll::-webkit-scrollbar-thumb {
+ background: var(--dropdown-scroll-thumb, #c6c6c6);
+ border-radius: 3px;
+}
+
+.alloc-table-wrap .table-scroll::-webkit-scrollbar-thumb:hover {
+ background: var(--dropdown-scroll-thumb-hover, #a8a8a8);
+}
+
+/* Firefox */
+.alloc-table-wrap .table-scroll {
+ scrollbar-width: thin;
+ scrollbar-color: var(--dropdown-scroll-thumb, #c6c6c6) transparent;
+}
+
+/* ── Loading skeleton (shared shimmer) ─────────────── */
+@keyframes alloc-shimmer {
+ 0% {
+ background-position: -400px 0;
+ }
+ 100% {
+ background-position: 400px 0;
+ }
+}
+
+.skeleton-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+}
+
+.skeleton-line {
+ border-radius: 6px;
+ background: linear-gradient(
+ 90deg,
+ var(--skeleton-base, #e8e8e8) 0%,
+ var(--skeleton-shine, #f5f5f5) 40%,
+ var(--skeleton-base, #e8e8e8) 80%
+ );
+ background-size: 800px 100%;
+ animation: alloc-shimmer 1.6s ease-in-out infinite;
+}
+.skeleton-line--xs {
+ width: 60px;
+ height: 12px;
+}
+.skeleton-line--sm {
+ width: 80px;
+ height: 12px;
+}
+.skeleton-line--md {
+ width: 120px;
+ height: 14px;
+}
+.skeleton-line--lg {
+ width: 160px;
+ height: 28px;
+}
+.skeleton-line--col {
+ width: 100%;
+ height: 12px;
+}
+.skeleton-line--name {
+ width: 45%;
+ height: 14px;
+}
+.skeleton-line--pill {
+ width: 60px;
+ height: 22px;
+ border-radius: 12px;
+}
+.skeleton-line--right {
+ margin-left: auto;
+}
+
+.skeleton-tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 12px;
+}
+.skeleton-tile {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--card-border, #e5e7eb);
+ border-radius: 10px;
+ padding: 16px 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.skeleton-chart {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--card-border, #e5e7eb);
+ border-radius: 8px;
+ overflow: hidden;
+}
+.skeleton-chart-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light, #f0f0f0);
+}
+.skeleton-chart-body {
+ padding: 1.5rem 1.25rem;
+ height: 200px;
+ display: flex;
+ align-items: flex-end;
+}
+.skeleton-bars {
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ width: 100%;
+ height: 100%;
+}
+.skeleton-bar {
+ flex: 1;
+ border-radius: 4px 4px 0 0;
+ background: linear-gradient(
+ 90deg,
+ var(--skeleton-base, #e8e8e8) 0%,
+ var(--skeleton-shine, #f5f5f5) 40%,
+ var(--skeleton-base, #e8e8e8) 80%
+ );
+ background-size: 800px 100%;
+ animation: alloc-shimmer 1.6s ease-in-out infinite;
+}
+
+.skeleton-table {
+ background: var(--card-bg, #fff);
+ border: 1px solid var(--card-border, #e5e7eb);
+ border-radius: 8px;
+ overflow: hidden;
+}
+.skeleton-table-header {
+ display: grid;
+ gap: 1rem;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light, #f0f0f0);
+}
+.skeleton-table-row {
+ display: grid;
+ gap: 1rem;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light, #f0f0f0);
+ align-items: center;
+}
+.skeleton-table-row:last-child {
+ border-bottom: none;
+}
diff --git a/src/css/assets.css b/src/css/assets.css
new file mode 100644
index 00000000..b778f682
--- /dev/null
+++ b/src/css/assets.css
@@ -0,0 +1,1874 @@
+/*
+ * Assets page — clean billing-dashboard design.
+ * Scoped under .assets-page to avoid MUI conflicts.
+ */
+
+/* ── Base ───────────────────────────────────────────── */
+.assets-page {
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ "Helvetica Neue",
+ Arial,
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ padding: 1rem;
+ max-width: 1440px;
+ color: var(--text-primary);
+}
+
+@media (max-width: 768px) {
+ .assets-page {
+ padding: 0.5rem;
+ }
+}
+
+/* ── Header controls ───────────────────────────────── */
+.assets-header-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+ .assets-header-controls {
+ gap: 0.375rem;
+ }
+}
+
+.assets-header-controls .cds--dropdown {
+ min-width: 150px;
+}
+
+.assets-header-controls .cds--list-box {
+ min-height: 36px;
+ max-height: 36px;
+}
+
+.assets-window-select {
+ appearance: none;
+ -webkit-appearance: none;
+ border: 1px solid var(--dropdown-border);
+ border-radius: 8px;
+ padding: 8px 32px 8px 14px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--text-primary);
+ background-color: var(--dropdown-bg);
+ cursor: pointer;
+ min-height: 36px;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+ background-size: 12px;
+}
+.assets-window-select:hover {
+ border-color: var(--dropdown-border-hover);
+}
+.assets-window-select:focus {
+ outline: none;
+ border-color: var(--accent-primary);
+ box-shadow: 0 0 0 3px var(--dropdown-focus-ring, rgba(59, 130, 246, 0.25));
+}
+.assets-window-select option {
+ padding: 10px 14px;
+ font-size: 0.875rem;
+ background: var(--dropdown-menu-bg);
+ color: var(--dropdown-menu-text);
+}
+.assets-refresh-toggle {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+ user-select: none;
+}
+.assets-refresh-toggle input {
+ accent-color: var(--accent-primary);
+}
+.refresh-label {
+ white-space: nowrap;
+}
+.assets-refresh-btn {
+ background: var(--button-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 4px 10px;
+ font-size: 1rem;
+ cursor: pointer;
+ color: var(--text-secondary);
+ line-height: 1;
+ transition:
+ background 0.15s ease,
+ border-color 0.15s ease,
+ color 0.15s ease,
+ box-shadow 0.15s ease;
+}
+.assets-refresh-btn:hover {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+ color: var(--text-primary);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.assets-refresh-btn:active {
+ background: var(--bg-hover);
+ transform: translateY(0.5px);
+}
+
+/* ── Demo notification ─────────────────────────────── */
+.assets-page .assets-notification {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ background: var(--accent-light);
+ border-left: 3px solid var(--accent-primary);
+ padding: 0.625rem 1rem;
+ margin-bottom: 1.25rem;
+ font-size: 0.8125rem;
+ color: var(--text-primary);
+ border-radius: 4px;
+}
+.assets-page .assets-notification .notif-icon {
+ font-size: 1rem;
+ color: var(--accent-primary);
+ flex-shrink: 0;
+}
+.assets-page .assets-notification strong {
+ font-weight: 600;
+ margin-right: 0.25rem;
+}
+.assets-page .assets-notification .notif-dismiss {
+ margin-left: auto;
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--text-secondary);
+ font-size: 1.1rem;
+ padding: 2px 6px;
+ line-height: 1;
+}
+
+/* ── Cost tiles (billing dashboard style) ──────────── */
+.cost-tiles-row {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.25rem;
+ margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+ .cost-tiles-row {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .cost-tiles-row {
+ grid-template-columns: 1fr;
+ gap: 0.75rem;
+ }
+}
+
+.cost-tile {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 12px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ box-shadow: var(--card-shadow);
+ transition: all 0.2s ease-in-out;
+}
+.cost-tile:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--card-hover-shadow);
+ border-color: var(--border-hover);
+}
+.cost-tile-value {
+ font-size: 2rem;
+ font-weight: 700;
+ letter-spacing: -0.75px;
+ font-variant-numeric: tabular-nums;
+ line-height: 1.1;
+ margin-top: 0.25rem;
+}
+.cost-tile-label {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.75px;
+ font-weight: 600;
+}
+
+@media (max-width: 640px) {
+ .cost-tile {
+ padding: 1rem;
+ }
+ .cost-tile-value {
+ font-size: 1.5rem;
+ }
+}
+
+/* ── Cost chart ────────────────────────────────────── */
+.asset-cost-chart {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 1.25rem;
+}
+.chart-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light);
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+@media (max-width: 640px) {
+ .chart-header {
+ padding: 0.75rem 1rem;
+ }
+}
+
+.chart-title {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+}
+.chart-controls {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+.chart-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+ user-select: none;
+}
+.chart-toggle input {
+ accent-color: var(--accent-primary);
+ width: 14px;
+ height: 14px;
+}
+.toggle-label {
+ white-space: nowrap;
+}
+.chart-type-switch {
+ display: flex;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ overflow: hidden;
+}
+.chart-type-btn {
+ background: var(--card-bg);
+ border: none;
+ border-right: 1px solid var(--border-color);
+ padding: 4px 8px;
+ font-size: 0.8125rem;
+ cursor: pointer;
+ color: var(--text-secondary);
+ line-height: 1;
+ transition: all 0.2s ease;
+}
+.chart-type-btn:last-child {
+ border-right: none;
+}
+.chart-type-btn.active {
+ background: var(--accent-primary);
+ color: #ffffff;
+}
+.chart-body {
+ padding: 0.75rem 0.5rem 0.5rem;
+}
+
+/* Chart tooltip */
+.chart-tooltip {
+ background: var(--chart-tooltip-bg);
+ border: 1px solid var(--chart-tooltip-border);
+ border-radius: 6px;
+ padding: 0.625rem 0.875rem;
+ box-shadow: var(--card-shadow);
+ min-width: 160px;
+}
+.chart-tooltip-title {
+ font-size: 0.6875rem;
+ color: var(--text-secondary);
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+.chart-tooltip-total {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin-bottom: 6px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid var(--border-light);
+}
+.chart-tooltip-items {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+.chart-tooltip-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.75rem;
+}
+.tooltip-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.tooltip-name {
+ color: var(--text-secondary);
+ flex: 1;
+}
+.tooltip-value {
+ font-weight: 500;
+ color: var(--text-primary);
+ font-variant-numeric: tabular-nums;
+}
+
+/* ── Filter tabs ───────────────────────────────────── */
+.assets-filter-bar {
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+}
+.assets-filter-btn {
+ background: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 0.3125rem 0.875rem;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.12s ease;
+ font-family: inherit;
+ line-height: 1.4;
+ white-space: nowrap;
+}
+.assets-filter-btn:hover {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+ color: var(--text-primary);
+}
+.assets-filter-btn.active {
+ background: var(--accent-primary);
+ border-color: var(--accent-primary);
+ color: #ffffff;
+}
+.assets-filter-btn .filter-count {
+ display: inline-block;
+ background: rgba(0, 0, 0, 0.08);
+ border-radius: 10px;
+ padding: 0 0.375rem;
+ margin-left: 0.375rem;
+ font-size: 0.6875rem;
+ font-weight: 600;
+ line-height: 1.5;
+ min-width: 1rem;
+ text-align: center;
+}
+.assets-filter-btn.active .filter-count {
+ background: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Table ─────────────────────────────────────────── */
+.assets-table-wrap {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 12px;
+ overflow: hidden;
+ margin-bottom: 1.5rem;
+ box-shadow: var(--card-shadow);
+}
+
+/* Toolbar */
+.table-toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid var(--border-color);
+ background: var(--card-bg);
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+@media (max-width: 640px) {
+ .table-toolbar {
+ padding: 0.75rem 1rem;
+ }
+}
+
+.table-search {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex: 1;
+ max-width: 400px;
+ background: var(--bg-tertiary);
+ padding: 8px 12px;
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ transition: all 0.2s ease;
+}
+
+@media (max-width: 768px) {
+ .table-search {
+ max-width: 100%;
+ }
+}
+
+.table-search:focus-within {
+ background: var(--card-bg);
+ border-color: var(--accent-primary);
+ box-shadow: 0 0 0 2px var(--accent-light);
+}
+.search-svg {
+ color: var(--text-tertiary);
+ flex-shrink: 0;
+}
+.table-search input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ font-size: 0.875rem;
+ color: var(--text-primary);
+ outline: none;
+ font-family: inherit;
+ font-weight: 400;
+}
+.table-search input::placeholder {
+ color: var(--text-tertiary);
+}
+.table-count {
+ font-size: 0.8125rem;
+ color: var(--text-secondary);
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+/* Table scroll wrapper */
+.table-scroll {
+ overflow-x: auto;
+ scrollbar-width: thin;
+ scrollbar-color: var(--border-color) transparent;
+}
+.table-scroll::-webkit-scrollbar {
+ height: 6px;
+}
+.table-scroll::-webkit-scrollbar-track {
+ background: transparent;
+}
+.table-scroll::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 3px;
+}
+
+/* Clean table */
+.assets-tbl {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ font-size: 0.875rem;
+}
+.assets-tbl thead {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+}
+.assets-tbl th {
+ background: var(--table-header-bg);
+ text-align: left;
+ padding: 1rem 1.5rem;
+ font-weight: 600;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.75px;
+ color: var(--text-secondary);
+ border-bottom: 1px solid var(--border-color);
+ cursor: pointer;
+ white-space: nowrap;
+ user-select: none;
+ transition: background 0.1s;
+}
+.assets-tbl th:first-child {
+ padding-left: 1.5rem;
+}
+.assets-tbl th:last-child {
+ padding-right: 1.5rem;
+}
+
+.assets-tbl th.th-right {
+ text-align: right;
+}
+.assets-tbl th.th-nosort {
+ cursor: default;
+}
+.assets-tbl th.th-action {
+ width: 48px;
+ cursor: default;
+}
+.assets-tbl th:hover:not(.th-nosort):not(.th-action) {
+ background: var(--bg-hover);
+ color: var(--accent-primary);
+}
+.th-inner {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+.sort-arrow {
+ color: var(--text-tertiary);
+ font-size: 0.75rem;
+ transition: color 0.2s;
+}
+.sort-arrow.active {
+ color: var(--accent-primary);
+}
+
+/* Table rows */
+.tbl-row {
+ cursor: pointer;
+ transition: background-color 0.15s ease;
+ background: var(--card-bg);
+}
+.tbl-row:hover {
+ background: var(--table-row-hover);
+}
+.assets-tbl td {
+ padding: 1rem 1.5rem;
+ color: var(--text-primary);
+ border-bottom: 1px solid var(--border-light);
+ vertical-align: middle;
+ font-weight: 400;
+}
+.assets-tbl td:first-child {
+ padding-left: 1.5rem;
+}
+.assets-tbl td:last-child {
+ padding-right: 1.5rem;
+}
+.tbl-row:last-child td {
+ border-bottom: none;
+}
+
+.td-name {
+ max-width: 320px;
+}
+.name-text {
+ font-weight: 600;
+ color: var(--text-primary);
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 0.9375rem;
+ letter-spacing: -0.2px;
+}
+.td-dim {
+ color: var(--text-secondary);
+}
+.td-detail {
+ color: var(--text-secondary);
+ font-size: 0.8125rem;
+}
+.td-cost {
+ text-align: right;
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: var(--text-primary);
+ font-size: 0.9375rem;
+}
+.td-arrow {
+ color: var(--text-tertiary);
+ font-size: 1rem;
+ text-align: center;
+ transition:
+ transform 0.2s,
+ color 0.2s;
+}
+.tbl-row:hover .td-arrow {
+ color: var(--accent-primary);
+ transform: translateX(3px);
+}
+.td-empty {
+ text-align: center;
+ padding: 4rem 2rem;
+ color: var(--text-tertiary);
+ font-size: 0.9375rem;
+}
+
+/* Type pill */
+.type-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.625rem;
+ border-radius: 20px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.3px;
+ white-space: nowrap;
+ line-height: 1;
+}
+
+/* ── Pagination ────────────────────────────────────── */
+.tbl-pagination {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.875rem 1.5rem;
+ border-top: 1px solid var(--border-color);
+ background: var(--card-bg);
+ font-size: 0.875rem;
+}
+.pg-info {
+ font-size: 0.8125rem;
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+.pg-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+.pg-select {
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 4px 10px;
+ font-size: 0.8125rem;
+ color: var(--text-primary);
+ background: var(--card-bg);
+ font-family: inherit;
+ cursor: pointer;
+ margin-right: 0.75rem;
+ transition: border 0.2s;
+}
+.pg-select:hover {
+ border-color: var(--border-hover);
+}
+.pg-btn {
+ background: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 5px 10px;
+ font-size: 0.8125rem;
+ color: var(--text-primary);
+ cursor: pointer;
+ font-family: inherit;
+ min-width: 32px;
+ line-height: 1.5;
+ transition: all 0.2s;
+ font-weight: 500;
+}
+.pg-btn:hover:not(:disabled) {
+ background: var(--bg-hover);
+ border-color: var(--border-hover);
+ color: var(--text-primary);
+}
+.pg-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ background: var(--bg-tertiary);
+}
+.pg-btn.pg-active {
+ background: var(--accent-primary);
+ border-color: var(--accent-primary);
+ color: #ffffff;
+ box-shadow: 0 2px 4px rgba(15, 98, 254, 0.25);
+}
+.pg-ellipsis {
+ padding: 0 6px;
+ color: var(--text-tertiary);
+ font-size: 0.8125rem;
+}
+
+/* ── Last updated ──────────────────────────────────── */
+.assets-last-updated {
+ text-align: right;
+ font-size: 0.6875rem;
+ color: var(--text-tertiary);
+ padding: 0.5rem 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 6px;
+}
+.auto-badge {
+ background: var(--success-color, #42be65);
+ color: #ffffff;
+ font-size: 0.5625rem;
+ font-weight: 700;
+ padding: 1px 5px;
+ border-radius: 3px;
+ letter-spacing: 0.3px;
+}
+
+/* ── Detail page ───────────────────────────────────── */
+.detail-page-header {
+ margin-bottom: 1.5rem;
+ background: var(--card-bg);
+ padding: 1.25rem 1.5rem;
+ border-radius: 12px;
+ border: 1px solid var(--border-color);
+ box-shadow: var(--card-shadow);
+}
+.detail-back-btn {
+ background: var(--button-bg);
+ border: 1px solid transparent;
+ color: var(--text-secondary);
+ font-size: 0.8125rem;
+ cursor: pointer;
+ padding: 6px 12px;
+ font-family: inherit;
+ font-weight: 600;
+ border-radius: 6px;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ transition: all 0.2s ease;
+ margin-bottom: 1rem;
+}
+.detail-back-btn:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ text-decoration: none;
+}
+.detail-page-title-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-top: 0;
+}
+.detail-page-name {
+ font-size: 1.375rem;
+ font-weight: 700;
+ color: var(--text-primary);
+ margin: 0;
+ letter-spacing: -0.3px;
+ line-height: 1.2;
+}
+.detail-page-meta {
+ display: flex;
+ gap: 1.5rem;
+ margin-top: 0.75rem;
+ font-size: 0.8125rem;
+ color: var(--text-secondary);
+ padding-top: 0.75rem;
+ border-top: 1px solid var(--border-light);
+}
+
+/* Type badge (reused from table) */
+.type-badge {
+ display: inline-block;
+ padding: 0.125rem 0.5rem;
+ border-radius: 10px;
+ font-size: 0.6875rem;
+ font-weight: 600;
+ letter-spacing: 0.2px;
+ text-transform: capitalize;
+ white-space: nowrap;
+}
+.type-badge--Node {
+ background: var(--badge-node-bg, #d0e2ff);
+ color: var(--badge-node-text, #0043ce);
+}
+.type-badge--Disk {
+ background: var(--badge-disk-bg, #d9fbfb);
+ color: var(--badge-disk-text, #005d5d);
+}
+.type-badge--LoadBalancer {
+ background: var(--badge-lb-bg, #e8daff);
+ color: var(--badge-lb-text, #6929c4);
+}
+.type-badge--Network {
+ background: var(--badge-network-bg, #bae6ff);
+ color: var(--badge-network-text, #003a6d);
+}
+.type-badge--ClusterManagement {
+ background: var(--badge-cluster-bg, #e8e8e8);
+ color: var(--badge-cluster-text, #393939);
+}
+.type-badge--Cloud {
+ background: var(--badge-cloud-bg, #ffd6e8);
+ color: var(--badge-cloud-text, #9f1853);
+}
+
+/* ── Detail cost cards ─────────────────────────────── */
+.detail-cost-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+}
+.detail-cost-card {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ padding: 1rem 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+.detail-cost-card--primary {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+}
+.detail-cost-card--primary .dcc-label {
+ color: var(--text-secondary);
+}
+.detail-cost-card--primary .dcc-value {
+ color: var(--text-primary);
+}
+.dcc-label {
+ font-size: 0.6875rem;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+.dcc-value {
+ font-size: 1.375rem;
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.3px;
+}
+
+/* ── Detail charts row ─────────────────────────────── */
+.detail-charts-row {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+}
+@media (min-width: 768px) {
+ .detail-charts-row:has(.detail-chart-panel--small) {
+ grid-template-columns: 2fr 1fr;
+ }
+}
+.detail-chart-panel {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ padding: 1rem 1.25rem;
+}
+.detail-section-title {
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin: 0 0 0.875rem;
+}
+.detail-subsection-title {
+ font-size: 0.6875rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin: 1rem 0 0.5rem;
+}
+
+/* ── Detail info grid ──────────────────────────────── */
+.detail-info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+}
+.detail-info-card {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ padding: 1rem 1.25rem;
+}
+.detail-info-rows {
+ display: flex;
+ flex-direction: column;
+}
+.detail-info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.4375rem 0;
+ border-bottom: 1px solid var(--border-light);
+ font-size: 0.8125rem;
+}
+.detail-info-row:last-child {
+ border-bottom: none;
+}
+.dir-label {
+ color: var(--text-secondary);
+ font-weight: 400;
+}
+.dir-value {
+ font-weight: 500;
+ color: var(--text-primary);
+ font-variant-numeric: tabular-nums;
+ text-align: right;
+}
+.val-total .dir-value {
+ font-weight: 700;
+ font-size: 0.875rem;
+}
+.val-credit .dir-value {
+ color: #42be65;
+}
+.val-adj .dir-value {
+ color: #fa4d56;
+}
+
+/* ── Detail utilization ────────────────────────────── */
+.detail-util-card {
+ grid-column: 1 / -1;
+}
+.detail-util-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+.detail-util-container {
+ margin-bottom: 0.5rem;
+}
+.detail-util-header {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: #161616;
+ margin-bottom: 0.375rem;
+}
+.detail-util-pct {
+ font-variant-numeric: tabular-nums;
+ color: #0f62fe;
+}
+.detail-util-bar {
+ height: 8px;
+ background: #e0e0e0;
+ border-radius: 4px;
+ overflow: hidden;
+ display: flex;
+}
+.bar-seg {
+ height: 100%;
+ transition: width 0.3s ease;
+}
+.bar-seg--user {
+ background: var(--accent-primary, #0f62fe);
+}
+.bar-seg--system {
+ background: var(--badge-lb-text, #6929c4);
+}
+.bar-seg--idle {
+ background: var(--border-color);
+}
+.detail-util-legend {
+ display: flex;
+ gap: 0.75rem;
+ margin-top: 0.375rem;
+ font-size: 0.6875rem;
+ color: var(--text-secondary);
+}
+.detail-util-legend span::before {
+ content: "";
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 4px;
+ vertical-align: middle;
+}
+.leg-user::before {
+ background: var(--accent-primary, #0f62fe);
+}
+.leg-system::before {
+ background: var(--badge-lb-text, #6929c4);
+}
+.leg-idle::before {
+ background: var(--border-color);
+}
+
+/* ── Detail labels ─────────────────────────────────── */
+.detail-labels-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.375rem;
+ margin-top: 0.5rem;
+}
+.detail-label-tag {
+ display: inline-flex;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ overflow: hidden;
+ font-size: 0.6875rem;
+ font-family: "IBM Plex Mono", "Menlo", monospace;
+}
+.dlt-key {
+ background: var(--bg-tertiary);
+ padding: 2px 6px;
+ color: var(--text-secondary);
+ border-right: 1px solid var(--border-color);
+}
+.dlt-val {
+ padding: 2px 6px;
+ color: var(--text-primary);
+ background: var(--card-bg);
+}
+
+/* ── Loading / empty states ────────────────────────── */
+.assets-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6rem 0;
+ color: var(--text-secondary);
+ font-size: 0.875rem;
+ gap: 0.75rem;
+}
+.loading-spinner {
+ width: 20px;
+ height: 20px;
+ border: 2px solid var(--border-color);
+ border-top-color: var(--accent-primary);
+ border-radius: 50%;
+ animation: spin 0.7s linear infinite;
+}
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+.assets-empty {
+ text-align: center;
+ padding: 5rem 2rem;
+ color: var(--text-secondary);
+}
+.assets-empty p {
+ font-size: 0.875rem;
+ max-width: 400px;
+ margin: 0 auto 1rem;
+}
+
+/* ── Loading skeleton ──────────────────────────────── */
+@keyframes shimmer {
+ 0% {
+ background-position: -400px 0;
+ }
+ 100% {
+ background-position: 400px 0;
+ }
+}
+
+.skeleton-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+}
+
+.skeleton-line {
+ border-radius: 6px;
+ background: linear-gradient(
+ 90deg,
+ var(--skeleton-base) 0%,
+ var(--skeleton-shine) 40%,
+ var(--skeleton-base) 80%
+ );
+ background-size: 800px 100%;
+ animation: shimmer 1.6s ease-in-out infinite;
+}
+.skeleton-line--xs {
+ width: 60px;
+ height: 12px;
+}
+.skeleton-line--sm {
+ width: 80px;
+ height: 12px;
+}
+.skeleton-line--md {
+ width: 120px;
+ height: 14px;
+}
+.skeleton-line--lg {
+ width: 160px;
+ height: 28px;
+}
+.skeleton-line--col {
+ width: 100%;
+ height: 12px;
+}
+.skeleton-line--name {
+ width: 45%;
+ height: 14px;
+}
+.skeleton-line--pill {
+ width: 60px;
+ height: 22px;
+ border-radius: 12px;
+}
+.skeleton-line--right {
+ margin-left: auto;
+}
+
+/* Skeleton tiles */
+.skeleton-tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 1.25rem;
+}
+.skeleton-tile {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 12px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+/* Skeleton chart */
+.skeleton-chart {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ overflow: hidden;
+}
+.skeleton-chart-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light);
+}
+.skeleton-chart-body {
+ padding: 1.5rem 1.25rem;
+ height: 200px;
+ display: flex;
+ align-items: flex-end;
+}
+.skeleton-bars {
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ width: 100%;
+ height: 100%;
+}
+.skeleton-bar {
+ flex: 1;
+ border-radius: 4px 4px 0 0;
+ background: linear-gradient(
+ 90deg,
+ var(--skeleton-base, #e8e8e8) 0%,
+ var(--skeleton-shine, #f5f5f5) 40%,
+ var(--skeleton-base, #e8e8e8) 80%
+ );
+ background-size: 800px 100%;
+ animation: shimmer 1.6s ease-in-out infinite;
+}
+
+/* Skeleton filter pills */
+.skeleton-filters {
+ display: flex;
+ gap: 0.5rem;
+}
+.skeleton-pill {
+ width: 90px;
+ height: 32px;
+ border-radius: 8px;
+ background: linear-gradient(
+ 90deg,
+ var(--skeleton-base, #e8e8e8) 0%,
+ var(--skeleton-shine, #f5f5f5) 40%,
+ var(--skeleton-base, #e8e8e8) 80%
+ );
+ background-size: 800px 100%;
+ animation: shimmer 1.6s ease-in-out infinite;
+}
+
+/* Skeleton table */
+.skeleton-table {
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 8px;
+ overflow: hidden;
+}
+.skeleton-table-header {
+ display: grid;
+ grid-template-columns: 2.5fr 1fr 1fr 1.2fr 1.5fr 1fr;
+ gap: 1rem;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light);
+}
+.skeleton-table-row {
+ display: grid;
+ grid-template-columns: 2.5fr 1fr 1fr 1.2fr 1.5fr 1fr;
+ gap: 1rem;
+ padding: 0.875rem 1.25rem;
+ border-bottom: 1px solid var(--border-light);
+ align-items: center;
+}
+.skeleton-table-row:last-child {
+ border-bottom: none;
+}
+
+@media (max-width: 768px) {
+ .skeleton-tiles {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+ .skeleton-tile {
+ padding: 1rem;
+ }
+ .skeleton-table-header,
+ .skeleton-table-row {
+ grid-template-columns: 2fr 1fr 1fr;
+ }
+ .skeleton-table-header > :nth-child(n + 4),
+ .skeleton-table-row > :nth-child(n + 4) {
+ display: none;
+ }
+}
+
+/* Dark theme skeleton overrides */
+[data-theme="dark"] .skeleton-line,
+[data-theme="dark"] .skeleton-bar,
+[data-theme="dark"] .skeleton-pill {
+ --skeleton-base: #222;
+ --skeleton-shine: #2e2e2e;
+}
+
+/* ── Currency selector ─────────────────────────────── */
+.currency-select {
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 7px 10px;
+ font-size: 0.8125rem;
+ font-weight: 600;
+ font-family: inherit;
+ color: var(--text-primary);
+ background: var(--card-bg);
+ cursor: pointer;
+ box-shadow: var(--card-shadow);
+ transition: all 0.2s ease;
+ min-width: 72px;
+ letter-spacing: 0.3px;
+}
+.currency-select:hover {
+ border-color: var(--border-hover);
+}
+
+.rates-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ font-size: 0.875rem;
+ font-weight: 700;
+ color: var(--text-tertiary);
+ background: var(--button-bg);
+ border-radius: 50%;
+ cursor: help;
+ line-height: 1;
+}
+
+/* ── Sidebar scrollbar fix ─────────────────────────── */
+.MuiDrawer-root .MuiDrawer-paper {
+ overflow-x: hidden;
+ scrollbar-width: thin;
+ scrollbar-color: var(--border-color) transparent;
+}
+.MuiDrawer-root .MuiDrawer-paper::-webkit-scrollbar {
+ width: 4px;
+}
+.MuiDrawer-root .MuiDrawer-paper::-webkit-scrollbar-track {
+ background: transparent;
+}
+.MuiDrawer-root .MuiDrawer-paper::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 2px;
+}
+
+/* ── Export CSV button ─────────────────────────────── */
+.export-csv-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ background: var(--button-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 6px 14px;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition:
+ background 0.15s ease,
+ border-color 0.15s ease,
+ color 0.15s ease,
+ box-shadow 0.15s ease;
+ white-space: nowrap;
+}
+.export-csv-btn:hover:not(:disabled) {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+ color: var(--text-primary);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.export-csv-btn:active:not(:disabled) {
+ background: var(--bg-hover);
+ transform: translateY(0.5px);
+}
+.export-csv-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+.export-csv-btn svg {
+ flex-shrink: 0;
+}
+
+/* ── View toggle (Table / Visualizations) ──────────── */
+.assets-view-toggle {
+ display: flex;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ overflow: hidden;
+}
+.view-toggle-btn {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: var(--card-bg);
+ border: none;
+ border-right: 1px solid var(--border-color);
+ padding: 5px 12px;
+ font-size: 0.75rem;
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.12s ease;
+ white-space: nowrap;
+}
+.view-toggle-btn:last-child {
+ border-right: none;
+}
+.view-toggle-btn:hover {
+ background: var(--button-hover-bg);
+ color: var(--text-primary);
+}
+.view-toggle-btn.active {
+ background: var(--accent-primary);
+ color: #ffffff;
+}
+.view-toggle-btn svg {
+ flex-shrink: 0;
+}
+.assets-header-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color);
+ margin: 0 1px;
+ flex-shrink: 0;
+}
+
+/* ══════════════════════════════════════════════════════
+ Dashboard / Visualization panels (Grafana style)
+ ══════════════════════════════════════════════════════ */
+
+.assets-dashboard {
+ margin-top: 0.5rem;
+}
+
+/* ── Dashboard summary tiles ───────────────────────── */
+.dash-summary-row {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 0.75rem;
+ margin-bottom: 1rem;
+}
+.dash-summary-tile {
+ background: linear-gradient(135deg, #0f62fe 0%, #0043ce 100%);
+ border-radius: 8px;
+ padding: 1.25rem 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.125rem;
+ color: #fff;
+}
+.dash-sum-label {
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ opacity: 0.85;
+}
+.dash-sum-sub {
+ font-size: 0.625rem;
+ opacity: 0.6;
+ text-transform: capitalize;
+}
+.dash-sum-value {
+ font-size: 1.75rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.5px;
+ margin-top: 0.25rem;
+}
+
+@media (max-width: 700px) {
+ .dash-summary-row {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* ── Dashboard rows ────────────────────────────────── */
+.dash-row {
+ display: grid;
+ gap: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+.dash-row--3col {
+ grid-template-columns: repeat(3, 1fr);
+}
+@media (max-width: 1024px) {
+ .dash-row--3col {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+@media (max-width: 700px) {
+ .dash-row--3col {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* ── Panel (each chart card) ───────────────────────── */
+.dash-panel {
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+.dash-panel-header {
+ display: flex;
+ align-items: baseline;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem 0.5rem;
+ border-bottom: 1px solid #f4f4f4;
+}
+.dash-panel-title {
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: #161616;
+ margin: 0;
+}
+.dash-panel-sub {
+ font-size: 0.625rem;
+ color: #a8a8a8;
+ text-transform: capitalize;
+}
+.dash-panel-body {
+ flex: 1;
+ padding: 0.5rem 0.5rem 0.375rem;
+ min-height: 0;
+}
+
+/* ── Dashboard tooltip ─────────────────────────────── */
+.dash-tooltip {
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+ padding: 0.5rem 0.75rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ min-width: 150px;
+ font-size: 0.75rem;
+}
+.dash-tooltip-title {
+ font-size: 0.625rem;
+ color: #6f6f6f;
+ font-weight: 600;
+ margin-bottom: 3px;
+}
+.dash-tooltip-total {
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: #161616;
+ margin-bottom: 4px;
+ padding-bottom: 4px;
+ border-bottom: 1px solid #f0f0f0;
+}
+.dash-tooltip-items {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+.dash-tooltip-row {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.6875rem;
+}
+.dash-tooltip-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.dash-tooltip-name {
+ color: #525252;
+ flex: 1;
+}
+.dash-tooltip-val {
+ font-weight: 500;
+ color: #161616;
+ font-variant-numeric: tabular-nums;
+}
+
+/* ── Donut panel specifics ─────────────────────────── */
+.dash-donut-wrap {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+.dash-donut-legend {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+}
+.dash-donut-row {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.6875rem;
+}
+.dash-donut-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 2px;
+ flex-shrink: 0;
+}
+.dash-donut-name {
+ flex: 1;
+ color: #525252;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.dash-donut-cost {
+ font-weight: 500;
+ color: #161616;
+ font-variant-numeric: tabular-nums;
+}
+.dash-donut-pct {
+ color: #8d8d8d;
+ font-variant-numeric: tabular-nums;
+ min-width: 26px;
+ text-align: right;
+}
+
+/* Donut panel needs more horizontal room */
+.dash-panel--donut .dash-panel-body {
+ padding: 0.5rem 0.75rem;
+}
+
+/* ── Dashboard responsive ──────────────────────────── */
+@media (max-width: 1024px) {
+ .dash-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .dash-panel--wide {
+ grid-column: span 2;
+ }
+}
+
+@media (max-width: 768px) {
+ .dash-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+ .dash-panel--wide {
+ grid-column: span 1;
+ }
+ .dash-panel-title {
+ font-size: 0.75rem;
+ }
+}
+
+/* ── Mobile responsive improvements ───────────────────── */
+@media (max-width: 640px) {
+ .assets-header-controls {
+ width: 100%;
+ }
+
+ .chart-controls {
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ }
+
+ .detail-page-header {
+ padding: 1rem;
+ }
+
+ .detail-page-name {
+ font-size: 1.5rem;
+ }
+
+ .detail-page-meta {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .detail-info-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .detail-charts-row {
+ grid-template-columns: 1fr !important;
+ }
+}
+
+/* ── Dark mode specific adjustments ──────────────────── */
+[data-theme="dark"] .assets-tbl th {
+ background: var(--table-header-bg);
+ color: var(--text-secondary);
+ border-bottom-color: var(--border-color);
+}
+
+[data-theme="dark"] .assets-tbl th:hover:not(.th-nosort):not(.th-action) {
+ background: var(--bg-hover);
+ color: var(--accent-primary);
+}
+
+[data-theme="dark"] .tbl-row {
+ background: var(--card-bg);
+}
+
+[data-theme="dark"] .tbl-row:hover {
+ background: var(--table-row-hover);
+}
+
+[data-theme="dark"] .assets-tbl td {
+ color: var(--text-primary);
+ border-bottom-color: var(--border-light);
+}
+
+[data-theme="dark"] .name-text {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .td-dim {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .td-detail {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .td-cost {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .td-arrow {
+ color: var(--text-disabled);
+}
+
+[data-theme="dark"] .tbl-row:hover .td-arrow {
+ color: var(--accent-primary);
+}
+
+[data-theme="dark"] .td-empty {
+ color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .tbl-pagination {
+ background: var(--card-bg);
+ border-top-color: var(--border-color);
+}
+
+[data-theme="dark"] .pg-info {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .pg-select {
+ background: var(--card-bg);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .pg-btn {
+ background: var(--card-bg);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .pg-btn:hover:not(:disabled) {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+}
+
+[data-theme="dark"] .pg-btn:disabled {
+ background: var(--bg-tertiary);
+}
+
+[data-theme="dark"] .pg-ellipsis {
+ color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .detail-page-header {
+ background: var(--card-bg);
+ border-color: var(--card-border);
+}
+
+[data-theme="dark"] .detail-back-btn {
+ background: var(--button-bg);
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .detail-back-btn:hover {
+ background: var(--button-hover-bg);
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .detail-page-name {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .detail-page-meta {
+ color: var(--text-secondary);
+ border-top-color: var(--border-light);
+}
+
+[data-theme="dark"] .detail-cost-card {
+ background: var(--card-bg);
+ border-color: var(--card-border);
+}
+
+[data-theme="dark"] .dcc-label {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .dcc-value {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .detail-chart-panel {
+ background: var(--card-bg);
+ border-color: var(--card-border);
+}
+
+[data-theme="dark"] .detail-section-title {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .detail-info-card {
+ background: var(--card-bg);
+ border-color: var(--card-border);
+}
+
+[data-theme="dark"] .detail-info-row {
+ border-bottom-color: var(--border-light);
+}
+
+[data-theme="dark"] .dir-label {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .dir-value {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .dash-panel {
+ background: var(--card-bg);
+ border-color: var(--card-border);
+}
+
+[data-theme="dark"] .dash-panel-title {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .dash-tooltip {
+ background: var(--chart-tooltip-bg);
+ border-color: var(--chart-tooltip-border);
+}
+
+[data-theme="dark"] .dash-tooltip-title {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .dash-tooltip-total {
+ color: var(--text-primary);
+ border-bottom-color: var(--border-light);
+}
+
+[data-theme="dark"] .dash-tooltip-name,
+[data-theme="dark"] .dash-donut-name {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .dash-tooltip-val,
+[data-theme="dark"] .dash-donut-cost {
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .dash-donut-pct {
+ color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .assets-filter-btn {
+ background: var(--card-bg);
+ border-color: var(--border-color);
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .assets-filter-btn:hover {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+ color: var(--text-primary);
+}
+
+[data-theme="dark"] .chart-toggle {
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .chart-type-btn {
+ background: var(--card-bg);
+ border-color: var(--border-color);
+ color: var(--text-secondary);
+}
+
+[data-theme="dark"] .chart-type-btn.active {
+ background: var(--accent-primary);
+ color: #ffffff;
+}
diff --git a/src/css/index.css b/src/css/index.css
index 8ace1e31..dd95f0d5 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,12 +1,402 @@
@import "../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
+@import "./theme-variables.css";
+
+.cds--side-nav {
+ background-color: var(--sidebar-bg);
+ border-right: 1px solid var(--sidebar-border);
+}
+
+.cds--side-nav__link {
+ color: var(--sidebar-text) !important;
+ font-weight: 500;
+ opacity: 1 !important;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ margin: 2px 8px;
+ border-radius: 6px;
+ transition:
+ background-color 0.15s ease,
+ color 0.15s ease,
+ transform 0.1s ease;
+}
+
+.cds--side-nav__link .cds--side-nav__icon,
+.cds--side-nav__link svg {
+ color: var(--sidebar-icon, var(--sidebar-text)) !important;
+ fill: currentColor;
+ width: 18px;
+ height: 18px;
+ opacity: 1 !important;
+}
+
+.cds--side-nav__link:hover {
+ background-color: var(--sidebar-hover) !important;
+ color: var(--sidebar-text-hover) !important;
+}
+.cds--side-nav__link:hover .cds--side-nav__icon,
+.cds--side-nav__link:hover svg {
+ color: var(--sidebar-icon-active, var(--sidebar-text-hover)) !important;
+}
+
+.cds--side-nav__link--current,
+.cds--side-nav__link[aria-current="page"] {
+ background-color: var(--sidebar-active-bg) !important;
+ color: var(--sidebar-text-active) !important;
+ border-left: 3px solid var(--sidebar-text-active);
+ padding-left: calc(1rem - 3px);
+ font-weight: 600;
+}
+.cds--side-nav__link--current .cds--side-nav__icon,
+.cds--side-nav__link--current svg,
+.cds--side-nav__link[aria-current="page"] .cds--side-nav__icon,
+.cds--side-nav__link[aria-current="page"] svg {
+ color: var(--sidebar-icon-active) !important;
+}
+
+/* focus / keyboard accessibility */
+.cds--side-nav__link:focus-visible {
+ outline: 2px solid var(--accent-primary);
+ outline-offset: 1px;
+}
+
+.cds--side-nav__link-text {
+ color: inherit !important;
+ font-size: 0.875rem;
+ font-weight: inherit;
+ line-height: 1.3;
+ letter-spacing: 0.01em;
+}
+
+/* Wrapper — allow menu to overflow beyond trigger width */
+.cds--dropdown__wrapper,
+.cds--list-box__wrapper {
+ position: relative;
+}
+
+/* Trigger button */
+.cds--dropdown,
+.cds--list-box {
+ background-color: var(--dropdown-bg) !important;
+ border: 1px solid var(--dropdown-border) !important;
+ border-radius: 8px;
+ min-height: 36px;
+ overflow: visible !important;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ background-color 0.2s ease;
+}
+
+.cds--dropdown:hover,
+.cds--list-box:hover {
+ background-color: var(--dropdown-bg) !important;
+ border-color: var(--dropdown-border-hover) !important;
+}
+
+.cds--dropdown:focus-within,
+.cds--list-box:focus-within {
+ border-color: var(--accent-primary) !important;
+ box-shadow: 0 0 0 3px var(--dropdown-focus-ring) !important;
+}
+
+/* Field area (inside trigger) */
+.cds--list-box__field {
+ background-color: transparent !important;
+ border: none !important;
+ color: var(--dropdown-text) !important;
+ padding: 0 14px;
+ min-height: 36px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+}
+
+.cds--list-box__menu {
+ background-color: var(--dropdown-menu-bg) !important;
+ border: 1px solid var(--dropdown-border) !important;
+ border-radius: 10px;
+ box-shadow:
+ 0 4px 6px -1px rgba(0, 0, 0, 0.07),
+ 0 10px 20px -2px rgba(0, 0, 0, 0.1),
+ 0 0 0 1px rgba(0, 0, 0, 0.03);
+ margin-top: 4px;
+ padding: 6px;
+ max-height: 320px;
+ min-width: 180px;
+ width: max-content;
+ min-width: max-content;
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-width: thin;
+ scrollbar-color: var(--dropdown-scroll-thumb) transparent;
+ z-index: 9100;
+}
+
+/* Scrollbar (WebKit) */
+.cds--list-box__menu::-webkit-scrollbar {
+ width: 6px;
+}
+.cds--list-box__menu::-webkit-scrollbar-track {
+ background: transparent;
+ margin: 6px 0;
+}
+.cds--list-box__menu::-webkit-scrollbar-thumb {
+ background-color: var(--dropdown-scroll-thumb);
+ border-radius: 99px;
+}
+.cds--list-box__menu::-webkit-scrollbar-thumb:hover {
+ background-color: var(--dropdown-scroll-thumb-hover);
+}
+
+/* Table scrollbars (assets table) */
+.table-scroll {
+ scrollbar-width: thin;
+ scrollbar-color: var(--dropdown-scroll-thumb) transparent;
+}
+.table-scroll::-webkit-scrollbar {
+ height: 8px;
+}
+.table-scroll::-webkit-scrollbar-track {
+ background: transparent;
+}
+.table-scroll::-webkit-scrollbar-thumb {
+ background-color: var(--dropdown-scroll-thumb);
+ border-radius: 6px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+.table-scroll::-webkit-scrollbar-thumb:hover {
+ background-color: var(--dropdown-scroll-thumb-hover);
+}
+
+.cds--list-box__menu-item {
+ background-color: transparent;
+ color: var(--dropdown-menu-text) !important;
+ padding: 10px 16px;
+ margin: 2px 0;
+ cursor: pointer;
+ transition:
+ background-color 0.15s ease,
+ color 0.15s ease;
+ font-size: 0.875rem;
+ font-weight: 450;
+ letter-spacing: 0.005em;
+ line-height: 1.5;
+ height: auto !important;
+ min-height: 40px;
+ border-radius: 6px;
+ border: none !important;
+ outline: none !important;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ border-top: none !important;
+ border-bottom: none !important;
+ box-shadow: none !important;
+}
+
+/* Kill every Carbon separator — pseudo-elements, borders, outlines */
+.cds--list-box__menu-item::before,
+.cds--list-box__menu-item::after,
+.cds--list-box__menu-item__option::before,
+.cds--list-box__menu-item__option::after,
+.cds--list-box__menu-item--highlighted::before,
+.cds--list-box__menu-item--highlighted::after {
+ display: none !important;
+ content: none !important;
+ border: none !important;
+ border-top: none !important;
+ border-bottom: none !important;
+ height: 0 !important;
+ width: 0 !important;
+ background: none !important;
+ box-shadow: none !important;
+}
+
+/* Also nuke any border-top Carbon puts directly on items */
+.cds--list-box__menu-item + .cds--list-box__menu-item {
+ border-top: none !important;
+}
+
+.cds--list-box__menu-item__option {
+ border-top: none !important;
+ border-bottom: none !important;
+ box-shadow: none !important;
+}
+
+/* Hover */
+.cds--list-box__menu-item:hover {
+ background-color: var(--dropdown-item-hover) !important;
+ color: var(--dropdown-menu-text-hover) !important;
+}
+
+/* Keyboard-highlighted */
+.cds--list-box__menu-item--highlighted {
+ background-color: var(--dropdown-item-hover) !important;
+ color: var(--dropdown-menu-text-hover) !important;
+}
+
+/* Selected / active */
+.cds--list-box__menu-item--active,
+.cds--list-box__menu-item[aria-selected="true"] {
+ background-color: var(--dropdown-item-selected) !important;
+ color: var(--dropdown-item-active-text, var(--accent-primary)) !important;
+ font-weight: 600;
+ position: relative;
+}
+
+/* Accent left-bar on selected item */
+.cds--list-box__menu-item--active::before,
+.cds--list-box__menu-item[aria-selected="true"]::before {
+ display: block !important;
+ content: "" !important;
+ position: absolute;
+ left: 0;
+ top: 8px;
+ bottom: 8px;
+ width: 3px;
+ border-radius: 0 3px 3px 0;
+ background: var(--dropdown-item-selected-border, var(--accent-primary));
+ border: none !important;
+}
+
+.cds--list-box__menu-item--active:hover,
+.cds--list-box__menu-item[aria-selected="true"]:hover {
+ background-color: var(
+ --dropdown-item-active-bg,
+ var(--dropdown-item-selected)
+ ) !important;
+ color: var(--dropdown-item-active-text, var(--accent-primary)) !important;
+}
+
+/* ── Option text inside each item (FULL text, no clipping) ── */
+.cds--list-box__menu-item__option {
+ color: inherit !important;
+ font-weight: inherit !important;
+ text-overflow: unset !important;
+ white-space: nowrap !important;
+ overflow: visible !important;
+ line-height: 1.45;
+ padding: 0 !important;
+ max-width: none !important;
+ width: auto !important;
+ height: auto !important;
+}
+
+/* ── Trigger label (selected value shown in closed state) ── */
+.cds--list-box__label {
+ color: var(--dropdown-text) !important;
+ font-weight: 500;
+ font-size: 0.875rem;
+ letter-spacing: 0.005em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+}
+
+.cds--dropdown__wrapper .cds--label {
+ color: var(--text-secondary);
+ font-weight: 500;
+ font-size: 0.8125rem;
+}
+
+.cds--list-box__menu-icon {
+ fill: var(--text-tertiary) !important;
+ transition:
+ transform 0.2s ease,
+ fill 0.2s ease;
+ flex-shrink: 0;
+}
+
+.cds--list-box__selection {
+ color: var(--text-primary);
+ font-size: 13px;
+ flex-shrink: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ Checkbox Components
+ ───────────────────────────────────────────────────────────────── */
+.cds--checkbox-wrapper {
+ background: transparent;
+}
+
+.cds--checkbox-label {
+ color: var(--text-primary);
+ font-weight: 500;
+}
+
+.cds--checkbox-label-text {
+ color: var(--text-primary);
+}
+
+.cds--checkbox:checked + .cds--checkbox-label::before {
+ background-color: var(--accent-primary);
+ border-color: var(--accent-primary);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ Modal Components
+ ───────────────────────────────────────────────────────────────── */
+.cds--modal-container {
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+}
+
+.cds--modal-header {
+ background-color: var(--card-bg);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.cds--modal-content {
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+}
+
+.cds--modal-header__heading {
+ color: var(--text-primary);
+}
+
+.cds--modal-close {
+ color: var(--text-primary);
+}
+
+.cds--modal-close:hover {
+ background-color: var(--bg-hover);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ Loading Spinner
+ ───────────────────────────────────────────────────────────────── */
+.cds--loading__stroke {
+ stroke: var(--accent-primary);
+}
+
+.cds--loading-overlay {
+ background-color: var(--bg-primary);
+}
body {
- background-color: #f3f3f3;
+ background-color: var(--bg-secondary);
display: flex;
flex-flow: column;
- font-family: "Roboto", sans-serif;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ "Helvetica Neue",
+ Arial,
+ sans-serif;
margin: 0px;
- overflow-y: scroll;
+ overflow-y: auto;
+ color: var(--text-primary);
+ -webkit-font-smoothing: antialiased;
}
body .page-container {
@@ -18,3 +408,126 @@ body .page-container {
.recharts-tooltip-wrapper {
z-index: 1000;
}
+
+/* ═══════════════════════════════════════════════════════
+ Page Header — Unified across all pages
+ ═══════════════════════════════════════════════════════ */
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.5rem;
+ background: var(--bg-primary);
+ border-bottom: 1px solid var(--border-color);
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ gap: 1rem;
+ min-height: 56px;
+}
+
+.page-header__left {
+ display: flex;
+ align-items: baseline;
+ gap: 0.75rem;
+ flex-shrink: 0;
+}
+
+.page-header__title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--text-primary);
+ margin: 0;
+ letter-spacing: -0.3px;
+ line-height: 1.3;
+ white-space: nowrap;
+}
+
+.page-header__subtitle {
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--text-secondary);
+ white-space: nowrap;
+}
+
+.page-header__breadcrumbs {
+ font-size: 0.8125rem;
+}
+
+.page-header__right {
+ display: flex;
+ align-items: center;
+ gap: 0.625rem;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+}
+
+/* Responsive: stack on small screens */
+@media (max-width: 768px) {
+ .page-header {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0.75rem 1rem;
+ gap: 0.625rem;
+ }
+ .page-header__right {
+ width: 100%;
+ justify-content: flex-start;
+ }
+}
+
+/* ── Shared compact header checkboxes ─────────────── */
+.alloc-header-check {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: var(--text-secondary, #6f6f6f);
+ cursor: pointer;
+ padding: 4px 8px;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+ white-space: nowrap;
+ user-select: none;
+}
+
+.alloc-header-check:hover {
+ background: var(--bg-hover, #f8faff);
+ color: var(--text-primary, #161616);
+}
+
+.alloc-header-check input[type="checkbox"] {
+ accent-color: var(--accent-primary, #0f62fe);
+ cursor: pointer;
+ width: 14px;
+ height: 14px;
+ margin: 0;
+}
+
+.alloc-header-check span {
+ line-height: 1;
+}
+
+/* ── Shared header divider ────────────────────────── */
+.alloc-header-divider,
+.assets-header-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color, #e0e0e0);
+ margin: 0 1px;
+ flex-shrink: 0;
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 768px) {
+ body {
+ font-size: 14px;
+ }
+}
+
+/* ─── Sidebar / layout ─── */
+.page-content {
+ position: relative;
+ flex-grow: 1;
+}
diff --git a/src/css/theme-toggle.css b/src/css/theme-toggle.css
new file mode 100644
index 00000000..b38dbb5d
--- /dev/null
+++ b/src/css/theme-toggle.css
@@ -0,0 +1,21 @@
+.theme-toggle {
+ background: var(--button-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 8px;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ color: var(--text-primary);
+}
+
+.theme-toggle:hover {
+ background: var(--button-hover-bg);
+ border-color: var(--border-hover);
+}
+
+.theme-toggle svg {
+ display: block;
+}
diff --git a/src/css/theme-variables.css b/src/css/theme-variables.css
new file mode 100644
index 00000000..cb592e03
--- /dev/null
+++ b/src/css/theme-variables.css
@@ -0,0 +1,399 @@
+/* Claude.ai inspired theme variables */
+:root {
+ /* Light theme */
+ --bg-primary: #ffffff;
+ --bg-secondary: #f9fafb;
+ --bg-tertiary: #f3f4f6;
+ --bg-elevated: #ffffff;
+ --bg-hover: #f8faff;
+
+ --text-primary: #1a1a1a;
+ --text-secondary: #525252;
+ --text-tertiary: #737373;
+ --text-disabled: #a3a3a3;
+
+ --border-color: #e5e7eb;
+ --border-light: #f0f0f0;
+ --border-hover: #d1d5db;
+
+ --accent-primary: #0f62fe;
+ --accent-hover: #0353e9;
+ --accent-light: #eef4ff;
+
+ --button-bg: #f4f4f5;
+ --button-hover-bg: #e5e5e5;
+
+ --card-bg: #ffffff;
+ --card-border: #e5e7eb;
+ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+ --card-hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
+
+ --table-header-bg: #fbfcff;
+ --table-row-hover: #f8faff;
+
+ --sidebar-bg: #ffffff;
+ --sidebar-border: #e5e7eb;
+ --sidebar-text: #161616;
+ --sidebar-text-hover: #0f62fe;
+ --sidebar-text-active: #0f62fe;
+ --sidebar-icon: #525252;
+ --sidebar-icon-active: #0f62fe;
+ --sidebar-hover: #eef4ff;
+ --sidebar-active-bg: #dbeafe;
+ --sidebar-active: #eef4ff;
+
+ /* Dropdown colors - light */
+ --dropdown-bg: #ffffff;
+ --dropdown-border: #d1d5db;
+ --dropdown-border-hover: #a3a3a3;
+ --dropdown-text: #1a1a1a;
+ --dropdown-menu-bg: #ffffff;
+ --dropdown-menu-text: #1a1a1a;
+ --dropdown-menu-text-hover: #0f62fe;
+ --dropdown-item-hover: #f4f4f4;
+ --dropdown-item-selected: #eef4ff;
+ --dropdown-item-border: #f0f0f0;
+ /* Dropdown scrollbar */
+ --dropdown-scroll-thumb: rgba(0, 0, 0, 0.18);
+ --dropdown-scroll-thumb-hover: rgba(0, 0, 0, 0.28);
+
+ /* Chart colors - light */
+ --chart-grid: #e5e7eb;
+ --chart-text: #737373;
+ --chart-tooltip-bg: #ffffff;
+ --chart-tooltip-border: #e5e7eb;
+
+ /* Skeleton colors - light */
+ --skeleton-base: #e8e8e8;
+ --skeleton-shine: #f5f5f5;
+
+ /* Success color */
+ --success-color: #42be65;
+}
+
+[data-theme="dark"] {
+ /* Dark theme - Claude.ai inspired with improved contrast */
+ --bg-primary: #0d0d0d;
+ --bg-secondary: #1a1a1a;
+ --bg-tertiary: #242424;
+ --bg-elevated: #1e1e1e;
+ --bg-hover: #2a2a2a;
+
+ --text-primary: #ececec;
+ --text-secondary: #b4b4b4;
+ --text-tertiary: #8a8a8a;
+ --text-disabled: #5a5a5a;
+
+ --border-color: #2a2a2a;
+ --border-light: #222222;
+ --border-hover: #3a3a3a;
+
+ --accent-primary: #6ba3ff;
+ --accent-hover: #5b9cff;
+ --accent-light: #1a3a5a;
+
+ --button-bg: #242424;
+ --button-hover-bg: #2e2e2e;
+
+ --card-bg: #1a1a1a;
+ --card-border: #2a2a2a;
+ --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+ --card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+
+ --table-header-bg: #1e1e1e;
+ --table-row-hover: #2e2e2e;
+
+ --sidebar-bg: #141414;
+ --sidebar-border: #2a2a2a;
+ --sidebar-text: #f4f4f4;
+ --sidebar-text-hover: #ffffff;
+ --sidebar-text-active: var(--accent-primary);
+ --sidebar-icon: #d0d0d0;
+ --sidebar-icon-active: var(--accent-primary);
+ --sidebar-hover: rgba(255, 255, 255, 0.08);
+ --sidebar-active-bg: rgba(106, 163, 255, 0.14);
+ --sidebar-active: #2a2a2a;
+
+ /* Dropdown colors - dark */
+ --dropdown-bg: #262626;
+ --dropdown-border: #404040;
+ --dropdown-border-hover: #525252;
+ --dropdown-text: #ececec;
+ --dropdown-menu-bg: #2a2a2a;
+ --dropdown-menu-text: #ececec;
+ --dropdown-menu-text-hover: #ffffff;
+ --dropdown-item-hover: #404040;
+ --dropdown-item-selected: #1a3a5a;
+ --dropdown-item-border: #333333;
+ /* Dropdown scrollbar - dark */
+ --dropdown-scroll-thumb: #525252;
+ --dropdown-scroll-thumb-hover: #6b6b6b;
+
+ /* Chart colors - dark */
+ --chart-grid: #2a2a2a;
+ --chart-text: #b4b4b4;
+ --chart-tooltip-bg: #1e1e1e;
+ --chart-tooltip-border: #3a3a3a;
+
+ /* Skeleton colors - dark */
+ --skeleton-base: #2a2a2a;
+ --skeleton-shine: #3a3a3a;
+
+ /* Success color */
+ --success-color: #42be65;
+}
+
+/* Smooth transitions for theme changes */
+body,
+.assets-page,
+.cost-tile,
+.assets-table-wrap,
+.asset-cost-chart,
+.detail-page-header {
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease,
+ border-color 0.3s ease;
+}
+
+/* Dark mode typography improvements */
+[data-theme="dark"] {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+}
+
+[data-theme="dark"] body {
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+}
+
+/* ── MUI Paper (cards, panels, modals) ── */
+[data-theme="dark"] .MuiPaper-root {
+ background-color: var(--card-bg) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--card-border) !important;
+ box-shadow: var(--card-shadow) !important;
+ background-image: none !important; /* remove MUI elevation gradient overlay */
+}
+
+/* ── MUI Typography ── */
+[data-theme="dark"] .MuiTypography-root {
+ color: var(--text-primary);
+}
+[data-theme="dark"] .MuiTypography-colorTextSecondary {
+ color: var(--text-secondary) !important;
+}
+
+/* Better contrast for headings in dark mode */
+[data-theme="dark"] h1,
+[data-theme="dark"] h2,
+[data-theme="dark"] h3,
+[data-theme="dark"] h4,
+[data-theme="dark"] h5,
+[data-theme="dark"] h6 {
+ color: var(--text-primary);
+ font-weight: 600;
+ letter-spacing: -0.02em;
+}
+
+/* ── MUI Buttons & IconButtons ── */
+[data-theme="dark"] .MuiButton-root {
+ color: var(--text-primary);
+ border-color: var(--border-color) !important;
+}
+[data-theme="dark"] .MuiButton-contained {
+ background-color: var(--accent-primary) !important;
+ color: #fff !important;
+}
+[data-theme="dark"] .MuiButton-outlined {
+ border-color: var(--border-color) !important;
+ color: var(--text-primary) !important;
+}
+[data-theme="dark"] .MuiButton-outlined:hover {
+ background-color: var(--bg-hover) !important;
+ border-color: var(--border-hover) !important;
+}
+[data-theme="dark"] .MuiIconButton-root {
+ color: var(--text-secondary) !important;
+}
+[data-theme="dark"] .MuiIconButton-root:hover {
+ background-color: var(--bg-hover) !important;
+}
+
+/* ── MUI Table ── */
+[data-theme="dark"] .MuiTable-root {
+ background-color: var(--card-bg);
+}
+[data-theme="dark"] .MuiTableCell-root {
+ color: var(--text-primary) !important;
+ border-bottom-color: var(--border-color) !important;
+}
+[data-theme="dark"] .MuiTableCell-head {
+ background-color: var(--table-header-bg) !important;
+ color: var(--text-secondary) !important;
+ font-weight: 600;
+}
+[data-theme="dark"] .MuiTableRow-root:hover {
+ background-color: var(--table-row-hover) !important;
+}
+
+/* ── MUI List ── */
+[data-theme="dark"] .MuiList-root {
+ background-color: transparent;
+}
+[data-theme="dark"] .MuiListItem-root {
+ color: var(--text-primary);
+}
+[data-theme="dark"] .MuiListItem-root:hover {
+ background-color: var(--bg-hover) !important;
+}
+[data-theme="dark"] .MuiListItemIcon-root {
+ color: var(--text-secondary);
+}
+[data-theme="dark"] .MuiListItemText-secondary {
+ color: var(--text-tertiary) !important;
+}
+
+/* ── MUI Checkbox & inputs ── */
+[data-theme="dark"] .MuiCheckbox-root {
+ color: var(--text-secondary) !important;
+}
+[data-theme="dark"] .MuiCheckbox-root.Mui-checked {
+ color: var(--accent-primary) !important;
+}
+[data-theme="dark"] .MuiInputBase-root {
+ color: var(--text-primary) !important;
+}
+[data-theme="dark"] .MuiOutlinedInput-notchedOutline {
+ border-color: var(--border-color) !important;
+}
+[data-theme="dark"] .MuiInputLabel-root {
+ color: var(--text-secondary) !important;
+}
+[data-theme="dark"] .MuiSelect-icon {
+ color: var(--text-secondary) !important;
+}
+
+/* ── MUI Modal & Dialog ── */
+[data-theme="dark"] .MuiModal-root .MuiBackdrop-root {
+ background-color: rgba(0, 0, 0, 0.7) !important;
+}
+[data-theme="dark"] .MuiDialog-paper {
+ background-color: var(--card-bg) !important;
+}
+
+/* ── MUI Tabs ── */
+[data-theme="dark"] .MuiTab-root {
+ color: var(--text-secondary) !important;
+}
+[data-theme="dark"] .MuiTab-root.Mui-selected {
+ color: var(--accent-primary) !important;
+}
+[data-theme="dark"] .MuiTabs-indicator {
+ background-color: var(--accent-primary) !important;
+}
+
+/* ── MUI Breadcrumbs ── */
+[data-theme="dark"] .MuiBreadcrumbs-root {
+ color: var(--text-secondary);
+}
+[data-theme="dark"] .MuiBreadcrumbs-separator {
+ color: var(--text-tertiary);
+}
+
+/* ── MUI Tooltip ── */
+[data-theme="dark"] .MuiTooltip-tooltip {
+ background-color: var(--bg-elevated) !important;
+ color: var(--text-primary) !important;
+ border: 1px solid var(--border-color);
+}
+
+/* ── MUI CircularProgress ── */
+[data-theme="dark"] .MuiCircularProgress-root {
+ color: var(--accent-primary) !important;
+}
+
+/* ── MUI Popover & Menu ── */
+[data-theme="dark"] .MuiPopover-paper {
+ background-color: var(--card-bg) !important;
+ border: 1px solid var(--border-color) !important;
+}
+[data-theme="dark"] .MuiMenu-paper {
+ background-color: var(--card-bg) !important;
+}
+[data-theme="dark"] .MuiMenuItem-root {
+ color: var(--text-primary) !important;
+}
+[data-theme="dark"] .MuiMenuItem-root:hover {
+ background-color: var(--bg-hover) !important;
+}
+
+/* ── MUI Link ── */
+[data-theme="dark"] .MuiLink-root {
+ color: var(--accent-primary) !important;
+}
+
+/* ── MUI Chip ── */
+[data-theme="dark"] .MuiChip-root {
+ background-color: var(--button-bg) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--border-color) !important;
+}
+
+/* ── MUI Warning icon ── */
+[data-theme="dark"] .MuiSvgIcon-root {
+ color: inherit;
+}
+
+/* ── Recharts (used across all pages) ── */
+[data-theme="dark"] .recharts-cartesian-grid line {
+ stroke: var(--chart-grid);
+}
+[data-theme="dark"] .recharts-text {
+ fill: var(--chart-text);
+}
+[data-theme="dark"] .recharts-default-tooltip {
+ background-color: var(--chart-tooltip-bg) !important;
+ border-color: var(--chart-tooltip-border) !important;
+ color: var(--text-primary) !important;
+}
+[data-theme="dark"] .recharts-tooltip-item {
+ color: var(--text-primary) !important;
+}
+[data-theme="dark"] .recharts-legend-item-text {
+ color: var(--text-secondary) !important;
+}
+
+/* Sidebar improvements for dark mode */
+[data-theme="dark"] .MuiDrawer-paper {
+ background-color: var(--sidebar-bg) !important;
+ border-right-color: var(--sidebar-border) !important;
+}
+
+[data-theme="dark"] .MuiDrawer-paper img {
+ filter: brightness(0.9);
+}
+
+/* Input and select improvements */
+[data-theme="dark"] input,
+[data-theme="dark"] select,
+[data-theme="dark"] textarea {
+ color: var(--text-primary);
+ background-color: var(--button-bg);
+ border-color: var(--border-color);
+}
+
+[data-theme="dark"] input::placeholder,
+[data-theme="dark"] textarea::placeholder {
+ color: var(--text-tertiary);
+}
+
+/* Better link colors in dark mode */
+[data-theme="dark"] a {
+ color: var(--accent-primary);
+}
+
+[data-theme="dark"] a:hover {
+ color: var(--accent-hover);
+}
diff --git a/src/pages/Allocations.js b/src/pages/Allocations.js
index e82ad847..0f7db21b 100644
--- a/src/pages/Allocations.js
+++ b/src/pages/Allocations.js
@@ -1,32 +1,60 @@
-import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-import RefreshIcon from "@mui/icons-material/Refresh";
-import { find, get, sortBy, toArray } from "lodash";
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+ useEffect,
+ useState,
+ useMemo,
+ useRef,
+ useCallback,
+} from "react";
import { useLocation, useNavigate } from "react-router";
+import { Dropdown } from "@carbon/react";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ PieChart,
+ Pie,
+ Cell,
+ Legend,
+ AreaChart,
+ Area,
+} from "recharts";
-import AllocationReport from "../components/allocationReport";
-import Controls from "../components/Controls";
-import FilterBreadcrumb from "../components/FilterBreadcrumb";
-import Header from "../components/Header";
import Page from "../components/Page";
+import Header from "../components/Header";
import Footer from "../components/Footer";
-import Subtitle from "../components/Subtitle";
-import Warnings from "../components/Warnings";
-import AllocationService from "../services/allocation";
+import AllocationSkeleton from "../components/AllocationSkeleton";
+import AllocationService from "../services/allocation.service";
import {
- checkCustomWindow,
- cumulativeToTotals,
+ rangeToCumulative,
parseFilters,
parseFiltersFromUrl,
- rangeToCumulative,
- toVerboseTimeRange,
+ toCurrency,
} from "../util";
-import { currencyCodes } from "../constants/currencyCodes";
+import {
+ getExchangeRates,
+ CURRENCY_OPTIONS,
+ FALLBACK_RATES,
+} from "../services/currency";
+import {
+ REFRESH_INTERVAL,
+ drilldownHierarchy,
+ filterPropertyMap,
+} from "../components/allocations/constants";
+import AllocationCostChart from "../components/allocations/AllocationCostChart";
+import AllocationTable from "../components/allocations/AllocationTable";
+import AllocationDetail from "../components/allocations/AllocationDetail";
+import Breadcrumbs from "../components/allocations/Breadcrumbs";
+import SummaryTiles from "../components/allocations/SummaryTiles";
+import "../css/allocations.css";
+
+/* ── Constants ─────────────────────────────────────── */
const windowOptions = [
+ { name: "Entire window", value: "month" },
{ name: "Today", value: "today" },
{ name: "Yesterday", value: "yesterday" },
{ name: "Last 24h", value: "24h" },
@@ -38,333 +66,202 @@ const windowOptions = [
];
const aggregationOptions = [
+ { name: "Namespace", value: "namespace" },
{ name: "Cluster", value: "cluster" },
{ name: "Node", value: "node" },
- { name: "Namespace", value: "namespace" },
{ name: "Controller Kind", value: "controllerKind" },
{ name: "Controller", value: "controller" },
- { name: "DaemonSet", value: "daemonset" },
- { name: "Deployment", value: "deployment" },
- { name: "Job", value: "job" },
- { name: "Service", value: "service" },
- { name: "StatefulSet", value: "statefulset" },
{ name: "Pod", value: "pod" },
{ name: "Container", value: "container" },
];
-const accumulateOptions = [
- { name: "Entire window", value: true },
- { name: "Daily", value: false },
-];
-
-// generateTitle generates a string title from a report object
-function generateTitle({ window, aggregateBy, accumulate }) {
- let windowName = get(find(windowOptions, { value: window }), "name", "");
- if (windowName === "") {
- if (checkCustomWindow(window)) {
- windowName = toVerboseTimeRange(window);
- } else {
- console.warn(`unknown window: ${window}`);
- }
- }
-
- let aggregationName = get(
- find(aggregationOptions, { value: aggregateBy }),
- "name",
- "",
- ).toLowerCase();
- if (aggregationName === "") {
- console.warn(`unknown aggregation: ${aggregateBy}`);
- }
-
- let str = `${windowName} by ${aggregationName}`;
-
- if (!accumulate) {
- str = `${str} daily`;
- }
-
- return str;
+/* ── CSV export ────────────────────────────────────── */
+
+function exportAllocationCSV(data, currency) {
+ const headers = [
+ "Name",
+ "CPU",
+ "GPU",
+ "RAM",
+ "PV",
+ "Network",
+ "Shared",
+ "Efficiency",
+ "Total Cost",
+ ];
+ const rows = data.map((a) => [
+ (a.name || "").replace(/,/g, " "),
+ toCurrency(a.cpuCost || 0, currency),
+ toCurrency(a.gpuCost || 0, currency),
+ toCurrency(a.ramCost || 0, currency),
+ toCurrency(a.pvCost || 0, currency),
+ toCurrency(a.networkCost || 0, currency),
+ toCurrency(a.sharedCost || 0, currency),
+ a.totalEfficiency ? `${(a.totalEfficiency * 100).toFixed(1)}%` : "—",
+ toCurrency(a.totalCost || 0, currency),
+ ]);
+ const csv = [headers.join(","), ...rows.map((r) => r.join(","))].join("\n");
+ const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = `allocations_${new Date().toISOString().slice(0, 10)}.csv`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
}
-const ReportsPage = () => {
- // Allocation data state
- const [allocationData, setAllocationData] = useState([]);
- const [cumulativeData, setCumulativeData] = useState({});
- const [totalData, setTotalData] = useState({});
-
- // Data fetching in-progress / error states
- const [loading, setLoading] = useState(true);
- const [errors, setErrors] = useState([]);
- const [includeIdle, setIncludeIdle] = useState();
+/* ═══════════════════════════════════════════════════════
+ Main Page
+ ═══════════════════════════════════════════════════════ */
- // When allocation data changes, create a cumulative version of it
- useEffect(() => {
- const cumulative = rangeToCumulative(allocationData, aggregateBy);
- setCumulativeData(toArray(cumulative));
- setTotalData(cumulativeToTotals(cumulative));
- }, [allocationData]);
-
- // State of controls on the page is generally derived from query parameters in the url.
- // Updates to these controls are pushed through the router using `searchParams.set()`.
- // Defaults are supplied in case of the absence of a query parameter.
+const Allocations = () => {
const routerLocation = useLocation();
- const searchParams = new URLSearchParams(routerLocation.search);
const navigate = useNavigate();
+ const searchParams = new URLSearchParams(routerLocation.search);
- const win = searchParams.get("window") || "7d";
+ // URL-driven state
+ const windowParam = searchParams.get("window") || "7d";
const aggregateBy = searchParams.get("agg") || "namespace";
const accumulate = searchParams.get("acc") === "true";
- const currency = searchParams.get("currency") || "USD";
- const title =
- searchParams.get("title") ||
- generateTitle({ window: win, aggregateBy, accumulate });
-
- // Derive filters directly from URL - URL is the single source of truth
const filterParam = searchParams.get("filter");
- const filters = useMemo(() => {
- return filterParam ? parseFiltersFromUrl(filterParam) : [];
- }, [filterParam]);
- // Validate and correct filters when URL or aggregateBy changes
+ const filters = useMemo(
+ () => (filterParam ? parseFiltersFromUrl(filterParam) : []),
+ [filterParam],
+ );
+
+ // Component state
+ const [allocationData, setAllocationData] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [isMock, setIsMock] = useState(false);
+ const [includeIdle, setIncludeIdle] = useState(true);
+ const [autoRefresh, setAutoRefresh] = useState(false);
+ const [lastUpdated, setLastUpdated] = useState(null);
+ const [currency, setCurrency] = useState(
+ () => localStorage.getItem("opencost-currency") || "USD",
+ );
+ const [exchangeRates, setExchangeRates] = useState(FALLBACK_RATES);
+ const [ratesLive, setRatesLive] = useState(false);
+ const [showNotif, setShowNotif] = useState(true);
+ const [selectedAlloc, setSelectedAlloc] = useState(null);
+ const mounted = useRef(true);
+
+ // Fetch exchange rates
useEffect(() => {
- // Hierarchy for aggregateBy levels
- const aggregateHierarchy = ["namespace", "controllerKind", "controller", "pod", "container"];
- // Hierarchy for filter properties (matches backend API - uses "controllerName" not "controller")
- const filterHierarchy = ["namespace", "controllerKind", "controllerName", "pod", "container"];
-
- // Map aggregateBy to expected number of filters and expected filter properties
- const aggregateToFilterCount = {
- namespace: 0,
- controllerKind: 1,
- controller: 2,
- pod: 3,
- container: 4,
+ let cancelled = false;
+ getExchangeRates().then(({ rates, isLive }) => {
+ if (cancelled) return;
+ setExchangeRates(rates);
+ setRatesLive(isLive);
+ });
+ return () => {
+ cancelled = true;
};
-
- const currentIndex = aggregateHierarchy.indexOf(aggregateBy);
- const currentFilters = filterParam ? parseFiltersFromUrl(filterParam) : [];
- const expectedFilterCount = aggregateToFilterCount[aggregateBy] || 0;
-
- // If we're at namespace level, there should be no filters
- if (currentIndex === 0 && currentFilters.length > 0) {
- const newSearchParams = new URLSearchParams(routerLocation.search);
- newSearchParams.delete("filter");
- const newSearch = `?${newSearchParams.toString()}`;
- if (routerLocation.search !== newSearch) {
- navigate({ search: newSearch }, { replace: true });
- }
- return;
- }
-
- // Validate that filter count matches expected level
- if (currentFilters.length > expectedFilterCount) {
- // Trim filters to match current aggregateBy level
- const trimmedFilters = currentFilters.slice(0, expectedFilterCount);
- const newSearchParams = new URLSearchParams(routerLocation.search);
- if (trimmedFilters.length > 0) {
- newSearchParams.set("filter", parseFilters(trimmedFilters));
- } else {
- newSearchParams.delete("filter");
- }
- const newSearch = `?${newSearchParams.toString()}`;
- if (routerLocation.search !== newSearch) {
- navigate({ search: newSearch }, { replace: true });
- }
- return;
- }
-
- // Validate that filter properties match expected hierarchy
- for (let i = 0; i < currentFilters.length; i++) {
- const filter = currentFilters[i];
- const expectedProperty = filterHierarchy[i];
- if (filter.property !== expectedProperty) {
- // Trim filters at the first mismatch
- const trimmedFilters = currentFilters.slice(0, i);
- const newSearchParams = new URLSearchParams(routerLocation.search);
- if (trimmedFilters.length > 0) {
- newSearchParams.set("filter", parseFilters(trimmedFilters));
+ }, []);
+
+ const handleCurrencyChange = (c) => {
+ setCurrency(c);
+ localStorage.setItem("opencost-currency", c);
+ };
+
+ // Compute cumulative data
+ const cumData = useMemo(() => {
+ const cum = rangeToCumulative(allocationData, aggregateBy);
+ return cum ? Object.values(cum) : [];
+ }, [allocationData, aggregateBy]);
+
+ // Currency conversion
+ const convertedCumData = useMemo(() => {
+ const rate = exchangeRates[currency] || 1;
+ if (rate === 1) return cumData;
+ return cumData.map((a) => ({
+ ...a,
+ cpuCost: (a.cpuCost || 0) * rate,
+ gpuCost: (a.gpuCost || 0) * rate,
+ ramCost: (a.ramCost || 0) * rate,
+ pvCost: (a.pvCost || 0) * rate,
+ networkCost: (a.networkCost || 0) * rate,
+ sharedCost: (a.sharedCost || 0) * rate,
+ externalCost: (a.externalCost || 0) * rate,
+ totalCost: (a.totalCost || 0) * rate,
+ }));
+ }, [cumData, currency, exchangeRates]);
+
+ const updateParams = (updates) => {
+ const params = new URLSearchParams(routerLocation.search);
+ Object.entries(updates).forEach(([k, v]) => {
+ if (v === null || v === undefined) params.delete(k);
+ else params.set(k, v);
+ });
+ navigate(`${routerLocation.pathname}?${params.toString()}`, {
+ replace: true,
+ });
+ };
+
+ // Fetch data
+ const fetchData = useCallback(
+ async (showLoading = true) => {
+ if (showLoading) setLoading(true);
+ try {
+ const resp = await AllocationService.fetchAllocation(
+ windowParam,
+ aggregateBy,
+ {
+ accumulate,
+ filters,
+ includeIdle,
+ },
+ );
+ if (!mounted.current) return;
+ if (resp.data && resp.data.length > 0) {
+ setAllocationData(resp.data);
} else {
- newSearchParams.delete("filter");
+ setAllocationData([]);
}
- const newSearch = `?${newSearchParams.toString()}`;
- if (routerLocation.search !== newSearch) {
- navigate({ search: newSearch }, { replace: true });
- }
- return;
+ setIsMock(!!resp.isMock);
+ setLastUpdated(new Date());
+ } catch (err) {
+ if (!mounted.current) return;
+ console.error("Failed to fetch allocations:", err);
+ setAllocationData([]);
+ } finally {
+ if (mounted.current) setLoading(false);
}
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [routerLocation.search, aggregateBy]);
+ },
+ [windowParam, aggregateBy, accumulate, filters, includeIdle],
+ );
- // When parameters which effect query results change, refetch the data.
useEffect(() => {
+ mounted.current = true;
+ setSelectedAlloc(null);
fetchData();
- }, [win, aggregateBy, accumulate, filters, includeIdle]);
+ return () => {
+ mounted.current = false;
+ };
+ }, [fetchData]);
- // Update currency warning whenever currency changes
useEffect(() => {
- if (currency !== "USD") {
- setErrors([{
- primary: "Currency Conversion in Use",
- secondary: "Forex rates may differ between the API and your cloud provider, potentially causing cost discrepancies. Always verify with your actual cloud bill."
- }]);
- } else {
- setErrors([]);
- }
- }, [currency]);
-
- async function fetchData() {
- setLoading(true);
- setErrors([]);
-
- try {
- const resp = await AllocationService.fetchAllocation(win, aggregateBy, {
- accumulate,
- filters,
- includeIdle,
- });
- if (resp.data && resp.data.length > 0) {
- const allocationRange = resp.data;
- for (const i in allocationRange) {
- // update cluster aggregations to use clusterName/clusterId names
- allocationRange[i] = sortBy(allocationRange[i], (a) => a.totalCost);
- }
- setAllocationData(allocationRange);
- } else {
- if (resp.message && resp.message.indexOf("boundary error") >= 0) {
- let match = resp.message.match(/(ETL is \d+\.\d+% complete)/);
- let secondary = "Try again after ETL build is complete";
- if (match.length > 0) {
- secondary = `${match[1]}. ${secondary}`;
- }
- setErrors([
- {
- primary: "Data unavailable while ETL is building",
- secondary: secondary,
- },
- ]);
- }
- setAllocationData([]);
- }
- } catch (err) {
- if (err.message.indexOf("404") === 0) {
- setErrors([
- {
- primary: "Failed to load report data",
- secondary:
- "Please update OpenCost to the latest version, then open an Issue on GitHub if problems persist.",
- },
- ]);
- } else {
- let secondary = "Please open an Issue on GitHub if problems persist.";
- if (err.message.length > 0) {
- secondary = err.message;
- }
- setErrors([
- {
- primary: "Failed to load report data",
- secondary: secondary,
- },
- ]);
- }
- setAllocationData([]);
- }
-
- setLoading(false);
- }
-
- // Handle breadcrumb navigation - navigate back to a specific filter level
- function handleBreadcrumbNavigate(level) {
- // Hierarchy for aggregateBy levels
- const aggregateHierarchy = ["namespace", "controllerKind", "controller", "pod", "container"];
-
- if (level === -1) {
- // Navigate to "All Results" - namespace level with no filters
- const newSearchParams = new URLSearchParams(routerLocation.search);
- newSearchParams.set("agg", "namespace");
- newSearchParams.delete("filter");
- navigate({
- search: `?${newSearchParams.toString()}`,
- });
- return;
- }
-
- // Navigate to a specific filter level
- const trimmedFilters = filters.slice(0, level + 1);
- if (trimmedFilters.length === 0) {
- const newSearchParams = new URLSearchParams(routerLocation.search);
- newSearchParams.set("agg", "namespace");
- newSearchParams.delete("filter");
- navigate({
- search: `?${newSearchParams.toString()}`,
- });
- return;
- }
+ if (!autoRefresh) return;
+ const timer = setInterval(() => fetchData(false), REFRESH_INTERVAL);
+ return () => clearInterval(timer);
+ }, [autoRefresh, fetchData]);
- // Determine the appropriate aggregateBy based on the number of filters
- // Number of filters corresponds to the next level in the hierarchy
- // 0 filters -> namespace, 1 filter -> controllerKind, 2 filters -> controller, etc.
- const targetAgg = aggregateHierarchy[trimmedFilters.length] || "namespace";
-
- const newSearchParams = new URLSearchParams(routerLocation.search);
- newSearchParams.set("agg", targetAgg);
- if (trimmedFilters.length > 0) {
- newSearchParams.set("filter", parseFilters(trimmedFilters));
- } else {
- newSearchParams.delete("filter");
- }
- navigate({
- search: `?${newSearchParams.toString()}`,
- });
- }
-
- // Drilldown function to navigate to next level of aggregation
+ // Drilldown
function drilldown(row) {
- // Define the hierarchy for drilldown
- const drilldownHierarchy = {
- namespace: "controllerKind",
- controllerKind: "controller",
- controller: "pod",
- pod: "container",
- };
-
const nextAgg = drilldownHierarchy[aggregateBy];
-
- // If we're at the deepest level, don't allow further drilldown
- if (!nextAgg) {
- return;
- }
+ if (!nextAgg || !row.name || row.name.trim() === "") return;
- // Create new filter for the current level
- // Ensure value is not empty and is a string
- if (!row.name || String(row.name).trim() === "") {
- return;
- }
-
- // Map aggregateBy to filter property name
- // Backend uses "controllerName" instead of "controller"
- const filterPropertyMap = {
- namespace: "namespace",
- controllerKind: "controllerKind",
- controller: "controllerName", // Backend expects "controllerName", not "controller"
- pod: "pod",
- container: "container",
- };
-
const filterProperty = filterPropertyMap[aggregateBy] || aggregateBy;
-
let filterValue = String(row.name).trim();
let updatedFilters = [...filters];
- // Controller names may come through as ":" (e.g. "deployment:foo").
- // Split these so controllerName filter matches backend expectations.
+ // Handle controller "kind:name" format
if (aggregateBy === "controller" && filterValue.includes(":")) {
const [maybeKind, ...nameParts] = filterValue.split(":");
const trimmedName = nameParts.join(":").trim();
- if (trimmedName.length > 0) {
- filterValue = trimmedName;
- }
-
+ if (trimmedName.length > 0) filterValue = trimmedName;
const normalizedKind = maybeKind.trim();
if (
normalizedKind.length > 0 &&
@@ -372,132 +269,255 @@ const ReportsPage = () => {
) {
updatedFilters = [
...updatedFilters,
- {
- property: "controllerKind",
- value: normalizedKind,
- },
+ { property: "controllerKind", value: normalizedKind },
];
}
}
- const newFilter = {
- property: filterProperty,
- value: filterValue,
- };
+ const newFilters = [
+ ...updatedFilters,
+ { property: filterProperty, value: filterValue },
+ ];
+ const newParams = new URLSearchParams(routerLocation.search);
+ newParams.set("agg", nextAgg);
+ newParams.set("filter", parseFilters(newFilters));
+ navigate({ search: `?${newParams.toString()}` });
+ }
- // Add to existing filters and update aggregateBy
- const newFilters = [...updatedFilters, newFilter];
-
- // Update URL parameters with new aggregateBy and filters
- const newSearchParams = new URLSearchParams(routerLocation.search);
- newSearchParams.set("agg", nextAgg);
- if (newFilters.length > 0) {
- newSearchParams.set("filter", parseFilters(newFilters));
- } else {
- newSearchParams.delete("filter");
+ // Breadcrumb navigation
+ function handleBreadcrumbNavigate(level) {
+ const aggregateHierarchy = [
+ "namespace",
+ "controllerKind",
+ "controller",
+ "pod",
+ "container",
+ ];
+ if (level === -1) {
+ const p = new URLSearchParams(routerLocation.search);
+ p.set("agg", "namespace");
+ p.delete("filter");
+ navigate({ search: `?${p.toString()}` });
+ return;
}
- navigate({
- search: `?${newSearchParams.toString()}`,
- });
+ const trimmedFilters = filters.slice(0, level + 1);
+ const targetAgg = aggregateHierarchy[trimmedFilters.length] || "namespace";
+ const p = new URLSearchParams(routerLocation.search);
+ p.set("agg", targetAgg);
+ if (trimmedFilters.length > 0)
+ p.set("filter", parseFilters(trimmedFilters));
+ else p.delete("filter");
+ navigate({ search: `?${p.toString()}` });
+ }
+
+ // Labels
+ const windowLabel =
+ windowOptions.find((w) => w.value === windowParam)?.name || windowParam;
+ const aggLabel =
+ aggregationOptions.find((a) => a.value === aggregateBy)?.name ||
+ aggregateBy;
+ const title = `${windowLabel} by ${aggLabel.toLowerCase()}${!accumulate ? " daily" : ""}`;
+
+ // Detail view
+ if (selectedAlloc) {
+ return (
+
+
+ );
}
return (
-
+ setSelectedAlloc(null)}
+ />
+
+
+
-