QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webapp): Switch between uncategorized transactions tabs

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-06-29 19:31:13 +02:00
parent 3cd66ba4d6
commit f816e7f25c
6 changed files with 139 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx
View File

@@ -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 (
<Group position={'apart'}>
<SegmentedTabs
options={[
{ value: 'all', label: 'All' },
{ value: 'recognized', label: 'Recognized' },
]}
value={locationQuery?.uncategorizedFilter || 'all'}
onValueChange={handleTabsChange}
/>
<SegmentedTabs
options={[{ value: 'excluded', label: 'Excluded' }]}
value={locationQuery?.uncategorizedFilter || 'all'}
onValueChange={handleTabsChange}
/>
</Group>
);
}
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 (
<Root>
<FilterTag round interactive>
All <strong>(2)</strong>
</FilterTag>
<FilterTag round minimal interactive>
Recognized <strong>(0)</strong>
</FilterTag>
{options.map((option) => (
<FilterTag
round
interactive
onClick={() => handleChange(option.value)}
minimal={option.value !== _value}
>
{option.label}
</FilterTag>
))}
</Root>
);
}

71
packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
View File

@@ -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({
<UncategorizedTransactionsFilterProvider>
<Box>
<AccountTransactionsUncategorizeFilter />
<ExcludedBankTransactionsTableBoot>
<CashflowTransactionsTableCard>
<ExcludedTransactionsTable />
</CashflowTransactionsTableCard>
</ExcludedBankTransactionsTableBoot>
{/* <RecognizedTransactionsTableBoot>
<CashflowTransactionsTableCard>
<RecognizedTransactionsTable />
</CashflowTransactionsTableCard>
</RecognizedTransactionsTableBoot> */}
{/* <AccountUncategorizedTransactionsBoot>
<CashflowTransactionsTableCard>
<AccountTransactionsUncategorizedTable />
</CashflowTransactionsTableCard>
</AccountUncategorizedTransactionsBoot> */}
<AccountTransactionsSwitcher />
</Box>
</UncategorizedTransactionsFilterProvider>
);
}
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 <AccountExcludedTransactins />;
case 'recognized':
return <AccountRecognizedTransactions />;
case 'all':
default:
return <AccountUncategorizedTransactions />;
}
}
export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot);

13
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountExcludedTransactions.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { ExcludedTransactionsTable } from "../ExcludedTransactions/ExcludedTransactionsTable";
import { ExcludedBankTransactionsTableBoot } from "../ExcludedTransactions/ExcludedTransactionsTableBoot";
import { AccountTransactionsCard } from "./AccountTransactionsCard";
export function AccountExcludedTransactions() {
return (
<ExcludedBankTransactionsTableBoot>
<AccountTransactionsCard>
<ExcludedTransactionsTable />
</AccountTransactionsCard>
</ExcludedBankTransactionsTableBoot>
);
}

14
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountRecgonizedTranasctions.tsx Normal file
View File

@@ -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 (
<RecognizedTransactionsTableBoot>
<AccountTransactionsCard>
<RecognizedTransactionsTable />
</AccountTransactionsCard>
</RecognizedTransactionsTableBoot>
);
}

10
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx Normal file
View File

@@ -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;
`;

13
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedTransactionsAll.tsx Normal file
View File

@@ -0,0 +1,13 @@
import AccountTransactionsUncategorizedTable from '../AccountTransactionsUncategorizedTable';
import { AccountUncategorizedTransactionsBoot } from '../AllTransactionsUncategorizedBoot';
import { AccountTransactionsCard } from './AccountTransactionsCard';
export function AccountUncategorizedTransactionsAll() {
return (
<AccountUncategorizedTransactionsBoot>
<AccountTransactionsCard>
<AccountTransactionsUncategorizedTable />
</AccountTransactionsCard>
</AccountUncategorizedTransactionsBoot>
);
}