Plan: CRAIG Mock SPA — All 23 Screens

On this page

Context

CRAIG has 23 SVG mockups covering 6 caseworker modules + 3 portals, documented with a full design system spec (svg-mockup-reference.adoc). The goal is a real HTML/CSS/JS single-page application that implements every screen with actual DOM elements, forms, tables, and interactivity — not just SVG viewers. This serves as a working prototype for stakeholder demos and a scaffold for future development.

Status

Complete. The mock SPA is live in the mock/ directory with 26 screens (23 original + 3 additional), Alpine.js store, hash-based router, and Georgia Orchard design system theming.

Location

All files in mock/ directory:

mock/
├── index.html                     # SPA shell (only HTML file)
├── css/
│   ├── tokens.css                 # CSS custom properties (design tokens)
│   ├── chrome.css                 # Branding bar, nav, breadcrumb layout
│   ├── components.css             # Cards, tables, forms, buttons, badges, etc.
│   └── screens.css                # Minimal per-screen layout overrides
├── js/
│   ├── router.js                  # Hash-based router with fragment fetching
│   ├── store.js                   # Alpine.js global store (app state, mock context)
│   └── data.js                    # All mock data as plain JS constants
└── screens/
    ├── intake/
    ├── cases/
    ├── placement/
    ├── eligibility/
    ├── financial/
    ├── reporting/
    └── portals/

Technical Architecture

  • Routing: Hash-based (/intake/worklist, /cases/dashboard). On hashchange, fetches HTML fragment from screens/, calls Alpine.initTree() on new content.

  • State: Alpine.js global store with currentRoute, currentModule, isPortal, selected entity IDs, wizard state.

  • Mock Data: window.MOCK_DATA in js/data.js with arrays for intakes, cases, placements, eligibility results, payments, providers, data quality metrics.

  • CSS: Georgia Orchard design system tokens, reusable component classes (cards, tables, forms, badges, tabs, wizard steps, timeline).

Navigation Routes

Hash Screen Module

#/intake/worklist

Investigation Worklist

intake

#/intake/new-referral

New Referral Form

intake

#/intake/safety-assessment

Safety Assessment

intake

#/cases/dashboard

Caseworker Dashboard

cases

#/cases/case-summary

Case Summary

cases

#/cases/case-plan

Case Plan

cases

#/placement/matching

Placement Matching

placement

#/placement/foster-home

Foster Home Record

placement

#/placement/history

Placement History

placement

#/eligibility/step1

Eligibility — Basic Info

eligibility

#/eligibility/step2

Eligibility — Judicial Findings

eligibility

#/eligibility/step3

Eligibility — AFDC Linkage

eligibility

#/eligibility/decision

Eligibility Decision Summary

eligibility

#/financial/payments

Payments List

financial

#/financial/payment-detail

Payment Detail

financial

#/financial/claiming

IV-E Claiming Report

financial

#/reporting/data-quality

Data Quality Dashboard

reporting

#/reporting/afcars

AFCARS Submission

reporting

#/reporting/ncands

NCANDS Submission

reporting

#/portal/family

Family Portal Dashboard

portal

#/portal/provider-finder

Family Portal — Find Provider

portal

#/portal/foster-parent

Foster Parent Portal

portal

#/portal/provider

Provider Portal

portal
Edit this page · latest