feat: optimize status tags

This commit is contained in:
Ahmed Bouhuolia
2025-10-23 12:40:08 +02:00
parent 9d714ac78e
commit 5c466464a2
9 changed files with 153 additions and 165 deletions

View File

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

View File

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