E-commerce Delivery Performance Dashboard

Overview

A multi-tenant Next.js dashboard that merges Shopify financial data with carrier delivery status across four storefronts (Mike Sport Lebanon, Mike Sport Iraq, Crocs Lebanon, Service Park). Operations teams get a single view of SLA attainment by governorate, weighted operations scorecards, and smart alerts before failures escalate.

Problem

Operations teams could not see end-to-end delivery performance across multiple stores and regions. SLA breaches were detected after the fact, when customers complained, not when the breach actually happened. Each store had its own Shopify dashboard, its own carrier portal, and no unified view of what was actually shipping on time.

Approach

Build a single-source dashboard that joins Shopify orders with carrier delivery events, normalizes geography to regional tiers, and applies an explicit SLA model per region. Treat each store as an isolated tenant with its own RBAC and data scope. Make integrity invariants the priority: the carrier owns delivery state, the dashboard never silently overwrites it.

Architecture

• App: Next.js 16 App Router with Turbopack, Tailwind 4, shadcn/ui, Recharts.
• Storage: Per-store IndexedDB for client-side caches, Express + Prisma + PostgreSQL on the server.
• Multi-tenancy: Strict per-store isolation with RBAC slicing. A user only ever sees their store's data.
• Pipeline: A normalizeAndMerge step joins Shopify and carrier sources, applies geography normalization (100+ city aliases mapped to Lebanese governorates), and computes SLA tiers.
• KPI engine: A kpi-engine.ts module computes operations scorecards across five weighted dimensions, producing letter grades the team can scan.
• Auth: JWT with 8-hour TTL, CSRF tokens, bcrypt password hashing, helmet headers.
• Tests: 50+ Playwright tests covering 17 page flows.

Tech stack

• Frontend: Next.js 16 (App Router, Turbopack), Tailwind CSS 4, shadcn/ui, Recharts, React Context, IndexedDB
• Backend: Node.js 20, Express 4, Prisma ORM, PostgreSQL 15 (Railway)
• Auth: JWT (8h TTL), CSRF tokens, bcrypt
• Testing: Playwright
• Deploy: Hostinger VPS, PM2, Nginx, Let's Encrypt

Engineering highlights

• Dual SLA model: internal Shopify cycle (≤24h) plus carrier-driven external SLA per region (48–96h depending on tier).
• Status-immutability invariant: delivery state can only be progressed by the carrier source. The dashboard never silently overwrites it. Zero violations in production.
• Multi-store isolation: separate IndexedDB databases per store, server-side RBAC checks on every endpoint.
• Geography normalization: 100+ city alias mappings produce a clean regional tier per order, even when carriers report inconsistent place names.
• Smart alerts: weighted thresholds across the scorecard dimensions surface the right breach at the right time.

Outcome

Live in production across four stores. Zero violations of the integrity invariants. Operations teams now see SLA breaches as they happen, not after, and the weekly performance review meeting takes minutes instead of hours.

Lessons

• Multi-tenancy is easier when you make data-scope a first-class concept from day one, not an afterthought.
• SLA models that span systems (your storefront + their carrier) need explicit dual definitions or you'll never agree on what "on time" means.
• A good integrity invariant is worth more than a hundred dashboards: "the carrier owns delivery state" is the rule that keeps the data trustworthy.