diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx deleted file mode 100644 index 30de135..0000000 --- a/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Page() { - return
Individual Invoice Page
; -} diff --git a/dashboard/15-final/app/lib/calculations.tsx b/dashboard/15-final/app/lib/calculations.tsx index 34ab6dc..a31aef9 100644 --- a/dashboard/15-final/app/lib/calculations.tsx +++ b/dashboard/15-final/app/lib/calculations.tsx @@ -1,6 +1,6 @@ import { Invoice, Revenue } from "./definitions"; -export const calculateInvoices = ( +export const calculateAllInvoices = ( invoices: Invoice[], status: "pending" | "paid", ) => { @@ -13,11 +13,34 @@ export const calculateInvoices = ( }); }; +export const calculateCustomerInvoices = ( + invoices: Invoice[], + status: "pending" | "paid", + customerId: number, +) => { + return invoices + .filter((invoice) => invoice.customerId === customerId) + .filter((invoice) => !status || invoice.status === status) + .reduce((total, invoice) => total + invoice.amount / 100, 0) + .toLocaleString("en-US", { + style: "currency", + currency: "USD", + }); +}; + // Once a database is connected, we can use SQL to query the database directly // This will be more efficient than querying all invoices and then filtering them // E.g. "SELECT * FROM invoices // ORDER BY date DESC // LIMIT 5;" + +export const countCustomerInvoices = ( + invoices: Invoice[], + customerId: number, +) => { + return invoices.filter((invoice) => invoice.customerId === customerId).length; +}; + export const findLatestInvoices = (invoices: Invoice[]) => { return [...invoices] .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) diff --git a/dashboard/15-final/app/lib/dummy-data.tsx b/dashboard/15-final/app/lib/dummy-data.tsx index 40b6887..933a940 100644 --- a/dashboard/15-final/app/lib/dummy-data.tsx +++ b/dashboard/15-final/app/lib/dummy-data.tsx @@ -84,6 +84,13 @@ export const invoices: Invoice[] = [ id: 7, customerId: 3, amount: 8945, + status: "pending", + date: "2023-06-01", + }, + { + id: 8, + customerId: 4, + amount: 32545, status: "paid", date: "2023-06-01", }, diff --git a/dashboard/15-final/app/ui/customers/table.tsx b/dashboard/15-final/app/ui/customers/table.tsx index eff06ba..ceb36ff 100644 --- a/dashboard/15-final/app/ui/customers/table.tsx +++ b/dashboard/15-final/app/ui/customers/table.tsx @@ -1,13 +1,10 @@ import { customers, invoices } from "@/app/lib/dummy-data"; -import Image from "next/image"; +import { + countCustomerInvoices, + calculateCustomerInvoices, +} from "@/app/lib/calculations"; export default function CustomersTable() { - function totalInvoices(customerId: number) { - const customerInvoices = invoices.filter((invoice) => { - return invoice.customerId === customerId - }); - return customerInvoices.length; - }; return (
@@ -15,7 +12,7 @@ export default function CustomersTable() {
-
+
@@ -31,19 +28,25 @@ export default function CustomersTable() { + + {customers.map((customer) => ( - + + ))} diff --git a/dashboard/15-final/app/ui/dashboard/overview.tsx b/dashboard/15-final/app/ui/dashboard/overview.tsx index 8ff64e0..173005b 100644 --- a/dashboard/15-final/app/ui/dashboard/overview.tsx +++ b/dashboard/15-final/app/ui/dashboard/overview.tsx @@ -1,12 +1,12 @@ import Card from "@/app/ui/dashboard/card"; import { invoices, customers, revenue } from "@/app/lib/dummy-data"; -import { calculateInvoices } from "@/app/lib/calculations"; +import { calculateAllInvoices } from "@/app/lib/calculations"; import RevenueChart from "@/app/ui/dashboard/revenue-chart"; import LatestInvoices from "@/app/ui/dashboard/latest-invoices"; export default function DashboardOverview() { - const totalPaidInvoices = calculateInvoices(invoices, "paid"); - const totalPendingInvoices = calculateInvoices(invoices, "pending"); + const totalPaidInvoices = calculateAllInvoices(invoices, "paid"); + const totalPendingInvoices = calculateAllInvoices(invoices, "pending"); const numberOfInvoices = invoices.length; const numberOfCustomers = customers.length; diff --git a/dashboard/15-final/app/ui/invoices/table.tsx b/dashboard/15-final/app/ui/invoices/table.tsx index 466b48e..b7fcac5 100644 --- a/dashboard/15-final/app/ui/invoices/table.tsx +++ b/dashboard/15-final/app/ui/invoices/table.tsx @@ -72,9 +72,6 @@ export default function InvoicesTable() { - {/* */} @@ -116,14 +113,6 @@ export default function InvoicesTable() { - {/* */} ))}
Total Invoices + Total Pending + + Total Paid +
-
- {customer.name} -
+
+
+ {customer.name} +
{customer.name} @@ -52,7 +55,17 @@ export default function CustomersTable() { {customer.email} - {totalInvoices(customer.id)} + {countCustomerInvoices(invoices, customer.id)} + + {calculateCustomerInvoices( + invoices, + "pending", + customer.id, + )} + + {calculateCustomerInvoices(invoices, "paid", customer.id)}
Edit - View -
- - View, {invoice.id} - -