# nox-mob/openapphub architecture

> Architecture diagram of the GitHub repository nox-mob/openapphub, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nox-mob/openapphub
- Repository: https://github.com/nox-mob/openapphub

## Overview

OpenAppHub is the account and organization hub for the OpenApp suite. Visitors sign in or accept invitations, establish an organization, then manage its members, settings, billing, and audit history; shared UI and Supabase-backed services support those workflows. The README documents these product capabilities, while sampled source confirms selected auth, shell, settings, and Stripe-webhook relationships. Several screens and service implementations were not sampled, so their internal links are omitted or marked unverified.

Main entry points: [`src/components/hub/HubShell.tsx`](https://github.com/nox-mob/openapphub/blob/main/src/components/hub/HubShell.tsx) (Signed-in shell), [`src/lib/orgs.ts`](https://github.com/nox-mob/openapphub/blob/main/src/lib/orgs.ts) (Organizations), [`src/screens/settings.tsx`](https://github.com/nox-mob/openapphub/blob/main/src/screens/settings.tsx) (Organization settings), [`shared/ui/AppShell.tsx`](https://github.com/nox-mob/openapphub/blob/main/shared/ui/AppShell.tsx) (Shared app shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and identity"]
  node_auth_routes["Auth routes<br/>[login.tsx]"]
  node_auth_actions["Auth actions<br/>[auth-client.ts]"]
  node_auth_callback["Auth callback<br/>[auth.callback.tsx]"]
end

subgraph group_hub["Hub experience"]
  node_hub_shell["Signed-in shell<br/>[HubShell.tsx]"]
  node_dashboard["Dashboard<br/>[dashboard.tsx]"]
  node_welcome["Organization setup<br/>[welcome.tsx]"]
  node_member_screen["Member management<br/>[members.tsx]"]
  node_settings_screen["Organization settings<br/>[settings.tsx]"]
  node_audit["Audit history<br/>[audit.tsx]"]
  node_billing_screen["Billing<br/>[billing.tsx]"]
end

subgraph group_domain["Organization operations"]
  node_orgs["Organizations<br/>[orgs.ts]"]
  node_members["Members and invites<br/>[members.ts]"]
  node_settings_service["Settings services<br/>[org-settings.ts]"]
  node_billing_core["Billing core<br/>[billing-core.ts]"]
end

subgraph group_shared["Shared suite layer"]
  node_app_shell["Shared app shell<br/>[AppShell.tsx]"]
  node_shared_invitation["Invitation page<br/>[InvitationPage.tsx]"]
  node_suite_apps["Suite app identity<br/>[apps.ts]"]
  node_hosted_config["Hosted routing<br/>[hosted.ts]"]
end

subgraph group_integrations["External services"]
  node_supabase_auth["Supabase Auth<br/>[client.ts]"]
  node_stripe_webhook["Stripe webhook"]
  node_stripe["Stripe"]
end

node_visitor(("Visitor"))

node_visitor -->|"starts sign-in"| node_auth_routes
node_auth_routes -.->|"uses auth actions"| node_auth_actions
node_auth_actions -->|"gets browser client"| node_supabase_auth
node_auth_callback -->|"checks session"| node_supabase_auth
node_auth_callback -->|"continues navigation"| node_visitor
node_hub_shell -->|"renders shell"| node_app_shell
node_hub_shell -->|"signs out through"| node_auth_actions
node_hub_shell -->|"reads hub context"| node_orgs
node_hub_shell -.->|"frames hub pages"| node_dashboard
node_welcome -.->|"sets up organization"| node_orgs
node_member_screen -.->|"manages membership"| node_members
node_shared_invitation -->|"loads invitation context"| node_orgs
node_settings_screen -->|"formats settings"| node_settings_service
node_settings_screen -->|"uses organization context"| node_orgs
node_settings_screen -->|"uses account operations"| node_members
node_billing_screen -.->|"manages billing"| node_billing_core
node_stripe_webhook -->|"handles webhook"| node_billing_core
node_stripe_webhook -->|"receives events from"| node_stripe
node_app_shell -->|"uses app identity"| node_suite_apps
node_app_shell -->|"uses hosted billing config"| node_hosted_config

click node_auth_routes "https://github.com/nox-mob/openapphub/blob/main/src/routes/login.tsx"
click node_auth_actions "https://github.com/nox-mob/openapphub/blob/main/src/lib/auth-client.ts"
click node_auth_callback "https://github.com/nox-mob/openapphub/blob/main/src/routes/auth.callback.tsx"
click node_supabase_auth "https://github.com/nox-mob/openapphub/blob/main/shared/supabase/client.ts"
click node_hub_shell "https://github.com/nox-mob/openapphub/blob/main/src/components/hub/HubShell.tsx"
click node_app_shell "https://github.com/nox-mob/openapphub/blob/main/shared/ui/AppShell.tsx"
click node_dashboard "https://github.com/nox-mob/openapphub/blob/main/src/screens/dashboard.tsx"
click node_welcome "https://github.com/nox-mob/openapphub/blob/main/src/screens/welcome.tsx"
click node_orgs "https://github.com/nox-mob/openapphub/blob/main/src/lib/orgs.ts"
click node_members "https://github.com/nox-mob/openapphub/blob/main/src/lib/members.ts"
click node_member_screen "https://github.com/nox-mob/openapphub/blob/main/src/screens/members.tsx"
click node_settings_screen "https://github.com/nox-mob/openapphub/blob/main/src/screens/settings.tsx"
click node_settings_service "https://github.com/nox-mob/openapphub/blob/main/src/lib/org-settings.ts"
click node_audit "https://github.com/nox-mob/openapphub/blob/main/src/screens/audit.tsx"
click node_billing_screen "https://github.com/nox-mob/openapphub/blob/main/src/screens/billing.tsx"
click node_billing_core "https://github.com/nox-mob/openapphub/blob/main/src/lib/billing-core.ts"
click node_stripe_webhook "https://github.com/nox-mob/openapphub/blob/main/src/routes/api.stripe.webhook.ts"
click node_shared_invitation "https://github.com/nox-mob/openapphub/blob/main/shared/ui/InvitationPage.tsx"
click node_suite_apps "https://github.com/nox-mob/openapphub/blob/main/shared/apps.ts"
click node_hosted_config "https://github.com/nox-mob/openapphub/blob/main/shared/supabase/hosted.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_auth_routes,node_auth_actions,node_auth_callback toneBlue
class node_hub_shell,node_dashboard,node_welcome,node_member_screen,node_settings_screen,node_audit,node_billing_screen toneAmber
class node_orgs,node_members,node_settings_service,node_billing_core toneMint
class node_app_shell,node_shared_invitation,node_suite_apps,node_hosted_config toneRose
class node_supabase_auth,node_stripe_webhook,node_stripe,node_visitor toneIndigo
```

## Components

### Entry and identity

- [Auth routes](https://github.com/nox-mob/openapphub/blob/main/src/routes/login.tsx): `src/routes/login.tsx`
- [Auth actions](https://github.com/nox-mob/openapphub/blob/main/src/lib/auth-client.ts): `src/lib/auth-client.ts`
- [Auth callback](https://github.com/nox-mob/openapphub/blob/main/src/routes/auth.callback.tsx): `src/routes/auth.callback.tsx`

### Hub experience

- [Signed-in shell](https://github.com/nox-mob/openapphub/blob/main/src/components/hub/HubShell.tsx): `src/components/hub/HubShell.tsx`
- [Dashboard](https://github.com/nox-mob/openapphub/blob/main/src/screens/dashboard.tsx): `src/screens/dashboard.tsx`
- [Organization setup](https://github.com/nox-mob/openapphub/blob/main/src/screens/welcome.tsx): `src/screens/welcome.tsx`
- [Member management](https://github.com/nox-mob/openapphub/blob/main/src/screens/members.tsx): `src/screens/members.tsx`
- [Organization settings](https://github.com/nox-mob/openapphub/blob/main/src/screens/settings.tsx): `src/screens/settings.tsx`
- [Audit history](https://github.com/nox-mob/openapphub/blob/main/src/screens/audit.tsx): `src/screens/audit.tsx`
- [Billing](https://github.com/nox-mob/openapphub/blob/main/src/screens/billing.tsx): `src/screens/billing.tsx`

### Organization operations

- [Organizations](https://github.com/nox-mob/openapphub/blob/main/src/lib/orgs.ts): `src/lib/orgs.ts`
- [Members and invites](https://github.com/nox-mob/openapphub/blob/main/src/lib/members.ts): `src/lib/members.ts`
- [Settings services](https://github.com/nox-mob/openapphub/blob/main/src/lib/org-settings.ts): `src/lib/org-settings.ts`
- [Billing core](https://github.com/nox-mob/openapphub/blob/main/src/lib/billing-core.ts): `src/lib/billing-core.ts`

### Shared suite layer

- [Shared app shell](https://github.com/nox-mob/openapphub/blob/main/shared/ui/AppShell.tsx): `shared/ui/AppShell.tsx`
- [Invitation page](https://github.com/nox-mob/openapphub/blob/main/shared/ui/InvitationPage.tsx): `shared/ui/InvitationPage.tsx`
- [Suite app identity](https://github.com/nox-mob/openapphub/blob/main/shared/apps.ts): `shared/apps.ts`
- [Hosted routing](https://github.com/nox-mob/openapphub/blob/main/shared/supabase/hosted.ts): `shared/supabase/hosted.ts`

### External services

- [Supabase Auth](https://github.com/nox-mob/openapphub/blob/main/shared/supabase/client.ts): `shared/supabase/client.ts`
- [Stripe webhook](https://github.com/nox-mob/openapphub/blob/main/src/routes/api.stripe.webhook.ts): `src/routes/api.stripe.webhook.ts`
- **Stripe**

### Other components

- **Visitor**

## Connections

- Visitor → Auth routes: starts sign-in (evidence: `README.md`)
- Auth routes → Auth actions: uses auth actions
- Auth actions → Supabase Auth: gets browser client (evidence: `src/lib/auth-client.ts`)
- Auth callback → Supabase Auth: checks session (evidence: `src/routes/auth.callback.tsx`)
- Auth callback → Visitor: continues navigation (evidence: `src/routes/auth.callback.tsx`)
- Signed-in shell → Shared app shell: renders shell (evidence: `src/components/hub/HubShell.tsx`)
- Signed-in shell → Auth actions: signs out through (evidence: `src/components/hub/HubShell.tsx`)
- Signed-in shell → Organizations: reads hub context (evidence: `src/components/hub/HubShell.tsx`)
- Signed-in shell → Dashboard: frames hub pages
- Organization setup → Organizations: sets up organization
- Member management → Members and invites: manages membership
- Invitation page → Organizations: loads invitation context (evidence: `shared/ui/InvitationPage.tsx`)
- Organization settings → Settings services: formats settings (evidence: `src/screens/settings.tsx`)
- Organization settings → Organizations: uses organization context (evidence: `src/screens/settings.tsx`)
- Organization settings → Members and invites: uses account operations (evidence: `src/screens/settings.tsx`)
- Billing → Billing core: manages billing
- Stripe webhook → Billing core: handles webhook (evidence: `src/routes/api.stripe.webhook.ts`)
- Stripe webhook → Stripe: receives events from (evidence: `src/routes/api.stripe.webhook.ts`)
- Shared app shell → Suite app identity: uses app identity (evidence: `shared/ui/AppShell.tsx`)
- Shared app shell → Hosted routing: uses hosted billing config (evidence: `shared/ui/AppShell.tsx`)