Could not find the requested invoice.
+ + Go Back + ++ 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/app/ui/dashboard/revenue-chart.tsx b/app/ui/dashboard/revenue-chart.tsx new file mode 100644 index 0000000..138a2f3 --- /dev/null +++ b/app/ui/dashboard/revenue-chart.tsx @@ -0,0 +1,61 @@ +import { generateYAxis } from '@/app/lib/utils'; +import { CalendarIcon } from '@heroicons/react/24/outline'; +import { lusitana } from '@/app/ui/fonts'; +import {fetchRevenue} from "@/app/lib/data"; + +// 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() { + const revenue = await fetchRevenue(); + + const chartHeight = 350; + 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 + | +
|---|