Hi there!

\n I'm your cool new webpage. Made with Val Town!\n

UAF Traffic Console

\n \n\n

\n\n

\n Solves · manual handover · unrecorded night jobs · no job ID\n

Job Inbox

Every job enters here and gets a standard ID. Customer Service keys it once at source — the Traffic Planner never retypes it. Night jobs get the same treatment instead of going unrecorded.

\n \n

\n\n

Awaiting planning7Wave 1 · by 11:00

Entered by CS3No planner retyping

Night jobs2Previously unrecorded

Linked to MAWB7Joins back to FreightMaster

\n\n \n\n

\n \n \n \n

Job ID	Source	Customer	Address	Type	Pcs	Kg	Window	Handling	Status

\n\n

Why this screen matters

Today CS uploads to OneDrive, Power Automate emails the planner, and the planner retypes the job into Excel. The same data entered twice, and anything arriving after 17:00 is planned by Export staff with no capacity to record it. One entry point with one job ID removes the double handling and closes the night gap.

\n\n

\n Solves · trips exist only as blank rows · driver pairs as free text\n

Planning Board — Wed 12 Aug 2026

Unassigned jobs on the left, grouped by the planner's four quadrants. Select a job, then a truck lane. Crew is two named people, not the string \"YEO/KUMAR\". Capacity and handling rules are enforced, not decorative.

\n \n \n

\n\n

\n Unassigned\n 7\n

Select a job, then pick a lane. Keyboard: Tab and Enter.

\n\n

The quadrant method, kept — and Clarke-Wright behind it

The planner segments Singapore into four quadrants and builds runs from experience. The board keeps that visible rather than replacing it. Suggest by savings runs the Clarke-Wright savings heuristic (LOG206 SU3) over the unassigned jobs and proposes which existing run each one joins. The planner accepts or overrides, and every override is logged.

\n\n

\n Solves · no trip entity · time windows buried in remarks · unknown capacity\n

Trip TRP-26-0812-05 — West run

The 16-stop Tuas and Jurong run from 12 August as a real trip. Today it exists only as sixteen adjacent spreadsheet rows separated by a blank line.

\n \n \n

\n\n

Stops162 cancelled

Load1,918kg of 3,500

Time windows3Hard constraints

Planned distance98kmQuadrant order

\n\n

\n \n \n \n

Seq	Customer	Address	Type	Pcs	Kg	Window	Note

\n\n \n \n

\n\n

\n Solves · first in, last out · cargohand guesswork at the tailgate\n

Load Plan — YR2880Y

Once the stop order is fixed, the loading order follows from it. Last stop loads first and deepest; first stop sits at the tailgate. The cargohand gets one sheet instead of a mental model.

\n \n

\n\n

Vehicle profile

Entered once per truck and saved. Applies to outsourced vehicles too.

Bed length (m)

Bed width (m)

Bed height (m)

Max payload (kg)

Pallet footprint

Max stack height (m)

Pallet positions on floor10

With stacking20

Tiers that fit1

\n\n

Truck bed — load in this order

Front of bed is against the cab. Load front-first, unload tailgate-first.

\n Loaded first — deepest\n Middle bay\n Loaded last — at the door\n

\n\n

\n \n \n \n

Load	Bay	Customer	Address	Pcs	Kg	Drops at stop

\n\n

What this is and is not

This is sequence-aware bay allocation — reverse stop order across three bays. It gets most of the practical benefit for a cargohand with a trolley.

It is not true 3D bin packing. Optimising the stacking of irregular cargo by volume and weight distribution is an NP-hard problem with dedicated commercial software, and it sits in Phase 3 of the proposal rather than this capstone.

\n\n

\n Solves · no live status · Ops phoning drivers for updates\n

Driver App

What Yeo and Kumar see in the cab. Tap Start, Arrived, Complete on the live stop. Works offline and syncs when signal returns — Tuas and Loyang have dead spots.

\n\n

08:42YR2880Y

Today · 14 stops

Yeo Poh Huat & Kumar · West run

Every tap writes a timestamp. Truck utilisation, real service durations and driver and cargohand OT hours all come from these three taps — none of which exist today.

\n\n

Report exception

Replaces \"CANCELLED\" and \"CANCEL BY MUNIRAH\" typed into a remarks column.

Reason\n

Note

\n \n

Recorded byDriver, on stop

TimestampServer-side on receipt

Ops notifiedImmediately

Customer notifiedIf cancelled

\n\n

Offline queue

Photos and PODs captured without signal are held in the phone's own storage and uploaded automatically when the connection returns. Purged 24 hours after successful upload.

Queued items0

Storage used0 KB

Last sync—

\n \n \n

\n\n

\n Solves · hardcopy POD · driver returns paper to office · Import scans and emails\n

ePOD Capture

Signature, photo of the DO, piece count and an automatic timestamp — captured at the door. Try signing in the box. A single dot will not be accepted.

\n\n

Stop 7 of 14UAF-26-0812-0131

TVS SCS

93 Tuas Bay Drive · Collection

Pieces received — despatched as 2

Carton

Bag

Pallet

\n \n

Customer signature

\n \n \n \n

\n\n

Captured automatically

Job IDUAF-26-0812-0131

MAWB618-52056583

Completed at—

Location stampNot captured

Accuracy—

DriverYeo Poh Huat

CargohandKumar

TruckYR2880Y

SignatureNot captured

DO photoNot captured

Sent to customerPending

Capture rules

The photo is taken inside the app, never through the phone's camera app — otherwise the customer's signed delivery order lands in the driver's personal gallery and syncs to their private cloud.

Documents are downscaled to 2400 px on the long edge in greyscale for OCR legibility; general photos to 1600 px in colour. The location stamp is a single reading at signature, not continuous tracking.

\n\n

\n Solves · control tower blind between despatch and return\n

Live Map — Control Tower

Each truck has its own colour, carried through to its route line and its stop markers. Outsourced vehicles share one grey colour because UAF does not control them.

\n \n \n

\n\n

Vehicles

Attention

\n Basemap © OneMap, Singapore Land Authority.\n Stop coordinates in this prototype are approximate placements pending real geocoding.\n Vehicle positions are last known, not a live feed — see the note below.\n

\n\n

What \"live\" honestly means

A web app cannot track a phone in the background. The moment a driver locks the screen or opens WhatsApp, position updates stop. So the map shows the last known position and how long ago it was reported, never a fake moving dot.

Option 2, named in the proposal as the upgrade: a telematics unit in each truck at roughly $150 plus subscription. Always on, independent of the driver's phone, and it tracks the vehicle rather than the person — which is also the better privacy position.

\n\n

\n Solves · customers phoning Ops, Ops phoning drivers\n

Customer Tracking Link

What the customer sees from a tokenised link with no login. The link expires once the job closes.

\n \n

\n\n

Union Air Freight618-52056583

Out for delivery

4 stops away

\n\n

Privacy by design

Link lifetimeExpires on completion

Driver name shownNever

Driver phone shownNever

Other customers visibleNever

Map visibleOnly when next

Before thatStop count only

Why the map stays hidden until they are next

Showing a live vehicle position to every customer all day exposes the driver's whole route and working pattern to people outside the company. Stop count answers the real question — \"roughly when?\" — without that. The map appears only for the customer actually being served next, which is the same pattern the consumer couriers use.

\n\n

\n Solves · no operational data · no OT evidence · unknown utilisation\n

Operations — Wed 12 Aug 2026

