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}

client/src/lang/en/index.js

@@ -859,7 +859,7 @@ export default {
   deliver_and_new: 'Deliver and new',
   deliver_continue_editing: 'Deliver (continue editing)',
   due_in: 'Due in {due} day.',
-  day_partially_paid: 'Partially paid {due} due.',
+  day_partially_paid: 'Partially paid, {currencySign}{due} due.',
   overdue_by: 'Overdue by {overdue} day.',
   paid: 'Paid',
   your_account_has_been_locked:

client/src/static/json/icons.js

@@ -361,5 +361,11 @@ export default {
       'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z'
     ],
     viewBox: '0 0 23 12',
+  },
+  "small-tick": {
+    path: [
+      'M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm5-14c-.28 0-.53.11-.71.29L8 12.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l7-7A1.003 1.003 0 0015 6z'
+    ],
+    viewBox: '0 0 20 20'
   }
 };

client/src/style/App.scss

@@ -91,7 +91,6 @@ body.hide-scrollbar .Pane2{
   max-width: 300px;
 }
 
- 
 .form-group--select-list{
   button{
     justify-content: start;

client/src/style/pages/SaleInvoice/List.scss

@@ -0,0 +1,56 @@
+
+
+.dashboard__insider--sales-invoices-list{
+
+
+  .bigcapital-datatable{
+
+
+    .tbody{
+      .status.td{
+
+        .status-accessor{
+          padding: 4px 0;
+        }
+        .overdue-status,
+        .due-status{
+          display: block;
+          font-size: 13.5px;
+          line-height: 1.4;
+
+          + .partial-paid{
+            margin-top: 5px;
+          }
+        }
+        .overdue-status{
+          color: #ec5b0a;
+        }
+        .due-status{
+          color: #1652c8;
+        }
+        .partial-paid{
+          font-size: 12px;
+          line-height: 1;
+          display: block;
+          margin-bottom: 8px;
+          opacity: 0.65;
+        }
+        .fully-paid-icon{
+          width: 18px;
+          height: 18px;
+          margin-right: 8px;
+
+          svg {
+            fill: #2ba01d;
+          }
+        }
+        .fully-paid-text{
+          font-size: 13.5px;
+        }
+        .bp3-progress-bar{
+          height: 6px;
+        }
+      }
+    }
+  }
+}