From 342af2c44376dddfcfff33c67fc179b9e56ec513 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 14 Apr 2025 21:12:24 +0200
Subject: [PATCH] Display the list of accounts

---
 moneymgr_web/src/api/AccountApi.ts        |  7 ++++++
 moneymgr_web/src/widgets/MoneyNavList.tsx | 28 ++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/moneymgr_web/src/api/AccountApi.ts b/moneymgr_web/src/api/AccountApi.ts
index 5c0758b..dc28a12 100644
--- a/moneymgr_web/src/api/AccountApi.ts
+++ b/moneymgr_web/src/api/AccountApi.ts
@@ -17,6 +17,13 @@ export class AccountsList {
     this.list.sort((a, b) => a.id - b.id);
   }
 
+  /**
+   * Check if accounts list is empty
+   */
+  get isEmpty(): boolean {
+    return this.list.length === 0;
+  }
+
   /**
    * Get a single account by its id
    */
diff --git a/moneymgr_web/src/widgets/MoneyNavList.tsx b/moneymgr_web/src/widgets/MoneyNavList.tsx
index b1fb343..c47dd63 100644
--- a/moneymgr_web/src/widgets/MoneyNavList.tsx
+++ b/moneymgr_web/src/widgets/MoneyNavList.tsx
@@ -1,15 +1,19 @@
-import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
+import { mdiAccount, mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
+  Divider,
   List,
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Typography,
 } from "@mui/material";
 import { useLocation } from "react-router-dom";
+import { useAccounts } from "../hooks/AccountsListProvider";
 import { RouterLink } from "./RouterLink";
 
 export function MoneyNavList(): React.ReactElement {
+  const accounts = useAccounts();
   return (
     <List
       dense
@@ -36,6 +40,28 @@ export function MoneyNavList(): React.ReactElement {
         uri="/accounts"
         icon={<Icon path={mdiCashMultiple} size={1} />}
       />
+      <Divider />
+      {accounts.list.isEmpty && (
+        <Typography
+          variant="caption"
+          style={{
+            paddingTop: "20px",
+            display: "inline-block",
+            textAlign: "center",
+            width: "100%",
+          }}
+        >
+          No account yet.
+        </Typography>
+      )}
+
+      {accounts.list.list.map((a) => (
+        <NavLink
+          label={a.name}
+          uri={`/account/${a.id}`}
+          icon={<Icon path={mdiAccount} size={1} />}
+        />
+      ))}
     </List>
   );
 }