No description
Dave
85a40a76bf
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. |
||
|---|---|---|
| .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