# UI Overview

UI Overview — moh-billing

The billing interface is a single NUI panel that opens in the centre of the screen\
when a player runs `/billing`. It is divided into up to three tabs\
depending on the player's job and grade.

### Tabs

| Tab                | Who sees it                              | Purpose                                                                                                                                |
| ------------------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **My Invoices**    | Everyone                                 | Lists all unpaid invoices addressed to the current player. Each card shows the society name, reason, author, amount, and a Pay button. |
| **Create Invoice** | Members of `AllowedSocieties`            | Form to send a new invoice to the nearest player. Shows the sender's society badge, a reason field, and an amount field.               |
| **💼 Management**  | Boss-grade members of `AllowedSocieties` | Displays the live society fund balance with Withdraw and Deposit controls.                                                             |

### My Invoices tab

Each invoice card displays:

* **Invoice #** — database ID badge
* **Society name** — who sent the invoice
* **Item / Reason** — description entered by the sender
* **Author** — name of the player who created the invoice
* **Amount** — value in $ with optional VAT label
* **▶ Pay button** — triggers payment immediately

If there are no pending invoices, an empty-state illustration is shown with the\
message *"No Pending Invoices"*.

After a successful payment, the invoice disappears from the list and the remaining\
invoices refresh automatically without closing the UI.

### Create Invoice tab

Fields:

* **Reason / Item** — free text description of the charge (required)
* **Amount** — positive number in $ (required)

Clicking **Send Invoice**:

* Validates that both fields are filled and the amount is positive.
* Checks that a player is within 3 metres.
* Sends the invoice to that player's account.
* Closes the UI and shows a success notification.

### Management tab

Contains:

* **Society Fund Balance** — live $ amount stored in the database for the player's society.
* **Withdraw panel** — amount input + Withdraw button. Moves money from the fund to the player's bank.
* **Deposit panel** — amount input + Deposit button. Moves money from the player's bank to the fund.

The balance updates instantly after every successful action without requiring a UI reload.

### Keyboard shortcut

Press <kbd>Escape</kbd> at any time to close the panel. This is equivalent to clicking the **×** close button and properly releases NUI focus.

### Logo

Place your own image at `web/logo.png` to replace the default icon shown\
in the panel header. Recommended size: **128 × 128 px** with a\
transparent background. If the file is missing the UI falls back to a 💳 emoji.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mohssins.gitbook.io/mohscriptsdocs/moh-billing/ui-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.