feat: wip categorized transactions

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -84,6 +84,18 @@ function AccountBankBalanceItem() {
   );
 }
 
+function AccountNumberItem() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  if (!currentAccount.account_mask) return null;
+
+  return (
+    <AccountBalanceItemWrap>
+      Account Number: xxx{currentAccount.account_mask}
+    </AccountBalanceItemWrap>
+  );
+}
+
 function AccountTransactionsDetailsBarSkeleton() {
   return (
     <React.Fragment>
@@ -101,6 +113,7 @@ function AccountTransactionsDetailsContent() {
   return (
     <React.Fragment>
       <AccountSwitchItem />
+      <AccountNumberItem />
       <AccountBalanceItem />
       <AccountBankBalanceItem />
     </React.Fragment>

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsFilterTabs.tsx

@@ -8,12 +8,17 @@ const AccountContentTabs = styled(ContentTabs)`
 `;
 
 export function AccountTransactionsFilterTabs() {
-  const { filterTab, setFilterTab } = useAccountTransactionsContext();
+  const { filterTab, setFilterTab, currentAccount } =
+    useAccountTransactionsContext();
 
   const handleChange = (value) => {
     setFilterTab(value);
   };
 
+  const hasUncategorizedTransx = Boolean(
+    currentAccount.uncategorized_transactions,
+  );
+
   return (
     <AccountContentTabs value={filterTab} onChange={handleChange}>
       <ContentTabs.Tab
@@ -21,16 +26,20 @@ export function AccountTransactionsFilterTabs() {
         title={'Dashboard'}
         description={'Account Summary'}
       />
-      <ContentTabs.Tab
-        id={'uncategorized'}
-        title={
-          <>
-            <span style={{ color: '#ff0000' }}>20</span> Uncategorized
-            Transactions
-          </>
-        }
-        description={'For Bank Statement'}
-      />
+      {hasUncategorizedTransx && (
+        <ContentTabs.Tab
+          id={'uncategorized'}
+          title={
+            <>
+              <span style={{ color: '#ff0000' }}>
+                {currentAccount.uncategorized_transactions}
+              </span>{' '}
+              Uncategorized Transactions
+            </>
+          }
+          description={'For Bank Statement'}
+        />
+      )}
       <ContentTabs.Tab
         id="all"
         title={'All Transactions'}