Major Enhancement: NestJS Migration + CASL Authorization + Error Handling

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>
2026-01-31 08:50:25 +01:00
parent 8ace1ab2c1
commit 868f7efc23
351 changed files with 44997 additions and 6276 deletions
--- a/frontend/src/pages/CommandCenter.tsx
+++ b/frontend/src/pages/CommandCenter.tsx
@@ -0,0 +1,501 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { Loading } from '@/components/Loading';
+import {
+  Car,
+  Clock,
+  MapPin,
+  Users,
+  AlertTriangle,
+  CheckCircle,
+  Plane,
+  Radio,
+} from 'lucide-react';
+import { useEffect } from 'react';
+
+interface Event {
+  id: string;
+  title: string;
+  pickupLocation: string | null;
+  dropoffLocation: string | null;
+  location: string | null;
+  startTime: string;
+  endTime: string;
+  actualStartTime: string | null;
+  status: string;
+  type: string;
+  vip: {
+    id: string;
+    name: string;
+  };
+  driver: {
+    id: string;
+    name: string;
+  } | null;
+  vehicle: {
+    id: string;
+    name: string;
+    type: string;
+    seatCapacity: number;
+  } | null;
+}
+
+interface Vehicle {
+  id: string;
+  name: string;
+  type: string;
+  seatCapacity: number;
+  status: string;
+  currentDriver: { name: string } | null;
+}
+
+interface VIP {
+  id: string;
+  name: string;
+  organization: string | null;
+  arrivalMode: string;
+  expectedArrival: string | null;
+  flights: Array<{
+    id: string;
+    flightNumber: string;
+    arrivalAirport: string;
+    scheduledArrival: string | null;
+    status: string | null;
+  }>;
+}
+
+export function CommandCenter() {
+  const { data: events, refetch: refetchEvents } = useQuery<Event[]>({
+    queryKey: ['events'],
+    queryFn: async () => {
+      const { data } = await api.get('/events');
+      return data;
+    },
+  });
+
+  const { data: vehicles, refetch: refetchVehicles } = useQuery<Vehicle[]>({
+    queryKey: ['vehicles'],
+    queryFn: async () => {
+      const { data } = await api.get('/vehicles');
+      return data;
+    },
+  });
+
+  const { data: vips, refetch: refetchVips } = useQuery<VIP[]>({
+    queryKey: ['vips'],
+    queryFn: async () => {
+      const { data } = await api.get('/vips');
+      return data;
+    },
+  });
+
+  // Auto-refresh every 30 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refetchEvents();
+      refetchVehicles();
+      refetchVips();
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, [refetchEvents, refetchVehicles, refetchVips]);
+
+  if (!events || !vehicles || !vips) {
+    return <Loading message="Loading Command Center..." />;
+  }
+
+  const now = new Date();
+  const twoHoursLater = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+  const fourHoursLater = new Date(now.getTime() + 4 * 60 * 60 * 1000);
+
+  // Active trips (next 2 hours)
+  const activeTrips = events
+    .filter((event) => {
+      const start = new Date(event.startTime);
+      return start > now && start <= twoHoursLater && event.type === 'TRANSPORT';
+    })
+    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+
+  // En route trips (already started, not completed)
+  const enRouteTrips = events.filter(
+    (event) =>
+      event.status === 'IN_PROGRESS' && event.type === 'TRANSPORT'
+  );
+
+  // Upcoming arrivals (next 4 hours)
+  const upcomingArrivals = vips
+    .filter((vip) => {
+      if (vip.expectedArrival) {
+        const arrival = new Date(vip.expectedArrival);
+        return arrival > now && arrival <= fourHoursLater;
+      }
+      // Check flight arrivals
+      return vip.flights.some((flight) => {
+        if (flight.scheduledArrival) {
+          const arrival = new Date(flight.scheduledArrival);
+          return arrival > now && arrival <= fourHoursLater;
+        }
+        return false;
+      });
+    })
+    .sort((a, b) => {
+      const aTime = a.expectedArrival || a.flights[0]?.scheduledArrival || '';
+      const bTime = b.expectedArrival || b.flights[0]?.scheduledArrival || '';
+      return new Date(aTime).getTime() - new Date(bTime).getTime();
+    });
+
+  // Vehicle status
+  const availableVehicles = vehicles.filter((v) => v.status === 'AVAILABLE');
+  const inUseVehicles = vehicles.filter((v) => v.status === 'IN_USE');
+
+  // Get time until event
+  const getTimeUntil = (dateStr: string) => {
+    const eventTime = new Date(dateStr);
+    const diff = eventTime.getTime() - now.getTime();
+    const minutes = Math.floor(diff / 60000);
+
+    if (minutes < 0) return 'NOW';
+    if (minutes < 60) return `${minutes} min`;
+    const hours = Math.floor(minutes / 60);
+    const remainingMin = minutes % 60;
+    return `${hours}h ${remainingMin}m`;
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'SCHEDULED':
+        return 'bg-blue-100 text-blue-800';
+      case 'IN_PROGRESS':
+        return 'bg-green-100 text-green-800';
+      case 'COMPLETED':
+        return 'bg-gray-100 text-gray-800';
+      case 'CANCELLED':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold text-gray-900">Command Center</h1>
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <Radio className="h-4 w-4 animate-pulse text-green-500" />
+          Auto-refreshing every 30s
+        </div>
+      </div>
+
+      {/* Resource Status Summary */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-green-500">
+          <div className="flex justify-between items-center">
+            <div>
+              <p className="text-sm text-gray-600">Vehicles Available</p>
+              <p className="text-2xl font-bold text-green-600">
+                {availableVehicles.length}/{vehicles.length}
+              </p>
+            </div>
+            <Car className="h-8 w-8 text-green-500" />
+          </div>
+        </div>
+        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
+          <div className="flex justify-between items-center">
+            <div>
+              <p className="text-sm text-gray-600">Vehicles In Use</p>
+              <p className="text-2xl font-bold text-blue-600">{inUseVehicles.length}</p>
+            </div>
+            <Car className="h-8 w-8 text-blue-500" />
+          </div>
+        </div>
+        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500">
+          <div className="flex justify-between items-center">
+            <div>
+              <p className="text-sm text-gray-600">Upcoming Trips</p>
+              <p className="text-2xl font-bold text-yellow-600">{activeTrips.length}</p>
+            </div>
+            <Clock className="h-8 w-8 text-yellow-500" />
+          </div>
+        </div>
+        <div className="bg-white p-4 rounded-lg shadow border-l-4 border-purple-500">
+          <div className="flex justify-between items-center">
+            <div>
+              <p className="text-sm text-gray-600">VIP Arrivals</p>
+              <p className="text-2xl font-bold text-purple-600">{upcomingArrivals.length}</p>
+            </div>
+            <Plane className="h-8 w-8 text-purple-500" />
+          </div>
+        </div>
+      </div>
+
+      {/* En Route Trips */}
+      {enRouteTrips.length > 0 && (
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <div className="bg-green-600 px-6 py-3 flex items-center">
+            <Car className="h-5 w-5 text-white mr-2" />
+            <h2 className="text-lg font-semibold text-white">
+              En Route Now ({enRouteTrips.length})
+            </h2>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {enRouteTrips.map((trip) => (
+              <div key={trip.id} className="p-6 hover:bg-gray-50">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(trip.status)}`}>
+                        {trip.status}
+                      </span>
+                      <span className="text-sm font-medium text-gray-900">
+                        {trip.vip.name}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-4 text-sm text-gray-600">
+                      <div className="flex items-center gap-1">
+                        <MapPin className="h-4 w-4" />
+                        {trip.pickupLocation} → {trip.dropoffLocation}
+                      </div>
+                      {trip.driver && (
+                        <div className="flex items-center gap-1">
+                          <Users className="h-4 w-4" />
+                          Driver: {trip.driver.name}
+                        </div>
+                      )}
+                      {trip.vehicle && (
+                        <div className="flex items-center gap-1">
+                          <Car className="h-4 w-4" />
+                          {trip.vehicle.name}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-gray-500">
+                      Started {new Date(trip.actualStartTime || trip.startTime).toLocaleTimeString()}
+                    </p>
+                    <p className="text-xs text-gray-400">
+                      ETA: {new Date(trip.endTime).toLocaleTimeString()}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Active Trips - Next 2 Hours */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="bg-blue-600 px-6 py-3 flex items-center">
+          <Clock className="h-5 w-5 text-white mr-2" />
+          <h2 className="text-lg font-semibold text-white">
+            Upcoming Trips - Next 2 Hours ({activeTrips.length})
+          </h2>
+        </div>
+        {activeTrips.length === 0 ? (
+          <div className="p-6 text-center text-gray-500">
+            <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
+            <p>No scheduled trips in the next 2 hours</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-200">
+            {activeTrips.map((trip) => {
+              const timeUntil = getTimeUntil(trip.startTime);
+              const isUrgent = new Date(trip.startTime).getTime() - now.getTime() < 15 * 60 * 1000;
+
+              return (
+                <div
+                  key={trip.id}
+                  className={`p-6 hover:bg-gray-50 ${isUrgent ? 'bg-yellow-50' : ''}`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      {isUrgent && (
+                        <div className="flex items-center gap-1 mb-2">
+                          <AlertTriangle className="h-4 w-4 text-yellow-600" />
+                          <span className="text-xs font-medium text-yellow-600">URGENT</span>
+                        </div>
+                      )}
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(trip.status)}`}>
+                          {trip.status}
+                        </span>
+                        <span className="text-sm font-medium text-gray-900">
+                          {trip.vip.name}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-4 text-sm text-gray-600">
+                        <div className="flex items-center gap-1">
+                          <MapPin className="h-4 w-4" />
+                          {trip.pickupLocation || trip.location} → {trip.dropoffLocation || 'Destination'}
+                        </div>
+                        {trip.driver && (
+                          <div className="flex items-center gap-1">
+                            <Users className="h-4 w-4" />
+                            Driver: {trip.driver.name}
+                          </div>
+                        )}
+                        {trip.vehicle && (
+                          <div className="flex items-center gap-1">
+                            <Car className="h-4 w-4" />
+                            {trip.vehicle.name} ({trip.vehicle.seatCapacity} seats)
+                          </div>
+                        )}
+                        {!trip.driver && (
+                          <span className="text-red-600 font-medium">⚠️ NO DRIVER ASSIGNED</span>
+                        )}
+                        {!trip.vehicle && (
+                          <span className="text-red-600 font-medium">⚠️ NO VEHICLE ASSIGNED</span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-lg font-bold text-blue-600">
+                        in {timeUntil}
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        Departs: {new Date(trip.startTime).toLocaleTimeString()}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Upcoming VIP Arrivals */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="bg-purple-600 px-6 py-3 flex items-center">
+          <Plane className="h-5 w-5 text-white mr-2" />
+          <h2 className="text-lg font-semibold text-white">
+            Incoming VIPs - Next 4 Hours ({upcomingArrivals.length})
+          </h2>
+        </div>
+        {upcomingArrivals.length === 0 ? (
+          <div className="p-6 text-center text-gray-500">
+            <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
+            <p>No VIP arrivals in the next 4 hours</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-200">
+            {upcomingArrivals.map((vip) => {
+              const arrival = vip.expectedArrival || vip.flights[0]?.scheduledArrival;
+              const flight = vip.flights[0];
+
+              return (
+                <div key={vip.id} className="p-6 hover:bg-gray-50">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-2">
+                        {vip.arrivalMode === 'FLIGHT' ? (
+                          <Plane className="h-4 w-4 text-purple-600" />
+                        ) : (
+                          <Car className="h-4 w-4 text-gray-600" />
+                        )}
+                        <span className="text-sm font-medium text-gray-900">{vip.name}</span>
+                        {vip.organization && (
+                          <span className="text-xs text-gray-500">({vip.organization})</span>
+                        )}
+                      </div>
+                      {flight && (
+                        <div className="text-sm text-gray-600 mb-1">
+                          Flight {flight.flightNumber} → {flight.arrivalAirport}
+                          {flight.status && (
+                            <span className="ml-2 text-xs">
+                              Status: {flight.status}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                      <div className="text-sm text-gray-600">
+                        Mode: {vip.arrivalMode.replace('_', ' ')}
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-lg font-bold text-purple-600">
+                        in {getTimeUntil(arrival!)}
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        {new Date(arrival!).toLocaleTimeString()}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Available Resources */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Available Vehicles */}
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <div className="bg-gray-700 px-6 py-3 flex items-center">
+            <Car className="h-5 w-5 text-white mr-2" />
+            <h2 className="text-lg font-semibold text-white">
+              Available Vehicles ({availableVehicles.length})
+            </h2>
+          </div>
+          {availableVehicles.length === 0 ? (
+            <div className="p-6 text-center text-gray-500">
+              <AlertTriangle className="h-12 w-12 mx-auto mb-2 text-yellow-500" />
+              <p>No vehicles currently available</p>
+            </div>
+          ) : (
+            <ul className="divide-y divide-gray-200">
+              {availableVehicles.map((vehicle) => (
+                <li key={vehicle.id} className="px-6 py-3">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <p className="text-sm font-medium text-gray-900">{vehicle.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {vehicle.type.replace('_', ' ')} - {vehicle.seatCapacity} seats
+                      </p>
+                    </div>
+                    <CheckCircle className="h-5 w-5 text-green-500" />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* In-Use Vehicles */}
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <div className="bg-gray-700 px-6 py-3 flex items-center">
+            <Car className="h-5 w-5 text-white mr-2" />
+            <h2 className="text-lg font-semibold text-white">
+              In-Use Vehicles ({inUseVehicles.length})
+            </h2>
+          </div>
+          {inUseVehicles.length === 0 ? (
+            <div className="p-6 text-center text-gray-500">
+              <CheckCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
+              <p>No vehicles currently in use</p>
+            </div>
+          ) : (
+            <ul className="divide-y divide-gray-200">
+              {inUseVehicles.map((vehicle) => (
+                <li key={vehicle.id} className="px-6 py-3">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <p className="text-sm font-medium text-gray-900">{vehicle.name}</p>
+                      <p className="text-xs text-gray-500">
+                        {vehicle.type.replace('_', ' ')} - {vehicle.seatCapacity} seats
+                        {vehicle.currentDriver && ` - ${vehicle.currentDriver.name}`}
+                      </p>
+                    </div>
+                    <div className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}