Compath Docs

Appearance

User Flows ​

This directory documents every major user flow in the Compath application, organized by user role and flow. Each flow has its own folder containing the flow Markdown file and any captured screenshots.

Status Legend ​

  • [ ] Not started
  • [x] Documented
  • [ Took Screenshots ] Documented and screenshots captured

Guest (Unauthenticated) ​

Visitors who are not logged in. They can only access public routes.

Client (Authenticated) ​

Clients are end-users receiving counseling services. They have a simplified navigation focused on their own sessions and communication.

Sidebar navigation: Dashboard, Inbox, Calendar, My Sessions, My Bookings

Onboarding ​

Daily Use ​

  • [ Took Screenshots ] C.2 Client Dashboard - Overview: upcoming sessions, treatment progress, notifications; screenshots: upcoming-sessions.png, empty-sessions.png, profile-modal.png
  • [ Took Screenshots ] C.3 Calendar - View own sessions/meetings on calendar (day/week/month); screenshots: calendar.png
  • [ Took Screenshots ] C.4 My Sessions - Browse sessions by status; screenshots: upcoming.png, completed.png, cancelled.png, overdue.png
  • [ Took Screenshots ] C.5 Session Details - View meeting info, notes, documents for a specific session; screenshots: session-details.png
  • [ Took Screenshots ] C.6 Join Meeting - Pre-join device check -> enter video room; screenshots: minimal-pre-join.png
  • [ Took Screenshots ] C.7 Meeting Room - In-meeting: video, audio, screen share, end meeting; screenshots: active-grid.png
  • [ Took Screenshots ] C.8 My Bookings - View upcoming and past bookings; screenshots: my-bookings.png, empty.png, error.png, cancel-dialog.png

Communication ​

  • [ Took Screenshots ] C.9 Inbox - View and send messages to counselor; screenshots: messages.png, notifications.png

Account ​

  • [ Took Screenshots ] C.10 Profile - View/edit personal info, avatar, preferences; screenshots: profile.png
  • [ Took Screenshots ] C.11 Billing - View subscription, manage plan, payment history; screenshots: billing.png

Counselor (Authenticated) ​

Counselors are practitioners managing clients, sessions, treatment plans, and assessments. They have the most feature-rich navigation.

Sidebar navigation: Dashboard, Inbox, Clients, Library*, Assessments*, Calendar, Sessions, Booking Settings, Landing Pages (beta)

*Library and Assessments are behind feature flag VITE_ENABLE_RESTRICTED_ROUTES.

Onboarding ​

Daily Use ​

  • [ Took Screenshots ] CO.2 Counselor Dashboard - Overview: upcoming sessions, recent clients, quick actions; screenshots: upcoming-sessions.png, empty-first-session.png, schedule-session-modal.png, instant-meeting-modal.png, invite-client-modal.png
  • [ Took Screenshots ] CO.3 Calendar - View all sessions/meetings on calendar + Google Calendar sync; screenshots: calendar.png
  • [x] CO.4 Google Calendar Sync - Connect Google account, sync calendar events
  • [ Took Screenshots ] CO.5 Sessions List - Browse sessions by status with filters; screenshots: upcoming.png, completed.png, cancelled.png, overdue.png
  • [ Took Screenshots ] CO.6 Session/Meeting Details - View meeting info, notes, participants, documents; screenshots: session-meeting-details.png
  • [ Took Screenshots ] CO.7 Join Meeting - Pre-join device check -> enter video room; screenshots: detailed-pre-join.png
  • [ Took Screenshots ] CO.8 Meeting Room - In-meeting: video, audio, screen share, end meeting; screenshots: focus-overview.png

Client Management ​

Library (Treatment Plans, Sessions, Activities) ​

Assessments ​

Booking ​

Landing Pages (beta) ​

Communication ​

  • [ Took Screenshots ] CO.30 Inbox - View and send messages to clients; screenshots: messages.png, notifications.png

Account ​

  • [ Took Screenshots ] CO.31 Profile - View/edit personal info, avatar, preferences, calendar settings; screenshots: profile.png
  • [ Took Screenshots ] CO.32 Billing - View subscription, manage plan, payment history; screenshots: billing.png

Admin (Authenticated) ​

Admins manage the platform: users, system settings, billing plans, and content templates.

Sidebar navigation: Dashboard, Inbox, User Management, Library*, Assessments*, Billing Management, System Settings

Platform Management ​

Billing Management ​

Communication ​

Invitation & Email Flows ​

Cross-role flows where a user action triggers an invitation, email, calendar invite, or in-app notification.

Cross-Role Flow Summary ​

Quick reference showing which roles participate in shared flows:

FlowGuestClientCounselorAdmin
Sign Up / Loginx
Onboardingxx
Dashboardxxx
Calendarxx
Sessions Listxx
Meeting Detailsx
Join Meetingxxx
Meeting Roomxx
Inboxxxx
Profile / Settingsxx
Billing (own)xx
Client Managementx
Libraryx
Assessments (manage)x
Take Assessmentxx
Booking (public)xx
Booking Settingsx
My Bookingsx
Landing Pagesx (beta)
User Managementx
System Settingsx
Billing Managementx
Client Invitation Lifecyclexxx
Templated Email Deliveryxxxx
Invitation Status Managementxxx
Supabase Auth Emailsxxxx
Booking Emails / Notificationsxxx
Meeting Invitations / Updatesxxx
Assessment Emails / Notificationsxxx
In-App Notificationsxxx

How to Document a Flow ​

When filling out a flow, create a folder under the relevant role using the lowercase flow ID and slug, then place the flow Markdown file inside it. For example, use guest/g1-sign-up/G1-sign-up.md, client/c2-client-dashboard/C2-client-dashboard.md, or counselor/co9-view-clients-list/CO9-view-clients-list.md.

Screenshots for a flow belong in that flow's screenshots/ folder, e.g. guest/g5-public-booking/screenshots/session-select.png.

Include:

  1. Summary - One paragraph describing the flow
  2. Role - Which role(s) this flow applies to
  3. Entry Point - How the user reaches this flow (URL, navigation, link)
  4. Preconditions - What must be true before the flow starts
  5. Steps - Numbered step-by-step walkthrough
  6. Mermaid Diagram - Visual flowchart
  7. Edge Cases - Error states, alternative paths, permission checks
  8. Related Flows - Links to connected flows

Template ​

markdown
# Flow ID: Flow Name

## Summary

Brief description of what this flow accomplishes.

## Role

- **Primary:** Guest / Client / Counselor / Admin
- **Secondary:** System (email, notifications)

## Entry Point

- URL: `/path`
- Navigation: Sidebar -> Item Name

## Preconditions

- Authenticated: yes / no
- Required role: counselor / client / admin / none
- Other: ...

## Steps

1. User navigates to ...
2. System displays ...
3. User clicks ...
4. System validates ...
5. ...

## Diagram

` ``mermaid
flowchart TD
    A[Start] --> B[Step 1]
    B --> C{Decision?}
    C -->|Yes| D[Step 2a]
    C -->|No| E[Step 2b] ` ``

## Edge Cases

- **Invalid input:** ...
- **Unauthorized access:** ...
- **Network failure:** ...

## Related Flows

- [G.2 Login](./guest/g2-login/G2-login.md)
- [C.1 Client Onboarding](./client/c1-client-onboarding/C1-client-onboarding.md)