# Installation

## 1. Download Resource

Download the purchased resource from [**CFX Portal**](https://portal.cfx.re/assets/granted-assets) - the official site of FiveM with purchased resources.

***

## 2. Install Required Dependencies

This script needs a few extra resources to work properly.\
Below you will find a list of things to download - click the link, download and upload to your server just like other resources.

<table data-full-width="false"><thead><tr><th width="251">Resource</th><th data-type="content-ref">Download Link</th></tr></thead><tbody><tr><td><strong>MugShotBase64</strong></td><td><a href="https://github.com/BaziForYou/MugShotBase64">https://github.com/BaziForYou/MugShotBase64</a></td></tr></tbody></table>

***

## 3. Import Database Tables

This is a very important step - without it, the script will not work properly.
\
Depending on the framework you are using (ESX or QB-Core), select the appropriate section below and **Paste the SQL code into your database**.

{% hint style="warning" %}

## Not sure how to do it?

No worries - we've prepared a short guide that shows you step by step how to import an SQL file into your database:\
👉 [**Click here to view the tutorial.**](https://docs.vames-store.com/helpful/basic-server-knowledge/how-to-import-sql-to-database)
{% endhint %}

<details>

<summary>Database for ESX</summary>

```sql
ALTER TABLE `users` ADD COLUMN `ssn` varchar(16) DEFAULT NULL;

CREATE TABLE IF NOT EXISTS `player_documents` (
  `serial_number` varchar(50) NOT NULL DEFAULT '',
  `owner` varchar(80) DEFAULT NULL,
  `type` varchar(80) DEFAULT NULL,
  `photo` longtext DEFAULT NULL,
  `valid` tinyint(4) DEFAULT 1,
  `for_pickup` tinyint(4) DEFAULT 0,
  PRIMARY KEY (`serial_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
```

</details>

<details>

<summary>Database for QB-Core</summary>

```sql
CREATE TABLE IF NOT EXISTS `player_documents` (
  `serial_number` varchar(50) NOT NULL DEFAULT '',
  `owner` varchar(80) DEFAULT NULL,
  `type` varchar(80) DEFAULT NULL,
  `photo` longtext DEFAULT NULL,
  `valid` tinyint(4) DEFAULT 1,
  `for_pickup` tinyint(4) DEFAULT 0,
  PRIMARY KEY (`serial_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
```

</details>

***

## 4. Add Required Items

The script uses its own items.
\
Depending on what inventory you are using, select the appropriate section and add these items to either your item file or database.

<details>

<summary>Items for esx inventory</summary>

```sql
INSERT INTO `items` (`name`, `label`, `weight`, `rare`, `can_remove`) VALUES
    ("id_card", "ID Card", 10, 0, 1),
    ("driving_license", "Driving License", 10, 0, 1),
    ("boat_license", "Boat License", 10, 0, 1),
    ("flying_license", "Flying License", 10, 0, 1),
    ("police_badge", "Police Badge", 10, 0, 1),
    ("sheriff_badge", "Sheiff Badge", 10, 0, 1),
    ("fib_badge", "FIB Badge", 10, 0, 1);
```

</details>

<details>

<summary>Items for ox_inventory</summary>

```lua
['id_card'] = {
    label = 'ID Card',
    weight = 5,
    stack = false
},
['driving_license'] = {
    label = 'Driving License',
    weight = 5,
    stack = false
},
['flying_license'] = {
    label = 'Flying License',
    weight = 5,
    stack = false
},
['boat_license'] = {
    label = 'Boat License',
    weight = 5,
    stack = false
},
['weapon_license'] = {
    label = 'Weapon License',
    weight = 5,
    stack = false
},
['police_badge'] = {
    label = 'Police Badge',
    weight = 5,
    stack = false
},
['sheriff_badge'] = {
    label = 'Sheriff Badge',
    weight = 5,
    stack = false
},
['fib_badge'] = {
    label = 'FIB Badge',
    weight = 5,
    stack = false
},
```

</details>

<details>

<summary>Items for qb-inventory / qs-inventory / origen_inventory</summary>

```lua
['id_card'] = {
    ["name"] = 'id_card',
    ["label"] = "ID Card",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "id_card.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['driving_license'] = {
    ["name"] = 'driving_license',
    ["label"] = "Driving License",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "driving_license.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['boat_license'] = {
    ["name"] = 'boat_license',
    ["label"] = "Boat License",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "boat_license.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['flying_license'] = {
    ["name"] = 'flying_license',
    ["label"] = "Flying License",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "flying_license.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['police_badge'] = {
    ["name"] = 'police_badge',
    ["label"] = "Police Badge",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "police_badge.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['sheriff_badge'] = {
    ["name"] = 'sheriff_badge',
    ["label"] = "Sheriff Badge",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "sheriff_badge.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
['fib_badge'] = {
    ["name"] = 'fib_badge',
    ["label"] = "FIB Badge",
    ["weight"] = 10,
    ["type"] = "item",
    ["image"] = "fib_badge.png",
    ["unique"] = true,
    ["useable"] = true,
    ["shouldClose"] = false,
    ["combinable"] = nil,
    ["description"] = ""
},
```

</details>

***

## 5. Adjust Metadatas for Inventory

This script uses item metadata to store additional information.\
To make this data visible directly in your inventory UI, you need to add the code snippet below to your inventory configuration.

<details>

<summary>Metadata for ox_inventory</summary>

Customizable at the very bottom of the config.client.lua file

</details>

<details>

<summary>Metadata for old qb-inventory</summary>

1. Go to qb-inventory/html/js/app.js
2. Find function `FormatItemInfo`
3. Enter items metadata readout correctly

```javascript
} else if (itemData.name == "id_card") {
    $(".item-info-title").html("<p>" + itemData.label + "</p>");
    $(".item-info-description").html(`
        <p><strong>Serial Number: </strong><span>${itemData.info.document_id}</span></p>
        <p><strong>SSN: </strong><span>${itemData.info.ssn}</span></p>
        <p><strong>First Name: </strong><span>${itemData.info.firstName}</span></p>
        <p><strong>Last Name: </strong><span>${itemData.info.lastName}</span></p>
        <p><strong>Birth Date: </strong><span>${itemData.info.dateOfBirth}</span></p>
        <p><strong>Nationality: </strong><span>${itemData.info.nationality}</span></p>
    `)
} else if (
        itemData.name == "driving_license" ||
        itemData.name == "flying_license" ||
        itemData.name == "boat_license" ||
        itemData.name == "police_badge" ||
        itemData.name == "sheriff_badge" ||
        itemData.name == "fib_badge"    
    ) {
    $(".item-info-title").html("<p>" + itemData.label + "</p>");
    $(".item-info-description").html(`
        <p><strong>Serial Number: </strong><span>${itemData.info.document_id}</span></p>
        <p><strong>First Name: </strong><span>${itemData.info.firstName}</span></p>
        <p><strong>Last Name: </strong><span>${itemData.info.lastName}</span></p>
    `)

```

</details>

<details>

<summary>Metadata for qs-inventory</summary>

1. Go to qs-inventory/config/metadata.js
2. Find function `FormatItemInfo`
3. Enter items metadata readout correctly

```javascript
if (itemData.name == "id_card") {
    $(".item-info-title").html("<p>" + itemData.label + "</p>");
    $(".item-info-description").html(`
        <p><strong>Serial Number: </strong><span>${itemData.info.document_id}</span></p>
        <p><strong>SSN: </strong><span>${itemData.info.ssn}</span></p>
        <p><strong>First Name: </strong><span>${itemData.info.firstName}</span></p>
        <p><strong>Last Name: </strong><span>${itemData.info.lastName}</span></p>
        <p><strong>Birth Date: </strong><span>${itemData.info.dateOfBirth}</span></p>
        <p><strong>Nationality: </strong><span>${itemData.info.nationality}</span></p>
    `)
} else if (
        itemData.name == "driving_license" ||
        itemData.name == "flying_license" ||
        itemData.name == "boat_license" ||
        itemData.name == "police_badge" ||
        itemData.name == "sheriff_badge" ||
        itemData.name == "fib_badge"    
    ) {
    $(".item-info-title").html("<p>" + itemData.label + "</p>");
    $(".item-info-description").html(`
        <p><strong>Serial Number: </strong><span>${itemData.info.document_id}</span></p>
        <p><strong>First Name: </strong><span>${itemData.info.firstName}</span></p>
        <p><strong>Last Name: </strong><span>${itemData.info.lastName}</span></p>
    `)

```

</details>

<details>

<summary>Metadata for origen_inventory</summary>

1. Go to origen\_inventory/html/js/items.js
2. Find `driver_license` and remove the entire `displayMeta` function.
3. Find `id_card` and replace the entire function `displayMeta` responsible for `id_card`.

```javascript
displayMeta('id_card', (itemData, setTitle, setDescription) => {
    setTitle(`<p>${itemData.label}</p>`);
    setDescription(`
        <p><strong>Serial Number: </strong><span>${itemData.metadata.document_id}</span></p>
        <p><strong>SSN: </strong><span>${itemData.metadata.ssn}</span></p>
        <p><strong>First Name: </strong><span>${itemData.metadata.firstName}</span></p>
        <p><strong>Last Name: </strong><span>${itemData.metadata.lastName}</span></p>
        <p><strong>Birth Date: </strong><span>${itemData.metadata.dateOfBirth}</span></p>
        <p><strong>Nationality: </strong><span>${itemData.metadata.nationality}</span></p>
    `);
});
```

4. Register new documents

```javascript
let documentsList = [
    'driving_license',
    'flying_license',
    'boat_license',
    'police_badge',
    'sheriff_badge',
    'fib_badge'
]
documentsList.forEach((i) => {
    displayMeta(i, (itemData, setTitle, setDescription) => {
        setDescription(`
            <p><strong>Serial Number: </strong><span>${itemData.metadata.document_id}</span></p>
            <p><strong>First Name: </strong><span>${itemData.metadata.firstName}</span></p>
            <p><strong>Last Name: </strong><span>${itemData.metadata.lastName}</span></p>
        `);
    });
})
```

</details>

***

## 6. Additional Integrations

{% stepper %}
{% step %}

### Automatic SSN generation in your framework

Read the guide [**here**](https://docs.vames-store.com/assets/vms_documentsv2/guides/add-ssn-generation)
{% endstep %}
{% endstepper %}

***

## 7. Start Resource

To start a resource in your `server.cfg`, ensure that it begins after your framework has been initiated. For instance, if you are using a framework like `es_extended`, you should start resource after it, like so:

```python
start [core] # For example, here is your framework (esx/qb-core)

# Here you run your other resources like esx_policejob etc.

# VMS Resources
start MugShotBase64
start vms_documentsv2
```

Ensure there are no syntax errors or incorrect paths in your `server.cfg`.