284313f908
Some checks are pending
Bidi Control Character Guard / bidi-control-guard (push) Waiting to run
Circular Dependency Check / Check for new circular dependencies (push) Waiting to run
Citus Migration Smoke / Combined migrations on single-node Citus (push) Waiting to run
E2E Fresh Install Tests / fresh-install-e2e (push) Waiting to run
ext-v2 guardrails / Run ext-v2 guard and ESLint (push) Waiting to run
Integration Tests / Check for relevant changes (push) Waiting to run
Integration Tests / ${{ (github.event_name == 'schedule' || github.event.inputs.suite == 'full') && 'Full integration suite' || 'Tier-1 integration subset' }} (push) Blocked by required conditions
Mobile checks / Mobile lint + typecheck (push) Waiting to run
Mobile checks / Mobile unit tests (push) Waiting to run
Mobile checks / Mobile dependency audit (report) (push) Waiting to run
Mobile checks / Mobile reproducibility checks (push) Waiting to run
Secrets guard (env backups) / Ensure no tracked env backup files (push) Waiting to run
Temporal Readiness / fast-readiness (push) Waiting to run
Temporal Readiness / docker-parity (push) Waiting to run
TypeScript Type Check / Nx affected typecheck (push) Waiting to run
Unit Tests / Skipped-test budget (push) Waiting to run
Unit Tests / Nx affected unit tests (push) Waiting to run
Unit Tests / Server unit coverage (informational) (push) Waiting to run
Validate Tenant Management Schema / Check for relevant changes (push) Waiting to run
Validate Tenant Management Schema / Validate Tenant Management Schema (push) Blocked by required conditions
EE Workflows Build Guard / ee-workflows-build-guard (push) Waiting to run
Excluded: .git, node_modules, secrets/, compose.env, assemblyscript tgz Source: /opt/alga-psa on psa.joliet.tech
120 lines
8.5 KiB
Markdown
120 lines
8.5 KiB
Markdown
# PRD — MSP i18n: Billing Dashboard Sub-batch
|
|
|
|
- Slug: `2026-04-09-msp-i18n-billing-dashboard`
|
|
- Date: `2026-04-09`
|
|
- Status: Draft
|
|
- Parent plan: `/.ai/translation/MSP_i18n_plan.md`
|
|
|
|
## Summary
|
|
|
|
Extract hardcoded English strings from 17 top-level billing dashboard components, create a
|
|
new `msp/billing` namespace, wire `useTranslation('msp/billing')`, generate translations for
|
|
7 languages + 2 pseudo-locales, and update `ROUTE_NAMESPACES` to load the new namespace on
|
|
the `/msp/billing` route.
|
|
|
|
These 17 files are the billing dashboard "shell" components that do not belong to the contracts,
|
|
quotes, invoicing, credits, or service-catalog sub-batches. None of them currently use
|
|
`useTranslation`.
|
|
|
|
## Problem
|
|
|
|
MSP users navigating to `/msp/billing` see a fully translated sidebar and navigation chrome
|
|
but hit an English-only billing dashboard. The 17 components in this batch collectively render
|
|
~350-450 hardcoded English strings including page titles, tab labels, column headers, button
|
|
labels, toast messages, form labels, validation messages, dialog titles, status badges, and
|
|
empty states. Non-English MSP users experience a jarring language switch when entering the
|
|
billing area.
|
|
|
|
## Goals
|
|
|
|
1. Create `server/public/locales/en/msp/billing.json` with all keys needed by these 17 components
|
|
2. Wire `useTranslation('msp/billing')` into all 17 components
|
|
3. Generate translations for 6 non-English locales (fr, es, de, nl, it, pl) + 2 pseudo-locales (xx, yy)
|
|
4. Update `ROUTE_NAMESPACES['/msp/billing']` to include `msp/billing`
|
|
5. Measurable: 0 of 17 components wired -> 17 of 17 wired
|
|
|
|
## Non-goals
|
|
|
|
- Translating components in sub-directories that belong to other sub-batches:
|
|
`contracts/`, `quotes/`, `contract-lines/`, `reports/`, invoice-related components
|
|
(InvoiceTemplates, InvoiceTemplateEditor, InvoicingHub, BillingCycles, RecurringServicePeriodsTab,
|
|
TaxRates), or settings components (ServiceCatalogManager, ProductsManager)
|
|
- Translating template engine output (TemplateRendererCore renders invoice HTML, not UI chrome)
|
|
- Translating tenant data (invoice content, service names, client names)
|
|
- Splitting `msp/billing` into micro-namespaces per component
|
|
- Changing `features/billing` namespace (used by client-portal billing)
|
|
|
|
## File Inventory
|
|
|
|
| # | Component | LOC | Size | Est. Strings | Key Content |
|
|
|---|-----------|-----|------|--------------|-------------|
|
|
| 1 | ReconciliationResolution.tsx | 1129 | XL | ~80 | Stepper labels, resolution options (recommended/custom/no-action), four-eyes approval flow, verification code UI, balance comparison labels, correction summary, confirmation dialog, toast/error messages |
|
|
| 2 | DiscrepancyDetail.tsx | 921 | L | ~70 | Back nav, status badges (Open/In Review/Resolved), balance comparison, transaction history table headers, credit tracking table headers, issue detail alerts, resolution dialog, recommended fix labels |
|
|
| 3 | UsageTracking.tsx | 685 | L | ~45 | Bucket hours overview, usage records table headers (Client/Service/Quantity/Usage Date/Contract Line/Actions), add/edit/delete usage dialogs, filter labels, toast messages, contract line selector guidance |
|
|
| 4 | LineItem.tsx | 514 | M | ~40 | Line item labels (Service/Quantity/Rate/Description), discount fields (type/amount/percentage), apply-to selector, taxable/non-taxable badges, subtotal, collapsed summary text |
|
|
| 5 | FixedContractLineServicesList.tsx | 500 | M | ~35 | Table headers (Service Name/Category/Billing Method/Quantity/Default Rate/Actions), billing method options, add services section, product/service badges, dropdown actions (Edit Quantity/Remove) |
|
|
| 6 | AccountingExportsTab.tsx | 458 | M | ~40 | Accounting Exports title/description, batch table headers (Batch/Adapter/Status/Created/Updated/Actions), new export dialog (Adapter/Start Date/End Date/Client Search/Invoice Statuses/Notes), batch detail dialog, status labels, action buttons |
|
|
| 7 | FixedContractLinePresetServicesList.tsx | 446 | M | ~35 | Same column structure as FixedContractLineServicesList, unsaved changes warning, save/reset buttons, navigation warning dialog, add services section, billing method labels |
|
|
| 8 | RecommendedFixPanel.tsx | 429 | M | ~40 | Recommended/Alternative/No-Action fix panels, fix dialog titles and descriptions per fix type, impact summary, notes field, custom adjustment amount, cancel/apply buttons |
|
|
| 9 | TemplateRendererCore.ts | 415 | M | ~3 | Template engine logic; few user-visible strings ("N/A", "Unknown value", "No data for list"). Most output is invoice content, not UI chrome. |
|
|
| 10 | Overview.tsx | 297 | M | ~35 | Metric card titles (Active Contract Lines/Billing Clients/Monthly Revenue/Active Services/Outstanding Amount/Credit Balance/Pending Approvals), feature card titles and descriptions, Monthly Activity, Service Catalog Management, beta warning |
|
|
| 11 | BillingDashboard.tsx | 246 | M | ~5 | Page title "Billing", beta warning banner, back-to-presets nav, quote templates heading |
|
|
| 12 | EditContractLineServiceQuantityDialog.tsx | 175 | S | ~10 | Dialog title, quantity label, validation messages (empty, not positive), save/cancel buttons, saving indicator |
|
|
| 13 | billingTabsConfig.ts | 136 | S | ~16 | Tab labels: Quotes, Quote Layouts, Quote Templates, Client Contracts, Accounting Exports, Contract Templates, Invoicing, Invoice Layouts, Tax Rates, Contract Line Presets, Billing Cycles, Service Periods, Usage Tracking, Reports, Service Catalog, Products |
|
|
| 14 | TemplateRenderer.tsx | 131 | S | ~4 | Loading text, error display, empty state message |
|
|
| 15 | PropertyEditor.tsx | 85 | S | ~7 | Field labels (Content/Data Field/Width/Height/Font Size/Color), "Select a field" placeholder |
|
|
| 16 | ConditionalRuleManager.tsx | 77 | S | ~6 | "Conditional Display Rules" heading, action options (Show/Hide/Format), input placeholders (Condition/Target), "Add Rule" button |
|
|
| 17 | ContractsHub.tsx | 77 | S | ~4 | "Contracts" heading, tab labels (Templates/Client Contracts) |
|
|
|
|
**Total estimated strings: ~475**
|
|
|
|
## Namespace Structure
|
|
|
|
**Namespace:** `msp/billing`
|
|
**File:** `server/public/locales/{lng}/msp/billing.json`
|
|
|
|
Key groups (preliminary):
|
|
- `dashboard.*` -- page title, beta warning, tab labels
|
|
- `overview.*` -- metric titles, feature cards, monthly activity, service catalog section
|
|
- `reconciliation.*` -- stepper, resolution options, balance comparison, four-eyes approval
|
|
- `discrepancy.*` -- status badges, transaction/credit tracking tables, issue detail
|
|
- `recommendedFix.*` -- fix panels, dialog titles/descriptions, impact summary
|
|
- `usage.*` -- bucket overview, usage records table, add/edit/delete forms, filters
|
|
- `lineItem.*` -- service/discount fields, taxable badges, subtotal
|
|
- `contractLineServices.*` -- service list table, add services, billing methods, actions
|
|
- `presetServices.*` -- preset service list, unsaved changes, save/reset
|
|
- `accountingExports.*` -- batch table, new export dialog, batch detail dialog
|
|
- `templateRenderer.*` -- loading, error, empty states
|
|
- `templateDesigner.*` -- property editor labels, conditional rules
|
|
- `contractsHub.*` -- heading, sub-tabs
|
|
- `editQuantityDialog.*` -- dialog title, validation, buttons
|
|
- `common.*` -- shared labels (Cancel, Save, Delete, Error, etc.) -- reuse `common` namespace where possible
|
|
|
|
## ROUTE_NAMESPACES Update
|
|
|
|
Update `packages/core/src/lib/i18n/config.ts`:
|
|
|
|
```typescript
|
|
'/msp/billing': ['common', 'msp/core', 'features/billing', 'msp/reports', 'msp/billing'],
|
|
```
|
|
|
|
This adds `msp/billing` to the existing route entry. Future billing sub-batches may add
|
|
additional namespaces (e.g., `msp/billing-contracts`, `msp/billing-invoicing`).
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] `server/public/locales/en/msp/billing.json` exists with all keys referenced by the 17 components
|
|
- [ ] All 17 components import `useTranslation('msp/billing')` and wrap all user-visible strings
|
|
with `t('key', { defaultValue: 'English fallback' })`
|
|
- [ ] `TemplateRendererCore.ts` has its 2-3 user-visible strings translated (or documented as
|
|
N/A if they only appear in generated HTML)
|
|
- [ ] `billingTabsConfig.ts` tab labels are translatable (either via `t()` calls in the config
|
|
or in the consuming component that reads tab definitions)
|
|
- [ ] `ROUTE_NAMESPACES['/msp/billing']` includes `msp/billing`
|
|
- [ ] Translations exist for all 9 locales (en, fr, es, de, nl, it, pl, xx, yy)
|
|
- [ ] `node scripts/generate-pseudo-locales.cjs && node scripts/validate-translations.cjs`
|
|
exits 0
|
|
- [ ] All existing billing-related tests pass
|
|
- [ ] Visual smoke test: `/msp/billing` renders correctly in `en` and at least one non-English
|
|
locale; `xx` pseudo-locale shows pseudo-text for every visible string
|