diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx
index 82ff0be1c..5dc7652be 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx
@@ -1,6 +1,9 @@
// @ts-nocheck
import styled from 'styled-components';
import { Tag } from '@blueprintjs/core';
+import { useAppQueryString } from '@/hooks';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+import { Group } from '@/components';
const Root = styled.div`
display: flex;
@@ -23,15 +26,56 @@ const FilterTag = styled(Tag)`
`;
export function AccountTransactionsUncategorizeFilter() {
+ const [locationQuery, setLocationQuery] = useAppQueryString();
+
+ const handleTabsChange = (value) => {
+ setLocationQuery({ uncategorizedFilter: value });
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+interface SegmentedTabs {
+ options: Array<{ label: string; value: string }>;
+ initialValue?: string;
+ value?: string;
+ onValueChange?: (value: string) => void;
+}
+
+function SegmentedTabs({ options, initialValue, value, onValueChange }) {
+ const [_value, handleChange] = useUncontrolled({
+ initialValue,
+ value,
+ onChange: onValueChange,
+ });
return (
-
- All (2)
-
-
-
- Recognized (0)
-
+ {options.map((option) => (
+ handleChange(option.value)}
+ minimal={option.value !== _value}
+ >
+ {option.label}
+
+ ))}
);
}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
index 807044d40..a9aa38e47 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
@@ -1,5 +1,5 @@
// @ts-nocheck
-import { useEffect } from 'react';
+import { useEffect, lazy } from 'react';
import styled from 'styled-components';
import * as R from 'ramda';
@@ -7,29 +7,16 @@ import '@/style/pages/CashFlow/AccountTransactions/List.scss';
import { AccountTransactionsUncategorizeFilter } from './AccountTransactionsUncategorizeFilter';
import { UncategorizedTransactionsFilterProvider } from './AccountUncategorizedTransactionsFilterProvider';
-import { RecognizedTransactionsTableBoot } from './RecognizedTransactions/RecognizedTransactionsTableBoot';
-import { RecognizedTransactionsTable } from './RecognizedTransactions/RecognizedTransactionsTable';
import {
WithBankingActionsProps,
withBankingActions,
} from '../withBankingActions';
-import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot';
-import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable';
-import { ExcludedBankTransactionsTableBoot } from './ExcludedTransactions/ExcludedTransactionsTableBoot';
-import { ExcludedTransactionsTable } from './ExcludedTransactions/ExcludedTransactionsTable';
+import { useAppQueryString } from '@/hooks';
const Box = styled.div`
margin: 30px 15px;
`;
-const CashflowTransactionsTableCard = styled.div`
- border: 2px solid #f0f0f0;
- border-radius: 10px;
- padding: 30px 18px;
- background: #fff;
- flex: 0 1;
-`;
-
interface AllTransactionsUncategorizedProps extends WithBankingActionsProps {}
function AllTransactionsUncategorizedRoot({
@@ -47,27 +34,45 @@ function AllTransactionsUncategorizedRoot({
-
-
-
-
-
-
-
- {/*
-
-
-
- */}
-
- {/*
-
-
-
- */}
+
);
}
+const AccountExcludedTransactins = lazy(() =>
+ import('./UncategorizedTransactions/AccountExcludedTransactions').then(
+ (module) => ({ default: module.AccountExcludedTransactions }),
+ ),
+);
+const AccountRecognizedTransactions = lazy(() =>
+ import('./UncategorizedTransactions/AccountRecgonizedTranasctions').then(
+ (module) => ({ default: module.AccountRecognizedTransactions }),
+ ),
+);
+const AccountUncategorizedTransactions = lazy(() =>
+ import(
+ './UncategorizedTransactions/AccountUncategorizedTransactionsAll'
+ ).then((module) => ({ default: module.AccountUncategorizedTransactionsAll })),
+);
+
+/**
+ * Switches between the account transactions tables.
+ * @returns {React.ReactNode}
+ */
+function AccountTransactionsSwitcher() {
+ const [locationQuery] = useAppQueryString();
+ const uncategorizedTab = locationQuery?.uncategorizedFilter;
+
+ switch (uncategorizedTab) {
+ case 'excluded':
+ return ;
+ case 'recognized':
+ return ;
+ case 'all':
+ default:
+ return ;
+ }
+}
+
export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot);
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx
new file mode 100644
index 000000000..23608c43e
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx
@@ -0,0 +1,13 @@
+import { ExcludedTransactionsTable } from "../ExcludedTransactions/ExcludedTransactionsTable";
+import { ExcludedBankTransactionsTableBoot } from "../ExcludedTransactions/ExcludedTransactionsTableBoot";
+import { AccountTransactionsCard } from "./AccountTransactionsCard";
+
+export function AccountExcludedTransactions() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountRecgonizedTranasctions.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountRecgonizedTranasctions.tsx
new file mode 100644
index 000000000..11c8bec55
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountRecgonizedTranasctions.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { RecognizedTransactionsTableBoot } from '../RecognizedTransactions/RecognizedTransactionsTableBoot';
+import { RecognizedTransactionsTable } from '../RecognizedTransactions/RecognizedTransactionsTable';
+import { AccountTransactionsCard } from './AccountTransactionsCard';
+
+export function AccountRecognizedTransactions() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
new file mode 100644
index 000000000..47fd0b7f9
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+
+export const AccountTransactionsCard = styled.div`
+ border: 2px solid #f0f0f0;
+ border-radius: 10px;
+ padding: 30px 18px;
+ background: #fff;
+ flex: 0 1;
+`;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx
new file mode 100644
index 000000000..a37c705a0
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx
@@ -0,0 +1,13 @@
+import AccountTransactionsUncategorizedTable from '../AccountTransactionsUncategorizedTable';
+import { AccountUncategorizedTransactionsBoot } from '../AllTransactionsUncategorizedBoot';
+import { AccountTransactionsCard } from './AccountTransactionsCard';
+
+export function AccountUncategorizedTransactionsAll() {
+ return (
+
+
+
+
+
+ );
+}