+ );
}
\ No newline at end of file
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
deleted file mode 100644
index ce2d55a7..00000000
--- a/app/dashboard/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page() {
- return
Dashboard Page
;
-}
\ No newline at end of file
diff --git a/app/lib/data.ts b/app/lib/data.ts
index 94b4180c..31e1a0ac 100644
--- a/app/lib/data.ts
+++ b/app/lib/data.ts
@@ -18,12 +18,12 @@ export async function fetchRevenue() {
// Artificially delay a reponse for demo purposes.
// Don't do this in real life :)
- // console.log('Fetching revenue data...');
- // await new Promise((resolve) => setTimeout(resolve, 3000));
+ console.log('Fetching revenue data...');
+ await new Promise((resolve) => setTimeout(resolve, 3000));
const data = sql`SELECT * FROM revenue`;
- // console.log('Data fetch complete after 3 seconds.');
+ console.log('Data fetch complete after 3 seconds.');
return data;
} catch (error) {
@@ -162,6 +162,7 @@ export async function fetchInvoiceById(id: string) {
amount: invoice.amount / 100,
}));
+ console.log(invoice); // Invoice is an empty array []
return invoice[0];
} catch (error) {
console.error('Database Error:', error);
diff --git a/app/ui/dashboard/cards.tsx b/app/ui/dashboard/cards.tsx
index bbd3a867..65358ae3 100644
--- a/app/ui/dashboard/cards.tsx
+++ b/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,
@@ -13,19 +14,24 @@ const iconMap = {
invoices: InboxIcon,
};
-export default async function Cards() {
+export default async function CardWrapper() {
+ const {
+ numberOfInvoices,
+ numberOfCustomers,
+ totalPaidInvoices,
+ totalPendingInvoices,
+ } = await fetchCardData();
+
return (
<>
- {/* NOTE: comment in this code when you get to this point in the course */}
-
- {/*
+ */}
+ />
);
}
diff --git a/app/ui/dashboard/latest-invoices.tsx b/app/ui/dashboard/latest-invoices.tsx
index caca7a38..da5b3de6 100644
--- a/app/ui/dashboard/latest-invoices.tsx
+++ b/app/ui/dashboard/latest-invoices.tsx
@@ -3,11 +3,11 @@ import clsx from 'clsx';
import Image from 'next/image';
import { lusitana } from '@/app/ui/fonts';
import { LatestInvoice } from '@/app/lib/definitions';
-export default async function LatestInvoices({
- latestInvoices,
-}: {
- latestInvoices: LatestInvoice[];
-}) {
+import { fetchLatestInvoices } from '@/app/lib/data';
+
+export default async function LatestInvoices() { // Remove props
+ const latestInvoices = await fetchLatestInvoices();
+
return (
@@ -16,7 +16,7 @@ export default async function LatestInvoices({
{/* NOTE: comment in this code when you get to this point in the course */}
- {/*
+ {
{latestInvoices.map((invoice, i) => {
return (
);
})}
-
*/}
+
}
Updated just now
diff --git a/app/ui/dashboard/revenue-chart.tsx b/app/ui/dashboard/revenue-chart.tsx
index 7ccc409a..baf0c627 100644
--- a/app/ui/dashboard/revenue-chart.tsx
+++ b/app/ui/dashboard/revenue-chart.tsx
@@ -2,6 +2,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 +10,17 @@ import { Revenue } from '@/app/lib/definitions';
// https://www.chartjs.org/
// https://airbnb.io/visx/
-export default async function RevenueChart({
- revenue,
-}: {
- revenue: Revenue[];
-}) {
+export default async function RevenueChart() { // Make component async, remove the props
+ const revenue = await fetchRevenue(); // Fetch data inside the component
+
const chartHeight = 350;
- // NOTE: comment in this code when you get to this point in the course
+ //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