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.
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>
- 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.
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.
- 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.
