Skip to content

Frontend UI Audit Report

Generated: 2025-12-05 Updated: 2025-12-11 Framework: FastHTML with Jinja2 + TailwindCSS Status: Core CRUD features complete, stub pages remain for future features

Executive Summary

The cbapp frontend uses FastHTML (Python-based server-side rendering) with Jinja2 templates. All core CRUD operations are now wired to real APIs. Only stub pages for future features remain unimplemented.

Key Finding: Phase 1 (Events + Dashboard) and Phase 2 (Audience CRUD) are complete. Phase 3 stub pages need requirements definition before implementation.

Technology Stack

Component Technology Notes
Backend Server FastAPI Python async web framework
Frontend Server FastHTML + Starlette Runs separately, proxies API requests
Templating Jinja2 Server-side HTML rendering
UI Framework Tailwind CSS 2.2.19 CSS utility framework (CDN)
Icons Font Awesome 6.0 SVG/CSS icons (CDN)
Interactivity HTMX 1.9.2 Form submissions and dynamic updates
HTTP Client httpx Async Python HTTP for API calls

Feature Status Matrix

Fully Working (Real API Integration)

Feature Frontend Route Backend API Notes
Dashboard /dashboard /api/persons, /api/events ✅ Real counts and recent items
Audience List /audience GET /api/persons ✅ Filtering, pagination, search
Audience Detail /audience/{id} GET /api/persons/{id} ✅ View member details
Audience Create /audience/new POST /api/persons ✅ Form wired to API
Audience Edit /audience/{id}/edit PUT /api/persons/{id} ✅ Form wired to API
Audience Delete /audience/{id}/delete DELETE /api/persons/{id} ✅ Calls API
Events List /events GET /api/events ✅ Real events from API
Event Detail /events/{id} GET /api/events/{id} ✅ Real event data
Event Create /events/new POST /api/events ✅ Form wired to API
Event Edit /events/{id}/edit PUT /api/events/{id} ✅ Form wired to API
Event Delete /events/{id}/delete DELETE /api/events/{id} ✅ Calls API
User Management /users/* /api/users/* ✅ Full CRUD working
Segments /segments /api/segments/* ✅ Chat interface, execute segments
i360 Search /i360 /api/i360/* ✅ Voter lookup working
Settings/Tags /settings /api/tags/*, /api/users ✅ Tag hierarchy display
Semantic Search /audiencev2 /api/persons/search/semantic ✅ Advanced search with embeddings

Stub Pages (No Backend, No Implementation) - Phase 3

Feature Frontend Route GitHub Issue Notes
Communications /communications #25 SMS/email/call logging - needs backend
Reports /reports #26 Needs requirements definition
Goals /goals #27 Needs requirements definition
Maps /maps #28 Geographic visualization - evaluate need
Imports /imports #29 May overlap with tenant manager
Tags (main page) /tags - Stub - tag management is in Settings

Detailed Findings

✅ COMPLETED: Dashboard (/dashboard)

Location: src/app/main.py lines 392-450

Status: ✅ Implemented - Uses real API calls at lines 401-403

✅ COMPLETED: Events Module (/events/*)

Location: src/app/main.py lines 870-1089

Status: ✅ All routes wired to API: - List: line 887 - api_request("get", "/events", ...) - Detail: line 984 - api_request("get", f"/events/{event_id}", ...) - Create: line 951 - api_request("post", "/events", ...) - Edit: line 1031 - api_request("put", f"/events/{event_id}", ...) - Delete: line 1080 - api_request("delete", f"/events/{event_id}", ...)

✅ COMPLETED: Audience CRUD (/audience/*)

Location: src/app/main.py lines 580-850

Status: ✅ All routes wired to API: - Create: line 619 - api_request("post", "/persons/", ...) - Edit: line 777 - api_request("put", f"/persons/{member_id}", ...) - Delete: line 839 - api_request("delete", f"/persons/{member_id}", ...)

🔲 STUB: Communications (/communications)

Location: src/app/main.py lines 945-953, src/app/templates/communications/index.html

Current State: Template exists with filter dropdowns but no functionality.

Backend API: Does not exist - needs to be created.

Scope: This is a larger feature requiring: - Backend: Communication model, routes for SMS/email logs - Frontend: List view, detail view, compose interface - Integration: External SMS/email service

File Structure

src/app/
├── main.py                         # All route handlers
├── static/
│   ├── images/                     # Logos and branding
│   ├── css/styles.css
│   └── fusion/                     # Data viewer assets
└── templates/
    ├── layout.html                 # Master template with nav
    ├── login.html
    ├── dashboard.html              # ✅ Working
    ├── audience/
    │   ├── index.html              # ✅ Working
    │   ├── v2.html                 # ✅ Working (semantic search)
    │   ├── detail.html             # ✅ Working
    │   └── form.html               # ✅ Working (create/edit)
    ├── events/
    │   ├── index.html              # ✅ Working
    │   ├── detail.html             # ✅ Working
    │   └── form.html               # ✅ Working (create/edit)
    ├── segments/
    │   └── index.html              # ✅ Working
    ├── communications/
    │   └── index.html              # 🔲 Stub (#25)
    ├── i360/
    │   ├── search.html             # ✅ Working
    │   └── detail.html             # ✅ Working
    ├── settings/
    │   └── index.html              # ✅ Working
    ├── users/
    │   ├── index.html              # ✅ Working
    │   ├── detail.html             # ✅ Working
    │   └── form.html               # ✅ Working
    └── [tags|maps|goals|reports|imports]/
        └── index.html              # 🔲 Stubs (#26-29)

Implementation Status

✅ Phase 1: Quick Wins - COMPLETE

All Events and Dashboard routes now use real API calls.

✅ Phase 2: Audience CRUD - COMPLETE

All Audience CRUD operations now use real API calls.

🔲 Phase 3: New Features (Requires backend work)

Open GitHub Issues: - #25 Communications - Design and implement full feature - #26 Reports - Define requirements, implement - #27 Goals - Define requirements, implement - #28 Maps - Evaluate need, implement if required - #29 Imports - May already exist in tenant manager

API Helper Reference

The frontend has a well-implemented API helper at main.py lines 154-202:

async def api_request(method, endpoint, token=None, data=None, params=None):
    """Make authenticated API request to backend."""
    # Returns parsed JSON or error dict
    # Handles 401 SESSION_EXPIRED automatically

All routes should use this helper for consistency.

Notes for Discussion

  1. Event Registrations: The backend supports event registrations with check-in status. Should the UI show:
  2. Registration list on event detail page?
  3. Check-in interface for day-of operations?

  4. Registration counts on event list?

  5. Audience Tags: The create/edit forms have hardcoded tag lists. Should these:

  6. Fetch from /api/tags dynamically?
  7. Support creating new tags inline?

  8. Use tag hierarchy for organization?

  9. Bulk Operations: The audience list has selection checkboxes. What bulk operations should be supported?

  10. Bulk tag assignment?
  11. Bulk delete?

  12. Export selected?

  13. Communications Priority: Is this an MVP feature or can it wait? Options:

  14. Full SMS/email integration
  15. Simple activity log only
  16. Defer entirely

Your Turn!

Please review this audit and add your thoughts below. After dinner, let's plan the implementation approach!

Response Section