Add total paid/pending columns to customer table (#145)

* Delete individual invoice pages

* Add pending / paid totals to customer table

* Misc

dashboard/15-final/app/dashboard/invoices/[id]/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <div>Individual Invoice Page</div>;
-}

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())

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",
   },

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 (
     <div className="w-full">
       <div className="flex w-full items-center justify-between">
@@ -15,7 +12,7 @@ export default function CustomersTable() {
       </div>
       <div className="mt-8">
         <div className="overflow-x-auto">
-          <div className="rounded-md border">
+          <div className="overflow-hidden rounded-md border">
             <table className="min-w-full divide-y divide-gray-300">
               <thead className="bg-gray-50 text-left text-sm">
                 <tr>
@@ -31,19 +28,25 @@ export default function CustomersTable() {
                   <th scope="col" className="px-3 py-3.5 font-semibold">
                     Total Invoices
                   </th>
+                  <th scope="col" className="px-3 py-3.5 font-semibold">
+                    Total Pending
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 font-semibold">
+                    Total Paid
+                  </th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 bg-white text-gray-500">
                 {customers.map((customer) => (
                   <tr key={customer.id}>
-                     <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
-                        <div className="flex w-7 flex-none items-center">
-                          <img
-                            src={customer.imageUrl}
-                            alt={customer.name}
-                            className="h-7 w-full flex-none rounded-full"
-                          />
-                        </div>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
+                      <div className="flex w-7 flex-none items-center">
+                        <img
+                          src={customer.imageUrl}
+                          alt={customer.name}
+                          className="h-7 w-full flex-none rounded-full"
+                        />
+                      </div>
                     </td>
                     <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
                       {customer.name}
@@ -52,7 +55,17 @@ export default function CustomersTable() {
                       {customer.email}
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-sm">
-                      {totalInvoices(customer.id)}
+                      {countCustomerInvoices(invoices, customer.id)}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm">
+                      {calculateCustomerInvoices(
+                        invoices,
+                        "pending",
+                        customer.id,
+                      )}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm">
+                      {calculateCustomerInvoices(invoices, "paid", customer.id)}
                     </td>
                   </tr>
                 ))}

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;
 

dashboard/15-final/app/ui/invoices/table.tsx

@@ -72,9 +72,6 @@ export default function InvoicesTable() {
                   <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
                     <span className="sr-only">Edit</span>
                   </th>
-                  {/* <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
-                    <span className="sr-only">View</span>
-                  </th> */}
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 text-gray-500">
@@ -116,14 +113,6 @@ export default function InvoicesTable() {
                       </Link>
                       <DeleteInvoice id={invoice.id} />
                     </td>
-                    {/* <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                      <Link
-                        href={`/dashboard/invoices/${invoice.id}`}
-                        className="text-blue-600 hover:text-blue-900"
-                      >
-                        View<span className="sr-only">, {invoice.id}</span>
-                      </Link>
-                    </td> */}
                   </tr>
                 ))}
               </tbody>