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