Завдання: Отримання та Відображення Даних
Зосередьмося на наступному компоненті — LatestInvoices
. Його призначення — відображати останні п’ять рахунків, відсортованих у хронологічному порядку за датою.
Може здатися, що це легко реалізувати за допомогою JavaScript. Однак, із розширенням застосунку та збільшенням обсягу даних, краще виконувати сортування та обмеження рахунків за допомогою SQL. Такий підхід запобігає перевантаженню фронтенду зайвими обчисленнями.
Щоб переглянути функцію fetchLatestInvoices
, перейдіть до app/lib/data.ts
.
Повернення до проєкту
Ми використаємо функцію fetchLatestInvoices
на сторінці панелі керування для отримання найновіших рахунків і відображення їх за допомогою компонента LatestInvoices
.
Не забудьте відкрити app/ui/dashboard/latest-invoices.tsx
і розкоментувати наданий інтерфейс.
Завдання
Тепер ваша черга отримати дані та відобразити інформацію для користувача.
На сторінці панелі керування використовується компонент Card
. Ваше завдання — імпортувати функцію fetchCardData
, яка надає:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Виходячи з отриманих даних, розкоментуйте відповідний компонент Card
.
Результат
На практиці
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.08
Завдання: Отримання та Відображення Даних
Свайпніть щоб показати меню
Зосередьмося на наступному компоненті — LatestInvoices
. Його призначення — відображати останні п’ять рахунків, відсортованих у хронологічному порядку за датою.
Може здатися, що це легко реалізувати за допомогою JavaScript. Однак, із розширенням застосунку та збільшенням обсягу даних, краще виконувати сортування та обмеження рахунків за допомогою SQL. Такий підхід запобігає перевантаженню фронтенду зайвими обчисленнями.
Щоб переглянути функцію fetchLatestInvoices
, перейдіть до app/lib/data.ts
.
Повернення до проєкту
Ми використаємо функцію fetchLatestInvoices
на сторінці панелі керування для отримання найновіших рахунків і відображення їх за допомогою компонента LatestInvoices
.
Не забудьте відкрити app/ui/dashboard/latest-invoices.tsx
і розкоментувати наданий інтерфейс.
Завдання
Тепер ваша черга отримати дані та відобразити інформацію для користувача.
На сторінці панелі керування використовується компонент Card
. Ваше завдання — імпортувати функцію fetchCardData
, яка надає:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Виходячи з отриманих даних, розкоментуйте відповідний компонент Card
.
Результат
На практиці
Дякуємо за ваш відгук!