Index: nextjs-dashboard/app/dashboard/page.tsx
===================================================================
--- nextjs-dashboard/app/dashboard/page.tsx	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/app/dashboard/page.tsx	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -1,3 +1,37 @@
-export default function Page() {
-    return <p>Dashboard Page</p>;
+import { Card } 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 {
+    fetchCardData,
+    fetchRevenue,
+    fetchLatestInvoices
+} from '@/app/lib/data';
+
+export default async function Page() {
+    const {
+        totalPaidInvoices,
+        totalPendingInvoices,
+        numberOfInvoices,
+        numberOfCustomers
+    } = await fetchCardData();
+    const revenue = await fetchRevenue();
+    const latestInvoices = await fetchLatestInvoices();
+    return (
+        <main>
+            <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+                Dashboard
+            </h1>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                <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" />
+            </div>
+            <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
+                <RevenueChart revenue={revenue} />
+                <LatestInvoices latestInvoices={latestInvoices} />
+            </div>
+        </main>
+    );
 }
Index: nextjs-dashboard/app/lib/data.ts
===================================================================
--- nextjs-dashboard/app/lib/data.ts	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/app/lib/data.ts	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -14,13 +14,5 @@
 export async function fetchRevenue() {
   try {
-    // Artificially delay a response for demo purposes.
-    // Don't do this in production :)
-
-    // console.log('Fetching revenue data...');
-    // await new Promise((resolve) => setTimeout(resolve, 3000));
-
     const data = await sql<Revenue[]>`SELECT * FROM revenue`;
-
-    // console.log('Data fetch completed after 3 seconds.');
 
     return data;
Index: nextjs-dashboard/app/query/route.ts
===================================================================
--- nextjs-dashboard/app/query/route.ts	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/app/query/route.ts	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -1,26 +1,22 @@
-// import postgres from 'postgres';
+import postgres from 'postgres';
 
-// const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
+const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
 
-// async function listInvoices() {
-// 	const data = await sql`
-//     SELECT invoices.amount, customers.name
-//     FROM invoices
-//     JOIN customers ON invoices.customer_id = customers.id
-//     WHERE invoices.amount = 666;
-//   `;
+async function listInvoices() {
+  const data = await sql`
+    SELECT invoices.amount, customers.name
+    FROM invoices
+    JOIN customers ON invoices.customer_id = customers.id
+    WHERE invoices.amount = 666;
+  `;
 
-// 	return data;
-// }
+  return data;
+}
 
 export async function GET() {
-  return Response.json({
-    message:
-      'Uncomment this file and remove this line. You can delete this file when you are finished.',
-  });
-  // try {
-  // 	return Response.json(await listInvoices());
-  // } catch (error) {
-  // 	return Response.json({ error }, { status: 500 });
-  // }
+  try {
+    return Response.json(await listInvoices());
+  } catch (error) {
+    return Response.json({ error }, { status: 500 });
+  }
 }
Index: nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx
===================================================================
--- nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -15,7 +15,6 @@
       </h2>
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
-        {/* NOTE: Uncomment this code in Chapter 7 */}
 
-        {/* <div className="bg-white px-6">
+        <div className="bg-white px-6">
           {latestInvoices.map((invoice, i) => {
             return (
@@ -54,5 +53,5 @@
             );
           })}
-        </div> */}
+        </div>
         <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
Index: nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx
===================================================================
--- nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -16,11 +16,10 @@
 }) {
   const chartHeight = 350;
-  // NOTE: Uncomment this code in Chapter 7
 
-  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
-  // if (!revenue || revenue.length === 0) {
-  //   return <p className="mt-4 text-gray-400">No data available.</p>;
-  // }
+  if (!revenue || revenue.length === 0) {
+    return <p className="mt-4 text-gray-400">No data available.</p>;
+  }
 
   return (
@@ -29,7 +28,6 @@
         Recent Revenue
       </h2>
-      {/* NOTE: Uncomment this code in Chapter 7 */}
 
-      {/* <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
@@ -60,5 +58,5 @@
           <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
         </div>
-      </div> */}
+      </div>
     </div>
   );
Index: nextjs-dashboard/tsconfig.json
===================================================================
--- nextjs-dashboard/tsconfig.json	(revision 23ae94401a6d46b4a7ef83fa90f9d6df9db51d7b)
+++ nextjs-dashboard/tsconfig.json	(revision ffbbf389e1d1d5cf4f5e4cb78738a2c45f41733e)
@@ -2,5 +2,9 @@
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
@@ -12,5 +16,5 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
@@ -21,5 +25,7 @@
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
@@ -33,4 +39,6 @@
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }