Building an Interactive Logistics Dashboard with Next.js and Chart.js

Let's build a real dashboard together. I'll show you how we constructed the Scheduling Visibility Dashboard using Next.js, the `xlsx` library for parsing, and Chart.js for visualisation.

Project Setup and Data Ingest

Create a Next.js app with a single page route. We use the `useRef` hook to hold a file input, and the `xlsx` library to read the uploaded Excel file entirely in the browser. The parsed data is stored in a React state as an array of objects.

Transforming Data for Charts

Chart.js needs labels and datasets. We group the parsed shifts by date using `Array.reduce()`, then extract two datasets: "Scheduled Routes" and "Coverage Gaps". The transformation logic lives in a custom hook `useScheduleData()` so it's reusable and testable.

Rendering the Bar Chart

We use `react-chartjs-2` with a `<Bar>` component. The key is interaction: we register an `onClick` handler on the chart that extracts the clicked date and updates a "drill‑down" state. Then, a table below the chart filters to show only the routes for that date. This turns a static visual into an interactive analysis tool.

Adding Date Range Filters

Dispatchers rarely want to see all 90 days. We added a simple date range picker using native <input type="date"> elements. When the range changes, we re‑compute the chart data. Because everything is client‑side, the response is instant—no loading spinners.

Export to PDF

Managers need to share these dashboards in stand‑up meetings. We used the browser's `window.print()` with a print‑specific CSS to generate clean, one‑page summaries. It's not as fancy as a server‑side PDF generator, but it works perfectly and respects our privacy‑first architecture.