Create movements table

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
+      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
-        loadKey={`${account.id}-${loadKey.current}`}
+        <div style={{ flex: 1 }}>
-        load={load}
+          <AsyncWidget
-        ready={movements !== null}
+            loadKey={`${account.id}-${loadKey.current}`}
-        errMsg="Failed to load the list of movements!"
+            load={load}
-        build={() => <>TODO : table count={movements?.length}</>}
+            ready={movements !== null}
-      />
+            errMsg="Failed to load the list of movements!"
-      <NewMovementWidget account={account} onCreated={reload} />
+            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,
+          },
+        },
+      }}
+    />
+  );
+}

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");
+}