Display the list of accounts

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
    */

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