Skip to content

Nerow75/fivem-panel-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FiveM Panel

Panel d'administration pour serveur FiveM RP, deployable en une commande via Docker.

Construit avec Laravel 11, Inertia.js, React 18 et Tailwind CSS. Authentification Discord OAuth, support base de donnees ESX, theming entierement configurable via variables CSS.


Fonctionnalites

  • Authentification Discord — OAuth2, synchronisation des roles (Staff / WL / Non-WL)
  • Dashboard — statut serveur, joueurs connectes, lien de connexion FiveM
  • Tablette in-game — fiche joueur, vehicules, inventaire, banque, telephone, reseaux sociaux
  • Quiz whitelist — systeme de questions/reponses pour la prise en main du reglement
  • Evenements dynamiques — creation et gestion d'evenements via interface staff
  • Panel staff — gestion des joueurs, logs, administration
  • Wiki — pages de documentation personnalisables (Markdown)
  • Succes — systeme de badges in-game
  • Theming complet — couleurs configurables via 4 variables CSS

Prerequis

  • Docker >= 24 et Docker Compose plugin v2 (docker compose)
  • Serveur FiveM avec framework ESX (QBCore non supporte nativement)
  • Application Discord avec OAuth2 configure (developers.discord.com)
  • Acces au dump SQL de votre base de donnees FiveM

Installation rapide

git clone <votre-repo> fivem-panel
cd fivem-panel
bash setup.sh

Le script setup.sh :

  1. Verifie Docker et Docker Compose
  2. Cree .env depuis .env.example et demande de le configurer
  3. Demarre MySQL (panel + game) et Redis avec controle healthcheck
  4. Build le container PHP et installe les dependances Composer
  5. Genere la cle Laravel (APP_KEY)
  6. Execute les migrations de la base panel
  7. Build les assets frontend (npm)
  8. Demarre tous les services

Configuration

Fichier .env (racine)

Copier .env.example en .env et renseigner toutes les valeurs __REPLACE_ME__.

Serveur et reseau

Variable Description Exemple
HOST_IP IP du serveur ou NAS 192.168.1.100
USER_ID UID pour les permissions fichiers (id -u) 1000
GROUP_ID GID pour les permissions fichiers (id -g) 1000

Ports exposes (hote)

Variable Service Defaut
APP_PORT Application web (nginx) 8081
VITE_PORT Dev server Vite (HMR) 5173
DB_PANEL_PORT MySQL Panel 3306
DB_GAME_PORT MySQL Game 3307
REDIS_PORT Redis 6380
ADMINER_PORT Adminer (profil tools) 8084
MAILHOG_PORT MailHog (profil tools) 8025

Application Laravel

Variable Description
APP_NAME Nom affiche dans l'interface
APP_ENV local ou production
APP_KEY Cle de chiffrement — generee automatiquement par setup.sh
APP_DEBUG true en dev, false en prod
APP_URL URL complete de l'application (http://IP:PORT)
APP_TIMEZONE Fuseau horaire PHP (ex: Europe/Paris)

Base de donnees Panel

Variable Description
DB_PANEL_DATABASE Nom de la base panel
DB_PANEL_USERNAME Utilisateur MySQL panel
DB_PANEL_PASSWORD Mot de passe utilisateur panel
DB_PANEL_ROOT_PASSWORD Mot de passe root MySQL panel
DB_CONNECTION mysql
DB_HOST mysql-panel (nom du container)
DB_PORT 3306
DB_DATABASE Doit correspondre a DB_PANEL_DATABASE
DB_USERNAME Doit correspondre a DB_PANEL_USERNAME
DB_PASSWORD Doit correspondre a DB_PANEL_PASSWORD

Base de donnees Game (clone FiveM)

Variable Description
DB_GAME_DATABASE Nom de la base game
DB_GAME_USERNAME Utilisateur MySQL game
DB_GAME_PASSWORD Mot de passe utilisateur game
DB_GAME_ROOT_PASSWORD Mot de passe root MySQL game
GAMEDB_HOST mysql-game (nom du container)
GAMEDB_DATABASE Doit correspondre a DB_GAME_DATABASE
GAMEDB_USERNAME Doit correspondre a DB_GAME_USERNAME
GAMEDB_PASSWORD Doit correspondre a DB_GAME_PASSWORD

Redis

Variable Description
REDIS_PASSWORD Mot de passe Redis

Discord OAuth

