feat: Add instant currency conversion warning to Cost Allocation and Cloud Costs pages

[ADITYATIWARI342005]

What does this PR change?

• Adds a real-time currency conversion warning that appears when users select a non-USD currency in both Cost Allocation and Cloud Costs pages
• Implements a useEffect hook that watches the currency state variable and immediately updates the warning display without requiring data refetch or page reload
• Warning disappears instantly when switching back to USD

Does this PR relate to any other PRs?

• No related PRs

How will this PR impact users?

• Improved user awareness: Users will be immediately notified when currency conversion is active, helping them understand potential discrepancies between OpenCost calculations and their actual cloud bills
• Better UX: Warning appears/disappears instantly when currency selection changes, providing immediate feedback without waiting for data refresh
• Non-disruptive: Warning only appears for non-USD currencies; USD users see no change in their workflow
• Educational: Clear messaging explains that forex rate differences between the API and cloud providers may cause cost mismatches

Does this PR address any GitHub or Zendesk issues?

• Closes Call out Possible Discrepancies in Pricing w/currency conversion #107

How was this PR tested?

• Manual testing in local Kubernetes environment (kind cluster):
  1. Deployed OpenCost UI with Tilt in kind cluster
  2. Tested currency dropdown changes on Cost Allocation page (USD → EUR → GBP → USD)
  3. Tested currency dropdown changes on Cloud Costs page with same currency variations
  4. Verified warning appears instantly on non-USD selection
  5. Verified warning disappears instantly when returning to USD
  6. Confirmed no page refresh or data refetch is required for warning to update
  7. Tested with browser cache to ensure proper behavior with cached assets
• Code review: Verified useEffect dependency array only includes currency to prevent unnecessary re-renders
• Browser testing: Tested in Chrome with DevTools to confirm no console errors

After fix:

fix-warning.mp4

Does this PR require changes to documentation?

• No documentation changes required. The warning is self-explanatory and appears contextually when relevant.

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 addresses issue Call out Possible Discrepancies in Pricing w/currency conversion #107 which was marked for inclusion and provides important user-facing functionality for currency conversion awareness

[netlify]

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	22c0c6e
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/69710cba7e0403000897944e
😎 Deploy Preview	https://deploy-preview-157--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.

[ADITYATIWARI342005]

Hi @ameijer I have tested the build locally, it is functionally sound.
Ready for review!

[ADITYATIWARI342005]

Hi @ameijer I have tested the build locally, it is functionally sound. Ready for review!

A follow-up question: I am using local setup to wire the backend with metrics to be represented on the front-end. Is this ok for local development? Or should I switch?

[ameijer]

@ADITYATIWARI342005 thank you for testing this locally! tilt setup is fine, whatever works the best for your development flow

[ADITYATIWARI342005]

@ADITYATIWARI342005 thank you for testing this locally! tilt setup is fine, whatever works the best for your development flow

Hi @ameijer, given this is tested and a minimal feature, I request you to review it whenever you can.

Thanks in advance.

[ADITYATIWARI342005]

Hi @ameijer, given this is tested and a minimal feature, I request you to review it whenever you can.

Thanks in advance.

Hi @ameijer It has been about a week! Please review it whenever possible.

[ameijer]

We will group review this in the community meeting tomorrow