Figures derive from the board and the driver taps. Assign a job on the Planning Board and the counts here move.

\n\n

Truck utilisation — stops per truck

\n Completed\n In progress\n Idle capacity\n

\n\n

Driver & cargohand hours

From job timestamps. Today \"YEO/KUMAR\" is one string — nobody's individual hours can be calculated.

\n \n \n

Person	Role	Truck	Stops	Hours	OT

\n\n

Internal vs outsourced — 2026 to date

Outsourced volume: 259 jobs in January to 419 in July, up 62%. None of those jobs currently carry a driver, time, status or POD.

\n\n

Missing POD

Ages automatically. Every one is an outsourced job — the DO never came back.

\n \n \n \n \n \n \n \n \n

Job	Vendor	Consignee	Age	Status
UAF-26-0812-0203	AKS	NINJA · NJV	6h	Chasing
UAF-26-0812-0207	AKS	ECMS · J&T	6h	Chasing
UAF-26-0811-0188	AKS	NINJA · Shopee	1d	Overdue
UAF-26-0811-0191	VTQ	Redwood · Sungei Kadut	1d	Overdue
UAF-26-0808-0142	AKS	NINJA · AMK	4d	Escalate

\n\n

\n Solves · trucks assigned while in the workshop · planned distance mistaken for actual\n

Fleet

A truck taken off the road disappears from the Planning Board immediately. Distance comes from the odometer, not from the route the planner drew.

\n\n

\n \n \n \n

Truck	Type	Payload	Status	Odo start	Odo end	Actual km	Planned km	Variance	Action

\n\n

Why odometer, not GPS

GPS-derived distance over-reads badly — position jitter while a truck sits at a loading bay adds phantom kilometres all day. Two odometer readings are simpler, more accurate, and match what fuel and servicing are billed against. GPS breadcrumbs are still useful for the shape of the route, which is what the Live Map draws.

The variance column is a KPI in its own right: a consistently large gap between planned and actual means either the plan is unrealistic or the route is not being followed. Both are worth knowing.

\n\n

\n Solves · \"sometimes multiple mawb to the same delivery location are combined??\"\n

Vendor Billing Check

Rate cards currently live as free text in a spreadsheet Notes tab. Held as data, the system prices every outsourced job and flags what does not match the invoice.

\n \n

\n\n

Jobs invoiced190August to date

Flagged4Needs Finance review

Consolidation risk63MAWBs on multiple rows, 2026

Vendor concentration80%AKS share of outsourced

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Date	MAWB	Consignee	Vendor	Basis	Expected	Invoiced	Check
13 Aug	618-52059184	Vinum · Jalan Kilang Timor	Element	3 plts $160 + 45 x $25	$1,285	$1,285	Match
13 Aug	618-52059184	Vinum · same address	Element	Billed as separate trip	$0	$160	Same MAWB, same drop
13 Aug	618-52059184	Vinum · same address	Element	Billed as separate trip	$0	$160	Same MAWB, same drop
13 Aug	618-52059184	SWV · Fishery Port	Element	Additional pickup $80	$80	$80	Match
13 Aug	160-12524842	Premium Global · Clementi Loop	Element	First 3 plts	$160	$160	Match
12 Aug	618-54817873	Zuellig · Changi North Way	Shinyuu	14' $200 + clearance	$380	$380	Match
12 Aug	074-47037163	Woodlands Sunny · Senoko	Shinyuu	14' $200	$200	$280	24' rate on 40 kg
11 Aug	176-62560433	Zuellig · Changi North Way	Shinyuu	14' $200	$200	$200	Match
12 Aug	018-92819031	Ben Line · Jurong Port Rd	Hiap Lian	No rate card on file	—	$340	Unrated vendor

\n\n

The one feature with a hard dollar return

MAWB 618-52059184 appears on four rows for 13 August — three to the same consignee at the same address. In 2026 to date, 63 of 242 reefer MAWBs appear on more than one row, one spanning thirteen. Nobody currently knows whether vendors bill those as one trip or as many. This screen answers that every month, automatically.

\n\n

\n Solves · management has no visibility · no evidence for the make-or-buy decision\n

Reports

Scheduled by default — a weekly operations pack every Monday 07:00 and a monthly management pack on the 1st, both emailed as Excel and PDF. The buttons are for when someone wants it now.

\n\n

The decision this system exists to inform

Outsourced volume grew 62% in six months. The question the board is actually facing is whether to buy a seventh truck or keep paying vendors — and today there is no figure that answers it, because internal jobs carry no cost and outsourced jobs carry no operational record.

\n \n \n \n \n \n \n \n \n

Lane	Jobs Aug	Internal cost/job	Vendor rate/job	Gap	Read
West — Tuas / Jurong	148	$168	$245	-$77	Keep internal
East — Changi / Loyang	96	$142	$190	-$48	Keep internal
North — Woodlands / AMK	71	$203	$188	+$15	Outsource
Central — Pandan / PP	114	$155	$205	-$50	Keep internal
Reefer — all quadrants	66	$312	$268	+$44	Outsource — one reefer truck only

Illustrative figures. Real values need truck capacities, fuel, and the driver hours this system will start capturing — which is exactly the point.

\n\n

Solving the sponsor's five goals first

Every report here traces to one of the five goals in the briefing deck: office productivity, operational data capture, live job and ePOD status, customer status updates, and driver and cargohand tagging. Anything beyond those five is deliberately marked as later.

\n\n

