feat: requested UI and UX improvements (#524)

Author: coodos

platforms/eCurrency-api/src/controllers/LedgerController.ts

@@ -44,6 +44,7 @@ export class LedgerController {
                         id: b.currency.id,
                         name: b.currency.name,
                         ename: b.currency.ename,
+                        allowNegative: b.currency.allowNegative,
                     },
                     balance: b.balance,
                 })));
@@ -353,5 +354,21 @@ export class LedgerController {
             res.status(500).json({ error: "Internal server error" });
         }
     };
+
+    getTotalSupply = async (req: Request, res: Response) => {
+        try {
+            if (!req.user) {
+                return res.status(401).json({ error: "Authentication required" });
+            }
+
+            const { currencyId } = req.params;
+            const totalSupply = await this.ledgerService.getTotalSupply(currencyId);
+
+            res.json({ currencyId, totalSupply });
+        } catch (error) {
+            console.error("Error getting total supply:", error);
+            res.status(500).json({ error: "Internal server error" });
+        }
+    };
 }
 

platforms/eCurrency-api/src/index.ts

@@ -121,6 +121,7 @@ app.get("/api/ledger/history", authGuard, ledgerController.getHistory);
 app.get("/api/ledger/history/:currencyId", authGuard, ledgerController.getHistory);
 app.get("/api/ledger/transaction/:id", authGuard, ledgerController.getTransactionById);
 app.get("/api/ledger/account-details/:currencyId", authGuard, ledgerController.getAccountDetails);
+app.get("/api/ledger/total-supply/:currencyId", authGuard, ledgerController.getTotalSupply);
 app.post("/api/ledger/initialize", authGuard, ledgerController.initializeAccount);
 
 // Start server

platforms/eCurrency-api/src/services/LedgerService.ts

@@ -293,5 +293,32 @@ export class LedgerService {
             return await groupRepository.findOne({ where: { id: accountId } });
         }
     }
+
+    /**
+     * Get total supply for a currency by summing all account balances
+     */
+    async getTotalSupply(currencyId: string): Promise<number> {
+        // Get all unique account combinations for this currency
+        const distinctAccounts = await this.ledgerRepository
+            .createQueryBuilder("ledger")
+            .select("ledger.accountId", "accountId")
+            .addSelect("ledger.accountType", "accountType")
+            .where("ledger.currencyId = :currencyId", { currencyId })
+            .distinct(true)
+            .getRawMany();
+
+        // Sum all balances
+        let totalSupply = 0;
+        for (const account of distinctAccounts) {
+            const balance = await this.getAccountBalance(
+                currencyId,
+                account.accountId,
+                account.accountType as AccountType
+            );
+            totalSupply += Number(balance);
+        }
+
+        return totalSupply;
+    }
 }
 

platforms/eCurrency/client/src/components/user-menu-dropdown.tsx

@@ -25,9 +25,9 @@ export default function UserMenuDropdown({ accountContext, onAccountContextChang
   const adminGroups = groups?.filter((g: any) => g.isAdmin) || [];
   const hasAdminGroups = adminGroups.length > 0;
 
-  const currentLabel = accountContext?.type === "user"
-    ? "My Account"
-    : adminGroups.find((g: any) => g.id === accountContext?.id)?.name || "My Account";
+  const currentAccountName = accountContext?.type === "user"
+    ? (user?.name || user?.ename || "Personal Account")
+    : (groups?.find((g: any) => g.id === accountContext?.id)?.name || "Group");
 
   if (!user) {
     return null;
@@ -39,7 +39,7 @@ export default function UserMenuDropdown({ accountContext, onAccountContextChang
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center gap-2 px-4 py-2 border rounded-lg hover:bg-gray-50"
       >
-        <span className="text-sm font-medium">{user?.name || user?.ename || "Account"}</span>
+        <span className="text-sm font-medium">Currently managing: {currentAccountName}</span>
         <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`} />
       </button>
 

platforms/eCurrency/client/src/pages/currency-detail.tsx

@@ -104,6 +104,17 @@ export default function CurrencyDetail() {
     },
   });
 
+  const { data: totalSupplyData, isLoading: totalSupplyLoading } = useQuery({
+    queryKey: ["totalSupply", currencyId],
+    queryFn: async () => {
+      const response = await apiClient.get(`/api/ledger/total-supply/${currencyId}`);
+      return response.data;
+    },
+    enabled: !!currencyId,
+  });
+
+  const totalSupply = totalSupplyData?.totalSupply ?? 0;
+
   const { data: transactions, isLoading: transactionsLoading } = useQuery({
     queryKey: ["history", currencyId, accountContext, transactionOffset],
     queryFn: async () => {
@@ -198,6 +209,27 @@ export default function CurrencyDetail() {
                     : "0.00"}
                 </p>
               </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Negative Balance Allowed</h3>
+                <p className={`text-lg font-medium ${
+                  currency.allowNegative ? "text-yellow-600" : "text-green-600"
+                }`}>
+                  {currency.allowNegative ? "Yes" : "No"}
+                </p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Total Currency Supply</h3>
+                <p className="text-lg font-semibold">
+                  {totalSupplyLoading ? (
+                    <span className="text-muted-foreground">Loading...</span>
+                  ) : (
+                    Number(totalSupply).toLocaleString(undefined, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    })
+                  )}
+                </p>
+              </div>
             </div>
           </div>
         )}

platforms/eCurrency/client/src/pages/dashboard.tsx

@@ -205,6 +205,11 @@ export default function Dashboard() {
                     })}
                   </div>
                   <div className="text-xs text-white/80 mt-1">{formatEName(balance.currency.ename)}</div>
+                  {balance.currency.allowNegative !== undefined && (
+                    <div className="text-xs px-2 py-0.5 rounded bg-white/20 text-white/90 mt-1 inline-block">
+                      {balance.currency.allowNegative ? "Negative Allowed" : "No Negative"}
+                    </div>
+                  )}
                 </div>
               ))}
             </div>