1 files changed, 21 insertions, 2 deletions
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 16ae8a58f..af1d9ed2c 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -30,8 +30,15 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ReadyView({ cashouts }: State.Ready): VNode {
+export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
+  if (!cashouts.length) {
+    return (
+      <div>
+        <i18n.Translate>No cashout at the moment</i18n.Translate>
+      </div>
+    );
+  }
   return (
     <div class="results">
       <table class="pure-table pure-table-striped">
@@ -39,6 +46,8 @@ export function ReadyView({ cashouts }: State.Ready): VNode {
           <tr>
             <th>{i18n.str`Created`}</th>
             <th>{i18n.str`Confirmed`}</th>
+            <th>{i18n.str`Total debit`}</th>
+            <th>{i18n.str`Total credit`}</th>
             <th>{i18n.str`Status`}</th>
             <th>{i18n.str`Subject`}</th>
           </tr>
@@ -56,7 +65,17 @@ export function ReadyView({ cashouts }: State.Ready): VNode {
                 <td>{Amounts.stringifyValue(item.amount_debit)}</td>
                 <td>{Amounts.stringifyValue(item.amount_credit)}</td>
                 <td>{item.status}</td>
-                <td>{item.subject}</td>
+                <td>
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onSelected(item.id);
+                    }}
+                  >
+                    {item.subject}
+                  </a>
+                </td>
               </tr>
             );
           })}