Skip to content

Conversation

@AAdIprog
Copy link

feat(assets): Add modern Assets page with dark/light theme toggle

  • Add new Assets page with summary cards, pie chart, and data table
  • Implement dark/light theme toggle on all pages
  • Add sparkline visualizations for cost metrics
  • Create ThemeContext for global theme state with localStorage persistence
  • Update all existing pages with theme toggle button
  • Add comprehensive CSS styling for both themes
  • Mock data support for development without backend

What does this PR change?

  • Adds a new Assets page (/assets) with modern UI components including summary metric cards with sparkline charts, a pie chart showing cost breakdown by asset type, and a styled data table with color-coded type badges
  • Implements a dark/light theme toggle accessible from all pages via a button in the page header
  • Creates a ThemeContext for global theme state management with localStorage persistence so user preference is remembered across sessions
  • Updates CSS with comprehensive theming support using CSS variables for consistent styling in both modes

Does this PR relate to any other PRs?

  • No, this is a standalone feature addition

How will this PR impact users?

  • Users will have a new Assets page to view and analyze asset costs with modern visualizations
  • Users can now toggle between dark and light themes across the entire application based on their preference
  • The theme preference persists across sessions, improving user experience

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Manual testing with REACT_APP_USE_MOCK_DATA=true npm run dev
  • Verified Assets page renders correctly with mock data
  • Tested theme toggle functionality across all pages (Assets, Cost Allocation, Cloud Costs, External Costs)
  • Confirmed theme persistence in localStorage across page refreshes
  • Tested both dark and light modes for visual consistency

Does this PR require changes to documentation?

  • No documentation changes required

Have you labeled this PR and its corresponding Issue as "next release" if it should be part of the next OpenCost release? If not, why not?

  • Yes, this should be labeled as "next release" as it adds significant new functionality

@netlify
Copy link

netlify bot commented Jan 26, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit fccfab0
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6977a05f51376a0008978e26
😎 Deploy Preview https://deploy-preview-170--opencost-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

- Add new Assets page with summary cards, pie chart, and data table
- Implement dark/light theme toggle on all pages
- Add sparkline visualizations for cost metrics
- Create ThemeContext for global theme state with localStorage persistence
- Update all existing pages with theme toggle button
- Add comprehensive CSS styling for both themes
- Mock data support for development without backend

Signed-off-by: AAdIprog <aadishah132@gmail.com>
@AAdIprog AAdIprog force-pushed the feat/assets-page-dark-theme branch from 565a515 to fccfab0 Compare January 26, 2026 17:11
@AAdIprog AAdIprog closed this Jan 27, 2026
@AAdIprog AAdIprog reopened this Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Assets in the UI

1 participant