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.

Workflow expansion (2026)

The platform grew from a delivery view into end-to-end order operations coverage:

• SEO 404 manager: in-house crawl of sitemaps plus the Shopify catalog, polite HEAD-check validation, auto-suggested redirect targets via handle similarity, and Shopify-native URL Redirects CSV export. Handles the IQ store's /ar/ Arabic-URL migration without enumerating 142k URLs. No third-party SaaS.
• CS workflows: an operations hub tracking order cancellations, combinations, restocks, returns, and customer issues as per-store workflow tasks.
• Status reconciliation and to-fulfillment: compares Shopify versus carrier status, and tracks transfer orders from store to the W07 warehouse (created, shipped, received) with late-step flagging via daily merge uploads.
• Cycle times: per-order status event log with an internal and external timeline, live-fetched from the carrier with failure notes (refused, no answer, preparation issue).
• Monthly reporting: gross returns computed server-side on a Shopify refund-date basis, replacing the older lost-revenue metric.
• Per-store working hours: now drive SLA scoring per store, so the same SLA definition no longer produces false breaches across regions and timezones.

Tech stack

• Frontend: Next.js 16 (App Router, Turbopack), React 19, Tailwind CSS 4, shadcn/ui, Recharts, React Context, IndexedDB
• Backend: Node.js 20, Express 4.21, Prisma 5.22, PostgreSQL 16
• Data sources: Shopify Admin API (4 stores), carrier delivery API, Meta Graph (read-only), Google Search Console
• Auth: JWT (8h TTL), CSRF tokens, bcrypt
• Exports: PDF, CSV, PPTX, Excel
• Testing: Playwright (50+ tests across 17 pages)
• Deploy: Hostinger VPS, PM2, Nginx, Let's Encrypt

Engineering highlights

• Dual SLA model: internal Shopify cycle (up to 24h) plus carrier-driven external SLA per region (48 to 96h depending on tier), with per-store working hours now feeding the SLA computation.
• 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, serving operations across Lebanon and Iraq. 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. In 2026 the system expanded to cover the full order workflow: SEO 404 cleanup, transfer-order warehouse tracking, status reconciliation, cycle-time event logs, and CS task workflows.

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.