Desafio: Recuperar e Exibir Dados
Vamos focar no próximo componente, LatestInvoices
. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.
Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.
Para inspecionar a função fetchLatestInvoices
, acesse app/lib/data.ts
.
De volta ao projeto
Utilizaremos a função fetchLatestInvoices
na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices
.
Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx
e descomentar a interface fornecida.
Desafio
Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.
Principalmente, temos um componente Card
na página do painel. Sua tarefa é importar a função fetchCardData
, que fornece:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Com base nos dados recuperados, descomente o componente Card
correspondente.
Resultado
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.08
Desafio: Recuperar e Exibir Dados
Deslize para mostrar o menu
Vamos focar no próximo componente, LatestInvoices
. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.
Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.
Para inspecionar a função fetchLatestInvoices
, acesse app/lib/data.ts
.
De volta ao projeto
Utilizaremos a função fetchLatestInvoices
na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices
.
Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx
e descomentar a interface fornecida.
Desafio
Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.
Principalmente, temos um componente Card
na página do painel. Sua tarefa é importar a função fetchCardData
, que fornece:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Com base nos dados recuperados, descomente o componente Card
correspondente.
Resultado
Na Prática
Obrigado pelo seu feedback!