+
{formatCurrency(value)}
+
+
66 ? '#fa4d56' : percentage > 33 ? '#f1c21b' : '#42be65'
+ }}
+ />
+
+
+ );
+};
+
+const AssetsTable = ({ data, loading, aggregateBy, onRowClick }) => {
+ const [expandedRows, setExpandedRows] = useState({});
+
+ const headers = [
+ { key: 'name', header: 'Name' },
+ { key: 'type', header: 'Type' },
+ { key: 'category', header: 'Category' },
+ { key: 'provider', header: 'Provider' },
+ { key: 'efficiency', header: 'Efficiency' },
+ { key: 'totalCost', header: 'Total Cost' },
+ ];
+
+ // Find max cost for relative bar sizing
+ const maxCost = Math.max(...data.map(a => a.totalCost || 0));
+
+ const getIdlePercent = (asset) => {
+ if (asset.cpuBreakdown?.idle !== undefined) {
+ return asset.cpuBreakdown.idle;
+ }
+ if (asset.breakdown?.idle !== undefined) {
+ return asset.breakdown.idle;
+ }
+ return null;
+ };
+
+ const getRows = (assets) => {
+ return assets.map((asset, index) => {
+ const name = asset.name || asset.properties?.name || asset.properties?.cluster || asset.type || `Item ${index}`;
+ const idlePercent = getIdlePercent(asset);
+
+ return {
+ id: String(index),
+ name,
+ type: asset.type,
+ category: asset.properties?.category || '-',
+ provider: asset.properties?.provider || '-',
+ efficiency: idlePercent,
+ totalCost: asset.totalCost,
+ // Extra data for expanded view
+ cpuCores: asset.cpuCores,
+ ramBytes: asset.ramBytes,
+ cpuCost: asset.cpuCost,
+ ramCost: asset.ramCost,
+ gpuCost: asset.gpuCost,
+ cpuBreakdown: asset.cpuBreakdown,
+ ramBreakdown: asset.ramBreakdown,
+ breakdown: asset.breakdown,
+ minutes: asset.minutes,
+ original: asset
+ };
+ });
+ };
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ const rows = getRows(data);
+
+ const renderExpandedContent = (row) => {
+ const hasResources = row.cpuCores || row.ramBytes || row.cpuCost || row.ramCost || row.gpuCost;
+ const hasBreakdown = row.cpuBreakdown || row.ramBreakdown || row.breakdown;
+
+ return (
+
+ {hasResources && (
+
+
Resource Details
+
+ {row.cpuCores && (
+
+ CPU Cores
+ {row.cpuCores}
+
+ )}
+ {row.ramBytes && (
+
+ RAM
+ {formatBytes(row.ramBytes)}
+
+ )}
+ {row.cpuCost && (
+
+ CPU Cost
+ {formatCurrency(row.cpuCost)}
+
+ )}
+ {row.ramCost && (
+
+ RAM Cost
+ {formatCurrency(row.ramCost)}
+
+ )}
+ {row.gpuCost > 0 && (
+
+ GPU Cost
+ {formatCurrency(row.gpuCost)}
+
+ )}
+
+
+ )}
+
+ {hasBreakdown && (
+
+
Utilization Breakdown
+
+ {row.cpuBreakdown && (
+
+
CPU
+
+
+
User
+
+
{formatPercent(row.cpuBreakdown.user || 0)}
+
+
+
System
+
+
{formatPercent(row.cpuBreakdown.system || 0)}
+
+
+
Idle
+
+
{formatPercent(row.cpuBreakdown.idle || 0)}
+
+
+
+ )}
+ {row.ramBreakdown && (
+
+
RAM
+
+
+
User
+
+
{formatPercent(row.ramBreakdown.user || 0)}
+
+
+
System
+
+
{formatPercent(row.ramBreakdown.system || 0)}
+
+
+
Idle
+
+
{formatPercent(row.ramBreakdown.idle || 0)}
+
+
+
+ )}
+ {row.breakdown && !row.cpuBreakdown && !row.ramBreakdown && (
+
+
Storage
+
+
+
Used
+
+
{formatPercent(row.breakdown.user || 0)}
+
+
+
System
+
+
{formatPercent(row.breakdown.system || 0)}
+
+
+
Idle
+
+
{formatPercent(row.breakdown.idle || 0)}
+
+
+
+ )}
+
+
+ )}
+
+ {row.minutes && (
+
+
+ Duration: {(row.minutes / 60).toFixed(1)} hours ({(row.minutes / 1440).toFixed(1)} days)
+
+
+ )}
+
+ );
+ };
+
+ // Create a map of row IDs to original row data for quick lookup inside DataTable
+ const rowMap = {};
+ rows.forEach(row => {
+ rowMap[row.id] = row;
+ });
+
+ return (
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getTableProps,
+ getTableContainerProps,
+ getExpandedRowProps,
+ }) => (
+
+
+
+
+
+ {headers.map((header) => {
+ const { key, ...headerProps } = getHeaderProps({ header });
+ return (
+
+ {header.header}
+
+ );
+ })}
+
+
+
+ {rows.map((row) => {
+ // Get original row data from our rowMap (uses row.id)
+ const originalRow = rowMap[row.id];
+ const { key, ...rowProps } = getRowProps({ row });
+
+ // Handler to toggle row expansion when clicking anywhere on the row
+ const handleRowClick = (e) => {
+ // Find and click the expand button in this row
+ const expandButton = e.currentTarget.querySelector('button[aria-label*="Expand"], button.cds--table-expand__button');
+ if (expandButton) {
+ expandButton.click();
+ }
+ };
+
+ return (
+
+
+ {row.cells.map((cell) => {
+ if (cell.info.header === 'totalCost') {
+ return (
+
+
+
+ );
+ }
+ if (cell.info.header === 'efficiency') {
+ return (
+
+
+
+ );
+ }
+ return {cell.value};
+ })}
+
+
+ {originalRow ? renderExpandedContent(originalRow) : null}
+
+
+ );
+ })}
+
+
+
+ )}
+
+ );
+};
+
+export default AssetsTable;
diff --git a/src/components/Assets/EfficiencyGauge.js b/src/components/Assets/EfficiencyGauge.js
new file mode 100644
index 00000000..536d9b57
--- /dev/null
+++ b/src/components/Assets/EfficiencyGauge.js
@@ -0,0 +1,181 @@
+import React from 'react';
+import { Tile, ProgressBar } from '@carbon/react';
+import { DonutChart } from '@carbon/charts-react';
+
+const formatPercent = (value) => {
+ return `${(value * 100).toFixed(1)}%`;
+};
+
+const formatCurrency = (value) => {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: 2
+ }).format(value);
+};
+
+const EfficiencyGauge = ({ data, totalCost }) => {
+ // Calculate aggregated breakdown across all assets
+ let totalIdleCpu = 0;
+ let totalSystemCpu = 0;
+ let totalUserCpu = 0;
+ let totalIdleRam = 0;
+ let totalSystemRam = 0;
+ let totalUserRam = 0;
+ let cpuCount = 0;
+ let ramCount = 0;
+
+ data.forEach(asset => {
+ if (asset.cpuBreakdown) {
+ cpuCount++;
+ totalIdleCpu += asset.cpuBreakdown.idle || 0;
+ totalSystemCpu += asset.cpuBreakdown.system || 0;
+ totalUserCpu += asset.cpuBreakdown.user || 0;
+ }
+ if (asset.ramBreakdown) {
+ ramCount++;
+ totalIdleRam += asset.ramBreakdown.idle || 0;
+ totalSystemRam += asset.ramBreakdown.system || 0;
+ totalUserRam += asset.ramBreakdown.user || 0;
+ }
+ // For Disk assets with generic breakdown
+ if (asset.breakdown && !asset.cpuBreakdown && !asset.ramBreakdown) {
+ cpuCount++;
+ totalIdleCpu += asset.breakdown.idle || 0;
+ totalSystemCpu += asset.breakdown.system || 0;
+ totalUserCpu += asset.breakdown.user || 0;
+ }
+ });
+
+ const avgCpuIdle = cpuCount > 0 ? totalIdleCpu / cpuCount : 0;
+ const avgCpuSystem = cpuCount > 0 ? totalSystemCpu / cpuCount : 0;
+ const avgCpuUser = cpuCount > 0 ? totalUserCpu / cpuCount : 0;
+
+ const avgRamIdle = ramCount > 0 ? totalIdleRam / ramCount : 0;
+ const avgRamSystem = ramCount > 0 ? totalSystemRam / ramCount : 0;
+ const avgRamUser = ramCount > 0 ? totalUserRam / ramCount : 0;
+
+ const cpuChartData = [
+ { group: 'User (Active)', value: avgCpuUser },
+ { group: 'System', value: avgCpuSystem },
+ { group: 'Idle (Wasted)', value: avgCpuIdle }
+ ];
+
+ const ramChartData = [
+ { group: 'User (Active)', value: avgRamUser },
+ { group: 'System', value: avgRamSystem },
+ { group: 'Idle (Wasted)', value: avgRamIdle }
+ ];
+
+ const chartOptions = (title) => ({
+ title,
+ resizable: true,
+ donut: {
+ center: {
+ label: 'Utilization'
+ }
+ },
+ height: '200px',
+ legend: {
+ alignment: 'center',
+ position: 'bottom'
+ },
+ color: {
+ scale: {
+ 'User (Active)': '#42be65',
+ 'System': '#78a9ff',
+ 'Idle (Wasted)': '#fa4d56'
+ }
+ },
+ pie: {
+ labels: {
+ enabled: false
+ }
+ }
+ });
+
+ const hasData = cpuCount > 0 || ramCount > 0;
+
+ if (!hasData) {
+ return (
+
+ Resource Efficiency
+
+ No breakdown data available. Enable CPU/RAM mode breakdown in OpenCost to see efficiency metrics.
+
+
+ );
+ }
+
+ // Calculate potential savings
+ const avgIdle = ((avgCpuIdle + avgRamIdle) / 2);
+ const potentialSavings = totalCost * avgIdle;
+
+ return (
+
+
+
Resource Efficiency Analysis
+
+ Potential Monthly Savings:
+ {formatCurrency(potentialSavings)}
+
+
+ {cpuCount > 0 && (
+
+
+
+
Active: {formatPercent(avgCpuUser + avgCpuSystem)}
+
0.7 ? 'error' : avgCpuIdle > 0.4 ? 'active' : 'finished'}
+ hideLabel
+ />
+
+
+ )}
+
+ {ramCount > 0 && (
+
+
+
+
Active: {formatPercent(avgRamUser + avgRamSystem)}
+
0.7 ? 'error' : avgRamIdle > 0.4 ? 'active' : 'finished'}
+ hideLabel
+ />
+
+
+ )}
+
+ {avgIdle > 0.7 && (
+
+ ⚠️ High idle resources detected! Consider right-sizing your infrastructure.
+
+ )}
+ {avgIdle <= 0.7 && avgIdle > 0.4 && (
+
+ 💡 Moderate idle capacity. Review node sizing for optimization opportunities.
+
+ )}
+ {avgIdle <= 0.4 && (
+
+ ✅ Good resource utilization! Your infrastructure is well-optimized.
+
+ )}
+
+ );
+};
+
+export default EfficiencyGauge;
diff --git a/src/components/Nav/SidebarNav.js b/src/components/Nav/SidebarNav.js
index 781184d7..0d34e16c 100644
--- a/src/components/Nav/SidebarNav.js
+++ b/src/components/Nav/SidebarNav.js
@@ -2,7 +2,7 @@ import * as React from "react";
import { Drawer, List } from "@mui/material";
import { NavItem } from "./NavItem";
-import { BarChart, Cloud } from "@mui/icons-material";
+import { BarChart, Cloud, Storage } from "@mui/icons-material";
const logo = new URL("../../images/logo.png", import.meta.url).href;
@@ -23,6 +23,7 @@ const SidebarNav = ({ active }) => {
href: "/allocation",
icon:
,
},
+ { name: "Assets", href: "/assets", icon:
},
{ name: "Cloud Costs", href: "/cloud", icon:
},
{ name: "External Costs", href: "/external-costs", icon:
},
];
diff --git a/src/pages/Assets.js b/src/pages/Assets.js
new file mode 100644
index 00000000..ebb19344
--- /dev/null
+++ b/src/pages/Assets.js
@@ -0,0 +1,231 @@
+import React, { useState, useEffect } from "react";
+import {
+ Grid,
+ Column,
+ Theme,
+ Content,
+ InlineNotification,
+ Loading,
+ Toggle
+} from "@carbon/react";
+import { Sun, Moon } from "@carbon/icons-react";
+import AssetsService from "../services/assets";
+import { mockAssetsData } from "../services/assets.mock";
+import AssetsTable from "../components/Assets/AssetsTable";
+import AssetFilters from "../components/Assets/AssetFilters";
+import AssetMetrics from "../components/Assets/AssetMetrics";
+import AssetTreemap from "../components/Assets/AssetTreemap";
+import EfficiencyGauge from "../components/Assets/EfficiencyGauge";
+import Page from "../components/Page";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import "@carbon/charts/styles.css";
+import "../styles/assets.css";
+
+const Assets = () => {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [data, setData] = useState([]);
+ const [window, setWindow] = useState("7d");
+ const [aggregateBy, setAggregateBy] = useState("type");
+ const [includeIdle, setIncludeIdle] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [filters, setFilters] = useState([]);
+ const [selectedAsset, setSelectedAsset] = useState(null);
+ const [isDarkMode, setIsDarkMode] = useState(false); // Light mode by default
+
+ useEffect(() => {
+ fetchData();
+ }, [window, aggregateBy, filters, includeIdle]);
+
+ const fetchData = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ let response;
+ try {
+ response = await AssetsService.fetchAssets(window, aggregateBy, {
+ filters,
+ accumulate: true,
+ params: { disableAdjustments: !includeIdle }
+ });
+ } catch (apiError) {
+ // API failed, use mock data silently
+ console.info("API unavailable, using mock data for demonstration");
+ response = mockAssetsData;
+ }
+
+ let assets = [];
+ if (response?.data && response.data.length > 0) {
+ const timeSeries = response.data[0];
+ Object.entries(timeSeries).forEach(([key, item]) => {
+ item.name = key;
+ assets.push(item);
+ });
+ }
+ setData(assets);
+ } catch (error) {
+ console.warn("Using empty data due to error:", error);
+ setError("Failed to load assets data. Please try again.");
+ setData([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+
+ // Filter data based on search and selected asset
+ const filteredData = data.filter(item => {
+ // Search filter
+ if (searchTerm) {
+ const name = item.name || item.properties?.name || item.properties?.cluster || item.type || "";
+ if (!name.toLowerCase().includes(searchTerm.toLowerCase())) {
+ return false;
+ }
+ }
+
+ // Selected asset filter (from treemap click)
+ if (selectedAsset) {
+ return item.name === selectedAsset.name || item.type === selectedAsset.type;
+ }
+
+ return true;
+ });
+
+ // Calculate total cost for efficiency gauge
+ const totalCost = data.reduce((sum, asset) => sum + (asset.totalCost || 0), 0);
+
+ const handleTreemapClick = (asset) => {
+ if (selectedAsset && selectedAsset.name === asset.name) {
+ // Toggle off if clicking the same asset
+ setSelectedAsset(null);
+ } else {
+ setSelectedAsset(asset);
+ }
+ };
+
+ const clearSelection = () => {
+ setSelectedAsset(null);
+ };
+
+ const currentTheme = isDarkMode ? "g100" : "white";
+
+ return (
+
+
+
+
+
+
+
+ {/* Page Header */}
+
+ Infrastructure Assets
+
+ Monitor costs, analyze efficiency, and identify optimization opportunities across your infrastructure.
+
+
+
+ {/* Error State */}
+ {error && (
+
+ setError(null)}
+ />
+
+ )}
+
+ {/* Filters Section */}
+
+
+
+
+ {/* Loading State */}
+ {loading && (
+
+
+
+ )}
+
+ {/* Main Content (when not loading) */}
+ {!loading && (
+ <>
+ {/* Hero Metrics */}
+
+
+
+
+ {/* Visualizations Row */}
+
+
+
+
+
+
+
+
+ {/* Selected Asset Filter Indicator */}
+ {selectedAsset && (
+
+
+
+ )}
+
+ {/* Data Table */}
+
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default Assets;
diff --git a/src/route.js b/src/route.js
index 919717b2..d80f83c2 100644
--- a/src/route.js
+++ b/src/route.js
@@ -4,6 +4,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import Allocations from "./pages/Allocations.js";
+import Assets from "./pages/Assets.js";
import CloudCosts from "./pages/CloudCosts.js";
import ExternalCosts from "./pages/ExternalCosts.js";
@@ -16,6 +17,7 @@ const RouteSet = () => {
} />
} />
+ } />
} />
} />
diff --git a/src/services/assets.js b/src/services/assets.js
new file mode 100644
index 00000000..e0e53145
--- /dev/null
+++ b/src/services/assets.js
@@ -0,0 +1,33 @@
+import { assign } from "lodash";
+import client from "./api_client";
+
+const AssetsService = {
+ fetchAssets: async (window, aggregate, options = {}) => {
+ let params = {
+ window,
+ aggregate,
+ accumulate: options.accumulate ?? false,
+ filter: options.filters,
+ disableAdjustments: false,
+ format: "json",
+ };
+
+ if (options.limit) {
+ params.limit = options.limit;
+ }
+
+ if (options.offset) {
+ params.offset = options.offset;
+ }
+
+ // Pass custom properties if needed
+ if (options.params) {
+ params = assign(params, options.params);
+ }
+
+ // api_client baseURL is already configured
+ return client.get("/model/assets", { params }).then(response => response.data);
+ }
+};
+
+export default AssetsService;
diff --git a/src/services/assets.mock.js b/src/services/assets.mock.js
new file mode 100644
index 00000000..ee61c5ae
--- /dev/null
+++ b/src/services/assets.mock.js
@@ -0,0 +1,353 @@
+// Enhanced mock data with more diverse assets for testing
+export const mockAssetsData = {
+ code: 200,
+ data: [
+ {
+ ClusterManagement: {
+ type: "ClusterManagement",
+ properties: {
+ category: "Management",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ },
+ labels: {
+ "cost-center": "platform",
+ "environment": "production",
+ namespace: "kube-system",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ minutes: 10080.0,
+ totalCost: 24.50,
+ },
+ "Node-prod-1": {
+ type: "Node",
+ properties: {
+ category: "Compute",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ name: "gke-prod-node-1",
+ },
+ labels: {
+ "cost-center": "engineering",
+ "environment": "production",
+ namespace: "default",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ nodeType: "e2-standard-4",
+ cpuCores: 4.0,
+ ramBytes: 16106127360,
+ cpuCoreHours: 644.67,
+ ramByteHours: 2592985251840,
+ GPUHours: 0.0,
+ cpuBreakdown: {
+ idle: 0.65,
+ other: 0.02,
+ system: 0.08,
+ user: 0.25,
+ },
+ ramBreakdown: {
+ idle: 0.72,
+ other: 0,
+ system: 0.03,
+ user: 0.25,
+ },
+ preemptible: 0.0,
+ discount: 0.15,
+ cpuCost: 45.50,
+ gpuCost: 0.0,
+ gpuCount: 0.0,
+ ramCost: 22.30,
+ adjustment: -8.20,
+ totalCost: 59.60,
+ },
+ "Node-prod-2": {
+ type: "Node",
+ properties: {
+ category: "Compute",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ name: "gke-prod-node-2",
+ },
+ labels: {
+ "cost-center": "engineering",
+ "environment": "production",
+ namespace: "default",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ nodeType: "e2-standard-8",
+ cpuCores: 8.0,
+ ramBytes: 32212254720,
+ cpuCoreHours: 1289.33,
+ ramByteHours: 5185970503680,
+ GPUHours: 0.0,
+ cpuBreakdown: {
+ idle: 0.45,
+ other: 0.03,
+ system: 0.12,
+ user: 0.40,
+ },
+ ramBreakdown: {
+ idle: 0.38,
+ other: 0,
+ system: 0.07,
+ user: 0.55,
+ },
+ preemptible: 0.0,
+ discount: 0.20,
+ cpuCost: 91.00,
+ gpuCost: 0.0,
+ gpuCount: 0.0,
+ ramCost: 44.60,
+ adjustment: -18.40,
+ totalCost: 117.20,
+ },
+ "Disk-boot": {
+ type: "Disk",
+ properties: {
+ category: "Storage",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ name: "persistent-disk-boot",
+ },
+ labels: {
+ "cost-center": "infrastructure",
+ namespace: "kube-system",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ byteHours: 80541516519424.0,
+ bytes: 107374182400, // 100GB
+ byteHoursUsed: 32216606607769.6,
+ byteUsageMax: null,
+ breakdown: {
+ idle: 0.60,
+ other: 0,
+ system: 0.10,
+ user: 0.30,
+ },
+ adjustment: -2.10,
+ totalCost: 8.40,
+ storageClass: "pd-standard",
+ volumeName: "pvc-boot-volume",
+ claimName: "",
+ claimNamespace: "",
+ },
+ "Disk-data": {
+ type: "Disk",
+ properties: {
+ category: "Storage",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ name: "persistent-disk-data",
+ },
+ labels: {
+ "cost-center": "data",
+ namespace: "databases",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ byteHours: 322122547200.0,
+ bytes: 536870912000, // 500GB
+ byteHoursUsed: 289910292480,
+ byteUsageMax: null,
+ breakdown: {
+ idle: 0.10,
+ other: 0,
+ system: 0.05,
+ user: 0.85,
+ },
+ adjustment: -4.50,
+ totalCost: 35.80,
+ storageClass: "pd-ssd",
+ volumeName: "pvc-postgresql-data",
+ claimName: "postgres-data-claim",
+ claimNamespace: "databases",
+ },
+ LoadBalancer: {
+ type: "LoadBalancer",
+ properties: {
+ category: "Network",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ name: "ingress-nginx/ingress-controller",
+ providerID: "35.202.154.180",
+ },
+ labels: {
+ "cost-center": "platform",
+ namespace: "ingress-nginx",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ adjustment: 0.0,
+ totalCost: 18.20,
+ },
+ Network: {
+ type: "Network",
+ properties: {
+ category: "Network",
+ provider: "GCP",
+ project: "production-cluster",
+ service: "Kubernetes",
+ cluster: "cluster-prod-us",
+ },
+ labels: {
+ "cost-center": "platform",
+ "goog-k8s-cluster-location": "us-central1-a",
+ "goog-k8s-cluster-name": "cluster-prod-us",
+ namespace: "kube-system",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-23T00:00:00Z",
+ minutes: 7200.0,
+ adjustment: -0.0,
+ totalCost: 12.45,
+ },
+ "GPU-Node": {
+ type: "Node",
+ properties: {
+ category: "Compute",
+ provider: "GCP",
+ project: "ml-training",
+ service: "Kubernetes",
+ cluster: "cluster-ml-us",
+ name: "gke-ml-gpu-node",
+ },
+ labels: {
+ "cost-center": "ml-platform",
+ "environment": "production",
+ namespace: "ml-training",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 4800.0, // only ran for ~80 hours
+ nodeType: "n1-standard-8-nvidia-tesla-t4",
+ cpuCores: 8.0,
+ ramBytes: 30064771072,
+ cpuCoreHours: 640.0,
+ ramByteHours: 2405181685760,
+ GPUHours: 80.0,
+ cpuBreakdown: {
+ idle: 0.85, // High idle - expensive underutilized GPU node
+ other: 0.01,
+ system: 0.04,
+ user: 0.10,
+ },
+ ramBreakdown: {
+ idle: 0.90,
+ other: 0,
+ system: 0.02,
+ user: 0.08,
+ },
+ preemptible: 0.0,
+ discount: 0.0,
+ cpuCost: 32.00,
+ gpuCost: 280.00,
+ gpuCount: 1.0,
+ ramCost: 15.20,
+ adjustment: 0.0,
+ totalCost: 327.20,
+ },
+ "AWS-Node-staging": {
+ type: "Node",
+ properties: {
+ category: "Compute",
+ provider: "AWS",
+ project: "staging-env",
+ service: "EKS",
+ cluster: "cluster-staging-east",
+ name: "eks-staging-node-1",
+ },
+ labels: {
+ "cost-center": "engineering",
+ "environment": "staging",
+ namespace: "default",
+ },
+ window: {
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-25T00:00:00Z",
+ },
+ start: "2023-07-18T00:00:00Z",
+ end: "2023-07-24T17:10:00Z",
+ minutes: 9670.0,
+ nodeType: "m5.large",
+ cpuCores: 2.0,
+ ramBytes: 8589934592,
+ cpuCoreHours: 322.33,
+ ramByteHours: 1382296985600,
+ GPUHours: 0.0,
+ cpuBreakdown: {
+ idle: 0.55,
+ other: 0.02,
+ system: 0.08,
+ user: 0.35,
+ },
+ ramBreakdown: {
+ idle: 0.48,
+ other: 0,
+ system: 0.05,
+ user: 0.47,
+ },
+ preemptible: 0.0,
+ discount: 0.10,
+ cpuCost: 18.50,
+ gpuCost: 0.0,
+ gpuCount: 0.0,
+ ramCost: 9.20,
+ adjustment: -2.80,
+ totalCost: 24.90,
+ },
+ },
+ ],
+};
diff --git a/src/styles/assets.css b/src/styles/assets.css
new file mode 100644
index 00000000..92facc13
--- /dev/null
+++ b/src/styles/assets.css
@@ -0,0 +1,992 @@
+/* Assets Page Styles - Light/Dark Theme Support */
+
+/* ========================================
+ LIGHT MODE (Default)
+ ======================================== */
+.light-mode .assets-page-content {
+ padding: 2rem;
+ background-color: #f4f4f4;
+ min-height: calc(100vh - 48px);
+}
+
+/* Override Carbon Content component white background */
+.light-mode .cds--content,
+.light-mode.assets-page .cds--content {
+ background-color: #f4f4f4 !important;
+}
+
+.light-mode .assets-header h1 {
+ font-size: 2.5rem;
+ font-weight: 300;
+ color: #161616;
+ margin-bottom: 0.5rem;
+}
+
+.light-mode .assets-subtitle {
+ font-size: 1rem;
+ color: #525252;
+ margin-bottom: 1.5rem;
+}
+
+/* Light mode tiles */
+.light-mode .asset-metric-tile,
+.light-mode .asset-metric-tile.cds--tile,
+.light-mode .asset-treemap-tile,
+.light-mode .asset-treemap-tile.cds--tile,
+.light-mode .efficiency-gauge-tile,
+.light-mode .efficiency-gauge-tile.cds--tile {
+ background-color: #ffffff !important;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.light-mode .metric-label {
+ color: #525252;
+}
+
+.light-mode .metric-subtext {
+ color: #6f6f6f;
+}
+
+.light-mode .treemap-header h4,
+.light-mode .efficiency-header h4 {
+ color: #161616;
+}
+
+.light-mode .legend-label {
+ color: #525252;
+}
+
+.light-mode .savings-callout {
+ background-color: #e0e0e0;
+}
+
+.light-mode .savings-label {
+ color: #525252;
+}
+
+.light-mode .efficiency-insight {
+ background-color: transparent;
+}
+
+.light-mode .no-data-message {
+ color: #6f6f6f;
+}
+
+/* Light mode filters */
+.light-mode .assets-filters-section {
+ background-color: #ffffff !important;
+ border: 1px solid #e0e0e0;
+}
+
+/* Light mode table */
+.light-mode .cds--data-table-container {
+ background-color: #ffffff !important;
+}
+
+.light-mode .cost-bar-track {
+ background-color: #e0e0e0;
+}
+
+.light-mode .cost-value {
+ color: #161616;
+}
+
+.light-mode .expanded-row-content {
+ background-color: #f4f4f4 !important;
+}
+
+.light-mode .resource-item {
+ background-color: #ffffff;
+}
+
+.light-mode .resource-label {
+ color: #6f6f6f;
+}
+
+.light-mode .resource-value {
+ color: #161616;
+}
+
+.light-mode .breakdown-label {
+ color: #161616;
+}
+
+.light-mode .breakdown-bar span {
+ color: #525252;
+}
+
+.light-mode .duration-info {
+ color: #6f6f6f;
+}
+
+.light-mode .treemap-hint {
+ color: #6f6f6f;
+}
+
+/* ========================================
+ DARK MODE
+ ======================================== */
+.dark-mode .assets-page-content {
+ padding: 2rem;
+ background-color: #161616;
+ min-height: calc(100vh - 48px);
+}
+
+.dark-mode .assets-header h1 {
+ font-size: 2.5rem;
+ font-weight: 300;
+ color: #f4f4f4;
+ margin-bottom: 0.5rem;
+}
+
+.dark-mode .assets-subtitle {
+ font-size: 1rem;
+ color: #c6c6c6;
+ margin-bottom: 1.5rem;
+}
+
+/* Dark mode tiles */
+.dark-mode .asset-metric-tile,
+.dark-mode .asset-metric-tile.cds--tile,
+.dark-mode .asset-treemap-tile,
+.dark-mode .asset-treemap-tile.cds--tile,
+.dark-mode .efficiency-gauge-tile,
+.dark-mode .efficiency-gauge-tile.cds--tile {
+ background-color: #262626 !important;
+}
+
+.dark-mode .metric-label {
+ color: #c6c6c6;
+}
+
+.dark-mode .metric-subtext {
+ color: #8d8d8d;
+}
+
+.dark-mode .treemap-header h4,
+.dark-mode .efficiency-header h4 {
+ color: #f4f4f4;
+}
+
+.dark-mode .legend-label {
+ color: #c6c6c6;
+}
+
+.dark-mode .savings-callout {
+ background-color: #393939;
+}
+
+.dark-mode .savings-label {
+ color: #c6c6c6;
+}
+
+.dark-mode .efficiency-insight {
+ background-color: transparent;
+}
+
+.dark-mode .no-data-message {
+ color: #8d8d8d;
+}
+
+/* Dark mode filters */
+.dark-mode .assets-filters-section {
+ background-color: #262626 !important;
+}
+
+.dark-mode .assets-filters-section .cds--search-input,
+.dark-mode .assets-filters-section .cds--select-input {
+ background-color: #393939 !important;
+ border-color: #525252 !important;
+ color: #f4f4f4 !important;
+}
+
+.dark-mode .assets-filters-section .cds--label {
+ color: #c6c6c6 !important;
+}
+
+.dark-mode .assets-filters-section .cds--checkbox-label-text {
+ color: #f4f4f4 !important;
+}
+
+/* Dark mode table */
+.dark-mode .cds--data-table-container {
+ background-color: #262626 !important;
+}
+
+.dark-mode .cds--data-table thead {
+ background-color: #393939 !important;
+}
+
+.dark-mode .cds--data-table th {
+ background-color: #393939 !important;
+ color: #f4f4f4 !important;
+}
+
+.dark-mode .cds--data-table td {
+ background-color: #262626 !important;
+ color: #f4f4f4 !important;
+ border-bottom: 1px solid #393939 !important;
+}
+
+.dark-mode .cds--data-table tr:hover td {
+ background-color: #353535 !important;
+}
+
+.dark-mode .cds--data-table-header {
+ background-color: #262626 !important;
+}
+
+.dark-mode .cds--data-table-header__title {
+ color: #f4f4f4 !important;
+}
+
+.dark-mode .cds--data-table-header__description {
+ color: #c6c6c6 !important;
+}
+
+.dark-mode .cost-bar-track {
+ background-color: #393939;
+}
+
+.dark-mode .cost-value {
+ color: #f4f4f4;
+}
+
+.dark-mode .expanded-row-content {
+ background-color: #1c1c1c !important;
+}
+
+.dark-mode .resource-item {
+ background-color: #262626;
+}
+
+.dark-mode .resource-label {
+ color: #8d8d8d;
+}
+
+.dark-mode .resource-value {
+ color: #f4f4f4;
+}
+
+.dark-mode .breakdown-label {
+ color: #f4f4f4;
+}
+
+.dark-mode .breakdown-bar span {
+ color: #c6c6c6;
+}
+
+.dark-mode .duration-info {
+ color: #8d8d8d;
+}
+
+.dark-mode .treemap-hint {
+ color: #8d8d8d;
+}
+
+.dark-mode .treemap-tooltip {
+ background-color: #393939 !important;
+}
+
+.dark-mode .tooltip-name {
+ color: #f4f4f4;
+}
+
+.dark-mode .tooltip-category,
+.dark-mode .tooltip-provider {
+ color: #c6c6c6;
+}
+
+/* Dark mode Carbon Charts text visibility */
+.dark-mode .efficiency-gauge-tile text,
+.dark-mode .efficiency-gauge-tile .cds--cc--title,
+.dark-mode .efficiency-gauge-tile .bx--cc--title,
+.dark-mode .efficiency-gauge-tile tspan,
+.dark-mode .efficiency-gauge-tile .chart-title,
+.dark-mode .efficiency-gauge-tile [class*="title"],
+.dark-mode .efficiency-gauge-tile .donut-title {
+ fill: #f4f4f4 !important;
+ color: #f4f4f4 !important;
+}
+
+/* Chart legend text */
+.dark-mode .efficiency-gauge-tile .cds--cc--legend text,
+.dark-mode .efficiency-gauge-tile .bx--cc--legend text,
+.dark-mode .efficiency-gauge-tile .legend-item,
+.dark-mode .efficiency-gauge-tile [class*="legend"] text,
+.dark-mode .efficiency-gauge-tile [class*="legend"] span {
+ fill: #c6c6c6 !important;
+ color: #c6c6c6 !important;
+}
+
+/* Carbon Charts specific selectors */
+.dark-mode .efficiency-gauge-tile .cds--cc--legend-item text,
+.dark-mode .efficiency-gauge-tile .bx--cc--legend-item text,
+.dark-mode .efficiency-gauge-tile .cds--cc--legend-item,
+.dark-mode .efficiency-gauge-tile .bx--cc--legend-item {
+ fill: #c6c6c6 !important;
+ color: #c6c6c6 !important;
+}
+
+/* Donut center label */
+.dark-mode .efficiency-gauge-tile .cds--cc--pie-label,
+.dark-mode .efficiency-gauge-tile .bx--cc--pie-label,
+.dark-mode .efficiency-gauge-tile [class*="center-label"],
+.dark-mode .efficiency-gauge-tile [class*="donut-center"] {
+ fill: #f4f4f4 !important;
+ color: #f4f4f4 !important;
+}
+
+/* Force all SVG text in charts to be light */
+.dark-mode .efficiency-gauge-tile svg text {
+ fill: #c6c6c6 !important;
+}
+
+.dark-mode .efficiency-gauge-tile svg .chart-holder text {
+ fill: #c6c6c6 !important;
+}
+
+/* Carbon Charts wrapper and container */
+.dark-mode .efficiency-gauge-tile .cds--cc,
+.dark-mode .efficiency-gauge-tile .bx--cc {
+ color: #f4f4f4 !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--cc p,
+.dark-mode .efficiency-gauge-tile .bx--cc p,
+.dark-mode .efficiency-gauge-tile .cds--cc span,
+.dark-mode .efficiency-gauge-tile .bx--cc span {
+ color: #c6c6c6 !important;
+}
+
+.dark-mode .utilization-bar span {
+ color: #c6c6c6 !important;
+}
+
+/* Dark mode Carbon Charts toolbar icons */
+.dark-mode .efficiency-gauge-tile .cds--cc--toolbar button,
+.dark-mode .efficiency-gauge-tile .bx--cc--toolbar button,
+.dark-mode .efficiency-gauge-tile [class*="toolbar"] button,
+.dark-mode .efficiency-gauge-tile .chart-toolbar button {
+ color: #f4f4f4 !important;
+ fill: #f4f4f4 !important;
+ background: transparent !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--cc--toolbar button svg,
+.dark-mode .efficiency-gauge-tile .bx--cc--toolbar button svg,
+.dark-mode .efficiency-gauge-tile [class*="toolbar"] button svg,
+.dark-mode .efficiency-gauge-tile .chart-toolbar button svg {
+ fill: #f4f4f4 !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--cc--toolbar button:hover,
+.dark-mode .efficiency-gauge-tile .bx--cc--toolbar button:hover,
+.dark-mode .efficiency-gauge-tile [class*="toolbar"] button:hover,
+.dark-mode .efficiency-gauge-tile .chart-toolbar button:hover {
+ background: transparent !important;
+ color: #f4f4f4 !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--cc--toolbar button:hover svg,
+.dark-mode .efficiency-gauge-tile .bx--cc--toolbar button:hover svg,
+.dark-mode .efficiency-gauge-tile [class*="toolbar"] button:hover svg,
+.dark-mode .efficiency-gauge-tile .chart-toolbar button:hover svg {
+ fill: #f4f4f4 !important;
+}
+
+/* Dark mode Carbon Charts tooltips and popovers */
+.dark-mode .cds--tooltip,
+.dark-mode .bx--tooltip,
+.dark-mode .cds--popover,
+.dark-mode .bx--popover,
+.dark-mode .cds--tooltip-content,
+.dark-mode .bx--tooltip-content,
+.dark-mode .cds--popover-content,
+.dark-mode .bx--popover-content,
+.dark-mode .cds--toggletip,
+.dark-mode .cds--toggletip-content {
+ background-color: #393939 !important;
+ color: #f4f4f4 !important;
+}
+
+/* Fix Carbon Charts toolbar button hover/focus states */
+.dark-mode .efficiency-gauge-tile button:focus,
+.dark-mode .efficiency-gauge-tile button:active {
+ background-color: transparent !important;
+ box-shadow: none !important;
+ outline: none !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--overflow-menu,
+.dark-mode .efficiency-gauge-tile .bx--overflow-menu {
+ background-color: transparent !important;
+}
+
+.dark-mode .efficiency-gauge-tile .cds--overflow-menu:hover,
+.dark-mode .efficiency-gauge-tile .bx--overflow-menu:hover,
+.dark-mode .efficiency-gauge-tile .cds--overflow-menu:focus,
+.dark-mode .efficiency-gauge-tile .bx--overflow-menu:focus {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Light mode Carbon Charts text */
+.light-mode .efficiency-gauge-tile text,
+.light-mode .efficiency-gauge-tile .cds--cc--title,
+.light-mode .efficiency-gauge-tile .bx--cc--title,
+.light-mode .efficiency-gauge-tile tspan {
+ fill: #161616 !important;
+ color: #161616 !important;
+}
+
+.light-mode .efficiency-gauge-tile .cds--cc--legend text,
+.light-mode .efficiency-gauge-tile .bx--cc--legend text {
+ fill: #525252 !important;
+}
+
+.light-mode .utilization-bar span {
+ color: #525252 !important;
+}
+
+/* Treemap cell text styling */
+.treemap-cell-text {
+ font-size: 12px;
+ font-weight: 600;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.treemap-cell-cost {
+ font-size: 11px;
+ font-weight: 500;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Light mode treemap - ensure text is visible on colored backgrounds */
+.light-mode .asset-treemap-tile .recharts-treemap-tile text {
+ fill: #ffffff !important;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.dark-mode .asset-treemap-tile .recharts-treemap-tile text {
+ fill: #ffffff !important;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+/* ========================================
+ SHARED STYLES (Both Themes)
+ ======================================== */
+.assets-page {
+ min-height: 100vh;
+}
+
+.assets-page-grid {
+ gap: 1rem;
+}
+
+.assets-header {
+ margin-bottom: 1rem;
+}
+
+/* Theme Toggle */
+.theme-toggle-container {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.theme-icon {
+ opacity: 0.7;
+}
+
+.light-mode .theme-icon {
+ color: #161616;
+}
+
+.dark-mode .theme-icon {
+ color: #f4f4f4;
+}
+
+/* Filters Section */
+.assets-filters-section {
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ border-radius: 4px;
+}
+
+.asset-filters {
+ width: 100%;
+}
+
+.filters-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ align-items: flex-end;
+}
+
+.filters-row-primary {
+ margin-bottom: 1rem;
+}
+
+.filters-row-secondary {
+ padding-top: 1rem;
+ border-top: 1px solid #e0e0e0;
+ align-items: center;
+}
+
+.dark-mode .filters-row-secondary {
+ border-top-color: #393939;
+}
+
+.filter-group {
+ flex-shrink: 0;
+}
+
+.filter-group .asset-search {
+ min-width: 280px;
+}
+
+.filter-group .cds--select {
+ min-width: 150px;
+}
+
+.filter-checkbox {
+ display: flex;
+ align-items: center;
+ padding-bottom: 0.75rem;
+}
+
+.filter-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+}
+
+.category-tags {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.category-tag {
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.category-tag:hover {
+ opacity: 0.8;
+}
+
+/* Loading Container */
+.loading-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 300px;
+}
+
+/* Metrics Section */
+.metrics-section {
+ margin-bottom: 1.5rem;
+}
+
+.asset-metrics-grid {
+ gap: 1rem;
+}
+
+.asset-metric-tile {
+ padding: 1.5rem;
+ border-left: 4px solid #0f62fe;
+ min-height: 120px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ border-radius: 0;
+}
+
+.asset-metric-tile:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.metric-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+}
+
+.metric-label {
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.metric-value {
+ font-size: 2rem;
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+.metric-subtext {
+ font-size: 0.875rem;
+}
+
+/* Visualization Section */
+.visualization-section {
+ margin-bottom: 1.5rem;
+}
+
+/* Treemap Styles */
+.asset-treemap-tile {
+ padding: 1.5rem;
+ min-height: auto;
+ height: 100%;
+}
+
+.treemap-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.treemap-header h4 {
+ margin: 0;
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.treemap-legend {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.legend-color {
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+}
+
+.treemap-hint {
+ font-size: 0.75rem;
+ margin-top: 1rem;
+ text-align: center;
+ font-style: italic;
+}
+
+.treemap-tooltip {
+ padding: 0.75rem 1rem;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ background-color: #ffffff;
+ border: 1px solid #e0e0e0;
+}
+
+/* Light mode tooltip text */
+.light-mode .treemap-tooltip {
+ background-color: #ffffff !important;
+ border: 1px solid #e0e0e0;
+}
+
+.light-mode .tooltip-name {
+ color: #161616;
+}
+
+.light-mode .tooltip-cost {
+ color: #0f62fe;
+}
+
+.light-mode .tooltip-category,
+.light-mode .tooltip-provider {
+ color: #525252;
+}
+
+.tooltip-name {
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+.tooltip-cost {
+ font-size: 1.125rem;
+ color: #0f62fe;
+ margin-bottom: 0.25rem;
+}
+
+.tooltip-category,
+.tooltip-provider {
+ font-size: 0.75rem;
+}
+
+/* Efficiency Gauge Styles */
+.efficiency-gauge-tile {
+ padding: 1.5rem;
+ min-height: 400px;
+}
+
+.efficiency-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.efficiency-header h4 {
+ margin: 0;
+}
+
+.savings-callout {
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.savings-label {
+ font-size: 0.75rem;
+}
+
+.savings-value {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: #198038;
+}
+
+.efficiency-charts {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.efficiency-chart {
+ flex: 1;
+ min-width: 200px;
+}
+
+.utilization-bar {
+ margin-top: 0.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.utilization-bar span {
+ font-size: 0.75rem;
+ white-space: nowrap;
+}
+
+.efficiency-insight {
+ margin-top: 1rem;
+ padding: 1rem;
+ border-radius: 4px;
+}
+
+.insight-warning {
+ color: #a2191f;
+ background-color: rgba(218, 30, 40, 0.1);
+ padding: 0.75rem 1rem;
+ border-radius: 4px;
+ border-left: 3px solid #da1e28;
+ margin: 0;
+}
+
+.insight-info {
+ color: #8e6a00;
+ background-color: rgba(241, 194, 27, 0.15);
+ padding: 0.75rem 1rem;
+ border-radius: 4px;
+ border-left: 3px solid #f1c21b;
+ margin: 0;
+}
+
+.insight-success {
+ color: #0e6027;
+ background-color: rgba(25, 128, 56, 0.1);
+ padding: 0.75rem 1rem;
+ border-radius: 4px;
+ border-left: 3px solid #198038;
+ margin: 0;
+}
+
+/* Dark mode insight styles */
+.dark-mode .insight-warning {
+ color: #fa4d56;
+ background-color: rgba(218, 30, 40, 0.15);
+}
+
+.dark-mode .insight-info {
+ color: #f1c21b;
+ background-color: rgba(241, 194, 27, 0.12);
+}
+
+.dark-mode .insight-success {
+ color: #42be65;
+ background-color: rgba(25, 128, 56, 0.15);
+}
+
+/* Filter Indicator */
+.filter-indicator {
+ margin-bottom: 1rem;
+}
+
+/* Table Section */
+.table-section {
+ margin-bottom: 2rem;
+}
+
+/* Cost Bar in Table */
+.cost-bar-container {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ min-width: 150px;
+}
+
+.cost-value {
+ font-weight: 500;
+ min-width: 80px;
+}
+
+.cost-bar-track {
+ flex: 1;
+ height: 8px;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.cost-bar-fill {
+ height: 100%;
+ border-radius: 4px;
+ transition: width 0.3s ease;
+}
+
+/* Expanded Row Content */
+.expanded-row-content {
+ padding: 1.5rem;
+}
+
+.expanded-section {
+ margin-bottom: 1.5rem;
+}
+
+.expanded-section:last-child {
+ margin-bottom: 0;
+}
+
+.expanded-section h5 {
+ margin-bottom: 1rem;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.resource-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 1rem;
+}
+
+.resource-item {
+ padding: 1rem;
+ border-radius: 4px;
+}
+
+.resource-label {
+ display: block;
+ font-size: 0.75rem;
+ margin-bottom: 0.25rem;
+}
+
+.resource-value {
+ font-size: 1rem;
+ font-weight: 500;
+}
+
+.breakdown-grid {
+ display: flex;
+ gap: 2rem;
+ flex-wrap: wrap;
+}
+
+.breakdown-item {
+ flex: 1;
+ min-width: 250px;
+}
+
+.breakdown-label {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 0.75rem;
+}
+
+.breakdown-bars {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.breakdown-bar {
+ display: grid;
+ grid-template-columns: 60px 1fr 60px;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.breakdown-bar span {
+ font-size: 0.75rem;
+}
+
+.breakdown-bar span:last-child {
+ text-align: right;
+}
+
+.duration-info {
+ font-size: 0.875rem;
+ margin: 0;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 672px) {
+ .assets-page-content {
+ padding: 1rem;
+ }
+
+ .assets-header h1 {
+ font-size: 1.75rem;
+ }
+
+ .metric-value {
+ font-size: 1.5rem;
+ }
+
+ .efficiency-charts {
+ flex-direction: column;
+ }
+
+ .treemap-header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .cost-bar-container {
+ min-width: 100px;
+ }
+
+ .theme-toggle-container {
+ margin-left: auto;
+ }
+}
\ No newline at end of file