feat(webapp): Filter account transactions by categorized/uncategorized transactions

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { ContentTabs } from '@/components/ContentTabs/ContentTabs';
+
+const AccountContentTabs = styled(ContentTabs)`
+  margin: 15px 15px 0 15px;
+`;
+
+export function AccountTransactionsFilterTabs() {
+  return (
+    <AccountContentTabs value={'uncategorized'}>
+      <ContentTabs.Tab
+        id={'dashboard'}
+        title={'Dashboard'}
+        description={'Account Summary'}
+      />
+      <ContentTabs.Tab
+        id={'uncategorized'}
+        title={
+          <>
+            <span style={{ color: '#ff0000' }}>20</span> Uncategorized
+            Transactions
+          </>
+        }
+        description={'For Bank Statement'}
+      />
+      <ContentTabs.Tab
+        id="all"
+        title={'All Transactions'}
+        description={'In Bigcapital'}
+      />
+    </AccountContentTabs>
+  );
+}

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

@@ -11,6 +11,8 @@ import AccountTransactionsDataTable from './AccountTransactionsDataTable';
 import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsProgressBar } from './components';
+import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
+import { AccountTransactionsUncategorizeFilter } from './AccountTransactionsUncategorizeFilter';
 
 /**
  * Account transactions list.
@@ -23,9 +25,15 @@ function AccountTransactionsList() {
       <AccountTransactionsProgressBar />
 
       <DashboardPageContent>
-        <CashflowTransactionsTableCard>
-          <AccountTransactionsDataTable />
-        </CashflowTransactionsTableCard>
+        <AccountTransactionsFilterTabs />
+
+        <Box>
+          <AccountTransactionsUncategorizeFilter />
+
+          <CashflowTransactionsTableCard>
+            <AccountTransactionsDataTable />
+          </CashflowTransactionsTableCard>
+        </Box>
       </DashboardPageContent>
     </AccountTransactionsProvider>
   );
@@ -37,7 +45,10 @@ const CashflowTransactionsTableCard = styled.div`
   border: 2px solid #f0f0f0;
   border-radius: 10px;
   padding: 30px 18px;
-  margin: 30px 15px;
   background: #fff;
   flex: 0 1;
 `;
+
+const Box = styled.div`
+  margin: 30px 15px;
+`;

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

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { Tag } from '@blueprintjs/core';
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 18px;
+`;
+
+const FilterTag = styled(Tag)`
+  min-height: 26px;
+`;
+
+export function AccountTransactionsUncategorizeFilter() {
+  return (
+    <Root>
+      <FilterTag round interactive>
+        All <strong>(2)</strong>
+      </FilterTag>
+      <FilterTag round minimal interactive>
+        Recognized <strong>(0)</strong>
+      </FilterTag>
+    </Root>
+  );
+}