Variable Description
DISCORD_CLIENT_ID ID de l'application Discord
DISCORD_CLIENT_SECRET Secret de l'application Discord
DISCORD_REDIRECT_URI URL de callback (http://IP:PORT/auth/discord/callback)
DISCORD_BOT_TOKEN Token du bot Discord (lecture des roles)
DISCORD_GUILD_ID ID de votre serveur Discord

Roles Discord

Variable Description
DISCORD_ROLE_STAFF_ID ID du role Staff (acces administration)
DISCORD_ROLE_WL_ID ID du role Whiteliste (acces complet)
DISCORD_ROLE_NONWL_ID ID du role Non-Whiteliste (quiz uniquement)
DISCORD_CHANGELOG_CHANNEL_ID ID du salon changelog (optionnel)

Serveur FiveM

Variable Description
FIVEM_HOST IP ou domaine du serveur FiveM
FIVEM_PORT Port FiveM (defaut 30120)
FIVEM_CFX_CODE Code court CFX (dqvl73 pour cfx.re/join/dqvl73) — prioritaire sur HOST:PORT

Personnalisation

Variable Description
SERVER_TAGLINE Sous-titre affiche dans l'interface
VITE_PRIMARY_COLOR Couleur principale en hex (ex: #29ABE2) — utilisee par NProgress

Fonctionnalites

Variable Defaut Description
FEATURE_TABLET true Interface tablette joueur
FEATURE_WIKI true Pages wiki
FEATURE_ACHIEVEMENTS true Systeme de succes
FEATURE_EVENTS true Evenements dynamiques

Logs externes (optionnel)

Variable Description
EXTERNAL_LOG_URL URL d'une API de logs externe (laisser vide pour desactiver)

Theming — Personnalisation des couleurs

Les couleurs sont definies via des variables CSS dans app/resources/css/app.css :

:root {
    --color-primary: 41 171 226;        /* bleu principal (R G B) */
    --color-primary-light: 76 201 240;  /* bleu clair */
    --color-secondary: 100 116 139;     /* gris neutre */
    --color-background: 10 10 15;       /* fond sombre */
    --color-text: 226 232 240;          /* texte principal */
}

Les valeurs sont en R G B separes par des espaces (sans virgule ni rgb()). Ce format est requis par Tailwind pour la gestion de l'opacite (bg-primary/50).

Pour changer le theme : modifier ces 5 lignes uniquement.


Mapping de la base de donnees FiveM (ESX)

Si vos noms de tables different du schema ESX standard, les configurer dans .env :

# Tables principales
DB_GAME_TABLE_USERS=users
DB_GAME_TABLE_VEHICLES=owned_vehicles
DB_GAME_TABLE_JOBS=jobs
DB_GAME_TABLE_JOB_GRADES=job_grades

# Telephone
DB_GAME_TABLE_PHONE_CONTACTS=phone_contacts
DB_GAME_TABLE_PHONE_CALLS=phone_calls
DB_GAME_TABLE_PHONE_MESSAGES=phone_messages

# Reseaux sociaux in-game
DB_GAME_TABLE_BIRDY_ACCOUNTS=phone_twitter_accounts
DB_GAME_TABLE_BIRDY_TWEETS=phone_twitter_tweets
DB_GAME_TABLE_INSTAGRAM_ACCOUNTS=instagram_accounts
DB_GAME_TABLE_INSTAGRAM_POSTS=instagram_posts

# Modules optionnels (decommenter si installes)
# DB_GAME_TABLE_OKOKBANKING_SOCIETIES=okokbanking_societies
# DB_GAME_TABLE_OKOKBANKING_TRANSACTIONS=okokbanking_transactions
# DB_GAME_TABLE_OX_INVENTORY=ox_inventory

Configuration Discord

  1. Aller sur discord.com/developers/applications
  2. Creer une application — New Application
  3. Section OAuth2 — ajouter une Redirect URL : http://VOTRE_IP:PORT/auth/discord/callback
  4. Copier Client ID et Client Secret dans .env
  5. Section Bot — creer un bot, copier le token dans DISCORD_BOT_TOKEN
  6. Inviter le bot sur votre serveur Discord avec le scope bot + permission Read Members
  7. Recuperer les IDs de roles (clic droit sur un role dans Discord > Copier l'identifiant)

Etapes post-installation

Apres bash setup.sh :

1. Importer la base FiveM dans mysql-game

docker cp votre_dump.sql sa_panel_mysql_game:/tmp/dump.sql
docker exec -it sa_panel_mysql_game mysql -u root -p fivem_game < /tmp/dump.sql

2. Verifier app/.env

APP_URL et DISCORD_REDIRECT_URI doivent correspondre a votre IP et port reels.

3. Configurer les roles Discord

DISCORD_ROLE_STAFF_ID, DISCORD_ROLE_WL_ID, DISCORD_ROLE_NONWL_ID — obligatoires pour que l'authentification fonctionne.

4. Personnaliser le contenu

  • Logo : remplacer app/public/images/logo_full.png
  • Wiki : editer les fichiers .md dans app/resources/markdown/wiki/
  • Couleurs : modifier les variables CSS dans app/resources/css/app.css

Structure du projet

.
├── app/                          # Application Laravel
│   ├── app/
│   │   ├── Http/Controllers/     # Controllers par domaine
│   │   ├── Models/
│   │   │   ├── App/              # Modeles panel (BDD panel)
│   │   │   └── Game/             # Modeles game (BDD FiveM)
│   │   └── Services/
│   ├── config/
│   │   ├── database-mapping.php  # Mapping tables/colonnes ESX
│   │   └── server.php            # Config serveur (nom, features, FiveM URL)
│   ├── database/migrations/      # Migrations base panel
│   └── resources/
│       ├── css/app.css           # Variables CSS (theming)
│       ├── js/Pages/             # Pages React (Inertia)
│       ├── js/Components/        # Composants React reutilisables
│       └── markdown/wiki/        # Contenu wiki (Markdown)
├── docker/
│   ├── nginx/                    # Config Nginx + Dockerfile
│   ├── php/                      # Dockerfile PHP-FPM 8.3 + ini
│   └── node/                     # Dockerfile Node 20
├── docker-compose.yml
├── .env.example                  # Variables a configurer
└── setup.sh                      # Script d'initialisation

Commandes utiles

# Demarrer tous les services
docker compose up -d

# Arreter sans supprimer les volumes
docker compose stop

# Logs en direct
docker compose logs -f

# Commande Artisan
docker compose run --rm php php artisan <commande>

# Rebuild apres modification d'un Dockerfile
docker compose build php
docker compose up -d php

# Ouvrir Adminer (interface base de donnees)
docker compose --profile tools up -d adminer
# Accessible sur http://IP:8084

License

MIT

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors