Major: Unified Activity System with Multi-VIP Support & Enhanced Search/Filtering
Some checks failed
CI/CD Pipeline / Backend Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Tests (push) Has been cancelled
CI/CD Pipeline / Build Docker Images (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
Some checks failed
CI/CD Pipeline / Backend Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Tests (push) Has been cancelled
CI/CD Pipeline / Build Docker Images (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
## Overview
Complete architectural overhaul merging dual event systems into a unified activity model
with multi-VIP support, enhanced search capabilities, and improved UX throughout.
## Database & Schema Changes
### Unified Activity Model (Breaking Change)
- Merged Event/EventTemplate/EventAttendance into single ScheduleEvent model
- Dropped duplicate tables: Event, EventAttendance, EventTemplate
- Single source of truth for all activities (transport, meals, meetings, events)
- Migration: 20260131180000_drop_duplicate_event_tables
### Multi-VIP Support (Breaking Change)
- Changed schema from single vipId to vipIds array (String[])
- Enables multiple VIPs per activity (ridesharing, group events)
- Migration: 20260131122613_multi_vip_support
- Updated all backend services to handle multi-VIP queries
### Seed Data Updates
- Rebuilt seed.ts with unified activity model
- Added multi-VIP rideshare examples (3 VIPs in SUV, 4 VIPs in van)
- Includes mix of transport + non-transport activities
- Balanced VIP test data (50% OFFICE_OF_DEVELOPMENT, 50% ADMIN)
## Backend Changes
### Services Cleanup
- Removed deprecated common-events endpoints
- Updated EventsService for multi-VIP support
- Enhanced VipsService with multi-VIP activity queries
- Updated DriversService, VehiclesService for unified model
- Added add-vips-to-event.dto for bulk VIP assignment
### Abilities & Permissions
- Updated ability.factory.ts: Event → ScheduleEvent subject
- Enhanced guards for unified activity permissions
- Maintained RBAC (Administrator, Coordinator, Driver roles)
### DTOs
- Updated create-event.dto: vipId → vipIds array
- Updated update-event.dto: vipId → vipIds array
- Added add-vips-to-event.dto for bulk operations
- Removed obsolete event-template DTOs
## Frontend Changes
### UI/UX Improvements
**Renamed "Schedule" → "Activities" Throughout**
- More intuitive terminology for coordinators
- Updated navigation, page titles, buttons
- Changed "Schedule Events" to "Activities" in Admin Tools
**Activities Page Enhancements**
- Added comprehensive search bar (searches: title, location, description, VIP names, driver, vehicle)
- Added sortable columns: Title, Type, VIPs, Start Time, Status
- Visual sort indicators (↑↓ arrows)
- Real-time result count when searching
- Empty state with helpful messaging
**Admin Tools Updates**
- Balanced VIP test data: 10 OFFICE_OF_DEVELOPMENT + 10 ADMIN
- More BSA-relevant organizations (Coca-Cola, AT&T, Walmart vs generic orgs)
- BSA leadership titles (National President, Chief Scout Executive, Regional Directors)
- Relabeled "Schedule Events" → "Activities"
### Component Updates
**EventList.tsx (Activities Page)**
- Added search state management with real-time filtering
- Implemented multi-field sorting with direction toggle
- Enhanced empty states for search + no data scenarios
- Filter tabs + search work together seamlessly
**VIPSchedule.tsx**
- Updated for multi-VIP schema (vipIds array)
- Shows complete itinerary timeline per VIP
- Displays all activities for selected VIP
- Groups by day with formatted dates
**EventForm.tsx**
- Updated to handle vipIds array instead of single vipId
- Multi-select VIP assignment
- Maintains backward compatibility
**AdminTools.tsx**
- New balanced VIP test data (10/10 split)
- BSA-context organizations
- Updated button labels ("Add Test Activities")
### Routing & Navigation
- Removed /common-events routes
- Updated navigation menu labels
- Maintained protected route structure
- Cleaner URL structure
## New Features
### Multi-VIP Activity Support
- Activities can have multiple VIPs (ridesharing, group events)
- Efficient seat utilization tracking (3/6 seats, 4/12 seats)
- Better coordination for shared transport
### Advanced Search & Filtering
- Full-text search across multiple fields
- Instant filtering as you type
- Search + type filters work together
- Clear visual feedback (result counts)
### Sortable Data Tables
- Click column headers to sort
- Toggle ascending/descending
- Visual indicators for active sort
- Sorts persist with search/filter
### Enhanced Admin Tools
- One-click test data generation
- Realistic BSA Jamboree scenario data
- Balanced department representation
- Complete 3-day itineraries per VIP
## Testing & Validation
### Playwright E2E Tests
- Added e2e/ directory structure
- playwright.config.ts configured
- PLAYWRIGHT_GUIDE.md documentation
- Ready for comprehensive E2E testing
### Manual Testing Performed
- Multi-VIP activity creation ✓
- Search across all fields ✓
- Column sorting (all fields) ✓
- Filter tabs + search combination ✓
- Admin Tools data generation ✓
- Database migrations ✓
## Breaking Changes & Migration
**Database Schema Changes**
1. Run migrations: `npx prisma migrate deploy`
2. Reseed database: `npx prisma db seed`
3. Existing data incompatible (dev environment - safe to nuke)
**API Changes**
- POST /events now requires vipIds array (not vipId string)
- GET /events returns vipIds array
- GET /vips/:id/schedule updated for multi-VIP
- Removed /common-events/* endpoints
**Frontend Type Changes**
- ScheduleEvent.vipIds: string[] (was vipId: string)
- EventFormData updated accordingly
- All pages handle array-based VIP assignment
## File Changes Summary
**Added:**
- backend/prisma/migrations/20260131180000_drop_duplicate_event_tables/
- backend/src/events/dto/add-vips-to-event.dto.ts
- frontend/src/components/InlineDriverSelector.tsx
- frontend/e2e/ (Playwright test structure)
- Documentation: NAVIGATION_UX_IMPROVEMENTS.md, PLAYWRIGHT_GUIDE.md
**Modified:**
- 30+ backend files (schema, services, DTOs, abilities)
- 20+ frontend files (pages, components, types)
- Admin tools, seed data, navigation
**Removed:**
- Event/EventAttendance/EventTemplate database tables
- Common events frontend pages
- Obsolete event template DTOs
## Next Steps
**Pending (Phase 3):**
- Activity Templates for bulk event creation
- Operations Dashboard (today's activities + conflicts)
- Complete workflow testing with real users
- Additional E2E test coverage
## Notes
- Development environment - no production data affected
- Database can be reset anytime: `npx prisma migrate reset`
- All servers tested and running successfully
- HMR working correctly for frontend changes
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -12,7 +12,7 @@ import { Callback } from '@/pages/Callback';
|
||||
import { PendingApproval } from '@/pages/PendingApproval';
|
||||
import { Dashboard } from '@/pages/Dashboard';
|
||||
import { CommandCenter } from '@/pages/CommandCenter';
|
||||
import { VIPList } from '@/pages/VIPList';
|
||||
import { VIPList } from '@/pages/VipList';
|
||||
import { VIPSchedule } from '@/pages/VIPSchedule';
|
||||
import { DriverList } from '@/pages/DriverList';
|
||||
import { VehicleList } from '@/pages/VehicleList';
|
||||
@@ -43,6 +43,7 @@ function App() {
|
||||
authorizationParams={{
|
||||
redirect_uri: `${window.location.origin}/callback`,
|
||||
audience: audience,
|
||||
scope: 'openid profile email offline_access',
|
||||
}}
|
||||
useRefreshTokens={true}
|
||||
cacheLocation="localstorage"
|
||||
@@ -102,12 +103,13 @@ function App() {
|
||||
<Route path="/users" element={<UserList />} />
|
||||
<Route path="/admin-tools" element={<AdminTools />} />
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</AbilityProvider>
|
||||
</AuthProvider>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { X } from 'lucide-react';
|
||||
import { X, AlertTriangle, Users, Car } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { ScheduleEvent, VIP, Driver, Vehicle } from '@/types';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
|
||||
interface EventFormProps {
|
||||
event?: ScheduleEvent | null;
|
||||
@@ -10,41 +13,27 @@ interface EventFormProps {
|
||||
isSubmitting: boolean;
|
||||
}
|
||||
|
||||
interface ScheduleEvent {
|
||||
id: string;
|
||||
vipId: string;
|
||||
title: string;
|
||||
location: string | null;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
description: string | null;
|
||||
type: string;
|
||||
status: string;
|
||||
driverId: string | null;
|
||||
}
|
||||
|
||||
interface VIP {
|
||||
id: string;
|
||||
name: string;
|
||||
organization: string | null;
|
||||
}
|
||||
|
||||
interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export interface EventFormData {
|
||||
vipId: string;
|
||||
vipIds: string[];
|
||||
title: string;
|
||||
location?: string;
|
||||
pickupLocation?: string;
|
||||
dropoffLocation?: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
description?: string;
|
||||
type: string;
|
||||
status: string;
|
||||
driverId?: string;
|
||||
vehicleId?: string;
|
||||
forceAssign?: boolean;
|
||||
}
|
||||
|
||||
interface ScheduleConflict {
|
||||
id: string;
|
||||
title: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
|
||||
export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventFormProps) {
|
||||
@@ -61,18 +50,27 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState<EventFormData>({
|
||||
vipId: event?.vipId || '',
|
||||
vipIds: event?.vipIds || [],
|
||||
title: event?.title || '',
|
||||
location: event?.location || '',
|
||||
pickupLocation: event?.pickupLocation || '',
|
||||
dropoffLocation: event?.dropoffLocation || '',
|
||||
startTime: toDatetimeLocal(event?.startTime),
|
||||
endTime: toDatetimeLocal(event?.endTime),
|
||||
description: event?.description || '',
|
||||
type: event?.type || 'TRANSPORT',
|
||||
status: event?.status || 'SCHEDULED',
|
||||
driverId: event?.driverId || '',
|
||||
vehicleId: event?.vehicleId || '',
|
||||
});
|
||||
|
||||
// Fetch VIPs for dropdown
|
||||
const [showConflictDialog, setShowConflictDialog] = useState(false);
|
||||
const [conflicts, setConflicts] = useState<ScheduleConflict[]>([]);
|
||||
const [showCapacityWarning, setShowCapacityWarning] = useState(false);
|
||||
const [capacityExceeded, setCapacityExceeded] = useState<{capacity: number, requested: number} | null>(null);
|
||||
const [pendingData, setPendingData] = useState<EventFormData | null>(null);
|
||||
|
||||
// Fetch VIPs for selection
|
||||
const { data: vips } = useQuery<VIP[]>({
|
||||
queryKey: ['vips'],
|
||||
queryFn: async () => {
|
||||
@@ -90,20 +88,86 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch Vehicles for dropdown
|
||||
const { data: vehicles } = useQuery<Vehicle[]>({
|
||||
queryKey: ['vehicles'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/vehicles');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// Get selected vehicle capacity
|
||||
const selectedVehicle = vehicles?.find(v => v.id === formData.vehicleId);
|
||||
const seatsUsed = formData.vipIds.length;
|
||||
const seatsAvailable = selectedVehicle ? selectedVehicle.seatCapacity : 0;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Clean up the data - remove empty strings for optional fields and convert datetimes to ISO
|
||||
const cleanedData = {
|
||||
// Clean up the data
|
||||
const cleanedData: EventFormData = {
|
||||
...formData,
|
||||
startTime: new Date(formData.startTime).toISOString(),
|
||||
endTime: new Date(formData.endTime).toISOString(),
|
||||
location: formData.location || undefined,
|
||||
pickupLocation: formData.pickupLocation || undefined,
|
||||
dropoffLocation: formData.dropoffLocation || undefined,
|
||||
description: formData.description || undefined,
|
||||
driverId: formData.driverId || undefined,
|
||||
vehicleId: formData.vehicleId || undefined,
|
||||
};
|
||||
|
||||
onSubmit(cleanedData);
|
||||
// Store for potential retry
|
||||
setPendingData(cleanedData);
|
||||
|
||||
// Submit directly
|
||||
handleActualSubmit(cleanedData);
|
||||
};
|
||||
|
||||
const handleActualSubmit = async (data: EventFormData) => {
|
||||
try {
|
||||
await onSubmit(data);
|
||||
// Success handled by parent component
|
||||
} catch (error: any) {
|
||||
console.error('[EVENT_FORM] Submit failed:', error);
|
||||
|
||||
// Check for conflict error
|
||||
if (error.response?.data?.conflicts) {
|
||||
setConflicts(error.response.data.conflicts);
|
||||
setShowConflictDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for capacity error
|
||||
if (error.response?.data?.exceeded) {
|
||||
setCapacityExceeded({
|
||||
capacity: error.response.data.capacity,
|
||||
requested: error.response.data.requested,
|
||||
});
|
||||
setShowCapacityWarning(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Other errors are shown via toast by parent
|
||||
}
|
||||
};
|
||||
|
||||
const handleForceSubmit = () => {
|
||||
if (pendingData) {
|
||||
const dataWithForce = { ...pendingData, forceAssign: true };
|
||||
setShowConflictDialog(false);
|
||||
setShowCapacityWarning(false);
|
||||
handleActualSubmit(dataWithForce);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelConflict = () => {
|
||||
setShowConflictDialog(false);
|
||||
setShowCapacityWarning(false);
|
||||
setPendingData(null);
|
||||
setConflicts([]);
|
||||
setCapacityExceeded(null);
|
||||
};
|
||||
|
||||
const handleChange = (
|
||||
@@ -116,197 +180,385 @@ export function EventForm({ event, onSubmit, onCancel, isSubmitting }: EventForm
|
||||
}));
|
||||
};
|
||||
|
||||
const handleVipToggle = (vipId: string) => {
|
||||
setFormData((prev) => {
|
||||
const isSelected = prev.vipIds.includes(vipId);
|
||||
return {
|
||||
...prev,
|
||||
vipIds: isSelected
|
||||
? prev.vipIds.filter(id => id !== vipId)
|
||||
: [...prev.vipIds, vipId],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const selectedVipNames = vips
|
||||
?.filter(vip => formData.vipIds.includes(vip.id))
|
||||
.map(vip => vip.name)
|
||||
.join(', ') || 'None selected';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{event ? 'Edit Event' : 'Add New Event'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
{/* VIP Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
VIP *
|
||||
</label>
|
||||
<select
|
||||
name="vipId"
|
||||
required
|
||||
value={formData.vipId}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="">Select VIP</option>
|
||||
{vips?.map((vip) => (
|
||||
<option key={vip.id} value={vip.id}>
|
||||
{vip.name} {vip.organization ? `(${vip.organization})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Event Title *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
required
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Airport Pickup, Lunch Meeting"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="location"
|
||||
value={formData.location}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., LaGuardia Airport, Main Conference Room"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Start & End Time */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Start Time *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="startTime"
|
||||
required
|
||||
value={formData.startTime}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
End Time *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="endTime"
|
||||
required
|
||||
value={formData.endTime}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Event Type *
|
||||
</label>
|
||||
<select
|
||||
name="type"
|
||||
required
|
||||
value={formData.type}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="TRANSPORT">Transport</option>
|
||||
<option value="MEETING">Meeting</option>
|
||||
<option value="EVENT">Event</option>
|
||||
<option value="MEAL">Meal</option>
|
||||
<option value="ACCOMMODATION">Accommodation</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Status *
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
required
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="SCHEDULED">Scheduled</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="CANCELLED">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Driver Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Assigned Driver
|
||||
</label>
|
||||
<select
|
||||
name="driverId"
|
||||
value={formData.driverId}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="">No driver assigned</option>
|
||||
{drivers?.map((driver) => (
|
||||
<option key={driver.id} value={driver.id}>
|
||||
{driver.name} ({driver.phone})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Additional notes or instructions"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b sticky top-0 bg-white z-10">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{event ? 'Edit Event' : 'Add New Event'}
|
||||
</h2>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : event ? 'Update Event' : 'Create Event'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
{/* VIP Multi-Select */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<Users className="inline h-4 w-4 mr-1" />
|
||||
VIPs * (select one or more)
|
||||
</label>
|
||||
|
||||
<div className="border border-gray-300 rounded-md p-3 max-h-48 overflow-y-auto">
|
||||
{vips?.map((vip) => (
|
||||
<label
|
||||
key={vip.id}
|
||||
className="flex items-center py-2 px-3 hover:bg-gray-50 rounded cursor-pointer"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.vipIds.includes(vip.id)}
|
||||
onChange={() => handleVipToggle(vip.id)}
|
||||
className="h-4 w-4 text-primary rounded border-gray-300 focus:ring-primary"
|
||||
/>
|
||||
<span className="ml-3 text-base text-gray-700">
|
||||
{vip.name}
|
||||
{vip.organization && (
|
||||
<span className="text-sm text-gray-500 ml-2">({vip.organization})</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
<strong>Selected ({formData.vipIds.length}):</strong> {selectedVipNames}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Event Title *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
required
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Transport to Campfire Night"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Pickup & Dropoff Locations */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Pickup Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pickupLocation"
|
||||
value={formData.pickupLocation}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Grand Hotel Lobby"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Dropoff Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="dropoffLocation"
|
||||
value={formData.dropoffLocation}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Camp Amphitheater"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Start & End Time */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Start Time *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="startTime"
|
||||
required
|
||||
value={formData.startTime}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
End Time *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="endTime"
|
||||
required
|
||||
value={formData.endTime}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vehicle Selection with Capacity */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<Car className="inline h-4 w-4 mr-1" />
|
||||
Assigned Vehicle
|
||||
</label>
|
||||
<select
|
||||
name="vehicleId"
|
||||
value={formData.vehicleId}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="">No vehicle assigned</option>
|
||||
{vehicles?.map((vehicle) => (
|
||||
<option key={vehicle.id} value={vehicle.id}>
|
||||
{vehicle.name} ({vehicle.type}, {vehicle.seatCapacity} seats)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedVehicle && (
|
||||
<div className={`mt-2 text-sm ${seatsUsed > seatsAvailable ? 'text-red-600 font-medium' : 'text-gray-600'}`}>
|
||||
Capacity: {seatsUsed}/{seatsAvailable} seats used
|
||||
{seatsUsed > seatsAvailable && ' ⚠️ OVER CAPACITY'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Driver Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Assigned Driver
|
||||
</label>
|
||||
<select
|
||||
name="driverId"
|
||||
value={formData.driverId}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="">No driver assigned</option>
|
||||
{drivers?.map((driver) => (
|
||||
<option key={driver.id} value={driver.id}>
|
||||
{driver.name} ({driver.phone})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Event Type & Status */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Event Type *
|
||||
</label>
|
||||
<select
|
||||
name="type"
|
||||
required
|
||||
value={formData.type}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="TRANSPORT">Transport</option>
|
||||
<option value="MEETING">Meeting</option>
|
||||
<option value="EVENT">Event</option>
|
||||
<option value="MEAL">Meal</option>
|
||||
<option value="ACCOMMODATION">Accommodation</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Status *
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
required
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="SCHEDULED">Scheduled</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="CANCELLED">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Additional notes or instructions"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || formData.vipIds.length === 0}
|
||||
className="flex-1 bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 disabled:opacity-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : event ? 'Update Event' : 'Create Event'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conflict Dialog */}
|
||||
{showConflictDialog && createPortal(
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-[60]">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
|
||||
<AlertTriangle className="h-6 w-6 text-yellow-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Scheduling Conflict Detected
|
||||
</h3>
|
||||
<p className="text-base text-gray-600 mb-4">
|
||||
This driver already has {conflicts.length} conflicting event{conflicts.length > 1 ? 's' : ''} scheduled during this time:
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{conflicts.map((conflict) => (
|
||||
<div
|
||||
key={conflict.id}
|
||||
className="bg-yellow-50 border border-yellow-200 rounded-md p-4"
|
||||
>
|
||||
<div className="font-medium text-gray-900">{conflict.title}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">
|
||||
{formatDateTime(conflict.startTime)} - {formatDateTime(conflict.endTime)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-base text-gray-700 font-medium mb-6">
|
||||
Do you want to proceed with this assignment anyway?
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCancelConflict}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleForceSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-3 bg-yellow-600 text-white rounded-md text-base font-medium hover:bg-yellow-700 disabled:opacity-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Assign Anyway'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{/* Capacity Warning Dialog */}
|
||||
{showCapacityWarning && capacityExceeded && createPortal(
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-[60]">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
|
||||
<AlertTriangle className="h-6 w-6 text-orange-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Vehicle Capacity Exceeded
|
||||
</h3>
|
||||
<p className="text-base text-gray-600 mb-4">
|
||||
You've assigned {capacityExceeded.requested} VIP{capacityExceeded.requested > 1 ? 's' : ''} to a vehicle with only {capacityExceeded.capacity} seat{capacityExceeded.capacity > 1 ? 's' : ''}.
|
||||
</p>
|
||||
|
||||
<p className="text-base text-gray-700 font-medium mb-6">
|
||||
Do you want to proceed anyway?
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCancelConflict}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleForceSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-3 bg-orange-600 text-white rounded-md text-base font-medium hover:bg-orange-700 disabled:opacity-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Anyway'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
21
frontend/src/components/FilterChip.tsx
Normal file
21
frontend/src/components/FilterChip.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface FilterChipProps {
|
||||
label: string;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
export function FilterChip({ label, onRemove }: FilterChipProps) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
{label}
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
|
||||
aria-label={`Remove ${label} filter`}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
95
frontend/src/components/FilterModal.tsx
Normal file
95
frontend/src/components/FilterModal.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface FilterOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface FilterGroup {
|
||||
label: string;
|
||||
options: FilterOption[];
|
||||
selectedValues: string[];
|
||||
onToggle: (value: string) => void;
|
||||
}
|
||||
|
||||
interface FilterModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
filterGroups: FilterGroup[];
|
||||
onClear: () => void;
|
||||
onApply: () => void;
|
||||
}
|
||||
|
||||
export function FilterModal({ isOpen, onClose, filterGroups, onClear, onApply }: FilterModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleApply = () => {
|
||||
onApply();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
onClear();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-4 border-b sticky top-0 bg-white">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Filters</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-6">
|
||||
{filterGroups.map((group, index) => (
|
||||
<div key={index}>
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">{group.label}</h3>
|
||||
<div className="space-y-2">
|
||||
{group.options.map((option) => (
|
||||
<label
|
||||
key={option.value}
|
||||
className="flex items-center cursor-pointer py-2 px-3 rounded-md hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={group.selectedValues.includes(option.value)}
|
||||
onChange={() => group.onToggle(option.value)}
|
||||
className="rounded border-gray-300 text-primary focus:ring-primary h-5 w-5"
|
||||
/>
|
||||
<span className="ml-3 text-base text-gray-700">{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 p-4 border-t bg-gray-50 sticky bottom-0">
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="flex-1 bg-white text-gray-700 py-3 px-4 rounded-md hover:bg-gray-100 font-medium border border-gray-300"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
onClick={handleApply}
|
||||
className="flex-1 bg-primary text-white py-3 px-4 rounded-md hover:bg-primary/90 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
239
frontend/src/components/InlineDriverSelector.tsx
Normal file
239
frontend/src/components/InlineDriverSelector.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import toast from 'react-hot-toast';
|
||||
import { api } from '@/lib/api';
|
||||
import { ChevronDown, AlertTriangle, X } from 'lucide-react';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
|
||||
interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
interface ScheduleConflict {
|
||||
id: string;
|
||||
title: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
|
||||
interface InlineDriverSelectorProps {
|
||||
eventId: string;
|
||||
currentDriverId?: string | null;
|
||||
currentDriverName?: string | null;
|
||||
onDriverChange?: () => void;
|
||||
}
|
||||
|
||||
export function InlineDriverSelector({
|
||||
eventId,
|
||||
currentDriverId,
|
||||
currentDriverName,
|
||||
onDriverChange,
|
||||
}: InlineDriverSelectorProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [showConflictDialog, setShowConflictDialog] = useState(false);
|
||||
const [conflicts, setConflicts] = useState<ScheduleConflict[]>([]);
|
||||
const [pendingDriverId, setPendingDriverId] = useState<string | null>(null);
|
||||
|
||||
// Fetch all drivers
|
||||
const { data: drivers, isLoading: driversLoading } = useQuery<Driver[]>({
|
||||
queryKey: ['drivers'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/drivers');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// Update driver mutation
|
||||
const updateDriverMutation = useMutation({
|
||||
mutationFn: async ({ driverId, forceAssign = false }: { driverId: string | null; forceAssign?: boolean }) => {
|
||||
await api.patch(`/events/${eventId}`, {
|
||||
driverId,
|
||||
forceAssign,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['events'] });
|
||||
setIsOpen(false);
|
||||
setShowConflictDialog(false);
|
||||
setPendingDriverId(null);
|
||||
setConflicts([]);
|
||||
toast.success('Driver assigned successfully');
|
||||
onDriverChange?.();
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error('[DRIVER] Assignment failed:', error);
|
||||
|
||||
// Check if this is a conflict error
|
||||
if (error.response?.data?.conflicts) {
|
||||
setConflicts(error.response.data.conflicts);
|
||||
setShowConflictDialog(true);
|
||||
setIsOpen(false);
|
||||
} else {
|
||||
toast.error(error.response?.data?.message || 'Failed to assign driver');
|
||||
setIsOpen(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Handle driver selection
|
||||
const handleSelectDriver = (driverId: string | null) => {
|
||||
setPendingDriverId(driverId);
|
||||
updateDriverMutation.mutate({ driverId });
|
||||
};
|
||||
|
||||
// Handle force assign (override conflict)
|
||||
const handleForceAssign = () => {
|
||||
if (pendingDriverId !== null) {
|
||||
updateDriverMutation.mutate({
|
||||
driverId: pendingDriverId,
|
||||
forceAssign: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle cancel conflict dialog
|
||||
const handleCancelConflict = () => {
|
||||
setShowConflictDialog(false);
|
||||
setPendingDriverId(null);
|
||||
setConflicts([]);
|
||||
};
|
||||
|
||||
const selectedDriver = drivers?.find(d => d.id === currentDriverId);
|
||||
const displayName = selectedDriver?.name || currentDriverName || 'Unassigned';
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={`inline-flex items-center gap-1 px-2 py-1 text-sm rounded transition-colors ${
|
||||
currentDriverId
|
||||
? 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-gray-400 hover:bg-gray-50'
|
||||
}`}
|
||||
disabled={updateDriverMutation.isPending}
|
||||
>
|
||||
<span>{displayName}</span>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
{/* Driver Selection Modal */}
|
||||
{isOpen && createPortal(
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden">
|
||||
<div className="flex items-center justify-between p-4 border-b sticky top-0 bg-white">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Assign Driver</h2>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto max-h-[calc(80vh-8rem)]">
|
||||
{driversLoading ? (
|
||||
<div className="p-8 text-center text-gray-500">Loading drivers...</div>
|
||||
) : (
|
||||
<div className="p-2">
|
||||
<button
|
||||
onClick={() => handleSelectDriver(null)}
|
||||
className="w-full text-left px-4 py-3 text-base text-gray-400 hover:bg-gray-50 transition-colors rounded-md"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Unassigned
|
||||
</button>
|
||||
{drivers?.map((driver) => (
|
||||
<button
|
||||
key={driver.id}
|
||||
onClick={() => handleSelectDriver(driver.id)}
|
||||
className={`w-full text-left px-4 py-3 text-base transition-colors rounded-md ${
|
||||
driver.id === currentDriverId
|
||||
? 'bg-blue-50 text-blue-700 font-medium'
|
||||
: 'text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<div>{driver.name}</div>
|
||||
{driver.phone && (
|
||||
<div className="text-sm text-gray-500">{driver.phone}</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{/* Conflict Dialog */}
|
||||
{showConflictDialog && createPortal(
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
|
||||
<AlertTriangle className="h-6 w-6 text-yellow-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Scheduling Conflict Detected
|
||||
</h3>
|
||||
<p className="text-base text-gray-600 mb-4">
|
||||
This driver already has {conflicts.length} conflicting event{conflicts.length > 1 ? 's' : ''} scheduled during this time:
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{conflicts.map((conflict) => (
|
||||
<div
|
||||
key={conflict.id}
|
||||
className="bg-yellow-50 border border-yellow-200 rounded-md p-4"
|
||||
>
|
||||
<div className="font-medium text-gray-900">{conflict.title}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">
|
||||
{formatDateTime(conflict.startTime)} - {formatDateTime(conflict.endTime)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-base text-gray-700 font-medium mb-6">
|
||||
Do you want to proceed with this assignment anyway?
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCancelConflict}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleForceAssign}
|
||||
disabled={updateDriverMutation.isPending}
|
||||
className="flex-1 px-4 py-3 bg-yellow-600 text-white rounded-md text-base font-medium hover:bg-yellow-700 disabled:opacity-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
{updateDriverMutation.isPending ? 'Assigning...' : 'Assign Anyway'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { ReactNode, useState, useRef, useEffect } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useAbility } from '@/contexts/AbilityContext';
|
||||
import { Action } from '@/lib/abilities';
|
||||
import { api } from '@/lib/api';
|
||||
import {
|
||||
Plane,
|
||||
Users,
|
||||
@@ -14,8 +16,22 @@ import {
|
||||
LayoutDashboard,
|
||||
Settings,
|
||||
Radio,
|
||||
Menu,
|
||||
X,
|
||||
ChevronDown,
|
||||
Shield,
|
||||
CalendarDays,
|
||||
Presentation,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
role: string;
|
||||
isApproved: boolean;
|
||||
}
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
@@ -25,18 +41,38 @@ export function Layout({ children }: LayoutProps) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const ability = useAbility();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [adminDropdownOpen, setAdminDropdownOpen] = useState(false);
|
||||
const [mobileAdminExpanded, setMobileAdminExpanded] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Define navigation items with permission requirements
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setAdminDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Define main navigation items (reorganized by workflow priority)
|
||||
const allNavigation = [
|
||||
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, alwaysShow: true },
|
||||
{ name: 'War Room', href: '/command-center', icon: Radio, requireRead: 'ScheduleEvent' as const },
|
||||
{ name: 'VIPs', href: '/vips', icon: Users, requireRead: 'VIP' as const },
|
||||
{ name: 'Drivers', href: '/drivers', icon: Car, requireRead: 'Driver' as const },
|
||||
{ name: 'Vehicles', href: '/vehicles', icon: Truck, requireRead: 'Vehicle' as const },
|
||||
{ name: 'Schedule', href: '/events', icon: Calendar, requireRead: 'ScheduleEvent' as const },
|
||||
{ name: 'Activities', href: '/events', icon: Calendar, requireRead: 'ScheduleEvent' as const },
|
||||
{ name: 'Flights', href: '/flights', icon: Plane, requireRead: 'Flight' as const },
|
||||
{ name: 'Users', href: '/users', icon: UserCog, requireRead: 'User' as const },
|
||||
{ name: 'Admin Tools', href: '/admin-tools', icon: Settings, requireRead: 'User' as const },
|
||||
];
|
||||
|
||||
// Admin dropdown items (nested under Admin)
|
||||
const adminItems = [
|
||||
{ name: 'Users', href: '/users', icon: UserCog },
|
||||
{ name: 'Admin Tools', href: '/admin-tools', icon: Settings },
|
||||
];
|
||||
|
||||
// Filter navigation based on CASL permissions
|
||||
@@ -48,7 +84,23 @@ export function Layout({ children }: LayoutProps) {
|
||||
return true;
|
||||
});
|
||||
|
||||
// Show admin dropdown if user can read User resources
|
||||
const canAccessAdmin = ability.can(Action.Read, 'User');
|
||||
|
||||
// Fetch pending approvals count for admins
|
||||
const { data: users } = useQuery<User[]>({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/users');
|
||||
return data;
|
||||
},
|
||||
enabled: canAccessAdmin, // Only fetch if user can access admin
|
||||
});
|
||||
|
||||
const pendingApprovalsCount = users?.filter((u) => !u.isApproved).length || 0;
|
||||
|
||||
const isActive = (path: string) => location.pathname === path;
|
||||
const isAdminActive = adminItems.some(item => isActive(item.href));
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
@@ -56,14 +108,27 @@ export function Layout({ children }: LayoutProps) {
|
||||
<nav className="bg-white shadow-sm border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex">
|
||||
<div className="flex items-center">
|
||||
{/* Mobile menu button - shows on portrait iPad and smaller */}
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary mr-2"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<Plane className="h-8 w-8 text-primary" />
|
||||
<span className="ml-2 text-xl font-bold text-gray-900">
|
||||
VIP Coordinator
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
|
||||
{/* Desktop navigation - shows on landscape iPad and larger */}
|
||||
<div className="hidden lg:ml-6 lg:flex lg:space-x-8 lg:items-center">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
@@ -81,10 +146,61 @@ export function Layout({ children }: LayoutProps) {
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Admin Dropdown */}
|
||||
{canAccessAdmin && (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setAdminDropdownOpen(!adminDropdownOpen)}
|
||||
className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
isAdminActive
|
||||
? 'border-primary text-gray-900'
|
||||
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<Shield className="h-4 w-4 mr-2" />
|
||||
Admin
|
||||
{pendingApprovalsCount > 0 && (
|
||||
<span className="ml-1.5 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full">
|
||||
{pendingApprovalsCount}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDown className={`h-4 w-4 ml-1 transition-transform ${adminDropdownOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* Dropdown menu */}
|
||||
{adminDropdownOpen && (
|
||||
<div className="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-50">
|
||||
<div className="py-1">
|
||||
{adminItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
onClick={() => setAdminDropdownOpen(false)}
|
||||
className={`flex items-center px-4 py-2 text-sm ${
|
||||
isActive(item.href)
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4 mr-3" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
|
||||
{/* User info and logout */}
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<div className="hidden sm:block text-right">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{backendUser?.name || user?.name || user?.email}
|
||||
</div>
|
||||
@@ -96,16 +212,157 @@ export function Layout({ children }: LayoutProps) {
|
||||
</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
className="inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Sign Out
|
||||
<LogOut className="h-5 w-5 sm:h-4 sm:w-4 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Sign Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu drawer - overlay */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Drawer panel */}
|
||||
<div className="fixed inset-y-0 left-0 w-full max-w-sm bg-white shadow-xl">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Drawer header */}
|
||||
<div className="flex items-center justify-between px-4 h-16 border-b">
|
||||
<div className="flex items-center">
|
||||
<Plane className="h-8 w-8 text-primary" />
|
||||
<span className="ml-2 text-xl font-bold text-gray-900">
|
||||
VIP Coordinator
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User info in drawer */}
|
||||
<div className="px-4 py-4 border-b bg-gray-50">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{backendUser?.name || user?.name || user?.email}
|
||||
</div>
|
||||
{backendUser?.role && (
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
{backendUser.role}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation links */}
|
||||
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`flex items-center px-4 py-3 text-base font-medium rounded-md ${
|
||||
isActive(item.href)
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Icon className="h-5 w-5 mr-3 flex-shrink-0" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Admin Section (Expandable) */}
|
||||
{canAccessAdmin && (
|
||||
<div className="space-y-1">
|
||||
<button
|
||||
onClick={() => setMobileAdminExpanded(!mobileAdminExpanded)}
|
||||
className={`w-full flex items-center justify-between px-4 py-3 text-base font-medium rounded-md ${
|
||||
isAdminActive
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-5 w-5 mr-3 flex-shrink-0" />
|
||||
Admin
|
||||
{pendingApprovalsCount > 0 && (
|
||||
<span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full">
|
||||
{pendingApprovalsCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ChevronDown className={`h-5 w-5 transition-transform ${mobileAdminExpanded ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* Nested admin items */}
|
||||
{mobileAdminExpanded && (
|
||||
<div className="ml-4 space-y-1">
|
||||
{adminItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
setMobileAdminExpanded(false);
|
||||
}}
|
||||
className={`flex items-center px-4 py-3 text-base rounded-md ${
|
||||
isActive(item.href)
|
||||
? 'bg-primary/10 text-primary font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Logout button at bottom of drawer */}
|
||||
<div className="border-t px-4 py-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
logout();
|
||||
}}
|
||||
className="w-full flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<LogOut className="h-5 w-5 mr-2" />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
{children}
|
||||
|
||||
@@ -7,8 +7,9 @@ interface ProtectedRouteProps {
|
||||
}
|
||||
|
||||
export function ProtectedRoute({ children }: ProtectedRouteProps) {
|
||||
const { isAuthenticated, isLoading, isApproved } = useAuth();
|
||||
const { isAuthenticated, isLoading, isApproved, backendUser, authError, logout } = useAuth();
|
||||
|
||||
// Show loading while Auth0 is loading OR while fetching backend user profile
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
@@ -20,13 +21,50 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
|
||||
);
|
||||
}
|
||||
|
||||
// Show error if authentication failed
|
||||
if (authError) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
|
||||
<svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Authentication Error</h3>
|
||||
<p className="text-sm text-gray-500 mb-6">{authError}</p>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Return to Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
if (!isApproved) {
|
||||
// Only check approval status if we have actually fetched the backend user
|
||||
// This prevents redirecting to pending-approval during the initial fetch after refresh
|
||||
if (backendUser && !isApproved) {
|
||||
return <Navigate to="/pending-approval" replace />;
|
||||
}
|
||||
|
||||
// If authenticated but still waiting for backend user, show loading
|
||||
if (!backendUser) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading user profile...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
96
frontend/src/components/Skeleton.tsx
Normal file
96
frontend/src/components/Skeleton.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Skeleton loading components for better perceived performance
|
||||
*/
|
||||
|
||||
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
{[1, 2, 3, 4, 5].map((col) => (
|
||||
<th key={col} className="px-6 py-3">
|
||||
<div className="h-4 bg-gray-200 rounded animate-pulse" />
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{Array.from({ length: rows }).map((_, rowIndex) => (
|
||||
<tr key={rowIndex}>
|
||||
{[1, 2, 3, 4, 5].map((col) => (
|
||||
<td key={col} className="px-6 py-4">
|
||||
<div className="h-4 bg-gray-200 rounded animate-pulse" style={{ width: `${60 + Math.random() * 40}%` }} />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardSkeleton({ cards = 3 }: { cards?: number }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: cards }).map((_, index) => (
|
||||
<div key={index} className="bg-white shadow rounded-lg p-4 animate-pulse">
|
||||
<div className="mb-3">
|
||||
<div className="h-6 bg-gray-200 rounded w-1/2 mb-2" />
|
||||
<div className="h-4 bg-gray-200 rounded w-1/3" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<div className="h-3 bg-gray-200 rounded w-20 mb-1" />
|
||||
<div className="h-4 bg-gray-200 rounded w-24" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="h-3 bg-gray-200 rounded w-20 mb-1" />
|
||||
<div className="h-4 bg-gray-200 rounded w-16" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-3 border-t border-gray-200">
|
||||
<div className="flex-1 h-11 bg-gray-200 rounded" />
|
||||
<div className="flex-1 h-11 bg-gray-200 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function VIPCardSkeleton({ cards = 6 }: { cards?: number }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: cards }).map((_, index) => (
|
||||
<div key={index} className="bg-white rounded-lg shadow p-6 animate-pulse">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="h-6 bg-gray-200 rounded w-3/4 mb-2" />
|
||||
<div className="h-4 bg-gray-200 rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center">
|
||||
<div className="h-4 w-4 bg-gray-200 rounded mr-2" />
|
||||
<div className="h-4 bg-gray-200 rounded w-32" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="h-4 w-4 bg-gray-200 rounded mr-2" />
|
||||
<div className="h-4 bg-gray-200 rounded w-24" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="h-4 w-4 bg-gray-200 rounded mr-2" />
|
||||
<div className="h-4 bg-gray-200 rounded w-40" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t flex gap-2">
|
||||
<div className="flex-1 h-9 bg-gray-200 rounded" />
|
||||
<div className="flex-1 h-9 bg-gray-200 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -86,23 +86,25 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-full md:max-w-2xl lg:max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-4 md:p-6 border-b">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900">
|
||||
{vip ? 'Edit VIP' : 'Add New VIP'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
className="text-gray-400 hover:text-gray-600 p-2 rounded-md hover:bg-gray-100"
|
||||
style={{ minWidth: '44px', minHeight: '44px' }}
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<form onSubmit={handleSubmit} className="p-4 md:p-6 space-y-5">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
@@ -111,13 +113,14 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Organization
|
||||
</label>
|
||||
<input
|
||||
@@ -125,13 +128,14 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
name="organization"
|
||||
value={formData.organization}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Department */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Department *
|
||||
</label>
|
||||
<select
|
||||
@@ -139,7 +143,8 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
required
|
||||
value={formData.department}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<option value="OFFICE_OF_DEVELOPMENT">Office of Development</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
@@ -148,7 +153,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
|
||||
{/* Arrival Mode */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Arrival Mode *
|
||||
</label>
|
||||
<select
|
||||
@@ -156,7 +161,8 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
required
|
||||
value={formData.arrivalMode}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<option value="FLIGHT">Flight</option>
|
||||
<option value="SELF_DRIVING">Self Driving</option>
|
||||
@@ -165,7 +171,7 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
|
||||
{/* Expected Arrival */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Expected Arrival
|
||||
</label>
|
||||
<input
|
||||
@@ -173,42 +179,43 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
name="expectedArrival"
|
||||
value={formData.expectedArrival}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Transport Checkboxes */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center cursor-pointer" style={{ minHeight: '28px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="airportPickup"
|
||||
checked={formData.airportPickup}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary"
|
||||
className="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary"
|
||||
/>
|
||||
<label className="ml-2 block text-sm text-gray-700">
|
||||
<span className="ml-3 text-base text-gray-700">
|
||||
Airport pickup required
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div className="flex items-center">
|
||||
<label className="flex items-center cursor-pointer" style={{ minHeight: '28px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="venueTransport"
|
||||
checked={formData.venueTransport}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary"
|
||||
className="h-5 w-5 text-primary border-gray-300 rounded focus:ring-primary"
|
||||
/>
|
||||
<label className="ml-2 block text-sm text-gray-700">
|
||||
<span className="ml-3 text-base text-gray-700">
|
||||
Venue transport required
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
@@ -217,23 +224,25 @@ export function VIPForm({ vip, onSubmit, onCancel, isSubmitting }: VIPFormProps)
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Any special requirements or notes"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<div className="flex flex-col sm:flex-row gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 disabled:opacity-50"
|
||||
className="flex-1 bg-primary text-white py-3 px-4 rounded-md hover:bg-primary/90 disabled:opacity-50 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : vip ? 'Update VIP' : 'Create VIP'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300"
|
||||
className="flex-1 bg-gray-200 text-gray-800 py-3 px-4 rounded-md hover:bg-gray-300 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -18,6 +18,8 @@ interface AuthContextType {
|
||||
user: any;
|
||||
backendUser: BackendUser | null;
|
||||
isApproved: boolean;
|
||||
isFetchingUser: boolean;
|
||||
authError: string | null;
|
||||
loginWithRedirect: () => void;
|
||||
logout: () => void;
|
||||
}
|
||||
@@ -36,32 +38,65 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
const [backendUser, setBackendUser] = useState<BackendUser | null>(null);
|
||||
const [fetchingUser, setFetchingUser] = useState(false);
|
||||
const [authError, setAuthError] = useState<string | null>(null);
|
||||
|
||||
// Set up token and fetch backend user profile
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && !fetchingUser) {
|
||||
// Wait for Auth0 to finish loading before fetching token
|
||||
if (isAuthenticated && !isLoading && !fetchingUser && !backendUser) {
|
||||
setFetchingUser(true);
|
||||
setAuthError(null);
|
||||
|
||||
// Add timeout to prevent infinite loading
|
||||
const timeoutId = setTimeout(() => {
|
||||
setAuthError('Authentication timeout - please try logging in again');
|
||||
setFetchingUser(false);
|
||||
}, 10000); // 10 second timeout
|
||||
|
||||
getAccessTokenSilently()
|
||||
.then(async (token) => {
|
||||
clearTimeout(timeoutId);
|
||||
console.log('[AUTH] Got access token, fetching user profile');
|
||||
localStorage.setItem('auth0_token', token);
|
||||
|
||||
// Fetch backend user profile
|
||||
try {
|
||||
const response = await api.get('/auth/profile');
|
||||
console.log('[AUTH] User profile fetched successfully:', response.data.email);
|
||||
setBackendUser(response.data);
|
||||
} catch (error) {
|
||||
setAuthError(null);
|
||||
} catch (error: any) {
|
||||
console.error('[AUTH] Failed to fetch user profile:', error);
|
||||
setBackendUser(null);
|
||||
|
||||
// Set specific error message
|
||||
if (error.response?.status === 401) {
|
||||
setAuthError('Your account is pending approval or your session has expired');
|
||||
} else {
|
||||
setAuthError('Failed to load user profile - please try logging in again');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
clearTimeout(timeoutId);
|
||||
console.error('[AUTH] Failed to get token:', error);
|
||||
setBackendUser(null);
|
||||
|
||||
// Handle specific Auth0 errors
|
||||
if (error.error === 'missing_refresh_token' || error.message?.includes('Missing Refresh Token')) {
|
||||
setAuthError('Session expired - please log in again');
|
||||
} else if (error.error === 'login_required') {
|
||||
setAuthError('Login required');
|
||||
} else {
|
||||
setAuthError('Authentication failed - please try logging in again');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setFetchingUser(false);
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated, getAccessTokenSilently]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAuthenticated, isLoading]);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth0_token');
|
||||
@@ -76,6 +111,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
user,
|
||||
backendUser,
|
||||
isApproved: backendUser?.isApproved ?? false,
|
||||
isFetchingUser: fetchingUser,
|
||||
authError,
|
||||
loginWithRedirect,
|
||||
logout: handleLogout,
|
||||
}}
|
||||
|
||||
25
frontend/src/hooks/useDebounce.ts
Normal file
25
frontend/src/hooks/useDebounce.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
/**
|
||||
* Debounces a value by the specified delay.
|
||||
* Useful for search inputs to avoid excessive filtering/API calls.
|
||||
*
|
||||
* @param value - The value to debounce
|
||||
* @param delay - Delay in milliseconds (default: 300ms)
|
||||
* @returns The debounced value
|
||||
*/
|
||||
export function useDebounce<T>(value: T, delay: number = 300): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
@@ -23,6 +23,8 @@ export type Subjects =
|
||||
| 'ScheduleEvent'
|
||||
| 'Flight'
|
||||
| 'Vehicle'
|
||||
| 'Event'
|
||||
| 'EventTemplate'
|
||||
| 'all';
|
||||
|
||||
/**
|
||||
@@ -66,10 +68,10 @@ export function defineAbilitiesFor(user: User | null): AppAbility {
|
||||
can(Action.Manage, 'all');
|
||||
} else if (user.role === 'COORDINATOR') {
|
||||
// Coordinators have full access except user management
|
||||
can(Action.Read, 'all');
|
||||
can(Action.Create, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle']);
|
||||
can(Action.Update, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle']);
|
||||
can(Action.Delete, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle']);
|
||||
can(Action.Read, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle', 'Event', 'EventTemplate']);
|
||||
can(Action.Create, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle', 'Event', 'EventTemplate']);
|
||||
can(Action.Update, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle', 'Event', 'EventTemplate']);
|
||||
can(Action.Delete, ['VIP', 'Driver', 'ScheduleEvent', 'Flight', 'Vehicle', 'Event', 'EventTemplate']);
|
||||
|
||||
// Cannot manage users
|
||||
cannot(Action.Create, 'User');
|
||||
|
||||
126
frontend/src/lib/types.ts
Normal file
126
frontend/src/lib/types.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* TypeScript interfaces for VIP Coordinator
|
||||
*/
|
||||
|
||||
export interface VIP {
|
||||
id: string;
|
||||
name: string;
|
||||
organization?: string;
|
||||
department: 'OFFICE_OF_DEVELOPMENT' | 'ADMIN';
|
||||
arrivalMode: 'FLIGHT' | 'SELF_DRIVING';
|
||||
expectedArrival?: string;
|
||||
airportPickup: boolean;
|
||||
venueTransport: boolean;
|
||||
notes?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
}
|
||||
|
||||
export interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
department?: 'OFFICE_OF_DEVELOPMENT' | 'ADMIN';
|
||||
userId?: string;
|
||||
shiftStartTime?: string;
|
||||
shiftEndTime?: string;
|
||||
isAvailable: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
}
|
||||
|
||||
export interface ScheduleEvent {
|
||||
id: string;
|
||||
vipId: string;
|
||||
vip?: VIP;
|
||||
title: string;
|
||||
pickupLocation?: string;
|
||||
dropoffLocation?: string;
|
||||
location?: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
actualStartTime?: string;
|
||||
actualEndTime?: string;
|
||||
description?: string;
|
||||
type: 'TRANSPORT' | 'MEETING' | 'EVENT' | 'MEAL' | 'ACCOMMODATION';
|
||||
status: 'SCHEDULED' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
|
||||
driverId?: string;
|
||||
driver?: Driver;
|
||||
vehicleId?: string;
|
||||
eventId?: string;
|
||||
event?: Event;
|
||||
notes?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
}
|
||||
|
||||
export interface EventTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
defaultDuration: number; // in minutes
|
||||
location?: string;
|
||||
type: 'TRANSPORT' | 'MEETING' | 'EVENT' | 'MEAL' | 'ACCOMMODATION';
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
_count?: {
|
||||
events: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Event {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
location: string;
|
||||
type: 'TRANSPORT' | 'MEETING' | 'EVENT' | 'MEAL' | 'ACCOMMODATION';
|
||||
templateId?: string;
|
||||
template?: EventTemplate;
|
||||
attendees: EventAttendance[];
|
||||
scheduleTasks?: ScheduleEvent[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
_count?: {
|
||||
attendees: number;
|
||||
scheduleTasks: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface EventAttendance {
|
||||
id: string;
|
||||
eventId: string;
|
||||
vipId: string;
|
||||
vip: VIP;
|
||||
addedAt: string;
|
||||
}
|
||||
|
||||
export interface CreateEventTemplateDto {
|
||||
name: string;
|
||||
description?: string;
|
||||
defaultDuration: number;
|
||||
location?: string;
|
||||
type: 'TRANSPORT' | 'MEETING' | 'EVENT' | 'MEAL' | 'ACCOMMODATION';
|
||||
}
|
||||
|
||||
export interface CreateEventDto {
|
||||
name: string;
|
||||
description?: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
location: string;
|
||||
type: 'TRANSPORT' | 'MEETING' | 'EVENT' | 'MEAL' | 'ACCOMMODATION';
|
||||
templateId?: string;
|
||||
}
|
||||
|
||||
export interface AddVipsToEventDto {
|
||||
vipIds: string[];
|
||||
pickupMinutesBeforeEvent?: number;
|
||||
pickupLocationOverride?: string;
|
||||
}
|
||||
@@ -49,6 +49,7 @@ export function AdminTools() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const testVIPs = [
|
||||
// OFFICE_OF_DEVELOPMENT (10 VIPs) - Corporate sponsors, foundations, major donors
|
||||
{
|
||||
name: 'Sarah Chen',
|
||||
organization: 'Microsoft Corporation',
|
||||
@@ -59,23 +60,7 @@ export function AdminTools() {
|
||||
},
|
||||
{
|
||||
name: 'Marcus Johnson',
|
||||
organization: 'Goldman Sachs',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Dr. Aisha Patel',
|
||||
organization: 'Johns Hopkins Medicine',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Roberto Gonzalez',
|
||||
organization: 'Tesla Inc',
|
||||
organization: 'The Coca-Cola Company',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
@@ -83,55 +68,15 @@ export function AdminTools() {
|
||||
},
|
||||
{
|
||||
name: 'Jennifer Wu',
|
||||
organization: 'JPMorgan Chase',
|
||||
organization: 'JPMorgan Chase Foundation',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'David Okonkwo',
|
||||
organization: 'McKinsey & Company',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Emily Richardson',
|
||||
organization: 'Harvard University',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Yuki Tanaka',
|
||||
organization: 'Sony Corporation',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Alexander Volkov',
|
||||
organization: 'Deloitte Consulting',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Maria Rodriguez',
|
||||
organization: 'Bank of America',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'James O\'Brien',
|
||||
organization: 'Apple Inc',
|
||||
name: 'Roberto Gonzalez',
|
||||
organization: 'AT&T Inc',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
@@ -146,64 +91,121 @@ export function AdminTools() {
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Thomas Anderson',
|
||||
organization: 'Meta Platforms',
|
||||
name: 'David Okonkwo',
|
||||
organization: 'Bank of America',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Fatima Al-Rahman',
|
||||
organization: 'Morgan Stanley',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Henrik Larsson',
|
||||
organization: 'Spotify',
|
||||
name: 'Maria Rodriguez',
|
||||
organization: 'Walmart Foundation',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Dr. Maya Krishnan',
|
||||
organization: 'Stanford University',
|
||||
name: 'Yuki Tanaka',
|
||||
organization: 'Honda Motor Company',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Thomas Anderson',
|
||||
organization: 'Verizon Communications',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Isabella Costa',
|
||||
organization: 'Target Corporation',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
// ADMIN (10 VIPs) - BSA Leadership and Staff
|
||||
{
|
||||
name: 'Roger A. Krone',
|
||||
organization: 'BSA National President',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Emily Richardson',
|
||||
organization: 'BSA Chief Scout Executive',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'William Zhang',
|
||||
organization: 'Amazon Web Services',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
name: 'Dr. Maya Krishnan',
|
||||
organization: 'BSA National Director of Program',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'James O\'Brien',
|
||||
organization: 'BSA Northeast Regional Director',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Isabella Costa',
|
||||
organization: 'Citigroup',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
name: 'Fatima Al-Rahman',
|
||||
organization: 'BSA Western Region Executive',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: false,
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Mohammed Hassan',
|
||||
organization: 'Intel Corporation',
|
||||
department: 'OFFICE_OF_DEVELOPMENT',
|
||||
name: 'William Zhang',
|
||||
organization: 'BSA Southern Region Council',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Sophie Laurent',
|
||||
organization: 'Yale University',
|
||||
organization: 'BSA National Volunteer Training',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Alexander Volkov',
|
||||
organization: 'BSA High Adventure Director',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'FLIGHT',
|
||||
airportPickup: true,
|
||||
venueTransport: false,
|
||||
},
|
||||
{
|
||||
name: 'Dr. Aisha Patel',
|
||||
organization: 'BSA STEM & Innovation Programs',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
venueTransport: true,
|
||||
},
|
||||
{
|
||||
name: 'Henrik Larsson',
|
||||
organization: 'BSA International Commissioner',
|
||||
department: 'ADMIN',
|
||||
arrivalMode: 'SELF_DRIVING',
|
||||
airportPickup: false,
|
||||
@@ -460,7 +462,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
// driverId and vehicleId left unassigned to avoid conflicts
|
||||
title: `Airport Pickup - ${vip.name}`,
|
||||
type: 'TRANSPORT',
|
||||
@@ -484,7 +486,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'Registration & VIP Badge Collection',
|
||||
type: 'EVENT',
|
||||
status: 'SCHEDULED',
|
||||
@@ -503,7 +505,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
// driverId and vehicleId left unassigned to avoid conflicts
|
||||
title: 'Transport to VIP Lodge',
|
||||
type: 'TRANSPORT',
|
||||
@@ -525,7 +527,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'VIP Lodge Check-in',
|
||||
type: 'ACCOMMODATION',
|
||||
status: 'SCHEDULED',
|
||||
@@ -545,7 +547,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'VIP Welcome Dinner',
|
||||
type: 'MEAL',
|
||||
status: 'SCHEDULED',
|
||||
@@ -569,7 +571,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'VIP Breakfast',
|
||||
type: 'MEAL',
|
||||
status: 'SCHEDULED',
|
||||
@@ -589,7 +591,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
// driverId and vehicleId left unassigned to avoid conflicts
|
||||
title: 'Transport to Opening Ceremony',
|
||||
type: 'TRANSPORT',
|
||||
@@ -612,7 +614,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'Jamboree Opening Ceremony',
|
||||
type: 'EVENT',
|
||||
status: 'SCHEDULED',
|
||||
@@ -632,7 +634,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'Donor Recognition & Campaign Update',
|
||||
type: 'MEETING',
|
||||
status: 'SCHEDULED',
|
||||
@@ -652,7 +654,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'VIP Luncheon',
|
||||
type: 'MEAL',
|
||||
status: 'SCHEDULED',
|
||||
@@ -672,7 +674,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
// driverId and vehicleId left unassigned for guided tour
|
||||
title: 'Jamboree Site Tour',
|
||||
type: 'EVENT',
|
||||
@@ -694,7 +696,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'Gala Dinner & Awards Ceremony',
|
||||
type: 'MEAL',
|
||||
status: 'SCHEDULED',
|
||||
@@ -718,7 +720,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'Farewell Breakfast',
|
||||
type: 'MEAL',
|
||||
status: 'SCHEDULED',
|
||||
@@ -738,7 +740,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
title: 'VIP Lodge Checkout',
|
||||
type: 'ACCOMMODATION',
|
||||
status: 'SCHEDULED',
|
||||
@@ -759,7 +761,7 @@ export function AdminTools() {
|
||||
|
||||
try {
|
||||
await api.post('/events', {
|
||||
vipId: vip.id,
|
||||
vipIds: [vip.id],
|
||||
// driverId and vehicleId left unassigned to avoid conflicts
|
||||
title: `Airport Departure - ${vip.name}`,
|
||||
type: 'TRANSPORT',
|
||||
@@ -1088,11 +1090,11 @@ export function AdminTools() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schedule Events */}
|
||||
{/* Activities */}
|
||||
<div className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-medium text-gray-900">Schedule Events</h3>
|
||||
<p className="text-sm text-gray-600">Complete 3-day Jamboree itinerary for all VIPs (15 events each)</p>
|
||||
<h3 className="font-medium text-gray-900">Activities</h3>
|
||||
<p className="text-sm text-gray-600">Complete 3-day Jamboree itinerary for all VIPs (15 activities each)</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
@@ -1101,7 +1103,7 @@ export function AdminTools() {
|
||||
className="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add Test Schedule
|
||||
Add Test Activities
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClearEvents}
|
||||
|
||||
@@ -1,19 +1,9 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { Users, Car, Calendar, Plane, UserCheck, Clock } from 'lucide-react';
|
||||
import { Users, Car, Calendar, Plane, Clock } from 'lucide-react';
|
||||
import { VIP, Driver, ScheduleEvent } from '@/types';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
role: string;
|
||||
isApproved: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface Flight {
|
||||
id: string;
|
||||
vipId: string;
|
||||
@@ -34,9 +24,6 @@ interface Flight {
|
||||
}
|
||||
|
||||
export function Dashboard() {
|
||||
const { backendUser } = useAuth();
|
||||
const isAdmin = backendUser?.role === 'ADMINISTRATOR';
|
||||
|
||||
const { data: vips } = useQuery<VIP[]>({
|
||||
queryKey: ['vips'],
|
||||
queryFn: async () => {
|
||||
@@ -61,15 +48,6 @@ export function Dashboard() {
|
||||
},
|
||||
});
|
||||
|
||||
const { data: users } = useQuery<User[]>({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/users');
|
||||
return data;
|
||||
},
|
||||
enabled: isAdmin,
|
||||
});
|
||||
|
||||
const { data: flights } = useQuery<Flight[]>({
|
||||
queryKey: ['flights'],
|
||||
queryFn: async () => {
|
||||
@@ -93,8 +71,6 @@ export function Dashboard() {
|
||||
return flightDate >= today && flightDate < tomorrow;
|
||||
}).length || 0;
|
||||
|
||||
const pendingApprovals = users?.filter((u) => !u.isApproved).length || 0;
|
||||
|
||||
const upcomingEvents = events
|
||||
?.filter((e) => e.status === 'SCHEDULED' && new Date(e.startTime) >= today)
|
||||
.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
|
||||
@@ -133,20 +109,14 @@ export function Dashboard() {
|
||||
icon: Plane,
|
||||
color: 'bg-indigo-500',
|
||||
},
|
||||
...(isAdmin ? [{
|
||||
name: 'Pending Approvals',
|
||||
value: pendingApprovals,
|
||||
icon: UserCheck,
|
||||
color: 'bg-yellow-500',
|
||||
}] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Dashboard</h1>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 md:mb-8">Dashboard</h1>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6 md:mb-8">
|
||||
{stats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
@@ -300,7 +270,9 @@ export function Dashboard() {
|
||||
{event.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{event.vip?.name} • {event.driver?.name || 'No driver assigned'}
|
||||
{event.vips && event.vips.length > 0
|
||||
? event.vips.map(vip => vip.name).join(', ')
|
||||
: 'No VIPs assigned'} • {event.driver?.name || 'No driver assigned'}
|
||||
</p>
|
||||
{event.location && (
|
||||
<p className="text-xs text-gray-400 mt-1">{event.location}</p>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import toast from 'react-hot-toast';
|
||||
import { api } from '@/lib/api';
|
||||
import { Driver } from '@/types';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Search, X, Filter, ArrowUpDown } from 'lucide-react';
|
||||
import { DriverForm, DriverFormData } from '@/components/DriverForm';
|
||||
import { Loading } from '@/components/Loading';
|
||||
import { TableSkeleton, CardSkeleton } from '@/components/Skeleton';
|
||||
import { FilterModal } from '@/components/FilterModal';
|
||||
import { FilterChip } from '@/components/FilterChip';
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
|
||||
export function DriverList() {
|
||||
const queryClient = useQueryClient();
|
||||
@@ -13,6 +16,18 @@ export function DriverList() {
|
||||
const [editingDriver, setEditingDriver] = useState<Driver | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Search and filter state
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedDepartments, setSelectedDepartments] = useState<string[]>([]);
|
||||
const [filterModalOpen, setFilterModalOpen] = useState(false);
|
||||
|
||||
// Sort state
|
||||
const [sortColumn, setSortColumn] = useState<'name' | 'phone' | 'department'>('name');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
// Debounce search term
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 300);
|
||||
|
||||
const { data: drivers, isLoading } = useQuery<Driver[]>({
|
||||
queryKey: ['drivers'],
|
||||
queryFn: async () => {
|
||||
@@ -70,6 +85,86 @@ export function DriverList() {
|
||||
},
|
||||
});
|
||||
|
||||
// Helper to extract last name from full name
|
||||
const getLastName = (fullName: string): string => {
|
||||
const parts = fullName.trim().split(/\s+/);
|
||||
return parts[parts.length - 1].toLowerCase();
|
||||
};
|
||||
|
||||
// Filter and sort drivers
|
||||
const filteredDrivers = useMemo(() => {
|
||||
if (!drivers) return [];
|
||||
|
||||
// First filter
|
||||
let filtered = drivers.filter((driver) => {
|
||||
// Search by name or phone (using debounced term)
|
||||
const matchesSearch = debouncedSearchTerm === '' ||
|
||||
driver.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||
driver.phone.toLowerCase().includes(debouncedSearchTerm.toLowerCase());
|
||||
|
||||
// Filter by department
|
||||
const matchesDepartment = selectedDepartments.length === 0 ||
|
||||
(driver.department && selectedDepartments.includes(driver.department));
|
||||
|
||||
return matchesSearch && matchesDepartment;
|
||||
});
|
||||
|
||||
// Then sort
|
||||
filtered.sort((a, b) => {
|
||||
let aValue: string;
|
||||
let bValue: string;
|
||||
|
||||
// Special handling for name column - sort by last name
|
||||
if (sortColumn === 'name') {
|
||||
aValue = getLastName(a.name);
|
||||
bValue = getLastName(b.name);
|
||||
} else {
|
||||
aValue = (a[sortColumn] || '').toString().toLowerCase();
|
||||
bValue = (b[sortColumn] || '').toString().toLowerCase();
|
||||
}
|
||||
|
||||
if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [drivers, debouncedSearchTerm, selectedDepartments, sortColumn, sortDirection]);
|
||||
|
||||
const handleDepartmentToggle = (department: string) => {
|
||||
setSelectedDepartments((prev) =>
|
||||
prev.includes(department)
|
||||
? prev.filter((d) => d !== department)
|
||||
: [...prev, department]
|
||||
);
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedDepartments([]);
|
||||
};
|
||||
|
||||
const handleSort = (column: typeof sortColumn) => {
|
||||
if (sortColumn === column) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveDepartmentFilter = (dept: string) => {
|
||||
setSelectedDepartments((prev) => prev.filter((d) => d !== dept));
|
||||
};
|
||||
|
||||
const getFilterLabel = (value: string) => {
|
||||
const labels = {
|
||||
'OFFICE_OF_DEVELOPMENT': 'Office of Development',
|
||||
'ADMIN': 'Admin',
|
||||
};
|
||||
return labels[value as keyof typeof labels] || value;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingDriver(null);
|
||||
setShowForm(true);
|
||||
@@ -102,34 +197,141 @@ export function DriverList() {
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading message="Loading drivers..." />;
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Drivers</h1>
|
||||
<button
|
||||
disabled
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Plus className="h-5 w-5 mr-2" />
|
||||
Add Driver
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<TableSkeleton rows={8} />
|
||||
</div>
|
||||
<div className="lg:hidden">
|
||||
<CardSkeleton cards={5} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Drivers</h1>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Drivers</h1>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className="h-5 w-5 mr-2" />
|
||||
Add Driver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
{/* Search and Filter Section */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex gap-3">
|
||||
{/* Search */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or phone..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Button */}
|
||||
<button
|
||||
onClick={() => setFilterModalOpen(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Filter className="h-5 w-5 mr-2" />
|
||||
Filters
|
||||
{selectedDepartments.length > 0 && (
|
||||
<span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-primary rounded-full">
|
||||
{selectedDepartments.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Filter Chips */}
|
||||
{selectedDepartments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
|
||||
<span className="text-sm text-gray-600 py-1.5">Active filters:</span>
|
||||
{selectedDepartments.map((dept) => (
|
||||
<FilterChip
|
||||
key={dept}
|
||||
label={getFilterLabel(dept)}
|
||||
onRemove={() => handleRemoveDepartmentFilter(dept)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results count */}
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-600">
|
||||
Showing <span className="font-medium">{filteredDrivers.length}</span> of <span className="font-medium">{drivers?.length || 0}</span> drivers
|
||||
{debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
|
||||
</div>
|
||||
{(searchTerm || selectedDepartments.length > 0) && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Table View - shows on large screens */}
|
||||
<div className="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Name
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('name')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Name
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'name' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Phone
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('phone')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Phone
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'phone' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Department
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('department')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Department
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'department' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Assigned Events
|
||||
@@ -140,8 +342,8 @@ export function DriverList() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{drivers?.map((driver) => (
|
||||
<tr key={driver.id}>
|
||||
{filteredDrivers.map((driver) => (
|
||||
<tr key={driver.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{driver.name}
|
||||
</td>
|
||||
@@ -159,6 +361,7 @@ export function DriverList() {
|
||||
<button
|
||||
onClick={() => handleEdit(driver)}
|
||||
className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
|
||||
style={{ minHeight: '36px' }}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-1" />
|
||||
Edit
|
||||
@@ -166,6 +369,7 @@ export function DriverList() {
|
||||
<button
|
||||
onClick={() => handleDelete(driver.id, driver.name)}
|
||||
className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
|
||||
style={{ minHeight: '36px' }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Delete
|
||||
@@ -178,6 +382,48 @@ export function DriverList() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile/Tablet Card View - shows on small and medium screens */}
|
||||
<div className="lg:hidden space-y-4">
|
||||
{filteredDrivers.map((driver) => (
|
||||
<div key={driver.id} className="bg-white shadow rounded-lg p-4">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{driver.name}</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">{driver.phone}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Department</p>
|
||||
<p className="text-sm text-gray-900 mt-1">{driver.department || '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned Events</p>
|
||||
<p className="text-sm text-gray-900 mt-1">{driver.events?.length || 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200">
|
||||
<button
|
||||
onClick={() => handleEdit(driver)}
|
||||
className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-primary bg-white hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Edit className="h-5 w-5 mr-2" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(driver.id, driver.name)}
|
||||
className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Trash2 className="h-5 w-5 mr-2" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<DriverForm
|
||||
driver={editingDriver}
|
||||
@@ -186,6 +432,25 @@ export function DriverList() {
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Filter Modal */}
|
||||
<FilterModal
|
||||
isOpen={filterModalOpen}
|
||||
onClose={() => setFilterModalOpen(false)}
|
||||
filterGroups={[
|
||||
{
|
||||
label: 'Department',
|
||||
options: [
|
||||
{ value: 'OFFICE_OF_DEVELOPMENT', label: 'Office of Development' },
|
||||
{ value: 'ADMIN', label: 'Admin' },
|
||||
],
|
||||
selectedValues: selectedDepartments,
|
||||
onToggle: handleDepartmentToggle,
|
||||
},
|
||||
]}
|
||||
onClear={handleClearFilters}
|
||||
onApply={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,27 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import toast from 'react-hot-toast';
|
||||
import { api } from '@/lib/api';
|
||||
import { ScheduleEvent } from '@/types';
|
||||
import { ScheduleEvent, EventType } from '@/types';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Search, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
import { EventForm, EventFormData } from '@/components/EventForm';
|
||||
import { Loading } from '@/components/Loading';
|
||||
import { InlineDriverSelector } from '@/components/InlineDriverSelector';
|
||||
|
||||
type ActivityFilter = 'ALL' | EventType;
|
||||
type SortField = 'title' | 'type' | 'startTime' | 'status' | 'vips';
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
|
||||
export function EventList() {
|
||||
const queryClient = useQueryClient();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState<ScheduleEvent | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [activeFilter, setActiveFilter] = useState<ActivityFilter>('ALL');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortField, setSortField] = useState<SortField>('startTime');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
||||
|
||||
const { data: events, isLoading } = useQuery<ScheduleEvent[]>({
|
||||
queryKey: ['events'],
|
||||
@@ -102,58 +111,305 @@ export function EventList() {
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
// Toggle direction if clicking the same field
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
// New field, default to ascending
|
||||
setSortField(field);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
// Filter and sort events
|
||||
const filteredEvents = useMemo(() => {
|
||||
if (!events) return [];
|
||||
|
||||
let filtered = events;
|
||||
|
||||
// Filter by type
|
||||
if (activeFilter !== 'ALL') {
|
||||
filtered = filtered.filter(event => event.type === activeFilter);
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(event => {
|
||||
// Search in title
|
||||
if (event.title?.toLowerCase().includes(query)) return true;
|
||||
|
||||
// Search in description
|
||||
if (event.description?.toLowerCase().includes(query)) return true;
|
||||
|
||||
// Search in location/pickup/dropoff
|
||||
if (event.location?.toLowerCase().includes(query)) return true;
|
||||
if (event.pickupLocation?.toLowerCase().includes(query)) return true;
|
||||
if (event.dropoffLocation?.toLowerCase().includes(query)) return true;
|
||||
|
||||
// Search in VIP names
|
||||
if (event.vips?.some(vip => vip.name.toLowerCase().includes(query))) return true;
|
||||
|
||||
// Search in driver name
|
||||
if (event.driver?.name.toLowerCase().includes(query)) return true;
|
||||
|
||||
// Search in vehicle name
|
||||
if (event.vehicle?.name.toLowerCase().includes(query)) return true;
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Sort results
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
let comparison = 0;
|
||||
|
||||
switch (sortField) {
|
||||
case 'title':
|
||||
comparison = a.title.localeCompare(b.title);
|
||||
break;
|
||||
case 'type':
|
||||
comparison = a.type.localeCompare(b.type);
|
||||
break;
|
||||
case 'startTime':
|
||||
comparison = new Date(a.startTime).getTime() - new Date(b.startTime).getTime();
|
||||
break;
|
||||
case 'status':
|
||||
comparison = a.status.localeCompare(b.status);
|
||||
break;
|
||||
case 'vips':
|
||||
const aVipCount = a.vips?.length || 0;
|
||||
const bVipCount = b.vips?.length || 0;
|
||||
comparison = aVipCount - bVipCount;
|
||||
break;
|
||||
}
|
||||
|
||||
return sortDirection === 'asc' ? comparison : -comparison;
|
||||
});
|
||||
|
||||
return sorted;
|
||||
}, [events, activeFilter, searchQuery, sortField, sortDirection]);
|
||||
|
||||
const filterTabs: { label: string; value: ActivityFilter; count: number }[] = useMemo(() => {
|
||||
if (!events) return [];
|
||||
return [
|
||||
{ label: 'All', value: 'ALL', count: events.length },
|
||||
{ label: 'Transport', value: 'TRANSPORT', count: events.filter(e => e.type === 'TRANSPORT').length },
|
||||
{ label: 'Meals', value: 'MEAL', count: events.filter(e => e.type === 'MEAL').length },
|
||||
{ label: 'Events', value: 'EVENT', count: events.filter(e => e.type === 'EVENT').length },
|
||||
{ label: 'Meetings', value: 'MEETING', count: events.filter(e => e.type === 'MEETING').length },
|
||||
{ label: 'Accommodation', value: 'ACCOMMODATION', count: events.filter(e => e.type === 'ACCOMMODATION').length },
|
||||
];
|
||||
}, [events]);
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading message="Loading events..." />;
|
||||
return <Loading message="Loading activities..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Schedule</h1>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Activities</h1>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Event
|
||||
Add Activity
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Title
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
VIP
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Driver
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Start Time
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{events?.map((event) => (
|
||||
{/* Search Bar */}
|
||||
<div className="bg-white shadow rounded-lg mb-4 p-4">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search activities by title, location, VIP name, driver, or vehicle..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<span className="text-sm font-medium">Clear</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{searchQuery && (
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Found {filteredEvents.length} {filteredEvents.length === 1 ? 'activity' : 'activities'} matching "{searchQuery}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="bg-white shadow rounded-lg mb-4 p-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{filterTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => setActiveFilter(tab.value)}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
activeFilter === tab.value
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{tab.label} ({tab.count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activities Table */}
|
||||
{filteredEvents.length === 0 ? (
|
||||
<div className="bg-white shadow rounded-lg p-12 text-center">
|
||||
<Search className="h-16 w-16 mx-auto mb-4 text-gray-300" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
{searchQuery ? 'No activities found' : 'No activities yet'}
|
||||
</h3>
|
||||
<p className="text-gray-500">
|
||||
{searchQuery
|
||||
? `No activities match "${searchQuery}". Try a different search term.`
|
||||
: 'Get started by adding your first activity.'}
|
||||
</p>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
|
||||
onClick={() => handleSort('title')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
Title
|
||||
{sortField === 'title' ? (
|
||||
sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
|
||||
onClick={() => handleSort('type')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
Type
|
||||
{sortField === 'type' ? (
|
||||
sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
|
||||
onClick={() => handleSort('vips')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
VIPs
|
||||
{sortField === 'vips' ? (
|
||||
sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Vehicle
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Driver
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
|
||||
onClick={() => handleSort('startTime')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
Start Time
|
||||
{sortField === 'startTime' ? (
|
||||
sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 select-none"
|
||||
onClick={() => handleSort('status')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
Status
|
||||
{sortField === 'status' ? (
|
||||
sortDirection === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredEvents?.map((event) => (
|
||||
<tr key={event.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{event.title}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{event.vip?.name}
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800' :
|
||||
event.type === 'MEAL' ? 'bg-green-100 text-green-800' :
|
||||
event.type === 'EVENT' ? 'bg-purple-100 text-purple-800' :
|
||||
event.type === 'MEETING' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{event.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
{event.vips && event.vips.length > 0
|
||||
? event.vips.map(vip => vip.name).join(', ')
|
||||
: 'No VIPs assigned'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{event.driver?.name || 'Unassigned'}
|
||||
{event.vehicle ? (
|
||||
<div>
|
||||
<div>{event.vehicle.name}</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{event.vips?.length || 0}/{event.vehicle.seatCapacity} seats
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">No vehicle</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<InlineDriverSelector
|
||||
eventId={event.id}
|
||||
currentDriverId={event.driverId}
|
||||
currentDriverName={event.driver?.name}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{formatDateTime(event.startTime)}
|
||||
@@ -187,10 +443,11 @@ export function EventList() {
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showForm && (
|
||||
<EventForm
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import toast from 'react-hot-toast';
|
||||
import { api } from '@/lib/api';
|
||||
import { Plus, Edit, Trash2, Plane } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Plane, Search, X, Filter, ArrowUpDown } from 'lucide-react';
|
||||
import { FlightForm, FlightFormData } from '@/components/FlightForm';
|
||||
import { Loading } from '@/components/Loading';
|
||||
import { TableSkeleton } from '@/components/Skeleton';
|
||||
import { ErrorMessage } from '@/components/ErrorMessage';
|
||||
import { FilterModal } from '@/components/FilterModal';
|
||||
import { FilterChip } from '@/components/FilterChip';
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
|
||||
interface Flight {
|
||||
id: string;
|
||||
@@ -32,6 +35,18 @@ export function FlightList() {
|
||||
const [editingFlight, setEditingFlight] = useState<Flight | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Search and filter state
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
|
||||
const [filterModalOpen, setFilterModalOpen] = useState(false);
|
||||
|
||||
// Sort state
|
||||
const [sortColumn, setSortColumn] = useState<'flightNumber' | 'departureAirport' | 'arrivalAirport' | 'status'>('flightNumber');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
// Debounce search term
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 300);
|
||||
|
||||
const { data: flights, isLoading, isError, error, refetch } = useQuery<Flight[]>({
|
||||
queryKey: ['flights'],
|
||||
queryFn: async () => {
|
||||
@@ -89,6 +104,81 @@ export function FlightList() {
|
||||
},
|
||||
});
|
||||
|
||||
// Filter and sort flights
|
||||
const filteredFlights = useMemo(() => {
|
||||
if (!flights) return [];
|
||||
|
||||
// First filter
|
||||
let filtered = flights.filter((flight) => {
|
||||
// Search by flight number, VIP name, or route (using debounced term)
|
||||
const matchesSearch = debouncedSearchTerm === '' ||
|
||||
flight.flightNumber.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||
flight.vip?.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||
flight.departureAirport.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||
flight.arrivalAirport.toLowerCase().includes(debouncedSearchTerm.toLowerCase());
|
||||
|
||||
// Filter by status
|
||||
const matchesStatus = selectedStatuses.length === 0 ||
|
||||
(flight.status && selectedStatuses.includes(flight.status.toLowerCase()));
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
// Then sort
|
||||
filtered.sort((a, b) => {
|
||||
let aValue = a[sortColumn] || '';
|
||||
let bValue = b[sortColumn] || '';
|
||||
|
||||
if (typeof aValue === 'string') aValue = aValue.toLowerCase();
|
||||
if (typeof bValue === 'string') bValue = bValue.toLowerCase();
|
||||
|
||||
if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [flights, debouncedSearchTerm, selectedStatuses, sortColumn, sortDirection]);
|
||||
|
||||
const handleStatusToggle = (status: string) => {
|
||||
setSelectedStatuses((prev) =>
|
||||
prev.includes(status)
|
||||
? prev.filter((s) => s !== status)
|
||||
: [...prev, status]
|
||||
);
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedStatuses([]);
|
||||
};
|
||||
|
||||
const handleSort = (column: typeof sortColumn) => {
|
||||
if (sortColumn === column) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveStatusFilter = (status: string) => {
|
||||
setSelectedStatuses((prev) => prev.filter((s) => s !== status));
|
||||
};
|
||||
|
||||
const getFilterLabel = (value: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
'scheduled': 'Scheduled',
|
||||
'boarding': 'Boarding',
|
||||
'departed': 'Departed',
|
||||
'en-route': 'En Route',
|
||||
'landed': 'Landed',
|
||||
'delayed': 'Delayed',
|
||||
'cancelled': 'Cancelled',
|
||||
};
|
||||
return labels[value] || value;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingFlight(null);
|
||||
setShowForm(true);
|
||||
@@ -151,7 +241,21 @@ export function FlightList() {
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading message="Loading flights..." />;
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Flights</h1>
|
||||
<button
|
||||
disabled
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Flight
|
||||
</button>
|
||||
</div>
|
||||
<TableSkeleton rows={8} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
@@ -177,25 +281,112 @@ export function FlightList() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
{flights && flights.length > 0 && (
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex gap-3">
|
||||
{/* Search */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by flight number, VIP, or route..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Button */}
|
||||
<button
|
||||
onClick={() => setFilterModalOpen(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Filter className="h-5 w-5 mr-2" />
|
||||
Filters
|
||||
{selectedStatuses.length > 0 && (
|
||||
<span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-primary rounded-full">
|
||||
{selectedStatuses.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Filter Chips */}
|
||||
{selectedStatuses.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
|
||||
<span className="text-sm text-gray-600 py-1.5">Active filters:</span>
|
||||
{selectedStatuses.map((status) => (
|
||||
<FilterChip
|
||||
key={status}
|
||||
label={getFilterLabel(status)}
|
||||
onRemove={() => handleRemoveStatusFilter(status)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results count */}
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-600">
|
||||
Showing <span className="font-medium">{filteredFlights.length}</span> of <span className="font-medium">{flights.length}</span> flights
|
||||
{debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
|
||||
</div>
|
||||
{(searchTerm || selectedStatuses.length > 0) && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{flights && flights.length > 0 ? (
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Flight
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('flightNumber')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Flight
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'flightNumber' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
VIP
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Route
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('departureAirport')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Route
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'departureAirport' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Scheduled
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Status
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('status')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Status
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'status' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Actions
|
||||
@@ -203,8 +394,8 @@ export function FlightList() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{flights.map((flight) => (
|
||||
<tr key={flight.id}>
|
||||
{filteredFlights.map((flight) => (
|
||||
<tr key={flight.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<Plane className="h-4 w-4 text-gray-400 mr-2" />
|
||||
@@ -291,6 +482,30 @@ export function FlightList() {
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Filter Modal */}
|
||||
<FilterModal
|
||||
isOpen={filterModalOpen}
|
||||
onClose={() => setFilterModalOpen(false)}
|
||||
filterGroups={[
|
||||
{
|
||||
label: 'Flight Status',
|
||||
options: [
|
||||
{ value: 'scheduled', label: 'Scheduled' },
|
||||
{ value: 'boarding', label: 'Boarding' },
|
||||
{ value: 'departed', label: 'Departed' },
|
||||
{ value: 'en-route', label: 'En Route' },
|
||||
{ value: 'landed', label: 'Landed' },
|
||||
{ value: 'delayed', label: 'Delayed' },
|
||||
{ value: 'cancelled', label: 'Cancelled' },
|
||||
],
|
||||
selectedValues: selectedStatuses,
|
||||
onToggle: handleStatusToggle,
|
||||
},
|
||||
]}
|
||||
onClear={handleClearFilters}
|
||||
onApply={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -46,10 +46,11 @@ interface ScheduleEvent {
|
||||
type: string;
|
||||
status: string;
|
||||
description: string | null;
|
||||
vip: {
|
||||
vipIds: string[];
|
||||
vips?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
}>;
|
||||
driver: {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -94,8 +95,8 @@ export function VIPSchedule() {
|
||||
);
|
||||
}
|
||||
|
||||
// Filter events for this VIP
|
||||
const vipEvents = events?.filter((event) => event.vip.id === id) || [];
|
||||
// Filter events for this VIP (using new multi-VIP schema)
|
||||
const vipEvents = events?.filter((event) => event.vipIds?.includes(id)) || [];
|
||||
|
||||
// Sort events by start time
|
||||
const sortedEvents = [...vipEvents].sort(
|
||||
|
||||
@@ -4,9 +4,12 @@ import { useNavigate } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
import { api } from '@/lib/api';
|
||||
import { VIP } from '@/types';
|
||||
import { Plus, Edit, Trash2, Search, X, Calendar } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Search, X, Calendar, Filter, ArrowUpDown } from 'lucide-react';
|
||||
import { VIPForm, VIPFormData } from '@/components/VIPForm';
|
||||
import { Loading } from '@/components/Loading';
|
||||
import { VIPCardSkeleton, TableSkeleton } from '@/components/Skeleton';
|
||||
import { FilterModal } from '@/components/FilterModal';
|
||||
import { FilterChip } from '@/components/FilterChip';
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
|
||||
export function VIPList() {
|
||||
const queryClient = useQueryClient();
|
||||
@@ -19,6 +22,14 @@ export function VIPList() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedDepartments, setSelectedDepartments] = useState<string[]>([]);
|
||||
const [selectedArrivalModes, setSelectedArrivalModes] = useState<string[]>([]);
|
||||
const [filterModalOpen, setFilterModalOpen] = useState(false);
|
||||
|
||||
// Sort state
|
||||
const [sortColumn, setSortColumn] = useState<'name' | 'organization' | 'department' | 'arrivalMode'>('name');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
// Debounce search term for better performance
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 300);
|
||||
|
||||
const { data: vips, isLoading } = useQuery<VIP[]>({
|
||||
queryKey: ['vips'],
|
||||
@@ -77,14 +88,21 @@ export function VIPList() {
|
||||
},
|
||||
});
|
||||
|
||||
// Filter VIPs based on search and filters
|
||||
// Helper to extract last name from full name
|
||||
const getLastName = (fullName: string): string => {
|
||||
const parts = fullName.trim().split(/\s+/);
|
||||
return parts[parts.length - 1].toLowerCase();
|
||||
};
|
||||
|
||||
// Filter and sort VIPs based on search and filters
|
||||
const filteredVIPs = useMemo(() => {
|
||||
if (!vips) return [];
|
||||
|
||||
return vips.filter((vip) => {
|
||||
// Search by name
|
||||
const matchesSearch = searchTerm === '' ||
|
||||
vip.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
// First filter
|
||||
let filtered = vips.filter((vip) => {
|
||||
// Search by name (using debounced term)
|
||||
const matchesSearch = debouncedSearchTerm === '' ||
|
||||
vip.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase());
|
||||
|
||||
// Filter by department
|
||||
const matchesDepartment = selectedDepartments.length === 0 ||
|
||||
@@ -96,7 +114,28 @@ export function VIPList() {
|
||||
|
||||
return matchesSearch && matchesDepartment && matchesArrivalMode;
|
||||
});
|
||||
}, [vips, searchTerm, selectedDepartments, selectedArrivalModes]);
|
||||
|
||||
// Then sort
|
||||
filtered.sort((a, b) => {
|
||||
let aValue: string;
|
||||
let bValue: string;
|
||||
|
||||
// Special handling for name column - sort by last name
|
||||
if (sortColumn === 'name') {
|
||||
aValue = getLastName(a.name);
|
||||
bValue = getLastName(b.name);
|
||||
} else {
|
||||
aValue = (a[sortColumn] || '').toString().toLowerCase();
|
||||
bValue = (b[sortColumn] || '').toString().toLowerCase();
|
||||
}
|
||||
|
||||
if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [vips, debouncedSearchTerm, selectedDepartments, selectedArrivalModes, sortColumn, sortDirection]);
|
||||
|
||||
const handleDepartmentToggle = (department: string) => {
|
||||
setSelectedDepartments((prev) =>
|
||||
@@ -120,6 +159,37 @@ export function VIPList() {
|
||||
setSelectedArrivalModes([]);
|
||||
};
|
||||
|
||||
const handleSort = (column: typeof sortColumn) => {
|
||||
if (sortColumn === column) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveDepartmentFilter = (dept: string) => {
|
||||
setSelectedDepartments((prev) => prev.filter((d) => d !== dept));
|
||||
};
|
||||
|
||||
const handleRemoveArrivalModeFilter = (mode: string) => {
|
||||
setSelectedArrivalModes((prev) => prev.filter((m) => m !== mode));
|
||||
};
|
||||
|
||||
const getFilterLabel = (value: string, type: 'department' | 'arrivalMode') => {
|
||||
const labels = {
|
||||
department: {
|
||||
'OFFICE_OF_DEVELOPMENT': 'Office of Development',
|
||||
'ADMIN': 'Admin',
|
||||
},
|
||||
arrivalMode: {
|
||||
'FLIGHT': 'Flight',
|
||||
'SELF_DRIVING': 'Self Driving',
|
||||
},
|
||||
};
|
||||
return labels[type][value as keyof typeof labels[typeof type]] || value;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingVIP(null);
|
||||
setShowForm(true);
|
||||
@@ -152,127 +222,158 @@ export function VIPList() {
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading message="Loading VIPs..." />;
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">VIPs</h1>
|
||||
<button
|
||||
disabled
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary/50 cursor-not-allowed"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Plus className="h-5 w-5 mr-2" />
|
||||
Add VIP
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<TableSkeleton rows={8} />
|
||||
</div>
|
||||
<div className="lg:hidden">
|
||||
<VIPCardSkeleton cards={5} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">VIPs</h1>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">VIPs</h1>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className="h-5 w-5 mr-2" />
|
||||
Add VIP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex gap-3">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md focus:ring-primary focus:border-primary text-base"
|
||||
style={{ minHeight: '44px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{/* Department Filters */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Department
|
||||
</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedDepartments.includes('OFFICE_OF_DEVELOPMENT')}
|
||||
onChange={() => handleDepartmentToggle('OFFICE_OF_DEVELOPMENT')}
|
||||
className="rounded border-gray-300 text-primary focus:ring-primary"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700">Office of Development</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedDepartments.includes('ADMIN')}
|
||||
onChange={() => handleDepartmentToggle('ADMIN')}
|
||||
className="rounded border-gray-300 text-primary focus:ring-primary"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700">Admin</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrival Mode Filters */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Arrival Mode
|
||||
</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedArrivalModes.includes('FLIGHT')}
|
||||
onChange={() => handleArrivalModeToggle('FLIGHT')}
|
||||
className="rounded border-gray-300 text-primary focus:ring-primary"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700">Flight</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedArrivalModes.includes('SELF_DRIVING')}
|
||||
onChange={() => handleArrivalModeToggle('SELF_DRIVING')}
|
||||
className="rounded border-gray-300 text-primary focus:ring-primary"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700">Self Driving</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results count and Clear Filters */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-600">
|
||||
Showing {filteredVIPs.length} of {vips?.length || 0} VIPs
|
||||
</div>
|
||||
{(searchTerm || selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="inline-flex items-center px-3 py-1 text-sm text-gray-600 hover:text-gray-900 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Clear Filters
|
||||
</button>
|
||||
{/* Filter Button */}
|
||||
<button
|
||||
onClick={() => setFilterModalOpen(true)}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Filter className="h-5 w-5 mr-2" />
|
||||
Filters
|
||||
{(selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
|
||||
<span className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none text-white bg-primary rounded-full">
|
||||
{selectedDepartments.length + selectedArrivalModes.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Filter Chips */}
|
||||
{(selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
|
||||
<div className="flex flex-wrap gap-2 mt-3 pt-3 border-t border-gray-200">
|
||||
<span className="text-sm text-gray-600 py-1.5">Active filters:</span>
|
||||
{selectedDepartments.map((dept) => (
|
||||
<FilterChip
|
||||
key={dept}
|
||||
label={getFilterLabel(dept, 'department')}
|
||||
onRemove={() => handleRemoveDepartmentFilter(dept)}
|
||||
/>
|
||||
))}
|
||||
{selectedArrivalModes.map((mode) => (
|
||||
<FilterChip
|
||||
key={mode}
|
||||
label={getFilterLabel(mode, 'arrivalMode')}
|
||||
onRemove={() => handleRemoveArrivalModeFilter(mode)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results count */}
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-600">
|
||||
Showing <span className="font-medium">{filteredVIPs.length}</span> of <span className="font-medium">{vips?.length || 0}</span> VIPs
|
||||
{debouncedSearchTerm !== searchTerm && <span className="ml-2 text-gray-400">(searching...)</span>}
|
||||
</div>
|
||||
{(searchTerm || selectedDepartments.length > 0 || selectedArrivalModes.length > 0) && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
{/* Desktop Table View - shows on large screens */}
|
||||
<div className="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('name')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Name
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'name' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Organization
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('organization')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Organization
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'organization' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Department
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('department')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Department
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'department' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Arrival Mode
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => handleSort('arrivalMode')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
Arrival Mode
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
{sortColumn === 'arrivalMode' && <span className="text-primary">{sortDirection === 'asc' ? '↑' : '↓'}</span>}
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
@@ -281,7 +382,7 @@ export function VIPList() {
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredVIPs.map((vip) => (
|
||||
<tr key={vip.id}>
|
||||
<tr key={vip.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{vip.name}
|
||||
</td>
|
||||
@@ -299,6 +400,7 @@ export function VIPList() {
|
||||
<button
|
||||
onClick={() => navigate(`/vips/${vip.id}/schedule`)}
|
||||
className="inline-flex items-center px-3 py-1 text-blue-600 hover:text-blue-800"
|
||||
style={{ minHeight: '36px' }}
|
||||
title="View Schedule"
|
||||
>
|
||||
<Calendar className="h-4 w-4 mr-1" />
|
||||
@@ -307,6 +409,7 @@ export function VIPList() {
|
||||
<button
|
||||
onClick={() => handleEdit(vip)}
|
||||
className="inline-flex items-center px-3 py-1 text-primary hover:text-primary/80"
|
||||
style={{ minHeight: '36px' }}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-1" />
|
||||
Edit
|
||||
@@ -314,6 +417,7 @@ export function VIPList() {
|
||||
<button
|
||||
onClick={() => handleDelete(vip.id, vip.name)}
|
||||
className="inline-flex items-center px-3 py-1 text-red-600 hover:text-red-800"
|
||||
style={{ minHeight: '36px' }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Delete
|
||||
@@ -326,6 +430,60 @@ export function VIPList() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile/Tablet Card View - shows on small and medium screens */}
|
||||
<div className="lg:hidden space-y-4">
|
||||
{filteredVIPs.map((vip) => (
|
||||
<div key={vip.id} className="bg-white shadow rounded-lg p-4">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{vip.name}</h3>
|
||||
{vip.organization && (
|
||||
<p className="text-sm text-gray-600 mt-1">{vip.organization}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Department</p>
|
||||
<p className="text-sm text-gray-900 mt-1">{vip.department}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Arrival Mode</p>
|
||||
<p className="text-sm text-gray-900 mt-1">{vip.arrivalMode}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200">
|
||||
<button
|
||||
onClick={() => navigate(`/vips/${vip.id}/schedule`)}
|
||||
className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Calendar className="h-5 w-5 mr-2" />
|
||||
Schedule
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(vip)}
|
||||
className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-primary bg-white hover:bg-gray-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Edit className="h-5 w-5 mr-2" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(vip.id, vip.name)}
|
||||
className="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50"
|
||||
style={{ minHeight: '44px' }}
|
||||
>
|
||||
<Trash2 className="h-5 w-5 mr-2" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<VIPForm
|
||||
vip={editingVIP}
|
||||
@@ -334,6 +492,34 @@ export function VIPList() {
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Filter Modal */}
|
||||
<FilterModal
|
||||
isOpen={filterModalOpen}
|
||||
onClose={() => setFilterModalOpen(false)}
|
||||
filterGroups={[
|
||||
{
|
||||
label: 'Department',
|
||||
options: [
|
||||
{ value: 'OFFICE_OF_DEVELOPMENT', label: 'Office of Development' },
|
||||
{ value: 'ADMIN', label: 'Admin' },
|
||||
],
|
||||
selectedValues: selectedDepartments,
|
||||
onToggle: handleDepartmentToggle,
|
||||
},
|
||||
{
|
||||
label: 'Arrival Mode',
|
||||
options: [
|
||||
{ value: 'FLIGHT', label: 'Flight' },
|
||||
{ value: 'SELF_DRIVING', label: 'Self Driving' },
|
||||
],
|
||||
selectedValues: selectedArrivalModes,
|
||||
onToggle: handleArrivalModeToggle,
|
||||
},
|
||||
]}
|
||||
onClear={handleClearFilters}
|
||||
onApply={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -62,6 +62,38 @@ export interface Driver {
|
||||
deletedAt: string | null;
|
||||
}
|
||||
|
||||
// Vehicle types
|
||||
export enum VehicleType {
|
||||
VAN = 'VAN',
|
||||
SUV = 'SUV',
|
||||
SEDAN = 'SEDAN',
|
||||
BUS = 'BUS',
|
||||
GOLF_CART = 'GOLF_CART',
|
||||
TRUCK = 'TRUCK',
|
||||
}
|
||||
|
||||
export enum VehicleStatus {
|
||||
AVAILABLE = 'AVAILABLE',
|
||||
IN_USE = 'IN_USE',
|
||||
MAINTENANCE = 'MAINTENANCE',
|
||||
RESERVED = 'RESERVED',
|
||||
}
|
||||
|
||||
export interface Vehicle {
|
||||
id: string;
|
||||
name: string;
|
||||
type: VehicleType;
|
||||
licensePlate: string | null;
|
||||
seatCapacity: number;
|
||||
status: VehicleStatus;
|
||||
currentDriverId: string | null;
|
||||
currentDriver?: Driver | null;
|
||||
notes: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
}
|
||||
|
||||
// Event types
|
||||
export enum EventType {
|
||||
TRANSPORT = 'TRANSPORT',
|
||||
@@ -80,10 +112,12 @@ export enum EventStatus {
|
||||
|
||||
export interface ScheduleEvent {
|
||||
id: string;
|
||||
vipId: string;
|
||||
vip?: VIP;
|
||||
vipIds: string[]; // Array of VIP IDs for multi-passenger trips
|
||||
vips?: VIP[]; // Populated VIP objects
|
||||
title: string;
|
||||
location: string | null;
|
||||
pickupLocation: string | null;
|
||||
dropoffLocation: string | null;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
description: string | null;
|
||||
@@ -91,6 +125,8 @@ export interface ScheduleEvent {
|
||||
status: EventStatus;
|
||||
driverId: string | null;
|
||||
driver?: Driver | null;
|
||||
vehicleId: string | null;
|
||||
vehicle?: Vehicle | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
|
||||
Reference in New Issue
Block a user