Add customer table UI (#142)

* add customers table

* remove unused imports

* fix width issue for prof image in small screens

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>
+  )
 }

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>
   );
 }

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>
+  );
+}

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;