QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize style of invoice details.

Browse Source 
feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.
This commit is contained in:
a.bouhuolia
2021-12-20 13:19:59 +02:00
parent fcd1a8849d
commit 4dda2a37aa
47 changed files with 795 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/containers/Sales/Invoices/InvoicesLanding/components.js
View File

@@ -27,53 +27,59 @@ import {
AbilitySubject,
} from '../../../../common/abilityOption';
export function InvoiceStatus({ invoice }) {
return (
<Choose>
<Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
<span className={'fully-paid-icon'}>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} />
</span>
</Choose.When>
<Choose.When condition={invoice.is_delivered}>
<Choose>
<Choose.When condition={invoice.is_overdue}>
<span className={'overdue-status'}>
{intl.get('overdue_by', { overdue: invoice.overdue_days })}
</span>
</Choose.When>
<Choose.Otherwise>
<span className={'due-status'}>
{intl.get('due_in', { due: invoice.remaining_days })}
</span>
</Choose.Otherwise>
</Choose>
<If condition={invoice.is_partially_paid}>
<span class="partial-paid">
{intl.get('day_partially_paid', {
due: formattedAmount(invoice.due_amount, invoice.currency_code),
})}
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(invoice.balance_amount, invoice.balance)}
/>
</If>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} round={true}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
);
}
export const statusAccessor = (row) => {
return (
<div className={'status-accessor'}>
<Choose>
<Choose.When condition={row.is_fully_paid && row.is_delivered}>
<span className={'fully-paid-icon'}>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} />
</span>
</Choose.When>
<Choose.When condition={row.is_delivered}>
<Choose>
<Choose.When condition={row.is_overdue}>
<span className={'overdue-status'}>
{intl.get('overdue_by', { overdue: row.overdue_days })}
</span>
</Choose.When>
<Choose.Otherwise>
<span className={'due-status'}>
{intl.get('due_in', { due: row.remaining_days })}
</span>
</Choose.Otherwise>
</Choose>
<If condition={row.is_partially_paid}>
<span class="partial-paid">
{intl.get('day_partially_paid', {
due: formattedAmount(row.due_amount, row.currency_code),
})}
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(row.balance_amount, row.balance)}
/>
</If>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} round={true}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
<InvoiceStatus invoice={row} />
</div>
);
};