mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
fix: style matching bank transactions
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user