Gudea Drug-Regulation Dashboard
Analytics for a national drug-regulation programme in Iraq: label printing, inspections, lab tests, import approvals and revenue, in Arabic and English, on desktop and phone.
Blurred on purpose: client work under NDA
Slide 1 of 12
Frontend developer · built from scratch
Gudea is a drug-regulation platform in Iraq, and this is its analytics side: six dashboards for label printing, the drug catalogue, health inspectors' reports, lab tests, import and customs approvals, and revenue, each behind its own permission. I built the frontend from the first commit, Arabic first with English, dark mode, a separate phone layout and a clustered map of Iraq, and wired it to the live API.
- Six dashboards from one backend payload, each behind its own permission
- Label printing: exported and printed labels, completion by drug class, output per printer
- Health inspectors' reports with a virtualised table and a clustered map of Iraq
- Import-approval and customs-release requests at every workflow stage
- Revenue in Iraqi dinars: the whole period, this year against last, and per source
- A separate phone shell with bottom tabs, installable as a PWA
- React 18
- TypeScript
- Vite
- TanStack Query
- Zustand
- React Router
- i18next
- Recharts
- MapLibre GL
- TanStack Virtual
- Axios
- PWA
How I built it
- Arabic-first RTL with i18next, Latin digits and localised compact units
- A reverse map that turns the API’s Arabic labels and Latin governorate names into translation keys
- Per-tab TanStack Query calls gated by permission, with a sequential background prefetch
- An Axios client with one shared token refresh for concurrent 401s
- MapLibre GL clustering drawn as HTML pins, with fly-to chips and a full-size view
- TanStack Virtual for long tables, and search that folds Arabic spelling
- Flash-free theming with a View Transitions reveal, a text-size control, and a PWA update prompt