✨ Start log view with orders & transactions

frontend/src/features/log/Log.module.css

@@ -0,0 +1,5 @@
+.log {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}

frontend/src/features/log/Log.tsx

@@ -0,0 +1,73 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+
+import { Order, OrderLine, OrderListDocument, Transaction, TransactionListDocument } from "../../types";
+import styles from "./Log.module.css";
+
+export const Log = () => {
+  const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument);
+  const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument);
+  const loading = ordersLoading || transactionsLoading;
+
+  if (loading) return <div>Loading...</div>;
+
+  const { orderList: orders } = ordersData;
+  const { transactionList: transactions } = transactionsData;
+
+  return (
+    <div className={styles.log}>
+      <div>
+        <h2>Ordre</h2>
+        <table className="table">
+          <thead>
+            <tr>
+              <th scope="col">Når</th>
+              <th scope="col">Hvem</th>
+              <th scope="col">Hva</th>
+              <th scope="col">Sum</th>
+            </tr>
+          </thead>
+          <tbody>
+            {orders.map((order: Order) => (
+              <tr key={order.id}>
+                <td>{order.created}</td>
+                <td>{order.isExternal ? "Ekstern" : `${order.customer?.firstName} ${order.customer?.lastName}`}</td>
+                <td>
+                  {(order.orderlines ?? []).map((line: OrderLine) => (
+                    <div key={line.id}>
+                      {line.amount}x {line.product.name}
+                    </div>
+                  ))}
+                </td>
+                <td>{order.orderSum}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <h2>Transaksjoner</h2>
+        <table className="table">
+          <thead>
+            <tr>
+              <th scope="col">Når</th>
+              <th scope="col">Hvem</th>
+              <th scope="col">Innskudd</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.map((trans: Transaction) => (
+              <tr key={trans.id}>
+                <td>{trans.created}</td>
+                <td>
+                  {trans.user.firstName} {trans.user.lastName}
+                </td>
+                <td>{trans.amount}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

frontend/src/features/log/orderList.graphql

@@ -0,0 +1,28 @@
+query orderList($limit: Int = 10, $offset: Int = 0) {
+  orderList(pagination: {limit: $limit, offset: $offset}) {
+    id
+    isExternal
+    created
+    orderSum
+    customer {
+      id
+      firstName
+      lastName
+      profile {
+        id
+        balance
+      }
+    }
+    orderlines {
+      id
+      amount
+      unitPrice
+      product {
+        id
+        name
+        salePriceExt
+        salePriceInt
+      }
+    }
+  }
+}

frontend/src/features/log/transactionList.graphql

@@ -0,0 +1,16 @@
+query transactionList($limit: Int = 10, $offset: Int = 0) {
+  transactionList(pagination: {limit: $limit, offset: $offset}) {
+    id
+    created
+    amount
+    user {
+      id
+      firstName
+      lastName
+      profile {
+        id
+        balance
+      }
+    }
+  }
+}