Selected work / Chapter 01
Manfath منفذ
Arabic for “border crossing point”
Freight & customs
Cross-border land-freight and customs dispatch
An operations platform for freight forwarders and 3PLs running trucks on the UAE–KSA–Oman corridors: multi-leg trips through border posts, an offline-first driver app, customs clearance, proof of delivery and multi-currency invoicing.
Manfath#2026 · roles to try - Used by
- Dispatchers, Drivers, Finance, Shippers
- Built with
- Angular 21 · Django 5.2 LTS · Django REST Framework · PostgreSQL 16 · Celery + Redis · Docker Compose · Django Channels · PostGIS · Dexie (IndexedDB) · ReportLab
- Languages
- English and Arabic, with full right-to-left layouts
- Source
- Private repository — available on request by email
The problemWhat the operation is up against.
Trucks moving goods between the UAE, Saudi Arabia, Oman and Kuwait spend much of each trip waiting at land border posts such as Al Ghuwaifat ⇄ Al Batha. Each side runs its own customs system — Mirsal 2 in Dubai, FASAH in Saudi Arabia, Bayan in Oman — and a truck cannot leave a post until the right declaration, exit note, duty voucher or transit guarantee is in order.
Much of this is still coordinated over phone calls and photos sent from the border, which makes three things hard: knowing where every truck is and which ones are about to run past their free time; keeping customs paperwork complete and verifiable when the driver holds the papers and the signal is poor; and invoicing correctly across currencies and VAT regimes.
Who uses it4 roles, one system.
Dispatchers
Plan multi-leg trips, follow every truck on a live board and clear customs border post by border post.
Drivers
Use a phone app that keeps working offline: scan documents, record departures and arrivals, capture a signature for proof of delivery.
Finance
Issue tax invoices with detention, duties and disbursements in the right currency and VAT treatment, and record payments in any currency.
Shippers
Follow the trip through a signed tracking link — no account needed — with live milestones and verified documents to download.
What was builtThe working parts.
Trips through border checkpoints
A route builder turns border-post pairs into checkpoints — origin hub, export post, neutral inspection zone, import post, consignee — and validates multi-crossing trips such as UAE → KSA → Kuwait transit against the trip’s countries.
Offline-first driver app
Trips are cached on the phone. Every action goes into an outbox with a device ID and device time, shows immediately, and syncs in order when the signal returns. The server treats the ID as an idempotency key, so a replay is harmless.
A document scanner in the browser
Written in TypeScript on Canvas, with nothing to download: edge detection, a draggable corner editor, perspective correction, and enhanced, greyscale and black-and-white modes that keep stamp ink colour.
Customs clearance checklist
Per border post: declaration number, stamped declaration, exit note, duty voucher when duty is due, transit deposit when in transit, every scan verified. The checklist gates the “cleared” status; operations can waive an item with a recorded reason.
Billing and settlement
Linehaul, fuel surcharge, clearance fees, detention per started day after free time, and re-billable duties. Seven currencies (AED, SAR, OMR to three decimals, KWD, BHD, QAR, USD), GCC VAT treatment, gap-free tax invoice numbers, payments in any currency.
Proof of delivery and shipper tracking
A signature-on-glass e-POD rendered to PDF; signed, revocable tracking links that show milestones in border-local time, live over WebSocket, with watermarked copies of verified documents.
A live dispatcher board
Every trip streams over a per-tenant WebSocket into the board: where each truck is, its detention clock against free time, clearance progress per post, exception flags and scans waiting for review — with a dark control-room theme one click away.
Design rulesThe rules it keeps.
The decisions that make the system trustworthy, enforced on the server and in the database rather than left to the screen.
Field facts are never rejected.
Drivers report movements hours late from an offline queue. An out-of-order arrival closes the skipped checkpoints and is flagged for operations instead of bouncing the driver’s data. Only operations decisions, such as customs clearance, are hard-gated.
Detention is never billed on a guess.
A crossing without a recorded exit time is marked incomplete and left off the invoice until someone fixes the timestamps.
Documents are evidence.
The real file type is checked from its bytes, the original is stored untouched with its SHA-256, and clients only ever receive a watermarked copy.
ArchitectureHow it fits together.
An Angular single-page app and installable driver PWA on a Django REST API, with Django Channels for live updates and Celery workers for documents, e-mail and timers — on PostgreSQL with PostGIS.
- Front end
- Angular 21 (standalone, zoneless, signals), Tailwind CSS 4, CDK BiDi for right-to-left, Dexie (IndexedDB) for the driver outbox.
- API
- Django 5.2 LTS and Django REST Framework with JWT auth; a pure billing engine for detention, VAT and exchange rates.
- Real time
- Django Channels WebSockets per tenant; the token travels in the WebSocket subprotocol, never in a URL.
- Background work
- Celery and Redis: thumbnails and optional OCR on upload, watermarked verified copies, bilingual status e-mails, a timer that raises a delay event when a truck exceeds its free time.
- Data
- PostgreSQL 16 with JSONB event metadata, row-level security per tenant, and PostGIS geography columns behind a nearest-border-post lookup.
- Delivery
- Docker Compose with NGINX (app, reverse proxy, WebSocket upgrade, protected media), Gunicorn, Uvicorn, Celery worker and beat. CI runs linting, pytest against PostGIS, the Angular tests and build, and a Trivy image scan.
Quality evidenceTested where it matters.
- 41 backend tests (pytest), including tenant isolation under PostgreSQL row-level security, the billing engine, offline-sync idempotency, real-time updates and the tracking portal; ruff lint and format checks.
- 11 frontend unit tests (Vitest) covering the scanner geometry and English/Arabic translation parity.
- CI on every push: lint, a migration-drift check, pytest against PostGIS, Angular tests and a production build with bundle budgets, then Docker images built and scanned with Trivy.
ScreensOn the desk and in the field.
A token-based design system with light and dark themes — the dispatch board has a dark control-room mode one click away — English and Arabic throughout, with Arabic names for border posts and hubs and Western digits for references and amounts.
Try the demoSign in as any role.
The demo runs on realistic seeded data, with a second tenant to show that one customer never sees another’s records.
The sign-in page offers each demo role in one click, and the demo data resets every night at 00:30 UTC.
| User | Role | What to try |
|---|---|---|
dispatcher | Dispatcher | The live board; clear customs at Al Ghuwaifat; create a UAE → KSA → Kuwait transit trip. |
finance | Finance | Billing: issue the draft OMR invoice and record a payment in another currency. |
driver | Driver | On a phone-sized window: scan a document, depart, capture proof of delivery. |
admin | Administrator | Everything, including exchange-rate overrides. |
oof_admin | Admin of a second tenant | Sees none of the first tenant’s data. |
Password for every demo user Manfath#2026
Out of scopeNot built yet — on purpose.
- Live integrations with FASAH, Mirsal 2 or Oman Bayan — declaration numbers are entered by hand.
- ZATCA Phase 2 e-invoicing.
- SMS, WhatsApp or push notifications — status updates go by e-mail.
- A map view.