Widget Data in Dashboard - earmuff-jam/invoicer GitHub Wiki

Purpose

The main purpose of this wiki is to determine the data that needs to be displayed in the three widgets in Invoicer [Pro Features] Dashboard. The conclusion of this wiki should determine the best data to display in the three widgets.

Request Parameters

The request parameters that are used to build the spike is -


PDF DETAILS - 
{"title":"Rent for the month of March","caption":"Test title","note":"No additional notes","start_date":"04-15-2025","end_date":"04-30-2025","tax_rate":"1","invoice_header":"test","items":[{"descpription":"test","caption":"test","quantity":"1","price":"1","payment":"1","payment_method":"zelle"}],"updated_on":"2025-04-15T13:14:09.627Z"}

SENDER -
{"first_name":"test","last_name":"test","email_address":"[email protected]","phone_number":"1231231231","street_address":"112","city":"1","state":"1","zipcode":"11231","updated_on":"2025-01-06T01:40:29.469Z"}


RECIEVER -
{"first_name":"test","last_name":"test","email_address":"[email protected]","phone_number":"1231231231","street_address":"112","city":"1","state":"1","zipcode":"11231","updated_on":"2025-01-06T01:40:17.479Z"}

Widget 1 : Timeline Visualization.

This widget is responsible to show rental periods across time. Use start_date and end_date from the request parameters. This type of chart would be a horizontal bar chart and would be useful if the client had many invoices over time and wants to track rent collection or due periods.

image

Widget 2 : Invoice totals over time. \ Tax collected over time.

This widget is responsible to display rent collected across months. This chart should use line chart or a bar chart to display the selected data. This shows trends in payments and hence can be useful for landlords and accountants. I want this widget to be able to support both variations because of their relationship in nature. This should also prove useful to the client as it can visualize tax amounts if tax rates or totals vary. The chart that can be used to display this would be a stacked bar or a line chart.

image

image

Widget 3 : Item type Frequency Visualization.

This widget is responsible to display types of items / services invoiced. Eg, "Rent", "Utilities" and all of that would be for data visualization purposes. The chart type to use in this scenario is Bar Chart or Treemap. This chart can prove useful if the client is akin to seeing what type of expenses is his invoices drafting up.

image

Widget 4 : Invoice Details Table View.

This widget is responsible to display data in the form of table. Eg,

[
  {
    "invoice_title": "Rent for the month of March",
    "sender": "test test", // first name + last name
    "receiver": "test test", // first name + last name
    "start_date": "2025-04-15", 
    "end_date": "2025-04-30",
    "total": 1.00, // sum of all payments
    "payment_status": "Paid", // this should be invoice_status; we have invoice_status
    "payment_method": "Zelle",
    "updated_on": "2025-04-15T13:14:09.627Z" // datetimestamp the row was changed
  }
]

This JSON can be extended to support an array of invoices. Eg, "total" is based on quantity * price per line item (you could sum multiple items), "payment_status" is calculated (e.g., if total payments cover the total due), "sender" and "receiver" are simple name concatenations.

We should also support filter and sort for a couple of the selected rows. We use mrtv2 table for data display so filter and sort support should be out of the box as well. It would awesome if we could get pagination to work as well.

We should also offer the ability to export this data set since it could be important for the user.

image