src/components/order_table.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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>
  );
}