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

1. List View - Shows all assigned collections for today/tomorrow, grouped by supplier
2. Map View - Shows collection stops on a map with navigation integration
3. 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

1. collections - The main collection items (already exists)
2. 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)
   

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

4. order_items - Order items (already exists)
5. 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

1. Open the app URL in Safari
2. Tap the Share button
3. Tap "Add to Home Screen"
4. The app will install as a standalone PWA

Android Installation

1. Open the app URL in Chrome
2. Tap the menu (3 dots)
3. 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 users collection for authentication
• Collections are filtered to show only those assigned to the logged-in driver
• Status updates (collected/problem) sync immediately when online