Family Dashboard - Handoff Document

Summary

iPad-optimized React/Next.js family dashboard has been built and is ready for integration with the backend API.

What Was Built

Project Structure

family-dashboard/
├── src/
│   ├── app/                 # Next.js app router
│   │   ├── layout.tsx       # Root layout with iPad viewport
│   │   ├── page.tsx         # Main dashboard with tab navigation
│   │   └── globals.css      # Design tokens and iPad styles
│   ├── components/
│   │   ├── ui/              # Reusable UI components
│   │   │   ├── Card.tsx     # Card, EventCard, DocumentCard, StatusBadge
│   │   │   └── Navigation.tsx # TabNav, Header, MemberFilter, EmptyState
│   │   └── views/           # View components
│   │       ├── TodayView.tsx    # Today/urgent/needs attention/weather/health
│   │       ├── WeekView.tsx     # Week calendar + maintenance
│   │       ├── DocumentsView.tsx # Document browser + quick actions
│   │       └── FamilyView.tsx   # Per-member filtered view
│   ├── hooks/
│   │   └── useWebSocket.ts  # WebSocket hook + polling fallback
│   ├── lib/
│   │   └── api.ts           # API service layer
│   ├── mocks/
│   │   └── data.ts          # Mock data matching API contract
│   └── types/
│       └── index.ts         # TypeScript types
├── dist/                    # Build output (static)
├── next.config.ts           # Static export config
└── INTEGRATION.md           # API integration guide

Features Implemented

1. Today View
   - Urgent events (next 24h)
   - Today's calendar
   - Items needing attention
   - Weather with hourly forecast
   - System health status

2. Week View
   - Weekly calendar grid
   - Day-by-day event listing
   - Maintenance due items
   - Member filtering

3. Documents View
   - Recent documents with type icons
   - Type filtering (school, medical, camp, general)
   - Quick action buttons

4. Family View
   - Member selector with stats
   - Per-member event filtering
   - Upcoming events for selected member
   - Action items
   - Recent activity

Design Features

• iPad-optimized: 44pt minimum touch targets
• Dark theme: Matching existing dashboard aesthetic
• Card-based layout: No tables, touch-friendly
• Real-time updates: WebSocket with polling fallback
• Responsive: Works in portrait and landscape

Integration Points

API Endpoints Required

See INTEGRATION.md for full details. The dashboard expects:

• GET /api/v1/briefing - Daily summary
• GET /api/v1/events - Events list
• GET /api/v1/weather - Weather data
• GET /api/v1/health - System health
• GET /api/v1/maintenance - Maintenance items
• GET /api/v1/documents - Recent documents
• WebSocket /ws/events - Real-time updates

Auth Integration

The dashboard uses session cookies and expects:
- Session token in cookie: session_token
- Authorization header: Bearer <token>
- Redirect to /family/login/ on 401

Environment Variables

# .env.local
NEXT_PUBLIC_API_URL=https://family.hoffdesk.com/api/v1
NEXT_PUBLIC_USE_MOCK=false  # Set true for dev without backend

Running the Dashboard

Development (with mock data)

cd family-dashboard
npm run dev:mock
# Open http://localhost:3000

Development (with real API)

cd family-dashboard
npm run dev

Production Build

cd family-dashboard
npm run build
# Output in dist/ - static files ready to serve

Files for Socrates

API Spec

• src/types/index.ts - TypeScript types matching API contract
• INTEGRATION.md - Full API endpoint specification
• src/mocks/data.ts - Expected data shapes

Design Tokens

• /home/hoffmann_admin/.openclaw/shared/design-tokens/ipad-layout.json - Layout constants
• src/app/globals.css - Color tokens and styles

Status

✅ Complete:
- React components with TypeScript
- iPad-optimized CSS/Tailwind
- Mock data service for development
- Integration points documented
- WebSocket + polling fallback
- Build successful

⏳ Pending (requires backend):
- Real API integration
- WebSocket endpoint
- Session auth verification

Next Steps

1. Socrates implements API endpoints per INTEGRATION.md
2. Test with real API by setting NEXT_PUBLIC_USE_MOCK=false
3. Deploy static files to serve from FastAPI or nginx
4. Configure family.hoffdesk.com subdomain

Mock Data

The mock data includes:
- 5 family members (Matt, Aundrea, Sullivan, Harper, Family)
- 7 sample events (calendar, coordination, maintenance, document types)
- 3 documents (school, medical, camp)
- 3 maintenance items (vehicle, home, pet)
- Weather and health data

This allows testing all views without a backend connection.

Testing

# Build and verify
cd family-dashboard
npm run build

# Check output
ls dist/
# index.html should be present with all assets

All views have been verified to render correctly with mock data.