diff --git a/packages/server/src/api/controllers/Banking/ExcludeBankTransactionsController.ts b/packages/server/src/api/controllers/Banking/ExcludeBankTransactionsController.ts index e425247d2..e38e818b3 100644 --- a/packages/server/src/api/controllers/Banking/ExcludeBankTransactionsController.ts +++ b/packages/server/src/api/controllers/Banking/ExcludeBankTransactionsController.ts @@ -46,6 +46,10 @@ export class ExcludeBankTransactionsController extends BaseController { query('account_id').optional().isNumeric().toInt(), query('page').optional().isNumeric().toInt(), query('page_size').optional().isNumeric().toInt(), + query('min_date').optional({ nullable: true }).isISO8601().toDate(), + query('max_date').optional({ nullable: true }).isISO8601().toDate(), + query('min_amount').optional({ nullable: true }).isFloat().toFloat(), + query('max_amount').optional({ nullable: true }).isFloat().toFloat(), ], this.validationResult, this.getExcludedBankTransactions.bind(this) diff --git a/packages/server/src/api/controllers/Banking/RecognizedTransactionsController.ts b/packages/server/src/api/controllers/Banking/RecognizedTransactionsController.ts index b52c4ebe1..15de0ae89 100644 --- a/packages/server/src/api/controllers/Banking/RecognizedTransactionsController.ts +++ b/packages/server/src/api/controllers/Banking/RecognizedTransactionsController.ts @@ -21,6 +21,10 @@ export class RecognizedTransactionsController extends BaseController { query('page').optional().isNumeric().toInt(), query('page_size').optional().isNumeric().toInt(), query('account_id').optional().isNumeric().toInt(), + query('min_date').optional({ nullable: true }).isISO8601().toDate(), + query('max_date').optional({ nullable: true }).isISO8601().toDate(), + query('min_amount').optional({ nullable: true }).isFloat().toFloat(), + query('max_amount').optional({ nullable: true }).isFloat().isFloat(), ], this.validationResult, this.getRecognizedTransactions.bind(this) diff --git a/packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts b/packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts index 0ddf5861a..554d22bf6 100644 --- a/packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts +++ b/packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts @@ -84,6 +84,10 @@ export default class NewCashflowTransactionController extends BaseController { param('id').exists().isNumeric().toInt(), query('page').optional().isNumeric().toInt(), query('page_size').optional().isNumeric().toInt(), + query('min_date').optional({ nullable: true }).isISO8601().toDate(), + query('max_date').optional({ nullable: true }).isISO8601().toDate(), + query('min_amount').optional({ nullable: true }).isFloat().toFloat(), + query('max_amount').optional({ nullable: true }).isFloat().toFloat(), ]; } diff --git a/packages/server/src/interfaces/CashflowService.ts b/packages/server/src/interfaces/CashflowService.ts index c1f55a86f..415682ae5 100644 --- a/packages/server/src/interfaces/CashflowService.ts +++ b/packages/server/src/interfaces/CashflowService.ts @@ -167,11 +167,18 @@ export interface CategorizeTransactionAsExpenseDTO { export interface IGetUncategorizedTransactionsQuery { page?: number; pageSize?: number; + minDate?: Date; + maxDate?: Date; + minAmount?: number; + maxAmount?: number; } - export interface IGetRecognizedTransactionsQuery { page?: number; pageSize?: number; accountId?: number; -} \ No newline at end of file + minDate?: Date; + maxDate?: Date; + minAmount?: number; + maxAmount?: number; +} diff --git a/packages/server/src/models/UncategorizedCashflowTransaction.ts b/packages/server/src/models/UncategorizedCashflowTransaction.ts index 2b86c9a4a..e1a98b0c0 100644 --- a/packages/server/src/models/UncategorizedCashflowTransaction.ts +++ b/packages/server/src/models/UncategorizedCashflowTransaction.ts @@ -1,8 +1,8 @@ /* eslint-disable global-require */ +import moment from 'moment'; import { Model, mixin } from 'objection'; import TenantModel from 'models/TenantModel'; import ModelSettings from './ModelSetting'; -import Account from './Account'; import UncategorizedCashflowTransactionMeta from './UncategorizedCashflowTransaction.meta'; export default class UncategorizedCashflowTransaction extends mixin( @@ -166,6 +166,28 @@ export default class UncategorizedCashflowTransaction extends mixin( pending(query) { query.where('pending', true); }, + + minAmount(query, minAmount) { + query.where('amount', '>=', minAmount); + }, + + maxAmount(query, maxAmount) { + query.where('amount', '<=', maxAmount); + }, + + toDate(query, toDate) { + const dateFormat = 'YYYY-MM-DD'; + const _toDate = moment(toDate).endOf('day').format(dateFormat); + + query.where('date', '<=', _toDate); + }, + + fromDate(query, fromDate) { + const dateFormat = 'YYYY-MM-DD'; + const _fromDate = moment(fromDate).startOf('day').format(dateFormat); + + query.where('date', '>=', _fromDate); + }, }; } diff --git a/packages/server/src/services/Banking/Exclude/GetExcludedBankTransactions.ts b/packages/server/src/services/Banking/Exclude/GetExcludedBankTransactions.ts index 41435f1b8..43bc523de 100644 --- a/packages/server/src/services/Banking/Exclude/GetExcludedBankTransactions.ts +++ b/packages/server/src/services/Banking/Exclude/GetExcludedBankTransactions.ts @@ -1,5 +1,6 @@ -import HasTenancyService from '@/services/Tenancy/TenancyService'; import { Inject, Service } from 'typedi'; +import moment from 'moment'; +import HasTenancyService from '@/services/Tenancy/TenancyService'; import { ExcludedBankTransactionsQuery } from './_types'; import { UncategorizedTransactionTransformer } from '@/services/Cashflow/UncategorizedTransactionTransformer'; import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable'; @@ -39,6 +40,18 @@ export class GetExcludedBankTransactionsService { if (_query.accountId) { q.where('account_id', _query.accountId); } + if (_query.minDate) { + q.modify('fromDate', _query.minDate); + } + if (_query.maxDate) { + q.modify('toDate', _query.maxDate); + } + if (_query.minAmount) { + q.modify('minAmount', _query.minAmount); + } + if (_query.maxAmount) { + q.modify('maxAmount', _query.maxAmount); + } }) .pagination(_query.page - 1, _query.pageSize); diff --git a/packages/server/src/services/Banking/Exclude/_types.ts b/packages/server/src/services/Banking/Exclude/_types.ts index c7aa571fd..5d1e2842d 100644 --- a/packages/server/src/services/Banking/Exclude/_types.ts +++ b/packages/server/src/services/Banking/Exclude/_types.ts @@ -4,6 +4,10 @@ export interface ExcludedBankTransactionsQuery { page?: number; pageSize?: number; accountId?: number; + minDate?: Date; + maxDate?: Date; + minAmount?: number; + maxAmount?: number; } export interface IBankTransactionUnexcludingEventPayload { diff --git a/packages/server/src/services/Cashflow/GetRecongizedTransactions.ts b/packages/server/src/services/Cashflow/GetRecongizedTransactions.ts index e0db018a4..7665180d0 100644 --- a/packages/server/src/services/Cashflow/GetRecongizedTransactions.ts +++ b/packages/server/src/services/Cashflow/GetRecongizedTransactions.ts @@ -23,7 +23,7 @@ export class GetRecognizedTransactionsService { ) { const { UncategorizedCashflowTransaction } = this.tenancy.models(tenantId); - const _filter = { + const _query = { page: 1, pageSize: 20, ...filter, @@ -41,11 +41,26 @@ export class GetRecognizedTransactionsService { // Exclude the pending transactions. q.modify('notPending'); - if (_filter.accountId) { - q.where('accountId', _filter.accountId); + if (_query.accountId) { + q.where('accountId', _query.accountId); + } + if (_query.minDate) { + q.modify('fromDate', _query.minDate); + } + if (_query.maxDate) { + q.modify('toDate', _query.maxDate); + } + if (_query.minAmount) { + q.modify('minAmount', _query.minAmount); + } + if (_query.maxAmount) { + q.modify('maxAmount', _query.maxAmount); + } + if (_query.accountId) { + q.where('accountId', _query.accountId); } }) - .pagination(_filter.page - 1, _filter.pageSize); + .pagination(_query.page - 1, _query.pageSize); const data = await this.transformer.transform( tenantId, diff --git a/packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts b/packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts index 76625536c..afc2d058b 100644 --- a/packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts +++ b/packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts @@ -62,6 +62,19 @@ export class GetUncategorizedTransactions { q.whereNull('matchedBankTransactions.id'); q.orderBy('date', 'DESC'); + + if (_query.minDate) { + q.modify('fromDate', _query.minDate); + } + if (_query.maxDate) { + q.modify('toDate', _query.maxDate); + } + if (_query.minAmount) { + q.modify('minAmount', _query.minAmount); + } + if (_query.maxAmount) { + q.modify('maxAmount', _query.maxAmount); + } }) .pagination(_query.page - 1, _query.pageSize); diff --git a/packages/webapp/src/components/TagsControl/TagsControl.module.scss b/packages/webapp/src/components/TagsControl/TagsControl.module.scss index e548e2ced..0e5f626d6 100644 --- a/packages/webapp/src/components/TagsControl/TagsControl.module.scss +++ b/packages/webapp/src/components/TagsControl/TagsControl.module.scss @@ -2,7 +2,6 @@ display: flex; flex-direction: row; gap: 10px; - margin-bottom: 14px; } .tag{ diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.module.scss new file mode 100644 index 000000000..80d22ade7 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.module.scss @@ -0,0 +1,5 @@ + + +.dateFieldGroup{ + margin-bottom: 0; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.tsx new file mode 100644 index 000000000..f15debd91 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.tsx @@ -0,0 +1,235 @@ +// @ts-nocheck +import { Button, FormGroup, Intent, Position } from '@blueprintjs/core'; +import * as Yup from 'yup'; +import moment from 'moment'; +import { Form, Formik, FormikConfig, useFormikContext } from 'formik'; +import { + FDateInput, + FFormGroup, + FSelect, + Group, + Icon, + Stack, +} from '@/components'; + +const defaultValues = { + period: 'all_dates', + fromDate: '', + toDate: '', +}; + +const validationSchema = Yup.object().shape({ + fromDate: Yup.date() + .nullable() + .required('From Date is required') + .max(Yup.ref('toDate'), 'From Date cannot be after To Date'), + toDate: Yup.date() + .nullable() + .required('To Date is required') + .min(Yup.ref('fromDate'), 'To Date cannot be before From Date'), +}); + +interface AccountTransactionsDateFilterFormValues { + period: string; + fromDate: string; + toDate: string; +} + +interface UncategorizedTransactionsDateFilterProps { + initialValues?: AccountTransactionsDateFilterFormValues; + onSubmit?: FormikConfig['onSubmit']; +} + +export function AccountTransactionsDateFilterForm({ + initialValues = {}, + onSubmit, +}: UncategorizedTransactionsDateFilterProps) { + const handleSubmit = (values, bag) => { + return onSubmit && onSubmit(values, bag); + }; + + const formInitialValues = { + ...defaultValues, + ...initialValues, + }; + + return ( + +
+ + + + + + date.toLocaleDateString()} + parseDate={(str) => new Date(str)} + inputProps={{ + fill: true, + placeholder: 'MM/DD/YYY', + leftElement: , + }} + /> + + + + date.toLocaleDateString()} + parseDate={(str) => new Date(str)} + inputProps={{ + fill: true, + placeholder: 'MM/DD/YYY', + leftElement: , + }} + /> + + + + + +
+ + ); +} + +function AccountTransactionsDateFilterFooter() { + const { submitForm, setValues } = useFormikContext(); + + const handleFilterBtnClick = () => { + submitForm(); + }; + const handleClearBtnClick = () => { + setValues({ + ...defaultValues, + }); + submitForm(); + }; + + return ( + + + + + + ); +} + +function AccountTransactionDatePeriodField() { + const { setFieldValue } = useFormikContext(); + + const handleItemChange = (item) => { + const { fromDate, toDate } = getDateRangePeriod(item.value); + + setFieldValue('fromDate', fromDate); + setFieldValue('toDate', toDate); + setFieldValue('period', item.value); + }; + + return ( + + + + ); +} + +const periodOptions = [ + { text: 'All Dates', value: 'all_dates' }, + { text: 'Custom', value: 'custom' }, + { text: 'Today', value: 'today' }, + { text: 'Yesterday', value: 'yesterday' }, + { text: 'This week', value: 'this_week' }, + { text: 'This year', value: 'this_year' }, + { text: 'This month', value: 'this_month' }, + { text: 'last week', value: 'last_week' }, + { text: 'Last year', value: 'last_year' }, + { text: 'Last month', value: 'last_month' }, + { text: 'Last month', value: 'last_month' }, +]; + +const getDateRangePeriod = (period: string) => { + switch (period) { + case 'today': + return { + fromDate: moment().startOf('day').toDate(), + toDate: moment().endOf('day').toDate(), + }; + case 'yesterday': + return { + fromDate: moment().subtract(1, 'days').startOf('day').toDate(), + toDate: moment().subtract(1, 'days').endOf('day').toDate(), + }; + case 'this_week': + return { + fromDate: moment().startOf('week').toDate(), + toDate: moment().endOf('week').toDate(), + }; + case 'this_month': + return { + fromDate: moment().startOf('month').toDate(), + toDate: moment().endOf('month').toDate(), + }; + case 'this_year': + return { + fromDate: moment().startOf('year').toDate(), + toDate: moment().endOf('year').toDate(), + }; + case 'last_week': + return { + fromDate: moment().subtract(1, 'weeks').startOf('week').toDate(), + toDate: moment().subtract(1, 'weeks').endOf('week').toDate(), + }; + case 'last_month': + return { + fromDate: moment().subtract(1, 'months').startOf('month').toDate(), + toDate: moment().subtract(1, 'months').endOf('month').toDate(), + }; + case 'last_year': + return { + fromDate: moment().subtract(1, 'years').startOf('year').toDate(), + toDate: moment().subtract(1, 'years').endOf('year').toDate(), + }; + case 'all_dates': + case 'custom': + default: + return { fromDate: null, toDate: null }; + } +}; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx index 21e82f9d9..ad46e586c 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizeFilter.tsx @@ -1,10 +1,12 @@ // @ts-nocheck -import * as R from 'ramda'; import { useMemo } from 'react'; +import * as R from 'ramda'; import { useAppQueryString } from '@/hooks'; -import { Group } from '@/components'; +import { Group, Stack, } from '@/components'; import { useAccountTransactionsContext } from './AccountTransactionsProvider'; import { TagsControl } from '@/components/TagsControl'; +import { AccountUncategorizedDateFilter } from './UncategorizedTransactions/AccountUncategorizedDateFilter'; +import { Divider } from '@blueprintjs/core'; export function AccountTransactionsUncategorizeFilter() { const { bankAccountMetaSummary } = useAccountTransactionsContext(); @@ -54,12 +56,17 @@ export function AccountTransactionsUncategorizeFilter() { ); return ( - - + + + + + + + ({ + uncategorizedTransactionsFilter, + })), +)(AccountUncategorizedTransactionsBootRoot); + const useAccountUncategorizedTransactionsContext = () => React.useContext(AccountUncategorizedTransactionsContext); diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTableBoot.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTableBoot.tsx index 9fd86a240..dc1d19860 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTableBoot.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTableBoot.tsx @@ -1,9 +1,11 @@ // @ts-nocheck import React from 'react'; import { flatten, map } from 'lodash'; +import * as R from 'ramda'; import { IntersectionObserver } from '@/components'; import { useAccountTransactionsContext } from '../AccountTransactionsProvider'; import { useExcludedBankTransactionsInfinity } from '@/hooks/query/bank-rules'; +import { withBanking } from '../../withBanking'; interface ExcludedBankTransactionsContextValue { isExcludedTransactionsLoading: boolean; @@ -27,7 +29,11 @@ interface ExcludedBankTransactionsTableBootProps { /** * Account uncategorized transctions provider. */ -function ExcludedBankTransactionsTableBoot({ +function ExcludedBankTransactionsTableBootRoot({ + // #withBanking + uncategorizedTransactionsFilter, + + // #ownProps children, }: ExcludedBankTransactionsTableBootProps) { const { accountId } = useAccountTransactionsContext(); @@ -44,6 +50,8 @@ function ExcludedBankTransactionsTableBoot({ } = useExcludedBankTransactionsInfinity({ page_size: 50, account_id: accountId, + min_date: uncategorizedTransactionsFilter?.fromDate || null, + max_date: uncategorizedTransactionsFilter.toDate || null, }); // Memorized the cashflow account transactions. const excludedBankTransactions = React.useMemo( @@ -84,6 +92,12 @@ function ExcludedBankTransactionsTableBoot({ ); } +const ExcludedBankTransactionsTableBoot = R.compose( + withBanking(({ uncategorizedTransactionsFilter }) => ({ + uncategorizedTransactionsFilter, + })), +)(ExcludedBankTransactionsTableBootRoot); + const useExcludedTransactionsBoot = () => React.useContext(ExcludedTransactionsContext); diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTableBoot.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTableBoot.tsx index 5d99b4a45..af0e7fed2 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTableBoot.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTableBoot.tsx @@ -1,9 +1,11 @@ // @ts-nocheck import React from 'react'; import { flatten, map } from 'lodash'; -import { IntersectionObserver } from '@/components'; +import * as R from 'ramda'; +import { IntersectionObserver, NumericInputCell } from '@/components'; import { useAccountTransactionsContext } from '../AccountTransactionsProvider'; import { useRecognizedBankTransactionsInfinity } from '@/hooks/query/bank-rules'; +import { withBanking } from '../../withBanking'; interface RecognizedTransactionsContextValue { isRecongizedTransactionsLoading: boolean; @@ -27,7 +29,10 @@ interface RecognizedTransactionsTableBootProps { /** * Account uncategorized transctions provider. */ -function RecognizedTransactionsTableBoot({ +function RecognizedTransactionsTableBootRoot({ + // #withBanking + uncategorizedTransactionsFilter, + children, }: RecognizedTransactionsTableBootProps) { const { accountId } = useAccountTransactionsContext(); @@ -44,6 +49,8 @@ function RecognizedTransactionsTableBoot({ } = useRecognizedBankTransactionsInfinity({ page_size: 50, account_id: accountId, + min_date: uncategorizedTransactionsFilter.fromDate || null, + max_date: uncategorizedTransactionsFilter?.toDate || null, }); // Memorized the cashflow account transactions. const recognizedTransactions = React.useMemo( @@ -84,6 +91,12 @@ function RecognizedTransactionsTableBoot({ ); } +const RecognizedTransactionsTableBoot = R.compose( + withBanking(({ uncategorizedTransactionsFilter }) => ({ + uncategorizedTransactionsFilter, + })), +)(RecognizedTransactionsTableBootRoot); + const useRecognizedTransactionsBoot = () => React.useContext(RecognizedTransactionsContext); diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedDateFilter.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedDateFilter.tsx new file mode 100644 index 000000000..7443a7e14 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedDateFilter.tsx @@ -0,0 +1,105 @@ +// @ts-nocheck +import { useState } from 'react'; +import * as R from 'ramda'; +import moment from 'moment'; +import { Box, Icon } from '@/components'; +import { Classes, Popover, Position } from '@blueprintjs/core'; +import { withBankingActions } from '../../withBankingActions'; +import { withBanking } from '../../withBanking'; +import { AccountTransactionsDateFilterForm } from '../AccountTransactionsDateFilter'; +import { TagButton } from './TagButton'; + +function AccountUncategorizedDateFilterRoot({ + uncategorizedTransactionsFilter, +}) { + const fromDate = uncategorizedTransactionsFilter?.fromDate; + const toDate = uncategorizedTransactionsFilter?.toDate; + + const fromDateFormatted = moment(fromDate).isSame( + moment().format('YYYY'), + 'year', + ) + ? moment(fromDate).format('MMM, DD') + : moment(fromDate).format('MMM, DD, YYYY'); + const toDateFormatted = moment(toDate).isSame(moment().format('YYYY'), 'year') + ? moment(toDate).format('MMM, DD') + : moment(toDate).format('MMM, DD, YYYY'); + + const buttonText = + fromDate && toDate + ? `Date: ${fromDateFormatted} → ${toDateFormatted}` + : 'Date Filter'; + + // Popover open state. + const [isOpen, setIsOpen] = useState(false); + + // Handle the filter form submitting. + const handleSubmit = () => { + setIsOpen(false); + }; + + return ( + + + + } + position={Position.RIGHT} + popoverClassName={Classes.POPOVER_CONTENT} + isOpen={isOpen} + onClose={() => setIsOpen(false)} + > + } + onClick={() => setIsOpen(!isOpen)} + > + {buttonText} + + + ); +} + +export const AccountUncategorizedDateFilter = R.compose( + withBanking(({ uncategorizedTransactionsFilter }) => ({ + uncategorizedTransactionsFilter, + })), +)(AccountUncategorizedDateFilterRoot); + +export const UncategorizedTransactionsDateFilter = R.compose( + withBankingActions, + withBanking(({ uncategorizedTransactionsFilter }) => ({ + uncategorizedTransactionsFilter, + })), +)( + ({ + // #withBankingActions + setUncategorizedTransactionsFilter, + + // #withBanking + uncategorizedTransactionsFilter, + + // #ownProps + onSubmit, + }) => { + const initialValues = { + ...uncategorizedTransactionsFilter, + }; + + const handleSubmit = (values) => { + setUncategorizedTransactionsFilter({ + fromDate: values.fromDate, + toDate: values.toDate, + }); + onSubmit && onSubmit(values); + }; + + return ( + + ); + }, +); diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss new file mode 100644 index 000000000..9bbc4f8d7 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss @@ -0,0 +1,11 @@ +.root{ + min-height: 26px; + border-radius: 15px; + font-size: 13px; + padding: 0 10px; + + &:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)) { + background: #fff; + border: 1px solid #e1e2e8; + } +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.tsx new file mode 100644 index 000000000..1b588a771 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.tsx @@ -0,0 +1,9 @@ +// @ts-nocheck +import { Button } from "@blueprintjs/core" +import styles from './TagButton.module.scss'; + + + +export const TagButton = (props) => { + return