hihala-dashboard/docs/superpowers/plans/2026-03-25-quick-medium-improvements.md

Dashboard Quick & Medium Improvements

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Improve reliability, performance, and code quality of the HiHala Dashboard.

Architecture: Focused improvements across data layer (timeout, retry), UI (error handling, loading skeletons, code splitting), config (VAT rate), and DX (TypeScript strict, dead code removal).

Tech Stack: React 19, Vite 7, TypeScript 5, Chart.js

---

Task 1: Fetch Timeout + Retry Logic

Files:

• Modify: src/services/dataService.ts

• Add fetchWithTimeout wrapper (10s timeout) around all fetch calls

• Add retry with exponential backoff (3 attempts, 1s/2s/4s) to fetchNocoDBTable and discoverTableIds

• Commit

Task 2: Friendly Error Handling

Files:

• Modify: src/App.tsx (error display)

• Modify: src/services/dataService.ts (error classification)

• Add error classification in dataService (network, auth, config, unknown)

• Replace raw error message in App.tsx with user-friendly messages using i18n keys

• Add error keys to src/locales/en.json and src/locales/ar.json

• Commit

Task 3: Remove Dead Code

Files:

• Delete: src/hooks/useUrlState.ts

• Delete: src/services/sallaService.ts

• Delete unused files

• Verify no imports reference them

• Commit

Task 4: Route-Based Code Splitting

Files:

• Modify: src/App.tsx

• Lazy-load Dashboard, Comparison, Slides with React.lazy + Suspense

• Commit

Task 5: Loading Skeletons

Files:

• Create: src/components/shared/LoadingSkeleton.tsx

• Modify: src/App.tsx (replace spinner with skeleton)

• Modify: src/App.css (skeleton styles)

• Create skeleton component (stat cards + chart placeholders)

• Use as Suspense fallback and initial loading state

• Commit

Task 6: VAT Rate from Config

Files:

• Modify: src/services/dataService.ts

• Extract VAT_RATE to a named constant at top of file

• Commit

Task 7: TypeScript Strict Mode

Files:

• Modify: tsconfig.json

• Modify: various files as needed to fix type errors

• Enable strict: true, noImplicitAny: true, strictNullChecks: true

• Fix all resulting type errors

• Verify build passes

• Commit