-
- {headerTitle}
-
-
- {title && (
-
- {title}
-
- )}
- {breadcrumbs && breadcrumbs.length > 0 && (
-
- {breadcrumbs.slice(0, breadcrumbs.length - 1).map((b) => (
-
- {b.name}
-
- ))}
-
- {breadcrumbs[breadcrumbs.length - 1].name}
-
-
- )}
-
-
{props.children}
+
+
+
+
+
+ {headerTitle && (
+
+ {headerTitle}
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+ {breadcrumbs && breadcrumbs.length > 0 && (
+
+
+ {breadcrumbs.slice(0, breadcrumbs.length - 1).map((b) => (
+
+ {b.name}
+
+ ))}
+
+ {breadcrumbs[breadcrumbs.length - 1].name}
+
+
+
+ )}
+
+ {props.children && (
+
+ {props.children}
+
+ )}
+
);
};
diff --git a/src/components/Nav/NavItem.js b/src/components/Nav/NavItem.js
index 7498ae8..b41a416 100644
--- a/src/components/Nav/NavItem.js
+++ b/src/components/Nav/NavItem.js
@@ -1,53 +1,96 @@
import * as React from "react";
-import { ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
+import { ListItem, ListItemIcon, ListItemText, Typography } from "@material-ui/core";
import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/styles";
-const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
- const useStyles = makeStyles({
- root: {
- cursor: "pointer",
- "&:hover": {
- backgroundColor: "#ebebeb",
- },
- "&:selected": {
- backgroundColor: "#e1e1e1",
- },
+const useStyles = makeStyles((theme) => ({
+ root: {
+ borderRadius: 12,
+ margin: '4px 0',
+ padding: '12px 16px',
+ cursor: "pointer",
+ transition: 'all 0.2s ease-in-out',
+ position: 'relative',
+ overflow: 'hidden',
+ "&:hover": {
+ backgroundColor: theme.palette.action.hover,
+ transform: 'translateX(4px)',
+ boxShadow: '0 4px 12px rgba(37, 99, 235, 0.15)',
},
- text: {
- maxWidth: 200,
- overflow: "hidden",
- textOverflow: "ellipsis",
- whiteSpace: "nowrap",
+ "&:before": {
+ content: '""',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ bottom: 0,
+ width: 0,
+ background: 'linear-gradient(135deg, #2563eb, #3b82f6)',
+ transition: 'width 0.3s ease',
},
- activeIcon: {
- color: "#346ef2",
- minWidth: 36,
+ },
+ active: {
+ backgroundColor: 'rgba(37, 99, 235, 0.08)',
+ color: theme.palette.primary.main,
+ "&:before": {
+ width: '4px',
},
- activeText: {
- color: "#346ef2",
+ "&:hover": {
+ backgroundColor: 'rgba(37, 99, 235, 0.12)',
},
- icon: {
- color: "#4e4e4e",
- minWidth: 36,
+ },
+ icon: {
+ minWidth: 40,
+ color: theme.palette.text.secondary,
+ transition: 'color 0.2s ease',
+ },
+ activeIcon: {
+ color: theme.palette.primary.main,
+ minWidth: 40,
+ },
+ text: {
+ margin: 0,
+ '& .MuiListItemText-primary': {
+ fontSize: '0.875rem',
+ fontWeight: 500,
+ lineHeight: 1.4,
},
- });
+ '& .MuiListItemText-secondary': {
+ fontSize: '0.75rem',
+ lineHeight: 1.3,
+ marginTop: '2px',
+ opacity: 0.8,
+ },
+ },
+ activeText: {
+ '& .MuiListItemText-primary': {
+ color: theme.palette.primary.main,
+ fontWeight: 600,
+ },
+ },
+ link: {
+ textDecoration: "none",
+ color: "inherit",
+ display: 'block',
+ },
+}));
+
+const NavItem = ({ active, href, name, onClick, secondary, title, icon, description }) => {
const classes = useStyles();
- const listItemIconClasses = { root: classes.icon };
- const listItemTextClasses = {
- secondary: classes.text,
- };
+ const listItemClasses = [classes.root];
+ if (active) {
+ listItemClasses.push(classes.active);
+ }
+ const iconClasses = active ? classes.activeIcon : classes.icon;
+ const textClasses = [classes.text];
if (active) {
- listItemIconClasses.root = classes.activeIcon;
- listItemTextClasses.primary = classes.activeText;
+ textClasses.push(classes.activeText);
}
- const renderListItemCore = () => (
+ const renderListItem = () => (
{
if (onClick) {
onClick();
@@ -56,22 +99,29 @@ const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
}}
selected={active}
title={title}
+ disableRipple
>
- {icon}
+
+ {icon}
+
+ {description}
+
+ )}
/>
);
return href && !active ? (
-
- {renderListItemCore()}
+
+ {renderListItem()}
) : (
- renderListItemCore()
+ renderListItem()
);
};
diff --git a/src/components/Nav/SidebarNav.js b/src/components/Nav/SidebarNav.js
index c0b710a..2c55796 100644
--- a/src/components/Nav/SidebarNav.js
+++ b/src/components/Nav/SidebarNav.js
@@ -1,36 +1,83 @@
import * as React from "react";
-import { Drawer, List } from "@material-ui/core";
-
-import { NavItem } from "./NavItem";
-import { BarChart } from "@material-ui/icons";
-import { Cloud } from "@material-ui/icons";
+import { Drawer, List, Typography, Box, Divider } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
+import { NavItem } from "./NavItem";
+import { BarChart, Cloud, AttachMoney } from "@material-ui/icons";
const logo = new URL("../../images/logo.png", import.meta.url).href;
-const DRAWER_WIDTH = 200;
+const DRAWER_WIDTH = 280;
-const SidebarNav = ({ active }) => {
- const useStyles = makeStyles({
- drawer: {
- width: DRAWER_WIDTH,
- flexShrink: 0,
- },
- drawerPaper: {
- backgroundColor: "inherit",
- border: 0,
- width: DRAWER_WIDTH,
- paddingTop: "2.5rem",
- },
- text: {
- overflow: "hidden",
- textOverflow: "ellipsis",
- whiteSpace: "nowrap",
- },
- });
+const useStyles = makeStyles((theme) => ({
+ drawer: {
+ width: DRAWER_WIDTH,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: DRAWER_WIDTH,
+ border: 'none',
+ background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
+ boxShadow: '4px 0 20px rgba(0, 0, 0, 0.08)',
+ },
+ logoContainer: {
+ padding: '32px 24px 24px',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+ margin: '16px',
+ borderRadius: '16px',
+ color: 'white',
+ marginBottom: '24px',
+ },
+ logo: {
+ width: '48px',
+ height: '48px',
+ marginBottom: '12px',
+ filter: 'brightness(0) invert(1)',
+ },
+ logoText: {
+ fontWeight: 700,
+ fontSize: '1.25rem',
+ letterSpacing: '-0.025em',
+ color: 'white',
+ },
+ logoSubtext: {
+ fontSize: '0.75rem',
+ opacity: 0.9,
+ marginTop: '4px',
+ color: 'white',
+ },
+ navSection: {
+ padding: '0 16px',
+ },
+ sectionTitle: {
+ padding: '16px 24px 8px',
+ fontSize: '0.75rem',
+ fontWeight: 600,
+ color: theme.palette.text.secondary,
+ textTransform: 'uppercase',
+ letterSpacing: '0.1em',
+ },
+ navList: {
+ padding: '0 8px',
+ },
+ footer: {
+ marginTop: 'auto',
+ padding: '24px',
+ textAlign: 'center',
+ borderTop: `1px solid ${theme.palette.divider}`,
+ margin: '16px',
+ marginTop: 'auto',
+ },
+ footerText: {
+ fontSize: '0.75rem',
+ color: theme.palette.text.secondary,
+ },
+}));
+const SidebarNav = ({ active }) => {
const classes = useStyles();
-
const [init, setInit] = React.useState(false);
React.useEffect(() => {
@@ -39,33 +86,72 @@ const SidebarNav = ({ active }) => {
}
}, [init]);
- const top = [
+ const navigationItems = [
{
name: "Cost Allocation",
href: "allocation",
icon:
,
+ description: "View and analyze cost allocations"
+ },
+ {
+ name: "Cloud Costs",
+ href: "cloud",
+ icon:
,
+ description: "Monitor cloud infrastructure costs"
+ },
+ {
+ name: "External Costs",
+ href: "external-costs",
+ icon:
,
+ description: "Track external service costs"
},
- { name: "Cloud Costs", href: "cloud", icon:
},
- { name: "External Costs", href: "external-costs", icon:
},
];
return (
- 
-
- {top.map((l) => (
-
- ))}
-
+
+
+
+ OpenCost
+
+
+ Cost Management
+
+
+
+ Analytics
+
+
+ {navigationItems.map((item, index) => (
+
+
+
+ ))}
+
+
+
+ © 2024 OpenCost
+
+
+ Open Source Cost Analytics
+
+
);
};
diff --git a/src/components/Page.js b/src/components/Page.js
index 0914920..ff4767e 100644
--- a/src/components/Page.js
+++ b/src/components/Page.js
@@ -3,40 +3,58 @@ import * as React from "react";
import { useLocation } from "react-router-dom";
import { SidebarNav } from "./Nav/SidebarNav";
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
+ body: {
+ display: "flex",
+ margin: "0px",
+ backgroundColor: theme.palette.background.default,
+ minHeight: "100vh",
+ },
+ content: {
+ display: "flex",
+ flexFlow: "column",
+ flexGrow: 1,
+ position: "relative",
+ },
wrapper: {
position: "relative",
- height: "100vh",
flexGrow: 1,
+ padding: '40px 48px',
overflowX: "auto",
- paddingLeft: "2rem",
- paddingRight: "rem",
- paddingTop: "2.5rem",
+ overflowY: "auto",
+ maxWidth: "100%",
+ background: 'transparent',
},
- flexGrow: {
- display: "flex",
- flexFlow: "column",
- flexGrow: 1,
+ contentContainer: {
+ maxWidth: '1400px',
+ margin: '0 auto',
+ width: '100%',
},
- body: {
- display: "flex",
- overflowY: "scroll",
- margin: "0px",
- backgroundColor: "f3f3f3",
+ // Responsive design
+ '@media (max-width: 1024px)': {
+ wrapper: {
+ padding: '32px 24px',
+ },
},
-});
+ '@media (max-width: 768px)': {
+ wrapper: {
+ padding: '24px 16px',
+ },
+ },
+}));
const Page = (props) => {
const classes = useStyles();
-
const { pathname } = useLocation();
return (
-
+
-
{props.children}
+
+ {props.children}
+
diff --git a/src/components/Subtitle.js b/src/components/Subtitle.js
index f499457..43c9249 100644
--- a/src/components/Subtitle.js
+++ b/src/components/Subtitle.js
@@ -1,43 +1,82 @@
import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import { upperFirst } from "lodash";
-import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-import NavigateNextIcon from "@material-ui/icons/NavigateNext";
-import Typography from "@material-ui/core/Typography";
+import { Breadcrumbs, Typography, Chip, Box } from "@material-ui/core";
+import { NavigateNext as NavigateNextIcon, Schedule as TimeIcon } from "@material-ui/icons";
import { toVerboseTimeRange } from "../util";
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
root: {
- "& > * + *": {
- marginTop: 2,
+ padding: '16px 0',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ },
+ breadcrumbContainer: {
+ background: 'rgba(37, 99, 235, 0.05)',
+ borderRadius: '12px',
+ padding: '12px 16px',
+ border: `1px solid ${theme.palette.divider}`,
+ },
+ timeChip: {
+ backgroundColor: theme.palette.primary.main,
+ color: 'white',
+ fontWeight: 500,
+ '& .MuiChip-icon': {
+ color: 'white',
},
},
+ aggregationChip: {
+ backgroundColor: theme.palette.secondary.main,
+ color: 'white',
+ fontWeight: 500,
+ },
link: {
cursor: "pointer",
+ transition: 'color 0.2s ease',
+ '&:hover': {
+ color: theme.palette.primary.main,
+ },
},
-});
+}));
const Subtitle = ({ report, onClick }) => {
const classes = useStyles();
-
const { aggregateBy, window } = report;
+ const timeRange = toVerboseTimeRange(window);
+ const aggregation = aggregateBy && aggregateBy.length > 0 ? upperFirst(aggregateBy) : null;
+
return (
-
-
}
- aria-label="breadcrumb"
- onClick={onClick}
- >
- {aggregateBy && aggregateBy.length > 0 ? (
-
- {toVerboseTimeRange(window)} by {upperFirst(aggregateBy)}
+
+
+ }
+ aria-label="breadcrumb"
+ onClick={onClick}
+ >
+
+ {timeRange}
+ {aggregation && ` by ${aggregation}`}
- ) : (
- {toVerboseTimeRange(window)}
- )}
-
-
+
+
+
+
}
+ label={timeRange}
+ className={classes.timeChip}
+ size="small"
+ />
+
+ {aggregation && (
+
+ )}
+
);
};
diff --git a/src/components/Warnings.js b/src/components/Warnings.js
index 4b6a43b..2f36dd7 100644
--- a/src/components/Warnings.js
+++ b/src/components/Warnings.js
@@ -1,37 +1,260 @@
-import React from "react";
+import * as React from "react";
import { makeStyles } from "@material-ui/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import Paper from "@material-ui/core/Paper";
-import WarningIcon from "@material-ui/icons/Warning";
-
-const useStyles = makeStyles({
- root: {},
-});
-
-const Warnings = ({ warnings }) => {
+import {
+ Box,
+ Typography,
+ Collapse,
+ IconButton,
+ Paper,
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemText
+} from "@material-ui/core";
+import {
+ ExpandLess,
+ ExpandMore,
+ Warning as WarningIcon,
+ Info as InfoIcon,
+ Error as ErrorIcon
+} from "@material-ui/icons";
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ marginBottom: '24px',
+ },
+ alertPaper: {
+ borderRadius: '12px',
+ marginBottom: '12px',
+ border: 'none',
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+ overflow: 'hidden',
+ },
+ warningAlert: {
+ backgroundColor: '#fef3c7',
+ borderLeft: '4px solid #f59e0b',
+ },
+ errorAlert: {
+ backgroundColor: '#fee2e2',
+ borderLeft: '4px solid #ef4444',
+ },
+ infoAlert: {
+ backgroundColor: '#dbeafe',
+ borderLeft: '4px solid #3b82f6',
+ },
+ alertContent: {
+ padding: '16px',
+ display: 'flex',
+ alignItems: 'flex-start',
+ gap: '12px',
+ },
+ alertIcon: {
+ marginTop: '2px',
+ },
+ warningIcon: {
+ color: '#f59e0b',
+ },
+ errorIcon: {
+ color: '#ef4444',
+ },
+ infoIcon: {
+ color: '#3b82f6',
+ },
+ alertText: {
+ flex: 1,
+ },
+ alertTitle: {
+ fontWeight: 600,
+ marginBottom: '4px',
+ fontSize: '1rem',
+ },
+ warningTitle: {
+ color: '#92400e',
+ },
+ errorTitle: {
+ color: '#991b1b',
+ },
+ infoTitle: {
+ color: '#1e40af',
+ },
+ alertDescription: {
+ fontSize: '0.875rem',
+ lineHeight: 1.5,
+ },
+ warningDescription: {
+ color: '#92400e',
+ },
+ errorDescription: {
+ color: '#991b1b',
+ },
+ infoDescription: {
+ color: '#1e40af',
+ },
+ expandButton: {
+ padding: '4px',
+ marginLeft: 'auto',
+ },
+ detailsList: {
+ margin: '8px 0 0 0',
+ paddingLeft: '16px',
+ fontSize: '0.875rem',
+ },
+}));
+
+const Warnings = ({ warnings = [], errors = [], infos = [] }) => {
const classes = useStyles();
+ const [expandedItems, setExpandedItems] = React.useState({});
+
+ const toggleExpand = (id) => {
+ setExpandedItems(prev => ({
+ ...prev,
+ [id]: !prev[id]
+ }));
+ };
+
+ const getItemContent = (item) => {
+ // Handle both old format {primary, secondary} and new format {title, description, etc}
+ if (typeof item === 'string') {
+ return { title: item, description: null };
+ }
+
+ if (item.primary) {
+ // Old format compatibility
+ return {
+ title: item.primary,
+ description: item.secondary,
+ details: item.details
+ };
+ }
+
+ // New format
+ return {
+ title: item.title || item.message || 'Alert',
+ description: item.description,
+ details: item.details
+ };
+ };
+
+ const getAlertStyles = (severity) => {
+ switch (severity) {
+ case 'warning':
+ return {
+ paper: classes.warningAlert,
+ icon: classes.warningIcon,
+ title: classes.warningTitle,
+ description: classes.warningDescription,
+ iconComponent:
+ };
+ case 'error':
+ return {
+ paper: classes.errorAlert,
+ icon: classes.errorIcon,
+ title: classes.errorTitle,
+ description: classes.errorDescription,
+ iconComponent:
+ };
+ case 'info':
+ return {
+ paper: classes.infoAlert,
+ icon: classes.infoIcon,
+ title: classes.infoTitle,
+ description: classes.infoDescription,
+ iconComponent:
+ };
+ default:
+ return {
+ paper: classes.infoAlert,
+ icon: classes.infoIcon,
+ title: classes.infoTitle,
+ description: classes.infoDescription,
+ iconComponent:
+ };
+ }
+ };
+
+ const renderAlert = (items, severity) => {
+ if (!items || items.length === 0) return null;
+
+ const styles = getAlertStyles(severity);
+
+ return items.map((item, index) => {
+ const id = `${severity}-${index}`;
+ const isExpanded = expandedItems[id];
+ const content = getItemContent(item);
+ const hasDetails = content.details && content.details.length > 0;
+
+ return (
+
+
+
+ {styles.iconComponent}
+
+
+
+ {content.title}
+
+ {content.description && (
+
+ {content.description}
+
+ )}
+ {hasDetails && (
+
+
+
+ Details:
+
+
+ {content.details.map((detail, detailIndex) => (
+ -
+
+ {detail}
+
+
+ ))}
+
+
+
+ )}
+
+ {hasDetails && (
+
toggleExpand(id)}
+ size="small"
+ >
+ {isExpanded ? : }
+
+ )}
+
+ );
+ });
+ };
+
+ const hasAnyItems = errors?.length > 0 || warnings?.length > 0 || infos?.length > 0;
- if (!warnings || warnings.length === 0) {
+ if (!hasAnyItems) {
return null;
}
return (
-
-
- {warnings.map((warn, i) => (
-
-
-
-
-
-
- ))}
-
-
+
+ {renderAlert(errors, 'error')}
+ {renderAlert(warnings, 'warning')}
+ {renderAlert(infos, 'info')}
+
);
};
-export default Warnings;
+export default React.memo(Warnings);
diff --git a/src/css/index.css b/src/css/index.css
index a86ceed..0274a1d 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,20 +1,176 @@
@import '../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css';
+* {
+ box-sizing: border-box;
+}
+
body {
- background-color: #F3F3F3;
- display: flex;
- flex-flow: column;
- font-family: 'Roboto', sans-serif;
- margin: 0px;
- overflow-y: scroll;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ display: flex;
+ flex-flow: column;
+ font-family: 'Inter', 'Roboto', sans-serif;
+ margin: 0px;
+ overflow-y: scroll;
+ min-height: 100vh;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
body .page-container {
- display: flex;
- flex-flow: column;
- flex-grow: 1;
+ display: flex;
+ flex-flow: column;
+ flex-grow: 1;
+ min-height: 100vh;
+}
+
+/* Modern scrollbar styling */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f5f9;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #cbd5e1;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #94a3b8;
}
+/* Enhanced recharts tooltip */
.recharts-tooltip-wrapper {
- z-index: 1000;
+ z-index: 1000;
+}
+
+.recharts-default-tooltip {
+ background: white !important;
+ border: 1px solid #e2e8f0 !important;
+ border-radius: 8px !important;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Modern focus states */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+ outline: 2px solid #2563eb;
+ outline-offset: 2px;
+}
+
+/* Improved table styling */
+.MuiTableCell-root {
+ border-bottom: 1px solid #e2e8f0 !important;
+}
+
+.MuiTableHead-root .MuiTableCell-root {
+ background-color: #f8fafc !important;
+ font-weight: 600 !important;
+ color: #374151 !important;
+}
+
+/* Enhanced paper components */
+.MuiPaper-root {
+ background-color: white !important;
+ backdrop-filter: blur(8px);
+}
+
+/* Modern loading spinner */
+.MuiCircularProgress-root {
+ color: #2563eb !important;
+}
+
+/* Custom utility classes */
+.gradient-bg {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.glass-effect {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.cost-positive {
+ color: #10b981 !important;
+}
+
+.cost-negative {
+ color: #ef4444 !important;
+}
+
+.cost-neutral {
+ color: #64748b !important;
+}
+
+/* Animation utilities */
+.fade-in {
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.slide-in {
+ animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+/* Enhanced hover effects */
+.hover-lift {
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hover-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Status indicators */
+.status-indicator {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+ margin-right: 8px;
+}
+
+.status-indicator.success {
+ background-color: #10b981;
+}
+
+.status-indicator.error {
+ background-color: #ef4444;
+}
+
+.status-indicator.warning {
+ background-color: #f59e0b;
+}
+
+.status-indicator.info {
+ background-color: #3b82f6;
}
diff --git a/src/pages/Allocations.js b/src/pages/Allocations.js
index 9c34687..77c4c09 100644
--- a/src/pages/Allocations.js
+++ b/src/pages/Allocations.js
@@ -25,6 +25,7 @@ import Page from "../components/Page";
import Footer from "../components/Footer";
import Subtitle from "../components/Subtitle";
import Warnings from "../components/Warnings";
+import DashboardWelcome from "../components/DashboardWelcome";
import AllocationService from "../services/allocation";
import {
checkCustomWindow,
@@ -237,6 +238,8 @@ const ReportsPage = () => {
+
+
{!loading && errors.length > 0 && (
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..b3241e6
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,206 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+// Modern color palette for OpenCost
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ main: '#2563EB', // Modern blue
+ light: '#60A5FA',
+ dark: '#1D4ED8',
+ contrastText: '#FFFFFF',
+ },
+ secondary: {
+ main: '#10B981', // Modern green for cost/success indicators
+ light: '#34D399',
+ dark: '#059669',
+ contrastText: '#FFFFFF',
+ },
+ error: {
+ main: '#EF4444',
+ light: '#F87171',
+ dark: '#DC2626',
+ },
+ warning: {
+ main: '#F59E0B',
+ light: '#FBBF24',
+ dark: '#D97706',
+ },
+ info: {
+ main: '#3B82F6',
+ light: '#60A5FA',
+ dark: '#2563EB',
+ },
+ success: {
+ main: '#10B981',
+ light: '#34D399',
+ dark: '#059669',
+ },
+ background: {
+ default: '#F8FAFC', // Light gray-blue background
+ paper: '#FFFFFF',
+ secondary: '#F1F5F9', // Slightly darker for contrast
+ },
+ text: {
+ primary: '#1E293B', // Dark slate
+ secondary: '#64748B', // Medium slate
+ disabled: '#94A3B8',
+ },
+ divider: '#E2E8F0',
+ grey: {
+ 50: '#F8FAFC',
+ 100: '#F1F5F9',
+ 200: '#E2E8F0',
+ 300: '#CBD5E1',
+ 400: '#94A3B8',
+ 500: '#64748B',
+ 600: '#475569',
+ 700: '#334155',
+ 800: '#1E293B',
+ 900: '#0F172A',
+ },
+ },
+ typography: {
+ fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+ h1: {
+ fontSize: '2.5rem',
+ fontWeight: 700,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.2,
+ },
+ h2: {
+ fontSize: '2rem',
+ fontWeight: 600,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.25,
+ },
+ h3: {
+ fontSize: '1.75rem',
+ fontWeight: 600,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.3,
+ },
+ h4: {
+ fontSize: '1.5rem',
+ fontWeight: 600,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.35,
+ },
+ h5: {
+ fontSize: '1.25rem',
+ fontWeight: 600,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.4,
+ },
+ h6: {
+ fontSize: '1.125rem',
+ fontWeight: 600,
+ letterSpacing: '-0.025em',
+ lineHeight: 1.4,
+ },
+ subtitle1: {
+ fontSize: '1rem',
+ fontWeight: 500,
+ lineHeight: 1.5,
+ },
+ subtitle2: {
+ fontSize: '0.875rem',
+ fontWeight: 500,
+ lineHeight: 1.5,
+ },
+ body1: {
+ fontSize: '1rem',
+ lineHeight: 1.6,
+ },
+ body2: {
+ fontSize: '0.875rem',
+ lineHeight: 1.6,
+ },
+ button: {
+ fontWeight: 500,
+ textTransform: 'none',
+ letterSpacing: '0.025em',
+ },
+ caption: {
+ fontSize: '0.75rem',
+ lineHeight: 1.5,
+ },
+ overline: {
+ fontSize: '0.75rem',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ letterSpacing: '0.1em',
+ },
+ },
+ shape: {
+ borderRadius: 12,
+ },
+ shadows: [
+ 'none',
+ '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+ '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+ '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+ '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+ '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+ '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+ // Continue with existing shadows for compatibility
+ ...Array(18).fill('0 25px 50px -12px rgba(0, 0, 0, 0.25)'),
+ ],
+ overrides: {
+ MuiPaper: {
+ root: {
+ backgroundImage: 'none',
+ },
+ elevation1: {
+ boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+ },
+ elevation2: {
+ boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+ },
+ elevation3: {
+ boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+ },
+ },
+ MuiButton: {
+ root: {
+ borderRadius: 8,
+ textTransform: 'none',
+ fontWeight: 500,
+ padding: '8px 16px',
+ },
+ contained: {
+ boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+ '&:hover': {
+ boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+ },
+ },
+ },
+ MuiCard: {
+ root: {
+ borderRadius: 12,
+ border: '1px solid #E2E8F0',
+ },
+ },
+ MuiListItem: {
+ root: {
+ borderRadius: 8,
+ margin: '2px 8px',
+ '&.Mui-selected': {
+ backgroundColor: 'rgba(37, 99, 235, 0.1)',
+ '&:hover': {
+ backgroundColor: 'rgba(37, 99, 235, 0.15)',
+ },
+ },
+ '&:hover': {
+ backgroundColor: 'rgba(0, 0, 0, 0.04)',
+ },
+ },
+ },
+ MuiDrawer: {
+ paper: {
+ borderRight: '1px solid #E2E8F0',
+ },
+ },
+ },
+});
+
+export default theme;
\ No newline at end of file