Daily review 2026-06-29

[NghaReformer]

Daily Review — 2026-06-29

Scope: full codebase scan (src/, static/playgrounds/). No Svelte 4 syntax violations found.
Server boundary is clean — Supabase only in $lib/server/. API routes handle errors correctly.

---

1. Bugs & Issues

B1 — Missing CSS variables --orange, --blue, --red in theme generator

Severity: HIGH
Files:

• src/lib/theme/css-generator.ts (entire file — vars never emitted)
• src/lib/components/playground/KpiStrip.svelte:76
• src/lib/playgrounds/amortization/components/ChartPanel.svelte:436,444,448,493,501,505,515,529,533
• src/lib/playgrounds/amortization/components/ScheduleTable.svelte:240,246,259,265
• src/lib/playgrounds/amortization/components/InputsPanel.svelte:604–605
• src/lib/playgrounds/bank-reconciliation/components/LedgerPanel.svelte:149,175,208–222
• src/lib/playgrounds/bank-reconciliation/components/VarianceScale.svelte:252,260,264,410,413,416
• src/lib/playgrounds/bank-reconciliation/components/TransactionJournal.svelte:271,276,378,382
• src/lib/playgrounds/bank-reconciliation/components/BankStatementPanel.svelte:175

css-generator.ts emits --green, --amber, --error but never --orange, --blue, or --red. Every var(--orange, #f59e0b), var(--blue, #3b82f6), and var(--red, #ef4444) falls through to its hardcoded fallback — the CSS variable is always missing, making these hex values the real production colors. This defeats the theme token system and blocks future retheme.

Fix: Add orange, blue, and red fields to ThemeTokens.colors in tokens.ts, set values in defaultTheme, and emit --orange, --blue, --red in css-generator.ts.

---

B2 — Hardcoded hex palette in CategoryBreakdownDonut.svelte

Severity: HIGH
File: src/lib/playgrounds/bank-reconciliation/components/CategoryBreakdownDonut.svelte:30–40

CATEGORY_COLORS is a plain TypeScript constant with 9 hardcoded hex values. These are passed as SVG stroke props and as style="background: {seg.color}" inline styles (line 120). They bypass the theme system entirely and cannot be rethemed.

Fix: Map each ItemCategory to a CSS variable reference. For categories with no existing token, define new semantic tokens (--purple, --cyan, --pink) in tokens.ts.

---

B3 — Privacy page entirely in hardcoded English, $t imported but unused

Severity: HIGH
File: src/routes/[lang]/privacy/+page.svelte:1–26

All headings and body paragraphs are raw English strings. French users at /fr/privacy see an English-only page. The page imports { t } from $lib/i18n but never calls it.

Fix: Create privacy.en.ts and privacy.fr.ts namespaces. Replace raw strings with $t('privacy.*') calls. Run npm run i18n:check.

---

B4 — Difficulty labels hardcoded in French only

Severity: MEDIUM
File: src/lib/components/playground/ExercisePanel.svelte:11–13

'Fondamental', 'Intermédiaire', 'Avancé' are embedded as module-level constants, not reactive to locale. English users see French labels.

Fix: Convert to $derived using existing diff.* i18n keys.

---

B5 — Accounting framework labels hardcoded (including English-only "French PCG")

Severity: MEDIUM
File: src/lib/components/playground/PlaygroundSettings.svelte:9–12

'French PCG' is English-only (French users should see 'PCG français'). Common namespace already has coa.fw.* keys.

Fix: Derive the options array reactively with $derived($t).

---

B6 — Hardcoded #fff in component CSS

Severity: MEDIUM
Files: EntryHistory.svelte:400, chart-of-accounts/+page.svelte:423,458, learn/+page.svelte:202

Fix: Replace color: #fff with color: var(--bg).

---

B7 — rgba(0,0,0,0.3) hardcoded in PlaygroundCard.svelte

Severity: MEDIUM
File: src/lib/components/PlaygroundCard.svelte:45

Base box-shadow uses raw rgba while --shadow-glow token is used in the same declaration. Fix: Use var(--shadow-lg).

---

B8 — rgba(255,255,255,0.02) repeated 11 times, not tokenized

Severity: LOW
Files: Multiple CVP playground components (GoalSeekPanel, WhatIfPanel, SensitivityTable, MultiProductForm, IndifferencePanel, Playground.svelte)

Fix: Add --panel-inset token, emit from css-generator.ts, replace raw values.

---

B9 — Inline style= on data-driven visual elements

Severity: LOW
Files: CategoryBreakdownDonut:120, MatchingPairsOverlay:88/108, VarianceScale:146, ScenarioWalkthrough:62, ReconciliationFlow:122/133/160

Fix: Use style:--var="{value}" + CSS var(--var) instead of style= attributes.

---

B10 — onMount in FeedbackLauncher.svelte — not idiomatic Svelte 5

Severity: LOW
File: src/lib/components/feedback/FeedbackLauncher.svelte:2

onMount is a Svelte 4 lifecycle import. The keyboard listener fits cleanly in a $effect with cleanup return.

Fix: Replace onMount + mounted flag with $effect(() => { ...; return () => ... }).

---

2. New Playground Ideas

Existing coverage: amortization (loan), bank reconciliation, CVP, simple/compound/bond interest, journal entry, TVM.

---

P1 — Inventory Valuation Methods

EN: Inventory Valuation Methods | FR: Méthodes d'évaluation des stocks
Target: Licence 2 / Licence 3

Fixes persistent student confusion between FIFO (PEPS) and Weighted Average Cost (CMUP) — SYSCOHADA only permits these two. Learner inputs purchase/sale events; playground recomputes the stock card in real time with a FIFO ↔ CMUP toggle showing how the method choice shifts COGS and closing inventory value. Complements the journal-entry playground by modelling the upstream inventory flow before it gets journaled.

---

P2 — VAT / TVA Input-Output Reconciliation

EN: VAT Input/Output Reconciliation | FR: Déclaration de TVA
Target: Licence 2 / practicing professional

No existing playground covers indirect tax. Learner enters purchase and sales invoices (HT, rate, deductibility %); playground computes TVA collectée, TVA déductible, net TVA payable, and previews the SYSCOHADA journal entries (accounts 4455/4456/4457). Rate selector covers 18% CEMAC standard and 0% exempt.

---

P3 — Financial Ratio Analyser

EN: Financial Ratio Analysis | FR: Analyse financière par ratios
Target: Licence 3 / Master 1

Operates at the strategic level that transaction-focused playgrounds can't reach. Learner inputs a simplified SYSCOHADA trial balance; playground computes FR/BFR/TN liquidity, solvency (gearing, D/E), profitability (ROE, ROA, EBITDA margin), and activity ratios (DSO, DPO). Radar chart + stress-test slider shows which ratios breach thresholds under revenue drop or debt increase. SYSCOHADA vs IFRS classification toggle shows how reclassification shifts the numbers.

---

P4 — Payroll / Fiche de Paie

EN: Payroll Computation | FR: Calcul de la fiche de paie
Target: Licence 3 / practicing professional

OHADA-zone payroll has layered country-specific social charges (CNPS, IRPP tranches) that no existing playground models. Learner inputs gross salary, country (Cameroon / Côte d'Ivoire / Senegal), and category (cadre/non-cadre); playground produces a payslip breakdown, employer cost total, and the required journal entries (641, 645, 431, 447).

---

P5 — Asset Depreciation Method Comparison

EN: Depreciation Method Comparison | FR: Comparaison des modes d'amortissement
Target: Licence 1 / Licence 2

Directly addresses the common student confusion between loan amortization (existing playground) and asset depreciation under SYSCOHADA Articles 35–38. Three methods run side by side — Linéaire, Dégressif (1.5×/2×), Unités d'œuvre — with animated net-book-value chart, annual journal entries (6811 Dotations / 2818 Amortissements), and a tax timing difference table when the "fiscal impact" toggle is on.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ohadalearn	Ready	Preview, Comment	Jun 29, 2026 11:10pm