Daily review 2026-06-23

[NghaReformer]

Daily Review — 2026-06-23

Automated senior-review routine. Reviewed commit 65e5077.

---

1. Bugs & Issues

1.1 Hardcoded Hex Colors — Theme Token Bypass

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

Severity: HIGH

CATEGORY_COLORS maps nine categories to raw hex values (#6ea8fe, #22c55e, #f59e0b, etc.), bypassing the design-token system. If the theme changes or a second theme is added this chart will be visually inconsistent.

Suggested fix: Expose these as CSS custom properties in src/lib/theme/tokens.ts or map categories to existing semantic tokens (--green, --amber, --error, --accent) and read them from getComputedStyle.

---

src/lib/playgrounds/bank-reconciliation/components/MatchingPairsOverlay.svelte:30–34

Severity: HIGH

COLOR maps four MatchType values to hardcoded hex strings used as SVG stroke/fill attributes. Same token-bypass problem.

Suggested fix: Read CSS custom properties via getComputedStyle(document.documentElement).getPropertyValue('--green') at mount, or add dedicated match-type tokens to the theme.

---

src/lib/components/playground/KpiStrip.svelte:76

Severity: MEDIUM

color: var(--orange, #f59e0b);

--orange is not emitted by the theme token system (the token is named amber), so the hardcoded fallback fires on every page load.

Suggested fix: Add orange to src/lib/theme/tokens.ts colors, or change the usage to var(--amber).

---

src/lib/playgrounds/journal-entry/components/EntryHistory.svelte:400, src/routes/[lang]/chart-of-accounts/+page.svelte:423,458, src/routes/[lang]/learn/+page.svelte:202

Severity: LOW

color: #fff; — raw white. Replace with var(--text-primary).

---

1.2 Dynamic Inline Styles (Runtime-Computed)

These are not static styling decisions and are technically unavoidable, but the CSS custom property pattern is cleaner:

File	Line	Current	Recommendation
MatchingPairsOverlay.svelte	88	width:{w}px; height:{h}px	--w:{w}px; --h:{h}px in style attr + CSS width: var(--w)
MatchingPairsOverlay.svelte	108	animation-delay: {i*60}ms	Acceptable; add a brief comment
ScenarioWalkthrough.svelte	62	width: {progressPct}%	--progress:{progressPct}% + width: var(--progress)
ReconciliationFlow.svelte	122,133,160	dynamic heights/opacity	CSS custom property pattern

---

1.3 console.warn Not Gated Behind Dev Check

src/lib/playgrounds/_registry.ts:14

Severity: LOW

console.warn(...) runs in production. Wrap in if (import.meta.env.DEV).

---

1.4 Accessibility — aria-label Values Not Internationalized

Severity: MEDIUM

Twelve aria-label attributes are hardcoded in English. FR screen-reader users hear English labels.

File	Line	Value
src/lib/components/Nav.svelte	16	"Main navigation"
src/lib/components/Nav.svelte	28	"Toggle menu"
src/lib/components/playground/PlaygroundTabs.svelte	18	"Playground sections"
src/lib/playgrounds/journal-entry/components/JournalEntryForm.svelte	123	"Journal entry lines"
src/lib/playgrounds/journal-entry/components/JournalEntryForm.svelte	128	"Actions"
src/lib/playgrounds/interest/components/ModeTabs.svelte	22	"Interest mode"
src/lib/playgrounds/bank-reconciliation/components/ReconciliationStatement.svelte	29	"layout" (also misleading)
src/lib/playgrounds/bank-reconciliation/components/LedgerPanel.svelte	41	"Actions"
src/lib/playgrounds/bank-reconciliation/components/BankStatementPanel.svelte	41	"Actions"
src/lib/playgrounds/bank-reconciliation/components/TransactionJournal.svelte	126	"Transaction side"
src/lib/playgrounds/cvp/components/ChartToolbar.svelte	34	"Chart views"
src/lib/playgrounds/cvp/components/InputPanel.svelte	47	"CVP mode"

Suggested fix: Add aria.* keys to common.en.ts / common.fr.ts and use $t('common.aria.mainNav') etc.

---

1.5 tsx Not Installed — npm run i18n:check Fails

Severity: MEDIUM

npm run i18n:check exits with sh: tsx: not found. The TranslationKey union type cannot be regenerated, so i18n type safety degrades silently as namespaces evolve.

Suggested fix: npm install -D tsx and confirm in CI.

---

Summary

Severity	Count	Items
HIGH	2	Hex color constants in donut chart + SVG overlay
MEDIUM	3	Missing --orange token, non-i18n aria-labels, tsx missing
LOW	4	Raw #fff colors, dynamic inline styles, console.warn

Zero Svelte 5 rune violations. No export let, $:, on:*, <slot>, or $app/stores found. Server-only boundary clean. No unhandled async errors. No dead code detected.

---

2. New Playground Ideas

Existing: Amortization, Bank Reconciliation, CVP, Interest, Journal Entry, TVM, Depreciation (static HTML).

---

2.1 VAT / TVA Computation Playground

EN: VAT Accounting Simulator | FR: Simulateur de comptabilité TVA
Target: Licence 2, practicing professional

Fixes confusion between collected VAT (liability, compte 4441) and deductible VAT (asset, compte 4451), and the TVA à décaisser netting. User enters purchases and sales with mixed OHADA VAT rates; playground builds the VAT ledger live and generates the monthly settlement journal entry.

Inputs: Line items (description, HT amount, VAT rate, buy/sell). Outputs: Collected/deductible totals, net payable/refundable, SYSCOHADA journal entries.

---

2.2 Fixed Asset Lifecycle Playground

EN: Fixed Asset Lifecycle Tracker | FR: Suivi du cycle de vie des immobilisations
Target: Licence 3, Master

Extends the static depreciation demo into the full SYSCOHADA lifecycle: acquire → depreciate → optionally revalue (comptes 1051, class 2) → dispose. Timeline scrubber drives a carrying-value chart and auto-generates the journal entry for each event, including gain/loss on disposal.

Inputs: Cost, date, useful life, depreciation method, optional revaluation, disposal price/date. Outputs: Year-by-year schedule, carrying value chart, per-event journal entries.

---

2.3 SYSCOHADA Ratio Analyser

EN: SYSCOHADA Ratio Analyser | FR: Analyseur de ratios SYSCOHADA
Target: Licence 3, Master, professional

Editable SYSCOHADA balance sheet + P&L cells. As values change, ratios update live: fonds de roulement, BFR, trésorerie nette, endettement, rentabilité économique. Traffic-light panel flags out-of-range ratios. Complements CVP's internal cost analysis with external financial statement reading — a core DESCOGEF exam topic.

Inputs: ~15–20 balance sheet / P&L lines. Outputs: 8–10 computed ratios with formulas, trend arrows, status indicators.

---

2.4 OHADA Payroll Simulator

EN: OHADA Payroll Simulator | FR: Simulateur de paie OHADA
Target: Licence 2/3, HR professional

Country selector (Cameroon, Côte d'Ivoire, Sénégal, Congo-B) drives CNPS/CNSS rates and IRPP bracket schedules. Computes gross → net with employer/employee charge decomposition and generates the full payroll journal entry using SYSCOHADA class-4 accounts. Fixes systematic confusion over which charges are employer-borne vs. employee-borne.

Inputs: Country, gross salary, allowances, headcount. Outputs: Pay slip breakdown, employer total cost, journal entry.

---

2.5 Foreign Currency Revaluation Playground

EN: Foreign Currency Revaluation | FR: Réévaluation des opérations en devises
Target: Master, international trade professional

Demonstrates the two-step SYSCOHADA treatment of foreign-currency transactions (compte 776/676): initial recognition at transaction-date rate, then year-end revaluation at closing rate. A rate sensitivity slider shows how exchange rate movements affect reported profit. Distinguishes from IAS 21 treatment — a frequent exam question.

Inputs: Transaction amount (USD/EUR/GBP), transaction-date rate, closing rate, transaction type. Outputs: Initial entry, revaluation entry, net position, gain/loss in FCFA.

---

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 23, 2026 11:08pm