Central — Invoice

Overview

The Invoice page is the admin interface for searching invoice records, creating new invoices, and viewing invoice details. It supports date range filtering, white label filtering, invoice selection, and a dedicated create invoice workflow.

Access

• URL: /dashboard/invoice
• Role required: Admin
• Navigation path: Sidebar > Report > Invoice

Page layout

Header

The top section shows the page title and the primary create action.

Element	Type	Description
Invoice	heading	Page title
Create Invoice	button	Opens the invoice creation modal

Filter section

The filter area allows admins to narrow the invoice list by date range and white label.

Element	Type	Description
Date	date range picker	Start date for invoice search
End Date	date range picker	End date for invoice search
White Label	select/autocomplete	Filter invoices by white label value
Reset	button	Clear filter values
Submit	button	Apply the filter to refresh invoice results

Invoice list section

The main section displays invoice records and actions.

Element	Type	Description
38 Data	label	Total number of invoice records currently displayed
View	button	Open the selected invoice detail view
Invoice table	table	Displays invoice rows with details and action links

Table columns

The invoice table contains these columns.

Column	Description
Checkbox	selection
No	row number
Invoice ID	text
Create Date	date
From	date
To	date
White Label Name	text
Revenue Company	text
Actions	link/button

Example rows

Sample invoice entries include:

• Invoice ID dd2e65c3-1a9c-4c7b-ab13-7d6cc4e5fbc5, created 20-05-2026, period 01-05-2026 to 20-05-2026, white label i88, revenue IDR: 567,119,920.00
• Invoice ID 7b9b1b12-4647-45d9-a1bc-b02bca226af4, created 20-11-2024, period 01-05-2024 to 31-05-2024, white label i88, revenue IDR: 6,928,608.00 and USDT: 500.00

Actions

Filter invoice records

1. In the filter section, select the Date start value.
2. Select the End Date value.
3. Choose a White Label value or leave it as All.
4. Click Submit to refresh the invoice list.
5. Click Reset to clear filters and return to the full invoice list.

Create a new invoice

1. Click Create Invoice at the top of the page.
2. Complete the invoice creation modal fields:
   • White Label*
   • Date From*
   • Date To*
   • Notes
   • Additional Details* (optional extra line item details)
   • Currency* for each additional line item
   • Amount* for each additional line item
   • Discount Details* (optional discount line item details)
   • Currency* for each discount line item
   • Amount* for each discount line item
3. Use + Add to add more additional or discount line entries.
4. Use Delete to remove a line item.
5. Click Save to create the invoice.
6. Click Cancel to close the modal without saving.

View an invoice

1. Select one or more invoice rows using the checkbox column.
2. Click the View button when it is enabled.
3. The selected invoice opens in a new document view or blob link.
4. Review the invoice details and download or print if needed.

Modal / popup details

Create Invoice modal

The modal provides fields for a new invoice and supports multiple additional or discount lines.

Field	Type	Description
White Label*	select/autocomplete	Choose the white label for the invoice
Date From*	date picker	Start date of the invoice period
Date To*	date picker	End date of the invoice period
Notes	textarea	Notes or description for the invoice
Additional Details*	input	Description for additional revenue line
Currency*	select	Currency for the additional revenue line
Amount*	input	Amount for the additional revenue line
Discount Details*	input	Description for discount line
Currency*	select	Currency for the discount line
Amount*	input	Amount for the discount line
+ Add	button	Add another line entry to either additional or discount section
Delete	button	Remove the line entry from the invoice form
Cancel	button	Close the modal without saving
Save	button	Create the invoice and close the modal

Notes

• The View action requires row selection and may remain disabled until a row is selected.
• Invoice revenue amounts may include multiple currencies in the same row.
• The page is primarily read-only for invoice browsing, with creation handled through the modal.
• Use the date range filter first to narrow down older invoices before selecting and viewing.