feat: add ui for assets page

[Jetshree]

What does this PR change?

This PR implements a complete Assets page for the OpenCost UI with comprehensive cost visualization and analysis capabilities.

TypeScript-Driven Architecture

• TypeScript setup: Enabled tsconfig.json with strict mode scoped to new .ts/.tsx files for safe incremental migration.
• Centralized type contracts: Defined shared interfaces for assets APIs, charts, KPIs and component props.
• Safer development workflow: Improved type safety early error detection refactoring confidence and IDE intelligence.
• Stable UI state model: Implemented persistent filters and unified Loading Empty and Error primitives.
• Layered SCSS architecture: Used global.scss with variables mixins and nested structures to integrate cleanly with Carbon while avoiding hard overrides.

Design System & UI Alignment

• Carbon adoption: Built the entire Assets page using @carbon/react components.
• Chart integration: Implemented five analytics charts using Carbon.
• Icon standardization: Used Carbon icons for asset types and actions.
• Consistent UI states: Applied Carbon-native skeleton, empty, and error patterns across all views.

Dashboard Capabilities

• KPI insights: Delivered four computed tiles highlighting cost and carbon signals.
• Analytics layer: Added five charts covering trends, breakdowns, distribution, and emissions.
• Advanced table: Built searchable, sortable, paginated DataTable with CSV export.
• Drill-down analysis: Enabled inline asset detail view with trend and efficiency metrics.

Data & Tooling Enhancements

• Typed service layer: Implemented a robust TypeScript service in src/services/assets.ts that wraps four backend endpoints with integrated mock data fallback.
• Performance optimization: Optimized data fetching in src/pages/Assets.tsx using parallel Promise.all calls with isolated refetch logic for granular chart updates.
• Development support: Added mock dataset covering major asset types and providers.
• Strict compilation: Ensured tsc --noEmit passes with zero errors.

How will this PR impact users?

Users will get a clean and simple interface that shows them the main analysis at a glance. They won't get overwhelmed by a complex UI, but they can still use filters to find the specific data they need. I designed the interface to follow a simple Detect → Analyze → Act workflow:

• Detect: KPIs at the top let users spot problems immediately.
• Analyze: Charts in the middle help users investigate trends.
• Act: Detailed tables at the bottom provide the specific data needed to take
  action.

Does this PR address any GitHub or Zendesk issues?

• Closes ... [LFX Mentorship Term 1 2026] OpenCost UI Revamp #155 Support Assets in the UI #28

How was this PR tested?

• Verified all charts render correctly with mock data
• All files compile without errors
• Tested filters, table search, pagination, drill-down view, and CSV export.
• Validated mock fallback and loading empty and error states across the page.
• tsc --noEmit passes with strict: True
• All new components and API contracts fully typed

Does this PR require changes to documentation?

• Yes

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. While this PR addresses the requirements of the coding challenge, it is currently intended for evaluation purposes. If accepted, I plan to refine this code further and a final architectural discussion with mentors to ensure it meets all production standards before being slated for an official release.

Demo video

ui_demo.mp4

[netlify]

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	5f9690b
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/699850769f301c0008b27037
😎 Deploy Preview	https://deploy-preview-216--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.