Skip to content

Billing & Payments page with full i18n#85

Open
XK4MiLX wants to merge 4 commits intodevelopmentfrom
feature/billing
Open

Billing & Payments page with full i18n#85
XK4MiLX wants to merge 4 commits intodevelopmentfrom
feature/billing

Conversation

@XK4MiLX
Copy link
Member

@XK4MiLX XK4MiLX commented Feb 17, 2026

Summary

image

This PR introduces the complete Billing & Payments page for FluxOS Frontend, allowing users to track their Flux app payment history with a rich, responsive UI.


New Features

Billing Page (src/pages/billing/payments.vue)

  • Payment history table — lists all apps with total paid, payment count, average payment, and a Details button
  • Transaction details dialog — per-app transaction breakdown with type, amount, date, block height and explorer link
  • Smart transaction type detection — classifies each fluxappupdate as either Renewal or Update:
    • fluxappregister → Registration
    • spec version < 6 (no expire field) → Renewal
    • spec version ≥ 6: only expire changed or nothing changed → Renewal, otherwise → Update
  • Payment trend chart — interactive chart with app filter, view (daily/weekly/monthly), period (7d/30d/90d/1y/all) and metric (amount/count) controls
  • Stats cards — total paid, transactions, registrations %, updates %, average cost, highest payment
  • Currently running apps section with live instance counts
  • Export dialog — export payment history to CSV with date range options (all time, 7/30/90 days, last year, custom range)
  • Custom pagination — both main table and transaction dialog use matching custom paginator (first/prev/pages/next/last + showing chip)
  • Mobile responsive — category pills wrap with equal widths, icons hidden on small screens, footer label hidden on mobile

Billing Service (src/services/BillingService.js)

  • Fetches permanent messages from FluxOS API
  • Filters and maps transaction data per address

Router (src/plugins/1.router/guards.js)

  • Added billing route guard

Navbar (src/layouts/components/UserProfile.vue)

  • Added Billing link to user profile menu

i18n

Complete billing translation structure added to 22 locale files (en, pl + 20 others):

  • New sections: transactionTable, stats, chart (with timeRanges, displayModes, aggregation)
  • Updated table structure to match new summary table columns
  • Polish grammar corrections (genitive plural forms)
  • All 20 non-English locales were missing ~33 keys — now fully in sync with en.json

Languages updated: ar, bn, de, es, fr, hi, id, it, ja, jv, ko, mr, pa, pt, ru, ta, te, tr, vi, zh-CN


Test plan

  • Visit /billing — page loads, payment history fetches correctly
  • Click Details on an app row — dialog opens with transaction list and pagination
  • Verify transaction types show as Registration / Renewal / Update with correct colors
  • Test chart controls: app filter search, view, period, metric selectors
  • Export CSV — try all date range options including custom range
  • Switch language to PL, DE, FR, RU, ZH — verify all billing strings translate
  • Check mobile layout — pills fit on one row, footer label hidden, dialog stats wrap 2×2
  • Visit billing then check navbar language/theme switcher — font should be unchanged

- Add new billing/payments page with payment history table
- Display currently running apps with instance count
- Add BillingService for API integration
- Use sticky backend for authenticated API requests
- Add billing menu item to UserProfile dropdown
- Implement export functionality
- Add filters for transaction types and date ranges
- Show payment summary statistics (total paid, registrations)
- Display app information with Docker icons
- Add custom scrollbar styling matching table design
- Fix global CSS leak from payments.vue affecting navbar font (scoped .v-menu rules via :has())
- Add smart transaction type detection: Registration / Renewal / Update
  based on spec version and expire field comparison
- Add custom pagination to transaction dialog matching main table style
- Add colored bordered stat cards in transaction dialog
- Update all 20 locale files with complete billing translation structure
  (transactionTable, stats, chart sections were missing)
- Fix Polish plural forms and remove colons from chart control labels
- Improve mobile responsiveness of category pills (font, icon visibility)
- Reposition items-per-page control to left in table footer
- Hide footer label on mobile
- Various chip color and icon improvements
@XK4MiLX XK4MiLX requested a review from Cabecinha84 February 17, 2026 10:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant