From 5225fc3b54ebee97e62bd0dcf8a20ca3ff7b6975 Mon Sep 17 00:00:00 2001
From: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
Date: Fri, 1 Sep 2023 08:49:59 -0500
Subject: [PATCH] Add table component (#132)

* add table compoennt

* format

* format

* change table type to be a card

* update table header and link

* update layout and table width

* Update dashboard/15-final/app/ui/table.tsx

---------

Co-authored-by: Delba de Oliveira <delbabrown@gmail.com>
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
---
 .../15-final/app/dashboard/invoices/page.tsx  |  8 ++-
 dashboard/15-final/app/dashboard/layout.tsx   |  2 +-
 dashboard/15-final/app/lib/definitions.tsx    |  1 +
 dashboard/15-final/app/lib/dummy-data.tsx     |  4 ++
 dashboard/15-final/app/ui/table.tsx           | 70 +++++++++++++++++++
 5 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 dashboard/15-final/app/ui/table.tsx

diff --git a/dashboard/15-final/app/dashboard/invoices/page.tsx b/dashboard/15-final/app/dashboard/invoices/page.tsx
index 403df46..dc34ed8 100644
--- a/dashboard/15-final/app/dashboard/invoices/page.tsx
+++ b/dashboard/15-final/app/dashboard/invoices/page.tsx
@@ -1,3 +1,9 @@
+import Table from "@/app/ui/table";
+
 export default function Page() {
-  return <div>List of invoices</div>
+  return (
+    <div>
+      <Table />
+    </div>
+  )
 }
diff --git a/dashboard/15-final/app/dashboard/layout.tsx b/dashboard/15-final/app/dashboard/layout.tsx
index 12c6697..97baef4 100644
--- a/dashboard/15-final/app/dashboard/layout.tsx
+++ b/dashboard/15-final/app/dashboard/layout.tsx
@@ -11,4 +11,4 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/dashboard/15-final/app/lib/definitions.tsx b/dashboard/15-final/app/lib/definitions.tsx
index 5618fff..95c633a 100644
--- a/dashboard/15-final/app/lib/definitions.tsx
+++ b/dashboard/15-final/app/lib/definitions.tsx
@@ -18,6 +18,7 @@ export type Invoice = {
   id: number
   customerId: number
   amount: number
+  date: string
   status: "pending" | "paid" // In TypeScript, this is called a string union type.
   // It means that the "status" property can only be one of the two strings.
 }
diff --git a/dashboard/15-final/app/lib/dummy-data.tsx b/dashboard/15-final/app/lib/dummy-data.tsx
index 5be5b0b..bf83355 100644
--- a/dashboard/15-final/app/lib/dummy-data.tsx
+++ b/dashboard/15-final/app/lib/dummy-data.tsx
@@ -38,24 +38,28 @@ export const invoices: Invoice[] = [
     id: 1,
     customerId: 1,
     amount: 15795,
+    date: "2021-01-01",
     status: "pending",
   },
   {
     id: 2,
     customerId: 2,
     amount: 20348,
+    date: "2021-02-01",
     status: "pending",
   },
   {
     id: 3,
     customerId: 3,
     amount: 3040,
+    date: "2021-03-01",
     status: "paid",
   },
   {
     id: 4,
     customerId: 4,
     amount: 44800,
+    date: "2021-04-01",
     status: "paid",
   },
 ];
diff --git a/dashboard/15-final/app/ui/table.tsx b/dashboard/15-final/app/ui/table.tsx
new file mode 100644
index 0000000..80e80fb
--- /dev/null
+++ b/dashboard/15-final/app/ui/table.tsx
@@ -0,0 +1,70 @@
+import {invoices, customers} from "../lib/dummy-data";
+import Link from "next/link";
+
+export default function Example() {
+  function getNameById(customerId: number) {
+    const customerName = customers.find(customer => customer.id === customerId);
+    return customerName ? customerName.name : null;
+  }
+  return (
+    <div className="w-full">
+      <div className="w-full flex items-center justify-between">
+        <h1 className="text-base font-semibold text-gray-900">Invoices</h1>
+        <Link
+          href="/dashboard/invoices/create"
+          className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          Add Invoice
+        </Link>
+      </div>
+      <div className="mt-8">
+        <div className="overflow-x-auto">
+          <div className="overflow-hidden border rounded-md">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                    ID
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    Customer Name
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    Amount
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    Status
+                  </th>
+                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    Date
+                  </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 bg-white">
+                {invoices.map((invoice) => (
+                  <tr key={invoice.id}>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                      {invoice.id}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{getNameById(invoice.customerId)}</td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{(invoice.amount / 100).toLocaleString("en-US", {style: "currency", currency: "USD"})}</td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.status}</td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.date}</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-indigo-600 hover:text-indigo-900">
+                        View<span className="sr-only">, {invoice.id}</span>
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}