gfx-dui-lb

Info

DUI-based leaderboard script with a React (TypeScript) NUI interface. Automatically detects ESX or QBCore frameworks and adapts accordingly. Supports player avatar fetching from Steam or Discord, customizable UI theming, and multi-language localization.

Dependencies

The script also auto-detects the following (if present) through its server utilities:

• Inventory: qb-inventory, esx_inventoryhud, qs-inventory, codem-inventory, gfx-inventory, ox_inventory, ps-inventory
• Skin script: esx_skin, qb-clothing, skinchanger, illenium-appearance, fivem-appearance

Installation

1. Copy Files

Place the gfx-dui-lb folder into your server's resources directory.

2. Build the Web UI

Navigate to the web folder and install dependencies, then build:

cd gfx-dui-lb/web
npm install
npm run build

This generates the web/build/ folder required by the NUI.

3. server.cfg

Add to your server.cfg:

ensure gfx-dui-lb

Make sure the script starts after your framework resource (ESX/QBCore) and your SQL resource.

4. Configure

Edit the configuration files in the config/ folder (see Configuration section below).

Configuration

config/client_config.lua

Config = {
    Theme = {
        ["primary"] = '#ff4f22',            -- Primary color (hex)
        ["primary-content"] = '#900000',     -- Primary content/text color
        ["primary-opacity"] = "rgba(255, 47, 47, 0.2)", -- Primary with opacity (rgba)
        ["secondary"] = "#FF2F2F",           -- Secondary color
        ["secondary-content"] = '#900000',   -- Secondary content/text color
        ["secondary-opacity"] = "rgba(255, 47, 47, 0.2)", -- Secondary with opacity
    }
    -- Notify = function(source, message)
    -- end, -- Uncomment and add your notification export for custom client notifications
}

config/server_config.lua

Config = {
    PhotoType = "steam",                -- "steam" or "discord"
    NoImage = "https://cdn.discordapp.com/attachments/.../noimage.png",
    DiscordBotToken = "YOUR_DISCORD_BOT_TOKEN",
    -- Notify = function(source, message)
    -- end, -- Uncomment and add your notification export for custom server notifications
}

config/locale.lua

Locale = 'en'  -- Active locale key

Locales = {
    ["en"] = {
        ["test"] = "Test"
    },
    ["fr"] = {
        ["test"] = "Test"
    }
}

Use _L("key") in Lua to retrieve a translated string.

Exports

No exports found.

This script does not register any callable exports via exports('name', function).

Events

No public API events found.

All events used by the script are internal (NUI callbacks, framework detection, internal callback system). There are no public events intended for external scripts to listen to or trigger.

Commands

Features

• NUI interface built with React and TypeScript (Vite + Tailwind CSS)
• Automatic framework detection (ESX / QBCore)
• Automatic SQL resource detection (oxmysql / ghmattimysql / mysql-async)
• Automatic inventory system detection (supports 7 inventory resources)
• Automatic skin script detection (supports 5 skin resources)
• Player avatar fetching from Steam profile or Discord (via bot token)
• Fully customizable UI theme colors (primary, secondary, opacity variants)
• Multi-language localization support
• Custom notification function override (client and server side)
• Callback system with promise-based async/await pattern and 15-second timeout
• Debug mode via convar (setr gfx-dui-lb-debugMode 1)
• Escrow support (dual escrow/open-source zip packaging)
• Lua 5.4 enabled

Troubleshooting