David/WFDASHDRIVER-APP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WFDASHDRIVER-APP/README.md
SJCoetz b738bc7495 feat: initialize project with Next.js, TypeScript, and Tailwind CSS 
- 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.
2026-05-24 21:51:29 +02:00

3 KiB
Raw Permalink Blame History

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