Hint 1: Everything required to make this page is in the given doc
+Hint 2: A part of this is already mode for you, just waiting to be found in the pile of UI elements...
+ +Hint 1: Everything required to make this page is in the given doc
-Hint 2: A part of this is already mode for you, just waiting to be found in the pile of UI elements...
- -Customers Page
; +} diff --git a/acme-dashboard/app/dashboard/invoices/page.tsx b/acme-dashboard/app/dashboard/invoices/page.tsx new file mode 100644 index 0000000..0da204d --- /dev/null +++ b/acme-dashboard/app/dashboard/invoices/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + returnInvoices Page
; +} diff --git a/acme-dashboard/app/dashboard/layout.tsx b/acme-dashboard/app/dashboard/layout.tsx new file mode 100644 index 0000000..00539c6 --- /dev/null +++ b/acme-dashboard/app/dashboard/layout.tsx @@ -0,0 +1,12 @@ +import SideNav from "@/app/ui/dashboard/sidenav"; + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +Dashboard Page
; +} diff --git a/acme-dashboard/app/layout.tsx b/acme-dashboard/app/layout.tsx new file mode 100644 index 0000000..69db649 --- /dev/null +++ b/acme-dashboard/app/layout.tsx @@ -0,0 +1,14 @@ +import "@/app/ui/global.css"; +import { inter } from "./ui/fonts"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/acme-dashboard/app/lib/data.ts b/acme-dashboard/app/lib/data.ts new file mode 100644 index 0000000..edb4964 --- /dev/null +++ b/acme-dashboard/app/lib/data.ts @@ -0,0 +1,217 @@ +import { sql } from '@vercel/postgres'; +import { + CustomerField, + CustomersTableType, + InvoiceForm, + InvoicesTable, + LatestInvoiceRaw, + Revenue, +} from './definitions'; +import { formatCurrency } from './utils'; + +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+ Welcome to Acme. This is the example for the{" "} + + Next.js Learn Course + + , brought to you by Vercel. +
+ + Log inAcme
+{customer.name}
++ {customer.email} +
+Pending
+{customer.total_pending}
+Paid
+{customer.total_paid}
+{customer.total_invoices} invoices
+| + Name + | ++ Email + | ++ Total Invoices + | ++ Total Pending + | ++ Total Paid + | +
|---|---|---|---|---|
|
+
+
+ {customer.name} + |
+ + {customer.email} + | ++ {customer.total_invoices} + | ++ {customer.total_pending} + | ++ {customer.total_paid} + | +
+ {value} +
++ {invoice.name} +
++ {invoice.email} +
++ {invoice.amount} +
+{link.name}
+ + ); + })} + + ); +} diff --git a/acme-dashboard/app/ui/dashboard/revenue-chart.tsx b/acme-dashboard/app/ui/dashboard/revenue-chart.tsx new file mode 100644 index 0000000..f19e698 --- /dev/null +++ b/acme-dashboard/app/ui/dashboard/revenue-chart.tsx @@ -0,0 +1,65 @@ +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'; + +// This component is representational only. +// For data visualization UI, check out: +// https://www.tremor.so/ +// https://www.chartjs.org/ +// https://airbnb.io/visx/ + +export default async function RevenueChart({ + revenue, +}: { + revenue: Revenue[]; +}) { + const chartHeight = 350; + // NOTE: Uncomment this code in Chapter 7 + + // const { yAxisLabels, topLabel } = generateYAxis(revenue); + + // if (!revenue || revenue.length === 0) { + // returnNo data available.
; + // } + + return ( +{label}
+ ))} ++ {month.month} +
+{invoice.name}
+{invoice.email}
++ {formatCurrency(invoice.amount)} +
+{formatDateToLocal(invoice.date)}
+| + Customer + | ++ Email + | ++ Amount + | ++ Date + | ++ Status + | ++ Edit + | +
|---|---|---|---|---|---|
|
+
+
+ {invoice.name} + |
+ + {invoice.email} + | ++ {formatCurrency(invoice.amount)} + | ++ {formatDateToLocal(invoice.date)} + | +
+ |
+
+
+
+ |
+
| + Customer + | ++ Email + | ++ Amount + | ++ Date + | ++ Status + | ++ Edit + | +
|---|