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

client/src/components/Dashboard/DashboardViewsTabs.js

@@ -9,6 +9,7 @@ import { If, Icon } from 'components';
 export default function DashboardViewsTabs({
   initialViewId = 0,
   tabs,
+  defaultTabText = <T id={'all'} />,
   allTab = true,
   newViewTab = true,
   resourceName,
@@ -60,7 +61,7 @@ export default function DashboardViewsTabs({
       onChange={handleTabsChange}
     >
       {allTab && (
-        <Tab id={0} title={<T id={'all'} />} onClick={handleViewLinkClick} />
+        <Tab id={0} title={defaultTabText} onClick={handleViewLinkClick} />
       )}
       {mappedTabs.map((tab) => (
         <Tab id={tab.id} title={tab.name} onClick={handleTabClick} />

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

@@ -10,70 +10,41 @@ export const statusAccessor = (row) => {
   return (
     <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>
+          <span>
+            <T id={'paid'} />
+          </span>
+        </Choose.When>
+
         <Choose.When condition={row.is_delivered}>
           <Choose>
-            <Choose.When condition={row.is_overdue && !row.is_partially_paid}>
+            <Choose.When condition={row.is_overdue}>
-              <span className={'overdue_status'}>
+              <span className={'overdue-status'}>
-                <p>
+                <T id={'overdue_by'} values={{ overdue: row.overdue_days }} />
-                  <T id={'overdue_by'} /> {row.overdue_days} <T id={'day'} />
-                </p>
-              </span>
-            </Choose.When>
-
-            <Choose.When condition={!row.is_overdue && row.is_partially_paid}>
-              <div>
-                <span>
-                  <p>
-                    <T id={'due_in'} /> {row.remaining_days}{' '}
-                    <T id={'day_partially_paid'} /> ${row.due_amount}{' '}
-                    <T id={'due'} />
-                  </p>
-                </span>
-                <ProgressBar
-                  animate={false}
-                  stripes={false}
-                  intent={Intent.PRIMARY}
-                  value={calculateStatus(row.payment_amount, row.balance)}
-                />
-              </div>
-            </Choose.When>
-
-            <Choose.When condition={row.is_overdue && row.is_partially_paid}>
-              <div>
-                <span>
-                  <p>
-                    <T id={'overdue_by'} /> {row.overdue_days}{' '}
-                    <T id={'day_partially_paid'} /> ${row.due_amount}{' '}
-                    <T id={'due'} />
-                  </p>
-                </span>
-                <ProgressBar
-                  animate={false}
-                  stripes={false}
-                  intent={Intent.PRIMARY}
-                  value={calculateStatus(row.payment_amount, row.balance)}
-                />
-              </div>
-            </Choose.When>
-
-            <Choose.When condition={row.is_fully_paid}>
-              <span className={'fully-paid'}>
-                <Icon icon="checkmark-16" iconSize={20} />
-              </span>
-              <span>
-                <T id={'paid'} />
               </span>
             </Choose.When>
             <Choose.Otherwise>
               <span className={'remaining-status'}>
-                <p>
+                <T id={'due_in'} values={{ due: row.remaining_days }} />
-                  <T id={'due_in'} /> {row.remaining_days} <T id={'day'} />
-                </p>
               </span>
             </Choose.Otherwise>
           </Choose>
-        </Choose.When>
 
+          <If condition={row.is_partially_paid}>
+            <span>
+              <T id={'day_partially_paid'} values={{ due: row.due_amount }} />
+            </span>
+            <ProgressBar
+              animate={false}
+              stripes={false}
+              intent={Intent.PRIMARY}
+              value={calculateStatus(row.payment_amount, row.balance)}
+            />
+          </If>
+        </Choose.When>
         <Choose.Otherwise>
           <Tag minimal={true}>
             <T id={'draft'} />

client/src/lang/en/index.js

@@ -869,12 +869,9 @@ export default {
   save_and_deliver: 'Save & Deliver',
   deliver_and_new: 'Deliver and new',
   deliver_continue_editing: 'Deliver (continue editing)',
-  due_in: 'Due in',
+  due_in: 'Due in {due} day.',
-  day_partially_paid: 'Day Partially paid,',
+  day_partially_paid: 'Partially paid {due} due.',
-  due: 'Due.',
+  overdue_by: 'Overdue by {overdue} day.',
-  overdue_by: 'Overdue by',
-  day: 'day.',
-  day_partially_paid: 'Day Partially paid',
   paid: 'Paid',
   your_account_has_been_locked:
     'Your account has been locked due to repeated failed login attempts. Please wait a few minutes before trying again.',
@@ -929,6 +926,6 @@ export default {
     'Are you sure you want to inactive this item? You will be able to activate it later',
   are_sure_to_activate_this_item:
     'Are you sure you want to activate this item? You will be able to inactivate it later',
-    inactivate_item: 'Inactivate Item',
+  inactivate_item: 'Inactivate Item',
-    activate_item: 'Activate Item',
+  activate_item: 'Activate Item',
-  };
+};

client/src/style/pages/invoice-form.scss

@@ -45,12 +45,12 @@
   }
 }
 .status-accessor {
-  span > p {
+  span {
     font-size: 13px;
     font-weight: 400;
     line-height: 1.5;
   }
-  .fully-paid {
+  .fully-paid-status {
     display: inline-block;
     border-radius: 50%;
     background: #2ba01d;
@@ -62,14 +62,14 @@
     background: rgba(92, 112, 128, 0.2);
     border-radius: 40px;
     display: block;
-    height: 6px;
+    height: 5px;
     overflow: hidden;
     position: relative;
+    margin-top: 5px;
     width: 80%;
   }
-}
+  &.overdue-status {
-
+  }
-.overdue-status {
+  &.remaining-status {
-}
+  }
-.remaining-status {
 }