Major Enhancement: NestJS Migration + CASL Authorization + Error Handling
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
Complete rewrite from Express to NestJS with enterprise-grade features: ## Backend Improvements - Migrated from Express to NestJS 11.0.1 with TypeScript - Implemented Prisma ORM 7.3.0 for type-safe database access - Added CASL authorization system replacing role-based guards - Created global exception filters with structured logging - Implemented Auth0 JWT authentication with Passport.js - Added vehicle management with conflict detection - Enhanced event scheduling with driver/vehicle assignment - Comprehensive error handling and logging ## Frontend Improvements - Upgraded to React 19.2.0 with Vite 7.2.4 - Implemented CASL-based permission system - Added AbilityContext for declarative permissions - Created ErrorHandler utility for consistent error messages - Enhanced API client with request/response logging - Added War Room (Command Center) dashboard - Created VIP Schedule view with complete itineraries - Implemented Vehicle Management UI - Added mock data generators for testing (288 events across 20 VIPs) ## New Features - Vehicle fleet management (types, capacity, status tracking) - Complete 3-day Jamboree schedule generation - Individual VIP schedule pages with PDF export (planned) - Real-time War Room dashboard with auto-refresh - Permission-based navigation filtering - First user auto-approval as administrator ## Documentation - Created CASL_AUTHORIZATION.md (comprehensive guide) - Created ERROR_HANDLING.md (error handling patterns) - Updated CLAUDE.md with new architecture - Added migration guides and best practices ## Technical Debt Resolved - Removed custom authentication in favor of Auth0 - Replaced role checks with CASL abilities - Standardized error responses across API - Implemented proper TypeScript typing - Added comprehensive logging Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,378 +1,334 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { apiCall } from '../config/api';
|
||||
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 { VIP, Driver, ScheduleEvent } from '@/types';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
|
||||
interface ScheduleEvent {
|
||||
interface User {
|
||||
id: string;
|
||||
title: string;
|
||||
location: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
|
||||
type: 'transport' | 'meeting' | 'event' | 'meal' | 'accommodation';
|
||||
email: string;
|
||||
name: string | null;
|
||||
role: string;
|
||||
isApproved: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface Vip {
|
||||
interface Flight {
|
||||
id: string;
|
||||
name: string;
|
||||
organization: string;
|
||||
transportMode: 'flight' | 'self-driving';
|
||||
flightNumber?: string;
|
||||
flights?: Array<{
|
||||
flightNumber: string;
|
||||
flightDate: string;
|
||||
segment: number;
|
||||
}>;
|
||||
expectedArrival?: string;
|
||||
arrivalTime?: string;
|
||||
needsAirportPickup?: boolean;
|
||||
needsVenueTransport: boolean;
|
||||
notes?: string;
|
||||
currentEvent?: ScheduleEvent;
|
||||
nextEvent?: ScheduleEvent;
|
||||
nextEventTime?: string;
|
||||
vipId: string;
|
||||
vip?: {
|
||||
name: string;
|
||||
organization: string | null;
|
||||
};
|
||||
flightNumber: string;
|
||||
flightDate: string;
|
||||
segment: number;
|
||||
departureAirport: string;
|
||||
arrivalAirport: string;
|
||||
scheduledDeparture: string | null;
|
||||
scheduledArrival: string | null;
|
||||
actualDeparture: string | null;
|
||||
actualArrival: string | null;
|
||||
status: string | null;
|
||||
}
|
||||
|
||||
interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
currentLocation: { lat: number; lng: number };
|
||||
assignedVipIds: string[];
|
||||
}
|
||||
export function Dashboard() {
|
||||
const { backendUser } = useAuth();
|
||||
const isAdmin = backendUser?.role === 'ADMINISTRATOR';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const [vips, setVips] = useState<Vip[]>([]);
|
||||
const [drivers, setDrivers] = useState<Driver[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { data: vips } = useQuery<VIP[]>({
|
||||
queryKey: ['vips'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/vips');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// Helper functions for event management
|
||||
const getCurrentEvent = (events: ScheduleEvent[]) => {
|
||||
const now = new Date();
|
||||
return events.find(event =>
|
||||
new Date(event.startTime) <= now &&
|
||||
new Date(event.endTime) > now &&
|
||||
event.status === 'in-progress'
|
||||
) || null;
|
||||
};
|
||||
const { data: drivers } = useQuery<Driver[]>({
|
||||
queryKey: ['drivers'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/drivers');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
const getNextEvent = (events: ScheduleEvent[]) => {
|
||||
const now = new Date();
|
||||
const upcomingEvents = events.filter(event =>
|
||||
new Date(event.startTime) > now && event.status === 'scheduled'
|
||||
).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
|
||||
|
||||
return upcomingEvents.length > 0 ? upcomingEvents[0] : null;
|
||||
};
|
||||
const { data: events } = useQuery<ScheduleEvent[]>({
|
||||
queryKey: ['events'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/events');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
const formatTime = (timeString: string) => {
|
||||
return new Date(timeString).toLocaleString([], {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
const { data: users } = useQuery<User[]>({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/users');
|
||||
return data;
|
||||
},
|
||||
enabled: isAdmin,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const authHeaders = {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
const [vipsResponse, driversResponse] = await Promise.all([
|
||||
apiCall('/api/vips', { headers: authHeaders }),
|
||||
apiCall('/api/drivers', { headers: authHeaders })
|
||||
]);
|
||||
|
||||
if (!vipsResponse.ok || !driversResponse.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const vipsData = await vipsResponse.json();
|
||||
const driversData = await driversResponse.json();
|
||||
|
||||
// Fetch schedule for each VIP and determine current/next events
|
||||
const vipsWithSchedules = await Promise.all(
|
||||
vipsData.map(async (vip: Vip) => {
|
||||
try {
|
||||
const scheduleResponse = await apiCall(`/api/vips/${vip.id}/schedule`, {
|
||||
headers: authHeaders
|
||||
});
|
||||
|
||||
if (scheduleResponse.ok) {
|
||||
const scheduleData = await scheduleResponse.json();
|
||||
|
||||
const currentEvent = getCurrentEvent(scheduleData);
|
||||
const nextEvent = getNextEvent(scheduleData);
|
||||
|
||||
return {
|
||||
...vip,
|
||||
currentEvent,
|
||||
nextEvent,
|
||||
nextEventTime: nextEvent ? nextEvent.startTime : null
|
||||
};
|
||||
} else {
|
||||
return { ...vip, currentEvent: null, nextEvent: null, nextEventTime: null };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching schedule for VIP ${vip.id}:`, error);
|
||||
return { ...vip, currentEvent: null, nextEvent: null, nextEventTime: null };
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// Sort VIPs by next event time (soonest first), then by name
|
||||
const sortedVips = vipsWithSchedules.sort((a, b) => {
|
||||
// VIPs with current events first
|
||||
if (a.currentEvent && !b.currentEvent) return -1;
|
||||
if (!a.currentEvent && b.currentEvent) return 1;
|
||||
|
||||
// Then by next event time (soonest first)
|
||||
if (a.nextEventTime && b.nextEventTime) {
|
||||
return new Date(a.nextEventTime).getTime() - new Date(b.nextEventTime).getTime();
|
||||
}
|
||||
if (a.nextEventTime && !b.nextEventTime) return -1;
|
||||
if (!a.nextEventTime && b.nextEventTime) return 1;
|
||||
|
||||
// Finally by name if no events
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
setVips(sortedVips);
|
||||
setDrivers(driversData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const { data: flights } = useQuery<Flight[]>({
|
||||
queryKey: ['flights'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/flights');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-64">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 flex items-center space-x-4">
|
||||
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
<span className="text-lg font-medium text-slate-700">Loading dashboard...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const eventsToday = events?.filter((e) => {
|
||||
const eventDate = new Date(e.startTime);
|
||||
return eventDate >= today && eventDate < tomorrow && e.status !== 'CANCELLED';
|
||||
}).length || 0;
|
||||
|
||||
const flightsToday = flights?.filter((f) => {
|
||||
const flightDate = new Date(f.flightDate);
|
||||
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())
|
||||
.slice(0, 5) || [];
|
||||
|
||||
const upcomingFlights = flights
|
||||
?.filter((f) => {
|
||||
const flightDate = new Date(f.flightDate);
|
||||
return flightDate >= today && f.status !== 'cancelled';
|
||||
})
|
||||
.sort((a, b) => new Date(a.flightDate).getTime() - new Date(b.flightDate).getTime())
|
||||
.slice(0, 5) || [];
|
||||
|
||||
const stats = [
|
||||
{
|
||||
name: 'Total VIPs',
|
||||
value: vips?.length || 0,
|
||||
icon: Users,
|
||||
color: 'bg-blue-500',
|
||||
},
|
||||
{
|
||||
name: 'Active Drivers',
|
||||
value: drivers?.length || 0,
|
||||
icon: Car,
|
||||
color: 'bg-green-500',
|
||||
},
|
||||
{
|
||||
name: 'Events Today',
|
||||
value: eventsToday,
|
||||
icon: Clock,
|
||||
color: 'bg-purple-500',
|
||||
},
|
||||
{
|
||||
name: 'Flights Today',
|
||||
value: flightsToday,
|
||||
icon: Plane,
|
||||
color: 'bg-indigo-500',
|
||||
},
|
||||
...(isAdmin ? [{
|
||||
name: 'Pending Approvals',
|
||||
value: pendingApprovals,
|
||||
icon: UserCheck,
|
||||
color: 'bg-yellow-500',
|
||||
}] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
|
||||
VIP Coordinator Dashboard
|
||||
</h1>
|
||||
<p className="text-slate-600 mt-2">Real-time overview of VIP activities and coordination</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
|
||||
{vips.length} Active VIPs
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Dashboard</h1>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
{stats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={stat.name}
|
||||
className="bg-white overflow-hidden shadow rounded-lg"
|
||||
>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className={`flex-shrink-0 ${stat.color} rounded-md p-3`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">
|
||||
{stat.name}
|
||||
</dt>
|
||||
<dd className="text-3xl font-semibold text-gray-900">
|
||||
{stat.value}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
|
||||
{drivers.length} Drivers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
|
||||
{/* VIP Status Dashboard */}
|
||||
<div className="xl:col-span-2">
|
||||
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-slate-200/60">
|
||||
<h2 className="text-xl font-bold text-slate-800 flex items-center">
|
||||
VIP Status Dashboard
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
|
||||
{vips.length} VIPs
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{vips.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<div className="w-8 h-8 bg-slate-300 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-slate-500 font-medium">No VIPs currently scheduled</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{vips.map((vip) => {
|
||||
const hasCurrentEvent = !!vip.currentEvent;
|
||||
const hasNextEvent = !!vip.nextEvent;
|
||||
|
||||
return (
|
||||
<div key={vip.id} className={`
|
||||
relative rounded-xl border-2 p-6 transition-all duration-200 hover:shadow-lg
|
||||
${hasCurrentEvent
|
||||
? 'border-amber-300 bg-gradient-to-r from-amber-50 to-orange-50'
|
||||
: hasNextEvent
|
||||
? 'border-blue-300 bg-gradient-to-r from-blue-50 to-indigo-50'
|
||||
: 'border-slate-200 bg-slate-50'
|
||||
}
|
||||
`}>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-lg font-bold text-slate-900">{vip.name}</h3>
|
||||
{hasCurrentEvent && (
|
||||
<span className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-bold animate-pulse">
|
||||
ACTIVE
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-4">{vip.organization}</p>
|
||||
|
||||
{/* Current Event */}
|
||||
{vip.currentEvent && (
|
||||
<div className="bg-white border border-amber-200 rounded-lg p-4 mb-3 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-amber-600 font-bold text-sm">CURRENT EVENT</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-semibold text-slate-900">{vip.currentEvent.title}</span>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-1">Location: {vip.currentEvent.location}</p>
|
||||
<p className="text-slate-500 text-xs">Until {formatTime(vip.currentEvent.endTime)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Next Event */}
|
||||
{vip.nextEvent && (
|
||||
<div className="bg-white border border-blue-200 rounded-lg p-4 mb-3 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-blue-600 font-bold text-sm">NEXT EVENT</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-semibold text-slate-900">{vip.nextEvent.title}</span>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-1">Location: {vip.nextEvent.location}</p>
|
||||
<p className="text-slate-500 text-xs">{formatTime(vip.nextEvent.startTime)} - {formatTime(vip.nextEvent.endTime)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Events */}
|
||||
{!vip.currentEvent && !vip.nextEvent && (
|
||||
<div className="bg-white border border-slate-200 rounded-lg p-4 mb-3">
|
||||
<p className="text-slate-500 text-sm italic">No scheduled events</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Transport Info */}
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500 bg-white/50 rounded-lg px-3 py-2">
|
||||
{vip.transportMode === 'flight' ? (
|
||||
<span>Flight: {vip.flights && vip.flights.length > 0 ?
|
||||
vip.flights.map(f => f.flightNumber).join(' → ') :
|
||||
vip.flightNumber || 'TBD'}
|
||||
</span>
|
||||
) : (
|
||||
<span>Self-driving | Expected: {vip.expectedArrival ? formatTime(vip.expectedArrival) : 'TBD'}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 ml-6">
|
||||
<Link
|
||||
to={`/vips/${vip.id}`}
|
||||
className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Details
|
||||
</Link>
|
||||
<Link
|
||||
to={`/vips/${vip.id}#schedule`}
|
||||
className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Schedule
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Drivers Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-slate-200/60">
|
||||
<h2 className="text-lg font-bold text-slate-800 flex items-center">
|
||||
Available Drivers
|
||||
<span className="ml-2 bg-green-100 text-green-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
|
||||
{drivers.length}
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{drivers.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<div className="w-6 h-6 bg-slate-300 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">No drivers available</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{drivers.map((driver) => (
|
||||
<div key={driver.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900">{driver.name}</h4>
|
||||
<p className="text-slate-600 text-sm">{driver.phone}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded-full">
|
||||
{driver.assignedVipIds.length} VIPs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Recent VIPs */}
|
||||
<div className="bg-white shadow rounded-lg p-6 mb-8">
|
||||
<h2 className="text-lg font-medium text-gray-900 mb-4">Recent VIPs</h2>
|
||||
{vips && vips.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Organization
|
||||
</th>
|
||||
<th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Arrival Mode
|
||||
</th>
|
||||
<th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Events
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{vips.slice(0, 5).map((vip) => (
|
||||
<tr key={vip.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{vip.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{vip.organization || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{vip.arrivalMode}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{vip.events?.length || 0}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
No VIPs yet. Add your first VIP to get started.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-purple-50 to-pink-50 px-6 py-4 border-b border-slate-200/60">
|
||||
<h2 className="text-lg font-bold text-slate-800">Quick Actions</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-3">
|
||||
<Link
|
||||
to="/vips"
|
||||
className="block w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
|
||||
{/* Upcoming Flights */}
|
||||
<div className="bg-white shadow rounded-lg p-6 mb-8">
|
||||
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Upcoming Flights
|
||||
</h2>
|
||||
{upcomingFlights.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{upcomingFlights.map((flight) => (
|
||||
<div
|
||||
key={flight.id}
|
||||
className="border-l-4 border-indigo-500 pl-4 py-2"
|
||||
>
|
||||
Manage VIPs
|
||||
</Link>
|
||||
<Link
|
||||
to="/drivers"
|
||||
className="block w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Manage Drivers
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900 flex items-center gap-2">
|
||||
<Plane className="h-4 w-4" />
|
||||
{flight.flightNumber}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{flight.vip?.name} • {flight.departureAirport} → {flight.arrivalAirport}
|
||||
</p>
|
||||
{flight.scheduledDeparture && (
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
Departs: {formatDateTime(flight.scheduledDeparture)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs text-gray-500 block">
|
||||
{new Date(flight.flightDate).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
<span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
|
||||
flight.status?.toLowerCase() === 'scheduled' ? 'bg-blue-100 text-blue-800' :
|
||||
flight.status?.toLowerCase() === 'boarding' ? 'bg-yellow-100 text-yellow-800' :
|
||||
flight.status?.toLowerCase() === 'departed' ? 'bg-purple-100 text-purple-800' :
|
||||
flight.status?.toLowerCase() === 'landed' ? 'bg-green-100 text-green-800' :
|
||||
flight.status?.toLowerCase() === 'delayed' ? 'bg-orange-100 text-orange-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{flight.status || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
No upcoming flights tracked.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<div className="bg-white shadow rounded-lg p-6">
|
||||
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Upcoming Events
|
||||
</h2>
|
||||
{upcomingEvents.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{upcomingEvents.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="border-l-4 border-primary pl-4 py-2"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{event.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{event.vip?.name} • {event.driver?.name || 'No driver assigned'}
|
||||
</p>
|
||||
{event.location && (
|
||||
<p className="text-xs text-gray-400 mt-1">{event.location}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs text-gray-500 block">
|
||||
{formatDateTime(event.startTime)}
|
||||
</span>
|
||||
<span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
|
||||
event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800' :
|
||||
event.type === 'MEETING' ? 'bg-purple-100 text-purple-800' :
|
||||
event.type === 'MEAL' ? 'bg-green-100 text-green-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{event.type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
No upcoming events scheduled.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user