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.
This commit is contained in:
SJCoetz
commit
b738bc7495
32 changed files with 9321 additions and 0 deletions
11
.dockerignore
Normal file
11
.dockerignore
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
node_modules
|
||||
.next
|
||||
dist
|
||||
.git
|
||||
.gitignore
|
||||
README.md
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
*.log
|
||||
.DS_Store
|
||||
5
.env.example
Normal file
5
.env.example
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# PocketBase Configuration
|
||||
NEXT_PUBLIC_POCKETBASE_URL=https://pocketbase-gnqc88suy8fqk6wyryjjdpvl.169.239.180.130.sslip.io
|
||||
|
||||
# This env var is embedded at build time (NEXT_PUBLIC_ prefix)
|
||||
# Update this if your PocketBase URL changes
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
node_modules/
|
||||
.next/
|
||||
dist/
|
||||
.env
|
||||
14
.vscode/settings.json
vendored
Normal file
14
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": true,
|
||||
".claude": true,
|
||||
".codex": true,
|
||||
".gemini": true,
|
||||
".venv": true,
|
||||
".superdoc": true
|
||||
}
|
||||
}
|
||||
39
Dockerfile
Normal file
39
Dockerfile
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# Multi-stage build for Next.js static export
|
||||
# Stage 1: Build the app
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Build argument for PocketBase URL
|
||||
ARG NEXT_PUBLIC_POCKETBASE_URL
|
||||
ENV NEXT_PUBLIC_POCKETBASE_URL=${NEXT_PUBLIC_POCKETBASE_URL}
|
||||
|
||||
# Build the static export
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Serve with nginx
|
||||
FROM nginx:alpine
|
||||
|
||||
# Remove default nginx static assets
|
||||
RUN rm -rf /usr/share/nginx/html/*
|
||||
|
||||
# Copy built static files from builder
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
|
||||
# Copy custom nginx config
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Health check
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
108
README.md
Normal file
108
README.md
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
# 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
|
||||
128
app/globals.css
Normal file
128
app/globals.css
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-rgb: 245, 245, 245;
|
||||
--primary: 234, 88, 12;
|
||||
--success: 34, 197, 94;
|
||||
--warning: 234, 179, 8;
|
||||
--danger: 239, 68, 68;
|
||||
--info: 6, 182, 212;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: rgb(var(--background-rgb));
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
overscroll-behavior-y: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Mobile viewport height fix */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.h-screen {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safe area insets for notched phones */
|
||||
.safe-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Touch action optimization */
|
||||
.touch-manipulation {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Prevent text selection on buttons */
|
||||
button {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Leaflet container fix */
|
||||
.leaflet-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-pending { @apply bg-gray-100 text-gray-700 border-gray-300; }
|
||||
.status-assigned { @apply bg-blue-100 text-blue-700 border-blue-300; }
|
||||
.status-collected { @apply bg-green-100 text-green-700 border-green-300; }
|
||||
.status-problem { @apply bg-red-100 text-red-700 border-red-300; }
|
||||
|
||||
/* Card shadows */
|
||||
.card-shadow {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.card-shadow-lg {
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Pull to refresh indicator */
|
||||
.pull-indicator {
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
46
app/layout.tsx
Normal file
46
app/layout.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import type { Metadata, Viewport } from "next";
|
||||
import "./globals.css";
|
||||
import { AuthProvider } from "@/components/AuthProvider";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "1Driver - Collections",
|
||||
description: "Mobile driver collection app",
|
||||
manifest: "/manifest.json",
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: "black-translucent",
|
||||
title: "1Driver",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
viewportFit: "cover",
|
||||
themeColor: "#ea580c",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" href="/icons/icon.svg" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="theme-color" content="#ea580c" />
|
||||
</head>
|
||||
<body className="antialiased bg-gray-50 safe-top safe-bottom">
|
||||
<AuthProvider>
|
||||
{children}
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
113
app/login/page.tsx
Normal file
113
app/login/page.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { login } from '@/lib/pocketbase';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Truck, Eye, EyeOff } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await login(email, password);
|
||||
// Auth provider will detect the change and redirect
|
||||
window.location.href = '/';
|
||||
} catch (err) {
|
||||
setError('Invalid email or password');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-orange-500 to-orange-700 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-sm bg-white rounded-2xl shadow-2xl p-6 animate-fade-in">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-orange-500 rounded-2xl mx-auto mb-4 flex items-center justify-center shadow-lg">
|
||||
<Truck size={32} className="text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">1Driver</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">Collections App</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
|
||||
placeholder="driver@example.com"
|
||||
required
|
||||
autoFocus
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full p-3 pr-12 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
|
||||
placeholder="Enter password"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-xl">
|
||||
<p className="text-xs text-red-600 text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
'w-full py-3.5 px-4 rounded-xl text-white font-semibold text-base',
|
||||
'bg-orange-500 active:bg-orange-600 transition-colors',
|
||||
'touch-manipulation flex items-center justify-center gap-2',
|
||||
isLoading && 'opacity-70 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
'Sign In'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
app/map/page.tsx
Normal file
158
app/map/page.tsx
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, Suspense } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Collection } from '@/lib/types';
|
||||
import { useAuth } from '@/components/AuthProvider';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import LocationTracker from '@/components/LocationTracker';
|
||||
import { getAssignedCollections, isAuthenticated } from '@/lib/pocketbase';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { RefreshCw, MapPin, AlertCircle } from 'lucide-react';
|
||||
|
||||
// Dynamic import for Leaflet to avoid SSR issues
|
||||
const CollectionMap = dynamic(() => import('@/components/CollectionMap'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-full flex items-center justify-center bg-gray-100">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
export default function MapPage() {
|
||||
const router = useRouter();
|
||||
const { isLoggedIn, isLoading: authLoading } = useAuth();
|
||||
const [collections, setCollections] = useState<Collection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !isLoggedIn) {
|
||||
router.push('/login/');
|
||||
}
|
||||
}, [isLoggedIn, authLoading, router]);
|
||||
|
||||
const loadCollections = useCallback(async (showLoading = true) => {
|
||||
if (!isAuthenticated()) return;
|
||||
if (showLoading) setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const data = await getAssignedCollections();
|
||||
setCollections(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load collections:', err);
|
||||
setError('Failed to load collections');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadCollections();
|
||||
}, [loadCollections]);
|
||||
|
||||
const handleNavigate = (lat: number, lng: number, name: string) => {
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
let url: string;
|
||||
|
||||
if (isIOS) {
|
||||
url = `maps://maps.apple.com/?q=${encodeURIComponent(name)}&ll=${lat},${lng}`;
|
||||
} else {
|
||||
url = `https://www.google.com/maps?q=${lat},${lng}`;
|
||||
}
|
||||
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-gray-50">
|
||||
<LocationTracker />
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-orange-600 text-white safe-top z-40 shadow-md flex-shrink-0">
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={20} />
|
||||
<h1 className="text-lg font-bold">Collection Map</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="bg-orange-700/50 px-2 py-1 rounded-full text-xs">
|
||||
{collections.length} stops
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsRefreshing(true);
|
||||
loadCollections(false);
|
||||
}}
|
||||
disabled={isRefreshing}
|
||||
className="p-2 rounded-lg bg-orange-700/50 active:bg-orange-700 transition-colors"
|
||||
>
|
||||
<RefreshCw
|
||||
size={18}
|
||||
className={cn(isRefreshing && 'animate-spin')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Map */}
|
||||
<main className="flex-1 relative">
|
||||
{isLoading ? (
|
||||
<div className="h-full flex items-center justify-center bg-gray-100">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="h-full flex flex-col items-center justify-center bg-gray-100 p-4">
|
||||
<AlertCircle size={48} className="text-red-400 mb-3" />
|
||||
<p className="text-gray-600 text-sm mb-4 text-center">{error}</p>
|
||||
<button
|
||||
onClick={() => loadCollections()}
|
||||
className="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
) : collections.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center bg-gray-100 p-4">
|
||||
<MapPin size={48} className="text-gray-300 mb-3" />
|
||||
<p className="text-gray-600 font-medium">No collections to show</p>
|
||||
<p className="text-gray-400 text-sm mt-1">All collections completed!</p>
|
||||
</div>
|
||||
) : (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="h-full flex items-center justify-center bg-gray-100">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<CollectionMap
|
||||
collections={collections}
|
||||
onNavigate={handleNavigate}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
432
app/page.tsx
Normal file
432
app/page.tsx
Normal file
|
|
@ -0,0 +1,432 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Collection } from '@/lib/types';
|
||||
import { useAuth } from '@/components/AuthProvider';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import LocationTracker from '@/components/LocationTracker';
|
||||
import CollectionItemCard from '@/components/CollectionItemCard';
|
||||
import CollectModal from '@/components/CollectModal';
|
||||
import ProblemModal from '@/components/ProblemModal';
|
||||
import {
|
||||
getAssignedCollections,
|
||||
updateCollectionStatus,
|
||||
reportProblem,
|
||||
isAuthenticated,
|
||||
logout,
|
||||
} from '@/lib/pocketbase';
|
||||
import { cn, formatDate } from '@/lib/utils';
|
||||
import {
|
||||
RefreshCw,
|
||||
LogOut,
|
||||
MapPin,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Package,
|
||||
Search,
|
||||
X,
|
||||
Filter,
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function CollectionsPage() {
|
||||
const router = useRouter();
|
||||
const { isLoggedIn, user, isLoading: authLoading } = useAuth();
|
||||
const [collections, setCollections] = useState<Collection[]>([]);
|
||||
const [filteredCollections, setFilteredCollections] = useState<Collection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCollection, setSelectedCollection] = useState<Collection | null>(null);
|
||||
const [showCollectModal, setShowCollectModal] = useState(false);
|
||||
const [showProblemModal, setShowProblemModal] = useState(false);
|
||||
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);
|
||||
const [filter, setFilter] = useState<'all' | 'today' | 'tomorrow'>('all');
|
||||
|
||||
// Redirect if not authenticated
|
||||
useEffect(() => {
|
||||
if (!authLoading && !isLoggedIn) {
|
||||
router.push('/login/');
|
||||
}
|
||||
}, [isLoggedIn, authLoading, router]);
|
||||
|
||||
const loadCollections = useCallback(async (showLoading = true) => {
|
||||
if (!isAuthenticated()) return;
|
||||
|
||||
if (showLoading) setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const data = await getAssignedCollections();
|
||||
setCollections(data);
|
||||
setFilteredCollections(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load collections:', err);
|
||||
setError('Failed to load collections. Please try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadCollections();
|
||||
}, [loadCollections]);
|
||||
|
||||
// Filter collections
|
||||
useEffect(() => {
|
||||
let filtered = collections;
|
||||
|
||||
// Search filter
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter((c) => {
|
||||
const desc = c.is_manual
|
||||
? c.description
|
||||
: c.expand?.order_item?.description || '';
|
||||
const supplier = c.expand?.supplier?.suppliername || '';
|
||||
const orderNum = c.expand?.order_item?.expand?.order?.order_number || '';
|
||||
return (
|
||||
desc.toLowerCase().includes(query) ||
|
||||
supplier.toLowerCase().includes(query) ||
|
||||
orderNum.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Date filter
|
||||
if (filter !== 'all') {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
filtered = filtered.filter((c) => {
|
||||
if (!c.planned_date) return filter === 'today';
|
||||
const planned = new Date(c.planned_date);
|
||||
planned.setHours(0, 0, 0, 0);
|
||||
|
||||
if (filter === 'today') {
|
||||
return planned.getTime() === today.getTime();
|
||||
} else if (filter === 'tomorrow') {
|
||||
return planned.getTime() === tomorrow.getTime();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
setFilteredCollections(filtered);
|
||||
}, [collections, searchQuery, filter]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
await loadCollections(false);
|
||||
};
|
||||
|
||||
const showToast = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
|
||||
setToast({ message, type });
|
||||
setTimeout(() => setToast(null), 3000);
|
||||
};
|
||||
|
||||
const handleCollect = async (collection: Collection, receivedQty: number, notes: string) => {
|
||||
try {
|
||||
await updateCollectionStatus(collection.id, 'collected', {
|
||||
received_qty: receivedQty,
|
||||
notes,
|
||||
actual_date: new Date().toISOString(),
|
||||
});
|
||||
|
||||
// Remove from list
|
||||
setCollections((prev) => prev.filter((c) => c.id !== collection.id));
|
||||
setShowCollectModal(false);
|
||||
showToast('Collection completed successfully');
|
||||
} catch (err) {
|
||||
console.error('Failed to collect:', err);
|
||||
showToast('Failed to update collection', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleProblem = async (
|
||||
collection: Collection,
|
||||
problemType: string,
|
||||
description: string,
|
||||
photo?: File
|
||||
) => {
|
||||
try {
|
||||
await reportProblem(collection.id, problemType, description);
|
||||
setCollections((prev) => prev.filter((c) => c.id !== collection.id));
|
||||
setShowProblemModal(false);
|
||||
showToast('Problem reported successfully', 'warning');
|
||||
} catch (err) {
|
||||
console.error('Failed to report problem:', err);
|
||||
showToast('Failed to report problem', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleNavigate = (lat: number, lng: number, name: string) => {
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
let url: string;
|
||||
|
||||
if (isIOS) {
|
||||
url = `maps://maps.apple.com/?q=${encodeURIComponent(name)}&ll=${lat},${lng}`;
|
||||
} else {
|
||||
url = `https://www.google.com/maps?q=${lat},${lng}`;
|
||||
}
|
||||
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
// Group by supplier
|
||||
const groupedBySupplier = filteredCollections.reduce((acc, collection) => {
|
||||
const supplier = collection.expand?.supplier;
|
||||
if (!supplier) return acc;
|
||||
|
||||
const key = supplier.id;
|
||||
if (!acc[key]) {
|
||||
acc[key] = { supplier, items: [] };
|
||||
}
|
||||
acc[key].items.push(collection);
|
||||
return acc;
|
||||
}, {} as Record<string, { supplier: NonNullable<Collection['expand']>['supplier']; items: Collection[] }>);
|
||||
|
||||
const groupedArray = Object.values(groupedBySupplier).sort((a, b) =>
|
||||
(a.supplier?.suppliername || '').localeCompare(b.supplier?.suppliername || '')
|
||||
);
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pb-20">
|
||||
<LocationTracker />
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-orange-600 text-white safe-top sticky top-0 z-40 shadow-md">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold">Collections</h1>
|
||||
<p className="text-xs text-orange-100">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="p-2 rounded-lg bg-orange-700/50 active:bg-orange-700 transition-colors"
|
||||
>
|
||||
<RefreshCw
|
||||
size={18}
|
||||
className={cn(isRefreshing && 'animate-spin')}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
}}
|
||||
className="p-2 rounded-lg bg-orange-700/50 active:bg-orange-700 transition-colors"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="px-4 pb-3">
|
||||
<div className="relative">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search collections..."
|
||||
className="w-full pl-9 pr-9 py-2 bg-white/10 border border-white/20 rounded-xl text-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-white/60"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="px-4 pb-2 flex gap-2 overflow-x-auto no-scrollbar">
|
||||
{[
|
||||
{ key: 'all' as const, label: 'All', icon: Package },
|
||||
{ key: 'today' as const, label: 'Today', icon: Clock },
|
||||
{ key: 'tomorrow' as const, label: 'Tomorrow', icon: Clock },
|
||||
].map(({ key, label, icon: Icon }) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setFilter(key)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors',
|
||||
filter === key
|
||||
? 'bg-white text-orange-600'
|
||||
: 'bg-orange-700/50 text-orange-100'
|
||||
)}
|
||||
>
|
||||
<Icon size={12} />
|
||||
{label}
|
||||
<span className="bg-orange-800/50 px-1.5 py-0.5 rounded-full text-[10px]">
|
||||
{key === 'all'
|
||||
? collections.length
|
||||
: key === 'today'
|
||||
? collections.filter((c) => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const planned = c.planned_date ? new Date(c.planned_date) : today;
|
||||
planned.setHours(0, 0, 0, 0);
|
||||
return planned.getTime() === today.getTime();
|
||||
}).length
|
||||
: collections.filter((c) => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const planned = c.planned_date ? new Date(c.planned_date) : null;
|
||||
if (!planned) return false;
|
||||
planned.setHours(0, 0, 0, 0);
|
||||
return planned.getTime() === tomorrow.getTime();
|
||||
}).length}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main className="p-4">
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-xl p-4 card-shadow">
|
||||
<div className="skeleton h-4 w-3/4 rounded mb-2" />
|
||||
<div className="skeleton h-3 w-1/2 rounded mb-1" />
|
||||
<div className="skeleton h-3 w-2/3 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-12">
|
||||
<AlertCircle size={48} className="mx-auto text-red-400 mb-3" />
|
||||
<p className="text-gray-600 text-sm mb-4">{error}</p>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium active:bg-orange-600"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
) : groupedArray.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<CheckCircle2 size={48} className="mx-auto text-green-400 mb-3" />
|
||||
<p className="text-gray-600 font-medium">All caught up!</p>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
{searchQuery
|
||||
? 'No collections match your search'
|
||||
: 'No assigned collections for this period'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{groupedArray.map(({ supplier, items }) => (
|
||||
<div key={supplier!.id}>
|
||||
{/* Supplier Header */}
|
||||
<div className="flex items-center gap-2 mb-2 px-1">
|
||||
<MapPin size={14} className="text-orange-500" />
|
||||
<h2 className="font-semibold text-sm text-gray-800">
|
||||
{supplier!.suppliername}
|
||||
</h2>
|
||||
<span className="bg-orange-100 text-orange-700 text-[10px] px-2 py-0.5 rounded-full font-medium">
|
||||
{items.length}
|
||||
</span>
|
||||
{supplier!.address && (
|
||||
<span className="text-xs text-gray-400 truncate flex-1 text-right">
|
||||
{supplier!.address}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="space-y-2">
|
||||
{items.map((collection) => (
|
||||
<CollectionItemCard
|
||||
key={collection.id}
|
||||
collection={collection}
|
||||
onCollect={(c) => {
|
||||
setSelectedCollection(c);
|
||||
setShowCollectModal(true);
|
||||
}}
|
||||
onProblem={(c) => {
|
||||
setSelectedCollection(c);
|
||||
setShowProblemModal(true);
|
||||
}}
|
||||
onNavigate={handleNavigate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Modals */}
|
||||
<CollectModal
|
||||
collection={selectedCollection}
|
||||
isOpen={showCollectModal}
|
||||
onClose={() => {
|
||||
setShowCollectModal(false);
|
||||
setSelectedCollection(null);
|
||||
}}
|
||||
onConfirm={handleCollect}
|
||||
/>
|
||||
|
||||
<ProblemModal
|
||||
collection={selectedCollection}
|
||||
isOpen={showProblemModal}
|
||||
onClose={() => {
|
||||
setShowProblemModal(false);
|
||||
setSelectedCollection(null);
|
||||
}}
|
||||
onConfirm={handleProblem}
|
||||
/>
|
||||
|
||||
{/* Toast */}
|
||||
{toast && (
|
||||
<div className="fixed top-4 left-4 right-4 z-[60] animate-fade-in">
|
||||
<div
|
||||
className={cn(
|
||||
'px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white text-center',
|
||||
toast.type === 'success' && 'bg-green-500',
|
||||
toast.type === 'error' && 'bg-red-500',
|
||||
toast.type === 'warning' && 'bg-amber-500'
|
||||
)}
|
||||
>
|
||||
{toast.message}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
362
app/settings/page.tsx
Normal file
362
app/settings/page.tsx
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/components/AuthProvider';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import { getSettings, saveSettings, logout } from '@/lib/pocketbase';
|
||||
import { AppSettings, DEFAULT_SETTINGS } from '@/lib/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Settings,
|
||||
Clock,
|
||||
Crosshair,
|
||||
Moon,
|
||||
Type,
|
||||
WifiOff,
|
||||
LogOut,
|
||||
ChevronRight,
|
||||
Save,
|
||||
RotateCcw,
|
||||
Info,
|
||||
} from 'lucide-react';
|
||||
|
||||
const INTERVAL_OPTIONS = [
|
||||
{ value: 30, label: '30 seconds' },
|
||||
{ value: 60, label: '1 minute' },
|
||||
{ value: 120, label: '2 minutes' },
|
||||
{ value: 300, label: '5 minutes' },
|
||||
{ value: 600, label: '10 minutes' },
|
||||
];
|
||||
|
||||
const ACCURACY_OPTIONS = [
|
||||
{ value: 10, label: '10m (High)' },
|
||||
{ value: 50, label: '50m (Balanced)' },
|
||||
{ value: 100, label: '100m (Battery)' },
|
||||
{ value: 500, label: '500m (Low)' },
|
||||
];
|
||||
|
||||
export default function SettingsPage() {
|
||||
const router = useRouter();
|
||||
const { isLoggedIn, user, isLoading: authLoading } = useAuth();
|
||||
const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !isLoggedIn) {
|
||||
router.push('/login/');
|
||||
}
|
||||
}, [isLoggedIn, authLoading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
setSettings(getSettings());
|
||||
}, []);
|
||||
|
||||
const updateSetting = <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => {
|
||||
const updated = { ...settings, [key]: value };
|
||||
setSettings(updated);
|
||||
saveSettings({ [key]: value });
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
};
|
||||
|
||||
const resetSettings = () => {
|
||||
if (confirm('Reset all settings to defaults?')) {
|
||||
setSettings(DEFAULT_SETTINGS);
|
||||
saveSettings(DEFAULT_SETTINGS);
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pb-20">
|
||||
{/* Header */}
|
||||
<header className="bg-gray-900 text-white safe-top">
|
||||
<div className="px-4 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center">
|
||||
<Settings size={20} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold">Settings</h1>
|
||||
<p className="text-xs text-gray-400">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="p-4 space-y-6">
|
||||
{/* Location Settings */}
|
||||
<section>
|
||||
<div className="flex items-center gap-2 mb-3 px-1">
|
||||
<Crosshair size={16} className="text-orange-500" />
|
||||
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
|
||||
Location Tracking
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl card-shadow overflow-hidden">
|
||||
{/* Update Interval */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={16} className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Update Interval
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-orange-600 font-medium bg-orange-50 px-2 py-1 rounded-full">
|
||||
{settings.locationInterval}s
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{INTERVAL_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => updateSetting('locationInterval', option.value)}
|
||||
className={cn(
|
||||
'py-2 px-2 rounded-lg text-xs font-medium transition-all',
|
||||
'touch-manipulation',
|
||||
settings.locationInterval === option.value
|
||||
? 'bg-orange-500 text-white shadow-sm'
|
||||
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-400 mt-2">
|
||||
How often your location is sent to the server
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Minimum Accuracy */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Crosshair size={16} className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Minimum Accuracy
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-orange-600 font-medium bg-orange-50 px-2 py-1 rounded-full">
|
||||
{settings.minimumAccuracy}m
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{ACCURACY_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => updateSetting('minimumAccuracy', option.value)}
|
||||
className={cn(
|
||||
'py-2 px-2 rounded-lg text-xs font-medium transition-all',
|
||||
'touch-manipulation',
|
||||
settings.minimumAccuracy === option.value
|
||||
? 'bg-orange-500 text-white shadow-sm'
|
||||
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-400 mt-2">
|
||||
Skip location updates with worse accuracy
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* High Accuracy Toggle */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Crosshair size={16} className="text-gray-400" />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-700 block">
|
||||
High Accuracy Mode
|
||||
</span>
|
||||
<span className="text-[10px] text-gray-400">
|
||||
Uses GPS for better precision
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() =>
|
||||
updateSetting('enableHighAccuracy', !settings.enableHighAccuracy)
|
||||
}
|
||||
className={cn(
|
||||
'w-12 h-7 rounded-full transition-colors relative',
|
||||
settings.enableHighAccuracy ? 'bg-orange-500' : 'bg-gray-300'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-0.5 w-6 h-6 bg-white rounded-full shadow-md transition-transform',
|
||||
settings.enableHighAccuracy ? 'translate-x-5' : 'translate-x-0.5'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Display Settings */}
|
||||
<section>
|
||||
<div className="flex items-center gap-2 mb-3 px-1">
|
||||
<Type size={16} className="text-orange-500" />
|
||||
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
|
||||
Display
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl card-shadow overflow-hidden">
|
||||
{/* Font Size */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Type size={16} className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-700">Font Size</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{(['small', 'normal', 'large'] as const).map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => updateSetting('fontSize', size)}
|
||||
className={cn(
|
||||
'flex-1 py-2.5 rounded-lg text-sm font-medium transition-all',
|
||||
'touch-manipulation capitalize',
|
||||
settings.fontSize === size
|
||||
? 'bg-orange-500 text-white shadow-sm'
|
||||
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
{size === 'small' && (
|
||||
<span className="text-xs">A</span>
|
||||
)}
|
||||
{size === 'normal' && (
|
||||
<span className="text-sm">A</span>
|
||||
)}
|
||||
{size === 'large' && (
|
||||
<span className="text-lg">A</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Offline Mode */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<WifiOff size={16} className="text-gray-400" />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-700 block">
|
||||
Offline Queue
|
||||
</span>
|
||||
<span className="text-[10px] text-gray-400">
|
||||
Queue actions when offline
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() =>
|
||||
updateSetting('offlineMode', !settings.offlineMode)
|
||||
}
|
||||
className={cn(
|
||||
'w-12 h-7 rounded-full transition-colors relative',
|
||||
settings.offlineMode ? 'bg-orange-500' : 'bg-gray-300'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-0.5 w-6 h-6 bg-white rounded-full shadow-md transition-transform',
|
||||
settings.offlineMode ? 'translate-x-5' : 'translate-x-0.5'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About */}
|
||||
<section>
|
||||
<div className="flex items-center gap-2 mb-3 px-1">
|
||||
<Info size={16} className="text-orange-500" />
|
||||
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
|
||||
About
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl card-shadow overflow-hidden">
|
||||
<div className="p-4 text-center">
|
||||
<h3 className="text-lg font-bold text-gray-800">1Driver</h3>
|
||||
<p className="text-xs text-gray-400 mt-1">Version 1.0.0</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
Collections Management App
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={resetSettings}
|
||||
className={cn(
|
||||
'w-full py-3 px-4 rounded-xl text-sm font-medium',
|
||||
'bg-gray-200 text-gray-700 active:bg-gray-300',
|
||||
'touch-manipulation flex items-center justify-center gap-2'
|
||||
)}
|
||||
>
|
||||
<RotateCcw size={16} />
|
||||
Reset to Defaults
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm('Are you sure you want to sign out?')) {
|
||||
logout();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'w-full py-3.5 px-4 rounded-xl text-white font-semibold text-base',
|
||||
'bg-red-500 active:bg-red-600 transition-colors',
|
||||
'touch-manipulation flex items-center justify-center gap-2'
|
||||
)}
|
||||
>
|
||||
<LogOut size={18} />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Saved Toast */}
|
||||
{saved && (
|
||||
<div className="fixed top-4 left-4 right-4 z-[60] animate-fade-in">
|
||||
<div className="px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white text-center bg-green-500 flex items-center justify-center gap-2">
|
||||
<Save size={16} />
|
||||
Settings saved
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
components/AuthProvider.tsx
Normal file
52
components/AuthProvider.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import { pb, getCurrentUser, isAuthenticated } from '@/lib/pocketbase';
|
||||
|
||||
interface AuthContextType {
|
||||
isLoggedIn: boolean;
|
||||
user: ReturnType<typeof getCurrentUser>;
|
||||
isLoading: boolean;
|
||||
refresh: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
isLoggedIn: false,
|
||||
user: null,
|
||||
isLoading: true,
|
||||
refresh: () => {},
|
||||
});
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [user, setUser] = useState<ReturnType<typeof getCurrentUser>>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const refresh = () => {
|
||||
const valid = isAuthenticated();
|
||||
setIsLoggedIn(valid);
|
||||
setUser(getCurrentUser());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
setIsLoading(false);
|
||||
|
||||
// Listen for auth store changes
|
||||
const unsubscribe = pb.authStore.onChange(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isLoggedIn, user, isLoading, refresh }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
56
components/BottomNav.tsx
Normal file
56
components/BottomNav.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { List, Map, Settings } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: 'List', icon: List },
|
||||
{ href: '/map/', label: 'Map', icon: Map },
|
||||
{ href: '/settings/', label: 'Settings', icon: Settings },
|
||||
];
|
||||
|
||||
export default function BottomNav() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 safe-bottom shadow-lg">
|
||||
<div className="flex justify-around items-center h-16">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center flex-1 h-full touch-manipulation',
|
||||
'active:scale-95 transition-transform duration-150',
|
||||
isActive ? 'text-primary-600' : 'text-gray-500'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
size={22}
|
||||
strokeWidth={isActive ? 2.5 : 2}
|
||||
className={cn(
|
||||
'transition-colors duration-200',
|
||||
isActive && 'drop-shadow-sm'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] mt-0.5 font-medium transition-colors duration-200',
|
||||
isActive ? 'text-primary-600' : 'text-gray-400'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
149
components/CollectModal.tsx
Normal file
149
components/CollectModal.tsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Collection } from '@/lib/types';
|
||||
import { cn, formatCurrency } from '@/lib/utils';
|
||||
import { X, Minus, Plus } from 'lucide-react';
|
||||
|
||||
interface CollectModalProps {
|
||||
collection: Collection | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (collection: Collection, receivedQty: number, notes: string) => void;
|
||||
}
|
||||
|
||||
export default function CollectModal({
|
||||
collection,
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: CollectModalProps) {
|
||||
const [receivedQty, setReceivedQty] = useState<string>('');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
if (!isOpen || !collection) return null;
|
||||
|
||||
const expectedQty = collection.quantity || collection.expand?.order_item?.quantity || 0;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
const qty = parseFloat(receivedQty);
|
||||
if (isNaN(qty) || qty <= 0) {
|
||||
setError('Please enter a valid quantity');
|
||||
return;
|
||||
}
|
||||
|
||||
onConfirm(collection, qty, notes);
|
||||
setReceivedQty('');
|
||||
setNotes('');
|
||||
setError('');
|
||||
};
|
||||
|
||||
const adjustQty = (delta: number) => {
|
||||
const current = parseFloat(receivedQty) || 0;
|
||||
const newQty = Math.max(0, current + delta);
|
||||
setReceivedQty(newQty.toString());
|
||||
};
|
||||
|
||||
const isPartial = parseFloat(receivedQty) > 0 && parseFloat(receivedQty) < expectedQty;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative bg-white rounded-t-2xl sm:rounded-2xl w-full max-w-md p-6 animate-slide-up">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-bold">Collect Item</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{collection.is_manual
|
||||
? collection.description
|
||||
: collection.expand?.order_item?.description || 'Unknown item'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Expected: {expectedQty} {collection.unit || collection.expand?.order_item?.unit || 'units'}
|
||||
</p>
|
||||
{collection.expand?.order_item?.selling_price && (
|
||||
<p className="text-xs text-green-600 mt-1">
|
||||
Unit price: {formatCurrency(collection.expand.order_item.selling_price)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Received Quantity *
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => adjustQty(-1)}
|
||||
className="p-3 rounded-lg bg-gray-100 active:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Minus size={18} />
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
value={receivedQty}
|
||||
onChange={(e) => setReceivedQty(e.target.value)}
|
||||
className="flex-1 p-3 text-center text-lg font-semibold border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
placeholder="0.00"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => adjustQty(1)}
|
||||
className="p-3 rounded-lg bg-gray-100 active:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{isPartial && (
|
||||
<p className="text-xs text-amber-600 mt-1">
|
||||
Partial collection: {receivedQty} of {expectedQty} units
|
||||
</p>
|
||||
)}
|
||||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="w-full p-3 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent resize-none"
|
||||
rows={2}
|
||||
placeholder="Add any notes..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={cn(
|
||||
'w-full py-3.5 px-4 rounded-xl text-white font-semibold text-base',
|
||||
'bg-green-500 active:bg-green-600 transition-colors',
|
||||
'touch-manipulation flex items-center justify-center gap-2'
|
||||
)}
|
||||
>
|
||||
Confirm Collection
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
240
components/CollectionItemCard.tsx
Normal file
240
components/CollectionItemCard.tsx
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Collection } from '@/lib/types';
|
||||
import { cn, formatDate, formatCurrency } from '@/lib/utils';
|
||||
import {
|
||||
Check,
|
||||
AlertTriangle,
|
||||
Navigation,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Package,
|
||||
Wrench,
|
||||
Hammer,
|
||||
ShoppingCart,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface CollectionItemProps {
|
||||
collection: Collection;
|
||||
onCollect: (collection: Collection) => void;
|
||||
onProblem: (collection: Collection) => void;
|
||||
onNavigate: (lat: number, lng: number, name: string) => void;
|
||||
}
|
||||
|
||||
function getItemType(collection: Collection): {
|
||||
type: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
label: string;
|
||||
} {
|
||||
if (collection.status === 'problem') {
|
||||
return {
|
||||
type: 'problem',
|
||||
icon: <AlertTriangle size={16} />,
|
||||
color: 'text-red-500',
|
||||
label: 'Problem',
|
||||
};
|
||||
}
|
||||
|
||||
const orderNumber = collection.expand?.order_item?.expand?.order?.order_number || '';
|
||||
const desc = collection.description || collection.expand?.order_item?.description || '';
|
||||
|
||||
if (orderNumber.toLowerCase().includes('breakdown')) {
|
||||
return {
|
||||
type: 'breakdown',
|
||||
icon: <Hammer size={16} />,
|
||||
color: 'text-orange-600',
|
||||
label: 'Breakdown',
|
||||
};
|
||||
}
|
||||
|
||||
if (orderNumber.toLowerCase().includes('repair')) {
|
||||
return {
|
||||
type: 'repair',
|
||||
icon: <Wrench size={16} />,
|
||||
color: 'text-amber-500',
|
||||
label: 'Repair',
|
||||
};
|
||||
}
|
||||
|
||||
if (collection.is_manual) {
|
||||
return {
|
||||
type: 'manual',
|
||||
icon: <Package size={16} />,
|
||||
color: 'text-purple-500',
|
||||
label: 'Manual',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
type: 'normal',
|
||||
icon: <ShoppingCart size={16} />,
|
||||
color: 'text-orange-500',
|
||||
label: 'Order',
|
||||
};
|
||||
}
|
||||
|
||||
export default function CollectionItemCard({
|
||||
collection,
|
||||
onCollect,
|
||||
onProblem,
|
||||
onNavigate,
|
||||
}: CollectionItemProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
|
||||
const supplier = collection.expand?.supplier;
|
||||
const orderItem = collection.expand?.order_item;
|
||||
const itemType = getItemType(collection);
|
||||
|
||||
const hasCoords = supplier?.latitude && supplier?.longitude;
|
||||
|
||||
const description = collection.is_manual
|
||||
? collection.description
|
||||
: orderItem?.description || 'Unknown item';
|
||||
|
||||
const quantity = collection.quantity || orderItem?.quantity || 0;
|
||||
const unit = collection.unit || orderItem?.unit || 'units';
|
||||
|
||||
const orderNumber = orderItem?.expand?.order?.order_number || '';
|
||||
const poNumber = orderItem?.expand?.purchase_order?.po_number || '';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'bg-white rounded-xl card-shadow mb-3 overflow-hidden animate-fade-in',
|
||||
collection.status === 'problem' && 'border-l-4 border-red-500',
|
||||
collection.status === 'assigned' && 'border-l-4 border-orange-500',
|
||||
collection.status === 'pending' && 'border-l-4 border-gray-300'
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="p-4 cursor-pointer active:bg-gray-50 transition-colors"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={cn('flex-shrink-0', itemType.color)}>
|
||||
{itemType.icon}
|
||||
</span>
|
||||
<h3 className="font-semibold text-sm leading-tight truncate">
|
||||
{description}
|
||||
</h3>
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] px-1.5 py-0.5 rounded-full font-medium flex-shrink-0',
|
||||
itemType.type === 'problem' && 'bg-red-100 text-red-700',
|
||||
itemType.type === 'breakdown' && 'bg-orange-100 text-orange-700',
|
||||
itemType.type === 'repair' && 'bg-amber-100 text-amber-700',
|
||||
itemType.type === 'manual' && 'bg-purple-100 text-purple-700',
|
||||
itemType.type === 'normal' && 'bg-orange-100 text-orange-700'
|
||||
)}
|
||||
>
|
||||
{itemType.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-500 mt-1 space-y-0.5">
|
||||
<p className="font-medium text-gray-700">
|
||||
{supplier?.suppliername || 'Unknown Supplier'}
|
||||
</p>
|
||||
<p>Expected: {quantity} {unit}</p>
|
||||
{orderNumber && <p>Order: {orderNumber}</p>}
|
||||
{poNumber && <p>PO: {poNumber}</p>}
|
||||
{collection.planned_date && (
|
||||
<p>Planned: {formatDate(collection.planned_date)}</p>
|
||||
)}
|
||||
{orderItem?.selling_price && (
|
||||
<p className="text-green-600 font-medium">
|
||||
{formatCurrency(orderItem.selling_price * quantity)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 ml-2">
|
||||
{expanded ? (
|
||||
<ChevronUp size={20} className="text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown size={20} className="text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Details */}
|
||||
{expanded && (
|
||||
<div className="px-4 pb-4 border-t border-gray-100 pt-3">
|
||||
{collection.notes && (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-2 mb-3">
|
||||
<p className="text-xs text-yellow-800 flex items-start gap-1.5">
|
||||
<AlertCircle size={14} className="flex-shrink-0 mt-0.5" />
|
||||
<span>{collection.notes}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{supplier?.address && (
|
||||
<p className="text-xs text-gray-500 mb-3">
|
||||
<strong>Address:</strong> {supplier.address}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCollect(collection);
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-1.5 py-2.5 px-3 rounded-lg text-sm font-medium',
|
||||
'bg-green-500 text-white active:bg-green-600 transition-colors',
|
||||
'touch-manipulation'
|
||||
)}
|
||||
>
|
||||
<Check size={16} strokeWidth={2.5} />
|
||||
<span>Collect</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onProblem(collection);
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-1.5 py-2.5 px-3 rounded-lg text-sm font-medium',
|
||||
'bg-red-500 text-white active:bg-red-600 transition-colors',
|
||||
'touch-manipulation'
|
||||
)}
|
||||
>
|
||||
<AlertTriangle size={16} strokeWidth={2.5} />
|
||||
<span>Problem</span>
|
||||
</button>
|
||||
|
||||
{hasCoords && supplier && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onNavigate(supplier.latitude!, supplier.longitude!, supplier.suppliername);
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-1.5 py-2.5 px-3 rounded-lg text-sm font-medium',
|
||||
'bg-orange-500 text-white active:bg-orange-600 transition-colors',
|
||||
'touch-manipulation'
|
||||
)}
|
||||
>
|
||||
<Navigation size={16} strokeWidth={2.5} />
|
||||
<span>Navigate</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
222
components/CollectionMap.tsx
Normal file
222
components/CollectionMap.tsx
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
|
||||
import { Collection, Supplier } from '@/lib/types';
|
||||
import { formatCurrency, calculateDistance } from '@/lib/utils';
|
||||
import { Navigation, Check, AlertTriangle } from 'lucide-react';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
// Fix Leaflet default markers in Next.js
|
||||
const defaultIcon = L.icon({
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||||
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
const currentLocationIcon = L.divIcon({
|
||||
className: 'custom-div-icon',
|
||||
html: `
|
||||
<div style="
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ea580c;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
||||
"></div>
|
||||
`,
|
||||
iconSize: [20, 20],
|
||||
iconAnchor: [10, 10],
|
||||
});
|
||||
|
||||
interface MapViewProps {
|
||||
collections: Collection[];
|
||||
onNavigate: (lat: number, lng: number, name: string) => void;
|
||||
}
|
||||
|
||||
function MapBounds({ collections }: { collections: Collection[] }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
const validPoints = collections
|
||||
.filter((c) => c.expand?.supplier?.latitude && c.expand?.supplier?.longitude)
|
||||
.map((c) => [c.expand!.supplier!.latitude!, c.expand!.supplier!.longitude!] as [number, number]);
|
||||
|
||||
if (validPoints.length > 0) {
|
||||
const bounds = L.latLngBounds(validPoints);
|
||||
map.fitBounds(bounds, { padding: [50, 50], maxZoom: 15 });
|
||||
}
|
||||
}, [map, collections]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function CollectionMap({ collections, onNavigate }: MapViewProps) {
|
||||
const [userLocation, setUserLocation] = useState<[number, number] | null>(null);
|
||||
const [selectedSupplier, setSelectedSupplier] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if ('geolocation' in navigator) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
setUserLocation([pos.coords.latitude, pos.coords.longitude]);
|
||||
},
|
||||
(error) => console.error('Could not get location:', error),
|
||||
{ enableHighAccuracy: true, timeout: 10000 }
|
||||
);
|
||||
|
||||
const watchId = navigator.geolocation.watchPosition(
|
||||
(pos) => {
|
||||
setUserLocation([pos.coords.latitude, pos.coords.longitude]);
|
||||
},
|
||||
(error) => console.error('Watch error:', error),
|
||||
{ enableHighAccuracy: true }
|
||||
);
|
||||
|
||||
return () => navigator.geolocation.clearWatch(watchId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Group collections by supplier
|
||||
const suppliers = useMemo(() => {
|
||||
const map = new Map<string, { supplier: Supplier; collections: Collection[] }>();
|
||||
|
||||
collections.forEach((collection) => {
|
||||
if (!collection.expand?.supplier) return;
|
||||
const supplier = collection.expand.supplier;
|
||||
if (!supplier.latitude || !supplier.longitude) return;
|
||||
|
||||
const key = supplier.id;
|
||||
if (!map.has(key)) {
|
||||
map.set(key, { supplier, collections: [] });
|
||||
}
|
||||
map.get(key)!.collections.push(collection);
|
||||
});
|
||||
|
||||
return Array.from(map.values());
|
||||
}, [collections]);
|
||||
|
||||
const defaultCenter: [number, number] = [-33.9249, 18.4241]; // Cape Town default
|
||||
const center = userLocation || defaultCenter;
|
||||
|
||||
const getSupplierDistance = (supplier: Supplier) => {
|
||||
if (!userLocation || !supplier.latitude || !supplier.longitude) return null;
|
||||
return calculateDistance(
|
||||
userLocation[0],
|
||||
userLocation[1],
|
||||
supplier.latitude,
|
||||
supplier.longitude
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-[calc(100vh-4rem)] w-full relative">
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={12}
|
||||
className="h-full w-full"
|
||||
zoomControl={false}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
<MapBounds collections={collections} />
|
||||
|
||||
{userLocation && (
|
||||
<Marker position={userLocation} icon={currentLocationIcon}>
|
||||
<Popup>
|
||||
<div className="text-sm font-medium">Your Location</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
)}
|
||||
|
||||
{suppliers.map(({ supplier, collections: supplierCollections }) => {
|
||||
const distance = getSupplierDistance(supplier);
|
||||
const hasProblem = supplierCollections.some((c) => c.status === 'problem');
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={supplier.id}
|
||||
position={[supplier.latitude!, supplier.longitude!]}
|
||||
icon={defaultIcon}
|
||||
eventHandlers={{
|
||||
click: () => setSelectedSupplier(supplier.id),
|
||||
}}
|
||||
>
|
||||
<Popup>
|
||||
<div className="min-w-[200px] max-w-[250px]">
|
||||
<h3 className="font-bold text-sm mb-1">{supplier.suppliername}</h3>
|
||||
<p className="text-xs text-gray-500 mb-2">{supplier.address}</p>
|
||||
|
||||
{distance && (
|
||||
<p className="text-xs text-orange-600 mb-2 font-medium">
|
||||
{distance.toFixed(1)} km away
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5 mb-3">
|
||||
{supplierCollections.map((c) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className="text-xs p-1.5 bg-gray-50 rounded"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{c.status === 'problem' && (
|
||||
<AlertTriangle size={12} className="text-red-500" />
|
||||
)}
|
||||
<span className="font-medium truncate">
|
||||
{c.is_manual
|
||||
? c.description
|
||||
: c.expand?.order_item?.description || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-gray-400">
|
||||
Qty: {c.quantity} {c.unit || c.expand?.order_item?.unit || 'units'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
onNavigate(supplier.latitude!, supplier.longitude!, supplier.suppliername)
|
||||
}
|
||||
className="w-full flex items-center justify-center gap-1.5 py-2 px-3 bg-blue-500 text-white rounded-lg text-sm font-medium active:bg-orange-600 transition-colors"
|
||||
>
|
||||
<Navigation size={14} />
|
||||
Navigate
|
||||
</button>
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
})}
|
||||
</MapContainer>
|
||||
|
||||
{/* Legend overlay */}
|
||||
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm rounded-xl p-3 shadow-lg z-[400]">
|
||||
<p className="text-xs font-medium text-gray-700 mb-2">Legend</p>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500 border-2 border-white shadow-sm" />
|
||||
<span className="text-[10px] text-gray-600">Your Location</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 relative">
|
||||
<div className="absolute inset-0 bg-blue-500 rounded-sm rotate-45 transform origin-bottom" />
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-600">Collection Stop</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
111
components/LocationTracker.tsx
Normal file
111
components/LocationTracker.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
import { getSettings, saveDriverLocation, addToQueue, isAuthenticated } from '@/lib/pocketbase';
|
||||
|
||||
export default function LocationTracker() {
|
||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const watchRef = useRef<number | null>(null);
|
||||
|
||||
const sendLocation = useCallback(async (position: GeolocationPosition) => {
|
||||
if (!isAuthenticated()) return;
|
||||
|
||||
const user = JSON.parse(localStorage.getItem('pocketbase_auth') || '{}')?.model;
|
||||
if (!user) return;
|
||||
|
||||
const locationData = {
|
||||
driver: user.id,
|
||||
latitude: position.coords.latitude,
|
||||
longitude: position.coords.longitude,
|
||||
accuracy: position.coords.accuracy,
|
||||
altitude: position.coords.altitude || undefined,
|
||||
speed: position.coords.speed || undefined,
|
||||
heading: position.coords.heading || undefined,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
try {
|
||||
await saveDriverLocation(locationData);
|
||||
} catch (error) {
|
||||
console.error('Failed to save location:', error);
|
||||
// Queue for sync when back online
|
||||
addToQueue({
|
||||
type: 'status_update',
|
||||
data: locationData,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!('geolocation' in navigator)) {
|
||||
console.warn('Geolocation not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
const settings = getSettings();
|
||||
const intervalMs = Math.max(10000, settings.locationInterval * 1000);
|
||||
|
||||
const startTracking = () => {
|
||||
// Use watchPosition for more frequent updates
|
||||
watchRef.current = navigator.geolocation.watchPosition(
|
||||
sendLocation,
|
||||
(error) => {
|
||||
console.error('Geolocation error:', error);
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: settings.enableHighAccuracy,
|
||||
maximumAge: intervalMs,
|
||||
timeout: 10000,
|
||||
}
|
||||
);
|
||||
|
||||
// Also send on interval as backup
|
||||
intervalRef.current = setInterval(() => {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
sendLocation,
|
||||
(error) => console.error('Interval geolocation error:', error),
|
||||
{
|
||||
enableHighAccuracy: settings.enableHighAccuracy,
|
||||
timeout: 10000,
|
||||
}
|
||||
);
|
||||
}, intervalMs);
|
||||
};
|
||||
|
||||
// Start tracking if authenticated
|
||||
if (isAuthenticated()) {
|
||||
startTracking();
|
||||
}
|
||||
|
||||
// Listen for auth changes
|
||||
const handleAuthChange = () => {
|
||||
if (isAuthenticated()) {
|
||||
startTracking();
|
||||
} else {
|
||||
stopTracking();
|
||||
}
|
||||
};
|
||||
|
||||
// Check periodically for auth state
|
||||
const authCheckInterval = setInterval(handleAuthChange, 5000);
|
||||
|
||||
const stopTracking = () => {
|
||||
if (watchRef.current !== null) {
|
||||
navigator.geolocation.clearWatch(watchRef.current);
|
||||
watchRef.current = null;
|
||||
}
|
||||
if (intervalRef.current !== null) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
stopTracking();
|
||||
clearInterval(authCheckInterval);
|
||||
};
|
||||
}, [sendLocation]);
|
||||
|
||||
// This component doesn't render anything
|
||||
return null;
|
||||
}
|
||||
170
components/ProblemModal.tsx
Normal file
170
components/ProblemModal.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Collection, PROBLEM_TYPES } from '@/lib/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { X, Camera } from 'lucide-react';
|
||||
|
||||
interface ProblemModalProps {
|
||||
collection: Collection | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (collection: Collection, problemType: string, description: string, photo?: File) => void;
|
||||
}
|
||||
|
||||
export default function ProblemModal({
|
||||
collection,
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: ProblemModalProps) {
|
||||
const [problemType, setProblemType] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [photo, setPhoto] = useState<File | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
if (!isOpen || !collection) return null;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (!problemType) {
|
||||
setError('Please select a problem type');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!description.trim()) {
|
||||
setError('Please describe the problem');
|
||||
return;
|
||||
}
|
||||
|
||||
onConfirm(collection, problemType, description, photo || undefined);
|
||||
setProblemType('');
|
||||
setDescription('');
|
||||
setPhoto(null);
|
||||
setError('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative bg-white rounded-t-2xl sm:rounded-2xl w-full max-w-md p-6 animate-slide-up">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-bold">Report Problem</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-3 bg-red-50 rounded-lg">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{collection.is_manual
|
||||
? collection.description
|
||||
: collection.expand?.order_item?.description || 'Unknown item'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{collection.expand?.supplier?.suppliername || 'Unknown Supplier'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Problem Type *
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{PROBLEM_TYPES.map((type) => (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setProblemType(type.value);
|
||||
setError('');
|
||||
}}
|
||||
className={cn(
|
||||
'py-2.5 px-3 rounded-lg text-sm text-left border-2 transition-all',
|
||||
'touch-manipulation',
|
||||
problemType === type.value
|
||||
? 'border-red-500 bg-red-50 text-red-700 font-medium'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
)}
|
||||
>
|
||||
{type.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Description *
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => {
|
||||
setDescription(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
className="w-full p-3 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
|
||||
rows={3}
|
||||
placeholder="Describe the problem in detail..."
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Photo (optional)
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => setPhoto(e.target.files?.[0] || null)}
|
||||
className="hidden"
|
||||
id="problem-photo"
|
||||
/>
|
||||
<label
|
||||
htmlFor="problem-photo"
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-2 py-3 px-4 rounded-lg border-2 border-dashed cursor-pointer',
|
||||
'transition-colors touch-manipulation',
|
||||
photo
|
||||
? 'border-green-400 bg-green-50 text-green-700'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
)}
|
||||
>
|
||||
<Camera size={20} />
|
||||
<span className="text-sm">
|
||||
{photo ? photo.name : 'Take or choose photo'}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-2 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-xs text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={cn(
|
||||
'w-full py-3.5 px-4 rounded-xl text-white font-semibold text-base',
|
||||
'bg-red-500 active:bg-red-600 transition-colors',
|
||||
'touch-manipulation flex items-center justify-center gap-2'
|
||||
)}
|
||||
>
|
||||
Report Problem
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
lib/pocketbase.ts
Normal file
149
lib/pocketbase.ts
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import PocketBase from 'pocketbase';
|
||||
import { AppSettings, DEFAULT_SETTINGS, Collection, DriverLocation } from './types';
|
||||
|
||||
const POCKETBASE_URL = process.env.NEXT_PUBLIC_POCKETBASE_URL || 'https://pocketbase-gnqc88suy8fqk6wyryjjdpvl.169.239.180.130.sslip.io';
|
||||
|
||||
export const pb = new PocketBase(POCKETBASE_URL);
|
||||
|
||||
// Auth helpers
|
||||
export const isAuthenticated = () => pb.authStore.isValid;
|
||||
|
||||
export const getCurrentUser = () => pb.authStore.model;
|
||||
|
||||
export const logout = () => {
|
||||
pb.authStore.clear();
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login/';
|
||||
}
|
||||
};
|
||||
|
||||
export const login = async (email: string, password: string) => {
|
||||
return await pb.collection('users').authWithPassword(email, password);
|
||||
};
|
||||
|
||||
// Collection data helpers
|
||||
export const getAssignedCollections = async () => {
|
||||
const user = getCurrentUser();
|
||||
if (!user) return [];
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 2);
|
||||
|
||||
const records = await pb.collection('collections').getFullList({
|
||||
filter: `status = "assigned" && driver = "${user.id}" && planned_date <= "${tomorrow.toISOString()}"`,
|
||||
expand: 'order_item,supplier',
|
||||
sort: 'supplier.suppliername',
|
||||
});
|
||||
|
||||
return records as unknown as Collection[];
|
||||
};
|
||||
|
||||
export const getPendingCollections = async () => {
|
||||
const records = await pb.collection('collections').getFullList({
|
||||
filter: 'status = "pending" || status = "problem"',
|
||||
expand: 'order_item,supplier',
|
||||
sort: 'supplier.suppliername',
|
||||
});
|
||||
|
||||
return records as unknown as Collection[];
|
||||
};
|
||||
|
||||
export const updateCollectionStatus = async (
|
||||
id: string,
|
||||
status: string,
|
||||
data: Partial<Collection>
|
||||
) => {
|
||||
return await pb.collection('collections').update(id, {
|
||||
status,
|
||||
...data,
|
||||
});
|
||||
};
|
||||
|
||||
export const reportProblem = async (
|
||||
collectionId: string,
|
||||
problemType: string,
|
||||
description: string
|
||||
) => {
|
||||
// Update collection status
|
||||
await pb.collection('collections').update(collectionId, {
|
||||
status: 'problem',
|
||||
notes: description,
|
||||
});
|
||||
|
||||
// Create problem record
|
||||
return await pb.collection('collection_problems').create({
|
||||
collection: collectionId,
|
||||
problem_type: problemType,
|
||||
description,
|
||||
});
|
||||
};
|
||||
|
||||
// Location tracking
|
||||
export const saveDriverLocation = async (location: Omit<DriverLocation, 'id'>) => {
|
||||
return await pb.collection('driver_locations').create(location);
|
||||
};
|
||||
|
||||
// Settings helpers
|
||||
const SETTINGS_KEY = '1driver_settings';
|
||||
|
||||
export const getSettings = (): AppSettings => {
|
||||
if (typeof window === 'undefined') return DEFAULT_SETTINGS;
|
||||
const saved = localStorage.getItem(SETTINGS_KEY);
|
||||
if (saved) {
|
||||
try {
|
||||
return { ...DEFAULT_SETTINGS, ...JSON.parse(saved) };
|
||||
} catch {
|
||||
return DEFAULT_SETTINGS;
|
||||
}
|
||||
}
|
||||
return DEFAULT_SETTINGS;
|
||||
};
|
||||
|
||||
export const saveSettings = (settings: Partial<AppSettings>) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const current = getSettings();
|
||||
const updated = { ...current, ...settings };
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
|
||||
return updated;
|
||||
};
|
||||
|
||||
// Offline queue helpers
|
||||
const QUEUE_KEY = '1driver_offline_queue';
|
||||
|
||||
export interface QueueItem {
|
||||
id: string;
|
||||
type: 'status_update' | 'problem_report';
|
||||
data: Record<string, unknown>;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
export const addToQueue = (item: Omit<QueueItem, 'id' | 'timestamp'>) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const queue = getQueue();
|
||||
const newItem: QueueItem = {
|
||||
...item,
|
||||
id: crypto.randomUUID(),
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
queue.push(newItem);
|
||||
localStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
|
||||
};
|
||||
|
||||
export const getQueue = (): QueueItem[] => {
|
||||
if (typeof window === 'undefined') return [];
|
||||
const saved = localStorage.getItem(QUEUE_KEY);
|
||||
return saved ? JSON.parse(saved) : [];
|
||||
};
|
||||
|
||||
export const removeFromQueue = (id: string) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const queue = getQueue().filter((item) => item.id !== id);
|
||||
localStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
|
||||
};
|
||||
|
||||
export const clearQueue = () => {
|
||||
if (typeof window === 'undefined') return;
|
||||
localStorage.removeItem(QUEUE_KEY);
|
||||
};
|
||||
103
lib/types.ts
Normal file
103
lib/types.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
export interface Supplier {
|
||||
id: string;
|
||||
suppliername: string;
|
||||
address: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
collection?: string;
|
||||
}
|
||||
|
||||
export interface OrderItem {
|
||||
id: string;
|
||||
description: string;
|
||||
quantity: number;
|
||||
order_qty: number;
|
||||
unit: string;
|
||||
selling_price?: number;
|
||||
order?: string;
|
||||
purchase_order?: string;
|
||||
item_status: string;
|
||||
expand?: {
|
||||
order?: { order_number: string };
|
||||
purchase_order?: { po_number: string };
|
||||
};
|
||||
}
|
||||
|
||||
export interface Collection {
|
||||
id: string;
|
||||
order_item: string;
|
||||
supplier: string;
|
||||
driver: string;
|
||||
status: 'pending' | 'assigned' | 'collected' | 'problem';
|
||||
quantity: number;
|
||||
planned_date: string;
|
||||
actual_date: string;
|
||||
received_qty: number;
|
||||
notes: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_manual: boolean;
|
||||
description: string;
|
||||
unit: string;
|
||||
// Expanded fields
|
||||
expand?: {
|
||||
order_item?: OrderItem;
|
||||
supplier?: Supplier;
|
||||
driver?: Driver;
|
||||
};
|
||||
}
|
||||
|
||||
export interface CollectionProblem {
|
||||
id: string;
|
||||
collection: string;
|
||||
problem_type: 'out_of_stock' | 'partial_stock' | 'quality_issue' | 'wrong_item' | 'other';
|
||||
description: string;
|
||||
photo?: string;
|
||||
reported_at: string;
|
||||
}
|
||||
|
||||
export interface Driver {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface DriverLocation {
|
||||
id: string;
|
||||
driver: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
accuracy?: number;
|
||||
altitude?: number;
|
||||
speed?: number;
|
||||
heading?: number;
|
||||
timestamp: string;
|
||||
battery_level?: number;
|
||||
}
|
||||
|
||||
export interface AppSettings {
|
||||
locationInterval: number; // in seconds
|
||||
minimumAccuracy: number; // in meters
|
||||
enableHighAccuracy: boolean;
|
||||
darkMode: boolean;
|
||||
fontSize: 'small' | 'normal' | 'large';
|
||||
offlineMode: boolean;
|
||||
}
|
||||
|
||||
export const DEFAULT_SETTINGS: AppSettings = {
|
||||
locationInterval: 60,
|
||||
minimumAccuracy: 50,
|
||||
enableHighAccuracy: true,
|
||||
darkMode: false,
|
||||
fontSize: 'normal',
|
||||
offlineMode: false,
|
||||
};
|
||||
|
||||
export const PROBLEM_TYPES = [
|
||||
{ value: 'out_of_stock', label: 'Out of Stock' },
|
||||
{ value: 'partial_stock', label: 'Partial Stock' },
|
||||
{ value: 'quality_issue', label: 'Quality Issue' },
|
||||
{ value: 'wrong_item', label: 'Wrong Item' },
|
||||
{ value: 'other', label: 'Other' },
|
||||
] as const;
|
||||
86
lib/utils.ts
Normal file
86
lib/utils.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function formatDate(dateString: string): string {
|
||||
if (!dateString) return 'N/A';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-ZA', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
export function formatDateTime(dateString: string): string {
|
||||
if (!dateString) return 'N/A';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('en-ZA', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
export function formatCurrency(amount: number): string {
|
||||
return new Intl.NumberFormat('en-ZA', {
|
||||
style: 'currency',
|
||||
currency: 'ZAR',
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
export function getRelativeTime(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return 'Just now';
|
||||
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
|
||||
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
|
||||
if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
|
||||
return formatDate(dateString);
|
||||
}
|
||||
|
||||
export function debounce<T extends (...args: unknown[]) => unknown>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
return (...args: Parameters<T>) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func(...args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
export function groupBy<T>(array: T[], key: keyof T): Record<string, T[]> {
|
||||
return array.reduce((result, item) => {
|
||||
const groupKey = String(item[key]);
|
||||
if (!result[groupKey]) {
|
||||
result[groupKey] = [];
|
||||
}
|
||||
result[groupKey].push(item);
|
||||
return result;
|
||||
}, {} as Record<string, T[]>);
|
||||
}
|
||||
|
||||
export function calculateDistance(
|
||||
lat1: number,
|
||||
lon1: number,
|
||||
lat2: number,
|
||||
lon2: number
|
||||
): number {
|
||||
const R = 6371; // Earth's radius in km
|
||||
const dLat = (lat2 - lat1) * Math.PI / 180;
|
||||
const dLon = (lon2 - lon1) * Math.PI / 180;
|
||||
const a =
|
||||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
||||
Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
return R * c;
|
||||
}
|
||||
5
next-env.d.ts
vendored
Normal file
5
next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
11
next.config.js
Normal file
11
next.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
distDir: 'dist',
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
trailingSlash: true,
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
34
nginx.conf
Normal file
34
nginx.conf
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||
|
||||
# Cache static assets
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# PWA manifest and service worker - no cache
|
||||
location ~* (manifest\.json|sw\.js)$ {
|
||||
expires -1;
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate";
|
||||
}
|
||||
|
||||
# SPA fallback - all routes serve index.html
|
||||
location / {
|
||||
try_files $uri $uri/ $uri.html /index.html;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
}
|
||||
6367
package-lock.json
generated
Normal file
6367
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
34
package.json
Normal file
34
package.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "1driver",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "^14.2.0",
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0",
|
||||
"pocketbase": "^0.21.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"lucide-react": "^0.378.0",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.4.0",
|
||||
"@types/node": "^20.12.0",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/leaflet": "^1.9.12",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-next": "^14.2.0"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
7
public/icons/icon.svg
Normal file
7
public/icons/icon.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<rect width="512" height="512" rx="64" fill="#ea580c"/>
|
||||
<circle cx="256" cy="200" r="80" fill="white" opacity="0.9"/>
|
||||
<path d="M256 300 L256 380 M256 380 L200 440 M256 380 L312 440" stroke="white" stroke-width="24" stroke-linecap="round" fill="none"/>
|
||||
<circle cx="256" cy="200" r="40" fill="#ea580c"/>
|
||||
<path d="M236 200 L256 180 L276 200 L256 220 Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 445 B |
18
public/manifest.json
Normal file
18
public/manifest.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "1Driver Collections",
|
||||
"short_name": "1Driver",
|
||||
"description": "Mobile driver collection app",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#f5f5f5",
|
||||
"theme_color": "#ea580c",
|
||||
"orientation": "portrait",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/icon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "maskable any"
|
||||
}
|
||||
]
|
||||
}
|
||||
41
tailwind.config.js
Normal file
41
tailwind.config.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#fff7ed',
|
||||
100: '#ffedd5',
|
||||
200: '#fed7aa',
|
||||
300: '#fdba74',
|
||||
400: '#fb923c',
|
||||
500: '#f97316',
|
||||
600: '#ea580c',
|
||||
700: '#c2410c',
|
||||
800: '#9a3412',
|
||||
900: '#7c2d12',
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
'18': '4.5rem',
|
||||
'22': '5.5rem',
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.3s ease-out forwards',
|
||||
'slide-up': 'slideUp 0.3s ease-out forwards',
|
||||
'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
40
tsconfig.json
Normal file
40
tsconfig.json
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
"dist/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue