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

packages/webapp/src/components/ContentTabs/ContentTabs.tsx

@@ -0,0 +1,111 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+
+const ContentTabsRoot = styled('div')`
+  display: flex;
+  gap: 10px;
+  
+`;
+interface ContentTabItemRootProps {
+  active?: boolean;
+}
+const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
+  flex: 1 0;
+  background: #fff;
+  border: 1px solid #e1e2e8;
+  border-radius: 5px;
+  padding: 11px;
+  text-align: left;
+  cursor: pointer;
+
+  ${(props) =>
+    props.active &&
+    `
+      border-color: #1552c8;
+      box-shadow: 0 0 0 0.25px #1552c8;
+
+      ${ContentTabTitle} {
+        color: #1552c8;
+        font-weight: 500;
+      }
+      ${ContentTabDesc} {
+        color: #1552c8;        
+      }
+    `}
+  &:hover,
+  &:active {
+    border-color: #1552c8;
+  }
+`;
+const ContentTabTitle = styled('h3')`
+  font-size: 14px;
+  font-weight: 400;
+  color: #2f343c;
+`;
+const ContentTabDesc = styled('p')`
+  margin: 0;
+  color: #5f6b7c;
+  margin-top: 4px;
+  font-size: 12px;
+`;
+
+interface ContentTabsItemProps {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  active?: boolean;
+}
+
+const ContentTabsItem = ({
+  title,
+  description,
+  active,
+}: ContentTabsItemProps) => {
+  return (
+    <ContentTabItemRoot active={active}>
+      <ContentTabTitle>{title}</ContentTabTitle>
+      <ContentTabDesc>{description}</ContentTabDesc>
+    </ContentTabItemRoot>
+  );
+};
+
+interface ContentTabsProps {
+  initialValue?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ContentTabs({
+  initialValue,
+  value,
+  onChange,
+  children,
+  className
+}: ContentTabsProps) {
+  const [localValue, handleItemChange] = useUncontrolled<string>({
+    initialValue,
+    value,
+    onChange,
+    finalValue: '',
+  });
+  const tabs = React.Children.toArray(children);
+
+  return (
+    <ContentTabsRoot className={className}>
+      {tabs.map((tab) => (
+        <ContentTabsItem
+          key={tab.key}
+          {...tab.props}
+          active={localValue === tab.props.id}
+          onClick={() => handleItemChange(tab.props?.id)}
+        />
+      ))}
+    </ContentTabsRoot>
+  );
+}
+
+ContentTabs.Tab = ContentTabsItem;

packages/webapp/src/components/ContentTabs/index.ts

@@ -0,0 +1 @@
+export * from './ContentTabs';

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>
+  );
+}