Lesson 17 — Mini dashboard

Mini project: a dashboard

A dashboard shows a few numbers calculated from one list. Here: total tasks, done, pending and the percentage complete. Math.round() turns 66.66… into 67. All values are derived during render, so they always match the data.

const share = Math.round((paid / orders.length) * 100);

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: admin panels and analytics pages are mostly this — numbers derived from lists.