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
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.08Challenge: Retrieving and Displaying Data
Pyyhkäise näyttääksesi valikon
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
Kiitos palautteestasi!
