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

feat: optimize status tags (#829)

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-23 12:42:16 +02:00
committed by GitHub
parent 3bd0e89146 5c466464a2
commit fb6bfdee8e
9 changed files with 153 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/src/components/Aside/Aside.tsx
View File

@@ -1,5 +1,6 @@
import { Button, Classes } from '@blueprintjs/core'; import { Button, Classes } from '@blueprintjs/core';
import clsx from 'classnames'; import clsx from 'classnames';
import { useIsDarkMode } from '@/hooks/useDarkMode';
import { Box, BoxProps, Group } from '../Layout'; import { Box, BoxProps, Group } from '../Layout';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
import styles from './Aside.module.scss'; import styles from './Aside.module.scss';
@@ -21,6 +22,7 @@ export function Aside({
classNames, classNames,
className className
}: AsideProps) { }: AsideProps) {
const isDarkMode = useIsDarkMode();
const handleClose = () => { const handleClose = () => {
onClose && onClose(); onClose && onClose();
}; };
@@ -32,7 +34,7 @@ export function Aside({
<Button <Button
aria-label="Close" aria-label="Close"
className={Classes.DIALOG_CLOSE_BUTTON} className={Classes.DIALOG_CLOSE_BUTTON}
icon={<Icon icon={'smallCross'} color={'#000'} />} icon={<Icon icon={'smallCross'} color={isDarkMode ? '#fff' : '#000'} />}
minimal={true} minimal={true}
onClick={handleClose} onClick={handleClose}
/> />

6
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
View File

@@ -4,12 +4,14 @@
--item-active-border: #88abdb; --item-active-border: #88abdb;
--item-label-text: #252a33; --item-label-text: #252a33;
--item-date-text: #5c7080; --item-date-text: #5c7080;
--item-border-hover: #c0c0c0;
:global(.bp4-dark) & { :global(.bp4-dark) & {
--item-background: var(--color-dark-gray4); --item-background: var(--color-dark-gray3);
--item-border: rgba(255, 255, 255, 0.2); --item-border: rgba(255, 255, 255, 0.2);
--item-date-text: var(--color-light-gray1); --item-date-text: var(--color-light-gray1);
--item-label-text: var(--color-light-gray4); --item-label-text: var(--color-light-gray4);
--item-border-hover: rgba(255, 255, 255, 0.45);
} }
background: var(--item-background); background: var(--item-background);
border-radius: 5px; border-radius: 5px;
@@ -27,7 +29,7 @@
} }
} }
&:hover:not(.active) { &:hover:not(.active) {
border-color: #c0c0c0; border-color: var(--item-border-hover);
} }
} }

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

@@ -27,6 +27,7 @@ import {
} from '../withBankingActions'; } from '../withBankingActions';
import { withBanking } from '../withBanking'; import { withBanking } from '../withBanking';
import { MatchingReconcileTransactionForm } from './MatchingReconcileTransactionAside/MatchingReconcileTransactionForm'; import { MatchingReconcileTransactionForm } from './MatchingReconcileTransactionAside/MatchingReconcileTransactionForm';
import { useIsDarkMode } from '@/hooks/useDarkMode';
import styles from './CategorizeTransactionAside.module.scss'; import styles from './CategorizeTransactionAside.module.scss';
const initialValues = { const initialValues = {
@@ -119,11 +120,10 @@ const MatchingBankTransactionFormContent = R.compose(
withBanking(({ openReconcileMatchingTransaction }) => ({ withBanking(({ openReconcileMatchingTransaction }) => ({
openReconcileMatchingTransaction, openReconcileMatchingTransaction,
})), })),
)( )(({
({
// #withBanking // #withBanking
openReconcileMatchingTransaction, openReconcileMatchingTransaction,
}) => { }) => {
const { const {
isMatchingTransactionsFetching, isMatchingTransactionsFetching,
isMatchingTransactionsSuccess, isMatchingTransactionsSuccess,
@@ -178,8 +178,7 @@ const MatchingBankTransactionFormContent = R.compose(
{!openReconcileMatchingTransaction && <MatchTransactionFooter />} {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
</> </>
); );
}, });
);
function MatchingBankTransactionContent() { function MatchingBankTransactionContent() {
return ( return (
@@ -296,21 +295,21 @@ function MatchTransactionField({
); );
} }
interface MatchTransctionFooterProps extends WithBankingActionsProps {} interface MatchTransctionFooterProps extends WithBankingActionsProps { }
/** /**
* Renders the match transactions footer. * Renders the match transactions footer.
* @returns {React.ReactNode} * @returns {React.ReactNode}
*/ */
const MatchTransactionFooter = R.compose(withBankingActions)( const MatchTransactionFooter = R.compose(withBankingActions)(({
({
closeMatchingTransactionAside, closeMatchingTransactionAside,
openReconcileMatchingTransaction, openReconcileMatchingTransaction,
}: MatchTransctionFooterProps) => { }: MatchTransctionFooterProps) => {
const { submitForm, isSubmitting } = useFormikContext(); const { submitForm, isSubmitting } = useFormikContext();
const totalPending = useGetPendingAmountMatched(); const totalPending = useGetPendingAmountMatched();
const showReconcileLink = useIsShowReconcileTransactionLink(); const showReconcileLink = useIsShowReconcileTransactionLink();
const submitDisabled = totalPending !== 0; const submitDisabled = totalPending !== 0;
const isDarkMode = useIsDarkMode();
const handleCancelBtnClick = () => { const handleCancelBtnClick = () => {
closeMatchingTransactionAside(); closeMatchingTransactionAside();
@@ -337,7 +336,11 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
</AnchorButton> </AnchorButton>
)} )}
<Text <Text
style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }} style={{
fontSize: 14,
marginLeft: 'auto',
color: isDarkMode ? 'var(--color-light-gray1)' : '#404854',
}}
tagName="span" tagName="span"
> >
Pending <FormatNumber value={totalPending} currency={'USD'} /> Pending <FormatNumber value={totalPending} currency={'USD'} />
@@ -362,7 +365,6 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
</Box> </Box>
</Box> </Box>
); );
}, });
);
MatchTransactionFooter.displayName = 'MatchTransactionFooter'; MatchTransactionFooter.displayName = 'MatchTransactionFooter';

