From 5db816ca9a8820dff1fe8b738cf6157778469b2f Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 22 Apr 2025 11:05:26 +0200
Subject: [PATCH] Create movements table

---
 moneymgr_web/src/routes/AccountRoute.tsx | 93 ++++++++++++++++++++++--
 moneymgr_web/src/widgets/DateWidget.tsx  | 13 ++++
 2 files changed, 98 insertions(+), 8 deletions(-)
 create mode 100644 moneymgr_web/src/widgets/DateWidget.tsx

diff --git a/moneymgr_web/src/routes/AccountRoute.tsx b/moneymgr_web/src/routes/AccountRoute.tsx
index 674335d..3c4f108 100644
--- a/moneymgr_web/src/routes/AccountRoute.tsx
+++ b/moneymgr_web/src/routes/AccountRoute.tsx
@@ -9,6 +9,8 @@ import { NewMovementWidget } from "../widgets/NewMovementWidget";
 import { Movement, MovementApi } from "../api/MovementsApi";
 import React from "react";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { DateWidget } from "../widgets/DateWidget";
 
 export function AccountRoute(): React.ReactElement {
   const { accountId } = useParams();
@@ -48,14 +50,89 @@ export function AccountRoute(): React.ReactElement {
         </span>
       }
     >
-      <AsyncWidget
-        loadKey={`${account.id}-${loadKey.current}`}
-        load={load}
-        ready={movements !== null}
-        errMsg="Failed to load the list of movements!"
-        build={() => <>TODO : table count={movements?.length}</>}
-      />
-      <NewMovementWidget account={account} onCreated={reload} />
+      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
+        <div style={{ flex: 1 }}>
+          <AsyncWidget
+            loadKey={`${account.id}-${loadKey.current}`}
+            load={load}
+            ready={movements !== null}
+            errMsg="Failed to load the list of movements!"
+            build={() => <MovementsTable movements={movements!} />}
+          />
+        </div>
+        <NewMovementWidget account={account} onCreated={reload} />
+      </div>
     </MoneyMgrWebRouteContainer>
   );
 }
+
+function MovementsTable(p: { movements: Movement[] }): React.ReactElement {
+  const columns: GridColDef<(typeof p.movements)[number]>[] = [
+    {
+      field: "checked",
+      headerName: "Checked",
+      width: 50,
+      type: "boolean",
+      editable: true,
+    },
+    {
+      field: "time",
+      headerName: "Date",
+      width: 98 + 80,
+      editable: true,
+      type: "dateTime",
+      valueGetter(_, m) {
+        return new Date(m.time * 1000);
+      },
+      valueSetter(v, row) {
+        row.time = Math.floor(v.getTime() / 1000);
+        return row;
+      },
+      renderCell: (params) => {
+        return <DateWidget time={params.row.time} />;
+      },
+    },
+    {
+      field: "label",
+      headerName: "Label",
+      flex: 1,
+      editable: true,
+      type: "string",
+    },
+    {
+      field: "amount",
+      headerName: "Amount",
+      width: 110,
+      editable: true,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      renderCell: (params) => {
+        return <AmountWidget amount={params.row.amount} />;
+      },
+    },
+    {
+      field: "file",
+      headerName: "File",
+      // TODO
+    },
+  ];
+  return (
+    <DataGrid
+      columns={columns}
+      rows={p.movements}
+      autoPageSize
+      checkboxSelection
+      initialState={{
+        sorting: {
+          sortModel: [{ field: "time", sort: "desc" }],
+        },
+        columns: {
+          columnVisibilityModel: {
+            checked: false,
+          },
+        },
+      }}
+    />
+  );
+}
diff --git a/moneymgr_web/src/widgets/DateWidget.tsx b/moneymgr_web/src/widgets/DateWidget.tsx
new file mode 100644
index 0000000..9c9b259
--- /dev/null
+++ b/moneymgr_web/src/widgets/DateWidget.tsx
@@ -0,0 +1,13 @@
+export function DateWidget(p: { time: number }): React.ReactElement {
+  const date = new Date(p.time * 1000);
+
+  return (
+    <>
+      {pad(date.getDate())}/{pad(date.getMonth() + 1)}/{date.getFullYear()}
+    </>
+  );
+}
+
+function pad(num: number): string {
+  return num.toString().padStart(2, "0");
+}