Display the list of accounts

moneymgr_web/src/routes/AccountsRoute.tsx

@@ -0,0 +1,63 @@
+import { IconButton, Tooltip } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { useAccounts } from "../hooks/AccountsListProvider";
+import { TimeWidget } from "../widgets/TimeWidget";
+
+export function AccountsRoute(): React.ReactElement {
+  const accounts = useAccounts();
+
+  const list = accounts.list.list;
+
+  const columns: GridColDef<(typeof list)[number]>[] = [
+    { field: "id", headerName: "ID", flex: 1 },
+    { field: "name", headerName: "Name", flex: 6 },
+    {
+      field: "time_create",
+      headerName: "Time created",
+      flex: 2,
+      renderCell(params) {
+        return <TimeWidget time={params.row.time_create} />;
+      },
+    },
+    {
+      field: "time_update",
+      headerName: "Time updated",
+      flex: 2,
+      renderCell(params) {
+        return <TimeWidget time={params.row.time_update} />;
+      },
+    },
+    {
+      field: "default_account",
+      headerName: "Default",
+      flex: 1,
+      type: "boolean",
+    },
+  ];
+
+  return (
+    <MoneyMgrWebRouteContainer
+      label="Accounts"
+      actions={
+        <span>
+          <Tooltip title="Create a new account">
+            <IconButton onClick={undefined}>
+              <AddIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Refresh accounts list">
+            <IconButton onClick={undefined}>
+              <RefreshIcon />
+            </IconButton>
+          </Tooltip>
+        </span>
+      }
+    >
+      <DataGrid rows={list} columns={columns} disableRowSelectionOnClick />
+    </MoneyMgrWebRouteContainer>
+  );
+}