b738bc7495
- 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.
108 lines
3 KiB
Markdown
108 lines
3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|