Implement new table component (#136)

* add table compoennt

* format

* format

* change table type to be a card

* update table header and link

* update layout and table width

* edit table

* fix layout overflow issue with table

* fix mege issue with dummy data

* make only content portion scrollable

* increase w of side nav in mobile

* remove duplicate date key

---------

Co-authored-by: Delba de Oliveira <[email protected]>

Author: StephDietz

dashboard/15-final/app/dashboard/layout.tsx

@@ -3,9 +3,11 @@ import SideNav from "../ui/dashboard-sidenav";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-screen">
-      <SideNav />
-      <div className="w-full">
+    <div className="flex h-screen overflow-hidden">
+      <div className="w-14 md:w-64">
+        <SideNav />
+      </div>
+      <div className="flex-grow overflow-y-auto">
         <TopNav />
         <div className="p-4 sm:p-10 md:p-20">{children}</div>
       </div>

dashboard/15-final/app/ui/dashboard-sidenav.tsx

@@ -22,7 +22,7 @@ export default function SideNav() {
   ];
 
   return (
-    <div className="flex h-full w-12 flex-col border-r p-1 md:w-72 md:p-4">
+    <div className="flex h-full w-full flex-col border-r p-1 md:p-4">
       <Link href="/">
         <Image
           priority

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

@@ -6,20 +6,21 @@ export default function Example() {
     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"
+          className="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
         >
           Add Invoice
         </Link>
       </div>
       <div className="mt-8">
         <div className="overflow-x-auto">
-          <div className="overflow-hidden border rounded-md">
+          <div className="border rounded-md">
             <table className="min-w-full divide-y divide-gray-300">
               <thead className="bg-gray-50">
                 <tr>
@@ -50,11 +51,11 @@ export default function Example() {
                       {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.amount.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">
+                      <Link href={`/dashboard/invoices/${invoice.id}`} className="text-blue-600 hover:text-blue-900">
                         View<span className="sr-only">, {invoice.id}</span>
                       </Link>
                     </td>
@@ -68,3 +69,7 @@ export default function Example() {
     </div>
   )
 }
+
+
+
+