Desafío: Recuperar y Mostrar Datos
Centrémonos en el siguiente componente, LatestInvoices. Su propósito es mostrar las cinco facturas más recientes, ordenadas cronológicamente por fecha.
Puede parecer que lograr esto con JavaScript es sencillo. Sin embargo, a medida que la aplicación crece y aparece más información, es preferible gestionar el ordenamiento y la limitación de facturas utilizando SQL. Este enfoque evita sobrecargar el frontend con cálculos innecesarios.
Para revisar la función fetchLatestInvoices, por favor visita app/lib/data.ts.
De vuelta al proyecto
Utilizaremos la función fetchLatestInvoices en la página del panel para recuperar las facturas más recientes y mostrarlas usando el componente LatestInvoices.
No olvides visitar app/ui/dashboard/latest-invoices.tsx y descomentar la interfaz de usuario proporcionada.
Desafío
Ahora, es tu oportunidad de obtener los datos y mostrar la información al usuario.
Principalmente, disponemos de un componente Card en la página del panel. Tu tarea es importar la función fetchCardData, que proporciona:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Con base en los datos obtenidos, descomenta el componente Card correspondiente.
Resultado
En la práctica
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.08Desafío: Recuperar y Mostrar Datos
Desliza para mostrar el menú
Centrémonos en el siguiente componente, LatestInvoices. Su propósito es mostrar las cinco facturas más recientes, ordenadas cronológicamente por fecha.
Puede parecer que lograr esto con JavaScript es sencillo. Sin embargo, a medida que la aplicación crece y aparece más información, es preferible gestionar el ordenamiento y la limitación de facturas utilizando SQL. Este enfoque evita sobrecargar el frontend con cálculos innecesarios.
Para revisar la función fetchLatestInvoices, por favor visita app/lib/data.ts.
De vuelta al proyecto
Utilizaremos la función fetchLatestInvoices en la página del panel para recuperar las facturas más recientes y mostrarlas usando el componente LatestInvoices.
No olvides visitar app/ui/dashboard/latest-invoices.tsx y descomentar la interfaz de usuario proporcionada.
Desafío
Ahora, es tu oportunidad de obtener los datos y mostrar la información al usuario.
Principalmente, disponemos de un componente Card en la página del panel. Tu tarea es importar la función fetchCardData, que proporciona:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Con base en los datos obtenidos, descomenta el componente Card correspondiente.
Resultado
En la práctica
¡Gracias por tus comentarios!
