How to use Dispatch & Collection

A complete walkthrough — from listing an item, to dispatching a driver, to delivering it and signing the job off. Print this page or keep it open while you learn the system.

📦 Overview

The system coordinates the collection and delivery of items between two organisations:

The Main Company has items that need to move. It lists each item and prints a QR code label for the package.
The Depot receives those requests, dispatches a driver to collect and deliver them, and signs the job off as complete once the proof photo is in.
The Driver collects the package (scanning its label to confirm), drives it to the delivery address, and takes a geo-tagged proof-of-delivery photo. The depot then confirms completion.

Everything is tied to a unique reference number in the format REF-YYYY-NNNNNN, printed on the label and scanned by the driver. Every step is timestamped, so there is a full audit trail for each job.

Where to open it: use the secure address https://84-8-130-40.sslip.io/dispatch/. The map and camera features only work over a secure (HTTPS) connection. You can install it to your phone's home screen — it behaves like an app.

👥 Who does what

🏢 Main company admin

Lists items for collection (with the recipient company & map-assisted addresses), prints QR labels, tracks each item's progress, and can cancel a request before it's collected.

🏬 Depot dispatcher

Sees the incoming queue, assigns an available driver to each item, manages the roster, reviews the proof photo and signs the job off as complete, and can reject items the depot can't take.

🚚 Driver

Works only their assigned jobs: accept → drive to collection → scan to collect → drive to delivery → deliver with a geo-tagged photo. Can view the pickup & delivery on a map before setting off.

⚙️ Platform admin

One-time setup: creates the companies and the user logins (admins and drivers). Not used day-to-day.

You only ever see what your role needs — a driver sees only their own jobs, a depot sees only its own queue, etc.

🛣️ The journey of an item

Each item moves through these statuses. The two travelling stages are kept separate so everyone knows exactly where the driver is:

Pending→ Assigned→ Accepted→ En route→ Collected→ Out for delivery→ Delivered→ Completed

En route = the driver is on the way to the collection point.
Out for delivery = the item has been picked up and the driver is on the way to the delivery address.
Delivered = dropped off, geo-tagged proof photo taken — awaiting the depot's sign-off.
Completed = the depot has reviewed the proof and confirmed the job is done. The driver is then free for the next job.

🏢 For the Main Company

Your screen is “Items Ready for Collection”. You list items on the right and track them on the left.

List an item & generate its QR label

Fill in “What is the item?” (e.g. 2 pallets of bottled water). This is the only required field.

Enter the Recipient company (who receives it at the destination), the Pickup address and the Delivery address. As you type an address, pick a suggestion from the list — this pins the exact spot on the map so the driver can find it.

Add a contact name & phone, choose the depot and the priority (Normal or Urgent).

Tap List item & generate QR. The item gets a reference like REF-2026-000123 and a QR label pops up.

Print & attach the label

On the label pop-up tap 🖨 Print to send it to your printer (including the optional mini label printer — see the printer section). Peel and stick the printed label on the package. You can reopen any label later with the QR label button on the item card.

Track progress

Each item card shows a plain-language status (e.g. “🚚 Joseph is out for delivery — on the way to the drop-off”). Tap Track to open the pickup → delivery map and full timeline, and to view the proof-of-delivery photo once it's delivered. You can Cancel an item while it is still Pending or Assigned.

🏬 For the Depot / Dispatcher

Your screen is “Items Awaiting Collection” with your Driver roster on the right.

Read the roster

Each driver shows a coloured dot: green = available, amber = busy, grey = offline, plus their vehicle. Available drivers are listed first when assigning.

Assign a driver

Find the item in the queue (use the status filter at the top to narrow it down).

Pick a driver from the “— pick an available driver —” dropdown on the card.

Tap Assign (or Reassign to change driver). The driver is notified on their device and the item becomes Assigned.

If the depot can't take an item, tap Reject while it's still pending. Use Details on any card to see its timeline and the pickup → delivery map.

You can reassign right up until the driver has set off and collected the item — handy if a driver becomes unavailable.

Sign the job off

Once the driver has delivered, the item shows Delivered and a ✅ Confirm complete button appears. Tap 📸 Review proof first to check the geo-tagged photo, then tap Confirm complete — this closes the job and frees the driver for the next one.

🚚 For the Driver

Your screen is “My Jobs” (active jobs) with a “Past jobs” section below it. Work each job top to bottom — the right button appears at each stage.

Check where it's going. On any job tap 🗺 Map & details to see the pickup and delivery on a map before you set off, along with the recipient company and contact.

Accept the job. A newly assigned job shows Accept. Tapping it tells the depot you've taken it.

Drive to the collection point. Tap 🛣 Start trip to collection.

Collect the item. At the pickup, tap 📷 Scan to collect and scan the QR label on the package (how to scan). The job becomes Collected.

Drive to the delivery address. Tap 🚚 Start delivery. The status changes to Out for delivery.

Deliver with a photo. At the destination, tap 📸 Deliver with photo. The app asks to use your location and stamps the delivery address, GPS coordinates and time onto the photo. Take a clear picture, add an optional note, and tap Confirm delivery — a photo is required. That's your last step; the depot then signs the job off.

Your past jobs & time taken

The Past jobs list shows your finished deliveries, newest first, with the date completed and how long each one took (from accepting to completing, e.g. ⏱ took 1h 12m). Tap Details on any past job to revisit its timeline and proof photo.

