# course5-intelligence-limited/sonicvue-raipid-prototype-ui architecture

> Architecture diagram of the GitHub repository course5-intelligence-limited/sonicvue-raipid-prototype-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui
- Repository: https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui

## Overview

SonicVUE is a call-audio upload and customer-service analytics frontend: users sign in, upload audio, then inspect dashboard metrics, call-level tables, and transcripts. The app also exposes a chatbot route, but its behavior is not shown in the sampled source. Authentication and upload state persist in browser local storage; the Express simulation provides sample-data dashboard, table, and transcript endpoints. UploadPage calls an upload endpoint that the simulation excerpt does not implement. Wiring for unsampled pages is limited to the routes documented in App.tsx.

Main entry points: [`src/components/Layout.tsx`](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/components/Layout.tsx) (Authenticated layout), [`src/App.tsx`](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/App.tsx) (React app and routes), [`src/pages/UploadPage.tsx`](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/UploadPage.tsx) (Audio upload), [`src/context/AuthContext.tsx`](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/context/AuthContext.tsx) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["React app and routes<br/>[App.tsx]"]
  node_layout["Authenticated layout<br/>[Layout.tsx]"]
  node_chatbot["Chatbot page<br/>[ChatbotPage.tsx]"]
end

subgraph group_access["Access and navigation"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
  node_login["Login page<br/>[LoginPage.tsx]"]
  node_navigation["Sidebar navigation<br/>[Sidebar.tsx]"]
end

subgraph group_audio["Audio and transcripts"]
  node_upload["Audio upload<br/>[UploadPage.tsx]"]
  node_filestate["Upload and transcript state<br/>[FileContext.tsx]"]
end

subgraph group_analytics["Call analytics"]
  node_dashboard["Analytics dashboard<br/>[TryDashboard.tsx]"]
  node_table["Call table and transcripts<br/>[TableView.tsx]"]
  node_simulation["Express sample API"]
  node_sampledata[("Sample call records")]
end

node_user(("User"))
node_browserstore[("Browser local storage")]
node_service{{"HTTP API"}}

node_user -->|"uses"| node_app
node_app -->|"provides auth"| node_auth
node_app -->|"routes unauthenticated"| node_login
node_app -->|"wraps protected routes"| node_layout
node_layout -->|"renders"| node_navigation
node_layout -->|"routes to"| node_upload
node_layout -->|"routes to"| node_dashboard
node_layout -->|"routes to"| node_table
node_layout -->|"routes to"| node_chatbot
node_upload -->|"reads and updates"| node_filestate
node_auth -->|"reads and writes"| node_browserstore
node_filestate -->|"reads and writes"| node_browserstore
node_upload -->|"posts audio"| node_service
node_dashboard -->|"requests metrics and rows"| node_service
node_table -->|"requests metrics, rows, transcripts"| node_service
node_service -.->|"serves sample endpoints"| node_simulation
node_simulation -->|"filters and aggregates"| node_sampledata

click node_app "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/App.tsx"
click node_layout "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/components/Layout.tsx"
click node_auth "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/context/AuthContext.tsx"
click node_login "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/LoginPage.tsx"
click node_navigation "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/components/Sidebar.tsx"
click node_upload "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/UploadPage.tsx"
click node_filestate "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/context/FileContext.tsx"
click node_dashboard "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/TryDashboard.tsx"
click node_table "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/TableView.tsx"
click node_chatbot "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/ChatbotPage.tsx"
click node_simulation "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/backend-silumation.js"
click node_sampledata "https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/backend-silumation.js"

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_app,node_layout,node_chatbot,node_user toneBlue
class node_auth,node_login,node_navigation,node_browserstore toneAmber
class node_upload,node_filestate,node_service toneMint
class node_dashboard,node_table,node_simulation,node_sampledata toneRose
```

## Components

### Application shell

- [React app and routes](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/App.tsx): `src/App.tsx`
- [Authenticated layout](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/components/Layout.tsx): `src/components/Layout.tsx`
- [Chatbot page](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/ChatbotPage.tsx): `src/pages/ChatbotPage.tsx`

### Access and navigation

- [Authentication state](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Login page](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/LoginPage.tsx): `src/pages/LoginPage.tsx`
- [Sidebar navigation](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/components/Sidebar.tsx): `src/components/Sidebar.tsx`

### Audio and transcripts

- [Audio upload](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/UploadPage.tsx): `src/pages/UploadPage.tsx`
- [Upload and transcript state](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/context/FileContext.tsx): `src/context/FileContext.tsx`

### Call analytics

- [Analytics dashboard](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/TryDashboard.tsx): `src/pages/TryDashboard.tsx`
- [Call table and transcripts](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/pages/TableView.tsx): `src/pages/TableView.tsx`
- [Express sample API](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/backend-silumation.js): `src/backend-silumation.js`
- [Sample call records](https://github.com/course5-intelligence-limited/sonicvue-raipid-prototype-ui/blob/main/src/backend-silumation.js): `src/backend-silumation.js`

### Other components

- **User**
- **Browser local storage**
- **HTTP API**

## Connections

- User → React app and routes: uses
- React app and routes → Authentication state: provides auth
- React app and routes → Login page: routes unauthenticated
- React app and routes → Authenticated layout: wraps protected routes
- Authenticated layout → Sidebar navigation: renders
- Authenticated layout → Audio upload: routes to
- Authenticated layout → Analytics dashboard: routes to
- Authenticated layout → Call table and transcripts: routes to
- Authenticated layout → Chatbot page: routes to
- Audio upload → Upload and transcript state: reads and updates
- Authentication state → Browser local storage: reads and writes
- Upload and transcript state → Browser local storage: reads and writes
- Audio upload → HTTP API: posts audio
- Analytics dashboard → HTTP API: requests metrics and rows
- Call table and transcripts → HTTP API: requests metrics, rows, transcripts
- HTTP API → Express sample API: serves sample endpoints
- Express sample API → Sample call records: filters and aggregates