Driver Dashboard
- Personal greeting and a card showing whether a trip is in progress
- Trips today, kilometres this month, orders this month and pending orders
- One-tap Start Trip and Place Order
- Recent orders with their payment status
Mobile Web Application / Driver & Delivery Management
SagaDriver Mobile App
A mobile web app that gives laundry delivery drivers their trips, orders, customers and bills on their phone, connected live to the main business system.
- Client
- Sagacious Washing Centre, a commercial laundry in Sri Lanka
- Type
- Mobile web app, nothing to install from an app store
- Users
- Delivery drivers, each with a personal login
- Web access
- Any phone, tablet or computer online
- Cloud database
- Shares one live database with the office system
- Cloud hosted
- Netlify, with HTTPS
- Companion to
- The Sagacious Washing Centre system
Overview
About this project.
Sagacious Washing Centre collects laundry from hotels and businesses and delivers it back on a schedule. Drivers spend their day on the road, but trips, orders and deliveries were recorded back at the office. That meant extra phone calls, late updates and odometer readings typed in by hand.
We built a driver app that runs in the phone's browser and connects to the same cloud database as the office system. A driver signs in, picks a free vehicle, starts a trip, places orders at the customer's door, marks deliveries as done and downloads bills as PDFs. Every action shows up straight away in the office system, so staff and management always see the current position.
- Mobile Web App
- React
- Cloud
- Supabase
- Netlify
What it helps with
- Starting and ending delivery trips from the driver's phone
- Taking new customer orders on the spot, with the correct prices
- Marking orders as delivered, one at a time or several at once
- Recording items a customer hands back
- Giving drivers each customer's bills and payment status
- Keeping vehicle mileage accurate and preventing double-booking of vehicles
Inside the system
Real screens from the live system.
Select a screen to enlarge it.
Driver and customer details, amounts and the bill are blurred to protect our client's privacy.
Key features
Everything the business runs on, in one place.
Trips & Transport
- Start Trip: pick a vehicle; the driver's own profile is filled in
- Only free vehicles are listed, so two drivers can never take the same one
- The starting odometer reading carries over from the last trip and is locked
- Availability is checked again at the moment of saving
- End Trip: enter the final reading and the distance is calculated
- Record customers in visit order and add trip notes
- “My Trips” lists ongoing and completed trips
Orders
- All and Assigned to Me tabs, with search
- Mark an order Delivered, assigning it to the driver if needed
- Mark several orders delivered in one step
- Returned items: record how many of each item came back
- Orders assigned to another driver are view-only
Place New Order
- The office order form, laid out for a phone screen
- Choose or add a customer, then add items, quantities and service type
- The customer's agreed prices apply automatically
- Delivery charge, automatic discount, advance and extra payments
- Live total, with order and invoice numbers generated automatically
- Saved in one step, so an order is never stored without its items
Bills (PDF)
- Tap any order to see its bill in the office print layout
- Download PDF saves it to the phone, named after the order number
- Drivers can view and download bills but not edit them
Customers
- Searchable list of hotels and businesses
- Order history under All / Paid / Unpaid tabs
- Totals for all bills, amount paid and amount unpaid
- Add a new customer from the phone
Vehicles
- Type, model, status and total distance for each vehicle
- Trip history and a distance graph per vehicle
- View-only for drivers
Driver Profile
- The driver's contact details, address and status
- Total kilometres and trips, completed and active
- Personal trip history and a distance graph
Built for Phones
- Small screens first, with large touch targets
- Portrait and landscape: the bottom tab bar becomes a side bar on wider screens
- Supports notches and rounded screen corners
- Time picker for trip start and end
- Sri Lanka local time, so early-morning entries land on the right day
User roles & access
The right screens for every role.
The admin adds each driver in the office system and gives them a username and password. Wherever a form asks for a driver, the app fills in the signed-in driver, and no driver can see or change another driver's data.
Driver
Sees and uses only their own profile and trips. Places orders, marks deliveries, records returned items and downloads bills.
Admin & Staff
Create driver accounts and manage everything else from the office system. They cannot sign in to the driver app.
Platform & technology
Built for the browser, backed by the cloud.
Web access
Opens in any modern mobile browser, with nothing from an app store. Also works on tablets and computers.
Cloud database
The same managed PostgreSQL database (Supabase) as the office system, so drivers and staff always see the same live data. Security rules control who can read and change each record.
Cloud hosted
Its own site on Netlify, separate from the office system, built and deployed automatically and served over HTTPS.
Tech stack
- Front end
- React 18, TypeScript, Vite
- Routing
- React Router
- Back end & database
- Supabase: PostgreSQL, Auth, row-level security, database functions
- Charts
- Chart.js (react-chartjs-2)
- Documents
- jsPDF and html2canvas
- Icons & fonts
- Font Awesome; DM Sans and Playfair Display
- Hosting
- Netlify
- Drivers update trips, orders and deliveries from the road instead of reporting back to the office
- Vehicle mileage is accurate because starting readings carry over automatically and are locked
- A vehicle or driver can never be booked on two trips at once
- The office sees deliveries and new orders as soon as the driver saves them
- Customers can get their bill as a PDF on the spot