fix: style matching bank transactions

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

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

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 {

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 {