first commit

Scaffold Gishen Admin: React/Vite shadcn console with role modules, EN/AM i18n, mocks, and backend spec. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-06 18:01:56 +03:00 · 2026-08-06 18:01:56 +03:00 · c2fd9d6431
commit c2fd9d6431
70 changed files with 8212 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+VITE_USE_MOCKS=true
+VITE_API_BASE_URL=
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,53 @@
+# Gishen Admin Console
+
+Internal ops console for Gishen Pharmacy — Pharmacist, Stock, Procurement, Finance, Marketing, Operations/Dispatch, Super Admin. Built as a React (Vite) SPA with **shadcn/ui**, Gishen branding, and **English / Amharic** i18n.
+
+## Stack
+
+- React 19 + Vite + TypeScript
+- Tailwind + shadcn-style Radix components
+- Zustand, React Router, Axios-ready, Recharts, Sonner
+- i18next (en / am)
+- Mocks by default (`VITE_USE_MOCKS=true`)
+
+## Quick start
+
+```bash
+npm install
+npm run dev
+```
+
+Demo password for all accounts: `demo123`
+
+| Email | Role |
+| --- | --- |
+| admin@gishen.et | Super Admin |
+| pharmacist@gishen.et | Pharmacist (Bole branch) |
+| stock@gishen.et | Stock Manager |
+| procurement@gishen.et | Procurement |
+| finance@gishen.et | Finance |
+| marketing@gishen.et | Marketing Manager |
+| ops@gishen.et | Operations |
+
+## Docs
+
+Living backend contract: [`docs/admin-backend-spec.md`](docs/admin-backend-spec.md) — updated whenever modules are finalized.
+
+## Deploy
+
+- `vercel.json` SPA rewrites for React Router
+- Build: `npm run build` → `dist`
+- Remote: `https://gitea.yaltopia.com/Gishen/Gishen-Admin.git`
+- Host on **Vercel** as a new project (CLI if Gitea import unavailable)
+
+Env:
+
+```
+VITE_USE_MOCKS=true
+VITE_API_BASE_URL=
+```
+
+## Related repos
+
+- Gishen-Ecom — customer storefront
+- Gishen-B2B — institutional portal (org self-register UI lives there; Admin creates/approves orgs)
--- a/docs/admin-backend-spec.md
+++ b/docs/admin-backend-spec.md
@ -0,0 +1,215 @@
+# Gishen Admin — Backend Spec Sheet
+
+**Repo:** Gishen-Admin  
+**Audience:** Shared backend team (consolidate with Ecom / Mobile / B2B sheets later)  
+**Base URL (TBD):** `https://api.gishen.example/v1`  
+**Auth:** Bearer JWT for staff roles  
+**Mocks:** Admin SPA uses in-memory mocks until `VITE_USE_MOCKS=false` and `VITE_API_BASE_URL` point here.
+
+## Changelog
+
+| Date | Change |
+| --- | --- |
+| 2026-08-06 | Scaffold: conventions, roles, auth, empty module sections |
+| 2026-08-06 | Shell + RBAC + preferredLocale |
+| 2026-08-06 | Pharmacist: prescriptions, branch orders |
+| 2026-08-06 | Stock + Procurement |
+| 2026-08-06 | Finance, orgs create + pending self-reg approval |
+| 2026-08-06 | Marketing CRM / loyalty / campaigns |
+| 2026-08-06 | Dispatch board + Telegram bot events |
+| 2026-08-06 | Super Admin team/inbox/audit/settings + FAQ bilingual |
+| 2026-08-06 | Data migration import jobs |
+
+## Conventions
+
+| Item | Convention |
+| --- | --- |
+| Content type | `application/json` (multipart for imports / uploads) |
+| IDs | UUID v4 |
+| Money | Integer ETB (major units for Admin UI demos; align platform-wide later) |
+| Errors | `{ "error": { "code": string, "message": string, "details"?: object } }` |
+| Pagination | `?page=&limit=` → `{ data, meta: { page, limit, total } }` |
+
+## Staff roles
+
+`pharmacist` · `stock_manager` · `procurement` · `finance` · `marketing_manager` · `operations` · `super_admin`
+
+Pharmacist (and optionally stock) sessions include `branchId`.
+
+---
+
+## Auth & me
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| POST | `/auth/staff/login` | — | Email/password → tokens + user |
+| POST | `/auth/refresh` | refresh | Rotate access |
+| POST | `/auth/logout` | staff | Revoke |
+| GET | `/auth/me` | staff | Current principal, roles, branchId |
+| PATCH | `/users/me` | staff | `{ preferredLocale?: "en"\|"am", name? }` |
+
+**Login response sketch:**
+
+```json
+{
+  "accessToken": "...",
+  "refreshToken": "...",
+  "user": {
+    "id": "uuid",
+    "name": "Hana Pharmacist",
+    "email": "pharmacist@gishen.et",
+    "role": "pharmacist",
+    "branchId": "uuid",
+    "preferredLocale": "en"
+  }
+}
+```
+
+Mock key: `authStore.login` → `/auth/staff/login`
+
+---
+
+## Orders (branch inbox)
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/pharmacy/orders` | pharmacist, operations, super_admin | `?branchId=` required for pharmacist |
+| POST | `/orders/:id/confirm` | pharmacist, super_admin | Confirm stock |
+| POST | `/orders/:id/assign-rider` | pharmacist, operations, super_admin | `{ riderId }` |
+| PATCH | `/orders/:id/status` | pharmacist, operations, super_admin | Status lifecycle |
+
+Mock: `mocks/data.orders`
+
+---
+
+## Prescriptions
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/pharmacy/prescriptions` | pharmacist, super_admin | Branch-scoped queue |
+| POST | `/admin/prescriptions/:id/verify` | pharmacist, super_admin | `{ status: approved\|queried\|rejected, qtyAdjustments?, substitute?, notes? }` |
+| POST | `/pharmacy/prescriptions/:id/dispense` | pharmacist | `{ batch, quantity }` stamped pharmacistId + time |
+| GET | `/pharmacy/prescriptions/controlled-report` | pharmacist, super_admin | Controlled-substance report |
+| GET | `/pharmacy/refills` | pharmacist, super_admin | Days-of-supply / script expiry oversight |
+
+---
+
+## Stock & ERP
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/pharmacy/inventory` | stock_manager, pharmacist (read), procurement (read), super_admin | Per-branch stock |
+| GET | `/integrations/erp/sync-status` | stock_manager, super_admin | Last sync |
+| GET | `/admin/stock/discrepancies` | stock_manager, super_admin | Platform vs ERP |
+| POST | `/admin/stock/discrepancies/:id/resolve` | stock_manager, super_admin | One-click resolve |
+| GET/PUT | `/admin/stock/field-ownership` | stock_manager, super_admin | ERP vs platform field owners |
+| POST | `/admin/stock/entry/suggest` | stock_manager, super_admin | Fuzzy duplicate suggestions body `{ query }` |
+| GET | `/admin/stock/merge-proposals` | stock_manager, super_admin | Merge queue |
+| POST | `/admin/stock/merge-proposals/:id/approve` | stock_manager, super_admin | Human approve; reversible 30d |
+| GET | `/admin/stock/alerts` | stock_manager, super_admin | Low stock / expiry watchlist |
+| POST | `/admin/stock/transfers` | stock_manager, super_admin | Create/approve transfer (owner) |
+
+---
+
+## Procurement
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/admin/procurement/reports` | procurement, stock_manager, super_admin | Dead-stock / fast-mover |
+| GET | `/admin/procurement/reorder-recommendations` | procurement, super_admin | From velocity |
+| POST | `/admin/stock/transfers/request` | procurement, super_admin | Request only; Stock Manager approves |
+
+---
+
+## Finance & organisations
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/admin/finance/settlements` | finance, super_admin | Daily by channel |
+| GET | `/admin/finance/reconciliations` | finance, super_admin | Matched to orders |
+| GET/PUT | `/admin/finance/gateways` | finance, super_admin | Enable/disable Chapa, ArifPay, Telebirr, M-Pesa |
+| POST | `/admin/finance/refunds` | finance, super_admin | Refund handling |
+| GET | `/admin/finance/loyalty-liability` | finance, super_admin | Monthly Birr liability |
+| GET | `/admin/organisations` | finance, super_admin | List |
+| POST | `/admin/organisations` | finance, super_admin | **Create org from Admin** (active) |
+| GET | `/admin/organisations/pending` | finance, super_admin | Self-register queue |
+| POST | `/admin/organisations/:id/approve` | finance, super_admin | Activate credit |
+| POST | `/admin/organisations/:id/reject` | finance, super_admin | Reject |
+| GET | `/admin/organisations/:id/statements` | finance, super_admin | Consolidated invoices |
+
+**Cross-repo:** B2B portal `POST /company/register` creates `status=pending`. Admin approve activates credit.
+
+---
+
+## Marketing
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/admin/crm/customers` | marketing_manager, super_admin | Read profiles |
+| GET | `/admin/crm/segments` | marketing_manager, super_admin | Self-updating segments |
+| GET/POST | `/admin/campaigns` | marketing_manager, super_admin | Compose/schedule SMS/Telegram/push |
+| GET/PUT | `/admin/loyalty/config` | marketing_manager, super_admin | Earn/tiers/referral bonus |
+| GET | `/admin/kpi/summary` | marketing_manager, finance, super_admin | Scoped KPIs |
+
+---
+
+## Dispatch & Telegram bot
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/dispatch/board` | operations, super_admin | Paid + Rx-approved queue |
+| POST | `/dispatch/trips` | operations, super_admin | Batch fulfilments |
+| POST | `/dispatch/trips/:id/assign` | operations, super_admin | `{ riderId }` → emits Telegram manifest |
+| POST | `/dispatch/bot/webhook` | service | Bot status + PoD callbacks |
+| GET | `/dispatch/intake` | operations, super_admin | Partner/POS webhook monitor |
+| POST | `/dispatch/riders` | operations, super_admin | Link Telegram account |
+
+**Events:** `trip.assigned` → bot push; `trip.status_updated` → board + customer tracking.
+
+---
+
+## FAQ (bilingual)
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/admin/faq` | all staff | Published articles |
+| POST | `/admin/faq` | marketing_manager, super_admin | Create |
+| PUT | `/admin/faq/:id` | marketing_manager, super_admin | Update / publish |
+| DELETE | `/admin/faq/:id` | super_admin | Delete |
+
+Fields: `title_en`, `title_am`, `body_en`, `body_am`, `category`, `published`.
+
+---
+
+## Team, inbox, audit, settings
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET/POST | `/admin/users` | super_admin | Staff + role + branch |
+| GET | `/admin/inbox/threads` | super_admin | Chatwoot/Telegram/WhatsApp attached to customer |
+| GET | `/admin/audit` | super_admin | Audit log |
+| GET/PUT | `/admin/settings` | super_admin | Retention, access controls |
+
+---
+
+## Data migration / imports
+
+| Method | Path | Roles | Description |
+| --- | --- | --- | --- |
+| GET | `/admin/imports/templates` | stock_manager, finance, operations, super_admin | Entity schemas |
+| POST | `/admin/imports` | same | Multipart file upload |
+| POST | `/admin/imports/:id/map` | same | Column mapping (+ save template) |
+| POST | `/admin/imports/:id/validate` | same | Dry-run row errors |
+| POST | `/admin/imports/:id/commit` | same | Upsert commit |
+| GET | `/admin/imports` | same | Job history |
+| CRUD | `/admin/imports/mapping-templates` | same | Saved presets |
+
+Entity templates: `stock`, `catalog`, `hr_members`, `branches`, `riders`, `generic`.
+
+---
+
+## Open questions
+
+1. Money units: ETB major vs cents — keep consistent with Ecom/B2B sheets  
+2. Driver channel assumption: Telegram bot (flag if SMS/WhatsApp preferred)  
+3. Checkout entitlement-split: shared component across Ecom/Mobile/B2B (out of Admin UI)  
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gishen Admin</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,51 @@
+{
+  "name": "gishen-admin",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/plus-jakarta-sans": "^5.3.0",
+    "@fontsource/sora": "^5.3.0",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "axios": "^1.19.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "i18next": "^26.3.6",
+    "lucide-react": "^1.29.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-i18next": "^17.0.11",
+    "react-router-dom": "^7.18.2",
+    "recharts": "^3.10.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "autoprefixer": "^10.5.4",
+    "oxlint": "^1.75.0",
+    "postcss": "^8.5.26",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.0"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="14" fill="#141414"/>
+  <text x="32" y="42" text-anchor="middle" font-family="system-ui,sans-serif" font-size="32" font-weight="700" fill="#A8C73A">G</text>
+</svg>
--- a/public/icons.svg
+++ b/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,13 @@
+import { BrowserRouter } from 'react-router-dom'
+import { Toaster } from 'sonner'
+import { AppRoutes } from '@/app/AppRoutes'
+import '@/i18n/config'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AppRoutes />
+      <Toaster richColors position="top-right" />
+    </BrowserRouter>
+  )
+}
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+import { AppLayout } from '@/layouts/AppLayout'
+import { LoginPage } from '@/pages/auth/LoginPage'
+import { DashboardPage } from '@/pages/dashboard/DashboardPage'
+import { OrdersPage } from '@/pages/orders/OrdersPage'
+import { PrescriptionsPage } from '@/pages/prescriptions/PrescriptionsPage'
+import { StockPage } from '@/pages/stock/StockPage'
+import { ProcurementPage } from '@/pages/procurement/ProcurementPage'
+import { FinancePage } from '@/pages/finance/FinancePage'
+import { OrganisationsPage } from '@/pages/organisations/OrganisationsPage'
+import { MarketingPage } from '@/pages/marketing/MarketingPage'
+import { CrmPage } from '@/pages/marketing/CrmPage'
+import { LoyaltyPage } from '@/pages/marketing/LoyaltyPage'
+import { CampaignsPage } from '@/pages/marketing/CampaignsPage'
+import { DispatchPage } from '@/pages/dispatch/DispatchPage'
+import { TeamPage } from '@/pages/team/TeamPage'
+import { InboxPage } from '@/pages/inbox/InboxPage'
+import { AuditPage } from '@/pages/audit/AuditPage'
+import { FaqPage } from '@/pages/faq/FaqPage'
+import { SettingsPage } from '@/pages/settings/SettingsPage'
+import { MigrationsPage } from '@/pages/migrations/MigrationsPage'
+import { AnalyticsPage } from '@/pages/analytics/AnalyticsPage'
+import { useAuthStore } from '@/zustand/authStore'
+import { canAccess } from '@/config/permissions'
+import type { ModuleKey } from '@/types'
+
+function Guard({ module, children }: { module: ModuleKey; children: ReactNode }) {
+  const user = useAuthStore((s) => s.user)
+  if (!user) return <Navigate to="/login" replace />
+  if (!canAccess(user.role, module)) return <Navigate to="/" replace />
+  return children
+}
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route
+        element={
+          <AppLayout />
+        }
+      >
+        <Route
+          index
+          element={
+            <Guard module="dashboard">
+              <DashboardPage />
+            </Guard>
+          }
+        />
+        <Route path="orders" element={<Guard module="orders"><OrdersPage /></Guard>} />
+        <Route path="prescriptions" element={<Guard module="prescriptions"><PrescriptionsPage /></Guard>} />
+        <Route path="stock" element={<Guard module="stock"><StockPage /></Guard>} />
+        <Route path="procurement" element={<Guard module="procurement"><ProcurementPage /></Guard>} />
+        <Route path="finance" element={<Guard module="finance"><FinancePage /></Guard>} />
+        <Route path="organisations" element={<Guard module="organisations"><OrganisationsPage /></Guard>} />
+        <Route path="marketing" element={<Guard module="marketing"><MarketingPage /></Guard>} />
+        <Route path="crm" element={<Guard module="crm"><CrmPage /></Guard>} />
+        <Route path="loyalty" element={<Guard module="loyalty"><LoyaltyPage /></Guard>} />
+        <Route path="campaigns" element={<Guard module="campaigns"><CampaignsPage /></Guard>} />
+        <Route path="dispatch" element={<Guard module="dispatch"><DispatchPage /></Guard>} />
+        <Route path="analytics" element={<Guard module="analytics"><AnalyticsPage /></Guard>} />
+        <Route path="migrations" element={<Guard module="migrations"><MigrationsPage /></Guard>} />
+        <Route path="faq" element={<Guard module="faq"><FaqPage /></Guard>} />
+        <Route path="team" element={<Guard module="team"><TeamPage /></Guard>} />
+        <Route path="inbox" element={<Guard module="inbox"><InboxPage /></Guard>} />
+        <Route path="audit" element={<Guard module="audit"><AuditPage /></Guard>} />
+        <Route path="settings" element={<Guard module="settings"><SettingsPage /></Guard>} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  )
+}
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/components/dashboard/StatCard.tsx
+++ b/src/components/dashboard/StatCard.tsx
@ -0,0 +1,38 @@
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent } from '@/components/ui/card'
+
+export function StatCard({
+  label,
+  value,
+  hint,
+  icon: Icon,
+  tone = 'brand',
+}: {
+  label: string
+  value: string | number
+  hint?: string
+  icon: LucideIcon
+  tone?: 'brand' | 'orange' | 'forest' | 'muted'
+}) {
+  const tones = {
+    brand: 'bg-brand-100 text-brand-700',
+    orange: 'bg-orange/15 text-orange-deep',
+    forest: 'bg-forest/10 text-forest',
+    muted: 'bg-muted text-muted-foreground',
+  }
+  return (
+    <Card>
+      <CardContent className="flex items-start gap-4 p-5">
+        <div className={cn('flex h-11 w-11 items-center justify-center rounded-xl', tones[tone])}>
+          <Icon className="h-5 w-5" />
+        </div>
+        <div className="min-w-0">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
+          <p className="mt-1 font-display text-2xl font-bold text-forest">{value}</p>
+          {hint ? <p className="mt-0.5 text-xs text-muted-foreground">{hint}</p> : null}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@ -0,0 +1,141 @@
+import { NavLink } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import {
+  LayoutDashboard,
+  ShoppingBag,
+  FileHeart,
+  Warehouse,
+  PackageSearch,
+  Wallet,
+  Building2,
+  Megaphone,
+  Users,
+  Gift,
+  Send,
+  Truck,
+  Shield,
+  Inbox,
+  ScrollText,
+  HelpCircle,
+  Settings,
+  Database,
+  BarChart3,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react'
+import { useAuthStore } from '@/zustand/authStore'
+import { canAccess } from '@/config/permissions'
+import type { ModuleKey } from '@/types'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+const navItems: { module: ModuleKey; to: string; icon: typeof LayoutDashboard; labelKey: string }[] = [
+  { module: 'dashboard', to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
+  { module: 'orders', to: '/orders', icon: ShoppingBag, labelKey: 'nav.orders' },
+  { module: 'prescriptions', to: '/prescriptions', icon: FileHeart, labelKey: 'nav.prescriptions' },
+  { module: 'stock', to: '/stock', icon: Warehouse, labelKey: 'nav.stock' },
+  { module: 'procurement', to: '/procurement', icon: PackageSearch, labelKey: 'nav.procurement' },
+  { module: 'finance', to: '/finance', icon: Wallet, labelKey: 'nav.finance' },
+  { module: 'organisations', to: '/organisations', icon: Building2, labelKey: 'nav.organisations' },
+  { module: 'marketing', to: '/marketing', icon: Megaphone, labelKey: 'nav.marketing' },
+  { module: 'crm', to: '/crm', icon: Users, labelKey: 'nav.crm' },
+  { module: 'loyalty', to: '/loyalty', icon: Gift, labelKey: 'nav.loyalty' },
+  { module: 'campaigns', to: '/campaigns', icon: Send, labelKey: 'nav.campaigns' },
+  { module: 'dispatch', to: '/dispatch', icon: Truck, labelKey: 'nav.dispatch' },
+  { module: 'analytics', to: '/analytics', icon: BarChart3, labelKey: 'nav.analytics' },
+  { module: 'migrations', to: '/migrations', icon: Database, labelKey: 'nav.migrations' },
+  { module: 'faq', to: '/faq', icon: HelpCircle, labelKey: 'nav.faq' },
+  { module: 'team', to: '/team', icon: Shield, labelKey: 'nav.team' },
+  { module: 'inbox', to: '/inbox', icon: Inbox, labelKey: 'nav.inbox' },
+  { module: 'audit', to: '/audit', icon: ScrollText, labelKey: 'nav.audit' },
+  { module: 'settings', to: '/settings', icon: Settings, labelKey: 'nav.settings' },
+]
+
+export function Sidebar({
+  isOpen,
+  isCollapsed,
+  onToggleCollapse,
+  onClose,
+}: {
+  isOpen: boolean
+  isCollapsed: boolean
+  onToggleCollapse: () => void
+  onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const role = user?.role ?? 'pharmacist'
+  const items = navItems.filter((item) => canAccess(role, item.module))
+
+  return (
+    <>
+      <div
+        className={cn('fixed inset-0 z-40 bg-black/40 lg:hidden', isOpen ? 'block' : 'hidden')}
+        onClick={onClose}
+      />
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 flex flex-col border-r bg-white transition-all duration-300',
+          isCollapsed ? 'w-[88px]' : 'w-[264px]',
+          isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+        )}
+      >
+        <div className={cn('flex h-16 items-center border-b px-4', isCollapsed ? 'justify-center' : 'gap-3')}>
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-forest text-sm font-bold text-brand-500">
+            G
+          </div>
+          {!isCollapsed && (
+            <div className="min-w-0">
+              <p className="truncate font-display text-sm font-bold text-forest">{t('app.name')}</p>
+              <p className="truncate text-[11px] text-muted-foreground">{user?.role.replace('_', ' ')}</p>
+            </div>
+          )}
+        </div>
+        <nav className="flex-1 space-y-1 overflow-y-auto p-3">
+          {items.map((item) => {
+            const Icon = item.icon
+            return (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === '/'}
+                onClick={onClose}
+                className={({ isActive }) =>
+                  cn(
+                    'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-brand-100/70 text-forest'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                    isCollapsed && 'justify-center px-0',
+                  )
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <span
+                      className={cn(
+                        'flex h-8 w-8 items-center justify-center rounded-lg',
+                        isActive ? 'bg-brand-500/20 text-forest' : 'bg-muted text-muted-foreground',
+                      )}
+                    >
+                      <Icon className="h-4 w-4" />
+                    </span>
+                    {!isCollapsed && <span className="truncate">{t(item.labelKey)}</span>}
+                    {isActive && !isCollapsed && (
+                      <span className="ml-auto h-5 w-1 rounded-full bg-brand-500" />
+                    )}
+                  </>
+                )}
+              </NavLink>
+            )
+          })}
+        </nav>
+        <div className="hidden border-t p-3 lg:block">
+          <Button variant="ghost" className="w-full justify-center" onClick={onToggleCollapse}>
+            {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
+        </div>
+      </aside>
+    </>
+  )
+}
--- a/src/components/topbar/Topbar.tsx
+++ b/src/components/topbar/Topbar.tsx
@ -0,0 +1,67 @@
+import { Menu, Languages, LogOut, User } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useAuthStore } from '@/zustand/authStore'
+import { useNavigate } from 'react-router-dom'
+
+export function Topbar({ onSidebarToggle }: { onSidebarToggle: () => void }) {
+  const { t, i18n } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const logout = useAuthStore((s) => s.logout)
+  const navigate = useNavigate()
+
+  return (
+    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white/90 px-3 backdrop-blur sm:px-4 lg:px-6">
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" className="lg:hidden" onClick={onSidebarToggle}>
+          <Menu className="h-5 w-5" />
+        </Button>
+        <div className="hidden sm:block">
+          <p className="text-sm font-semibold text-forest">{user?.name}</p>
+          <p className="text-xs text-muted-foreground">
+            {user?.branchName ? `${user.branchName} · ` : ''}
+            {user?.role.replaceAll('_', ' ')}
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Languages className="h-4 w-4" />
+              {t('common.language')}: {i18n.language === 'am' ? 'አማ' : 'EN'}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => i18n.changeLanguage('en')}>English</DropdownMenuItem>
+            <DropdownMenuItem onClick={() => i18n.changeLanguage('am')}>አማርኛ</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <User className="h-5 w-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => {
+                logout()
+                navigate('/login')
+              }}
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              {t('common.logout')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@ -0,0 +1,30 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary/20 text-forest',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-brand-100 text-brand-700',
+        warning: 'border-transparent bg-orange/15 text-orange-deep',
+        danger: 'border-transparent bg-red-100 text-red-700',
+        muted: 'border-transparent bg-muted text-muted-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-brand-600',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border bg-background hover:bg-grayScale-100',
+        ghost: 'hover:bg-grayScale-100',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      },
+      size: {
+        default: 'h-11 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-12 px-6',
+        icon: 'h-11 w-11',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { buttonVariants }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@ -0,0 +1,27 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('rounded-2xl border bg-card text-card-foreground shadow-soft', className)}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-1.5 p-5 pb-3', className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('font-display text-lg font-semibold leading-none', className)} {...props} />
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-5 pt-0', className)} {...props} />
+}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export const Dialog = DialogPrimitive.Root
+export const DialogTrigger = DialogPrimitive.Trigger
+export const DialogClose = DialogPrimitive.Close
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/40" />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border bg-background p-6 shadow-soft',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+        <X className="h-4 w-4" />
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-1.5 text-left', className)} {...props} />
+}
+
+export function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <DialogPrimitive.Title className={cn('font-display text-lg font-semibold', className)} {...props} />
+}
+
+export function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <DialogPrimitive.Description className={cn('text-sm text-muted-foreground', className)} {...props} />
+}
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@ -0,0 +1,38 @@
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { cn } from '@/lib/utils'
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[10rem] overflow-hidden rounded-xl border bg-popover p-1 text-popover-foreground shadow-soft',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-lg px-3 py-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -0,0 +1,17 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-11 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+Input.displayName = 'Input'
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@ -0,0 +1,15 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cn } from '@/lib/utils'
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
--- a/src/components/ui/select-native.tsx
+++ b/src/components/ui/select-native.tsx
@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+export function Separator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('h-px w-full bg-border', className)} {...props} />
+}
+
+export function SelectNative({ className, ...props }: React.ComponentProps<'select'>) {
+  return (
+    <select
+      className={cn(
+        'flex h-11 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@ -0,0 +1,36 @@
+import { cn } from '@/lib/utils'
+
+export function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="w-full overflow-auto">
+      <table className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+}
+
+export function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+export function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+}
+
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...props} />
+  )
+}
+
+export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn('h-11 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn('p-3 align-middle', className)} {...props} />
+}
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@ -0,0 +1,40 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '@/lib/utils'
+
+export const Tabs = TabsPrimitive.Root
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn('inline-flex h-11 items-center gap-1 rounded-xl bg-muted p-1 text-muted-foreground', className)}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('mt-4 focus-visible:outline-none', className)} {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+export function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[88px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
--- a/src/config/permissions.ts
+++ b/src/config/permissions.ts
@ -0,0 +1,92 @@
+import type { ModuleKey, StaffRole } from '@/types'
+
+const ALL: ModuleKey[] = [
+  'dashboard',
+  'orders',
+  'prescriptions',
+  'stock',
+  'procurement',
+  'finance',
+  'organisations',
+  'marketing',
+  'crm',
+  'loyalty',
+  'campaigns',
+  'dispatch',
+  'team',
+  'inbox',
+  'audit',
+  'faq',
+  'faq_write',
+  'settings',
+  'migrations',
+  'analytics',
+]
+
+export const roleModules: Record<StaffRole, ModuleKey[]> = {
+  pharmacist: ['dashboard', 'orders', 'prescriptions', 'stock', 'faq'],
+  stock_manager: ['dashboard', 'stock', 'procurement', 'migrations', 'faq'],
+  procurement: ['dashboard', 'procurement', 'stock', 'faq'],
+  finance: ['dashboard', 'finance', 'organisations', 'migrations', 'analytics', 'faq'],
+  marketing_manager: ['dashboard', 'marketing', 'crm', 'loyalty', 'campaigns', 'analytics', 'faq', 'faq_write'],
+  operations: ['dashboard', 'dispatch', 'orders', 'migrations', 'faq'],
+  super_admin: ALL,
+}
+
+export function canAccess(role: StaffRole, module: ModuleKey) {
+  return roleModules[role]?.includes(module) ?? false
+}
+
+export const demoAccounts: {
+  email: string
+  password: string
+  role: StaffRole
+  name: string
+  branchId?: string
+  branchName?: string
+}[] = [
+  {
+    email: 'pharmacist@gishen.et',
+    password: 'demo123',
+    role: 'pharmacist',
+    name: 'Hana Pharmacist',
+    branchId: 'br-bole',
+    branchName: 'Bole Branch',
+  },
+  {
+    email: 'stock@gishen.et',
+    password: 'demo123',
+    role: 'stock_manager',
+    name: 'Dawit Stock',
+  },
+  {
+    email: 'procurement@gishen.et',
+    password: 'demo123',
+    role: 'procurement',
+    name: 'Sara Procurement',
+  },
+  {
+    email: 'finance@gishen.et',
+    password: 'demo123',
+    role: 'finance',
+    name: 'Yonas Finance',
+  },
+  {
+    email: 'marketing@gishen.et',
+    password: 'demo123',
+    role: 'marketing_manager',
+    name: 'Lidya Marketing',
+  },
+  {
+    email: 'ops@gishen.et',
+    password: 'demo123',
+    role: 'operations',
+    name: 'Abel Operations',
+  },
+  {
+    email: 'admin@gishen.et',
+    password: 'demo123',
+    role: 'super_admin',
+    name: 'Super Admin',
+  },
+]
--- a/src/i18n/config.ts
+++ b/src/i18n/config.ts
@ -0,0 +1,25 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import en from '@/locales/en/translation.json'
+import am from '@/locales/am/translation.json'
+
+const saved = localStorage.getItem('gishen_locale') || 'en'
+
+void i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    am: { translation: am },
+  },
+  lng: saved,
+  fallbackLng: 'en',
+  interpolation: { escapeValue: false },
+})
+
+i18n.on('languageChanged', (lng) => {
+  localStorage.setItem('gishen_locale', lng)
+  document.documentElement.lang = lng
+})
+
+document.documentElement.lang = saved
+
+export default i18n
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,65 @@
+@import "@fontsource/plus-jakarta-sans/400.css";
+@import "@fontsource/plus-jakarta-sans/500.css";
+@import "@fontsource/plus-jakarta-sans/600.css";
+@import "@fontsource/plus-jakarta-sans/700.css";
+@import "@fontsource/sora/600.css";
+@import "@fontsource/sora/700.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Gishen: cream bg, forest ink, chartreuse primary #A8C73A */
+    --background: 75 20% 96%;
+    --foreground: 0 0% 8%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 8%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 8%;
+
+    --primary: 72 55% 50%;
+    --primary-foreground: 0 0% 8%;
+
+    --secondary: 75 15% 92%;
+    --secondary-foreground: 0 0% 12%;
+
+    --muted: 75 12% 92%;
+    --muted-foreground: 80 5% 35%;
+
+    --accent: 32 80% 49%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 75 14% 88%;
+    --input: 75 14% 88%;
+    --ring: 72 55% 50%;
+
+    --radius: 14px;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+
+  body {
+    @apply bg-grayScale-100 text-foreground font-sans antialiased;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-display;
+  }
+}
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { Navigate, Outlet } from 'react-router-dom'
+import { Sidebar } from '@/components/sidebar/Sidebar'
+import { Topbar } from '@/components/topbar/Topbar'
+import { useAuthStore } from '@/zustand/authStore'
+import { useTranslation } from 'react-i18next'
+
+export function AppLayout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const token = useAuthStore((s) => s.token) || localStorage.getItem('access_token')
+  const { t } = useTranslation()
+
+  if (!token) {
+    return <Navigate to="/login" replace />
+  }
+
+  return (
+    <div className="flex min-h-screen bg-grayScale-100">
+      <Sidebar
+        isOpen={sidebarOpen}
+        isCollapsed={sidebarCollapsed}
+        onToggleCollapse={() => setSidebarCollapsed((p) => !p)}
+        onClose={() => setSidebarOpen(false)}
+      />
+      <div
+        className={`flex min-w-0 flex-1 flex-col transition-[margin] duration-300 ${
+          sidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[264px]'
+        }`}
+      >
+        <Topbar onSidebarToggle={() => setSidebarOpen((p) => !p)} />
+        <main className="min-w-0 flex-1 overflow-x-hidden overflow-y-auto px-3 pb-8 pt-4 sm:px-4 lg:px-6">
+          <Outlet />
+        </main>
+        <footer className="border-t bg-white px-4 py-3 text-center text-xs text-muted-foreground lg:px-6">
+          {t('app.poweredBy')} · © {new Date().getFullYear()}
+        </footer>
+      </div>
+    </div>
+  )
+}
--- a/src/layouts/PageShell.tsx
+++ b/src/layouts/PageShell.tsx
@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export function PageShell({
+  title,
+  subtitle,
+  actions,
+  children,
+  className,
+}: {
+  title: string
+  subtitle?: string
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn('mx-auto max-w-7xl space-y-5', className)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="mb-2 h-1 w-12 rounded-full bg-gradient-to-r from-brand-500 to-orange" />
+          <h1 className="font-display text-2xl font-bold tracking-tight text-forest">{title}</h1>
+          {subtitle ? <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p> : null}
+        </div>
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+      {children}
+    </div>
+  )
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatEtb(amount: number) {
+  return new Intl.NumberFormat('en-ET', {
+    style: 'currency',
+    currency: 'ETB',
+    maximumFractionDigits: 0,
+  }).format(amount)
+}
--- a/src/locales/am/translation.json
+++ b/src/locales/am/translation.json
@ -0,0 +1,149 @@
+{
+  "app": {
+    "name": "ጊሼን አስተዳደር",
+    "tagline": "የፋርማሲ ኦፕሬሽን ኮንሶል",
+    "poweredBy": "በያልቶፒያ ቴክ የተጎላበተ"
+  },
+  "auth": {
+    "login": "ግባ",
+    "email": "ኢሜይል",
+    "password": "የይለፍ ቃል",
+    "welcome": "እንኳን ደህና መጡ",
+    "subtitle": "የሙከራ ሚና ይምረጡ ወይም በሰራተኛ መለያ ይግቡ።",
+    "demoHint": "ለሁሉም መለያዎች የይለፍ ቃል፡ demo123"
+  },
+  "nav": {
+    "dashboard": "ዳሽቦርድ",
+    "orders": "ትዕዛዞች",
+    "prescriptions": "ማዘዣዎች",
+    "stock": "ክምችት እና ERP",
+    "procurement": "ግዢ",
+    "finance": "ፋይናንስ",
+    "organisations": "B2B ድርጅቶች",
+    "marketing": "ማርኬቲንግ",
+    "crm": "CRM",
+    "loyalty": "ታማኝነት",
+    "campaigns": "ዘመቻዎች",
+    "dispatch": "ዲስፓች",
+    "team": "ቡድን እና ሚናዎች",
+    "inbox": "የአገልግሎት ሳጥን",
+    "audit": "የኦዲት መዝገብ",
+    "faq": "እውቀት / FAQ",
+    "settings": "ቅንብሮች",
+    "migrations": "የውሂብ ሽግግር",
+    "analytics": "ትንተና"
+  },
+  "common": {
+    "search": "ፈልግ",
+    "actions": "እርምጃዎች",
+    "status": "ሁኔታ",
+    "save": "አስቀምጥ",
+    "cancel": "ሰርዝ",
+    "approve": "አጽድቅ",
+    "reject": "ውድቅ አድርግ",
+    "create": "ፍጠር",
+    "export": "ላክ",
+    "filter": "አጣራ",
+    "logout": "ውጣ",
+    "language": "ቋንቋ",
+    "loading": "በመጫን ላይ…",
+    "noResults": "ውጤት የለም",
+    "view": "እይ",
+    "assign": "መድብ",
+    "confirm": "አረጋግጥ",
+    "allBranches": "ሁሉም ቅርንጫፎች",
+    "branch": "ቅርንጫፍ",
+    "upload": "ስቀል",
+    "next": "ቀጣይ",
+    "back": "ተመለስ",
+    "commit": "አስገባ",
+    "validate": "አረጋግጥ",
+    "preview": "ቅድመ እይታ"
+  },
+  "dashboard": {
+    "title": "ዳሽቦርድ",
+    "subtitle": "በሚና የተጠናከረ ኦፕሬሽን አጠቃላይ እይታ"
+  },
+  "orders": {
+    "title": "ትዕዛዞች",
+    "subtitle": "የቅርንጫፍ ገቢ እና ማስረከብ",
+    "assignRider": "አቅራቢ መድብ"
+  },
+  "prescriptions": {
+    "title": "ማዘዣዎች",
+    "subtitle": "የፋርማሲስት ግምገማ ወረፋ",
+    "approve": "አጽድቅ",
+    "query": "ጥያቄ",
+    "reject": "ውድቅ"
+  },
+  "stock": {
+    "title": "ክምችት እና ERP",
+    "subtitle": "የክምችት ማመሳሰል፣ ማስጠንቀቂያዎች እና ውህደቶች"
+  },
+  "procurement": {
+    "title": "ግዢ",
+    "subtitle": "የእንደገና ትዕዛዝ እና የማስተላለፍ ጥያቄዎች"
+  },
+  "finance": {
+    "title": "ፋይናንስ",
+    "subtitle": "ስምምነቶች፣ መገናኛዎች፣ ተመላሾች"
+  },
+  "organisations": {
+    "title": "B2B ድርጅቶች",
+    "subtitle": "ድርጅት ፍጠር እና ራስ መመዝገቢያዎችን አጽድቅ",
+    "pending": "በመጠባበቅ ላይ",
+    "createOrg": "ድርጅት ፍጠር"
+  },
+  "dispatch": {
+    "title": "የዲስፓች ሰሌዳ",
+    "subtitle": "ጉዞዎች፣ አቅራቢዎች እና ቴሌግራም ቦት"
+  },
+  "faq": {
+    "title": "የእውቀት መሠረት",
+    "subtitle": "የጋራ ኦፕሬሽን FAQ",
+    "new": "አዲስ ጽሑፍ"
+  },
+  "migrations": {
+    "title": "የውሂብ ሽግግር",
+    "subtitle": "ተለዋዋጭ CSV/Excel ማስገባት ከአምድ ማያያዝ ጋር",
+    "templates": "የማስገባት አብነቶች",
+    "mapColumns": "አምዶችን አያይዝ",
+    "dryRun": "የሙከራ ማረጋገጫ"
+  },
+  "team": {
+    "title": "ቡድን እና ሚናዎች",
+    "subtitle": "ሰራተኞች እና RBAC"
+  },
+  "crm": {
+    "title": "CRM",
+    "subtitle": "የደንበኛ መዝገቦች (ንባብ)"
+  },
+  "loyalty": {
+    "title": "የታማኝነት ፕሮግራም",
+    "subtitle": "ነጥቦች፣ ደረጃዎች፣ ሪፈራል"
+  },
+  "campaigns": {
+    "title": "ዘመቻዎች",
+    "subtitle": "SMS፣ ቴሌግራም፣ push"
+  },
+  "inbox": {
+    "title": "የአገልግሎት ሳጥን",
+    "subtitle": "Chatwoot፣ ቴሌግራም፣ WhatsApp"
+  },
+  "audit": {
+    "title": "የኦዲት መዝገብ",
+    "subtitle": "ማመሳሰል፣ ማስተካከያዎች፣ ማጽደቂያዎች"
+  },
+  "settings": {
+    "title": "ቅንብሮች",
+    "subtitle": "የመድረክ ምርጫዎች"
+  },
+  "analytics": {
+    "title": "ትንተና",
+    "subtitle": "ሽያጭ እና እድገት KPIs"
+  },
+  "marketing": {
+    "title": "ማርኬቲንግ",
+    "subtitle": "ክፍሎች እና ሪፖርቶች"
+  }
+}
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@ -0,0 +1,149 @@
+{
+  "app": {
+    "name": "Gishen Admin",
+    "tagline": "Pharmacy operations console",
+    "poweredBy": "Powered by Yaltopia Tech"
+  },
+  "auth": {
+    "login": "Sign in",
+    "email": "Email",
+    "password": "Password",
+    "welcome": "Welcome back",
+    "subtitle": "Choose a demo role or sign in with your staff account.",
+    "demoHint": "Demo password for all accounts: demo123"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "orders": "Orders",
+    "prescriptions": "Prescriptions",
+    "stock": "Stock & ERP",
+    "procurement": "Procurement",
+    "finance": "Finance",
+    "organisations": "B2B Organisations",
+    "marketing": "Marketing",
+    "crm": "CRM",
+    "loyalty": "Loyalty",
+    "campaigns": "Campaigns",
+    "dispatch": "Dispatch",
+    "team": "Team & Roles",
+    "inbox": "Service Inbox",
+    "audit": "Audit Log",
+    "faq": "Knowledge / FAQ",
+    "settings": "Settings",
+    "migrations": "Data Migration",
+    "analytics": "Analytics"
+  },
+  "common": {
+    "search": "Search",
+    "actions": "Actions",
+    "status": "Status",
+    "save": "Save",
+    "cancel": "Cancel",
+    "approve": "Approve",
+    "reject": "Reject",
+    "create": "Create",
+    "export": "Export",
+    "filter": "Filter",
+    "logout": "Log out",
+    "language": "Language",
+    "loading": "Loading…",
+    "noResults": "No results",
+    "view": "View",
+    "assign": "Assign",
+    "confirm": "Confirm",
+    "allBranches": "All branches",
+    "branch": "Branch",
+    "upload": "Upload",
+    "next": "Next",
+    "back": "Back",
+    "commit": "Commit",
+    "validate": "Validate",
+    "preview": "Preview"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Role-aware operational overview"
+  },
+  "orders": {
+    "title": "Orders",
+    "subtitle": "Branch inbox and fulfilment",
+    "assignRider": "Assign delivery person"
+  },
+  "prescriptions": {
+    "title": "Prescriptions",
+    "subtitle": "Pharmacist review queue",
+    "approve": "Approve",
+    "query": "Query",
+    "reject": "Reject"
+  },
+  "stock": {
+    "title": "Stock & ERP",
+    "subtitle": "Inventory sync, alerts, and merges"
+  },
+  "procurement": {
+    "title": "Procurement",
+    "subtitle": "Reorder recommendations and transfer requests"
+  },
+  "finance": {
+    "title": "Finance",
+    "subtitle": "Settlements, gateways, refunds"
+  },
+  "organisations": {
+    "title": "B2B Organisations",
+    "subtitle": "Create orgs and approve self-registrations",
+    "pending": "Pending approval",
+    "createOrg": "Create organisation"
+  },
+  "dispatch": {
+    "title": "Dispatch Board",
+    "subtitle": "Trips, riders, and Telegram bot status"
+  },
+  "faq": {
+    "title": "Knowledge base",
+    "subtitle": "Shared operational FAQs",
+    "new": "New article"
+  },
+  "migrations": {
+    "title": "Data Migration",
+    "subtitle": "Flexible CSV/Excel import with column mapping",
+    "templates": "Import templates",
+    "mapColumns": "Map columns",
+    "dryRun": "Dry-run validation"
+  },
+  "team": {
+    "title": "Team & Roles",
+    "subtitle": "Staff users and RBAC"
+  },
+  "crm": {
+    "title": "CRM",
+    "subtitle": "Customer records (read)"
+  },
+  "loyalty": {
+    "title": "Loyalty programme",
+    "subtitle": "Earn rates, tiers, referral bonus"
+  },
+  "campaigns": {
+    "title": "Campaigns",
+    "subtitle": "SMS, Telegram, push to segments"
+  },
+  "inbox": {
+    "title": "Service inbox",
+    "subtitle": "Chatwoot, Telegram, WhatsApp threads"
+  },
+  "audit": {
+    "title": "Audit log",
+    "subtitle": "Sync, adjustments, overrides, approvals"
+  },
+  "settings": {
+    "title": "Settings",
+    "subtitle": "Platform-wide preferences"
+  },
+  "analytics": {
+    "title": "Analytics",
+    "subtitle": "Sales and growth KPIs"
+  },
+  "marketing": {
+    "title": "Marketing overview",
+    "subtitle": "Segments and reports"
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@ -0,0 +1,185 @@
+import type { Branch, FaqArticle, Order, Organisation, Prescription } from '@/types'
+
+export const branches: Branch[] = [
+  { id: 'br-bole', name: 'Bole Branch', zone: 'Bole', phone: '+251 930 099 850' },
+  { id: 'br-cmc', name: 'CMC Branch', zone: 'CMC', phone: '+251 930 099 851' },
+  { id: 'br-piassa', name: 'Piassa Branch', zone: 'Piassa', phone: '+251 930 099 852' },
+]
+
+export const riders = [
+  { id: 'rd-1', name: 'Kidus Rider', phone: '+251911000111', telegramId: '@kidus_gishen', branchId: 'br-bole', zone: 'Bole' },
+  { id: 'rd-2', name: 'Meron Rider', phone: '+251911000222', telegramId: '@meron_gishen', branchId: 'br-cmc', zone: 'CMC' },
+  { id: 'rd-3', name: 'Samuel Rider', phone: '+251911000333', telegramId: '@sam_gishen', branchId: 'br-bole', zone: 'Bole' },
+]
+
+export let prescriptions: Prescription[] = [
+  {
+    id: 'rx-1001',
+    customerName: 'Abebe Kebede',
+    branchId: 'br-bole',
+    status: 'under_review',
+    items: [
+      { name: 'Amoxicillin 500mg', qty: 21 },
+      { name: 'Paracetamol 500mg', qty: 10 },
+    ],
+    submittedAt: '2026-08-06T08:10:00Z',
+    prescriber: 'Dr. Selam',
+  },
+  {
+    id: 'rx-1002',
+    customerName: 'Marta Hailu',
+    branchId: 'br-bole',
+    status: 'submitted',
+    items: [{ name: 'Metformin 850mg', qty: 60, controlled: false }],
+    submittedAt: '2026-08-06T09:20:00Z',
+    prescriber: 'Dr. Yohannes',
+  },
+  {
+    id: 'rx-1003',
+    customerName: 'Tigist Alemu',
+    branchId: 'br-cmc',
+    status: 'under_review',
+    items: [{ name: 'Tramadol 50mg', qty: 20, controlled: true }],
+    submittedAt: '2026-08-06T07:45:00Z',
+    prescriber: 'Dr. Helen',
+  },
+]
+
+export let orders: Order[] = [
+  {
+    id: 'ord-5001',
+    customerName: 'Abebe Kebede',
+    branchId: 'br-bole',
+    fulfillment: 'delivery',
+    status: 'confirmed',
+    totalEtb: 1250,
+    channel: 'web',
+    zone: 'Bole',
+    address: 'Bole Atlas, Addis Ababa',
+    createdAt: '2026-08-06T08:30:00Z',
+    paid: true,
+    rxApproved: true,
+  },
+  {
+    id: 'ord-5002',
+    customerName: 'Guest · 0911223344',
+    branchId: 'br-bole',
+    fulfillment: 'pickup',
+    status: 'picking',
+    totalEtb: 420,
+    channel: 'telegram',
+    createdAt: '2026-08-06T09:00:00Z',
+    paid: true,
+  },
+  {
+    id: 'ord-5003',
+    customerName: 'Bank staff · Hiwot',
+    branchId: 'br-cmc',
+    fulfillment: 'delivery',
+    status: 'confirmed',
+    totalEtb: 3400,
+    channel: 'b2b',
+    zone: 'CMC',
+    address: 'CMC Road',
+    createdAt: '2026-08-06T10:00:00Z',
+    paid: true,
+    rxApproved: true,
+  },
+  {
+    id: 'ord-5004',
+    customerName: 'Netsanet D.',
+    branchId: 'br-bole',
+    fulfillment: 'delivery',
+    status: 'out_for_delivery',
+    totalEtb: 890,
+    channel: 'mobile',
+    zone: 'Bole',
+    address: 'Gerji Mebrat Hail',
+    assignedRiderId: 'rd-1',
+    createdAt: '2026-08-06T07:15:00Z',
+    paid: true,
+    rxApproved: true,
+  },
+]
+
+export let organisations: Organisation[] = [
+  {
+    id: 'org-1',
+    name: 'Horizon Bank',
+    tin: '0001234567',
+    status: 'active',
+    creditLimitEtb: 500000,
+    usedEtb: 124000,
+    billingContact: 'finance@horizon.et',
+    source: 'admin',
+    createdAt: '2026-05-01T00:00:00Z',
+  },
+  {
+    id: 'org-2',
+    name: 'Green NGO Ethiopia',
+    tin: '0009876543',
+    status: 'pending',
+    creditLimitEtb: 100000,
+    usedEtb: 0,
+    billingContact: 'hr@greenngo.et',
+    source: 'self_register',
+    createdAt: '2026-08-05T14:00:00Z',
+  },
+]
+
+export const stockRows = [
+  { sku: 'AMX-500', name: 'Amoxicillin 500mg', branchId: 'br-bole', qty: 120, batch: 'B2411', expiry: '2027-01', erpQty: 118 },
+  { sku: 'PCM-500', name: 'Paracetamol 500mg', branchId: 'br-bole', qty: 40, batch: 'B2409', expiry: '2026-11', erpQty: 40 },
+  { sku: 'MTF-850', name: 'Metformin 850mg', branchId: 'br-cmc', qty: 8, batch: 'B2410', expiry: '2026-09', erpQty: 8 },
+  { sku: 'VIT-C', name: 'Vitamin C 1000mg', branchId: 'br-bole', qty: 200, batch: 'B2501', expiry: '2028-03', erpQty: 200 },
+]
+
+export const customers = [
+  { id: 'c1', name: 'Abebe Kebede', phone: '+251911223344', tier: 'Gold', points: 2400, branch: 'Bole' },
+  { id: 'c2', name: 'Marta Hailu', phone: '+251922334455', tier: 'Silver', points: 800, branch: 'Bole' },
+  { id: 'c3', name: 'Tigist Alemu', phone: '+251933445566', tier: 'Bronze', points: 120, branch: 'CMC' },
+]
+
+export let faqs: FaqArticle[] = [
+  {
+    id: 'faq-1',
+    category: 'Orders',
+    title_en: 'How do I confirm a branch order?',
+    title_am: 'የቅርንጫፍ ትዕዛዝን እንዴት አረጋግጣለሁ?',
+    body_en: 'Open Orders, select the order for your branch, verify stock, then Confirm. For delivery, assign a rider from the order detail.',
+    body_am: 'ትዕዛዞችን ይክፈቱ፣ የቅርንጫፍዎን ትዕዛዝ ይምረጡ፣ ክምችት ያረጋግጡ፣ ከዚያ አረጋግጥ ይጫኑ።',
+    published: true,
+    updatedAt: '2026-08-01T00:00:00Z',
+  },
+  {
+    id: 'faq-2',
+    category: 'Prescriptions',
+    title_en: 'Controlled substance workflow',
+    title_am: 'የቁጥጥር ንጥረ ነገር ሂደት',
+    body_en: 'Flag controlled items during review. Approval creates a dispensing record with batch and pharmacist stamp.',
+    body_am: 'በግምገማ ጊዜ ቁጥጥር የሚደረግባቸውን ንጥረ ነገሮች ምልክት ያድርጉ።',
+    published: true,
+    updatedAt: '2026-08-02T00:00:00Z',
+  },
+]
+
+export const settlements = [
+  { channel: 'Chapa', date: '2026-08-05', volumeEtb: 84200, status: 'reconciled' },
+  { channel: 'Telebirr', date: '2026-08-05', volumeEtb: 52100, status: 'reconciled' },
+  { channel: 'COD', date: '2026-08-05', volumeEtb: 18300, status: 'pending' },
+  { channel: 'M-Pesa', date: '2026-08-05', volumeEtb: 9400, status: 'reconciled' },
+]
+
+export const auditLog = [
+  { id: 'a1', at: '2026-08-06T10:12:00Z', actor: 'Hana Pharmacist', action: 'rx.approve', target: 'rx-1001' },
+  { id: 'a2', at: '2026-08-06T09:40:00Z', actor: 'Yonas Finance', action: 'org.approve', target: 'org-legacy' },
+  { id: 'a3', at: '2026-08-06T08:05:00Z', actor: 'Dawit Stock', action: 'stock.resolve_discrepancy', target: 'AMX-500' },
+]
+
+export const importTemplates = [
+  { id: 'stock', label: 'Stock / inventory', fields: ['sku', 'barcode', 'branchId', 'qty', 'batch', 'expiry', 'cost', 'sell'] },
+  { id: 'catalog', label: 'Catalog products', fields: ['sku', 'name', 'strength', 'form', 'category', 'rxFlag', 'manufacturer'] },
+  { id: 'hr', label: 'HR / org members', fields: ['orgId', 'phone', 'name', 'department', 'plan', 'memberId'] },
+  { id: 'branches', label: 'Branches', fields: ['id', 'name', 'zone', 'phone', 'lat', 'lng'] },
+  { id: 'riders', label: 'Delivery people', fields: ['name', 'phone', 'telegramId', 'branchId', 'zone'] },
+]
--- a/src/pages/analytics/AnalyticsPage.tsx
+++ b/src/pages/analytics/AnalyticsPage.tsx
@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+
+const data = [
+  { day: 'Mon', sales: 42000 },
+  { day: 'Tue', sales: 51000 },
+  { day: 'Wed', sales: 48000 },
+  { day: 'Thu', sales: 61000 },
+  { day: 'Fri', sales: 72000 },
+  { day: 'Sat', sales: 88000 },
+  { day: 'Sun', sales: 39000 },
+]
+
+export function AnalyticsPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('analytics.title')} subtitle={t('analytics.subtitle')}>
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Repeat purchase</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl font-bold">34%</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Fastest SKU</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-xl font-bold">Paracetamol 500mg</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Channel mix</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">Web 48% · Mobile 31% · TG 14% · B2B 7%</CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Daily sales by channel (demo)</CardTitle>
+        </CardHeader>
+        <CardContent className="h-72">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <XAxis dataKey="day" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="sales" fill="#A8C73A" radius={[8, 8, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/audit/AuditPage.tsx
+++ b/src/pages/audit/AuditPage.tsx
@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { auditLog } from '@/mocks/data'
+
+export function AuditPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('audit.title')} subtitle={t('audit.subtitle')}>
+      <Card>
+        <CardContent className="p-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>When</TableHead>
+                <TableHead>Actor</TableHead>
+                <TableHead>Action</TableHead>
+                <TableHead>Target</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {auditLog.map((a) => (
+                <TableRow key={a.id}>
+                  <TableCell className="whitespace-nowrap text-xs">{new Date(a.at).toLocaleString()}</TableCell>
+                  <TableCell>{a.actor}</TableCell>
+                  <TableCell className="font-mono text-xs">{a.action}</TableCell>
+                  <TableCell>{a.target}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@ -0,0 +1,90 @@
+import { useState, type FormEvent } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useAuthStore } from '@/zustand/authStore'
+import { demoAccounts } from '@/config/permissions'
+import { toast } from 'sonner'
+
+export function LoginPage() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const login = useAuthStore((s) => s.login)
+  const loginAsDemo = useAuthStore((s) => s.loginAsDemo)
+  const token = useAuthStore((s) => s.token) || localStorage.getItem('access_token')
+  const [email, setEmail] = useState('admin@gishen.et')
+  const [password, setPassword] = useState('demo123')
+
+  if (token) return <Navigate to="/" replace />
+
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    const result = login(email, password)
+    if (!result.ok) {
+      toast.error(result.error)
+      return
+    }
+    toast.success('Signed in')
+    navigate('/')
+  }
+
+  return (
+    <div className="grid min-h-screen lg:grid-cols-2">
+      <div className="relative hidden overflow-hidden bg-forest lg:flex lg:flex-col lg:justify-between lg:p-12">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(168,199,58,0.35),transparent_45%),radial-gradient(circle_at_80%_70%,rgba(226,138,26,0.25),transparent_40%)]" />
+        <div className="relative">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-500 font-display text-xl font-bold text-forest">
+            G
+          </div>
+          <h1 className="mt-8 font-display text-4xl font-bold text-white">{t('app.name')}</h1>
+          <p className="mt-3 max-w-md text-white/75">{t('app.tagline')}</p>
+        </div>
+        <p className="relative text-sm text-white/50">{t('app.poweredBy')}</p>
+      </div>
+      <div className="flex items-center justify-center bg-cream p-6">
+        <div className="w-full max-w-md space-y-6">
+          <div>
+            <h2 className="font-display text-2xl font-bold text-forest">{t('auth.welcome')}</h2>
+            <p className="mt-1 text-sm text-muted-foreground">{t('auth.subtitle')}</p>
+          </div>
+          <form onSubmit={onSubmit} className="space-y-4 rounded-2xl border bg-white p-6 shadow-soft">
+            <div className="space-y-2">
+              <Label htmlFor="email">{t('auth.email')}</Label>
+              <Input id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">{t('auth.password')}</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              {t('auth.login')}
+            </Button>
+            <p className="text-center text-xs text-muted-foreground">{t('auth.demoHint')}</p>
+          </form>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {demoAccounts.map((a) => (
+              <Button
+                key={a.email}
+                variant="outline"
+                className="justify-start text-left"
+                onClick={() => {
+                  loginAsDemo(a.email)
+                  navigate('/')
+                }}
+              >
+                <span className="truncate text-xs font-semibold">{a.role.replaceAll('_', ' ')}</span>
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/dashboard/DashboardPage.tsx
+++ b/src/pages/dashboard/DashboardPage.tsx
@ -0,0 +1,90 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  ShoppingBag,
+  FileHeart,
+  Truck,
+  Building2,
+  AlertTriangle,
+  Wallet,
+} from 'lucide-react'
+import { PageShell } from '@/layouts/PageShell'
+import { StatCard } from '@/components/dashboard/StatCard'
+import { useAuthStore } from '@/zustand/authStore'
+import { orders, organisations, prescriptions, stockRows } from '@/mocks/data'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function DashboardPage() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const branchId = user?.branchId
+  const role = user?.role
+
+  const stats = useMemo(() => {
+    const branchOrders = branchId ? orders.filter((o) => o.branchId === branchId) : orders
+    const branchRx = branchId ? prescriptions.filter((p) => p.branchId === branchId) : prescriptions
+    const pendingRx = branchRx.filter((p) => p.status === 'under_review' || p.status === 'submitted').length
+    const unassigned = branchOrders.filter((o) => o.fulfillment === 'delivery' && !o.assignedRiderId).length
+    const lowStock = stockRows.filter((s) => s.qty < 20).length
+    const pendingOrgs = organisations.filter((o) => o.status === 'pending').length
+    const openDispatch = orders.filter((o) => o.paid && o.rxApproved && o.fulfillment === 'delivery').length
+
+    if (role === 'pharmacist') {
+      return [
+        { label: "Today's orders", value: branchOrders.length, icon: ShoppingBag, tone: 'brand' as const },
+        { label: 'Pending Rx', value: pendingRx, icon: FileHeart, tone: 'orange' as const },
+        { label: 'Unassigned delivery', value: unassigned, icon: Truck, tone: 'forest' as const },
+        { label: 'Awaiting pickup', value: branchOrders.filter((o) => o.fulfillment === 'pickup').length, icon: ShoppingBag, tone: 'muted' as const },
+      ]
+    }
+    if (role === 'finance') {
+      return [
+        { label: 'Pending orgs', value: pendingOrgs, icon: Building2, tone: 'orange' as const },
+        { label: 'Active credit orgs', value: organisations.filter((o) => o.status === 'active').length, icon: Wallet, tone: 'brand' as const },
+        { label: 'Credit used (ETB)', value: organisations.reduce((s, o) => s + o.usedEtb, 0).toLocaleString(), icon: Wallet, tone: 'forest' as const },
+        { label: 'Orders today', value: orders.length, icon: ShoppingBag, tone: 'muted' as const },
+      ]
+    }
+    if (role === 'stock_manager' || role === 'procurement') {
+      return [
+        { label: 'Low stock SKUs', value: lowStock, icon: AlertTriangle, tone: 'orange' as const },
+        { label: 'ERP mismatches', value: stockRows.filter((s) => s.qty !== s.erpQty).length, icon: AlertTriangle, tone: 'danger' as const },
+        { label: 'Tracked SKUs', value: stockRows.length, icon: ShoppingBag, tone: 'brand' as const },
+        { label: 'Branches', value: 3, icon: Building2, tone: 'muted' as const },
+      ]
+    }
+    if (role === 'operations') {
+      return [
+        { label: 'Open dispatch', value: openDispatch, icon: Truck, tone: 'brand' as const },
+        { label: 'Unassigned', value: orders.filter((o) => o.fulfillment === 'delivery' && !o.assignedRiderId).length, icon: Truck, tone: 'orange' as const },
+        { label: 'Out for delivery', value: orders.filter((o) => o.status === 'out_for_delivery').length, icon: Truck, tone: 'forest' as const },
+        { label: 'Paid ready', value: orders.filter((o) => o.paid && o.rxApproved).length, icon: ShoppingBag, tone: 'muted' as const },
+      ]
+    }
+    return [
+      { label: 'Orders', value: orders.length, icon: ShoppingBag, tone: 'brand' as const },
+      { label: 'Rx queue', value: pendingRx, icon: FileHeart, tone: 'orange' as const },
+      { label: 'Open dispatch', value: openDispatch, icon: Truck, tone: 'forest' as const },
+      { label: 'Pending orgs', value: pendingOrgs, icon: Building2, tone: 'muted' as const },
+    ]
+  }, [branchId, role])
+
+  return (
+    <PageShell title={t('dashboard.title')} subtitle={t('dashboard.subtitle')}>
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {stats.map((s) => (
+          <StatCard key={s.label} label={s.label} value={s.value} icon={s.icon} tone={s.tone === 'danger' ? 'orange' : s.tone} />
+        ))}
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Quick context</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground">
+          Signed in as <strong className="text-foreground">{user?.name}</strong> ({user?.role}).
+          {user?.branchName ? ` Scoped to ${user.branchName}.` : ' Platform-wide view.'}
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/dispatch/DispatchPage.tsx
+++ b/src/pages/dispatch/DispatchPage.tsx
@ -0,0 +1,127 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { SelectNative } from '@/components/ui/select-native'
+import { orders as seedOrders, riders } from '@/mocks/data'
+import type { Order } from '@/types'
+
+export function DispatchPage() {
+  const { t } = useTranslation()
+  const [queue, setQueue] = useState<Order[]>(
+    seedOrders.filter((o) => o.paid && (o.rxApproved || o.fulfillment === 'pickup')),
+  )
+  const [botLog, setBotLog] = useState<string[]>([
+    'Bot ready · drivers linked by Telegram username',
+  ])
+
+  const openDelivery = useMemo(
+    () => queue.filter((o) => o.fulfillment === 'delivery'),
+    [queue],
+  )
+
+  const assignTrip = (orderId: string, riderId: string) => {
+    const rider = riders.find((r) => r.id === riderId)
+    setQueue((prev) =>
+      prev.map((o) =>
+        o.id === orderId ? { ...o, assignedRiderId: riderId, status: 'out_for_delivery' } : o,
+      ),
+    )
+    setBotLog((prev) => [
+      `Trip ${orderId} → ${rider?.telegramId}: manifest pushed (stops, COD)`,
+      ...prev,
+    ])
+    toast.success('Trip assigned · Telegram dispatch bot notified')
+  }
+
+  const botStatus = (orderId: string, status: string) => {
+    setQueue((prev) => prev.map((o) => (o.id === orderId ? { ...o, status } : o)))
+    setBotLog((prev) => [`Bot callback ${orderId}: ${status}`, ...prev])
+    toast.message(`Board + customer tracking updated: ${status}`)
+  }
+
+  return (
+    <PageShell title={t('dispatch.title')} subtitle={t('dispatch.subtitle')}>
+      <div className="grid gap-4 xl:grid-cols-3">
+        <Card className="xl:col-span-2">
+          <CardHeader>
+            <CardTitle>Live queue (paid + Rx approved)</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 p-4 pt-0">
+            {openDelivery.map((o) => (
+              <div key={o.id} className="rounded-2xl border p-4">
+                <div className="flex flex-wrap items-start justify-between gap-2">
+                  <div>
+                    <p className="font-semibold">{o.id} · {o.customerName}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {o.zone} · {o.address}
+                    </p>
+                  </div>
+                  <Badge variant="warning">{o.status}</Badge>
+                </div>
+                <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center">
+                  <SelectNative
+                    className="sm:max-w-xs"
+                    value={o.assignedRiderId ?? ''}
+                    onChange={(e) => assignTrip(o.id, e.target.value)}
+                  >
+                    <option value="">Assign rider</option>
+                    {riders.map((r) => (
+                      <option key={r.id} value={r.id}>
+                        {r.name} ({r.telegramId})
+                      </option>
+                    ))}
+                  </SelectNative>
+                  {o.assignedRiderId && (
+                    <div className="flex flex-wrap gap-1">
+                      {['picked_up', 'en_route', 'arrived', 'delivered', 'failed'].map((s) => (
+                        <Button key={s} size="sm" variant="outline" onClick={() => botStatus(o.id, s)}>
+                          {s}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Map (demo)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex h-48 items-center justify-center rounded-xl bg-[linear-gradient(135deg,#e8f0c4,#f6f7f2)] text-sm text-muted-foreground">
+                Active riders & open deliveries overlay
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Telegram Dispatch Bot</CardTitle>
+            </CardHeader>
+            <CardContent className="max-h-64 space-y-2 overflow-y-auto text-xs">
+              {botLog.map((line, i) => (
+                <div key={i} className="rounded-lg bg-muted px-2 py-1.5 font-mono">
+                  {line}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Open order intake</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              Watching webhooks from POS / ERP / partners (mock: 2 partner orders in last hour).
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageShell>
+  )
+}
--- a/src/pages/faq/FaqPage.tsx
+++ b/src/pages/faq/FaqPage.tsx
@ -0,0 +1,123 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { SelectNative } from '@/components/ui/select-native'
+import { canAccess } from '@/config/permissions'
+import { useAuthStore } from '@/zustand/authStore'
+import { faqs as seed } from '@/mocks/data'
+import type { FaqArticle } from '@/types'
+import i18n from '@/i18n/config'
+
+export function FaqPage() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const canWrite = user ? canAccess(user.role, 'faq_write') : false
+  const [articles, setArticles] = useState<FaqArticle[]>([...seed])
+  const [q, setQ] = useState('')
+  const [draft, setDraft] = useState({
+    category: 'General',
+    title_en: '',
+    title_am: '',
+    body_en: '',
+    body_am: '',
+  })
+
+  const lang = i18n.language === 'am' ? 'am' : 'en'
+
+  const filtered = useMemo(() => {
+    return articles.filter((a) => {
+      if (!a.published && !canWrite) return false
+      const title = lang === 'am' ? a.title_am : a.title_en
+      const body = lang === 'am' ? a.body_am : a.body_en
+      return (
+        !q ||
+        title.toLowerCase().includes(q.toLowerCase()) ||
+        body.toLowerCase().includes(q.toLowerCase()) ||
+        a.category.toLowerCase().includes(q.toLowerCase())
+      )
+    })
+  }, [articles, q, lang, canWrite])
+
+  const publish = () => {
+    const article: FaqArticle = {
+      id: `faq-${Date.now()}`,
+      ...draft,
+      published: true,
+      updatedAt: new Date().toISOString(),
+    }
+    setArticles((prev) => [article, ...prev])
+    seed.unshift(article)
+    setDraft({ category: 'General', title_en: '', title_am: '', body_en: '', body_am: '' })
+    toast.success('FAQ published')
+  }
+
+  return (
+    <PageShell title={t('faq.title')} subtitle={t('faq.subtitle')}>
+      <Input className="max-w-md" placeholder={t('common.search')} value={q} onChange={(e) => setQ(e.target.value)} />
+      <div className="grid gap-4 lg:grid-cols-2">
+        {filtered.map((a) => (
+          <Card key={a.id}>
+            <CardHeader>
+              <div className="flex items-center justify-between gap-2">
+                <CardTitle className="text-base">{lang === 'am' ? a.title_am : a.title_en}</CardTitle>
+                <Badge variant="secondary">{a.category}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground whitespace-pre-wrap">
+              {lang === 'am' ? a.body_am : a.body_en}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      {canWrite && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('faq.new')}</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3 md:grid-cols-2">
+            <SelectNative
+              value={draft.category}
+              onChange={(e) => setDraft({ ...draft, category: e.target.value })}
+            >
+              {['General', 'Orders', 'Prescriptions', 'Stock', 'Payments', 'B2B'].map((c) => (
+                <option key={c} value={c}>
+                  {c}
+                </option>
+              ))}
+            </SelectNative>
+            <div />
+            <Input
+              placeholder="Title (EN)"
+              value={draft.title_en}
+              onChange={(e) => setDraft({ ...draft, title_en: e.target.value })}
+            />
+            <Input
+              placeholder="Title (AM)"
+              value={draft.title_am}
+              onChange={(e) => setDraft({ ...draft, title_am: e.target.value })}
+            />
+            <Textarea
+              placeholder="Body (EN)"
+              value={draft.body_en}
+              onChange={(e) => setDraft({ ...draft, body_en: e.target.value })}
+            />
+            <Textarea
+              placeholder="Body (AM)"
+              value={draft.body_am}
+              onChange={(e) => setDraft({ ...draft, body_am: e.target.value })}
+            />
+            <Button className="md:col-span-2" onClick={publish}>
+              Publish
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </PageShell>
+  )
+}
--- a/src/pages/finance/FinancePage.tsx
+++ b/src/pages/finance/FinancePage.tsx
@ -0,0 +1,83 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { SwitchRow } from '@/pages/finance/SwitchRow'
+import { settlements } from '@/mocks/data'
+import { formatEtb } from '@/lib/utils'
+
+const gateways = [
+  { id: 'chapa', label: 'Chapa', enabled: true },
+  { id: 'arifpay', label: 'ArifPay', enabled: true },
+  { id: 'telebirr', label: 'Telebirr', enabled: false },
+  { id: 'mpesa', label: 'M-Pesa', enabled: false },
+]
+
+export function FinancePage() {
+  const { t } = useTranslation()
+  const [gw, setGw] = useState(gateways)
+
+  return (
+    <PageShell title={t('finance.title')} subtitle={t('finance.subtitle')}>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Daily settlements</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Channel</TableHead>
+                  <TableHead>Date</TableHead>
+                  <TableHead>Volume</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {settlements.map((s) => (
+                  <TableRow key={s.channel}>
+                    <TableCell>{s.channel}</TableCell>
+                    <TableCell>{s.date}</TableCell>
+                    <TableCell>{formatEtb(s.volumeEtb)}</TableCell>
+                    <TableCell>
+                      <Badge variant={s.status === 'reconciled' ? 'success' : 'warning'}>{s.status}</Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Payment gateways</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 p-4 pt-0">
+            {gw.map((g) => (
+              <SwitchRow
+                key={g.id}
+                label={g.label}
+                enabled={g.enabled}
+                onToggle={() => {
+                  setGw((prev) => prev.map((x) => (x.id === g.id ? { ...x, enabled: !x.enabled } : x)))
+                  toast.success(`${g.label} ${g.enabled ? 'disabled' : 'enabled'} (no code release)`)
+                }}
+              />
+            ))}
+            <div className="rounded-xl border bg-muted/40 p-3 text-sm">
+              Loyalty points liability (Aug): <strong>{formatEtb(182400)}</strong>
+            </div>
+            <Button variant="outline" onClick={() => toast.message('Refund queued (mock)')}>
+              Process refund
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </PageShell>
+  )
+}
--- a/src/pages/finance/SwitchRow.tsx
+++ b/src/pages/finance/SwitchRow.tsx
@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button'
+
+export function SwitchRow({
+  label,
+  enabled,
+  onToggle,
+}: {
+  label: string
+  enabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-xl border p-3">
+      <span className="text-sm font-medium">{label}</span>
+      <Button size="sm" variant={enabled ? 'default' : 'outline'} onClick={onToggle}>
+        {enabled ? 'Enabled' : 'Disabled'}
+      </Button>
+    </div>
+  )
+}
--- a/src/pages/inbox/InboxPage.tsx
+++ b/src/pages/inbox/InboxPage.tsx
@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+const threads = [
+  { id: 1, channel: 'WhatsApp', customer: 'Abebe Kebede', preview: 'Where is my delivery?', unread: true },
+  { id: 2, channel: 'Telegram', customer: 'Marta Hailu', preview: 'Refill reminder received', unread: false },
+  { id: 3, channel: 'Chatwoot', customer: 'Guest', preview: 'Need CMC pickup hours', unread: true },
+]
+
+export function InboxPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('inbox.title')} subtitle={t('inbox.subtitle')}>
+      <div className="grid gap-3">
+        {threads.map((th) => (
+          <Card key={th.id}>
+            <CardHeader className="flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-base">{th.customer}</CardTitle>
+              <Badge variant={th.unread ? 'warning' : 'secondary'}>{th.channel}</Badge>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">{th.preview}</CardContent>
+          </Card>
+        ))}
+      </div>
+    </PageShell>
+  )
+}
--- a/src/pages/marketing/CampaignsPage.tsx
+++ b/src/pages/marketing/CampaignsPage.tsx
@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { SelectNative } from '@/components/ui/select-native'
+import { Button } from '@/components/ui/button'
+
+export function CampaignsPage() {
+  const { t } = useTranslation()
+  const [channel, setChannel] = useState('sms')
+  const [segment, setSegment] = useState('chronic')
+  const [body, setBody] = useState('Your refill is due soon. Tap to reorder from Gishen.')
+
+  return (
+    <PageShell title={t('campaigns.title')} subtitle={t('campaigns.subtitle')}>
+      <Card className="max-w-2xl">
+        <CardHeader>
+          <CardTitle>Compose campaign</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1">
+              <Label>Channel</Label>
+              <SelectNative value={channel} onChange={(e) => setChannel(e.target.value)}>
+                <option value="sms">SMS</option>
+                <option value="telegram">Telegram</option>
+                <option value="push">Push</option>
+              </SelectNative>
+            </div>
+            <div className="space-y-1">
+              <Label>Segment</Label>
+              <SelectNative value={segment} onChange={(e) => setSegment(e.target.value)}>
+                <option value="chronic">Chronic refill</option>
+                <option value="lapsed">Lapsed buyers</option>
+                <option value="winback">Win-back</option>
+              </SelectNative>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label>Message</Label>
+            <Textarea value={body} onChange={(e) => setBody(e.target.value)} />
+          </div>
+          <div className="space-y-1">
+            <Label>Schedule (optional)</Label>
+            <Input type="datetime-local" />
+          </div>
+          <Button onClick={() => toast.success(`Campaign queued on ${channel} → ${segment}`)}>Send / schedule</Button>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/marketing/CrmPage.tsx
+++ b/src/pages/marketing/CrmPage.tsx
@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { customers } from '@/mocks/data'
+
+export function CrmPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('crm.title')} subtitle={t('crm.subtitle')}>
+      <Card>
+        <CardContent className="p-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Phone</TableHead>
+                <TableHead>Tier</TableHead>
+                <TableHead>Points</TableHead>
+                <TableHead>Branch</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {customers.map((c) => (
+                <TableRow key={c.id}>
+                  <TableCell className="font-medium">{c.name}</TableCell>
+                  <TableCell>{c.phone}</TableCell>
+                  <TableCell>
+                    <Badge>{c.tier}</Badge>
+                  </TableCell>
+                  <TableCell>{c.points}</TableCell>
+                  <TableCell>{c.branch}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/marketing/LoyaltyPage.tsx
+++ b/src/pages/marketing/LoyaltyPage.tsx
@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+
+export function LoyaltyPage() {
+  const { t } = useTranslation()
+  const [earn, setEarn] = useState('1')
+  const [referral, setReferral] = useState('50')
+  const [minRedeem, setMinRedeem] = useState('100')
+
+  return (
+    <PageShell title={t('loyalty.title')} subtitle={t('loyalty.subtitle')}>
+      <Card className="max-w-xl">
+        <CardHeader>
+          <CardTitle>No-code loyalty config</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <Label>Earn rate (points per ETB)</Label>
+            <Input value={earn} onChange={(e) => setEarn(e.target.value)} />
+          </div>
+          <div className="space-y-1">
+            <Label>Referral bonus (points)</Label>
+            <Input value={referral} onChange={(e) => setReferral(e.target.value)} />
+          </div>
+          <div className="space-y-1">
+            <Label>Minimum redemption</Label>
+            <Input value={minRedeem} onChange={(e) => setMinRedeem(e.target.value)} />
+          </div>
+          <p className="text-xs text-muted-foreground">Tiers: Bronze / Silver / Gold — thresholds editable in full config.</p>
+          <Button onClick={() => toast.success('Loyalty rules saved (mock)')}>{t('common.save')}</Button>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/marketing/MarketingPage.tsx
+++ b/src/pages/marketing/MarketingPage.tsx
@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+const segments = [
+  { name: 'Chronic refill', size: 1280 },
+  { name: 'Lapsed buyers', size: 640 },
+  { name: 'High-value households', size: 210 },
+  { name: 'Institutional accounts', size: 18 },
+  { name: 'Bole catchment', size: 940 },
+]
+
+export function MarketingPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('marketing.title')} subtitle={t('marketing.subtitle')}>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {segments.map((s) => (
+          <Card key={s.name}>
+            <CardHeader>
+              <CardTitle className="text-base">{s.name}</CardTitle>
+            </CardHeader>
+            <CardContent className="flex items-center justify-between pt-0">
+              <span className="font-display text-2xl font-bold">{s.size.toLocaleString()}</span>
+              <Badge variant="secondary">self-updating</Badge>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </PageShell>
+  )
+}
--- a/src/pages/migrations/MigrationsPage.tsx
+++ b/src/pages/migrations/MigrationsPage.tsx
@ -0,0 +1,210 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { SelectNative } from '@/components/ui/select-native'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { importTemplates } from '@/mocks/data'
+
+type Step = 'template' | 'upload' | 'map' | 'validate' | 'done'
+
+export function MigrationsPage() {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<Step>('template')
+  const [templateId, setTemplateId] = useState('stock')
+  const [headers, setHeaders] = useState<string[]>([])
+  const [mapping, setMapping] = useState<Record<string, string>>({})
+  const [errors, setErrors] = useState<string[]>([])
+  const [previewRows, setPreviewRows] = useState<string[][]>([])
+
+  const template = useMemo(
+    () => importTemplates.find((x) => x.id === templateId)!,
+    [templateId],
+  )
+
+  const onFile = async (file: File | null) => {
+    if (!file) return
+    const text = await file.text()
+    const lines = text
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter(Boolean)
+    const cols = lines[0]?.split(/[,;\t]/).map((c) => c.trim()) ?? []
+    const rows = lines.slice(1, 6).map((l) => l.split(/[,;\t]/).map((c) => c.trim()))
+    setHeaders(cols)
+    setPreviewRows(rows)
+    const auto: Record<string, string> = {}
+    template.fields.forEach((f) => {
+      const hit = cols.find((c) => c.toLowerCase().replace(/\s/g, '') === f.toLowerCase())
+      if (hit) auto[f] = hit
+    })
+    setMapping(auto)
+    setStep('map')
+    toast.success(`Detected ${cols.length} columns`)
+  }
+
+  const validate = () => {
+    const missing = template.fields.filter((f) => !mapping[f])
+    const errs: string[] = []
+    if (missing.length) errs.push(`Unmapped required-ish fields: ${missing.join(', ')}`)
+    if (previewRows.some((r) => r.every((c) => !c))) errs.push('Empty rows detected')
+    setErrors(errs)
+    setStep('validate')
+  }
+
+  const commit = () => {
+    if (errors.length) {
+      toast.error('Fix validation errors first')
+      return
+    }
+    setStep('done')
+    toast.success(`Import committed (mock) · template ${template.label} · ${previewRows.length} sample rows`)
+  }
+
+  return (
+    <PageShell title={t('migrations.title')} subtitle={t('migrations.subtitle')}>
+      <div className="flex flex-wrap gap-2">
+        {(['template', 'upload', 'map', 'validate', 'done'] as Step[]).map((s) => (
+          <Badge key={s} variant={step === s ? 'default' : 'outline'}>
+            {s}
+          </Badge>
+        ))}
+      </div>
+
+      {step === 'template' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('migrations.templates')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <SelectNative value={templateId} onChange={(e) => setTemplateId(e.target.value)}>
+              {importTemplates.map((tpl) => (
+                <option key={tpl.id} value={tpl.id}>
+                  {tpl.label}
+                </option>
+              ))}
+            </SelectNative>
+            <p className="text-sm text-muted-foreground">Fields: {template.fields.join(', ')}</p>
+            <Button onClick={() => setStep('upload')}>{t('common.next')}</Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {step === 'upload' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('common.upload')} CSV / Excel (CSV text parsed in demo)</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <input
+              type="file"
+              accept=".csv,.txt,.tsv"
+              onChange={(e) => void onFile(e.target.files?.[0] ?? null)}
+            />
+            <Button
+              variant="outline"
+              onClick={() => {
+                setHeaders(['sku', 'branch', 'qty_on_hand', 'batch_no'])
+                setPreviewRows([
+                  ['AMX-500', 'br-bole', '50', 'B99'],
+                  ['PCM-500', 'br-cmc', 'x', 'B98'],
+                ])
+                setMapping({ sku: 'sku', branchId: 'branch', qty: 'qty_on_hand', batch: 'batch_no' })
+                setStep('map')
+              }}
+            >
+              Use sample stock CSV
+            </Button>
+            <Button variant="ghost" onClick={() => setStep('template')}>
+              {t('common.back')}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {step === 'map' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('migrations.mapColumns')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {template.fields.map((field) => (
+              <div key={field} className="grid items-center gap-2 sm:grid-cols-2">
+                <span className="text-sm font-medium">{field}</span>
+                <SelectNative
+                  value={mapping[field] ?? ''}
+                  onChange={(e) => setMapping((m) => ({ ...m, [field]: e.target.value }))}
+                >
+                  <option value="">— skip —</option>
+                  {headers.map((h) => (
+                    <option key={h} value={h}>
+                      {h}
+                    </option>
+                  ))}
+                </SelectNative>
+              </div>
+            ))}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setStep('upload')}>
+                {t('common.back')}
+              </Button>
+              <Button onClick={validate}>{t('common.validate')}</Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {(step === 'validate' || step === 'done') && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('migrations.dryRun')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {errors.length ? (
+              <ul className="list-disc space-y-1 pl-5 text-sm text-red-600">
+                {errors.map((e) => (
+                  <li key={e}>{e}</li>
+                ))}
+              </ul>
+            ) : (
+              <Badge variant="success">Validation passed (demo)</Badge>
+            )}
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {headers.map((h) => (
+                    <TableHead key={h}>{h}</TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {previewRows.map((r, i) => (
+                  <TableRow key={i}>
+                    {r.map((c, j) => (
+                      <TableCell key={j} className={c === 'x' ? 'text-red-600' : ''}>
+                        {c}
+                        {c === 'x' ? ' ⚠' : ''}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setStep('map')}>
+                {t('common.back')}
+              </Button>
+              <Button onClick={commit} disabled={step === 'done'}>
+                {t('common.commit')}
+              </Button>
+            </div>
+            {step === 'done' && <p className="text-sm text-muted-foreground">Job logged to audit (mock).</p>}
+          </CardContent>
+        </Card>
+      )}
+    </PageShell>
+  )
+}
--- a/src/pages/orders/OrdersPage.tsx
+++ b/src/pages/orders/OrdersPage.tsx
@ -0,0 +1,119 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { SelectNative } from '@/components/ui/select-native'
+import { Input } from '@/components/ui/input'
+import { useAuthStore } from '@/zustand/authStore'
+import { branches, orders as seedOrders, riders } from '@/mocks/data'
+import { formatEtb } from '@/lib/utils'
+import type { Order } from '@/types'
+
+export function OrdersPage() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const [rows, setRows] = useState<Order[]>([...seedOrders])
+  const [q, setQ] = useState('')
+
+  const filtered = useMemo(() => {
+    let list = rows
+    if (user?.role === 'pharmacist' && user.branchId) {
+      list = list.filter((o) => o.branchId === user.branchId)
+    }
+    if (q) list = list.filter((o) => o.customerName.toLowerCase().includes(q.toLowerCase()) || o.id.includes(q))
+    return list
+  }, [rows, user, q])
+
+  const assign = (orderId: string, riderId: string) => {
+    setRows((prev) =>
+      prev.map((o) =>
+        o.id === orderId
+          ? { ...o, assignedRiderId: riderId || undefined, status: riderId ? 'out_for_delivery' : o.status }
+          : o,
+      ),
+    )
+    Object.assign(
+      seedOrders.find((o) => o.id === orderId) ?? {},
+      { assignedRiderId: riderId || undefined, status: riderId ? 'out_for_delivery' : undefined },
+    )
+    toast.success(riderId ? 'Delivery person assigned' : 'Assignment cleared')
+  }
+
+  const confirm = (orderId: string) => {
+    setRows((prev) => prev.map((o) => (o.id === orderId ? { ...o, status: 'confirmed' } : o)))
+    toast.success('Order confirmed')
+  }
+
+  return (
+    <PageShell title={t('orders.title')} subtitle={t('orders.subtitle')}>
+      <Card>
+        <CardContent className="space-y-4 p-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <Input
+              className="max-w-sm"
+              placeholder={t('common.search')}
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+            />
+            <Badge variant="secondary">
+              {user?.branchName ?? t('common.allBranches')} · {filtered.length}
+            </Badge>
+          </div>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Customer</TableHead>
+                <TableHead>{t('common.branch')}</TableHead>
+                <TableHead>Fulfillment</TableHead>
+                <TableHead>{t('common.status')}</TableHead>
+                <TableHead>Total</TableHead>
+                <TableHead>{t('common.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((o) => (
+                <TableRow key={o.id}>
+                  <TableCell className="font-medium">{o.id}</TableCell>
+                  <TableCell>{o.customerName}</TableCell>
+                  <TableCell>{branches.find((b) => b.id === o.branchId)?.name}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{o.fulfillment}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={o.status === 'out_for_delivery' ? 'warning' : 'success'}>{o.status}</Badge>
+                  </TableCell>
+                  <TableCell>{formatEtb(o.totalEtb)}</TableCell>
+                  <TableCell>
+                    <div className="flex min-w-[200px] flex-col gap-2">
+                      <Button size="sm" variant="outline" onClick={() => confirm(o.id)}>
+                        {t('common.confirm')}
+                      </Button>
+                      {o.fulfillment === 'delivery' && (
+                        <SelectNative
+                          value={o.assignedRiderId ?? ''}
+                          onChange={(e) => assign(o.id, e.target.value)}
+                        >
+                          <option value="">{t('orders.assignRider')}</option>
+                          {riders.map((r) => (
+                            <option key={r.id} value={r.id}>
+                              {r.name}
+                            </option>
+                          ))}
+                        </SelectNative>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/organisations/OrganisationsPage.tsx
+++ b/src/pages/organisations/OrganisationsPage.tsx
@ -0,0 +1,173 @@
+import { useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { organisations as seed } from '@/mocks/data'
+import { formatEtb } from '@/lib/utils'
+import type { Organisation } from '@/types'
+
+export function OrganisationsPage() {
+  const { t } = useTranslation()
+  const [orgs, setOrgs] = useState<Organisation[]>([...seed])
+  const [open, setOpen] = useState(false)
+  const [form, setForm] = useState({ name: '', tin: '', creditLimitEtb: '100000', billingContact: '' })
+
+  const approve = (id: string, status: 'active' | 'rejected') => {
+    setOrgs((prev) => prev.map((o) => (o.id === id ? { ...o, status } : o)))
+    const target = seed.find((o) => o.id === id)
+    if (target) target.status = status
+    toast.success(status === 'active' ? 'Organisation approved — credit active' : 'Organisation rejected')
+  }
+
+  const createOrg = (e: FormEvent) => {
+    e.preventDefault()
+    const org: Organisation = {
+      id: `org-${Date.now()}`,
+      name: form.name,
+      tin: form.tin,
+      status: 'active',
+      creditLimitEtb: Number(form.creditLimitEtb) || 0,
+      usedEtb: 0,
+      billingContact: form.billingContact,
+      source: 'admin',
+      createdAt: new Date().toISOString(),
+    }
+    setOrgs((prev) => [org, ...prev])
+    seed.unshift(org)
+    setOpen(false)
+    toast.success('Organisation created from Admin')
+  }
+
+  const pending = orgs.filter((o) => o.status === 'pending')
+
+  return (
+    <PageShell
+      title={t('organisations.title')}
+      subtitle={t('organisations.subtitle')}
+      actions={
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>{t('organisations.createOrg')}</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t('organisations.createOrg')}</DialogTitle>
+              <DialogDescription>Admin-created orgs become active immediately.</DialogDescription>
+            </DialogHeader>
+            <form className="space-y-3" onSubmit={createOrg}>
+              <div className="space-y-1">
+                <Label>Name</Label>
+                <Input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+              </div>
+              <div className="space-y-1">
+                <Label>TIN</Label>
+                <Input required value={form.tin} onChange={(e) => setForm({ ...form, tin: e.target.value })} />
+              </div>
+              <div className="space-y-1">
+                <Label>Credit limit (ETB)</Label>
+                <Input
+                  required
+                  value={form.creditLimitEtb}
+                  onChange={(e) => setForm({ ...form, creditLimitEtb: e.target.value })}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label>Billing contact</Label>
+                <Input
+                  required
+                  value={form.billingContact}
+                  onChange={(e) => setForm({ ...form, billingContact: e.target.value })}
+                />
+              </div>
+              <Button type="submit" className="w-full">
+                {t('common.create')}
+              </Button>
+            </form>
+          </DialogContent>
+        </Dialog>
+      }
+    >
+      {pending.length > 0 && (
+        <Card className="border-orange/40">
+          <CardHeader>
+            <CardTitle>
+              {t('organisations.pending')} ({pending.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 p-4 pt-0">
+            {pending.map((o) => (
+              <div key={o.id} className="flex flex-col gap-2 rounded-xl border p-3 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <p className="font-medium">{o.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    Self-register · TIN {o.tin} · {o.billingContact}
+                  </p>
+                </div>
+                <div className="flex gap-2">
+                  <Button size="sm" onClick={() => approve(o.id, 'active')}>
+                    {t('common.approve')}
+                  </Button>
+                  <Button size="sm" variant="destructive" onClick={() => approve(o.id, 'rejected')}>
+                    {t('common.reject')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+      <Card>
+        <CardContent className="p-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>TIN</TableHead>
+                <TableHead>Source</TableHead>
+                <TableHead>Limit</TableHead>
+                <TableHead>Used</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {orgs.map((o) => (
+                <TableRow key={o.id}>
+                  <TableCell className="font-medium">{o.name}</TableCell>
+                  <TableCell>{o.tin}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{o.source}</Badge>
+                  </TableCell>
+                  <TableCell>{formatEtb(o.creditLimitEtb)}</TableCell>
+                  <TableCell>{formatEtb(o.usedEtb)}</TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={
+                        o.status === 'active' ? 'success' : o.status === 'pending' ? 'warning' : 'danger'
+                      }
+                    >
+                      {o.status}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/prescriptions/PrescriptionsPage.tsx
+++ b/src/pages/prescriptions/PrescriptionsPage.tsx
@ -0,0 +1,99 @@
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { useAuthStore } from '@/zustand/authStore'
+import { branches, prescriptions as seed } from '@/mocks/data'
+import type { Prescription } from '@/types'
+
+export function PrescriptionsPage() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const [rows, setRows] = useState<Prescription[]>([...seed])
+
+  const filtered = useMemo(() => {
+    if (user?.role === 'pharmacist' && user.branchId) {
+      return rows.filter((p) => p.branchId === user.branchId)
+    }
+    return rows
+  }, [rows, user])
+
+  const act = (id: string, status: Prescription['status']) => {
+    setRows((prev) => prev.map((p) => (p.id === id ? { ...p, status } : p)))
+    const target = seed.find((p) => p.id === id)
+    if (target) target.status = status
+    toast.success(`Prescription ${status}`)
+  }
+
+  return (
+    <PageShell title={t('prescriptions.title')} subtitle={t('prescriptions.subtitle')}>
+      <Card>
+        <CardContent className="p-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Customer</TableHead>
+                <TableHead>Prescriber</TableHead>
+                <TableHead>Items</TableHead>
+                <TableHead>{t('common.branch')}</TableHead>
+                <TableHead>{t('common.status')}</TableHead>
+                <TableHead>{t('common.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((p) => (
+                <TableRow key={p.id}>
+                  <TableCell className="font-medium">{p.id}</TableCell>
+                  <TableCell>{p.customerName}</TableCell>
+                  <TableCell>{p.prescriber}</TableCell>
+                  <TableCell>
+                    <div className="space-y-1">
+                      {p.items.map((i) => (
+                        <div key={i.name} className="text-xs">
+                          {i.name} × {i.qty}
+                          {i.controlled ? (
+                            <Badge variant="danger" className="ml-1">
+                              controlled
+                            </Badge>
+                          ) : null}
+                        </div>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>{branches.find((b) => b.id === p.branchId)?.name}</TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={
+                        p.status === 'approved' ? 'success' : p.status === 'rejected' ? 'danger' : 'warning'
+                      }
+                    >
+                      {p.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      <Button size="sm" onClick={() => act(p.id, 'approved')}>
+                        {t('prescriptions.approve')}
+                      </Button>
+                      <Button size="sm" variant="outline" onClick={() => act(p.id, 'queried')}>
+                        {t('prescriptions.query')}
+                      </Button>
+                      <Button size="sm" variant="destructive" onClick={() => act(p.id, 'rejected')}>
+                        {t('prescriptions.reject')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/procurement/ProcurementPage.tsx
+++ b/src/pages/procurement/ProcurementPage.tsx
@ -0,0 +1,82 @@
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { stockRows } from '@/mocks/data'
+
+const recommendations = [
+  { sku: 'MTF-850', reason: 'Below reorder point', qty: 100, velocity: 'high', suggestion: 'order' as const },
+  { sku: 'PCM-500', reason: 'Fast mover', qty: 200, velocity: 'medium', suggestion: 'order' as const },
+  { sku: 'VIT-C', reason: 'Dead stock risk at Bole — consider transfer', qty: 0, velocity: 'transfer', suggestion: 'transfer' as const },
+]
+
+export function ProcurementPage() {
+  const { t } = useTranslation()
+
+  return (
+    <PageShell title={t('procurement.title')} subtitle={t('procurement.subtitle')}>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Dead-stock & fast movers</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>SKU</TableHead>
+                  <TableHead>Qty</TableHead>
+                  <TableHead>Signal</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {stockRows.map((r) => (
+                  <TableRow key={r.sku + r.branchId}>
+                    <TableCell>{r.sku}</TableCell>
+                    <TableCell>{r.qty}</TableCell>
+                    <TableCell>
+                      <Badge variant={r.qty < 20 ? 'warning' : r.qty > 150 ? 'muted' : 'success'}>
+                        {r.qty < 20 ? 'reorder' : r.qty > 150 ? 'slow' : 'healthy'}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Reorder recommendations</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 p-4 pt-0">
+            {recommendations.map((r) => (
+              <div key={r.sku} className="flex items-center justify-between rounded-xl border p-3">
+                <div>
+                  <p className="font-medium">{r.sku}</p>
+                  <p className="text-xs text-muted-foreground">{r.reason}</p>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() =>
+                    toast.success(
+                      r.suggestion === 'transfer'
+                        ? 'Transfer request sent to Stock Manager'
+                        : `PO draft for ${r.qty} units`,
+                    )
+                  }
+                >
+                  {r.suggestion === 'transfer' ? 'Request transfer' : `Order ${r.qty}`}
+                </Button>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </PageShell>
+  )
+}
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { toast } from 'sonner'
+
+export function SettingsPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('settings.title')} subtitle={t('settings.subtitle')}>
+      <Card className="max-w-xl">
+        <CardHeader>
+          <CardTitle>Platform</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <Label>Data retention (days)</Label>
+            <Input defaultValue="365" />
+          </div>
+          <div className="space-y-1">
+            <Label>API base URL</Label>
+            <Input defaultValue={import.meta.env.VITE_API_BASE_URL || 'https://api.gishen.example/v1'} />
+          </div>
+          <Button onClick={() => toast.success('Settings saved (local demo)')}>{t('common.save')}</Button>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/pages/stock/StockPage.tsx
+++ b/src/pages/stock/StockPage.tsx
@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { branches, stockRows } from '@/mocks/data'
+
+export function StockPage() {
+  const { t } = useTranslation()
+  const [entry, setEntry] = useState('')
+  const [rows, setRows] = useState(stockRows)
+
+  const duplicates = entry.length > 2
+    ? rows.filter((r) => r.name.toLowerCase().includes(entry.toLowerCase()) || r.sku.toLowerCase().includes(entry.toLowerCase()))
+    : []
+
+  const resolve = (sku: string) => {
+    setRows((prev) => prev.map((r) => (r.sku === sku ? { ...r, qty: r.erpQty } : r)))
+    toast.success(`Discrepancy resolved for ${sku}`)
+  }
+
+  return (
+    <PageShell title={t('stock.title')} subtitle={t('stock.subtitle')}>
+      <Tabs defaultValue="inventory">
+        <TabsList>
+          <TabsTrigger value="inventory">Inventory</TabsTrigger>
+          <TabsTrigger value="erp">ERP sync</TabsTrigger>
+          <TabsTrigger value="entry">AI-assisted entry</TabsTrigger>
+          <TabsTrigger value="transfers">Transfers</TabsTrigger>
+        </TabsList>
+        <TabsContent value="inventory">
+          <Card>
+            <CardContent className="p-4">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>SKU</TableHead>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Branch</TableHead>
+                    <TableHead>Qty</TableHead>
+                    <TableHead>Batch</TableHead>
+                    <TableHead>Expiry</TableHead>
+                    <TableHead>Alert</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {rows.map((r) => (
+                    <TableRow key={`${r.sku}-${r.branchId}`}>
+                      <TableCell className="font-medium">{r.sku}</TableCell>
+                      <TableCell>{r.name}</TableCell>
+                      <TableCell>{branches.find((b) => b.id === r.branchId)?.name}</TableCell>
+                      <TableCell>{r.qty}</TableCell>
+                      <TableCell>{r.batch}</TableCell>
+                      <TableCell>{r.expiry}</TableCell>
+                      <TableCell>
+                        {r.qty < 20 ? <Badge variant="warning">low stock</Badge> : <Badge variant="success">ok</Badge>}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="erp">
+          <Card>
+            <CardHeader>
+              <CardTitle>Platform vs ERP discrepancies</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 p-4 pt-0">
+              {rows
+                .filter((r) => r.qty !== r.erpQty)
+                .map((r) => (
+                  <div key={r.sku} className="flex items-center justify-between rounded-xl border p-3">
+                    <div>
+                      <p className="font-medium">{r.sku}</p>
+                      <p className="text-xs text-muted-foreground">
+                        Platform {r.qty} · ERP {r.erpQty}
+                      </p>
+                    </div>
+                    <Button size="sm" onClick={() => resolve(r.sku)}>
+                      Resolve to ERP
+                    </Button>
+                  </div>
+                ))}
+              {rows.every((r) => r.qty === r.erpQty) && (
+                <p className="text-sm text-muted-foreground">No open discrepancies</p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="entry">
+          <Card>
+            <CardHeader>
+              <CardTitle>Duplicate detection while typing</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Input
+                placeholder="Name, barcode, or SKU…"
+                value={entry}
+                onChange={(e) => setEntry(e.target.value)}
+              />
+              {duplicates.map((d) => (
+                <div key={d.sku} className="rounded-xl border border-orange/30 bg-orange/5 p-3 text-sm">
+                  Possible match: <strong>{d.name}</strong> ({d.sku}) — merge requires human approval
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="transfers">
+          <Card>
+            <CardContent className="space-y-3 p-5">
+              <p className="text-sm text-muted-foreground">
+                Stock Manager owns inter-branch transfers. Suggest move of Vitamin C from Bole → CMC (fast mover).
+              </p>
+              <Button
+                onClick={() => toast.success('Transfer draft created (mock)')}
+              >
+                Create transfer suggestion
+              </Button>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </PageShell>
+  )
+}
--- a/src/pages/team/TeamPage.tsx
+++ b/src/pages/team/TeamPage.tsx
@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next'
+import { PageShell } from '@/layouts/PageShell'
+import { Card, CardContent } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { demoAccounts } from '@/config/permissions'
+
+export function TeamPage() {
+  const { t } = useTranslation()
+  return (
+    <PageShell title={t('team.title')} subtitle={t('team.subtitle')}>
+      <Card>
+        <CardContent className="p-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Branch</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {demoAccounts.map((a) => (
+                <TableRow key={a.email}>
+                  <TableCell className="font-medium">{a.name}</TableCell>
+                  <TableCell>{a.email}</TableCell>
+                  <TableCell>
+                    <Badge>{a.role}</Badge>
+                  </TableCell>
+                  <TableCell>{a.branchName ?? '—'}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </PageShell>
+  )
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -0,0 +1,96 @@
+export type StaffRole =
+  | 'pharmacist'
+  | 'stock_manager'
+  | 'procurement'
+  | 'finance'
+  | 'marketing_manager'
+  | 'operations'
+  | 'super_admin'
+
+export type ModuleKey =
+  | 'dashboard'
+  | 'orders'
+  | 'prescriptions'
+  | 'stock'
+  | 'procurement'
+  | 'finance'
+  | 'organisations'
+  | 'marketing'
+  | 'crm'
+  | 'loyalty'
+  | 'campaigns'
+  | 'dispatch'
+  | 'team'
+  | 'inbox'
+  | 'audit'
+  | 'faq'
+  | 'faq_write'
+  | 'settings'
+  | 'migrations'
+  | 'analytics'
+
+export interface StaffUser {
+  id: string
+  name: string
+  email: string
+  role: StaffRole
+  branchId?: string
+  branchName?: string
+  preferredLocale?: 'en' | 'am'
+}
+
+export interface Branch {
+  id: string
+  name: string
+  zone: string
+  phone: string
+}
+
+export interface Prescription {
+  id: string
+  customerName: string
+  branchId: string
+  status: 'submitted' | 'under_review' | 'approved' | 'queried' | 'rejected'
+  items: { name: string; qty: number; controlled?: boolean }[]
+  submittedAt: string
+  prescriber?: string
+}
+
+export interface Order {
+  id: string
+  customerName: string
+  branchId: string
+  fulfillment: 'delivery' | 'pickup'
+  status: string
+  totalEtb: number
+  channel: string
+  assignedRiderId?: string
+  zone?: string
+  address?: string
+  createdAt: string
+  paid: boolean
+  rxApproved?: boolean
+}
+
+export interface Organisation {
+  id: string
+  name: string
+  tin: string
+  status: 'pending' | 'active' | 'rejected'
+  creditLimitEtb: number
+  usedEtb: number
+  billingContact: string
+  source: 'admin' | 'self_register'
+  createdAt: string
+}
+
+export interface FaqArticle {
+  id: string
+  category: string
+  title_en: string
+  title_am: string
+  body_en: string
+  body_am: string
+  published: boolean
+  updatedAt: string
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_USE_MOCKS?: string
+  readonly VITE_API_BASE_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
--- a/src/zustand/authStore.ts
+++ b/src/zustand/authStore.ts
@ -0,0 +1,56 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { StaffUser } from '@/types'
+import { demoAccounts } from '@/config/permissions'
+
+interface AuthState {
+  user: StaffUser | null
+  token: string | null
+  login: (email: string, password: string) => { ok: boolean; error?: string }
+  loginAsDemo: (email: string) => void
+  logout: () => void
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      login: (email, password) => {
+        const account = demoAccounts.find((a) => a.email === email && a.password === password)
+        if (!account) return { ok: false, error: 'Invalid credentials' }
+        const user: StaffUser = {
+          id: account.email,
+          name: account.name,
+          email: account.email,
+          role: account.role,
+          branchId: account.branchId,
+          branchName: account.branchName,
+          preferredLocale: (localStorage.getItem('gishen_locale') as 'en' | 'am') || 'en',
+        }
+        localStorage.setItem('access_token', 'demo-token')
+        set({ user, token: 'demo-token' })
+        return { ok: true }
+      },
+      loginAsDemo: (email) => {
+        const account = demoAccounts.find((a) => a.email === email)
+        if (!account) return
+        const user: StaffUser = {
+          id: account.email,
+          name: account.name,
+          email: account.email,
+          role: account.role,
+          branchId: account.branchId,
+          branchName: account.branchName,
+        }
+        localStorage.setItem('access_token', 'demo-token')
+        set({ user, token: 'demo-token' })
+      },
+      logout: () => {
+        localStorage.removeItem('access_token')
+        set({ user: null, token: null })
+      },
+    }),
+    { name: 'gishen-auth' },
+  ),
+)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,86 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Plus Jakarta Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        display: ['Sora', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        brand: {
+          50: '#F4F8E4',
+          100: '#E8F0C4',
+          200: '#D4E48A',
+          300: '#C0D65A',
+          400: '#B4CE45',
+          500: '#A8C73A',
+          600: '#8FAD2F',
+          700: '#768F28',
+        },
+        forest: {
+          DEFAULT: '#141414',
+          deep: '#0A0A0A',
+          ink: '#111111',
+        },
+        cream: '#F6F7F2',
+        orange: {
+          DEFAULT: '#E28A1A',
+          deep: '#C97310',
+        },
+        grayScale: {
+          50: '#FFFFFF',
+          100: '#F6F7F2',
+          200: '#E2E5D8',
+          300: '#C5C9B8',
+          400: '#9A9E90',
+          500: '#5C5F56',
+          600: '#3D4038',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      boxShadow: {
+        soft: '0 8px 24px rgba(0,0,0,0.06)',
+      },
+    },
+  },
+  plugins: [],
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "strict": true,
+    "ignoreDeprecations": "6.0",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vercel.json
+++ b/vercel.json
@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>