The service worker served the cached page first, so a driver ran the
old build until the app was opened twice (Joachim on 2026-10-26 kept
the old one after the invoice-match deploy). Each build now writes its
id to /version.json. On launch a newer live build clears the cached
pages and reloads once; while the app stays open an Update banner
appears instead, so a reload never cuts off a photo or an upload.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
An invoice photo collects nothing, and the green invoice button made it
look done, so lines stayed "assigned" and never reached Collection
Confirm (EWSS and G-Man on 2026-10-26). After an upload the driver now
gets "Collect these items?" with every item ticked. Without the AI match
it opens straight away; with it, once the match sheet closes, listing
only what the match left.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The match never ran on drivers' phones: it was off by default and the
build had no WFDASH address, so photos were stored but nothing collected.
Now it is on for every driver (switched on once for phones saved while
it was off; a later "off" sticks) and falls back to wfdash.apphub.co.za.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
After an invoice photo, exact matches are marked collected (with undo);
uncertain ones are listed. Still off unless enabled in Settings > Beta.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Settings > Beta switch adds an advisory Check invoice button on POs with an
invoice photo. Nothing else in collecting changes.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
compressPhoto skipped HEIC on purpose (Chrome can't decode it), so an
iPhone driver's photos went up as HEIC. WFDASH's AI check can't read
HEIC and most desktop browsers can't show it — Thabo's first two invoice
photos on 2026-10-20 went unread.
Now HEIC/HEIF is always re-encoded to JPEG (downscaled to 2000px) when
the browser can decode it (Safari on iOS/macOS can). Where it can't, the
original is uploaded as before.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Stock pickup photos were dropped: the Collect window ignored the photo
for a pickup, and the PO header's Invoice button didn't show for stock
orders (stock_purchase_items has no file field).
- Photos for a stock order go on the stock purchase
(stock_purchases.additional_attachments, multi-file after WFDASH's
`npm run pb:migrate:stock-photos`), always added with `field+`.
- Invoice button works on stock orders (pages counted from the stock
purchase's invoice_ files); the Collect window uploads a pickup's photo
there too, and warns if it didn't upload.
- poDocs: one PhotoTarget (order line or stock purchase) behind
invoicePhotoTarget / uploadInvoicePage / uploadStockPickupPhoto.
Run the WFDASH stock-photos migration before deploying this.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Removed the Supplier/Invoice/Area and Compact/Detailed switches; the
list is always compact and grouped supplier → PO. Six layouts behind
small icons confused drivers.
- POs start open, so opening a supplier shows its items straight away.
- PO header: the full PO number and item count on line one; the PO /
Invoice / Collect all / flag buttons on line two (bigger, 36px) only
while the PO is open. The number used to be squeezed to "PO2026…" or
hidden by the buttons.
- Collect all / flag-all only show when the PO has more than one item.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Item names wrap and get the full row width; the quantity sits beside
the name and the PO / notes / Collect / Problem buttons move to their
own line underneath, all 44px. Similar bolts truncated to
"M22 x 150 H…" were impossible to tell apart on a phone.
- The PO and notes buttons open a full-width bottom sheet (portalled to
<body>, above the BottomNav) instead of a 256px popover pinned to a
mid-row button, which ran off the left edge of the screen.
- The PO sheet shows status, order and item count, with big Open PO PDF
and Invoice photo buttons (PoActions size="lg").
- Dropped the popover up/down placement measuring and the
click-outside listener; the sheet closes on backdrop, X or Escape.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Confirm Collection locks while saving ("Saving…") and the page drops a
second collect for an item already in flight. Repeat taps on slow data
re-ran the save and re-uploaded the photo (7 identical copies on one
item on 2026-10-16).
- PO headers (and a single-PO supplier's list) get an Invoice button:
photograph the supplier invoice once per PO, then "add pg 2", "pg 3".
Pages go onto one customer line of the PO as invoice-<PO>-p<N>.jpg;
WFDASH Collection Confirm already gathers photos per PO card. The page
count is also kept on the device so it survives lines dropping off.
- PO button opens the PO PDF in one tap (shared buildPoFileUrl in
lib/poDocs.ts, also used by the item detail modal).
- Collect modal says whether the PO's invoice is already uploaded, so
the per-item photo is only for problems with the item.
- Photos now upload at 2000px / q0.8 (was 1200px / q0.7) so small print
on invoices stays readable for the AI checks.
- Supplier header counts and detailed view now include items in PO
grouping mode (they showed 0 items before).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every flagged item rendered the same red triangle and the same
"Problem" pill, whichever problem it was. An out-of-stock line and a
quality complaint look identical on the list, and they need different
follow-ups — one is a phone call to the supplier, the other is a
replacement.
problem_type is a PB *select* on order_items (stock|supplier|driver|
delivery|pricing|other, plus the four values added 2026-10-14) but a
free *text* field on stock_purchase_items, so the label map is
deliberately wider than PROBLEM_TYPES: updateStockCollectionStatus
writes `stock` on its own, and stock rows can carry anything.
Out-of-stock rows also get a red left rail and a light red wash. The
pill stays the signal — colour is never the only thing carrying the
meaning, since a red wash alone is invisible to anyone who can't
distinguish it from the hover state.
Colour is deliberately NOT used to disable Collect. Stock can arrive
without anyone clearing the flag, and a driver standing in front of
the shelf is the best possible source of truth.
Two failure paths were swallowing their errors.
1. handleCollect returned early when the photo upload failed. Status
was already flipped to `collected` at that point, but the early
return skipped `setItems`, leaving a successfully-collected item
on screen still looking un-collected. The driver re-collected it
and re-attempted the same oversized upload — one record picked up
29 failed attempts in a single morning. The item now clears off
the list either way, and a photo failure is a warning toast
telling the driver to add it from the office, not a silent stall.
2. handleProblem logged nothing. PocketBase puts the real reason in
`response.data` keyed by field name; the top-level message is
always the useless "Something went wrong while processing your
request." That is exactly what hid the problem_type mismatch
fixed separately in PB today: the select was missing
out_of_stock/partial_stock/quality_issue/wrong_item, so four of
the five Report Problem buttons 400'd with no visible reason.
Every pickup-photo upload on 2026-10-12 failed: 86 of 86 attempts
came back `400 unexpected EOF`, median 7.6s, max 15.6s. The old
comment here blamed a PocketBase `image/*` mime-detection bug, which
was wrong on both counts — `order_item_attachements` has
mimeTypes=null, so nothing was checking the format. Go's multipart
parser was hitting end-of-body before the declared Content-Length
arrived: a 3-8MB Android camera file truncated in transit on mobile
data.
The office side never hit this because WFDASH re-encodes to
1200px/q70 in attachment-compressor.ts before storing. This adds the
same treatment on the driver side so both produce comparable images
(~150-300KB, sub-second transfer).
compressPhoto() never throws and never returns null — on any decode
failure it hands back the original file. Compression here is an
optimisation, not a correctness requirement, so it must never turn a
photo that might have uploaded fine into a hard error.
When a driver collects or reports a problem on an item, the supplier
group they were working through used to collapse — forcing them to
re-expand it for every single item in the stop.
Root cause was a useCallback dep cycle:
- loadItems had items.length in its dep array
- handleCollect / handleProblem filter the processed item out of state
- items.length decreasing rebuilt loadItems (new identity)
- the consuming useEffect([loadItems]) re-fired loadItems
- loadItems's setExpandedSuppliers(new Set()) wiped every group
Fix: mirror items.length into a useRef so loadItems can read the
current count for the loading-skeleton decision without subscribing
to it. loadItems now only rebuilds when statusFilter changes (mount,
filter chip tap, refresh), so processing an item no longer resets
the expansion state. Drivers can work through every item in a stop
without re-expanding.
Behavior preserved on real refreshes / tab switches / filter changes
— those still reset to collapsed, which matches the new 'flat list
of stops on open' UX.
Previously, reportProblem parked an order item in item_status='problem'
and reportStockProblem only toggled problem_flag on a stock_purchase_items
row that stayed in status='assigned_to_driver'. Both ended up as a
dead-end: the row fell off the driver's Assigned tab but never landed
anywhere the driver (or any other driver) could re-attempt it, and the
stock-pickup variant looked like 'tapped Problem and nothing happened'
because the assigned-status filter didn't exclude the flagged row.
Now both writers release the row back to collection_pool, clear drv_id
and assigned_at, and keep problem_flag=true for operator-side audit.
getPoolItems and getProblemItems are extended to surface
stock_purchase_items alongside order_items so flagged / pooled stock
pickups actually appear in both tabs. Toast wording on the driver side
updated to reflect the pool handoff.
Drivers see a flat list of stops (suppliers / area clusters / POs)
on first load and tap one to drill into its items. Previously every
group auto-expanded on load, which buried the day at a glance under
every item row.
- Remove the three setExpanded*(allIds) auto-expand calls in loadItems
- Empty Set() defaults keep state stable across refreshes and tab switches
- expandAll() toolbar action still available for bulk-open
- SupplierGroup / AreaGroup already render the collapsed preview line
(first 3 items +N more) so the stop's contents stay visible without
expanding
Assigned tab was previously unfiltered by date — every assigned row
in the system was shown, including items scheduled for the future
(e.g. operator pre-assigns for tomorrow, driver sees them today).
Live PB probe (2026-08-11) shows `assigned_at` is set to the
SCHEDULED pickup date, not the moment of assignment: 15 currently
assigned rows split evenly across Aug 18/19/20.
New filter: `assigned_at` must fall within a rolling 2-day window
in driver-local time (yesterday 00:00 → today 23:59:59.999). This
covers today's work plus any carryover from yesterday that didn't
get completed. Items scheduled for tomorrow or later stay hidden
until their day rolls around.
Window boundaries are computed in the driver's local timezone (this
is a browser app, so `new Date()` is local) then converted to UTC
ISO for the PB filter — works as long as driver + operator share a
timezone, which is the case for the current single-region
deployment. Empty-state copy updated so drivers understand why
nothing might show even when they know there are upcoming pickups.
check-pb-schema probe updated to match the new clauses so future
regressions fail the build instead of silently showing everything.
Stock pickups live in stock_purchase_items (status="assigned_to_driver"),
not order_items. Previously getMyAssignedItems() only queried order_items,
so a driver with a stock pickup assigned to them saw nothing in the
Assigned tab or Map.
- getMyAssignedStockItems() fetches stock_purchase_items with the
matching drv_id/status filter and expands purchase.supplier +
stock_item. A toOrderItemFromStock() reshaper puts each row onto
the OrderItem shape so the existing card/modal/map components
render stock pickups unchanged; a kind:'pickup' discriminator
tags them for the write side.
- handleCollect / handleProblem / handleBulkCollect / handleBulkProblem
branch on item.kind to PATCH stock_purchase_items instead of
order_items (status="collected" + quantity_received on collect,
problem_flag + problem_type + problem_notes on problem; mirrors
the order_items quantity-mismatch auto-notes).
- Same merge on app/map/page.tsx so the stock stop lands on the map.
- scripts/check-pb-schema.mjs now covers the stock filter so a future
PB rename is caught at prebuild.
Drivers can now switch the header toggle to 'Invoice' to see stops
bucketed by PO within each supplier. Each PO sub-header is
collapsible and shows the PO number + item count + total qty.
Per-PO bulk actions (visible only when the supplier has more than
one invoice):
- Green 'All' button marks every item under that PO as collected
in one tap (no per-item modal flow, expectedQty is auto-stamped).
- Red flag button flags every item with a generic problem note.
Implementation:
- New 'po' groupMode in app/page.tsx with its own groupedByPO memo
and expandedPOs Set state (auto-expanded on load, controlled by
expandAll/collapseAll alongside supplier expansion).
- SupplierGroup now accepts optional poGroups + handlers and renders
PO sub-headers in compact mode. Each PO is rendered as a flat
list of CompactItemRow subcomponents (extracted to share the row
markup between flat-list and per-PO render paths).
- bulkCollect / bulkProblem helpers in lib/pocketbase.ts loop the
patch; per-row failures are logged and excluded from the count so
one bad row doesn't poison the batch.
Co-authored-by: Orca <help@stably.ai>
Live PB schema probe (2026-08-11) confirmed `driver` and
`item_status="driver_pool"` are not in the schema; referencing
either in a filter hard-400s the whole query. The driver app's
getMyAssignedItems already used the canonical `drv_id` +
`item_status="assigned"` pair, so a defensive OR-fallback against
the missing fields would have BROKEN the query (not rescued it);
that attempt was reverted.
Items 'assigned' by the operator (WFDash) app never reach the
driver's Assigned tab because the operator-side filter still
references those non-existent identifiers. Operator app needs to
filter/write `drv_id` and `item_status="assigned"` instead.
Also restored the dropped OrderItem.expand definition (each
component was accessing item.expand.* unchecked) and widened the
item_status union to include 'invoiced' and 'problem' seen in the
live schema.
Co-authored-by: Orca <help@stably.ai>
Two improvements to the collection flow:
1. Popover clipping under BottomNav (last item in list)
- Root cause: popovers were z-[60] *inside* a parent stacking
context at z-30, so their effective page z-index was 30 — below
BottomNav's z-50. Even if the z-index were right, the popover
extends below the trigger button and could fall below the
viewport on the last item in a long list.
- Add lib/hooks.ts with usePopoverPlacement: measures the
trigger's bottom edge and flips popover direction to "up" when
there isn't ~240px of room below (reserving 80px for BottomNav
+ safe-area inset).
- Bump the article/section/li stacking context from z-30 to z-[80]
when a popover is open so the popover paints above BottomNav
(z-50). Covers both compact-mode SupplierGroup rows and
detailed-mode CollectionItemCard via the existing
onPopoverChange callback.
- For SupplierGroup: hooks live at the top level (record keyed by
item.id) to avoid the Rules of Hooks trap of declaring hooks
inside items.map().
2. Partial collections must be justified
- In CollectModal, when received qty < expected, require EITHER a
reason (dropdown: out of stock / wrong item / quality issue /
damaged / wrong qty packed / other) OR a photo before Confirm
is enabled. Prevents silent partial submissions with no audit
trail.
- The picked reason flows into the auto-generated problem note
so the operator sees "[Reason] driver note" in PB.
Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Orca <help@stably.ai>
- PO (FileText) and Notes (MessageSquare) inline buttons: w-7 h-7 / w-8 h-8
-> w-6 h-6 with size 11 icons and tighter radius, plus narrower right
column gap so the smaller buttons don't sit in stale spacing.
- Popover z-index vs next group: add onPopoverChange callback to
CollectionItemCard so SupplierGroup / AreaGroup can lift their
section from z-10 to z-30 when *any* popover inside is open. Covers
both compact (own popover) and detailed (card popover) modes. Active
<li> in compact mode also lifts to z-30 so popover paints above
sibling rows in the same list.
- Header categories on small screens: stats + toggle row now
flex-wraps so chips don't overflow; added xs (480px) breakpoint
and hid Supplier/Area labels below it to keep tiny phones clean.
Status filter chip row already scrolls horizontally.
Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Orca <help@stably.ai>
- Add ItemDetailModal showing PO document (view/download/share/email) + buyer notes
- Add FileText (PO) and MessageSquare (notes) buttons to compact item list with popovers
- Fix photo upload: append to order_items.order_item_attachements (PB file field)
- Add colored left sidebar stripe per supplier group for visual distinction
- Fix popover z-index so they appear above following cards (overflow-visible + z-50)
- Extend PurchaseOrder type with documents, email_payload, supplier
- Add order_item_attachements and expand.purchase_order to OrderItem
- onShowDetails prop wired through SupplierGroup and AreaGroup
Co-authored-by: Orca <help@stably.ai>
- update dev server port to 4001 in package.json
- remove unused formatCurrency import from SupplierGroup component
- refactor cluster label generation for better multi-supplier display
- overhaul AreaGroup UI to use chip-style supplier tags with updated typography
- expand collapseAll handler to support both supplier and area group modes
- fix driver_locations schema mismatch: use `relation` instead of `driver` per live PB schema
- remove invalid `ready_for_collection` filter that caused silent 400 errors
- add order_item_attachments support for driver pickup photos with proper error handling:
* replace legacy collection_photo field with new collection for multiple per-item files
* upload photos after updating item status to avoid stranding assigned items
* show warning toast if upload fails instead of success confirmation
* update toast messages to reflect photo upload status
- add pre-build schema check script to catch invalid PB field references pre-deploy
- add corresponding npm scripts and prebuild hook for the schema check
- add e2e test scripts for collection and upload flows
- update type definitions and pocketbase SDK helpers for new schema and functionality
- add optional collection_photo field to OrderItem type and backend support for pickup photo uploads
- implement in-memory + localStorage cache for order items to eliminate tab-switch loading skeletons
- update service worker to use stale-while-revalidate for navigation requests to reduce perceived lag
- fix LocationTracker to only activate when logged in and hoist to root layout for persistent tracking
- adjust InstallPrompt positioning to avoid overlapping bottom navigation
- throttle map cluster recomputation to reduce unnecessary work during pan/zoom
- clear cached items on logout to prevent cross-driver data leakage
- Set up class-based dark mode in Tailwind config
- Add pre-hydration dark mode application to avoid theme flash on initial load
- Implement accessible dark mode toggle in settings page
- Update all UI surfaces (headers, bottom nav, maps) with dark mode color schemes
- Add comprehensive global CSS overrides for arbitrary Tailwind classes
- Add brand accent strips to header and bottom nav for consistent visual framing
- Refine map waypoint styling: reduce dot size, update label positioning and styling
- Add standardized item display helpers for consistent labeling across components
- Rework PocketBase data fetching into scoped assigned/pool/problem item queries
- Add proximity-based clustering and AreaGroup component for geographic list grouping
- Sync map page tab state with main collections list using localStorage
- Update all existing components to use new data and display patterns
- Add custom map marker, tooltip, and cluster styling
- rename `supplier` field to `suppliers` in OrderItem interface and PocketBase expand queries
- complete visual rebrand to warm cream (#f2f1ed) and dark brown (#26251e) color palette with custom CSS variables
- add accessibility improvements: skip-to-main content link, focus-visible styles, reduced motion support, and proper ARIA labels
- update all component styling to match new theme, including offline indicator, install prompt, login page, modals, map, bottom nav and global CSS
- standardize status colors: use green for success, red for errors, retain orange (#f54e00) as primary accent CTAs
Add captured Playwright/MCP test artifacts and environment configuration: new .claude/settings.json (grants Playwright plugin, network and WebFetch permissions), multiple .playwright-mcp console logs and page YAMLs, api-response.json, and screenshot-settings.png. Also apply a minor change to app/page.tsx. These files store debugging/test output and test-run configuration to help reproduce and investigate UI/test issues.
Import global Leaflet CSS in the app layout, create a MapErrorBoundary in the map page to catch map load failures and show a retry UI, and wrap the dynamic CollectionMap with that boundary. Adjust CollectionMap by removing the local Leaflet CSS import, cleaning up unused imports/types, and changing the container to absolute/full-bleed styling so the map fills its parent. These changes improve robustness against map loading errors and ensure Leaflet styles are applied app-wide.
Introduce a new SupplierGroup component and group collections by supplier. Add supplier color palette, per-supplier expand/collapse state, compact/detailed view modes, and controls to toggle/expand/collapse groups. Pass supplierColor and compact props to CollectionItemCard to adjust visuals, use useMemo for grouping, and auto-expand suppliers on initial load. Minor UI tweaks: adjust skeleton count/spacing, update stats/controls bar, improve toast styling, and remove some console logs.
Add full PWA support (icons, manifest, service worker, pwa lib and bridge) and introduce install/offline UI. Generate app icons via a new scripts/generate-icons.js and include multiple icon sizes in public/icons; update manifest and layout head meta/preconnect. Revamp global styles (globals.css) with new utilities, animations, spacing for bottom nav, card shadows, skeletons and accessibility tweaks. Polish major screens (login, collections, map, settings) with improved headers, loading states, touch/press feedback, and layout adjustments; add new components (InstallPrompt, OfflineIndicator, PWABridge) and update various components to match new visual/UX patterns. Update Dockerfile to generate icons and use Next.js static export output (/out) for nginx, and bump package setup to support icon generation.
Render a driver's location trail on the map and add controls to toggle it. Changes include: component imports (Polyline, Route), new trail state and interval ref, fetchTrail logic (uses isAuthenticated/getCurrentUser/getDriverTrail) with periodic refresh (every minute), FitTrail component to fit map to the trail, Polyline and start marker rendering, and a Trail toggle button in the UI. Also cleaned up MapBounds (explicit return null), small popup/legend adjustments, and grouped supplier processing remains unchanged. Added getDriverTrail helper in lib/pocketbase.ts to fetch today's driver_locations for a given driver id.
Convert the app from using legacy Collection models to OrderItem-based data. Updated pages (app/page and app/map/page) and all related components (CollectionMap, CollectionItemCard, CollectModal, ProblemModal, LocationTracker) to use OrderItem and new field names (supplier, order, item_status, qty_collected/collected_date, problem_flag/notes, etc.). PocketBase client now queries/updates the order_items collection and maps status/field changes accordingly. Simplified location tracking logic and cleaned up map/navigation UI and Suspense fallbacks. Added import_suppliers.py script for migrating suppliers from NocoDB and included .DS_Store artifacts.
Static export (output: 'export') doesn't support server-side features
like API routes or server-side rendering. For Coolify deployment,
we need Next.js to run as a server.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Added package.json with dependencies for Next.js, React, and Tailwind CSS.
- Created postcss.config.js for Tailwind CSS and autoprefixer integration.
- Added SVG icon for the application in public/icons/icon.svg.
- Created manifest.json for PWA support with app details and icon.
- Configured Tailwind CSS in tailwind.config.js with custom colors and animations.
- Set up TypeScript configuration in tsconfig.json for strict type checking and module resolution.