-1 && x.status===\"active\"; })\n .map(function(x){ return x.id; });\n return { ok:false, why: HANDLING[job.h].label + \" needs a \" + CAPABILITY_LABEL[need] +\n \" vehicle. \" + v.id + \" is not. \" + (able.length ? \"Available: \" + able.join(\", \") + \".\" : \"No suitable vehicle is active.\") };\n }\n var load = tripLoad(trip);\n var addKg = typeof job.w === \"number\" ? job.w : 0;\n if (load.kg + addKg > v.kg) {\n return { ok:false, over:true, why: v.id + \" would be \" + Math.round(load.kg + addKg - v.kg) +\n \" kg over its \" + v.kg.toLocaleString() + \" kg payload.\" };\n }\n if (typeof job.w !== \"number\") {\n return { ok:true, warn:\"Weight not recorded — this job is excluded from the load total, so the capacity check is incomplete.\" };\n }\n return { ok:true };\n}\n\nvar navBtns = Array.prototype.slice.call(document.querySelectorAll(\".navbtn\"));\nnavBtns.forEach(function(b){\n b.addEventListener(\"click\", function(){\n navBtns.forEach(function(x){ x.removeAttribute(\"aria-current\"); });\n b.setAttribute(\"aria-current\",\"true\");\n Array.prototype.slice.call(document.querySelectorAll(\".screen\")).forEach(function(s){ s.classList.remove(\"on\"); });\n var target = document.getElementById(\"s-\" + b.dataset.s);\n if (target) target.classList.add(\"on\");\n window.scrollTo(0,0);\n if (state.sel) { state.sel = null; renderQuads(); }\n if (b.dataset.s === \"epod\") sizeCanvas();\n if (b.dataset.s === \"map\") initMap();\n });\n});\n\nfunction renderInbox(){\n var tb = document.getElementById(\"inbox-body\"); tb.innerHTML = \"\";\n state.unassigned.forEach(function(j){\n var tr = el(\"tr\");\n var pill = j.src === \"Night job\" ? \"p-crit\" : (j.src === \"FM import\" ? \"p-idle\" : \"p-acc\");\n var hl = (HANDLING[j.h] || {label:j.h}).label;\n var special = !!(HANDLING[j.h] || {}).needs;\n tr.innerHTML =\n '' + esc(j.id) + '' +\n '' + esc(j.src) + '' +\n '' + esc(j.c) + '' +\n '' + esc(j.a) + '' +\n '' + esc(j.t) + '' +\n '' + esc(j.p) + '' +\n '' + (typeof j.w === \"number\" ? esc(j.w) : 'no weight') + '' +\n '' + esc(j.win) + '' +\n '' + (special ? '' + esc(hl) + '' : esc(hl)) + '' +\n 'Unplanned';\n tb.appendChild(tr);\n });\n document.getElementById(\"k-await\").textContent = state.unassigned.length;\n}\n\ndocument.getElementById(\"newjob\").addEventListener(\"click\", function(){\n var c = document.getElementById(\"entrycard\"); c.hidden = !c.hidden;\n});\ndocument.getElementById(\"canceljob\").addEventListener(\"click\", function(){\n document.getElementById(\"entrycard\").hidden = true;\n});\ndocument.getElementById(\"savejob\").addEventListener(\"click\", function(){\n var pcs = document.getElementById(\"j-pcs\");\n if (!pcs.checkValidity()) { toast(\"Pieces must be a whole number of 1 or more.\", true); pcs.focus(); return; }\n document.getElementById(\"entrycard\").hidden = true;\n toast(\"Job UAF-26-0812-0148 created and queued for geocoding\");\n});\ndocument.getElementById(\"pastejob\").addEventListener(\"click\", function(){\n toast(\"Bulk paste — 24 rows would import from the existing Excel\");\n});\n\nfunction renderQuads(){\n var wrap = document.getElementById(\"quads\"); wrap.innerHTML = \"\";\n [\"East\",\"West\",\"North\",\"Central\"].forEach(function(q){\n var jobs = state.unassigned.filter(function(j){ return j.q === q; });\n if (!jobs.length) return;\n var box = el(\"div\",\"quad\");\n var h = el(\"div\",\"quad-h\");\n h.appendChild(el(\"span\", null, q + \" quadrant\"));\n h.appendChild(el(\"span\", null, jobs.length + \" job\" + (jobs.length>1?\"s\":\"\")));\n box.appendChild(h);\n jobs.forEach(function(j){\n var b = el(\"button\",\"jobcard\"); b.type = \"button\";\n b.setAttribute(\"aria-pressed\", state.sel === j.id ? \"true\" : \"false\");\n var special = !!(HANDLING[j.h] || {}).needs;\n b.innerHTML =\n '' + esc(j.c) + '' +\n '' + esc(j.t.slice(0,4)) + '' +\n '' + esc(j.a) + '' +\n '' + esc(j.id) + '' +\n (special ? '' + esc(HANDLING[j.h].label) + '' : '') +\n (j.src === \"Night job\" ? 'Night' : '') +\n (typeof j.w !== \"number\" ? 'no weight' : '') +\n '' + esc(j.win) + '';\n b.addEventListener(\"click\", function(){\n state.sel = state.sel === j.id ? null : j.id;\n renderQuads();\n document.getElementById(\"selhint\").textContent = state.sel\n ? \"“\" + j.c + \"” selected — now choose a truck lane.\"\n : \"Select a job, then pick a lane. Keyboard: Tab and Enter.\";\n });\n box.appendChild(b);\n });\n wrap.appendChild(box);\n });\n document.getElementById(\"unassigned-n\").textContent = state.unassigned.length;\n document.getElementById(\"ct-board\").textContent = state.unassigned.length;\n document.getElementById(\"ct-inbox\").textContent = state.unassigned.length;\n}\n\nfunction assign(trip, jobIdx){\n var job = state.unassigned[jobIdx];\n var res = checkAssign(trip, job);\n if (!res.ok) {\n if (res.over) {\n var reason = window.prompt(res.why + \"\\n\\nOverriding a payload limit must be justified and is recorded against your name. Type a reason to proceed, or Cancel.\");\n if (!reason || !reason.trim()) { toast(\"Assignment cancelled — \" + res.why, true); return false; }\n toast(\"Override recorded: \" + reason.trim().slice(0,60));\n } else {\n toast(res.why, true);\n document.getElementById(\"selhint\").textContent =\n \"“\" + job.c + \"” is still selected — choose a different lane.\";\n return false;\n }\n }\n trip.stops.push({ c:job.c, a:job.a, p:job.p, w:job.w, t:job.t, h:job.h, win:job.win });\n state.unassigned.splice(jobIdx, 1);\n state.sel = null;\n renderQuads(); renderLanes(); renderDash();\n if (res.warn) toast(job.c + \" assigned to \" + trip.plate + \". \" + res.warn);\n else if (res.ok) toast(job.c + \" assigned to \" + trip.plate + \" — \" + trip.driver);\n return true;\n}\n\nfunction renderLanes(){\n var wrap = document.getElementById(\"lanes\"); wrap.innerHTML = \"\";\n state.trips.forEach(function(t){\n var v = vehicle(t.plate) || { kg:0, status:\"active\", caps:[] };\n var load = tripLoad(t);\n var pct = Math.min(100, Math.round(load.kg / (v.kg || 1) * 100));\n var over = load.kg > v.kg;\n var lane = el(\"div\", \"lane\" + (v.status !== \"active\" ? \" down\" : \"\"));\n\n var h = el(\"button\",\"lane-h\"); h.type = \"button\";\n h.innerHTML =\n '' +\n '' + esc(t.plate) + '' +\n '' + esc(t.driver) + (t.hand ? ' + ' + esc(t.hand) + '' : ' · no cargohand') + '' +\n (v.caps.indexOf(\"TEMP\") > -1 ? 'Temp-controlled' : '') +\n (v.status !== \"active\" ? '' + esc(v.status) + '' : '') +\n '' + esc(t.quad) + '' +\n ' 85 ? \"var(--warn)\" : colourFor(t.plate)) + '\">' +\n '' + Math.round(load.kg).toLocaleString() + ' / ' + v.kg.toLocaleString() + ' kg' +\n (load.unknown ? ' + ' + load.unknown + ' unweighed' : '') + ' · ' + t.stops.length + ' stops' +\n '' + esc(t.id) + '' +\n (over ? 'over assumed payload' : '');\n\n h.addEventListener(\"click\", function(){\n if (!state.sel) { toast(\"Select an unassigned job first.\"); return; }\n var i = -1;\n for (var k=0;k' + (i+1) + '' +\n '' + esc(s.c) + '' + esc(s.a) + '' +\n '' +\n (s.win ? '' + esc(s.win) + '' : '') +\n (s.cx ? '' + esc(s.cx) + '' : '') +\n (s.note ? '' + esc(s.note) + '' : '') +\n (special ? '' + esc(HANDLING[s.h].label) + '' : '') +\n '' +\n '' +\n (s.p != null ? esc(s.p) + (s.unit ? \" \" + esc(s.unit) : \" pcs\") : \"—\") + '
' +\n (typeof s.w === \"number\" ? s.w + \" kg\" : 'no kg') + '';\n body.appendChild(st);\n });\n lane.appendChild(body);\n wrap.appendChild(lane);\n });\n}\n\ndocument.getElementById(\"cw-suggest\").addEventListener(\"click\", function(){\n var lines = [];\n state.unassigned.forEach(function(j){\n var jc = coord(j.a); if (!jc) return;\n var best = null;\n state.trips.forEach(function(t){\n var v = vehicle(t.plate);\n if (!v || v.status !== \"active\") return;\n if (!checkAssign(t, j).ok) return;\n t.stops.forEach(function(s){\n var sc = coord(s.a); if (!sc) return;\n var sav = haversine(DEPOT, jc) + haversine(DEPOT, sc) - haversine(jc, sc);\n if (!best || sav > best.sav) best = { sav: sav, plate: t.plate, near: s.c };\n });\n });\n if (best) lines.push(j.c + \" to \" + best.plate + \" (saving \" + best.sav.toFixed(1) + \" km, near \" + best.near + \")\");\n });\n toast(lines.length\n ? \"Clarke-Wright: \" + lines.length + \" of \" + state.unassigned.length + \" jobs fit an existing run. Best: \" + lines[0]\n : \"No unassigned job fits an active run within capacity and handling rules.\");\n});\n\ndocument.getElementById(\"release\").addEventListener(\"click\", function(){\n var active = state.trips.filter(function(t){ var v = vehicle(t.plate); return v && v.status === \"active\"; }).length;\n toast(active + \" trips released — drivers notified on their phones\");\n});\n\nvar TRIP5 = TRIPS[4];\nvar optOrder = [0,1,12,4,9,14,10,11,2,3,6,7,8,15,5,13];\nvar ilOrder = [0,1,12,2,3,4,9,14,10,6,7,8,11,15,5,13];\n\nfunction renderTrip(){\n var tb = document.getElementById(\"trip-body\"); tb.innerHTML = \"\";\n var order = state.optimised ? optOrder : (state.interleaved ? ilOrder : TRIP5.stops.map(function(_,i){ return i; }));\n order.forEach(function(idx, pos){\n var s = TRIP5.stops[idx]; if (!s) return;\n var tr = el(\"tr\"); if (s.cx) tr.style.opacity = \".5\";\n tr.innerHTML =\n '' + (pos+1) + '' +\n '' + esc(s.c) + '' +\n '' + esc(s.a) + '' +\n '' + esc(s.t) + '' +\n '' + (s.p != null ? esc(s.p) : \"—\") + '' +\n '' + (typeof s.w === \"number\" ? esc(s.w) : 'no kg') + '' +\n '' + (s.win ? '' + esc(s.win) + '' : '—') + '' +\n '' + (s.cx ? '' + esc(s.cx) + ''\n : (s.note ? '' + esc(s.note) + '' : '')) + '';\n tb.appendChild(tr);\n });\n var ld = tripLoad(TRIP5);\n document.getElementById(\"t-load\").textContent = Math.round(ld.kg).toLocaleString();\n document.getElementById(\"t-loadsub\").textContent =\n \"kg of 3,500 · \" + Math.round(ld.kg/3500*100) + \"%\" + (ld.unknown ? \" · \" + ld.unknown + \" unweighed\" : \"\");\n}\n\ndocument.getElementById(\"optimise-seq\").addEventListener(\"click\", function(){\n state.optimised = !state.optimised;\n if (state.optimised) state.interleaved = false;\n renderTrip();\n var k = document.getElementById(\"kpi-dist\");\n document.getElementById(\"ilnote\").hidden = true;\n document.getElementById(\"interleave\").textContent = \"Interleave pickups\";\n if (state.optimised){\n k.querySelector(\".v\").innerHTML = '81km';\n k.querySelector(\".v\").style.color = \"var(--ok)\";\n k.querySelector(\".d\").textContent = \"Optimised · −17 km\";\n document.getElementById(\"optnote\").hidden = false;\n this.textContent = \"Revert to planner order\";\n toast(\"Re-sequenced — 98 km to 81 km, all 3 time windows still met\");\n } else {\n k.querySelector(\".v\").innerHTML = '98km';\n k.querySelector(\".v\").style.color = \"\";\n k.querySelector(\".d\").textContent = \"Quadrant order\";\n document.getElementById(\"optnote\").hidden = true;\n this.textContent = \"Optimise sequence\";\n toast(\"Override logged — planner order restored\");\n }\n});\n\ndocument.getElementById(\"interleave\").addEventListener(\"click\", function(){\n state.interleaved = !state.interleaved;\n if (state.interleaved) {\n state.optimised = false;\n document.getElementById(\"optnote\").hidden = true;\n document.getElementById(\"optimise-seq\").textContent = \"Optimise sequence\";\n }\n renderTrip();\n document.getElementById(\"ilnote\").hidden = !state.interleaved;\n this.textContent = state.interleaved ? \"Back to deliver-then-collect\" : \"Interleave pickups\";\n var k = document.getElementById(\"kpi-dist\");\n k.querySelector(\".v\").innerHTML = (state.interleaved ? '88' : '98') + 'km';\n k.querySelector(\".v\").style.color = state.interleaved ? \"var(--ok)\" : \"\";\n k.querySelector(\".d\").textContent = state.interleaved ? \"Interleaved · −10 km\" : \"Quadrant order\";\n toast(state.interleaved\n ? \"Pickups pulled into the outbound leg where capacity allowed — 98 km to 88 km\"\n : \"Restored the deliver-then-collect pattern used today\");\n});\n\nfunction renderLoad(){\n var live = TRIP5.stops.filter(function(s){ return !s.cx; });\n var order = live.slice().reverse();\n var bays = [\"Front (against cab)\",\"Middle\",\"Tailgate\"];\n var bayCol = [\"var(--accent)\",\"var(--warn)\",\"var(--ok)\"];\n var per = Math.ceil(order.length / 3);\n\n var bed = document.getElementById(\"bed\"); bed.innerHTML = \"\";\n bed.style.gridTemplateColumns = \"repeat(3, 1fr)\";\n bays.forEach(function(name, bi){\n var slice = order.slice(bi*per, (bi+1)*per);\n var d = el(\"div\",\"bay\");\n d.style.borderColor = bayCol[bi];\n d.innerHTML = '' + esc(name) + '' +\n '' + slice.length + ' consignments' +\n '' + esc(slice.map(function(s){ return s.c; }).slice(0,3).join(\", \")) +\n (slice.length > 3 ? \" +\" + (slice.length-3) + \" more\" : \"\") + '';\n bed.appendChild(d);\n });\n\n var tb = document.getElementById(\"load-body\"); tb.innerHTML = \"\";\n order.forEach(function(s, i){\n var bi = Math.min(2, Math.floor(i / per));\n var tr = el(\"tr\");\n tr.innerHTML =\n '' + (i+1) + '' +\n '' + esc(bays[bi].split(\" \")[0]) + '' +\n '' + esc(s.c) + '' +\n '' + esc(s.a) + '' +\n '' + (s.p != null ? esc(s.p) + (s.unit ? \" \" + esc(s.unit) : \"\") : \"—\") + '' +\n '' + (typeof s.w === \"number\" ? esc(s.w) : 'no kg') + '' +\n 'Stop ' + (live.length - i) + '';\n tb.appendChild(tr);\n });\n}\n\nfunction recalcPallets(){\n var L = parseFloat(document.getElementById(\"v-len\").value) || 0;\n var W = parseFloat(document.getElementById(\"v-wid\").value) || 0;\n var H = parseFloat(document.getElementById(\"v-hgt\").value) || 0;\n var stack = parseFloat(document.getElementById(\"v-stack\").value) || 0;\n var dims = document.getElementById(\"v-plt\").value.split(\"x\").map(parseFloat);\n if (!(L>0 && W>0 && dims[0]>0 && dims[1]>0)) {\n document.getElementById(\"v-pos\").textContent = \"—\";\n document.getElementById(\"v-pos2\").textContent = \"—\";\n document.getElementById(\"v-tiers\").textContent = \"—\";\n return;\n }\n var a = Math.floor(L/dims[0]) * Math.floor(W/dims[1]);\n var b = Math.floor(L/dims[1]) * Math.floor(W/dims[0]);\n var floor = Math.max(a,b);\n var tiers = (stack > 0 && H > 0) ? Math.max(1, Math.floor(H/stack)) : 1;\n document.getElementById(\"v-pos\").textContent = floor;\n document.getElementById(\"v-pos2\").textContent = floor * tiers;\n document.getElementById(\"v-tiers\").textContent = tiers + (tiers === 1 ? \" (no stacking fits)\" : \"\");\n}\n[\"v-len\",\"v-wid\",\"v-hgt\",\"v-stack\",\"v-plt\"].forEach(function(id){\n document.getElementById(id).addEventListener(\"input\", recalcPallets);\n document.getElementById(id).addEventListener(\"change\", recalcPallets);\n});\ndocument.getElementById(\"savev\").addEventListener(\"click\", function(){\n var kg = document.getElementById(\"v-kg\");\n if (!kg.checkValidity()) { toast(\"Payload must be between 100 and 30,000 kg.\", true); return; }\n toast(\"Vehicle profile saved for YR2880Y — applies to every future trip\");\n});\ndocument.getElementById(\"printload\").addEventListener(\"click\", function(){ window.print(); });\n\nvar DSTOPS = TRIP5.stops.filter(function(s){ return !s.cx; }).slice(0, 8);\nvar STEPS = [\"Start trip\",\"Arrived at stop\",\"Complete stop\"];\n\nfunction renderDriver(){\n var list = document.getElementById(\"plist\"); list.innerHTML = \"\";\n var cur = Math.floor(state.driverStep / 3);\n DSTOPS.forEach(function(s, i){\n var cls = i < cur ? \"pstop done\" : (i === cur ? \"pstop now\" : \"pstop\");\n var row = el(\"div\", cls);\n var phase = state.driverStep % 3;\n var sub = i < cur ? \"Completed\" : (i === cur ? (phase===0 ? \"Next\" : phase===1 ? \"En route\" : \"On site\") : \"Waiting\");\n row.innerHTML =\n '' + (i < cur ? \"✓\" : (i+1)) + '' +\n '' + esc(s.c) + '' +\n '' + esc(s.a) + '' +\n '' +\n (s.win ? '' + esc(s.win) + '' : '') +\n '' + sub + '';\n list.appendChild(row);\n });\n\n var act = document.getElementById(\"pact\"); act.innerHTML = \"\";\n if (cur >= DSTOPS.length){\n var d = el(\"div\"); d.style.textAlign = \"center\"; d.style.padding = \"6px 0\";\n d.innerHTML = '

