# sallahboussettah/sb-framework architecture

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

- Interactive diagram: https://gitdiagram.com/sallahboussettah/sb-framework
- Repository: https://github.com/sallahboussettah/sb-framework

## Overview

SB Framework is a custom FiveM roleplay server composed of independent gameplay and service scripts. Players interact with character setup and shared in-game systems, while specialized scripts support economy, jobs, vehicles, and roleplay services. The sampled phone and police interfaces show NUI message handling, state stores, and rendered views; the prison interface shows a staged booking workflow. Most Lua/server implementations were not provided, so unsampled capabilities are represented at their documented script paths, without inferred runtime connections.

Main entry points: [`resources/[custom]/sb_police/html/script.js`](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/html/script.js) (Police Systems), [`resources/[custom]/sb_phone/ui/src/App.tsx`](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/App.tsx) (Phone UI), [`resources/[custom]/sb_police/ui/src/App.tsx`](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/App.tsx) (Police UI), [`resources/[custom]/sb_prison/html/script.js`](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/html/script.js) (Prison Booking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_player["Player Experience"]
  node_character["Character Setup<br/>[script.js]"]
  node_phone["Smartphone<br/>[script.js]"]
  node_apartments["Apartments<br/>[app.js]"]
end

subgraph group_economy["Economy And Work"]
  node_banking["Banking<br/>[script.js]"]
  node_companies["Company Supply Chain<br/>[storage.js]"]
  node_jobs["Job Center<br/>[script.js]"]
  node_drugs["Drug Economy<br/>[script.js]"]
end

subgraph group_vehicles["Vehicles And World"]
  node_garage["Vehicle Storage<br/>[script.js]"]
  node_mechanic["Vehicle Condition<br/>[crafting.js]"]
end

subgraph group_services["Public Services"]
  node_police["Police Systems<br/>[script.js]"]
  node_prison["Prison Booking<br/>[script.js]"]
  node_dispatch["Job Dispatch<br/>[script.js]"]
end

subgraph group_interfaces["Service Interfaces"]
  node_phoneui["Phone UI<br/>[App.tsx]"]
  node_phoneevents["Phone NUI Events<br/>[App.tsx]"]
  node_phoneframe["Phone Views<br/>[PhoneFrame.tsx]"]
  node_phonestate["Phone State<br/>[phoneStore.ts]"]
  node_policeui["Police UI<br/>[App.tsx]"]
  node_mdt["Police MDT<br/>[MDTWindow.tsx]"]
  node_policestore["Police State<br/>[mdtStore.ts]"]
  node_bookingui["Booking Workflow<br/>[BookingWindow.tsx]"]
  node_bookingstate["Booking State<br/>[bookingStore.ts]"]
end

node_player(("FiveM Player"))

node_phoneui -->|"registers events"| node_phoneevents
node_phoneui -->|"updates state"| node_phonestate
node_phoneui -->|"renders"| node_phoneframe
node_policeui -->|"handles messages"| node_policestore
node_policeui -->|"renders"| node_mdt
node_mdt -->|"reads page state"| node_policestore
node_bookingui -->|"reads workflow state"| node_bookingstate
node_player -->|"creates character"| node_character
node_player -->|"uses"| node_phone
node_player -->|"rents housing"| node_apartments
node_police -->|"provides MDT interface"| node_policeui
node_police -.->|"supports booking"| node_prison
node_prison -->|"provides booking interface"| node_bookingui
node_police -->|"receives job alerts"| node_dispatch

click node_character "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_multicharacter/html/script.js"
click node_phone "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/html/script.js"
click node_phoneui "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/App.tsx"
click node_phoneevents "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/App.tsx"
click node_phoneframe "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/components/PhoneFrame.tsx"
click node_phonestate "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/store/phoneStore.ts"
click node_banking "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_banking/html/script.js"
click node_companies "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_companies/html/storage.js"
click node_jobs "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_jobs/html/script.js"
click node_drugs "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_drugs/html/script.js"
click node_garage "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_garage/html/script.js"
click node_mechanic "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_mechanic_v2/html/crafting.js"
click node_apartments "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_apartments/html/js/app.js"
click node_police "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/html/script.js"
click node_policeui "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/App.tsx"
click node_mdt "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/components/MDTWindow.tsx"
click node_policestore "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/store/mdtStore.ts"
click node_prison "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/html/script.js"
click node_bookingui "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/ui/src/components/BookingWindow.tsx"
click node_bookingstate "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/ui/src/store/bookingStore.ts"
click node_dispatch "https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_alerts/html/script.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_character,node_phone,node_apartments toneBlue
class node_banking,node_companies,node_jobs,node_drugs toneAmber
class node_garage,node_mechanic toneMint
class node_police,node_prison,node_dispatch toneRose
class node_phoneui,node_phoneevents,node_phoneframe,node_phonestate,node_policeui,node_mdt,node_policestore,node_bookingui,node_bookingstate,node_player toneIndigo
```

## Components

### Player Experience

- [Character Setup](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_multicharacter/html/script.js): `resources/[custom]/sb_multicharacter/html/script.js`
- [Smartphone](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/html/script.js): `resources/[custom]/sb_phone/html/script.js`
- [Apartments](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_apartments/html/js/app.js): `resources/[custom]/sb_apartments/html/js/app.js`

### Economy And Work

- [Banking](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_banking/html/script.js): `resources/[custom]/sb_banking/html/script.js`
- [Company Supply Chain](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_companies/html/storage.js): `resources/[custom]/sb_companies/html/storage.js`
- [Job Center](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_jobs/html/script.js): `resources/[custom]/sb_jobs/html/script.js`
- [Drug Economy](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_drugs/html/script.js): `resources/[custom]/sb_drugs/html/script.js`

### Vehicles And World

- [Vehicle Storage](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_garage/html/script.js): `resources/[custom]/sb_garage/html/script.js`
- [Vehicle Condition](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_mechanic_v2/html/crafting.js): `resources/[custom]/sb_mechanic_v2/html/crafting.js`

### Public Services

- [Police Systems](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/html/script.js): `resources/[custom]/sb_police/html/script.js`
- [Prison Booking](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/html/script.js): `resources/[custom]/sb_prison/html/script.js`
- [Job Dispatch](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_alerts/html/script.js): `resources/[custom]/sb_alerts/html/script.js`

### Service Interfaces

- [Phone UI](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/App.tsx): `resources/[custom]/sb_phone/ui/src/App.tsx`
- [Phone NUI Events](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/App.tsx): `resources/[custom]/sb_phone/ui/src/App.tsx`
- [Phone Views](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/components/PhoneFrame.tsx): `resources/[custom]/sb_phone/ui/src/components/PhoneFrame.tsx`
- [Phone State](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_phone/ui/src/store/phoneStore.ts): `resources/[custom]/sb_phone/ui/src/store/phoneStore.ts`
- [Police UI](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/App.tsx): `resources/[custom]/sb_police/ui/src/App.tsx`
- [Police MDT](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/components/MDTWindow.tsx): `resources/[custom]/sb_police/ui/src/components/MDTWindow.tsx`
- [Police State](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_police/ui/src/store/mdtStore.ts): `resources/[custom]/sb_police/ui/src/store/mdtStore.ts`
- [Booking Workflow](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/ui/src/components/BookingWindow.tsx): `resources/[custom]/sb_prison/ui/src/components/BookingWindow.tsx`
- [Booking State](https://github.com/sallahboussettah/sb-framework/blob/master/resources/%5Bcustom%5D/sb_prison/ui/src/store/bookingStore.ts): `resources/[custom]/sb_prison/ui/src/store/bookingStore.ts`

### Other components

- **FiveM Player**

## Connections

- Phone UI → Phone NUI Events: registers events (evidence: `resources/[custom]/sb_phone/ui/src/App.tsx`)
- Phone UI → Phone State: updates state (evidence: `resources/[custom]/sb_phone/ui/src/App.tsx`)
- Phone UI → Phone Views: renders (evidence: `resources/[custom]/sb_phone/ui/src/App.tsx`)
- Police UI → Police State: handles messages (evidence: `resources/[custom]/sb_police/ui/src/App.tsx`)
- Police UI → Police MDT: renders (evidence: `resources/[custom]/sb_police/ui/src/App.tsx`)
- Police MDT → Police State: reads page state (evidence: `resources/[custom]/sb_police/ui/src/components/MDTWindow.tsx`)
- Booking Workflow → Booking State: reads workflow state (evidence: `resources/[custom]/sb_prison/ui/src/components/BookingWindow.tsx`)
- FiveM Player → Character Setup: creates character
- FiveM Player → Smartphone: uses
- FiveM Player → Apartments: rents housing
- Police Systems → Police UI: provides MDT interface
- Police Systems → Prison Booking: supports booking
- Prison Booking → Booking Workflow: provides booking interface
- Police Systems → Job Dispatch: receives job alerts