A job you've delivered stays in your list marked “✅ Delivered — waiting for the depot to confirm completion.” until the depot signs it off — no further action needed from you.

🖨️ The mini label printer

The system ships with an optional mini printer for printing the QR code labels that get stuck onto each package. Any printer works, but the mini printer is the quickest for high volumes.

One-time setup

Charge the printer and load a roll of label (sticker) paper.
Turn it on and pair it: Bluetooth printers — pair from your phone/tablet Settings; USB printers — plug into the computer.
In your browser's print dialog, select the mini printer as the destination and set the paper size to match your label roll (commonly 40×30 mm / 50×30 mm). Save it as the default for faster printing.

Printing a label

Open the item and tap QR label (or it appears automatically right after you list the item).
Tap 🖨 Print.
Choose the mini printer and print. The label shows the QR code, the reference number, the item description and the address.
Peel the label and stick it firmly on a flat, visible part of the package.

Stick the label where it's easy to scan — flat surface, not over a seam or shiny tape. If a label is damaged, just reopen it from the item card and print a fresh one; the reference number stays the same.

📷 Scanning the code

Scanning is how the driver confirms collection. The app checks the scanned code against the job's reference number, so an item can't be collected against the wrong job by mistake.

On the job, tap 📷 Scan to collect.
The first time, your browser asks for camera permission — tap Allow.
Point the camera at the QR label on the package. Hold steady ~15–25 cm away until it reads — it confirms automatically.

If the camera won't scan

There's always a manual fallback: in the scan window, type the reference number (the REF-YYYY-NNNNNN printed on the label) into the “…or type the reference number” box and tap Confirm.

Camera not opening? Make sure you opened the app over the secure https:// address and tapped Allow for the camera. On iPhone use Safari; if you blocked the camera earlier, re-enable it in the site settings.

🗺️ Map & location

Every job has a map of its pickup (📦) and delivery (🏁) points, inside the Track / 🗺 Map & details view. The locations come from the addresses the main company picks when listing the item, so the driver can scope out the route before setting off.

Main company: when listing an item, pick each address from the suggestion list as you type. That pins the exact spot — typing a free-form address still works, but picking a suggestion is more accurate.
Drivers: open 🗺 Map & details on a job to see where to collect and where to deliver before you start driving.
Delivery proof: when the driver takes the delivery photo, the app records the GPS location at the drop-off and stamps it onto the photo (see Proof of delivery).

Important: the location stamp and camera need a secure connection. Always use the https://84-8-130-40.sslip.io/dispatch/ address — GPS will not work over a plain http:// link.

📸 Proof of delivery

Every delivery is finished with a photo. When the driver taps 📸 Deliver with photo they take a picture of the delivered item at the destination; the app saves it against the job.

The app asks to use the driver's location and burns a stamp onto the bottom of the photo: the delivery address, the GPS coordinates, the date & time and the reference number. If location is unavailable the photo is still stamped with the address and time.
The photo is attached the moment the job becomes Delivered, and the depot reviews it before signing the job off.
The main company and the dispatcher can view it any time under Track / Details for that item.
Photos are compressed automatically on the phone, so they upload quickly even on mobile data.

Tip for drivers: capture the package in place at the drop-off (on the doorstep, with the door/reception visible) so it's clear where it was left.

🏷️ Status reference

Badge	Meaning	Who set it
Pending	Item listed; waiting for the depot to assign a driver.	Main company
Assigned	A driver has been chosen and notified.	Dispatcher
Accepted	The driver accepted the job.	Driver
En route	Driver is on the way to the collection point.	Driver
Collected	Driver scanned the label and has the item.	Driver (scan)
Out for delivery	Driver is on the way to the delivery address.	Driver
Delivered	Dropped off with a geo-tagged proof photo; awaiting depot sign-off.	Driver (photo)
Completed	Depot reviewed the proof and confirmed the job is done. Final state.	Depot
Rejected	Depot could not take the item.	Dispatcher
Cancelled	Main company cancelled before collection.	Main company

🛠️ Troubleshooting

Problem	Fix
Camera won't open for scanning	Use the `https://` address and tap Allow for the camera. As a fallback, type the reference number manually.
Map is blank for a job	The pickup/delivery points only show if an address was entered (ideally picked from the suggestions). Add or re-pick the addresses when listing the item.
Delivery photo not geo-tagged	Open via `https://` and tap Allow when asked for location. The photo is still saved (stamped with address & time) if location is denied.
“Cannot mark delivered” message	You must Start delivery first; delivery is only possible once the item is out for delivery.
Can't deliver without a photo	A proof photo is required — take/choose one before Confirm delivery.
Label won't print	Check the printer is paired/on with label paper loaded, and selected as the print destination with the right paper size.
I don't see a job I expect	Drivers only see their own assigned jobs; depots only see their own queue. Ask the dispatcher to (re)assign if needed.
App feels stale	Lists refresh every few seconds automatically. Pull to refresh or reopen the app if needed.

🔑 Demo logins

For training and demos (password password for all):

Login	Role
`main@dispatch.local`	Main company admin
`depot@dispatch.local`	Depot dispatcher
`joseph@dispatch.local`	Driver
`grace@dispatch.local`	Driver
`super@dispatch.local`	Platform admin (setup)

Change these passwords (and create real user logins) before going live.