Trip complete

' +\n '

8 stops · 8 ePODs · 9h 36m recorded

';\n act.appendChild(d);\n var r = el(\"button\",\"bigbtn ghost\",\"Reset demo\"); r.type=\"button\";\n r.addEventListener(\"click\", function(){ state.driverStep = 0; renderDriver(); });\n act.appendChild(r);\n return;\n }\n var b = el(\"button\",\"bigbtn\" + (state.driverStep % 3 === 2 ? \" ok\" : \"\"), STEPS[state.driverStep % 3]);\n b.type = \"button\";\n b.addEventListener(\"click\", function(){\n var was = state.driverStep % 3;\n state.driverStep++;\n renderDriver();\n if (was === 2) toast(\"Stop completed — timestamp written server-side\");\n else if (was === 1) toast(\"Arrival stamped\");\n else toast(\"Trip started — Ops and customers can now see live status\");\n });\n act.appendChild(b);\n\n if (state.driverStep > 0){\n var u = el(\"button\",\"bigbtn ghost\",\"Undo last tap\"); u.type=\"button\";\n u.addEventListener(\"click\", function(){\n state.driverStep--; renderDriver();\n toast(\"Last tap undone — the correction is recorded, not erased\");\n });\n act.appendChild(u);\n }\n var g = el(\"button\",\"bigbtn ghost\",\"Report exception\"); g.type=\"button\";\n g.addEventListener(\"click\", function(){ toast(\"Exception form — reason, note, photo\"); });\n act.appendChild(g);\n}\n\ndocument.getElementById(\"ex-submit\").addEventListener(\"click\", function(){\n toast(\"Exception recorded: \" + document.getElementById(\"ex-reason\").value);\n});\n\nfunction renderQueue(){\n document.getElementById(\"q-n\").textContent = state.queue.length;\n var kb = state.queue.reduce(function(a,x){ return a + x; }, 0);\n document.getElementById(\"q-kb\").textContent = kb ? (kb/1024).toFixed(1) + \" MB\" : \"0 KB\";\n}\ndocument.getElementById(\"q-add\").addEventListener(\"click\", function(){\n state.queue.push(280 + Math.round(Math.random()*160));\n renderQueue();\n toast(\"Signal lost — ePOD held on the device. Nothing is lost and the driver moves on.\");\n});\ndocument.getElementById(\"q-sync-btn\").addEventListener(\"click\", function(){\n if (!state.queue.length) { toast(\"Nothing queued.\"); return; }\n var n = state.queue.length; state.queue = [];\n renderQueue();\n document.getElementById(\"q-sync\").textContent = new Date().toLocaleTimeString(\"en-SG\",{hour:\"2-digit\",minute:\"2-digit\"});\n toast(n + \" item\" + (n>1?\"s\":\"\") + \" uploaded. Device copies purge automatically 24 hours after upload.\");\n});\n\nvar canvas = document.getElementById(\"sig\");\nvar ctx = canvas.getContext(\"2d\");\nvar drawing = false, sigPts = [], sigLen = 0, last = null;\nvar sigBox = { x0: 1e9, y0: 1e9, x1: -1e9, y1: -1e9 };\n\nfunction sizeCanvas(){\n var r = canvas.getBoundingClientRect();\n if (r.width < 2) return;\n var dpr = window.devicePixelRatio || 1;\n var data = sigPts.length ? canvas.toDataURL() : null;\n canvas.width = Math.round(r.width * dpr);\n canvas.height = Math.round(120 * dpr);\n ctx.setTransform(dpr,0,0,dpr,0,0);\n ctx.lineWidth = 2.2; ctx.lineCap = \"round\"; ctx.lineJoin = \"round\";\n ctx.strokeStyle = getComputedStyle(document.body).color;\n if (data){ var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0,r.width,120); }; img.src = data; }\n}\nfunction pos(e){ var r = canvas.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }\nfunction noteP(p){\n sigPts.push(p);\n if (last) sigLen += Math.sqrt(Math.pow(p.x-last.x,2) + Math.pow(p.y-last.y,2));\n last = p;\n sigBox.x0 = Math.min(sigBox.x0,p.x); sigBox.y0 = Math.min(sigBox.y0,p.y);\n sigBox.x1 = Math.max(sigBox.x1,p.x); sigBox.y1 = Math.max(sigBox.y1,p.y);\n}\ncanvas.addEventListener(\"pointerdown\", function(e){\n drawing = true; last = null; var p = pos(e); noteP(p);\n ctx.beginPath(); ctx.moveTo(p.x,p.y); e.preventDefault();\n});\ncanvas.addEventListener(\"pointermove\", function(e){\n if (!drawing) return; var p = pos(e); noteP(p);\n ctx.lineTo(p.x,p.y); ctx.stroke(); e.preventDefault(); updateSigState();\n});\nwindow.addEventListener(\"pointerup\", function(){ drawing = false; last = null; updateSigState(); });\n\nfunction signatureOk(){\n var w = sigBox.x1 - sigBox.x0, h = sigBox.y1 - sigBox.y0;\n return sigPts.length >= 12 && sigLen >= 140 && w >= 35 && (w + h) >= 55;\n}\nfunction updateSigState(){\n var s = document.getElementById(\"pod-sig\");\n if (!sigPts.length){ s.textContent = \"Not captured\"; s.style.color = \"\"; return; }\n if (signatureOk()){ s.textContent = \"Captured\"; s.style.color = \"var(--ok)\"; }\n else { s.textContent = \"Too brief\"; s.style.color = \"var(--warn)\"; }\n}\ndocument.getElementById(\"sigclear\").addEventListener(\"click\", function(){\n ctx.clearRect(0,0,canvas.width,canvas.height);\n sigPts = []; sigLen = 0; last = null; sigBox = { x0:1e9, y0:1e9, x1:-1e9, y1:-1e9 };\n updateSigState();\n});\ndocument.getElementById(\"sigphoto\").addEventListener(\"click\", function(){\n document.getElementById(\"photostat\").textContent =\n \"DO_618-52056583.jpg · captured in-app · 2400px greyscale · 312 KB\";\n var p = document.getElementById(\"pod-photo\"); p.textContent = \"1 image · 312 KB\"; p.style.color = \"var(--ok)\";\n toast(\"Photo captured inside the app — it never enters the driver's personal gallery\");\n});\ndocument.getElementById(\"siggps\").addEventListener(\"click\", function(){\n var g = document.getElementById(\"pod-gps\"), a = document.getElementById(\"pod-acc\");\n if (!navigator.geolocation){ g.textContent = \"Unavailable\"; toast(\"This device has no geolocation.\", true); return; }\n g.textContent = \"Requesting...\";\n navigator.geolocation.getCurrentPosition(function(p){\n g.textContent = p.coords.latitude.toFixed(4) + \" N, \" + p.coords.longitude.toFixed(4) + \" E\";\n a.textContent = \"+/- \" + Math.round(p.coords.accuracy) + \" m\";\n toast(\"Location stamped at signature — one reading, not continuous tracking\");\n }, function(err){\n g.textContent = \"Unavailable\"; a.textContent = \"—\";\n toast(\"Location unavailable (\" + err.message + \"). The ePOD still completes — a delivery is never blocked on a permission.\", true);\n }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 });\n});\n\nvar DESPATCHED = 2;\nfunction pieceTotal(){\n return [\"p-ctn\",\"p-bag\",\"p-plt\"].reduce(function(a,id){\n var v = document.getElementById(id); return a + (v.value === \"\" ? 0 : Number(v.value));\n }, 0);\n}\nfunction validatePieces(){\n var errEl = document.getElementById(\"p-err\");\n var ids = [\"p-ctn\",\"p-bag\",\"p-plt\"];\n for (var i=0;iMap library did not load. The vehicle list and alerts on the left still work.';\n return;\n }\n state.mapReady = true;\n var map = new maplibregl.Map({\n container: \"map\",\n style: {\n version: 8,\n sources: {\n onemap: {\n type: \"raster\",\n tiles: [\"https://www.onemap.gov.sg/maps/tiles/Default/{z}/{x}/{y}.png\"],\n tileSize: 256,\n attribution: 'OneMap © Singapore Land Authority'\n }\n },\n layers: [\n { id: \"bg\", type: \"background\", paint: { \"background-color\": \"#E7E2DF\" } },\n { id: \"base\", type: \"raster\", source: \"onemap\" }\n ]\n },\n center: [103.82, 1.345],\n zoom: 10.4\n });\n state.map = map;\n map.addControl(new maplibregl.NavigationControl({ showCompass:false }), \"top-right\");\n\n map.on(\"load\", function(){\n var d = el(\"div\");\n d.style.cssText = \"width:15px;height:15px;border-radius:3px;background:#2C1614;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)\";\n new maplibregl.Marker({ element: d }).setLngLat([DEPOT.lng, DEPOT.lat])\n .setPopup(new maplibregl.Popup({ offset: 12 }).setHTML(\"UAF warehouse
9 Airline Road\")).addTo(map);\n\n state.trips.forEach(function(t){\n var col = colourFor(t.plate);\n var pts = [[DEPOT.lng, DEPOT.lat]];\n t.stops.forEach(function(s){\n var c = coord(s.a); if (!c) return;\n pts.push([c.lng, c.lat]);\n var m = el(\"div\");\n m.style.cssText = \"width:11px;height:11px;border-radius:50%;background:\" + col +\n \";border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer\";\n var mk = new maplibregl.Marker({ element: m }).setLngLat([c.lng, c.lat])\n .setPopup(new maplibregl.Popup({ offset: 10 }).setHTML(\n \"\" + esc(s.c) + \"
\" + esc(s.a) + \"
\" +\n esc(t.plate) + \" · \" + esc(s.t) + \"\")).addTo(map);\n mapMarkers.push({ plate: t.plate, marker: mk });\n });\n pts.push([DEPOT.lng, DEPOT.lat]);\n\n map.addSource(\"r-\" + t.plate, { type:\"geojson\",\n data: { type:\"Feature\", properties:{}, geometry:{ type:\"LineString\", coordinates: pts } } });\n map.addLayer({ id:\"r-\" + t.plate, type:\"line\", source:\"r-\" + t.plate,\n paint:{ \"line-color\": col, \"line-width\": 2.4, \"line-opacity\": 0.75 } });\n\n var mins = LASTSEEN[t.plate];\n if (mins != null && pts.length > 2){\n var at = pts[Math.min(pts.length-2, Math.max(1, Math.floor(pts.length/2)))];\n var v = el(\"div\");\n v.style.cssText = \"width:19px;height:19px;border-radius:4px;background:\" + col +\n \";border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;font:600 9px 'IBM Plex Mono',monospace\";\n v.textContent = t.plate.slice(-2);\n var vm = new maplibregl.Marker({ element: v }).setLngLat(at)\n .setPopup(new maplibregl.Popup({ offset: 14 }).setHTML(\n \"\" + esc(t.plate) + \" · \" + esc(t.driver) +\n \"
Last reported \" + mins + \" min ago\" +\n \"
Position is last known, not live\")).addTo(map);\n mapMarkers.push({ plate: t.plate, marker: vm });\n }\n });\n fitAll();\n });\n map.on(\"error\", function(){});\n}\n\nfunction fitAll(){\n if (!state.map) return;\n try {\n var b = new maplibregl.LngLatBounds();\n b.extend([DEPOT.lng, DEPOT.lat]);\n state.trips.forEach(function(t){\n if (state.hidden[t.plate]) return;\n t.stops.forEach(function(s){ var c = coord(s.a); if (c) b.extend([c.lng, c.lat]); });\n });\n state.map.fitBounds(b, { padding: 48, duration: 600 });\n } catch(e){}\n}\nfunction applyVisibility(){\n if (!state.map || !state.mapReady) return;\n state.trips.forEach(function(t){\n var vis = state.hidden[t.plate] ? \"none\" : (state.showRoutes ? \"visible\" : \"none\");\n if (state.map.getLayer(\"r-\" + t.plate)) state.map.setLayoutProperty(\"r-\" + t.plate, \"visibility\", vis);\n });\n mapMarkers.forEach(function(m){\n m.marker.getElement().style.display = state.hidden[m.plate] ? \"none\" : \"\";\n });\n}\ndocument.getElementById(\"fitall\").addEventListener(\"click\", fitAll);\ndocument.getElementById(\"togroutes\").addEventListener(\"click\", function(){\n state.showRoutes = !state.showRoutes; applyVisibility();\n toast(state.showRoutes ? \"Route lines shown\" : \"Route lines hidden\");\n});\n\nfunction renderDrvList(){\n var wrap = document.getElementById(\"drvlist\"); wrap.innerHTML = \"\";\n state.trips.forEach(function(t){\n var v = vehicle(t.plate) || {};\n var done = Math.min(t.stops.length, t.plate === \"YR2880Y\" ? 6 : 2);\n var b = el(\"button\",\"drvrow\"); b.type = \"button\";\n b.setAttribute(\"aria-pressed\", state.hidden[t.plate] ? \"false\" : \"true\");\n var mins = LASTSEEN[t.plate];\n b.innerHTML =\n '' +\n '' + esc(t.plate) + '
' +\n esc(t.driver.split(\" \")[0]) + '' +\n '' + (v.status === \"active\"\n ? (t.stops.length - done) + \" left
\" + (mins != null ? mins + \"m ago\" : \"no signal\")\n : \"off road\") + '';\n b.addEventListener(\"click\", function(){\n state.hidden[t.plate] = !state.hidden[t.plate];\n renderDrvList(); applyVisibility();\n });\n wrap.appendChild(b);\n });\n var o = el(\"div\",\"drvrow\");\n o.innerHTML = '' +\n 'Outsourced
AKS, VTQ, Shinyuu' +\n '16 jobs
no feed';\n wrap.appendChild(o);\n}\n\nfunction renderAlerts(){\n var a = [\n [\"p-crit\",\"YR7440B off road\",\"Brake service. 4 jobs need reassigning.\"],\n [\"p-warn\",\"YQ6754H silent 14 min\",\"Last seen near Woodlands. Possible dead spot.\"],\n [\"p-warn\",\"DELUGE OFFSHORE at risk\",\"Window closes 16:30, currently 4 stops behind.\"],\n [\"p-idle\",\"7 jobs unassigned\",\"Wave 1 closes at 11:00.\"],\n [\"p-warn\",\"YR2880Y stationary 22 min\",\"At Tuas Bay Drive. Long queue or a problem.\"]\n ];\n var w = document.getElementById(\"alerts\"); w.innerHTML = \"\";\n a.forEach(function(x){\n var d = el(\"div\",\"alertrow\");\n d.innerHTML = '!' + esc(x[1]) + '
' +\n '' + esc(x[2]) + '';\n w.appendChild(d);\n });\n}\n\nfunction renderTrack(){\n var n = state.trackStop;\n var head = document.getElementById(\"tk-head\"), sub = document.getElementById(\"tk-sub\"), body = document.getElementById(\"tk-body\");\n if (n > 1){\n head.textContent = \"Out for delivery\";\n sub.textContent = n + \" stops away\";\n body.innerHTML =\n '

