Tutorial up to Chapter 10.

app/dashboard/(overview)/loading.tsx

@@ -0,0 +1,5 @@
+import DashboardSkeleton from "@/app/ui/skeletons";
+
+export default function Loading() {
+	return <DashboardSkeleton />;
+}

app/dashboard/(overview)/page.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from "react";
+import Cards from "@/app/ui/dashboard/cards";
+import RevenueChart from "@/app/ui/dashboard/revenue-chart";
+import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
+import { lusitana } from "@/app/ui/fonts";
+import { CardSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/ui/skeletons";
+
+export default async function Page() {
+	return (
+		<main>
+			<h1 className={`${lusitana} mb-4 text-xl md:text-2xl`}>Dashboard</h1>
+			<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+				<Suspense fallback={<CardSkeleton />}>
+					<Cards />
+				</Suspense>
+			</div>
+			<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
+				<Suspense fallback={<RevenueChartSkeleton />}>
+					<RevenueChart />
+				</Suspense>
+				<Suspense fallback={<LatestInvoicesSkeleton />}>
+					<LatestInvoices />
+				</Suspense>
+			</div>
+		</main>
+	);
+}

app/dashboard/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-	return <p>Dashboard Page</p>;
-}

app/lib/data.ts

@@ -1,3 +1,4 @@
+import { unstable_noStore as noStore } from 'next/cache';
 import { sql } from '@vercel/postgres';
 import {
   CustomerField,
@@ -13,17 +14,18 @@ import { formatCurrency } from './utils';
 export async function fetchRevenue() {
   // Add noStore() here prevent the response from being cached.
   // This is equivalent to in fetch(..., {cache: 'no-store'}).
+  noStore();
 
   try {
     // Artificially delay a reponse for demo purposes.
     // Don't do this in real life :)
 
-    // console.log('Fetching revenue data...');
+    console.log('Fetching revenue data...');
-    // await new Promise((resolve) => setTimeout(resolve, 3000));
+    await new Promise((resolve) => setTimeout(resolve, 3000));
 
     const data = await sql<Revenue>`SELECT * FROM revenue`;
 
-    // console.log('Data fetch complete after 3 seconds.');
+    console.log('Data fetch complete after 3 seconds.');
 
     return data.rows;
   } catch (error) {
@@ -33,6 +35,8 @@ export async function fetchRevenue() {
 }
 
 export async function fetchLatestInvoices() {
+  noStore();
+
   try {
     const data = await sql<LatestInvoiceRaw>`
       SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
@@ -53,6 +57,7 @@ export async function fetchLatestInvoices() {
 }
 
 export async function fetchCardData() {
+  noStore();
   try {
     // You can probably combine these into a single SQL query
     // However, we are intentionally splitting them to demonstrate
@@ -92,6 +97,7 @@ export async function fetchFilteredInvoices(
   query: string,
   currentPage: number,
 ) {
+  noStore();
   const offset = (currentPage - 1) * ITEMS_PER_PAGE;
 
   try {
@@ -124,6 +130,7 @@ export async function fetchFilteredInvoices(
 }
 
 export async function fetchInvoicesPages(query: string) {
+  noStore();
   try {
     const count = await sql`SELECT COUNT(*)
     FROM invoices
@@ -187,6 +194,7 @@ export async function fetchCustomers() {
 }
 
 export async function fetchFilteredCustomers(query: string) {
+  noStore();
   try {
     const data = await sql<CustomersTable>`
 		SELECT

app/ui/dashboard/cards.tsx

@@ -5,6 +5,7 @@ import {
   InboxIcon,
 } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
+import { fetchCardData } from '@/app/lib/data';
 
 const iconMap = {
   collected: BanknotesIcon,
@@ -14,18 +15,25 @@ const iconMap = {
 };
 
 export default async function Cards() {
+  const {
+		numberOfInvoices,
+		numberOfCustomers,
+		totalPaidInvoices,
+		totalPendingInvoices,
+	} = await fetchCardData();
+
   return (
     <>
       {/* NOTE: comment in this code when you get to this point in the course */}
 
-      {/* <Card title="Collected" value={totalPaidInvoices} type="collected" />
+      <Card title="Collected" value={totalPaidInvoices} type="collected" />
       <Card title="Pending" value={totalPendingInvoices} type="pending" />
       <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
       <Card
         title="Total Customers"
         value={numberOfCustomers}
         type="customers"
-      /> */}
+      />
     </>
   );
 }

app/ui/dashboard/latest-invoices.tsx

@@ -2,12 +2,9 @@ import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
 import { lusitana } from '@/app/ui/fonts';
-import { LatestInvoice } from '@/app/lib/definitions';
+import { fetchLatestInvoices } from '@/app/lib/data';
-export default async function LatestInvoices({
+export default async function LatestInvoices() {
-  latestInvoices,
+  const latestInvoices = await fetchLatestInvoices();
-}: {
-  latestInvoices: LatestInvoice[];
-}) {
   return (
     <div className="flex w-full flex-col md:col-span-4 lg:col-span-4">
       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
@@ -16,7 +13,7 @@ export default async function LatestInvoices({
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
         {/* NOTE: comment in this code when you get to this point in the course */}
 
-        {/* <div className="bg-white px-6">
+        <div className="bg-white px-6">
           {latestInvoices.map((invoice, i) => {
             return (
               <div
@@ -53,7 +50,7 @@ export default async function LatestInvoices({
               </div>
             );
           })}
-        </div> */}
+        </div>
         <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
           <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>

app/ui/dashboard/revenue-chart.tsx

@@ -1,7 +1,7 @@
 import { generateYAxis } from '@/app/lib/utils';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import { Revenue } from '@/app/lib/definitions';
+import { fetchRevenue } from '@/app/lib/data';
 
 // This component is representational only.
 // For data visualization UI, check out:
@@ -9,19 +9,16 @@ import { Revenue } from '@/app/lib/definitions';
 // https://www.chartjs.org/
 // https://airbnb.io/visx/
 
-export default async function RevenueChart({
+export default async function RevenueChart() {
-  revenue,
+  const revenue = await fetchRevenue();
-}: {
-  revenue: Revenue[];
-}) {
   const chartHeight = 350;
   // NOTE: comment in this code when you get to this point in the course
 
-  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
-  // if (!revenue || revenue.length === 0) {
+  if (!revenue || revenue.length === 0) {
-  //   return <p className="mt-4 text-gray-400">No data available.</p>;
+    return <p className="mt-4 text-gray-400">No data available.</p>;
-  // }
+  }
 
   return (
     <div className="w-full md:col-span-4">
@@ -30,7 +27,7 @@ export default async function RevenueChart({
       </h2>
       {/* NOTE: comment in this code when you get to this point in the course */}
 
-      {/* <div className="rounded-xl bg-gray-50 p-4">
+      <div className="rounded-xl bg-gray-50 p-4">
         <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
           <div
             className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
@@ -59,7 +56,7 @@ export default async function RevenueChart({
           <CalendarIcon className="h-5 w-5 text-gray-500" />
           <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
         </div>
-      </div> */}
+      </div>
     </div>
   );
 }

package.json

@@ -1,34 +1,35 @@
 {
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "build": "next build",
+		"build": "next build",
-    "dev": "next dev",
+		"dev": "next dev",
-    "start": "next start"
+		"start": "next start",
-  },
+		"seed": "node -r dotenv/config ./scripts/seed.js"
-  "dependencies": {
+	},
-    "@heroicons/react": "^2.0.18",
+	"dependencies": {
-    "@tailwindcss/forms": "^0.5.6",
+		"@heroicons/react": "^2.0.18",
-    "@types/node": "20.5.7",
+		"@tailwindcss/forms": "^0.5.6",
-    "@vercel/postgres": "^0.5.0",
+		"@types/node": "20.5.7",
-    "autoprefixer": "10.4.15",
+		"@vercel/postgres": "^0.5.0",
-    "bcrypt": "^5.1.1",
+		"autoprefixer": "10.4.15",
-    "clsx": "^2.0.0",
+		"bcrypt": "^5.1.1",
-    "next": "^14.0.0",
+		"clsx": "^2.0.0",
-    "postcss": "8.4.31",
+		"next": "^14.0.0",
-    "react": "18.2.0",
+		"postcss": "8.4.31",
-    "react-dom": "18.2.0",
+		"react": "18.2.0",
-    "tailwindcss": "3.3.3",
+		"react-dom": "18.2.0",
-    "typescript": "5.2.2",
+		"tailwindcss": "3.3.3",
-    "zod": "^3.22.2"
+		"typescript": "5.2.2",
-  },
+		"zod": "^3.22.2"
-  "devDependencies": {
+	},
-    "@types/bcrypt": "^5.0.1",
+	"devDependencies": {
-    "@types/react": "18.2.21",
+		"@types/bcrypt": "^5.0.1",
-    "@types/react-dom": "18.2.14",
+		"@types/react": "18.2.21",
-    "dotenv": "^16.3.1",
+		"@types/react-dom": "18.2.14",
-    "prettier": "^3.0.3"
+		"dotenv": "^16.3.1",
-  },
+		"prettier": "^3.0.3"
-  "engines": {
+	},
-    "node": ">=18"
+	"engines": {
-  }
+		"node": ">=18"
-}
+	}
+}