Daily review 2026-07-06

[NghaReformer]

Daily Review — 2026-07-06

Automated scan of the OhadaLearn SvelteKit 2 / Svelte 5 codebase against the rules in CLAUDE.md.
Branch: daily-review/2026-07-06

---

1. Bugs & Issues

1.1 Svelte 5 / CLAUDE.md Violations

No Svelte 4 syntax violations found. All scanned .svelte files use $props(), $state(), $derived(), $effect(), onclick={}, and import { page } from '$app/state' correctly. No export let, $:, on:click, <slot/>, or $app/stores usage detected.

---

1.2 Hardcoded Colors Outside Theme Tokens

#	Severity	File:Line	Issue	Suggested Fix
1	high	src/lib/playgrounds/bank-reconciliation/components/CategoryBreakdownDonut.svelte:31–39	Nine raw hex colors (#6ea8fe, #22c55e, #f59e0b, #10b981, #ef4444, #a855f7, #06b6d4, #ec4899, #fb923c) are hardcoded in a CATEGORY_COLORS constant and piped directly into SVG fills and the inline style="background: {seg.color}". These bypass the theme system entirely and will not respond to future palette changes.	Move each color to src/lib/theme/tokens.ts as semantic tokens (e.g., recon.outstanding, recon.deposit, etc.), add corresponding CSS custom properties in css-generator.ts, and reference them via getComputedStyle or CSS variables in the component.
2	medium	src/routes/[lang]/learn/+page.svelte:202	color: #fff; hardcoded on .group-cta.	Replace with color: var(--text-on-accent) (or add that token).
3	medium	src/routes/[lang]/chart-of-accounts/+page.svelte:423, 458	Two color: #fff; rules on .framework-btn.active and .class-chip.active.	Same fix: use var(--text-on-accent).
4	medium	src/lib/playgrounds/journal-entry/components/EntryHistory.svelte:400	color: #fff; on .btn-confirm.	Use var(--text-on-accent) or var(--text-on-error).
5	low	src/lib/playgrounds/amortization/components/ScheduleTable.svelte:265, ChartPanel.svelte:448,505	Fallback values var(--green, #22c55e) expose a hard hex if the token is missing.	Drop the fallback entirely — if --green is absent, a visible gap in the theme is preferable to a silently inconsistent color.

---

1.3 Server-Boundary Violation (type-only, but still non-compliant)

#	Severity	File:Line	Issue	Suggested Fix
6	medium	src/lib/components/feedback/FeedbackForm.svelte:7	import type { FeedbackType, FeedbackSeverity } from '$lib/server/db/types' — a client-rendered Svelte component imports types from $lib/server/. TypeScript erases this at runtime so it does not cause an actual server-boundary leak today, but it violates the architectural rule in CLAUDE.md and will break if the import is ever changed to a value import.	Extract FeedbackType and FeedbackSeverity into a shared file at src/lib/types/feedback.ts (no server-only imports), then re-export from $lib/server/db/types for the server side.

---

1.4 Accessibility Issues

#	Severity	File:Line	Issue	Suggested Fix
7	high	src/lib/components/playground/PlaygroundTabs.svelte:20–29	Tab buttons have role="tab" and aria-selected but are missing tabindex management. ARIA authoring practices require the roving tabindex pattern: the active tab has tabindex="0", all others have tabindex="-1", and arrow keys move focus. Without this, keyboard users must Tab through all three tabs individually and cannot use the expected arrow-key navigation.	Add :tabindex={activeTab === tab.key ? 0 : -1} to each tab button and add a keydown handler that moves focus with ArrowLeft/ArrowRight.
8	high	src/lib/playgrounds/cvp/Playground.svelte:193–213, 250–271 and src/lib/playgrounds/cvp/components/InputPanel.svelte:47–67	Three separate role="tablist" groups use role="tab" buttons with aria-selected but no tabindex management and no aria-controls linking each tab to its panel. Screen readers cannot infer which panel a tab controls.	Apply the roving tabindex pattern (same as issue 7) and add aria-controls="<panel-id>" plus id on each panel.
9	medium	src/lib/components/playground/PlaygroundTabs.svelte:12–14	Tab icons are emoji characters (📖, 🧮, 📋). CLAUDE.md explicitly bans emoji icons. The aria-hidden="true" on the <span> prevents screen readers from reading them, but the rule is unconditional.	Replace with inline SVGs (consistent with the icon treatment elsewhere in the codebase, e.g., the fullscreen button in the playground shell).
10	medium	src/lib/data/playgrounds.ts:18–69	All seven playground entries carry an emoji icon field (📐, 📊, 📒, 🏦, 📉, 🏧, 📈) rendered as literal characters in PlaygroundCard.svelte and the playground header. CLAUDE.md bans emoji icons.	Replace with SVG icon identifiers or inline SVG components; remove the emoji strings.
11	low	src/lib/playgrounds/cvp/components/InputPanel.svelte:47	aria-label="CVP mode" is a raw English string that bypasses the i18n system. French users see the English label.	Replace with aria-label={translate('cvp.nav.ariaLabel')} (add the key to both locale files).

---

1.5 Stale / Misleading Metadata

#	Severity	File:Line	Issue	Suggested Fix
12	low	src/lib/data/playgrounds.ts:26–36	cvp and journal-entry entries still declare staticFile and non-zero lineCount values even though both have been migrated to native Svelte modules (registered in src/lib/playgrounds/cvp/index.ts and journal-entry/index.ts). isNativeModule correctly overrides the staticFile at runtime, so no functional bug exists today, but the stale fields are misleading and create maintenance risk.	Remove staticFile from the cvp and journal-entry entries and set lineCount: 0 for both.

---

1.6 i18n / Bilingual Parity

The tsx runtime is not installed (npm run i18n:check fails with sh: 1: tsx: not found), so the type-gen script cannot run. Manual key-extraction found:

#	Severity	File	Issue	Suggested Fix
13	medium	src/lib/i18n/namespaces/common.fr.ts	Two keys — coa.class.6 and coa.class.7 — are defined with double-quotes while the rest of the file uses single-quotes. Keys are functionally present, but the style mismatch causes false positives in any regex-based parity check.	Normalise to single-quote delimiters.
14	low	scripts/generate-i18n-types.ts (CI environment)	tsx is not installed globally in the remote execution environment, so npm run i18n:check cannot run in CI or remote sessions.	Add tsx as a devDependency (npm install --save-dev tsx).

---

1.7 Performance / Reactive Chain

No critical reactive-chain or large-list performance issues found. The IRR/NPV numerical solvers in src/lib/finance/irr.ts are well-guarded against overflow and non-convergence. The $derived usages in playground engines are lean.

---

2. New Playground Ideas

Existing playgrounds (native Svelte or iframe): TVM, CVP, Journal Entry, Amortization, Depreciation, Bank Reconciliation, Interest.
No duplicate ideas below.

---

Idea 1 — Financial Statements Builder

Title (EN): Financial Statements Builder
Title (FR): Constructeur des États Financiers

Target learner: Licence 2–3

Pedagogical objective: Students compute individual balances but struggle to assemble the three SYSCOHADA statements (Bilan, Compte de résultat, Tableau de flux) from a trial balance.

Core interaction: Learner receives a randomised adjusted trial balance (15–25 accounts from src/lib/shared/chart-of-accounts/) and assigns each account to the correct statement line. Statements populate in real time; a Check step validates that net income flows from the income statement into the balance sheet.

MVPs: trial balance rows → live Bilan + Compte de résultat + Tableau de flux TN (indirect), pass/fail score, correction hints.

Why it complements: The Journal Entry playground builds entries; this bridges entries → statements. Reuses the existing OHADA chart-of-accounts data directly.

---

Idea 2 — Inventory Valuation Methods

Title (EN): Inventory Valuation Methods (FIFO, AVCO, LIFO*)
Title (FR): Méthodes de valorisation des stocks (FIFO, CMUP, LIFO*)

Target learner: Licence 2, practicing professional

Pedagogical objective: SYSCOHADA mandates FIFO or CMUP — LIFO is forbidden. Students confuse the methods and make CMUP arithmetic errors on each new purchase.

Core interaction: Learner enters stock movements (purchases, sales, returns). Switching between FIFO and CMUP recalculates the valuation card live. A toggle reveals the LIFO figure with a banner explaining prohibition and the profit understatement.

MVPs: opening stock + movement rows → closing stock value, COGS, FIFO vs CMUP delta on gross profit.

Why it complements: No existing playground covers the stock cycle; format/currency system already handles monetary display.

---

Idea 3 — VAT & Tax Provision Calculator

Title (EN): VAT & Tax Provision Calculator
Title (FR): Calculateur de TVA et provision pour impôt

Target learner: Licence 3, Master, practicing professional

Pedagogical objective: Students treat VAT as a simple percentage, missing input/output netting and how the provision is booked in SYSCOHADA accounts 4431/4452/441.

Core interaction: Learner enters sales (output VAT) and purchases (deductible input VAT). The playground computes net VAT payable/credit and generates SYSCOHADA journal entries. A second tab books the corporate-tax provision given pre-tax income and a configurable OHADA-zone rate.

MVPs: sales/purchase rows → VAT declaration summary, journal entries, net tax payable.

Why it complements: High-exam-weight topic with zero current coverage. Reuses AccountPicker and journal-entry rendering.

---

Idea 4 — Lease Accounting (Right-of-Use)

Title (EN): Lease Accounting & Right-of-Use Amortization
Title (FR): Comptabilisation des contrats de location (droit d'utilisation)

Target learner: Master, practicing professional

Pedagogical objective: SYSCOHADA Révisé 2017 introduced ROU asset accounting for finance leases (accounts 2813, 162). Practitioners struggle with initial PV measurement and the finance-charge / liability-amortisation split.

Core interaction: Learner inputs lease terms (term, payment, borrowing rate, residual). Playground builds the full amortisation schedule, shows ROU asset and lease liability on a mini balance sheet, and generates the initial recognition entry plus each period's journal entries in SYSCOHADA codes.

MVPs: lease inputs → amortisation schedule, ROU depreciation schedule, initial and period journal entries.

Why it complements: Extends the Amortization engine (src/lib/playgrounds/amortization/engine.ts); PV calculation already exists in the TVM solver. The two playgrounds can cross-link.

---

Idea 5 — Financial Ratio Analysis Dashboard

Title (EN): Financial Ratio Analysis
Title (FR): Analyse par les ratios financiers

Target learner: Licence 3, Master

Pedagogical objective: Students compute ratios in isolation but cannot interpret how they interact or when thresholds signal distress. SYSCOHADA uses the Bilan condensé format, which differs from IFRS presentation.

Core interaction: Learner enters simplified Bilan and Compte de résultat figures (pre-filled with a realistic OHADA SME scenario). Dashboard renders 15+ ratios grouped by category (liquidity, solvency, profitability, activity) with traffic-light colouring and sector benchmarks. A what-if slider adjusts one input and shows which ratios cross thresholds.

MVPs: 8–10 financial inputs → ratio grid with formulas, traffic-light status, what-if sensitivity.

Why it complements: CVP covers profitability from a cost-structure angle; this covers it from the investor/creditor angle. KpiStrip in src/lib/components/playground/KpiStrip.svelte can be reused directly for ratio tiles.

---

Report generated automatically. npm run i18n:check requires tsx to be installed as a devDependency.

---

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	Jul 6, 2026 11:16pm