' +\n '

' + n + '

' +\n '

stops before yours

' +\n '

Estimated window14:30 - 16:00

' +\n '

Reference618-52056583

' +\n '

Pieces2 cartons

' +\n '

Live position becomes available when you are the next stop.

';\n } else if (n === 1){\n head.textContent = \"You are next\";\n sub.textContent = \"Arriving in about 12 minutes\";\n body.innerHTML =\n '

' +\n '' +\n '' +\n 'Live map · OneMap

' +\n '

Arrivingabout 12 min

' +\n '

Reference618-52056583

' +\n '

Pieces2 cartons

' +\n '

Please have someone available to sign.

';\n } else {\n head.textContent = \"Delivered\";\n sub.textContent = \"Signed at 15:04\";\n body.innerHTML =\n '

' +\n '

✓

' +\n '

Delivered

' +\n '

Signed by C. Lim at 15:04

' +\n '

Proof of deliveryEmailed to you

' +\n '

Pieces received2 cartons

' +\n '

This linkNow expired

';\n }\n}\ndocument.getElementById(\"advance-track\").addEventListener(\"click\", function(){\n state.trackStop = state.trackStop <= 0 ? 4 : state.trackStop - 1;\n renderTrack();\n});\n\nfunction renderDash(){\n var assigned = state.trips.reduce(function(a,t){ return a + t.stops.length; }, 0);\n var unassigned = state.unassigned.length;\n var k = document.getElementById(\"dash-kpis\");\n var rows = [\n [\"Jobs today\", assigned + unassigned + 16, assigned + \" planned · \" + unassigned + \" unassigned · 16 outsourced\", \"\"],\n [\"Completed\", 54, \"87% by 17:00\", \"good\"],\n [\"In progress\", 6, \"Across 3 trucks\", \"\"],\n [\"Missing POD\", 5, \"All outsourced\", \"alert\"],\n [\"Exceptions\", 2, \"Both cancellations\", \"\"],\n [\"Outsourced share\", \"26%\", \"Up from 18% in Jan\", \"\"]\n ];\n k.innerHTML = \"\";\n rows.forEach(function(r){\n var d = el(\"div\",\"kpi\" + (r[3] ? \" \" + r[3] : \"\"));\n d.innerHTML = '' + esc(r[0]) + '' + esc(r[1]) + '' + esc(r[2]) + '';\n k.appendChild(d);\n });\n var hb = document.getElementById(\"hours-body\"); hb.innerHTML = \"\";\n CREW.forEach(function(c){\n var tr = el(\"tr\");\n tr.innerHTML = '' + esc(c[0]) + '' + esc(c[1]) + '' + esc(c[2]) + '' +\n '' + c[3] + '' + c[4].toFixed(1) + '' +\n '' + (c[5] ? c[5].toFixed(1) : \"—\") + '';\n hb.appendChild(tr);\n });\n}\n\nfunction renderUtil(){\n var rows = [\n { p:\"YR2880Y\", done:14, prog:2, cap:18 }, { p:\"YR3821L\", done:7, prog:1, cap:14 },\n { p:\"GBJ9429L\", done:6, prog:0, cap:14 }, { p:\"YQ6754H\", done:5, prog:1, cap:12 },\n { p:\"YR7440B\", done:0, prog:0, cap:14 }, { p:\"YR6567B\", done:2, prog:0, cap:12 }\n ];\n var wrap = document.getElementById(\"util\"); wrap.innerHTML = \"\";\n rows.forEach(function(r){\n var pct = Math.round((r.done + r.prog) / r.cap * 100);\n var row = el(\"div\",\"barrow\");\n row.innerHTML = '' + r.p + '' +\n '' +\n '' +\n '' +\n '' + pct + '%';\n wrap.appendChild(row);\n });\n}\nfunction renderTrend(){\n var m = [[\"Jan\",259],[\"Feb\",290],[\"Mar\",281],[\"Apr\",324],[\"May\",314],[\"Jun\",353],[\"Jul\",419]];\n var wrap = document.getElementById(\"trend\"); wrap.innerHTML = \"\";\n m.forEach(function(x){\n var row = el(\"div\",\"barrow\");\n row.innerHTML = '' + x[0] + '' +\n '' +\n '' + x[1] + '';\n wrap.appendChild(row);\n });\n}\n\nfunction renderFleet(){\n var tb = document.getElementById(\"fleet-body\"); tb.innerHTML = \"\";\n VEHICLES.forEach(function(v){\n var actual = Math.max(0, v.odoEnd - v.odoStart);\n var variance = v.planned ? actual - v.planned : null;\n var tr = el(\"tr\");\n tr.innerHTML =\n '' + esc(v.id) + '' +\n '' + (v.caps.indexOf(\"TEMP\")>-1 ? 'Temp-controlled' : 'General') + '' +\n '' + v.kg.toLocaleString() + ' kg' +\n '' + esc(v.status) + '' +\n (v.reason ? '
' + esc(v.reason) + '' : '') + '' +\n '' + v.odoStart.toLocaleString() + '' +\n '' + v.odoEnd.toLocaleString() + '' +\n '' + actual + '' +\n '' + (v.planned || \"—\") + '' +\n ' 12 ? ' style=\"color:var(--crit);font-weight:600\"' : '') + '>' +\n (variance == null ? \"—\" : (variance > 0 ? \"+\" : \"\") + variance) + '' +\n '';\n var btn = el(\"button\",\"btn sm\", v.status === \"active\" ? \"Take off road\" : \"Return to service\");\n btn.type = \"button\";\n btn.addEventListener(\"click\", function(){\n if (v.status === \"active\"){\n var t = tripFor(v.id);\n if (t && t.stops.length &&\n !window.confirm(v.id + \" has \" + t.stops.length + \" stops assigned today. Taking it off the road will leave them unassigned. Continue?\")) return;\n v.status = \"workshop\"; v.reason = \"Taken off road by planner\";\n } else { v.status = \"active\"; v.reason = null; }\n renderFleet(); renderLanes(); renderDrvList();\n toast(v.id + \" is now \" + (v.status === \"active\" ? \"available for assignment\" : \"off the road and cannot be assigned\"));\n });\n tr.lastChild.appendChild(btn);\n tb.appendChild(tr);\n });\n}\n\nfunction renderReports(){\n var wrap = document.getElementById(\"reportcards\"); wrap.innerHTML = \"\";\n REPORTS.forEach(function(r){\n var d = el(\"div\",\"card pad\");\n d.innerHTML =\n '

' +\n '

' + r[0] + '

' +\n '' + esc(r[1]) + '

' +\n '

' + r[2] + '

' +\n '

Traces to' + r[3] + '

';\n var row = el(\"div\"); row.style.cssText = \"display:flex;gap:8px;flex-wrap:wrap\";\n [\"Excel\",\"PDF\"].forEach(function(fmt){\n var b = el(\"button\",\"btn sm\", \"Generate \" + fmt); b.type=\"button\";\n b.addEventListener(\"click\", function(){ toast(r[0].replace(/&/g,\"&\") + \" — \" + fmt + \" generated and emailed\"); });\n row.appendChild(b);\n });\n d.appendChild(row);\n wrap.appendChild(d);\n });\n}\ndocument.getElementById(\"vendor-export\").addEventListener(\"click\", function(){\n toast(\"Vendor variance exported to Excel for Finance\");\n});\n\nrenderInbox(); renderQuads(); renderLanes(); renderTrip(); renderLoad(); recalcPallets();\nrenderDriver(); renderQueue(); renderDrvList(); renderAlerts(); renderTrack();\nrenderDash(); renderUtil(); renderTrend(); renderFleet(); renderReports();\nsizeCanvas(); updateSigState();\nwindow.addEventListener(\"resize\", function(){ sizeCanvas(); if (state.map) state.map.resize(); });\n\n})();\n",[143],"dad30cf3-8ff3-476c-a0a7-9011cd1ac06b","main.tsx",["D",1787982843727],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[151],"2547af53-aa0f-49f9-be16-1f6d1f94a1d8",["D",1787983431350],[28],"847ad311-7127-4b58-8477-bf6fcf4059fb","favicon.svg","01a04c15-0fde-713d-8573-1a9690cc675b",["D",1787982843727],"",[160],"5e9ff834-e432-4c0a-9e92-60811302e864","README.md","01a04c15-0fde-713d-8573-14bd93752c5c",["D",1787982843727],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| **[`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter)** *(you're here)* | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## Getting started\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.\n",[166],"pulls","branches","forks","envVars",{"_178":62,"_180":62},"connections",{"_178":62,"_179":62},"count","unfilledCount","emptyCount",{"_42":165,"_32":166,"_30":167,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":203,"_13":62,"_33":20,"_34":169,"_24":25,"_140":-5,"_188":204,"_27":205},{"_42":159,"_32":160,"_30":161,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":200,"_13":62,"_33":20,"_34":163,"_24":25,"_140":-5,"_188":201,"_27":202},{"_42":156,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":197,"_13":138,"_33":20,"_34":36,"_24":25,"_140":-5,"_188":198,"_27":199},{"_42":150,"_32":151,"_30":56,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":194,"_13":62,"_33":153,"_34":154,"_24":25,"_140":44,"_188":195,"_27":196},{"_42":142,"_32":143,"_30":144,"_134":-5,"_40":41,"_39":145,"_136":25,"_37":191,"_13":138,"_33":147,"_34":148,"_24":25,"_140":-5,"_188":192,"_27":193},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":187,"_13":138,"_33":20,"_34":139,"_24":25,"_140":-5,"_188":189,"_27":190},["D",1787983042376],"children",[],[132],["D",1787983281827],[],[143],["D",1787982843727],[],[151],["D",1787983431350],[],[28],["D",1787982843727],[],[160],["D",1787982843727],[],[166],["D",1787982843727],{"_96":95,"_103":98},{"_96":95,"_97":98,"_99":98,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_122":243,"_244":245,"_246":247,"_248":25,"_249":25,"_250":25,"_251":58,"_252":-5,"_253":-7,"_254":-7,"_255":62,"_256":25,"_257":25,"_258":-5,"_259":25,"_260":25,"_261":25,"_262":-5},"ENV",{"_214":215,"_216":217,"_218":86,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Hi there!

Job Inbox

New transport job

Why this screen matters

Planning Board — Wed 12 Aug 2026

The quadrant method, kept — and Clarke-Wright behind it

Trip TRP-26-0812-05 — West run

Optimised against the quadrant baseline

Interleaving — the real backhaul gain

Load Plan — YR2880Y

Vehicle profile

Truck bed — load in this order

What this is and is not

Driver App

Report exception

Offline queue

ePOD Capture

Captured automatically

Capture rules

Live Map — Control Tower

Vehicles

Attention

What \"live\" honestly means

Customer Tracking Link

Privacy by design

Why the map stays hidden until they are next

Operations — Wed 12 Aug 2026

Truck utilisation — stops per truck

Driver & cargohand hours

Internal vs outsourced — 2026 to date

Missing POD

Fleet

Why odometer, not GPS

Vendor Billing Check

The one feature with a hard dollar return

Reports

The decision this system exists to inform

Solving the sponsor's five goals first

' + r[0] + '

Diff · v4