update,

03_source/mobile/src/pages/DemoBankingUi/components/TransactionItem.jsx

@@ -0,0 +1,56 @@
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+import { formatBalance } from '../data/Utils';
+import styles from './TransactionItem.module.css';
+
+const TransactionItem = (props) => {
+  const { name, amount, deposit, color } = props;
+
+  const getContactNameInitials = (contactName) => {
+    var nameInitials = '';
+
+    if (contactName && contactName !== '' && contactName !== undefined) {
+      const nameParts = contactName && contactName.split(' ');
+
+      if (nameParts) {
+        if (nameParts[0].charAt(0).match(/^[a-z]+$/i)) {
+          nameInitials += nameParts[0].charAt(0).toUpperCase();
+        }
+
+        if (nameParts[1]) {
+          if (nameParts[1].charAt(0).match(/^[a-z]+$/i)) {
+            nameInitials += nameParts[1].charAt(0).toUpperCase();
+          }
+        } else {
+          nameInitials += nameParts[0].charAt(1).toUpperCase();
+        }
+      }
+    }
+
+    return nameInitials;
+  };
+
+  return (
+    <IonItem lines="full" detail={false} className={`item-text-wrap ion-text-wrap ${styles.transactionItem}`}>
+      <div className={styles.transactionItemContent}>
+        <IonAvatar slot="start">
+          <div style={{ borderColor: 'grey', color: 'grey' }} className={styles.avatarImage}>
+            {getContactNameInitials(name)}
+          </div>
+        </IonAvatar>
+
+        <IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
+          <h2>{name}</h2>
+        </IonLabel>
+
+        <IonLabel className={`ion-text-wrap ${styles.transactionContent}`}>
+          <h4 className={deposit ? styles.green : styles.red}>
+            {deposit ? '+' : '-'}
+            &pound;{formatBalance(amount)}
+          </h4>
+        </IonLabel>
+      </div>
+    </IonItem>
+  );
+};
+
+export default TransactionItem;