From 482f4bf04202e04ea9618638d81753612dac278c Mon Sep 17 00:00:00 2001
From: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
Date: Wed, 6 Sep 2023 07:06:56 -0500
Subject: [PATCH] Add customer table UI (#142)

* add customers table

* remove unused imports

* fix width issue for prof image in small screens
---
 .../15-final/app/dashboard/customers/page.tsx |  8 ++-
 .../15-final/app/dashboard/invoices/page.tsx  |  4 +-
 dashboard/15-final/app/ui/customers/table.tsx | 66 +++++++++++++++++++
 dashboard/15-final/app/ui/invoices/table.tsx  |  3 +-
 4 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 dashboard/15-final/app/ui/customers/table.tsx

diff --git a/dashboard/15-final/app/dashboard/customers/page.tsx b/dashboard/15-final/app/dashboard/customers/page.tsx
index ff5a46d..cfffe27 100644
--- a/dashboard/15-final/app/dashboard/customers/page.tsx
+++ b/dashboard/15-final/app/dashboard/customers/page.tsx
@@ -1,3 +1,9 @@
+import CustomersTable from "@/app/ui/customers/table";
+
 export default function Page() {
-  return <div>List of customers</div>
+  return (
+    <div>
+      <CustomersTable />
+    </div>
+  )
 }
diff --git a/dashboard/15-final/app/dashboard/invoices/page.tsx b/dashboard/15-final/app/dashboard/invoices/page.tsx
index 695f8b6..393ab7d 100644
--- a/dashboard/15-final/app/dashboard/invoices/page.tsx
+++ b/dashboard/15-final/app/dashboard/invoices/page.tsx
@@ -1,9 +1,9 @@
-import Table from "@/app/ui/invoices/table";
+import InvoicesTable from "@/app/ui/invoices/table";
 
 export default function Page() {
   return (
     <div>
-      <Table />
+      <InvoicesTable />
     </div>
   );
 }
diff --git a/dashboard/15-final/app/ui/customers/table.tsx b/dashboard/15-final/app/ui/customers/table.tsx
new file mode 100644
index 0000000..eff06ba
--- /dev/null
+++ b/dashboard/15-final/app/ui/customers/table.tsx
@@ -0,0 +1,66 @@
+import { customers, invoices } from "@/app/lib/dummy-data";
+import Image from "next/image";
+
+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">
+        <h1 className="text-base font-semibold">Customers</h1>
+      </div>
+      <div className="mt-8">
+        <div className="overflow-x-auto">
+          <div className="rounded-md border">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead className="bg-gray-50 text-left text-sm">
+                <tr>
+                  <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                    <span className="sr-only">Profile</span>
+                  </th>
+                  <th scope="col" className="px-3.5 py-3.5  sm:pl-6">
+                    Name
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 font-semibold">
+                    Email
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 font-semibold">
+                    Total Invoices
+                  </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>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
+                      {customer.name}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm">
+                      {customer.email}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm">
+                      {totalInvoices(customer.id)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/15-final/app/ui/invoices/table.tsx b/dashboard/15-final/app/ui/invoices/table.tsx
index 53964bb..e9f8c33 100644
--- a/dashboard/15-final/app/ui/invoices/table.tsx
+++ b/dashboard/15-final/app/ui/invoices/table.tsx
@@ -1,5 +1,6 @@
 import { invoices, customers } from "@/app/lib/dummy-data";
 import { Customer } from "@/app/lib/definitions";
+
 import Link from "next/link";
 import {
   PencilSquareIcon,
@@ -26,7 +27,7 @@ function renderInvoiceStatus(status: string) {
   }
 }
 
-export default function Table() {
+export default function InvoicesTable() {
   function getCustomerById(customerId: number): Customer | null {
     const customer = customers.find((customer) => customer.id === customerId);
     return customer ? customer : null;