No description
105f169e45
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>
|
||
|---|---|---|
| .claude | ||
| .playwright-mcp | ||
| .vscode | ||
| app | ||
| components | ||
| e2e | ||
| lib | ||
| public | ||
| scripts | ||
| .dockerignore | ||
| .DS_Store | ||
| .env.example | ||
| .gitignore | ||
| api-response.json | ||
| Dockerfile | ||
| import_suppliers.py | ||
| next-env.d.ts | ||
| next.config.js | ||
| nginx.conf | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| screenshot-settings.png | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.tsbuildinfo | ||
1Driver - Mobile Collections App
A standalone mobile-first PWA app for drivers to manage collections in the field.
Features
- Mobile-first design - Optimized for phone use with touch-friendly UI
- PWA support - Install as a standalone app on iOS and Android
- Location tracking - Background location pings at configurable intervals
- Collection list - View assigned collections grouped by supplier
- Map view - See all collection stops on an interactive Leaflet map
- Offline support - Queue actions when offline and sync when connected
- Problem reporting - Report issues with photos and problem types
Screens
- List View - Shows all assigned collections for today/tomorrow, grouped by supplier
- Map View - Shows collection stops on a map with navigation integration
- Settings - Configure location tracking interval, accuracy, and display options
Tech Stack
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- PocketBase SDK
- Leaflet / React Leaflet
- Lucide Icons
PocketBase Integration
The app connects to your PocketBase instance at:
https://pocketbase-gnqc88suy8fqk6wyryjjdpvl.169.239.180.130.sslip.io
Required Collections
- collections - The main collection items (already exists)
- collection_problems - Problem reports
Fields: - collection (relation to collections) - problem_type (select: out_of_stock, partial_stock, quality_issue, wrong_item, other) - description (text) - photo (file) - reported_at (date) - driver_locations - Location tracking data
Fields: - driver (relation to users) - latitude (number) - longitude (number) - accuracy (number, optional) - altitude (number, optional) - speed (number, optional) - heading (number, optional) - timestamp (date) - order_items - Order items (already exists)
- suppliers - Supplier data with lat/lng (already exists)
Development
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
Deployment
The app is configured for static export. Build output goes to the dist/ folder.
For PWA deployment, serve the dist/ folder with any static file server.
iOS Installation
- Open the app URL in Safari
- Tap the Share button
- Tap "Add to Home Screen"
- The app will install as a standalone PWA
Android Installation
- Open the app URL in Chrome
- Tap the menu (3 dots)
- Tap "Add to Home Screen" or "Install App"
Location Permissions
The app requires location permissions for:
- Showing your current position on the map
- Tracking driver locations at set intervals
- Calculating distances to collection stops
Notes
- Location tracking runs in the background while the app is open
- The app uses the PocketBase
userscollection for authentication - Collections are filtered to show only those assigned to the logged-in driver
- Status updates (collected/problem) sync immediately when online