feat(costcenter): pinning table

[xudaotutou]

🤖[deprecated] Generated by Copilot at 88d7d75

Summary

🚢📊🌐

This pull request adds UI features and fixes for displaying port costs and valuations in the cost center frontend. It introduces a new PortIcon component in the UI library and imports it in the cost center package. It updates the types, constants, hooks, and API functions to handle port data. It modifies the layout and responsiveness of the billing, cost overview, and valuation pages. It also adds translations and updates dependencies for the UI.

The cost center UI has changed
With new components and features arranged
PortIcon and react-table
next-i18next and displayMoney are stable
And the billing and valuation pages are upgraded

Walkthrough

• Add a new component PortIcon that renders a custom SVG icon for ports (link)
• Export the PortIcon component as part of the UI library (link, link)
• Add a new dependency @tanstack/react-table to use for rendering tables in the UI (link, link, link)
• Update the dependency immer to the latest version (link)
• Remove the unnecessary dependency @babel/core (link)
• Add a new entry for next with react and react-dom as peer dependencies (link)
• Enable reloading the translations when the page is prerendered by next (link)
• Transpile the UI library code with next's webpack configuration (link)
• Add translation keys for the port resource type in English and Chinese (link, link)
• Format the money values with commas and decimals using the displayMoney function (link, link)
• Include the port cost in the component state of the Cost component (link)
• Fetch the latest billing data and format the money values using the useBillingData hook and the formatMoney function in the PredictCard component (link, link)
• Define constants for the port table header and the port valuation (link, link)
• Remove the unused dependency date-fns and add optional endTime and startTime properties to the useBillingData hook (link, link, link)
• Convert the raw costs from the API to the costs object and include the port cost in the convertGpu function (link, link, link, link)
• Log the billing data from the API for debugging purposes (link)
• Make the tab panels and the billing tables responsive and scrollable in the Billing component (link, link, link, link, link, link)
• Simplify the logic and improve the performance of the CostOverview component and make the flex containers fill the available space (link, link, link, link, link)
• Use the PortIcon component and the port title for the port valuation and avoid displaying an extra slash when the unit is empty in the Valuation component (link, link, link)
• Include the port cost in the raw costs, costs, and billing data types (link, link, link)

[sealos-ci-robot]

🤖 Generated by lychee action

Summary

Status	Count
🔍 Total	1032
✅ Successful	363
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	668
❓ Unknown	0
🚫 Errors	0

Full action output

Full Github Actions output

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: All new business logic should have corresponding unit tests.
• Apply: Refactor large functions to be more modular.
• Apply: Add docstrings to all functions and file headers.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7c08451) 65.45% compared to head (88d7d75) 65.45%.
Report is 8 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4343   +/-   ##
=======================================
  Coverage   65.45%   65.45%           
=======================================
  Files           8        8           
  Lines         660      660           
=======================================
  Hits          432      432           
  Misses        180      180           
  Partials       48       48           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.