centered forms, show balance in accont info

packages/demobank-ui/src/declaration.d.ts

@@ -99,6 +99,11 @@ type Amount = string;
 type UUID = string;
 type Integer = number;
 
+interface Balance {
+  amount: Amount;
+  credit_debit_indicator: "credit" | "debit";
+}
+
 namespace SandboxBackend {
   export interface Config {
     // Name of this API, always "circuit".
@@ -161,10 +166,7 @@ namespace SandboxBackend {
 
     interface BankAccountBalanceResponse {
       // Available balance on the account.
-      balance: {
-        amount: Amount;
-        credit_debit_indicator: "credit" | "debit";
-      };
+      balance: Balance;
       // payto://-URI of the account. (New)
       paytoUri: string;
     }
@@ -304,6 +306,9 @@ namespace SandboxBackend {
 
       // Legal subject owning the account.
       name: string;
+
+      // current balance of the account
+      balance: Balance;
     }
 
     interface CircuitAccountData {

packages/demobank-ui/src/pages/AdminPage.tsx

@@ -230,7 +230,10 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
         </div>
       </p>
 
-      <section id="main">
+      <section
+        id="main"
+        style={{ width: 600, marginLeft: "auto", marginRight: "auto" }}
+      >
         {!customers.length ? (
           <div></div>
         ) : (
@@ -242,12 +245,18 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
                   <tr>
                     <th>{i18n.str`Username`}</th>
                     <th>{i18n.str`Name`}</th>
-                    <th></th>
-                    <th></th>
+                    <th>{i18n.str`Balance`}</th>
+                    <th>{i18n.str`Actions`}</th>
                   </tr>
                 </thead>
                 <tbody>
                   {customers.map((item, idx) => {
+                    const balance = !item.balance
+                      ? undefined
+                      : Amounts.parse(item.balance.amount);
+                    const balanceIsDebit =
+                      item.balance &&
+                      item.balance.credit_debit_indicator == "debit";
                     return (
                       <tr key={idx}>
                         <td>
@@ -262,6 +271,20 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
                           </a>
                         </td>
                         <td>{item.name}</td>
+                        <td>
+                          {!balance ? (
+                            i18n.str`unknown`
+                          ) : (
+                            <span class="amount">
+                              {balanceIsDebit ? <b>-</b> : null}
+                              <span class="value">{`${Amounts.stringifyValue(
+                                balance,
+                              )}`}</span>
+                              &nbsp;
+                              <span class="currency">{`${balance.currency}`}</span>
+                            </span>
+                          )}
+                        </td>
                         <td>
                           <a
                             href="#"
@@ -272,8 +295,7 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
                           >
                             change password
                           </a>
-                        </td>
-                        <td>
+                          &nbsp;
                           <a
                             href="#"
                             onClick={(e) => {
@@ -283,8 +305,7 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
                           >
                             cashouts
                           </a>
-                        </td>
-                        <td>
+                          &nbsp;
                           <a
                             href="#"
                             onClick={(e) => {
@@ -384,6 +405,7 @@ export function UpdateAccountPassword({
         <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
       )}
 
+      <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
         <form class="pure-form">
           <fieldset>
             <label>{i18n.str`Password`}</label>
@@ -461,6 +483,7 @@ export function UpdateAccountPassword({
           </div>
         </p>
       </div>
+    </div>
   );
 }
 
@@ -488,6 +511,7 @@ function CreateNewAccount({
         <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
       )}
 
+      <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
         <AccountForm
           template={undefined}
           purpose="create"
@@ -564,6 +588,7 @@ function CreateNewAccount({
           </div>
         </p>
       </div>
+    </div>
   );
 }
 
@@ -608,6 +633,7 @@ export function ShowAccountDetails({
       {error && (
         <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
       )}
+      <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
         <AccountForm
           template={result.data}
           purpose={update ? "update" : "show"}
@@ -693,6 +719,7 @@ export function ShowAccountDetails({
           </div>
         </p>
       </div>
+    </div>
   );
 }