# Dashboard Jinja2 Conversion — Handoff to Socrates

**Date:** 2026-04-24
**Status:** ✅ Templates ready. Socrates to update router to use Jinja2Templates.

---

## What Changed

The dashboard has been converted from static HTML to Jinja2 templates:

| Old | New |
|-----|-----|
| `templates/index.html` (static) | `templates/index.html.j2` (Jinja2) |
| — | `templates/base.html.j2` (new base template) |

---

## Files Delivered

```
shared/project-docs/dashboard/templates/
├── base.html.j2          # Base template with HTMX/CDN includes
└── index.html.j2         # Dashboard extends base.html.j2
```

The original static `index.html` is kept as backup/reference.

---

## Router Update Required

Current code (dashboard/router.py):

```python
from fastapi import APIRouter, Request, HTTPException
from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
from pathlib import Path

index_path = DASHBOARD_TEMPLATES_DIR / "index.html"
html_content = index_path.read_text()
return HTMLResponse(content=html_content)
```

Update to:

```python
from fastapi import APIRouter, Request, HTTPException
from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
from fastapi.templating import Jinja2Templates
from pathlib import Path

# Create templates instance
templates = Jinja2Templates(directory=str(DASHBOARD_TEMPLATES_DIR))

@router.get("/", response_class=HTMLResponse)
async def dashboard_root(request: Request):
    """Serve family dashboard at root path (for family.hoffdesk.com)."""
    if not is_authenticated(request):
        return RedirectResponse(url="/family/login/?redirect=/", status_code=302)
    
    return templates.TemplateResponse(
        request=request,
        name="index.html.j2",
        context={
            "user": get_session(request),
            "title": "Today"
        }
    )
```

---

## Base Template Structure

```jinja2
{% extends "base.html.j2" %}

{% block title %}Family Dashboard{% endblock %}

{% block content %}
  <!-- Dashboard cards here -->
{% endblock %}

{% block scripts %}
  <!-- Dashboard JavaScript -->
{% endblock %}
```

---

## Acceptance Criteria

- [ ] Router imports `Jinja2Templates`
- [ ] Router uses `templates.TemplateResponse()`
- [ ] Template context includes `request`, `user`, `title`
- [ ] Dashboard renders correctly at `family.hoffdesk.com/`
- [ ] HTMX polling works (`/api/today`)
- [ ] JavaScript removed events widget works
- [ ] Static CSS loads (`/static/style.css`)

---

## Notes

- No CDN changes — still using unpkg HTMX CDN
- All HTMX endpoints remain relative paths
- Removed events widget still uses JS fetch (not HTMX) for Bearer token handling
- Base template handles layout; index.html.j2 handles content + scripts