# jewelhuq/kyc-kyb architecture

> Architecture diagram of the GitHub repository jewelhuq/kyc-kyb, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jewelhuq/kyc-kyb
- Repository: https://github.com/jewelhuq/kyc-kyb

## Overview

Ballerine’s sampled product surface comprises an operator case-management dashboard and an embeddable KYC/KYB flow SDK. Operators review user cases and make decisions; end users enter a configured flow, move through verification screens, and provide identity information and documents. Configuration, routing, UI packs, and event handling support the SDK experience. The README also describes vendor orchestration and a no-code rule engine as in-progress capabilities, but this tree provides no implementation to map. Some page and service internals were not sampled, so uncertain links are omitted.

Main entry points: [`apps/backoffice/src/App.tsx`](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/App.tsx) (Dashboard app), [`sdks/web-sdk/src/App.svelte`](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/App.svelte) (Flow application), [`sdks/web-sdk/src/Routes.svelte`](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/Routes.svelte) (Flow routing), [`sdks/web-sdk/src/lib/utils/configuration-manager.ts`](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/utils/configuration-manager.ts) (Config manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backoffice["Case management"]
  node_backoffice_app["Dashboard app<br/>[App.tsx]"]
  node_user_cases["User cases<br/>[list.tsx]"]
  node_case_details["Case review<br/>[SubjectContent.tsx]"]
  node_image_review["Document viewer<br/>[ImageViewer.tsx]"]
  node_access_control["Access control<br/>[access-control.ts]"]
end

subgraph group_sdk_runtime["SDK runtime"]
  node_sdk_entry["SDK entry<br/>[main.ts]"]
  node_sdk_app["Flow application<br/>[App.svelte]"]
end

subgraph group_sdk_flow["Verification flow"]
  node_flow_routes["Flow routing<br/>[Routes.svelte]"]
  node_flow_screens["Verification screens"]
end

subgraph group_sdk_foundation["SDK configuration and UI"]
  node_app_state["App state<br/>[stores.ts]"]
  node_flow_events["Flow events"]
  node_config_manager["Config manager"]
  node_config_store["Configuration store<br/>[store.ts]"]
  node_ui_packs["UI packs"]
  node_http_service["HTTP service"]
end

subgraph group_mock_api["Mock user API"]
  node_mock_handlers["User handlers<br/>[users.handler.ts]"]
  node_mock_data["Sample user data<br/>[users.data.ts]"]
end

node_operator(("Case operator"))
node_rest_api["REST API"]
node_sdk_user(("End user"))

node_operator -->|"reviews cases"| node_backoffice_app
node_backoffice_app -->|"routes users"| node_user_cases
node_backoffice_app -->|"checks permissions"| node_access_control
node_backoffice_app -->|"configures REST"| node_rest_api
node_user_cases -.->|"opens review"| node_case_details
node_case_details -.->|"uses viewer"| node_image_review
node_sdk_user -->|"starts verification"| node_sdk_entry
node_sdk_entry -->|"updates configuration"| node_config_manager
node_sdk_entry -->|"mounts application"| node_sdk_app
node_sdk_app -->|"renders routes"| node_flow_routes
node_sdk_app -->|"reads configuration"| node_config_store
node_sdk_app -->|"reads theme"| node_ui_packs
node_flow_routes -->|"renders selected screen"| node_flow_screens
node_flow_routes -->|"reads route state"| node_app_state
node_flow_routes -->|"emits navigation event"| node_flow_events
node_config_manager -->|"updates store"| node_config_store
node_config_manager -->|"selects theme"| node_ui_packs
node_config_manager -.->|"loads remote config"| node_http_service
node_mock_handlers -->|"reads and updates"| node_mock_data

click node_backoffice_app "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/App.tsx"
click node_user_cases "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/pages/users/list.tsx"
click node_case_details "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/pages/users/components/SubjectContent.tsx"
click node_image_review "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/components/organisms/ImageViewer/ImageViewer.tsx"
click node_access_control "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/access-control.ts"
click node_sdk_entry "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/main.ts"
click node_sdk_app "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/App.svelte"
click node_flow_routes "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/Routes.svelte"
click node_flow_screens "https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/pages"
click node_app_state "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/contexts/app-state/stores.ts"
click node_flow_events "https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/services/flow-event-bus"
click node_config_manager "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/utils/configuration-manager.ts"
click node_config_store "https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/contexts/configuration/store.ts"
click node_ui_packs "https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/ui-packs"
click node_http_service "https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/services/http"
click node_mock_handlers "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/mock-service-worker/users/users.handler.ts"
click node_mock_data "https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/mock-service-worker/users/users.data.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_backoffice_app,node_user_cases,node_case_details,node_image_review,node_access_control,node_sdk_user toneBlue
class node_sdk_entry,node_sdk_app toneAmber
class node_flow_routes,node_flow_screens,node_rest_api toneMint
class node_app_state,node_flow_events,node_config_manager,node_config_store,node_ui_packs,node_http_service toneRose
class node_mock_handlers,node_mock_data,node_operator toneIndigo
```

## Components

### Case management

- [Dashboard app](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/App.tsx): `apps/backoffice/src/App.tsx`
- [User cases](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/pages/users/list.tsx): `apps/backoffice/src/pages/users/list.tsx`
- [Case review](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/pages/users/components/SubjectContent.tsx): `apps/backoffice/src/pages/users/components/SubjectContent.tsx`
- [Document viewer](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/components/organisms/ImageViewer/ImageViewer.tsx): `apps/backoffice/src/components/organisms/ImageViewer/ImageViewer.tsx`
- [Access control](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/access-control.ts): `apps/backoffice/src/access-control.ts`

### SDK runtime

- [SDK entry](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/main.ts): `sdks/web-sdk/src/main.ts`
- [Flow application](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/App.svelte): `sdks/web-sdk/src/App.svelte`

### Verification flow

- [Flow routing](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/Routes.svelte): `sdks/web-sdk/src/Routes.svelte`
- [Verification screens](https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/pages): `sdks/web-sdk/src/lib/pages`

### SDK configuration and UI

- [App state](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/contexts/app-state/stores.ts): `sdks/web-sdk/src/lib/contexts/app-state/stores.ts`
- [Flow events](https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/services/flow-event-bus): `sdks/web-sdk/src/lib/services/flow-event-bus`
- [Config manager](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/utils/configuration-manager.ts): `sdks/web-sdk/src/lib/utils/configuration-manager.ts`
- [Configuration store](https://github.com/jewelhuq/kyc-kyb/blob/main/sdks/web-sdk/src/lib/contexts/configuration/store.ts): `sdks/web-sdk/src/lib/contexts/configuration/store.ts`
- [UI packs](https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/ui-packs): `sdks/web-sdk/src/lib/ui-packs`
- [HTTP service](https://github.com/jewelhuq/kyc-kyb/tree/main/sdks/web-sdk/src/lib/services/http): `sdks/web-sdk/src/lib/services/http`

### Mock user API

- [User handlers](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/mock-service-worker/users/users.handler.ts): `apps/backoffice/src/mock-service-worker/users/users.handler.ts`
- [Sample user data](https://github.com/jewelhuq/kyc-kyb/blob/main/apps/backoffice/src/mock-service-worker/users/users.data.ts): `apps/backoffice/src/mock-service-worker/users/users.data.ts`

### Other components

- **Case operator**
- **REST API**
- **End user**

## Connections

- Case operator → Dashboard app: reviews cases
- Dashboard app → User cases: routes users (evidence: `apps/backoffice/src/App.tsx`)
- Dashboard app → Access control: checks permissions (evidence: `apps/backoffice/src/App.tsx`)
- Dashboard app → REST API: configures REST (evidence: `apps/backoffice/src/App.tsx`)
- User cases → Case review: opens review
- Case review → Document viewer: uses viewer
- End user → SDK entry: starts verification
- SDK entry → Config manager: updates configuration (evidence: `sdks/web-sdk/src/main.ts`)
- SDK entry → Flow application: mounts application (evidence: `sdks/web-sdk/src/main.ts`)
- Flow application → Flow routing: renders routes (evidence: `sdks/web-sdk/src/App.svelte`)
- Flow application → Configuration store: reads configuration (evidence: `sdks/web-sdk/src/App.svelte`)
- Flow application → UI packs: reads theme (evidence: `sdks/web-sdk/src/App.svelte`)
- Flow routing → Verification screens: renders selected screen (evidence: `sdks/web-sdk/src/Routes.svelte`)
- Flow routing → App state: reads route state (evidence: `sdks/web-sdk/src/Routes.svelte`)
- Flow routing → Flow events: emits navigation event (evidence: `sdks/web-sdk/src/Routes.svelte`)
- Config manager → Configuration store: updates store (evidence: `sdks/web-sdk/src/lib/utils/configuration-manager.ts`)
- Config manager → UI packs: selects theme (evidence: `sdks/web-sdk/src/lib/utils/configuration-manager.ts`)
- Config manager → HTTP service: loads remote config
- User handlers → Sample user data: reads and updates (evidence: `apps/backoffice/src/mock-service-worker/users/users.handler.ts`)