Merge branch 'master' of https://github.com/abouolia/Bigcapital

client/src/containers/Sales/Invoice/InvoicesDataTable.js

@@ -117,50 +117,49 @@ function InvoicesDataTable({
         id: 'invoice_date',
         Header: formatMessage({ id: 'invoice_date' }),
         accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
-        width: 140,
+        width: 110,
         className: 'invoice_date',
       },
       {
         id: 'customer_id',
         Header: formatMessage({ id: 'customer_name' }),
         accessor: 'customer.display_name',
-        width: 140,
+        width: 180,
         className: 'customer_id',
       },
       {
         id: 'invoice_no',
         Header: formatMessage({ id: 'invoice_no__' }),
         accessor: (row) => (row.invoice_no ? `#${row.invoice_no}` : null),
-        width: 140,
+        width: 100,
         className: 'invoice_no',
       },
-
-      {
-        id: 'due_date',
-        Header: formatMessage({ id: 'due_date' }),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'due_date',
-      },
       {
         id: 'balance',
         Header: formatMessage({ id: 'balance' }),
         accessor: (r) => <Money amount={r.balance} currency={baseCurrency} />,
-        width: 140,
+        width: 110,
         className: 'balance',
       },
       {
         id: 'status',
         Header: formatMessage({ id: 'status' }),
         accessor: (row) => statusAccessor(row),
-        width: 140,
+        width: 160,
         className: 'status',
       },
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 110,
+        className: 'due_date',
+      },
       {
         id: 'reference_no',
         Header: formatMessage({ id: 'reference_no' }),
         accessor: 'reference_no',
-        width: 140,
+        width: 90,
         className: 'reference_no',
       },
       {

client/src/containers/Sales/Invoice/InvoicesList.js

@@ -3,8 +3,11 @@ import { Route, Switch, useHistory } from 'react-router-dom';
 import { useQuery, queryCache } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 
+import 'style/pages/SaleInvoice/List.scss';
+
 import AppToaster from 'components/AppToaster';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl'
+;
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
@@ -161,7 +164,7 @@ function InvoicesList({
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
-      name={'sales_invoices'}
+      name={'sales-invoices-list'}
     >
       <InvoiceActionsBar
         // onBulkDelete={}

client/src/containers/Sales/Invoice/components.js

@@ -11,10 +11,10 @@ export const statusAccessor = (row) => {
     <div className={'status-accessor'}>
       <Choose>
         <Choose.When condition={row.is_fully_paid && row.is_delivered}>
-          <span className={'fully-paid-status'}>
-            <Icon icon="checkmark-16" iconSize={17} />
+          <span className={'fully-paid-icon'}>
+            <Icon icon="small-tick" iconSize={18} />
           </span>
-          <span>
+          <span class="fully-paid-text">
             <T id={'paid'} />
           </span>
         </Choose.When>
@@ -27,15 +27,21 @@ export const statusAccessor = (row) => {
               </span>
             </Choose.When>
             <Choose.Otherwise>
-              <span className={'remaining-status'}>
+              <span className={'due-status'}>
                 <T id={'due_in'} values={{ due: row.remaining_days }} />
               </span>
             </Choose.Otherwise>
           </Choose>
 
           <If condition={row.is_partially_paid}>
-            <span>
-              <T id={'day_partially_paid'} values={{ due: row.due_amount }} />
+            <span class="partial-paid">
+              <T
+                id={'day_partially_paid'}
+                values={{
+                  due: row.due_amount,
+                  currencySign: '$',
+                }}
+              />
             </span>
             <ProgressBar
               animate={false}