# 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