trip-planner/.claude/11/plan-of-attack.md

Plannable Items Feature - Plan of Attack

Overview

Implement a plannable items feature for trips, with a simplified 3-table structure that allows users to create items and organize them into calendar slots.

Database Structure (3 tables)

1. plannable_items table

• id (primary key)
• trip_id (foreign key to trips)
• name (string)
• type (enum: hotel/restaurant/attraction/transport/activity)
• address (string, nullable)
• notes (text, nullable)
• metadata (JSON for type-specific fields)
• created_at, updated_at

2. calendar_slots table

• id (primary key)
• trip_id (foreign key to trips)
• name (string, e.g., "Monday", "Day 1", "Morning of Day 2")
• datetime_start, datetime_end
• slot_date (date)
• slot_order (integer, for sorting)
• created_at, updated_at

3. planned_items table (junction)

• id (primary key)
• plannable_item_id (foreign key)
• calendar_slot_id (foreign key)
• created_at, updated_at

Slot Management Strategy

• Auto-create day-based slots when trip is created or dates are updated
• Generate one slot per day between start_date and end_date
• Items can exist in "unplanned" state (no slot assignment) or be assigned to a slot

Backend Implementation

1. Database Migrations

• Create migration for plannable_items table
• Create migration for calendar_slots table
• Create migration for planned_items junction table

2. Models and Relationships

• PlannableItem model (belongs to Trip, belongs to many CalendarSlots through PlannedItems)
• CalendarSlot model (belongs to Trip, has many PlannableItems through PlannedItems)
• PlannedItem model (junction model with additional attributes)
• Update Trip model to include relationships

3. Business Logic

• Auto-create/update slots when trip dates change
• Handle slot regeneration when dates are modified
• Preserve existing planned items when possible

4. API Endpoints

GET    /api/trips/{id}/plannables       - List all plannable items for a trip
POST   /api/trips/{id}/plannables       - Create new plannable item
PUT    /api/plannables/{id}             - Update plannable item
DELETE /api/plannables/{id}             - Delete plannable item

GET    /api/trips/{id}/calendar-slots   - Get all slots for a trip
PUT    /api/calendar-slots/{id}         - Update slot (rename)

POST   /api/planned-items               - Assign item to slot
PUT    /api/planned-items/{id}          - Update assignment (change slot, time, order)
DELETE /api/planned-items/{id}          - Unassign item from slot
PUT    /api/calendar-slots/{id}/reorder - Reorder items within a slot

Frontend Implementation

1. Routing Setup

• Install react-router-dom package
• Configure routes in App.jsx
• Add route for trip detail page: /trip/:id

2. Trip Detail Page (TripDetail.jsx)

• Header section: Display trip name, dates, description
• Two-column layout:
  • Left: Plannable items sidebar
  • Right: Calendar view (future implementation)

3. Plannable Items Sidebar Components

PlannablesList.jsx

• "+" button at top to add new items
• "Unplanned Items" section
• Day slot sections with assigned items
• Drag & drop functionality between sections

PlannableItem.jsx

• Display item with type icon
• Show name and key details
• Edit/Delete actions
• Draggable wrapper

PlannableForm.jsx

• Modal/slide-out form
• Dynamic fields based on item type
• Validation

4. Update Existing Components

• Make TripCard clickable
• Add navigation to trip detail on click
• Update Dashboard to handle navigation

5. State Management

• Consider using Context or simple state management for:
  • Plannable items list
  • Calendar slots
  • Drag & drop state

UI/UX Considerations

• Type-specific icons (🏨 hotel, 🍽️ restaurant, 🎯 attraction, ✈️ transport, 🎭 activity)
• Color coding for different types
• Smooth drag & drop animations
• Loading states during API calls
• Confirmation dialogs for deletions
• Toast notifications for actions

Implementation Order

1. ✅ Backend migrations and models - COMPLETED
   • Created migrations for plannable_items, calendar_slots, planned_items tables
   • Created models with relationships
2. ✅ Backend API endpoints - COMPLETED
   • Created controllers for PlannableItem, CalendarSlot, PlannedItem
   • Added all routes to api.php
   • Organized controllers in DDD structure (Infrastructure/Domain)
3. ✅ Auto-slot creation - COMPLETED
   • Created CalendarSlotService
   • Created TripObserver to auto-create slots on trip creation/update
   • Registered service provider
4. ⏳ Frontend routing setup - TODO
5. ⏳ Trip detail page structure - TODO
6. ⏳ Plannable items CRUD - TODO
7. ⏳ Calendar slots display - TODO
8. ⏳ Drag & drop functionality - TODO
9. ⏳ Polish and edge cases - TODO

Future Enhancements (Not in MVP)

• Calendar view in right column
• Time-based slots (morning/afternoon/evening)
• Collaborative features (share with travel companions)
• Import from external sources (booking confirmations)
• Export to PDF/calendar formats
• Cost tracking and budgeting
• Map view of planned items