Chapter 7 - fetch data from server

app/dashboard/page.tsx

@@ -1,3 +1,39 @@
-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 { fetchRevenue, fetchLatestInvoices, fetchCardData} from "@/app/lib/data";
+
+export default async function Page() {
+
+    const revenue = await fetchRevenue();
+    const latestInvoices = await fetchLatestInvoices();
+
+    const {
+        numberOfInvoices,
+        numberOfCustomers,
+        totalPaidInvoices,
+        totalPendingInvoices,
+    } = await fetchCardData();
+    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>
+    );
 }

app/ui/dashboard/latest-invoices.tsx

@@ -16,7 +16,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 +53,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

@@ -17,11 +17,11 @@ export default async function RevenueChart({
   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) {
-  //   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 (
     <div className="w-full md:col-span-4">
@@ -30,7 +30,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 +59,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-lock.json

@@ -1534,12 +1534,12 @@
       "dev": true
     },
     "node_modules/@vercel/postgres": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.0.tgz",
-      "integrity": "sha512-MFWp9SZmADqBe2x2mzEvwmGLiwOd8PVkUxYeBZx/RqdHl0bd8/1BH0zBR+zSimGyi9P/MVtZoJLdf5dkWw9m5Q==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.1.tgz",
+      "integrity": "sha512-JKl8QOBIDnifhkxAhIKtY0A5Tb8oWBf2nzZhm0OH7Ffjsl0hGVnDL2w1/FCfpX8xna3JAWM034NGuhZfTFdmiw==",
       "dependencies": {
         "@neondatabase/serverless": "0.6.0",
-        "bufferutil": "4.0.7",
+        "bufferutil": "4.0.8",
         "utf-8-validate": "6.0.3",
         "ws": "8.14.2"
       },
@@ -2037,9 +2037,9 @@
       }
     },
     "node_modules/bufferutil": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
-      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
       "hasInstallScript": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"

package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
-    "start": "next start"
+    "start": "next start",
+    "seed": "node -r dotenv/config ./scripts/seed.js"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",