🔍
🛡️ DEMO MODE
Operational Alerts (Simulated)
Total Consignments 📦
26
↑ 12% vs previous 7-day period
In Transit & Dispatched 🚚
9
Active on Nigerian corridors
Delivered (SLA Cleared) ✅
13
94.8% on-time delivery rate
Simulated Revenue ₦
₦ 4.82M
Sample billings & freight fees
Pending Booking / Intake
3
⏳
Active Fleet on Road
8 / 10
🚛
Cancelled / Rescheduled
2
✕
7-Day Shipment Volume & Fulfilment
Dark green: Completed/Delivered • Light green: Total Ingested
Interactive SVG Chart
Status Breakdown
Live Dataset
Recent Shipment Activity
Ref Number Sender Recipient Route Status Action
Live Operational Feed Active Stream
🔍
Showing 26 shipments
Ref # Sender Recipient Route Package Description Weight Date Status Actions
🔍
🔍
12 Active Licensed Operators Simulated
Client Accounts Directory
Fictional corporate, commercial, and agricultural consignment accounts
Company Name Contact Person Sector / Type Primary Hub Total Shipments Total Spend Action

Operations Performance & Intelligence

Simulated network performance indicators, route density, and monthly volumes
On-Time SLA Delivery 🎯
94.8%
Target: > 92.0%
Avg. Corridor Transit Time ⏱
18.4 hrs
Interstate trunk routes
Fleet Capacity Utilization 📈
86.2%
Payload weight efficiency
Customer Satisfaction (CSAT) ★
4.8 / 5.0
Based on recipient sign-off ratings
Monthly Consignment Volume Trend (2026)
Simulated monthly line-haul volumes (Jan - Nov 2026)
Interactive Trend
Corridor Density & Cargo Tonnage
Brand Customization & Identity Setup
Instructions for tailoring this demonstration platform to a client's specific corporate brand.
Click to test alternative corporate color schemes in real time:
How to Replace the Company Logo:
  1. Place your company logo image (e.g. logo.svg or logo.png) in the /assets/img/ folder.
  2. Open index.html, services.html, tracking.html, contact.html, and dashboard.html.
  3. Locate the <div class="logo-placeholder-box"> block in the header.
  4. Replace the placeholder block with an <img src="./assets/img/your-logo.svg" alt="Company Logo" height="42"> tag.
How to Change Brand Colours Permanently:

Open /css/style.css and edit the root CSS design tokens at the top of the file: 

:root {
  --color-primary: #123D32;       /* Your primary corporate color */
  --color-secondary: #D9B45C;     /* Your accent / gold highlight */
  --color-bg: #F5F5F0;            /* Primary page background */
  --color-text: #303A36;          /* Body text color */
}
How to Add or Edit Sample Operational Data:

All simulated shipments, vehicles, drivers, and customer profiles are defined cleanly in /js/data.js. You can add new Nigerian routes, edit driver names, or customize freight rates by modifying the array structures directly.

Production Upgrade Roadmap

When a client engages Çi Solutions to build out this platform for actual production operations, we implement the following enterprise components:

  • ✔ PostgreSQL Database with row-level security and automated daily backups.
  • ✔ Secure REST/GraphQL API with role-based JWT access tokens.
  • ✔ Mobile Driver Application (Android) for offline barcode scanning and signature POD capture.
  • ✔ Live Telemetry & GPS with geofencing automated corridor milestone triggers.
  • ✔ SMS & WhatsApp Webhooks notifying consignees upon dispatch and delivery.
  • ✔ Payment Gateway Integration (Paystack, Flutterwave, Moniepoint) for freight settlement.
Demo State Maintenance

If sample shipments have been added or statuses modified during a client presentation, reset the local storage back to its pristine default state.