🔨 Phase 3: Trip Management UI - List, Detail & Itinerary Pages

[kurosh87]

TODO

Trip List Page (/app/(dashboard)/trips/page.tsx)

• Grid view of user's trips
• Trip cards showing status, dates, destinations
• Filter by status (draft, planned, in_progress, completed)
• Sort by date, status, name
• "New Trip" creation button
• Empty state for no trips
• Loading states

Trip Detail Page (/app/(dashboard)/trip/[id]/page.tsx)

• Trip header with cover image, name, dates
• Status indicator and controls
• Day-by-day timeline view
• Map showing all stops
• Booking summary panel
• Collaborator list
• Settings/share options
• Tab navigation (Overview, Itinerary, Map, Bookings, Team)

Required Components:

• /components/trip/trip-card.tsx - Card for trip list
• /components/trip/trip-header.tsx - Trip title, dates, status
• /components/trip/trip-timeline.tsx - Day-by-day column view
• /components/trip/day-column.tsx - Single day with items
• /components/trip/trip-item.tsx - Draggable item in day
• /components/trip/add-item-dialog.tsx - Add site/POI/custom item
• /components/trip/new-trip-dialog.tsx - Create trip form
• /components/trip/trip-status-badge.tsx - Status indicator
• /components/trip/collaborators-panel.tsx - Team management

Features:

• Drag-and-drop reordering of items
• Inline editing of trip details
• Quick actions (duplicate day, delete item, etc.)
• Responsive design (mobile + desktop)
• Optimistic UI updates

API Integration:

• Connect to /api/trips endpoints
• Real-time updates with SWR or React Query
• Error handling and retry logic

References:

• FUNCTIONALITY_SPEC.md section 1 for trip features
• CLAUDE.md file structure for component organization
• Existing chat UI for design patterns