# andreicrp/viotrack-react architecture

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

- Interactive diagram: https://gitdiagram.com/andreicrp/viotrack-react
- Repository: https://github.com/andreicrp/viotrack-react

## Overview

VioTrack is a student-conduct management application for administrators and teachers/advisers. Users sign in, manage student and faculty rosters, record and resolve incidents, and review class-level or system-wide conduct information. The principal incident workflow selects a student and violation, records the report through the data service, and supports later resolution and audit review. The README also documents QR lookup, imports, analytics, exports, and parent SMS alerts. Some page and service implementations were not sampled, so links for those documented capabilities are intentionally limited.

Main entry points: [`src/App.jsx`](https://github.com/andreicrp/viotrack-react/blob/main/src/App.jsx) (App and routes), [`src/services/dataService.js`](https://github.com/andreicrp/viotrack-react/blob/main/src/services/dataService.js) (Data service), [`src/components/violations/AddViolationModal.jsx`](https://github.com/andreicrp/viotrack-react/blob/main/src/components/violations/AddViolationModal.jsx) (Record incident), [`src/pages/DashboardPage.jsx`](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/DashboardPage.jsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and navigation"]
  node_app["App and routes<br/>[App.jsx]"]
  node_auth["Authentication state<br/>[AuthContext.jsx]"]
  node_login["Login page<br/>[LoginPage.jsx]"]
  node_admin_users["Admin users<br/>[AdminUsersPage.jsx]"]
  node_profile["Profile<br/>[ProfilePage.jsx]"]
end

subgraph group_conduct["Conduct management"]
  node_violations["Violation records<br/>[ViolationsPage.jsx]"]
  node_types["Violation types"]
  node_record_form["Record incident"]
  node_resolution["Resolve incident"]
  node_student_select["Student selector"]
  node_violation_select["Violation selector"]
  node_scan["QR lookup<br/>[ScanQRPage.jsx]"]
  node_student_detail["Student conduct detail"]
  node_sms["Parent SMS service"]
end

subgraph group_people["People and classes"]
  node_students["Student directory<br/>[StudentsPage.jsx]"]
  node_student_form["Student registration"]
  node_student_import["Student bulk import"]
  node_teachers["Faculty management<br/>[TeachersPage.jsx]"]
  node_advisers["Adviser assignments<br/>[AdvisersPage.jsx]"]
  node_class["Adviser class portal<br/>[MyClassPage.jsx]"]
end

subgraph group_records["Data and reporting"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_activity["Activity audit"]
  node_data["Data service<br/>[dataService.js]"]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
  node_supabase[("Supabase")]
  node_browser_storage[("Browser local storage")]
  node_csv["CSV helper<br/>[csvHelper.js]"]
end

node_user(("School staff"))

node_user -->|"opens"| node_app
node_app -->|"provides"| node_auth
node_app -->|"routes"| node_login
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_violations
node_app -->|"routes"| node_types
node_app -->|"routes"| node_students
node_app -->|"routes"| node_scan
node_app -->|"routes"| node_student_detail
node_app -->|"routes"| node_teachers
node_app -->|"routes"| node_advisers
node_app -->|"routes"| node_class
node_app -->|"routes"| node_admin_users
node_app -->|"routes"| node_activity
node_app -->|"routes"| node_profile
node_login -->|"signs in"| node_auth
node_record_form -->|"selects student"| node_student_select
node_record_form -->|"selects offense"| node_violation_select
node_record_form -->|"loads and records"| node_data
node_resolution -->|"updates case"| node_data
node_student_form -->|"saves student"| node_data
node_students -->|"opens form"| node_student_form
node_student_import -->|"parses import"| node_csv
node_student_import -->|"imports roster"| node_data
node_data -->|"uses"| node_supabase_client
node_supabase_client -->|"connects"| node_supabase
node_data -->|"reads and writes fallback"| node_browser_storage
node_dashboard -->|"loads metrics"| node_data
node_dashboard -->|"exports CSV"| node_csv
node_violations -->|"loads records"| node_data
node_scan -->|"opens lookup"| node_student_detail
node_activity -->|"loads audit log"| node_data
node_record_form -.->|"alerts parent"| node_sms

click node_app "https://github.com/andreicrp/viotrack-react/blob/main/src/App.jsx"
click node_auth "https://github.com/andreicrp/viotrack-react/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/LoginPage.jsx"
click node_dashboard "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/DashboardPage.jsx"
click node_violations "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ViolationsPage.jsx"
click node_types "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ViolationTypesPage.jsx"
click node_record_form "https://github.com/andreicrp/viotrack-react/blob/main/src/components/violations/AddViolationModal.jsx"
click node_resolution "https://github.com/andreicrp/viotrack-react/blob/main/src/components/violations/ResolutionModal.jsx"
click node_student_select "https://github.com/andreicrp/viotrack-react/blob/main/src/components/common/SearchableStudentSelect.jsx"
click node_violation_select "https://github.com/andreicrp/viotrack-react/blob/main/src/components/common/SearchableViolationSelect.jsx"
click node_scan "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ScanQRPage.jsx"
click node_student_detail "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/StudentViolationDetailPage.jsx"
click node_students "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/StudentsPage.jsx"
click node_student_form "https://github.com/andreicrp/viotrack-react/blob/main/src/components/students/AddStudentModal.jsx"
click node_student_import "https://github.com/andreicrp/viotrack-react/blob/main/src/components/students/BulkImportModal.jsx"
click node_teachers "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/TeachersPage.jsx"
click node_advisers "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/AdvisersPage.jsx"
click node_class "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/MyClassPage.jsx"
click node_admin_users "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/AdminUsersPage.jsx"
click node_activity "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ActivityLogsPage.jsx"
click node_profile "https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ProfilePage.jsx"
click node_data "https://github.com/andreicrp/viotrack-react/blob/main/src/services/dataService.js"
click node_supabase_client "https://github.com/andreicrp/viotrack-react/blob/main/src/lib/supabase.js"
click node_csv "https://github.com/andreicrp/viotrack-react/blob/main/src/utils/csvHelper.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_auth,node_login,node_admin_users,node_profile toneBlue
class node_violations,node_types,node_record_form,node_resolution,node_student_select,node_violation_select,node_scan,node_student_detail,node_sms toneAmber
class node_students,node_student_form,node_student_import,node_teachers,node_advisers,node_class toneMint
class node_dashboard,node_activity,node_data,node_supabase_client,node_supabase,node_browser_storage,node_csv toneRose
class node_user toneIndigo
```

## Components

### Access and navigation

- [App and routes](https://github.com/andreicrp/viotrack-react/blob/main/src/App.jsx): `src/App.jsx`
- [Authentication state](https://github.com/andreicrp/viotrack-react/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Login page](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`
- [Admin users](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/AdminUsersPage.jsx): `src/pages/AdminUsersPage.jsx`
- [Profile](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ProfilePage.jsx): `src/pages/ProfilePage.jsx`

### Conduct management

- [Violation records](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ViolationsPage.jsx): `src/pages/ViolationsPage.jsx`
- [Violation types](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ViolationTypesPage.jsx): `src/pages/ViolationTypesPage.jsx`
- [Record incident](https://github.com/andreicrp/viotrack-react/blob/main/src/components/violations/AddViolationModal.jsx): `src/components/violations/AddViolationModal.jsx`
- [Resolve incident](https://github.com/andreicrp/viotrack-react/blob/main/src/components/violations/ResolutionModal.jsx): `src/components/violations/ResolutionModal.jsx`
- [Student selector](https://github.com/andreicrp/viotrack-react/blob/main/src/components/common/SearchableStudentSelect.jsx): `src/components/common/SearchableStudentSelect.jsx`
- [Violation selector](https://github.com/andreicrp/viotrack-react/blob/main/src/components/common/SearchableViolationSelect.jsx): `src/components/common/SearchableViolationSelect.jsx`
- [QR lookup](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ScanQRPage.jsx): `src/pages/ScanQRPage.jsx`
- [Student conduct detail](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/StudentViolationDetailPage.jsx): `src/pages/StudentViolationDetailPage.jsx`
- **Parent SMS service**

### People and classes

- [Student directory](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/StudentsPage.jsx): `src/pages/StudentsPage.jsx`
- [Student registration](https://github.com/andreicrp/viotrack-react/blob/main/src/components/students/AddStudentModal.jsx): `src/components/students/AddStudentModal.jsx`
- [Student bulk import](https://github.com/andreicrp/viotrack-react/blob/main/src/components/students/BulkImportModal.jsx): `src/components/students/BulkImportModal.jsx`
- [Faculty management](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/TeachersPage.jsx): `src/pages/TeachersPage.jsx`
- [Adviser assignments](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/AdvisersPage.jsx): `src/pages/AdvisersPage.jsx`
- [Adviser class portal](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/MyClassPage.jsx): `src/pages/MyClassPage.jsx`

### Data and reporting

- [Dashboard](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/DashboardPage.jsx): `src/pages/DashboardPage.jsx`
- [Activity audit](https://github.com/andreicrp/viotrack-react/blob/main/src/pages/ActivityLogsPage.jsx): `src/pages/ActivityLogsPage.jsx`
- [Data service](https://github.com/andreicrp/viotrack-react/blob/main/src/services/dataService.js): `src/services/dataService.js`
- [Supabase client](https://github.com/andreicrp/viotrack-react/blob/main/src/lib/supabase.js): `src/lib/supabase.js`
- **Supabase**
- **Browser local storage**
- [CSV helper](https://github.com/andreicrp/viotrack-react/blob/main/src/utils/csvHelper.js): `src/utils/csvHelper.js`

### Other components

- **School staff**

## Connections

- School staff → App and routes: opens
- App and routes → Authentication state: provides
- App and routes → Login page: routes
- App and routes → Dashboard: routes
- App and routes → Violation records: routes
- App and routes → Violation types: routes
- App and routes → Student directory: routes
- App and routes → QR lookup: routes
- App and routes → Student conduct detail: routes
- App and routes → Faculty management: routes
- App and routes → Adviser assignments: routes
- App and routes → Adviser class portal: routes
- App and routes → Admin users: routes
- App and routes → Activity audit: routes
- App and routes → Profile: routes
- Login page → Authentication state: signs in
- Record incident → Student selector: selects student
- Record incident → Violation selector: selects offense
- Record incident → Data service: loads and records
- Resolve incident → Data service: updates case
- Student registration → Data service: saves student
- Student directory → Student registration: opens form
- Student bulk import → CSV helper: parses import
- Student bulk import → Data service: imports roster
- Data service → Supabase client: uses
- Supabase client → Supabase: connects
- Data service → Browser local storage: reads and writes fallback
- Dashboard → Data service: loads metrics
- Dashboard → CSV helper: exports CSV
- Violation records → Data service: loads records
- QR lookup → Student conduct detail: opens lookup
- Activity audit → Data service: loads audit log
- Record incident → Parent SMS service: alerts parent