kyle
f2b3f34a72
Backend: - Extract shared hard-delete authorization utility (#9) - Extract Prisma include constants per entity (#11) - Fix N+1 query pattern in events findAll (#12) - Extract shared date utility functions (#13) - Move vehicle utilization filtering to DB query (#15) - Add ParseBooleanPipe for query params - Add CurrentDriver decorator + ResolveDriverInterceptor (#20) Frontend: - Extract shared form utilities (toDatetimeLocal) and enum labels (#17) - Replace browser confirm() with styled ConfirmModal (#18) - Add centralized query-keys.ts constants (#19) - Clean up unused imports, add useMemo where needed (#19) - Standardize filter button styling across list pages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
628 lines
24 KiB
TypeScript
628 lines
24 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { X, AlertTriangle, Users, Car, Link2 } from 'lucide-react';
|
|
import { api } from '@/lib/api';
|
|
import { ScheduleEvent, VIP, Driver, Vehicle } from '@/types';
|
|
import { useFormattedDate } from '@/hooks/useFormattedDate';
|
|
import { toDatetimeLocal } from '@/lib/utils';
|
|
import { EVENT_TYPE_LABELS, EVENT_STATUS_LABELS } from '@/lib/enum-labels';
|
|
import { queryKeys } from '@/lib/query-keys';
|
|
|
|
interface EventFormProps {
|
|
event?: ScheduleEvent | null;
|
|
onSubmit: (data: EventFormData) => void;
|
|
onCancel: () => void;
|
|
isSubmitting: boolean;
|
|
extraActions?: React.ReactNode;
|
|
}
|
|
|
|
export interface EventFormData {
|
|
vipIds: string[];
|
|
title: string;
|
|
location?: string;
|
|
pickupLocation?: string;
|
|
dropoffLocation?: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
description?: string;
|
|
type: string;
|
|
status: string;
|
|
driverId?: string;
|
|
vehicleId?: string;
|
|
masterEventId?: string;
|
|
forceAssign?: boolean;
|
|
}
|
|
|
|
interface ScheduleConflict {
|
|
id: string;
|
|
title: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
}
|
|
|
|
export function EventForm({ event, onSubmit, onCancel, isSubmitting, extraActions }: EventFormProps) {
|
|
const { formatDateTime } = useFormattedDate();
|
|
|
|
const [formData, setFormData] = useState<EventFormData>({
|
|
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 || '',
|
|
masterEventId: event?.masterEventId || '',
|
|
});
|
|
|
|
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: queryKeys.vips.all,
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/vips');
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Fetch Drivers for dropdown
|
|
const { data: drivers } = useQuery<Driver[]>({
|
|
queryKey: queryKeys.drivers.all,
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/drivers');
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Fetch Vehicles for dropdown
|
|
const { data: vehicles } = useQuery<Vehicle[]>({
|
|
queryKey: queryKeys.vehicles.all,
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/vehicles');
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Fetch all events (for master event selector)
|
|
const { data: allEvents } = useQuery<ScheduleEvent[]>({
|
|
queryKey: queryKeys.events.all,
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/events');
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Filter to itinerary items (non-transport events) for master event dropdown
|
|
const masterEventOptions = useMemo(() => {
|
|
if (!allEvents) return [];
|
|
return allEvents.filter(e =>
|
|
e.type !== 'TRANSPORT' &&
|
|
e.status !== 'CANCELLED' &&
|
|
e.id !== event?.id // Exclude self
|
|
);
|
|
}, [allEvents, event?.id]);
|
|
|
|
// Get selected vehicle capacity (using party sizes)
|
|
const selectedVehicle = vehicles?.find(v => v.id === formData.vehicleId);
|
|
const seatsUsed = vips
|
|
?.filter(v => formData.vipIds.includes(v.id))
|
|
.reduce((sum, v) => sum + (v.partySize || 1), 0) || 0;
|
|
const seatsAvailable = selectedVehicle ? selectedVehicle.seatCapacity : 0;
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
// 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,
|
|
masterEventId: formData.masterEventId || undefined,
|
|
};
|
|
|
|
// 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 = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
|
|
) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
};
|
|
|
|
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 = useMemo(() => {
|
|
return vips
|
|
?.filter(vip => formData.vipIds.includes(vip.id))
|
|
.map(vip => vip.partySize > 1 ? `${vip.name} (+${vip.partySize - 1})` : vip.name)
|
|
.join(', ') || 'None selected';
|
|
}, [vips, formData.vipIds]);
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-card 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 border-border sticky top-0 bg-card z-10">
|
|
<h2 className="text-2xl font-bold text-foreground">
|
|
{event ? 'Edit Event' : 'Add New Event'}
|
|
</h2>
|
|
<button
|
|
onClick={onCancel}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
style={{ minWidth: '44px', minHeight: '44px' }}
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{/* Master Event Selector (link transport to itinerary item) */}
|
|
{formData.type === 'TRANSPORT' && masterEventOptions.length > 0 && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">
|
|
<Link2 className="inline h-4 w-4 mr-1" />
|
|
Linked Itinerary Item (optional)
|
|
</label>
|
|
<select
|
|
name="masterEventId"
|
|
value={formData.masterEventId}
|
|
onChange={(e) => {
|
|
const selectedId = e.target.value;
|
|
setFormData(prev => ({ ...prev, masterEventId: selectedId }));
|
|
// Auto-fill VIPs from the selected master event
|
|
if (selectedId) {
|
|
const masterEvent = allEvents?.find(ev => ev.id === selectedId);
|
|
if (masterEvent?.vipIds && masterEvent.vipIds.length > 0) {
|
|
setFormData(prev => ({ ...prev, masterEventId: selectedId, vipIds: masterEvent.vipIds }));
|
|
}
|
|
}
|
|
}}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
>
|
|
<option value="">No linked event</option>
|
|
{masterEventOptions.map(ev => (
|
|
<option key={ev.id} value={ev.id}>
|
|
{ev.title} ({ev.type}) — {formatDateTime(ev.startTime)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Link this transport to a shared activity. VIPs will auto-populate from the linked event.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* VIP Multi-Select */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
<Users className="inline h-4 w-4 mr-1" />
|
|
VIPs * (select one or more)
|
|
</label>
|
|
|
|
<div className="border border-input rounded-md p-3 max-h-48 overflow-y-auto bg-background">
|
|
{vips?.map((vip) => (
|
|
<label
|
|
key={vip.id}
|
|
className="flex items-center py-2 px-3 hover:bg-accent 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-input focus:ring-primary"
|
|
/>
|
|
<span className="ml-3 text-base text-foreground">
|
|
{vip.name}
|
|
{vip.partySize > 1 && (
|
|
<span className="text-xs text-blue-600 dark:text-blue-400 ml-1.5 font-medium">+{vip.partySize - 1}</span>
|
|
)}
|
|
{vip.organization && (
|
|
<span className="text-sm text-muted-foreground ml-2">({vip.organization})</span>
|
|
)}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-2 text-sm text-muted-foreground">
|
|
<strong>Selected ({formData.vipIds.length}):</strong> {selectedVipNames}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground 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 bg-background text-foreground placeholder:text-muted-foreground border border-input 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-foreground 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 bg-background text-foreground placeholder:text-muted-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground 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 bg-background text-foreground placeholder:text-muted-foreground border border-input 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-foreground mb-1">
|
|
Start Time *
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
name="startTime"
|
|
required
|
|
value={formData.startTime}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">
|
|
End Time *
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
name="endTime"
|
|
required
|
|
value={formData.endTime}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input 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-foreground 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 bg-background text-foreground border border-input 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-muted-foreground'}`}>
|
|
Capacity: {seatsUsed}/{seatsAvailable} seats (incl. entourage)
|
|
{seatsUsed > seatsAvailable && ' — OVER CAPACITY'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Driver Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">
|
|
Assigned Driver
|
|
</label>
|
|
<select
|
|
name="driverId"
|
|
value={formData.driverId}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input 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-foreground mb-1">
|
|
Event Type *
|
|
</label>
|
|
<select
|
|
name="type"
|
|
required
|
|
value={formData.type}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
>
|
|
{Object.entries(EVENT_TYPE_LABELS).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">
|
|
Status *
|
|
</label>
|
|
<select
|
|
name="status"
|
|
required
|
|
value={formData.status}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 bg-background text-foreground border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
>
|
|
{Object.entries(EVENT_STATUS_LABELS).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground 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 bg-background text-foreground placeholder:text-muted-foreground border border-input 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-muted text-foreground py-2 px-4 rounded-md hover:bg-muted/80"
|
|
style={{ minHeight: '44px' }}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
|
|
{/* Extra Actions (e.g., Cancel Event, Delete Event) */}
|
|
{extraActions}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conflict Dialog */}
|
|
{showConflictDialog && createPortal(
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[60]">
|
|
<div className="bg-card 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-foreground mb-2">
|
|
Scheduling Conflict Detected
|
|
</h3>
|
|
<p className="text-base text-muted-foreground 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-foreground 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-input rounded-md text-base font-medium text-foreground hover:bg-accent"
|
|
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/50 flex items-center justify-center p-4 z-[60]">
|
|
<div className="bg-card 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-foreground mb-2">
|
|
Vehicle Capacity Exceeded
|
|
</h3>
|
|
<p className="text-base text-muted-foreground 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-foreground 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-input rounded-md text-base font-medium text-foreground hover:bg-accent"
|
|
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
|
|
)}
|
|
</>
|
|
);
|
|
}
|