feat(mobile): Add field app with date range navigation
- Add React Native Expo field app for mobile staff - Use main /appointments/ endpoint with date range support - Add X-Business-Subdomain header for tenant context - Support day/week view navigation - Remove WebSocket console logging from frontend - Update AppointmentStatus type to include all backend statuses - Add responsive status legend to scheduler header 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -4,7 +4,7 @@
|
||||
|
||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { Appointment, AppointmentStatus, User, Business, Resource } from '../types';
|
||||
import { Clock, Calendar as CalendarIcon, Filter, GripVertical, CheckCircle2, Trash2, X, User as UserIcon, Mail, Phone, Undo, Redo, ChevronLeft, ChevronRight, Check, AlertTriangle } from 'lucide-react';
|
||||
import { Clock, Calendar as CalendarIcon, Filter, GripVertical, CheckCircle2, Trash2, X, User as UserIcon, Mail, Phone, Undo, Redo, ChevronLeft, ChevronRight, ChevronDown, Check, AlertTriangle } from 'lucide-react';
|
||||
import { useAppointments, useUpdateAppointment, useDeleteAppointment } from '../hooks/useAppointments';
|
||||
import { useResources } from '../hooks/useResources';
|
||||
import { useServices } from '../hooks/useServices';
|
||||
@@ -119,14 +119,18 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
const [editDateTime, setEditDateTime] = useState('');
|
||||
const [editResource, setEditResource] = useState('');
|
||||
const [editDuration, setEditDuration] = useState(0);
|
||||
const [editStatus, setEditStatus] = useState<AppointmentStatus>('CONFIRMED');
|
||||
const [editStatus, setEditStatus] = useState<AppointmentStatus>('SCHEDULED');
|
||||
|
||||
// Filter state
|
||||
const [showFilterMenu, setShowFilterMenu] = useState(false);
|
||||
const [filterStatuses, setFilterStatuses] = useState<Set<AppointmentStatus>>(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
|
||||
const [showStatusLegend, setShowStatusLegend] = useState(false);
|
||||
const [filterStatuses, setFilterStatuses] = useState<Set<AppointmentStatus>>(new Set([
|
||||
'PENDING', 'CONFIRMED', 'SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'CANCELED', 'NO_SHOW', 'NOSHOW'
|
||||
]));
|
||||
const [filterResources, setFilterResources] = useState<Set<string>>(new Set()); // Empty means all
|
||||
const [filterServices, setFilterServices] = useState<Set<string>>(new Set()); // Empty means all
|
||||
const filterMenuRef = useRef<HTMLDivElement>(null);
|
||||
const statusLegendRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Update edit state when selected appointment changes
|
||||
useEffect(() => {
|
||||
@@ -204,19 +208,22 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
}
|
||||
}, [overlayWheelHandler]);
|
||||
|
||||
// Close filter menu when clicking outside
|
||||
// Close dropdowns when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (filterMenuRef.current && !filterMenuRef.current.contains(e.target as Node)) {
|
||||
setShowFilterMenu(false);
|
||||
}
|
||||
if (statusLegendRef.current && !statusLegendRef.current.contains(e.target as Node)) {
|
||||
setShowStatusLegend(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showFilterMenu) {
|
||||
if (showFilterMenu || showStatusLegend) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
}, [showFilterMenu]);
|
||||
}, [showFilterMenu, showStatusLegend]);
|
||||
|
||||
// Filter toggle helpers
|
||||
const toggleStatusFilter = (status: AppointmentStatus) => {
|
||||
@@ -249,13 +256,18 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
setFilterServices(newSet);
|
||||
};
|
||||
|
||||
// All statuses that should be shown by default
|
||||
const DEFAULT_STATUSES: AppointmentStatus[] = [
|
||||
'PENDING', 'CONFIRMED', 'SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'CANCELED', 'NO_SHOW', 'NOSHOW'
|
||||
];
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setFilterStatuses(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
|
||||
setFilterStatuses(new Set(DEFAULT_STATUSES));
|
||||
setFilterResources(new Set());
|
||||
setFilterServices(new Set());
|
||||
};
|
||||
|
||||
const hasActiveFilters = filterStatuses.size < 5 || filterResources.size > 0 || filterServices.size > 0;
|
||||
const hasActiveFilters = filterStatuses.size < DEFAULT_STATUSES.length || filterResources.size > 0 || filterServices.size > 0;
|
||||
|
||||
// Scroll to current time on mount (centered in view)
|
||||
useEffect(() => {
|
||||
@@ -576,9 +588,19 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
const getWidth = (durationMinutes: number) => durationMinutes * (PIXELS_PER_MINUTE * zoomLevel);
|
||||
|
||||
const getStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
|
||||
if (status === 'COMPLETED') return 'bg-green-100 border-green-500 text-green-900 dark:bg-green-900/50 dark:border-green-500 dark:text-green-200';
|
||||
if (status === 'NO_SHOW') return 'bg-orange-100 border-orange-500 text-orange-900 dark:bg-orange-900/50 dark:border-orange-500 dark:text-orange-200';
|
||||
if (status === 'CANCELLED') return 'bg-gray-100 border-gray-400 text-gray-500 opacity-75 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400';
|
||||
// Completed statuses
|
||||
if (status === 'COMPLETED' || status === 'PAID') return 'bg-green-100 border-green-500 text-green-900 dark:bg-green-900/50 dark:border-green-500 dark:text-green-200';
|
||||
// No-show
|
||||
if (status === 'NO_SHOW' || status === 'NOSHOW') return 'bg-orange-100 border-orange-500 text-orange-900 dark:bg-orange-900/50 dark:border-orange-500 dark:text-orange-200';
|
||||
// Cancelled
|
||||
if (status === 'CANCELLED' || status === 'CANCELED') return 'bg-gray-100 border-gray-400 text-gray-500 opacity-75 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400';
|
||||
// En route - yellow/amber to show staff is traveling
|
||||
if (status === 'EN_ROUTE') return 'bg-amber-100 border-amber-500 text-amber-900 dark:bg-amber-900/50 dark:border-amber-500 dark:text-amber-200';
|
||||
// In progress - teal/cyan to show work is happening
|
||||
if (status === 'IN_PROGRESS') return 'bg-teal-100 border-teal-500 text-teal-900 dark:bg-teal-900/50 dark:border-teal-500 dark:text-teal-200';
|
||||
// Awaiting payment
|
||||
if (status === 'AWAITING_PAYMENT') return 'bg-purple-100 border-purple-500 text-purple-900 dark:bg-purple-900/50 dark:border-purple-500 dark:text-purple-200';
|
||||
// Time-based colors for scheduled appointments
|
||||
const now = new Date();
|
||||
if (now > endTime) return 'bg-red-100 border-red-500 text-red-900 dark:bg-red-900/50 dark:border-red-500 dark:text-red-200';
|
||||
if (now >= startTime && now <= endTime) return 'bg-yellow-100 border-yellow-500 text-yellow-900 dark:bg-yellow-900/50 dark:border-yellow-500 dark:text-yellow-200';
|
||||
@@ -587,9 +609,19 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
|
||||
// Simplified status colors for month view (no border classes)
|
||||
const getMonthStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
|
||||
if (status === 'COMPLETED') return 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800/50';
|
||||
if (status === 'NO_SHOW') return 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800/50';
|
||||
if (status === 'CANCELLED') return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 opacity-75 hover:bg-gray-200 dark:hover:bg-gray-600';
|
||||
// Completed statuses
|
||||
if (status === 'COMPLETED' || status === 'PAID') return 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800/50';
|
||||
// No-show
|
||||
if (status === 'NO_SHOW' || status === 'NOSHOW') return 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800/50';
|
||||
// Cancelled
|
||||
if (status === 'CANCELLED' || status === 'CANCELED') return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 opacity-75 hover:bg-gray-200 dark:hover:bg-gray-600';
|
||||
// En route - amber
|
||||
if (status === 'EN_ROUTE') return 'bg-amber-100 dark:bg-amber-900/50 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-800/50';
|
||||
// In progress - teal
|
||||
if (status === 'IN_PROGRESS') return 'bg-teal-100 dark:bg-teal-900/50 text-teal-800 dark:text-teal-200 hover:bg-teal-200 dark:hover:bg-teal-800/50';
|
||||
// Awaiting payment
|
||||
if (status === 'AWAITING_PAYMENT') return 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800/50';
|
||||
// Time-based colors
|
||||
const now = new Date();
|
||||
if (now > endTime) return 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800/50';
|
||||
if (now >= startTime && now <= endTime) return 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800/50';
|
||||
@@ -1056,32 +1088,90 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
<Redo size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{/* Status Legend */}
|
||||
<div className="flex items-center gap-3 border-l border-gray-300 dark:border-gray-600 pl-4">
|
||||
{/* Status Legend - Hidden on smaller screens, shown on 2xl+ (1536px) */}
|
||||
<div className="hidden 2xl:flex items-center gap-3 border-l border-gray-300 dark:border-gray-600 pl-4">
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Status:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-blue-100 border border-blue-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Upcoming</span>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Scheduled</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-yellow-100 border border-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded bg-amber-100 border border-amber-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">En Route</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-teal-100 border border-teal-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">In Progress</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-red-100 border border-red-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Overdue</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-green-100 border border-green-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Completed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-purple-100 border border-purple-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Awaiting Payment</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-gray-100 border border-gray-400"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Cancelled</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 rounded bg-orange-100 border border-orange-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">No Show</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Status Legend Dropdown - Shown on screens smaller than 2xl */}
|
||||
<div className="2xl:hidden relative" ref={statusLegendRef}>
|
||||
<button
|
||||
onClick={() => setShowStatusLegend(!showStatusLegend)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
|
||||
>
|
||||
<div className="flex gap-0.5">
|
||||
<div className="w-2 h-2 rounded bg-blue-500"></div>
|
||||
<div className="w-2 h-2 rounded bg-amber-500"></div>
|
||||
<div className="w-2 h-2 rounded bg-teal-500"></div>
|
||||
<div className="w-2 h-2 rounded bg-green-500"></div>
|
||||
</div>
|
||||
<span className="text-xs font-medium">Legend</span>
|
||||
<ChevronDown size={14} className={`transition-transform ${showStatusLegend ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{showStatusLegend && (
|
||||
<div className="absolute right-0 top-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 p-3 min-w-[180px]">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-blue-100 border border-blue-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Scheduled</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-amber-100 border border-amber-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">En Route</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-teal-100 border border-teal-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">In Progress</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-green-100 border border-green-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Completed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-purple-100 border border-purple-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Awaiting Payment</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-gray-100 border border-gray-400"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Cancelled</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-orange-100 border border-orange-500"></div>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">No Show</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors shadow-sm">
|
||||
@@ -1120,7 +1210,7 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
<div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
|
||||
<h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Status</h4>
|
||||
<div className="space-y-1">
|
||||
{(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW'] as AppointmentStatus[]).map(status => (
|
||||
{(['SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'NO_SHOW', 'AWAITING_PAYMENT'] as AppointmentStatus[]).map(status => (
|
||||
<div
|
||||
key={status}
|
||||
onClick={() => toggleStatusFilter(status)}
|
||||
@@ -1134,13 +1224,16 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
{filterStatuses.has(status) && <Check size={12} className="text-white" />}
|
||||
</div>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 capitalize">
|
||||
{status.toLowerCase().replace('_', ' ')}
|
||||
{status.toLowerCase().replace(/_/g, ' ')}
|
||||
</span>
|
||||
<div className={`w-2 h-2 rounded-full ml-auto ${
|
||||
status === 'COMPLETED' ? 'bg-green-500' :
|
||||
status === 'CANCELLED' ? 'bg-gray-400' :
|
||||
status === 'NO_SHOW' ? 'bg-orange-500' :
|
||||
status === 'CONFIRMED' ? 'bg-blue-500' :
|
||||
status === 'COMPLETED' || status === 'PAID' ? 'bg-green-500' :
|
||||
status === 'CANCELLED' || status === 'CANCELED' ? 'bg-gray-400' :
|
||||
status === 'NO_SHOW' || status === 'NOSHOW' ? 'bg-orange-500' :
|
||||
status === 'EN_ROUTE' ? 'bg-amber-500' :
|
||||
status === 'IN_PROGRESS' ? 'bg-teal-500' :
|
||||
status === 'AWAITING_PAYMENT' ? 'bg-purple-500' :
|
||||
status === 'SCHEDULED' ? 'bg-blue-500' :
|
||||
'bg-yellow-400'
|
||||
}`}></div>
|
||||
</div>
|
||||
@@ -1897,9 +1990,11 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
|
||||
onChange={(e) => setEditStatus(e.target.value as AppointmentStatus)}
|
||||
className="w-full px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-semibold text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
>
|
||||
<option value="PENDING">Pending</option>
|
||||
<option value="CONFIRMED">Confirmed</option>
|
||||
<option value="SCHEDULED">Scheduled</option>
|
||||
<option value="EN_ROUTE">En Route</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="AWAITING_PAYMENT">Awaiting Payment</option>
|
||||
<option value="CANCELLED">Cancelled</option>
|
||||
<option value="NO_SHOW">No Show</option>
|
||||
</select>
|
||||
|
||||
Reference in New Issue
Block a user