wtf_group Documentation

Complete documentation for the wtf_group resource — a FiveM group/crew management system with a full desktop-style tablet UI.

Documentation Structure

Tablet System

• Tablet Overview — Architecture, features, how it works
• Tablet Architecture — Data flow, NUI bridge, context providers
• Tablet Shell — Desktop, Taskbar, StartMenu, Window Manager, System Tray
• App Development — How to create, register, and deploy tablet apps
• Settings System — Centralized settings, themes, color pickers, DB sync
• Database Sync — MySQL tables, data flow, localStorage fallback
• VPN Shield App — VPN proxy system, license keys, exports, admin commands
• Weather App — Live weather display, animated particles, Renewed-Weathersync integration, admin controls
• Auction System — Auction marketplace, bidding, wallet, black market
• Contracts App — Contract board, global locking, stock, queue, exports

Lua (Server & Client)

• Client Main — Client entry point, command registration, keybinds
• Client Tablet — Tablet open/close, NUI bridge, app messaging
• Client Sync — Real-time group state synchronization
• Client NUI — NUI callback handlers for group operations
• Client Blips — GPS blip system, vehicle detection, sprite mapping
• Server Database — Schema, all DB functions, table relationships
• Server Group — Core group logic, create/disband/leave
• Server Tablet — Server-side tablet handlers, app registry, data API
• Server Sync — Server→client state broadcasting
• Server Tasks — Task creation, activation, completion, failure
• Server Reputation — XP, levels, perks, level-up logic
• Server Alliances — Alliance/war system, cross-group relations
• Server Turfs — Territory claiming, challenges, income
• Server Bounties — Bounty board, claiming, completion
• Server Mailbox — Internal mail system, read receipts
• Server Garage — Vehicle storage, spawning, persistence
• Server Dashboard — Dashboard data aggregation
• Server Cooldowns — Global and per-activity cooldowns
• Server Roles — Role assignment, permissions
• Server History — Activity log, stats
• Framework Bridge — Multi-framework abstraction layer
• Configuration — All config options reference

UI (React)

• UI Components — All 26+ UI components
• UI Context Providers — GroupContext, TabletContext, AppContext
• UI Libraries — Settings, icons, sounds, DB storage, app registry

API Reference

• Server Exports — All server-side exports with examples
• Client Exports — All client-side exports
• Events — Complete event list (server + client + NUI)
• NUI Messages — React ↔ Lua message protocol

Architecture at a Glance

┌─────────────────────────────────────────────────────┐
│                    FiveM Client                      │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
│  │  Bridge   │  │  Client   │  │  NUI (React UI)  │  │
│  │ (QBX/QB/ │  │  Lua      │  │  ┌────────────┐  │  │
│  │  ESX/     │◄─┤  tablet   │◄─┤  │ TabletShell│  │  │
│  │  Stand)   │  │  sync     │  │  │  Desktop    │  │  │
│  └──────────┘  │  nui      │  │  │  Taskbar    │  │  │
│                │  blips     │  │  │  Windows    │  │  │
│                └─────┬──────┘  │  │  Apps       │  │  │
│                      │         │  └────────────┘  │  │
│                      │         └──────────────────┘  │
├──────────────────────┼──────────────────────────────┤
│                 FiveM Server                         │
│  ┌──────────┐  ┌─────┴──────┐  ┌────────────────┐  │
│  │  Bridge   │  │  Server    │  │  MySQL (oxmysql)│  │
│  │  (QBX/QB/ │◄─┤  Lua       │◄─┤  20 tables     │  │
│  │  ESX/     │  │  database  │  │                │  │
│  │  Stand)   │  │  group     │  └────────────────┘  │
│  └──────────┘  │  tablet    │                       │
│                │  sync      │                       │
│                └────────────┘                       │
└─────────────────────────────────────────────────────┘

Data Flow Summary

1. Player types /tablet → Client tablet.lua opens NUI focus
2. React UI mounts → Loads settings from DB (async) with localStorage fallback
3. Player opens app → AppContext creates window, renders component
4. App saves data → dbStorage.js sends NUI callback → Client forwards to Server → MySQL
5. Server sends data → TriggerClientEvent → SendNUIMessage → React window.addEventListener('message')
6. Player closes tablet → NUI focus released, all windows preserved in memory