31
packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
View File

@@ -7,7 +7,6 @@ import {
MenuItem, MenuItem,
MenuDivider, MenuDivider,
Tag, Tag,
ProgressBar,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import clsx from 'classnames'; import clsx from 'classnames';
import { import {
@@ -21,7 +20,6 @@ import {
import { import {
formattedAmount, formattedAmount,
safeCallback, safeCallback,
calculateStatus,
} from '@/utils'; } from '@/utils';
import { import {
BillAction, BillAction,
@@ -108,42 +106,35 @@ export function StatusAccessor(bill) {
<div className={'status-accessor'}> <div className={'status-accessor'}>
<Choose> <Choose>
<Choose.When condition={bill.is_fully_paid && bill.is_open}> <Choose.When condition={bill.is_fully_paid && bill.is_open}>
<span className={'fully-paid-icon'}> <Tag round intent={Intent.SUCCESS}>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} /> <T id={'paid'} />
</span> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={bill.is_open}> <Choose.When condition={bill.is_open}>
<Choose> <Choose>
<Choose.When condition={bill.is_overdue}> <Choose.When condition={bill.is_overdue}>
<span className={'overdue-status'}> <Tag round intent={Intent.DANGER}>
{intl.get('overdue_by', { overdue: bill.overdue_days })} {intl.get('overdue_by', { overdue: bill.overdue_days })}
</span> </Tag>
</Choose.When> </Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<span className={'due-status'}> <Tag round intent={Intent.WARNING}>
{intl.get('due_in', { due: bill.remaining_days })} {intl.get('due_in', { due: bill.remaining_days })}
</span> </Tag>
</Choose.Otherwise> </Choose.Otherwise>
</Choose> </Choose>
<If condition={bill.is_partially_paid}> <If condition={bill.is_partially_paid}>
<span className="partial-paid"> <Tag round intent={Intent.PRIMARY}>
{intl.get('day_partially_paid', { {intl.get('day_partially_paid', {
due: formattedAmount(bill.due_amount, bill.currency_code), due: formattedAmount(bill.due_amount, bill.currency_code),
})} })}
</span> </Tag>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(bill.balance, bill.amount)}
/>
</If> </If>
</Choose.When> </Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<Tag minimal={true} round={true}> <Tag round>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </Tag>
</Choose.Otherwise> </Choose.Otherwise>

6
packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
View File

@@ -81,19 +81,19 @@ export function StatusAccessor(creditNote) {
<div> <div>
<Choose> <Choose>
<Choose.When condition={creditNote.is_open}> <Choose.When condition={creditNote.is_open}>
<Tag minimal={true} intent={Intent.WARNING} round={true}> <Tag intent={Intent.WARNING} round>
<T id={'open'} /> <T id={'open'} />
</Tag> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={creditNote.is_closed}> <Choose.When condition={creditNote.is_closed}>
<Tag minimal={true} intent={Intent.SUCCESS} round={true}> <Tag intent={Intent.SUCCESS} round>
<T id={'closed'} /> <T id={'closed'} />
</Tag> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={creditNote.is_draft}> <Choose.When condition={creditNote.is_draft}>
<Tag minimal={true} round={true}> <Tag round>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </Tag>
</Choose.When> </Choose.When>

6
packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
View File

@@ -80,19 +80,19 @@ export function StatusAccessor(creditNote) {
<div> <div>
<Choose> <Choose>
<Choose.When condition={creditNote.is_open}> <Choose.When condition={creditNote.is_open}>
<Tag intent={Intent.WARNING} minimal={true} round={true}> <Tag intent={Intent.WARNING} round>
<T id={'open'} /> <T id={'open'} />
</Tag> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={creditNote.is_closed}> <Choose.When condition={creditNote.is_closed}>
<Tag intent={Intent.SUCCESS} minimal={true} round={true}> <Tag intent={Intent.SUCCESS} round>
<T id={'closed'} /> <T id={'closed'} />
</Tag> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={creditNote.is_draft}> <Choose.When condition={creditNote.is_draft}>
<Tag intent={Intent.NONE} minimal={true} round={true}> <Tag intent={Intent.NONE} round>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </Tag>
</Choose.When> </Choose.When>

31
packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
View File

@@ -6,7 +6,6 @@ import {
Menu, Menu,
MenuItem, MenuItem,
MenuDivider, MenuDivider,
ProgressBar,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames'; import clsx from 'classnames';
@@ -20,7 +19,7 @@ import {
Icon, Icon,
Can, Can,
} from '@/components'; } from '@/components';
import { formattedAmount, safeCallback, calculateStatus } from '@/utils'; import { formattedAmount, safeCallback } from '@/utils';
import { import {
SaleInvoiceAction, SaleInvoiceAction,
PaymentReceiveAction, PaymentReceiveAction,
@@ -31,44 +30,36 @@ export function InvoiceStatus({ invoice }) {
return ( return (
<Choose> <Choose>
<Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}> <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
<span className={'fully-paid-icon'}> <Tag intent={Intent.SUCCESS} round>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} /> <T id={'paid'} />
</span> </Tag>
</Choose.When> </Choose.When>
<Choose.When condition={invoice.is_delivered}> <Choose.When condition={invoice.is_delivered}>
<Choose> <Choose>
<Choose.When condition={invoice.is_overdue}> <Choose.When condition={invoice.is_overdue}>
<span className={'overdue-status'}> <Tag intent={Intent.DANGER} round>
{intl.get('overdue_by', { overdue: invoice.overdue_days })} {intl.get('overdue_by', { overdue: invoice.overdue_days })}
</span> </Tag>
</Choose.When> </Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<span className={'due-status'}> <Tag intent={Intent.WARNING} round>
{intl.get('due_in', { due: invoice.remaining_days })} {intl.get('due_in', { due: invoice.remaining_days })}
</span> </Tag>
</Choose.Otherwise> </Choose.Otherwise>
</Choose> </Choose>
<If condition={invoice.is_partially_paid}> <If condition={invoice.is_partially_paid}>
<span class="partial-paid"> <Tag intent={Intent.PRIMARY} round>
{intl.get('day_partially_paid', { {intl.get('day_partially_paid', {
due: formattedAmount(invoice.due_amount, invoice.currency_code), due: formattedAmount(invoice.due_amount, invoice.currency_code),
})} })}
</span> </Tag>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(invoice.balance_amount, invoice.balance)}
/>
</If> </If>
</Choose.When> </Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<Tag minimal={true} round={true}> <Tag round>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </Tag>
</Choose.Otherwise> </Choose.Otherwise>

4
packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
View File

@@ -96,13 +96,13 @@ export function StatusAccessor(receipt) {
return ( return (
<Choose> <Choose>
<Choose.When condition={receipt.is_closed}> <Choose.When condition={receipt.is_closed}>
<Tag minimal={true} intent={Intent.SUCCESS} round={true}> <Tag intent={Intent.SUCCESS} round>
<T id={'closed'} /> <T id={'closed'} />
</Tag> </Tag>
</Choose.When> </Choose.When>
<Choose.Otherwise> <Choose.Otherwise>
<Tag minimal={true} intent={Intent.WARNING} round={true}> <Tag intent={Intent.WARNING} round>
<T id={'draft'} /> <T id={'draft'} />
</Tag> </Tag>
</Choose.Otherwise> </Choose.Otherwise>

2
packages/webapp/src/style/_variables.scss
View File

@@ -572,7 +572,7 @@ body.bp4-dark {
// Aside // Aside
--color-aside-background: #fff; --color-aside-background: #fff;
--color-aside-background: var(--color-dark-gray2); --color-aside-background: var(--color-dark-gray1);
--color-aside-title-background: #fff; --color-aside-title-background: #fff;
--color-aside-title-background: var(--color-dark-gray1); --color-aside-title-background: var(--color-dark-gray1);