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

fix: style matching bank transactions

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-07-03 19:41:43 +02:00
parent a5eb42edaf
commit b8a0a5509d
14 changed files with 104 additions and 104 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,30 +1,8 @@
// @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';
import { useAccountTransactionsContext } from './AccountTransactionsProvider';
const Root = styled.div`
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 14px;
`;
const FilterTag = styled(Tag)`
min-height: 26px;
&.bp4-minimal:not([class*='bp4-intent-']) {
background: #fff;
border: 1px solid #e1e2e8;
&.bp4-interactive:hover {
background-color: rgba(143, 153, 168, 0.05);
}
}
`;
import { TagsControl } from '@/components/TagsControl';
export function AccountTransactionsUncategorizeFilter() {
const { bankAccountMetaSummary } = useAccountTransactionsContext();
@@ -40,7 +18,7 @@ export function AccountTransactionsUncategorizeFilter() {
return (
<Group position={'apart'}>
<SegmentedTabs
<TagsControl
options={[
{
value: 'all',
@@ -62,7 +40,7 @@ export function AccountTransactionsUncategorizeFilter() {
value={locationQuery?.uncategorizedFilter || 'all'}
onValueChange={handleTabsChange}
/>
<SegmentedTabs
<TagsControl
options={[{ value: 'excluded', label: 'Excluded' }]}
value={locationQuery?.uncategorizedFilter || 'all'}
onValueChange={handleTabsChange}
@@ -70,33 +48,3 @@ export function AccountTransactionsUncategorizeFilter() {
</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>
{options.map((option, index) => (
<FilterTag
key={index}
round
interactive
onClick={() => handleChange(option.value)}
minimal={option.value !== _value}
>
{option.label}
</FilterTag>
))}
</Root>
);
}

13
packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
View File

@@ -1,6 +1,7 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import { Intent } from '@blueprintjs/core';
import {
DataTable,
@@ -12,21 +13,17 @@ import {
} from '@/components';
import { TABLES } from '@/constants/tables';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import { useMemorizedColumnsWidths } from '@/hooks';
import { useExcludedTransactionsColumns } from './_utils';
import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot';
import { compose } from '@/utils';
import { ActionsMenu } from './_components';
import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
import { Intent } from '@blueprintjs/core';
/**
* Renders the recognized account transactions datatable.
*/
function ExcludedTransactionsTableRoot() {
export function ExcludedTransactionsTable() {
const { excludedBankTransactions } = useExcludedTransactionsBoot();
const { mutateAsync: unexcludeBankTransaction } =
useUnexcludeUncategorizedTransaction();
@@ -54,7 +51,7 @@ function ExcludedTransactionsTableRoot() {
AppToaster.show({
message: 'Something went wrong.',
intent: Intent.DANGER,
});
});
});
};
@@ -90,10 +87,6 @@ function ExcludedTransactionsTableRoot() {
);
}
export const ExcludedTransactionsTable = compose(withDrawerActions)(
ExcludedTransactionsTableRoot,
);
const DashboardConstrantTable = styled(DataTable)`
.table {
.thead {

23
packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx
View File

@@ -1,6 +1,7 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import { Intent, Text } from '@blueprintjs/core';
import {
DataTable,
@@ -8,15 +9,11 @@ import {
TableSkeletonRows,
TableSkeletonHeader,
TableVirtualizedListRows,
FormattedMessage as T,
AppToaster,
Stack,
} from '@/components';
import { TABLES } from '@/constants/tables';
import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import { useMemorizedColumnsWidths } from '@/hooks';
import { useUncategorizedTransactionsColumns } from './_utils';
import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot';
@@ -24,7 +21,6 @@ import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot
import { ActionsMenu } from './_components';
import { compose } from '@/utils';
import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
import { Intent, Text } from '@blueprintjs/core';
import {
WithBankingActionsProps,
withBankingActions,
@@ -37,15 +33,6 @@ interface RecognizedTransactionsTableProps extends WithBankingActionsProps {}
* Renders the recognized account transactions datatable.
*/
function RecognizedTransactionsTableRoot({
// #withSettings
cashflowTansactionsTableSize,
// #withAlertsActions
openAlert,
// #withDrawerActions
openDrawer,
// #withBanking
setUncategorizedTransactionIdForMatching,
}: RecognizedTransactionsTableProps) {
@@ -125,11 +112,9 @@ function RecognizedTransactionsTableRoot({
);
}
export const RecognizedTransactionsTable = compose(
withAlertsActions,
withDrawerActions,
withBankingActions,
)(RecognizedTransactionsTableRoot);
export const RecognizedTransactionsTable = compose(withBankingActions)(
RecognizedTransactionsTableRoot,
);
const DashboardConstrantTable = styled(DataTable)`
.table {

3
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx
View File

@@ -72,7 +72,8 @@ function CategorizeTransactionBoot({
recognizedTranasction,
isRecognizedTransactionLoading,
};
const isLoading = isBranchesLoading || isAccountsLoading;
const isLoading =
isBranchesLoading || isAccountsLoading || isRecognizedTransactionLoading;
if (isLoading) {
<Spinner size={30} />;

0
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss → packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
View File

10
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx → packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.tsx
View File

@@ -1,11 +1,11 @@
// @ts-nocheck
import clsx from 'classnames';
import { Group, Stack } from '@/components';
import { Checkbox, Text } from '@blueprintjs/core';
import styles from './MatchTransaction.module.scss';
import { useUncontrolled } from '@/hooks/useUncontrolled';
import { Group, Stack } from '@/components';
import styles from './MatchTransactionCheckbox.module.scss';
export interface MatchTransactionProps {
export interface MatchTransactionCheckboxProps {
active?: boolean;
initialActive?: boolean;
onChange?: (state: boolean) => void;
@@ -13,13 +13,13 @@ export interface MatchTransactionProps {
date: string;
}
export function MatchTransaction({
export function MatchTransactionCheckbox({
active,
initialActive,
onChange,
label,
date,
}: MatchTransactionProps) {
}: MatchTransactionCheckboxProps) {
const [_active, handleChange] = useUncontrolled<boolean>({
value: active,
initialValue: initialActive,

26
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
View File

@@ -8,7 +8,10 @@ import {
MatchingTransactionBoot,
useMatchingTransactionBoot,
} from './MatchingTransactionBoot';
import { MatchTransaction, MatchTransactionProps } from './MatchTransaction';
import {
MatchTransactionCheckbox,
MatchTransactionCheckboxProps,
} from './MatchTransactionCheckbox';
import { useMatchUncategorizedTransaction } from '@/hooks/query/bank-rules';
import { MatchingTransactionFormValues } from './types';
import {
@@ -27,6 +30,10 @@ const initialValues = {
matched: {},
};
/**
* Renders the bank transaction matching form.
* @returns {React.ReactNode}
*/
function MatchingBankTransactionRoot({
// #withBankingActions
closeMatchingTransactionAside,
@@ -89,7 +96,7 @@ function MatchingBankTransactionContent() {
return (
<Box className={styles.root}>
<PerfectMatchingTransactions />
<GoodMatchingTransactions />
<PossibleMatchingTransactions />
</Box>
);
}
@@ -135,7 +142,7 @@ function PerfectMatchingTransactions() {
* Renders the possible match transactions.
* @returns {React.ReactNode}
*/
function GoodMatchingTransactions() {
function PossibleMatchingTransactions() {
const { possibleMatches } = useMatchingTransactionBoot();
// Can't continue if the possible matches is emoty.
@@ -168,7 +175,10 @@ function GoodMatchingTransactions() {
);
}
interface MatchTransactionFieldProps
extends Omit<MatchTransactionProps, 'onChange' | 'active' | 'initialActive'> {
extends Omit<
MatchTransactionCheckboxProps,
'onChange' | 'active' | 'initialActive'
> {
transactionId: number;
transactionType: string;
}
@@ -183,7 +193,7 @@ function MatchTransactionField({
return (
<FastField name={name}>
{({ form, field: { value } }: FastFieldProps) => (
<MatchTransaction
<MatchTransactionCheckbox
{...props}
active={!!value}
onChange={(state) => {
@@ -195,10 +205,6 @@ function MatchTransactionField({
);
}
export function CategorizeBankTransactionContent() {
return <h1>Categorizing</h1>;
}
interface MatchTransctionFooterProps extends WithBankingActionsProps {}
/**
@@ -210,6 +216,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
const { submitForm, isSubmitting } = useFormikContext();
const totalPending = useGetPendingAmountMatched();
const showReconcileLink = useIsShowReconcileTransactionLink();
const submitDisabled = totalPending !== 0;
const handleCancelBtnClick = () => {
closeMatchingTransactionAside();
@@ -243,6 +250,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
style={{ minWidth: 85 }}
onClick={handleSubmitBtnClick}
loading={isSubmitting}
disabled={submitDisabled}
>
Match
</Button>