# Family Dashboard - Event Action Buttons

## Files Created

```
shared/project-docs/dashboard/
├── templates/
│   ├── index.html      # Main dashboard page with HTMX loading
│   └── events.html     # Event card fragment (Jinja2 template)
├── static/
│   └── style.css       # Dashboard styles with color tokens
├── demo.html           # Standalone demo with simulated interactions
└── README.md           # This file
```

## Implementation Summary

### Event Card Action Buttons

Three event states with corresponding button mappings:

| Status | Primary | Secondary | Tertiary |
|--------|---------|-----------|----------|
| **needs_confirmation** | ✅ Confirm | ❌ Decline | 💬 Counter |
| **pending** | ✅ Confirm | ❌ Cancel | 📝 Modify |
| **confirmed** | — | ❌ Cancel | 📝 Reschedule |

### Technical Details

**HTMX Integration:**
- Async POST requests to `/api/events/{id}/confirm`, `/decline`, `/reschedule`
- `hx-swap="outerHTML"` replaces the entire card on success
- Spinner animation during requests (CSS spinner via `htmx-request` class)

**Animations:**
- Decline/Cancel: 300ms fade-out + slide-left before hiding card
- Success: Card updates with new status badge color

**iPad Safari Compatibility:**
- Minimum touch targets: 44px height, 88px width
- `@media (pointer: coarse)` query for touch devices
- Responsive layout stacks buttons on narrow screens

**Color Tokens:**
- Green (`#22c55e`): Confirm actions
- Red (`#ef4444`): Decline/Cancel actions
- Yellow (`#eab308`): Modify actions
- Purple (`#8b5cf6`): Counter proposals
- Blue (`#3b82f6`): Reschedule actions

### API Endpoints Expected

Socrates is implementing:
- `POST /api/events/{id}/confirm` → Returns updated event card HTML
- `POST /api/events/{id}/decline` → Returns success, card fades out
- `POST /api/events/{id}/reschedule` → Returns updated event card HTML

### Usage

The `events.html` template expects a list of event objects:

```python
events = [
    {
        "id": 1,
        "title": "Sullivan's Soccer Practice",
        "start": "4:00 PM",
        "day_label": "Today",
        "status": "needs_confirmation",  # or "pending", "confirmed"
        "event_type": "sports",
        "location": "Green Bay Community Center"
    }
]
```

### Demo

Open `demo.html` in a browser to test the interactions without the backend.