Copy and paste the code below into app/dashboard/page.tsx. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.

app/dashboard/page.tsx

import { Card } from '@/app/ui/dashboard/cards';
import IncomeChart from '@/app/ui/dashboard/income-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { poppins } from '@/app/ui/fonts';

export default async function Page() {
  return (
    <main className="rounded-xl bg-neutral-900 p-6">
      <h1
        className={`${poppins.className} mb-4 text-center text-xl text-white md:text-3xl`}
      >
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Earned" value={totalFulfilledInvoices} type="earned" /> */}
        {/* <Card
          title="In Progress"
          value={totalAwaitingInvoices}
          type="awaiting"
        /> */}
        {/* <Card title="All Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card title="Total Sellers" value={numberOfSellers} type="sellers" /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <IncomeChart income={income} /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Retrieving Data for IncomeChart

To fetch income data, import the fetchIncome function from the '@/app/lib/data' module and call it inside the Page component. Then, uncomment the IncomeChart component and check the live page.

app/dashboard/page.tsx

// ...
import { poppins } from '@/app/ui/fonts';
import { fetchIncome } from '@/app/lib/data';

export default async function Page() {
  const income = await fetchIncome();

  return (
    <main className="rounded-xl bg-neutral-900 p-6">
      <h1
        className={`${poppins.className} mb-4 text-center text-xl text-white md:text-3xl`}
      >
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* ... */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <IncomeChart income={income} />
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Next, follow these steps to view the income chart:

Visit the app/ui/dashboard/income-chart.tsx file.
Uncomment the ready UI code.

app/ui/dashboard/income-chart.tsx

import { generateYAxis } from '@/app/lib/utils';
import { CalendarDaysIcon } from '@heroicons/react/24/outline';
import { poppins } from '@/app/ui/fonts';
import { Income } from '@/app/lib/definitions';

export default async function IncomeChart({ income }: { income: Income[] }) {
  const chartHeight = 350;
  // Attention! Uncomment this section when you reach this stage in the course.

  const { yAxisLabels, topLabel } = generateYAxis(income);

  if (!income || income.length === 0) {
    return <p className="mt-4 text-gray-400">No data available.</p>;
  }

  return (
    <div className="w-full md:col-span-4">
      <h2
        className={`${poppins.className} mb-4 text-xl text-white md:text-2xl`}
      >
        Current Income
      </h2>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="rounded-xl bg-neutral-700 p-4">
        <div className="mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-neutral-700 p-4 sm:grid-cols-13 md:gap-4">
          <div
            className="mb-6 hidden flex-col justify-between text-sm text-white sm:flex"
            style={{ height: `${chartHeight}px` }}
          >
            {yAxisLabels.map((label) => (
              <p key={label}>{label}</p>
            ))}
          </div>

          {income.map((month) => (
            <div key={month.month} className="flex flex-col items-center gap-2">
              <div
                className="w-full rounded-md bg-sky-700"
                style={{
                  height: `${(chartHeight / topLabel) * month.income}px`,
                }}
              ></div>
              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
                {month.month}
              </p>
            </div>
          ))}
        </div>
        <div className="flex items-center pb-2 pt-6">
          <CalendarDaysIcon className="h-5 w-5 text-white" />
          <h3 className="ml-2 text-sm text-white ">This year</h3>
        </div>
      </div>
    </div>
  );
}

This results in the following income chart on the live page.

In Practice

Everything was clear?

Section 5. Chapter 2

Course Content

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Next.js 14

Working with the Dashboard Page

Let's focus on the dashboard page now and see the theory in action to understand the concept better.

Back to the Project

Copy and paste the code below into app/dashboard/page.tsx. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.

app/dashboard/page.tsx

import { Card } from '@/app/ui/dashboard/cards';
import IncomeChart from '@/app/ui/dashboard/income-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { poppins } from '@/app/ui/fonts';

export default async function Page() {
  return (
    <main className="rounded-xl bg-neutral-900 p-6">
      <h1
        className={`${poppins.className} mb-4 text-center text-xl text-white md:text-3xl`}
      >
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Earned" value={totalFulfilledInvoices} type="earned" /> */}
        {/* <Card
          title="In Progress"
          value={totalAwaitingInvoices}
          type="awaiting"
        /> */}
        {/* <Card title="All Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card title="Total Sellers" value={numberOfSellers} type="sellers" /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <IncomeChart income={income} /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Retrieving Data for IncomeChart

app/dashboard/page.tsx

// ...
import { poppins } from '@/app/ui/fonts';
import { fetchIncome } from '@/app/lib/data';

export default async function Page() {
  const income = await fetchIncome();

  return (
    <main className="rounded-xl bg-neutral-900 p-6">
      <h1
        className={`${poppins.className} mb-4 text-center text-xl text-white md:text-3xl`}
      >
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* ... */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <IncomeChart income={income} />
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Next, follow these steps to view the income chart:

Visit the app/ui/dashboard/income-chart.tsx file.
Uncomment the ready UI code.

app/ui/dashboard/income-chart.tsx

import { generateYAxis } from '@/app/lib/utils';
import { CalendarDaysIcon } from '@heroicons/react/24/outline';
import { poppins } from '@/app/ui/fonts';
import { Income } from '@/app/lib/definitions';

export default async function IncomeChart({ income }: { income: Income[] }) {
  const chartHeight = 350;
  // Attention! Uncomment this section when you reach this stage in the course.

  const { yAxisLabels, topLabel } = generateYAxis(income);

  if (!income || income.length === 0) {
    return <p className="mt-4 text-gray-400">No data available.</p>;
  }

  return (
    <div className="w-full md:col-span-4">
      <h2
        className={`${poppins.className} mb-4 text-xl text-white md:text-2xl`}
      >
        Current Income
      </h2>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="rounded-xl bg-neutral-700 p-4">
        <div className="mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-neutral-700 p-4 sm:grid-cols-13 md:gap-4">
          <div
            className="mb-6 hidden flex-col justify-between text-sm text-white sm:flex"
            style={{ height: `${chartHeight}px` }}
          >
            {yAxisLabels.map((label) => (
              <p key={label}>{label}</p>
            ))}
          </div>

          {income.map((month) => (
            <div key={month.month} className="flex flex-col items-center gap-2">
              <div
                className="w-full rounded-md bg-sky-700"
                style={{
                  height: `${(chartHeight / topLabel) * month.income}px`,
                }}
              ></div>
              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
                {month.month}
              </p>
            </div>
          ))}
        </div>
        <div className="flex items-center pb-2 pt-6">
          <CalendarDaysIcon className="h-5 w-5 text-white" />
          <h3 className="ml-2 text-sm text-white ">This year</h3>
        </div>
      </div>
    </div>
  );
}

This results in the following income chart on the live page.

In Practice

Everything was clear?

Section 5. Chapter 2