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:

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:

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.