Challenge: Retrieving and Displaying Data

Let's focus on the next component, LatestInvoices. Its purpose is to display the last five invoices, sorted chronologically by date.

You might think that achieving this with JavaScript is straightforward. However, as the app grows and more data appears, it's preferable to handle the sorting and limiting of invoices using SQL. This approach prevents overloading the frontend with unnecessary calculations.

To inspect the fetchLatestInvoices function, please visit app/lib/data.ts.

Back to the Project

We'll employ the fetchLatestInvoices function on the dashboard page to retrieve the most recent invoices and display them using the LatestInvoices component.

Don't forget to visit app/ui/dashboard/latest-invoices.tsx and uncomment the provided UI.

Challenge

Now, it's your chance to fetch the data and present the information to the user.

Primarily, we have a Card component on the dashboard page. Your task is to import the fetchCardData function, which provides:

• numberOfSellers;
• numberOfInvoices;
• totalFulfilledInvoices;
• totalAwaitingInvoices.

Based on the retrieved data, uncomment the corresponding Card component.

Result

In Practice