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>
This commit is contained in:
commit
c2fd9d6431
2
.env.example
Normal file
2
.env.example
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
VITE_USE_MOCKS=true
|
||||
VITE_API_BASE_URL=
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -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?
|
||||
8
.oxlintrc.json
Normal file
8
.oxlintrc.json
Normal file
|
|
@ -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 }]
|
||||
}
|
||||
}
|
||||
53
README.md
Normal file
53
README.md
Normal file
|
|
@ -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)
|
||||
215
docs/admin-backend-spec.md
Normal file
215
docs/admin-backend-spec.md
Normal file
|
|
@ -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)
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -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>
|
||||
4358
package-lock.json
generated
Normal file
4358
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
package.json
Normal file
51
package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
4
public/favicon.svg
Normal file
4
public/favicon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 271 B |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
74
src/app/AppRoutes.tsx
Normal file
74
src/app/AppRoutes.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
38
src/components/dashboard/StatCard.tsx
Normal file
38
src/components/dashboard/StatCard.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
141
src/components/sidebar/Sidebar.tsx
Normal file
141
src/components/sidebar/Sidebar.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
67
src/components/topbar/Topbar.tsx
Normal file
67
src/components/topbar/Topbar.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
30
src/components/ui/badge.tsx
Normal file
30
src/components/ui/badge.tsx
Normal file
|
|
@ -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} />
|
||||
}
|
||||
47
src/components/ui/button.tsx
Normal file
47
src/components/ui/button.tsx
Normal file
|
|
@ -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 }
|
||||
27
src/components/ui/card.tsx
Normal file
27
src/components/ui/card.tsx
Normal file
|
|
@ -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} />
|
||||
}
|
||||
43
src/components/ui/dialog.tsx
Normal file
43
src/components/ui/dialog.tsx
Normal file
|
|
@ -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} />
|
||||
}
|
||||
38
src/components/ui/dropdown-menu.tsx
Normal file
38
src/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -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
|
||||
17
src/components/ui/input.tsx
Normal file
17
src/components/ui/input.tsx
Normal file
|
|
@ -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'
|
||||
15
src/components/ui/label.tsx
Normal file
15
src/components/ui/label.tsx
Normal file
|
|
@ -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
|
||||
17
src/components/ui/select-native.tsx
Normal file
17
src/components/ui/select-native.tsx
Normal file
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
36
src/components/ui/table.tsx
Normal file
36
src/components/ui/table.tsx
Normal file
|
|
@ -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} />
|
||||
}
|
||||
40
src/components/ui/tabs.tsx
Normal file
40
src/components/ui/tabs.tsx
Normal file
|
|
@ -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
|
||||
13
src/components/ui/textarea.tsx
Normal file
13
src/components/ui/textarea.tsx
Normal file
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
92
src/config/permissions.ts
Normal file
92
src/config/permissions.ts
Normal file
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
25
src/i18n/config.ts
Normal file
25
src/i18n/config.ts
Normal file
|
|
@ -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
|
||||
65
src/index.css
Normal file
65
src/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
41
src/layouts/AppLayout.tsx
Normal file
41
src/layouts/AppLayout.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
30
src/layouts/PageShell.tsx
Normal file
30
src/layouts/PageShell.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
14
src/lib/utils.ts
Normal file
14
src/lib/utils.ts
Normal file
|
|
@ -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)
|
||||
}
|
||||
149
src/locales/am/translation.json
Normal file
149
src/locales/am/translation.json
Normal file
|
|
@ -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": "ክፍሎች እና ሪፖርቶች"
|
||||
}
|
||||
}
|
||||
149
src/locales/en/translation.json
Normal file
149
src/locales/en/translation.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -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>,
|
||||
)
|
||||
185
src/mocks/data.ts
Normal file
185
src/mocks/data.ts
Normal file
|
|
@ -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'] },
|
||||
]
|
||||
57
src/pages/analytics/AnalyticsPage.tsx
Normal file
57
src/pages/analytics/AnalyticsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
37
src/pages/audit/AuditPage.tsx
Normal file
37
src/pages/audit/AuditPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
90
src/pages/auth/LoginPage.tsx
Normal file
90
src/pages/auth/LoginPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
90
src/pages/dashboard/DashboardPage.tsx
Normal file
90
src/pages/dashboard/DashboardPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
127
src/pages/dispatch/DispatchPage.tsx
Normal file
127
src/pages/dispatch/DispatchPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
123
src/pages/faq/FaqPage.tsx
Normal file
123
src/pages/faq/FaqPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
83
src/pages/finance/FinancePage.tsx
Normal file
83
src/pages/finance/FinancePage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
20
src/pages/finance/SwitchRow.tsx
Normal file
20
src/pages/finance/SwitchRow.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
29
src/pages/inbox/InboxPage.tsx
Normal file
29
src/pages/inbox/InboxPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
56
src/pages/marketing/CampaignsPage.tsx
Normal file
56
src/pages/marketing/CampaignsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
42
src/pages/marketing/CrmPage.tsx
Normal file
42
src/pages/marketing/CrmPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
41
src/pages/marketing/LoyaltyPage.tsx
Normal file
41
src/pages/marketing/LoyaltyPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
33
src/pages/marketing/MarketingPage.tsx
Normal file
33
src/pages/marketing/MarketingPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
210
src/pages/migrations/MigrationsPage.tsx
Normal file
210
src/pages/migrations/MigrationsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
119
src/pages/orders/OrdersPage.tsx
Normal file
119
src/pages/orders/OrdersPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
173
src/pages/organisations/OrganisationsPage.tsx
Normal file
173
src/pages/organisations/OrganisationsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
99
src/pages/prescriptions/PrescriptionsPage.tsx
Normal file
99
src/pages/prescriptions/PrescriptionsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
82
src/pages/procurement/ProcurementPage.tsx
Normal file
82
src/pages/procurement/ProcurementPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
31
src/pages/settings/SettingsPage.tsx
Normal file
31
src/pages/settings/SettingsPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
133
src/pages/stock/StockPage.tsx
Normal file
133
src/pages/stock/StockPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
40
src/pages/team/TeamPage.tsx
Normal file
40
src/pages/team/TeamPage.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
96
src/types/index.ts
Normal file
96
src/types/index.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
10
src/vite-env.d.ts
vendored
Normal file
10
src/vite-env.d.ts
vendored
Normal file
|
|
@ -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
|
||||
}
|
||||
56
src/zustand/authStore.ts
Normal file
56
src/zustand/authStore.ts
Normal file
|
|
@ -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' },
|
||||
),
|
||||
)
|
||||
86
tailwind.config.js
Normal file
86
tailwind.config.js
Normal file
|
|
@ -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: [],
|
||||
}
|
||||
28
tsconfig.app.json
Normal file
28
tsconfig.app.json
Normal file
|
|
@ -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"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
23
tsconfig.node.json
Normal file
23
tsconfig.node.json
Normal file
|
|
@ -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"]
|
||||
}
|
||||
3
vercel.json
Normal file
3
vercel.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
|
||||
}
|
||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
|
|
@ -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'),
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user