Invoices
This microfrontend is responsible for displaying customer invoice information. It provides two different visualization modes controlled by the data-visualization-mode parameter:
last_invoicelist
Each mode defines how invoice data is fetched, displayed, and interacted with.
1. Last invoice mode
When data-visualization-mode is set to last_invoice, the microfrontend displays the most recent invoice, regardless of its type (electricity or gas). Also shows some key invoice information, including the billing period, total cost, and -when applicable- the invoice breakdown.
The invoice breakdown is only available for electricity invoices. In this case, the client can view a detailed breakdown of cost components such as energy consumption, power costs, taxes, and surplus benefits, as well as download the invoice.
To enable this feature, additional data must be provided for each invoice. You can find the setup instructions in the following documentation
For gas invoices, the breakdown is not displayed, but the invoice can still be downloaded directly.
2. List mode
When data-visualization-mode is set to list, the microfrontend displays a historical overview of invoices, including their total cost. Invoices are ordered by issue date (most recent first) and grouped by year for easier navigation.
This mode also provides a visual representation of monthly spending evolution, helping clients analyze cost trends and better understand their consumption patterns over time.
Through the magnifying glass icon located on the right side of each invoice, the client can either view the detailed invoice breakdown (when additional invoice metadata has been provided) or download the invoice directly (when such metadata is not available).