Display the list of accounts

moneymgr_web/src/App.tsx

@@ -14,6 +14,7 @@ import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseLoginPage } from "./widgets/BaseLoginPage";
 import { TokensRoute } from "./routes/TokensRoute";
+import { AccountsRoute } from "./routes/AccountsRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -39,6 +40,7 @@ export function App() {
         <Route path="*" element={<BaseAuthenticatedPage />}>
           <Route path="" element={<HomeRoute />} />
           <Route path="tokens" element={<TokensRoute />} />
+          <Route path="accounts" element={<AccountsRoute />} />
 
           <Route path="*" element={<NotFoundRoute />} />
         </Route>

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

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,4 +1,4 @@
-import { mdiApi, mdiHome } from "@mdi/js";
+import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   List,
@@ -30,6 +30,12 @@ export function MoneyNavList(): React.ReactElement {
         uri="/tokens"
         icon={<Icon path={mdiApi} size={1} />}
       />
+
+      <NavLink
+        label="Accounts"
+        uri="/accounts"
+        icon={<Icon path={mdiCashMultiple} size={1} />}
+      />
     </List>
   );
 }