Añade historial de órdenes

4 files changed, 59 insertions, 4 deletions

diff --git a/src/components/forms/login_form.tsx b/src/components/forms/login_form.tsx
index 44c3da5..b1a2296 100644
--- a/src/components/forms/login_form.tsx
+++ b/src/components/forms/login_form.tsx
@@ -7,9 +7,8 @@ import "../stylesheets/shared.css"
 
 export function LoginForm() {
   const [error_message, setErrorMessage] = useState('');
-  // const [modal, setModal] = useState(new Modal());
 
-  // Error rendering useEffecT
+  // Error rendering useEffect
   useEffect(() => {
     document.getElementById("errorMessage").innerHTML = error_message;
   }, [error_message]);
diff --git a/src/components/order_table.tsx b/src/components/order_table.tsx
new file mode 100644
index 0000000..207b3e4
--- /dev/null
+++ b/src/components/order_table.tsx
@@ -0,0 +1,56 @@
+import Order from "../models/order";
+import "./stylesheets/shared.css";
+
+function getRows(orders: Array<Order>) {
+  const rows = orders.map(order => (
+    <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+      <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        {order.id}
+      </td>
+      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        {order.public_id}
+      </td>
+      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        {order.created_at.toLocaleString().split('T')[0]}
+      </td>
+      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        {order.total}
+      </td>
+    </tr>
+  ));
+
+  return rows;
+}
+
+export default function OrderTable({ orders }) {
+  const rows = getRows(orders);
+
+  return(
+    <div className="my-4 w-4/5 relative overflow-x-auto">
+      <h1 className="text-2xl my-2">
+        Historial de órdenes
+      </h1>
+      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" className="px-6 py-3">
+            Número de orden
+          </th>
+          <th scope="col" className="px-6 py-3">
+            Identificador
+          </th>
+          <th scope="col" className="px-6 py-3">
+            Fecha
+          </th>
+          <th scope="col" className="px-6 py-3">
+            Total
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/product_cart.tsx b/src/components/product_cart.tsx
index 4e78d1a..14710d1 100644
--- a/src/components/product_cart.tsx
+++ b/src/components/product_cart.tsx
@@ -3,7 +3,7 @@ import "./stylesheets/product_listing.css";
 
 export default function ProductCart({ product }) {
   return (
-    <div className="my-2 w-3/6 grid grid-cols-2 gap-2 border-2 border-gray-300">
+    <div className="my-2 grid grid-cols-2 gap-2 border-2 border-gray-300">
       <div>
         <img className="listing-image" src={product.picture} />
       </div>
diff --git a/src/components/user_account_dropdown_menu.tsx b/src/components/user_account_dropdown_menu.tsx
index b70aa4e..495f3c8 100644
--- a/src/components/user_account_dropdown_menu.tsx
+++ b/src/components/user_account_dropdown_menu.tsx
@@ -10,7 +10,7 @@ export default function UserAccountDropdownMenu() {
         </li>
         <li className="flex">
           <i className="px-1 my-2"><CardList size={16} color="#394490"/></i>
-          <a href="#" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Historial de pedidos</a>
+          <a href="/account/orders" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Historial de órdenes</a>
         </li>
       </ul>
       <div className="flex py-2">