created new assets page as intended for lfx assignment

[jerald-roy]

What does this PR change?

• This PR creates the Assets page by linking interactions across charts.
  Selecting a point in the cost trend chart updates the asset distribution charts and table, allowing users to explore cost composition for a specific time period.

Does this PR relate to any other PRs?

• No.

How will this PR impact users?

• This change creates the Assets page by making charts interactive and coordinated.
  Users can select a point in the cost trend chart to view how costs are distributed across asset types for that time period, improving interpretability without changing existing workflows.

Does this PR address any GitHub or Zendesk issues?

• Closes [LFX Mentorship Term 1 2026] OpenCost UI Revamp #155

How was this PR tested?

• • Verified that selecting a data point in the cost trend chart updates the asset distribution charts and table

• Tested interactions across multiple time ranges
• Confirmed behavior using both sample data and real data

Does this PR require changes to documentation?

• No.

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?

• No.
  This PR is a UI improvement and does not introduce breaking changes or require coordinated release planning.

[netlify]

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	cac4a8c
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/698995dc34a2ca000838a126
😎 Deploy Preview	https://deploy-preview-205--opencost-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[jerald-roy]

not able to update the cover letter by adding the PR :

1. Why I am the best fit for this OpenCourse project
   -> I didn’t just build UI, I understood the data first and then designed around it.
   -> I worked directly with real, nested, inconsistent data (not mock data), which mirrors
   real open-source problems.
   -> I focused on clarity over complexity — making the data understandable for a first
   time user.
   -> I iterated continuously: observed issues → adjusted logic → refined UI.
   ->I actively questioned why something exists, not just how to implement it — which is
   critical in open-source collaboration.
   ->Was able to understand what the project was all about (only then can we decide what
   we want or do not want on the asset page).
   -> Was able to run OpenCost locally for server purposes; successfully connecting to it
   was a big milestone, as it required extensive setup and debugging. If connecting to the
   real server was not possible, the application automatically fell back to using sample
   data effectively.
   -> Understood the nature of the data received for the asset page, which involved learning
   how the asset page, asset types, and filters are built on the backend.
   -> Successfully understood the existing React codebase, maintained its structure, and
   integrated Carbon React components where I felt they were appropriate.
   This project needs someone who can think from user + data + system perspectives
   together, and that’s exactly how I approached the assignment.

2. Why I chose this UI design
   -> I intentionally avoided over-engineering the UI because clarity and speed matter more
   than visual noise
   -> When a user enters the Assets page for the first time—even in a hurry—the first question
   they usually want answered is whether their cost is increasing or decreasing compared to the
   previous period. A line chart is best suited for this because it clearly shows trends over time
   and provides more context than a bar chart for continuous time ranges.
   -> If the user notices a spike or drop in the line chart, the next natural question is what
   contributed to that change on that specific day. This is where the two pie charts come into
   play.
   ->The first pie chart shows the distribution of asset types used on the selected day.
   -> The second pie chart breaks down the individual assets within a selected asset type,
   grouping multiple assets of the same type to keep the view readable and uncluttered.
   -> Users may also want to explore costs across asset types, dates, and categories, which is
   why asset-type tabs are provided to quickly switch between and compare different views.
   -> Finally, a detailed table is included for users who want to drill down further. The table
   supports filtering by date, asset type, provider, and asset name, along with sorting options,
   enabling more precise inspection of the data.