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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user