fix: cashflow service Arabic localization.

src/components/App.js

@@ -14,7 +14,7 @@ import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import Authentication from 'components/Authentication';
 
-import { SplashScreen } from '../components';
+import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';
 
 /**
@@ -23,16 +23,18 @@ import { queryConfig } from '../hooks/query/base';
 function AppInsider({ history }) {
   return (
     <div className="App">
-      <Router history={history}>
+      <DashboardThemeProvider>
-        <Switch>
+        <Router history={history}>
-          <Route path={'/auth'} component={Authentication} />
+          <Switch>
-          <Route path={'/'}>
+            <Route path={'/auth'} component={Authentication} />
-            <PrivateRoute component={DashboardPrivatePages} />
+            <Route path={'/'}>
-          </Route>
+              <PrivateRoute component={DashboardPrivatePages} />
-        </Switch>
+            </Route>
-      </Router>
+          </Switch>
+        </Router>
 
-      <GlobalErrors />
+        <GlobalErrors />
+      </DashboardThemeProvider>
     </div>
   );
 }

src/components/BankAccounts/index.js

@@ -4,6 +4,94 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+const ACCOUNT_TYPE = {
+  CASH: 'cash',
+  BANK: 'bank',
+  CREDIT_CARD: 'credit-card',
+};
+
+const ACCOUNT_TYPE_PAIR_ICON = {
+  [ACCOUNT_TYPE.CASH]: 'payments',
+  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
+  [ACCOUNT_TYPE.BANK]: 'account-balance',
+};
+
+function BankAccountMetaLine({ title, value, className }) {
+  return (
+    <MetaLineWrap className={className}>
+      <MetaLineTitle>{title}</MetaLineTitle>
+      {value && <MetaLineValue>{value}</MetaLineValue>}
+    </MetaLineWrap>
+  );
+}
+
+function BankAccountBalance({ amount, loading }) {
+  return (
+    <BankAccountBalanceWrap>
+      <BankAccountBalanceAmount
+        className={clsx({
+          [Classes.SKELETON]: loading,
+        })}
+      >
+        {amount}
+      </BankAccountBalanceAmount>
+      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
+    </BankAccountBalanceWrap>
+  );
+}
+
+function BankAccountTypeIcon({ type }) {
+  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
+
+  if (!icon) {
+    return;
+  }
+  return (
+    <AccountIconWrap>
+      <Icon icon={icon} iconSize={18} />
+    </AccountIconWrap>
+  );
+}
+
+export function BankAccount({
+  title,
+  code,
+  type,
+  balance,
+  loading = false,
+  updatedBeforeText,
+  ...restProps
+}) {
+  return (
+    <BankAccountWrap {...restProps}>
+      <BankAccountHeader>
+        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
+          {title}
+        </BankAccountTitle>
+        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
+          {code}
+        </BnakAccountCode>
+        {!loading && <BankAccountTypeIcon type={type} />}
+      </BankAccountHeader>
+
+      <BankAccountMeta>
+        <BankAccountMetaLine
+          title={intl.get('cash_flow.label_account_transcations')}
+          value={2}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+        <BankAccountMetaLine
+          title={updatedBeforeText}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+      </BankAccountMeta>
+
+      <BankAccountBalance amount={balance} loading={loading} />
+    </BankAccountWrap>
+  );
+}
 
 const BankAccountWrap = styled.div`
   width: 225px;
@@ -91,13 +179,15 @@ const MetaLineValue = styled.div`
   border-radius: 9.6px;
   font-weight: normal;
   text-transform: none;
-  margin-left: auto;
   width: 30px;
   min-width: 30px;
   height: 16px;
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
+
+  ${whenLtr(`margin-left: auto;`)}
+  ${whenRtl(`margin-right: auto;`)}
 `;
 
 const BankAccountMeta = styled.div`
@@ -107,98 +197,14 @@ const BankAccountMeta = styled.div`
 export const BankAccountsList = styled.div`
   display: flex;
   margin: -8px;
+  flex-wrap: wrap;
 `;
 
 const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
-  right: 12px;
   color: #abb3bb;
+
+  ${whenLtr(`right: 12px;`)}
+  ${whenRtl(`left: 12px;`)}
 `;
-
-function BankAccountMetaLine({ title, value, className }) {
-  return (
-    <MetaLineWrap className={className}>
-      <MetaLineTitle>{title}</MetaLineTitle>
-      {value && <MetaLineValue>{value}</MetaLineValue>}
-    </MetaLineWrap>
-  );
-}
-
-function BankAccountBalance({ amount, loading }) {
-  return (
-    <BankAccountBalanceWrap>
-      <BankAccountBalanceAmount
-        className={clsx({
-          [Classes.SKELETON]: loading,
-        })}
-      >
-        {amount}
-      </BankAccountBalanceAmount>
-      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
-    </BankAccountBalanceWrap>
-  );
-}
-
-const ACCOUNT_TYPE = {
-  CASH: 'cash',
-  BANK: 'bank',
-  CREDIT_CARD: 'credit-card',
-};
-
-const ACCOUNT_TYPE_PAIR_ICON = {
-  [ACCOUNT_TYPE.CASH]: 'payments',
-  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
-  [ACCOUNT_TYPE.BANK]: 'account-balance',
-};
-
-function BankAccountTypeIcon({ type }) {
-  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
-
-  if (!icon) {
-    return;
-  }
-  return (
-    <AccountIconWrap>
-      <Icon icon={icon} iconSize={18} />
-    </AccountIconWrap>
-  );
-}
-
-export function BankAccount({
-  title,
-  code,
-  type,
-  balance,
-  loading = false,
-  updatedBeforeText,
-  ...restProps
-}) {
-  return (
-    <BankAccountWrap {...restProps}>
-      <BankAccountHeader>
-        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
-          {title}
-        </BankAccountTitle>
-        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
-          {code}
-        </BnakAccountCode>
-        {!loading && <BankAccountTypeIcon type={type} />}
-      </BankAccountHeader>
-
-      <BankAccountMeta>
-        <BankAccountMetaLine
-          title={intl.get('cash_flow.label_account_transcations')}
-          value={2}
-          className={clsx({ [Classes.SKELETON]: loading })}
-        />
-        <BankAccountMetaLine
-          title={updatedBeforeText}
-          className={clsx({ [Classes.SKELETON]: loading })}
-        />
-      </BankAccountMeta>
-
-      <BankAccountBalance amount={balance} loading={loading} />
-    </BankAccountWrap>
-  );
-}

src/components/Dashboard/DashboardThemeProvider.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useAppIntlContext } from '../AppIntlProvider';
+
+export function DashboardThemeProvider({ children }) {
+  const { direction } = useAppIntlContext();
+
+  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+}

src/components/Dashboard/index.js

@@ -1,4 +1,3 @@
-
-
 export * from './SplashScreen';
 export * from './DashboardBoot';
+export * from './DashboardThemeProvider';

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -16,7 +16,9 @@ import { useMemorizedColumnsWidths } from '../../../hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
+
 import { compose } from 'utils';
+import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -79,13 +81,7 @@ function AccountTransactionsDataTable({
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
-      noResults={
+      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
-        <T
-          id={
-            'cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account'
-          }
-        />
-      }
       className="table-constrant"
       payload={{
         onViewDetails: handleViewDetailCashflowTransaction,
@@ -133,10 +129,9 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
+        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
       }
     }
   }
 `;
-
-const DashboardRegularTable = styled(DataTable)``;

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -14,6 +14,7 @@ import { curry } from 'lodash/fp';
 
 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { whenRtl, whenLtr } from 'utils/styled-components';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -62,7 +63,7 @@ function AccountBalanceItem() {
 
   return (
     <AccountBalanceItemWrap>
-      Balance in Bigcapital {''}
+      {intl.get('cash_flow_transaction.balance_in_bigcapital')} {''}
       <AccountBalanceAmount>
         {currentAccount.formatted_amount}
       </AccountBalanceAmount>
@@ -159,8 +160,9 @@ const AccountSwitchText = styled.div`
 const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
-  margin-left: 10px;
   color: rgb(31, 50, 85);
+  ${whenLtr(`margin-left: 10px;`)}
+  ${whenRtl(`margin-right: 10px;`)}
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -178,6 +180,7 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    margin-right: 5px;
+    ${whenLtr(`margin-right: 5px;`)}
+    ${whenRtl(`margin-left: 5px;`)}
   }
 `;

src/containers/CashFlow/AccountTransactions/components.js

@@ -45,6 +45,8 @@ export function useAccountTransactionsColumns() {
         Cell: FormatDateCell,
         width: 110,
         className: 'date',
+        clickable: true,
+        textOverview: true,
       },
       {
         id: 'type',
@@ -53,6 +55,7 @@ export function useAccountTransactionsColumns() {
         className: 'type',
         width: 140,
         textOverview: true,
+        clickable: true,
       },
       {
         id: 'transaction_number',
@@ -60,6 +63,8 @@ export function useAccountTransactionsColumns() {
         accessor: 'transaction_number',
         width: 160,
         className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
       },
       {
         id: 'reference_number',
@@ -67,6 +72,8 @@ export function useAccountTransactionsColumns() {
         accessor: 'reference_number',
         width: 160,
         className: 'reference_number',
+        clickable: true,
+        textOverview: true,
       },
       {
         id: 'deposit',
@@ -76,6 +83,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
+        clickable: true
       },
       {
         id: 'withdrawal',
@@ -85,6 +93,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
+        clickable: true
       },
       {
         id: 'running_balance',
@@ -94,6 +103,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
+        clickable: true
       },
       {
         id: 'balance',
@@ -102,6 +112,7 @@ export function useAccountTransactionsColumns() {
         className: 'balance',
         width: 150,
         textOverview: true,
+        clickable: true,
         align: 'right',
       },
     ],

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -151,7 +151,7 @@ const CashflowBankAccountEnhanced = compose(
 )(CashflowBankAccount);
 
 function getUpdatedBeforeText(createdAt) {
-  return ''
+  return '';
 }
 
 /**
@@ -170,11 +170,7 @@ function CashflowAccountsEmptyState() {
   return (
     <AccountsEmptyStateBase>
       <AccountsEmptyStateTitle>
-        <T
+        <T id={'cash_flow.accounts.no_results'} />
-          id={
-            'cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria'
-          }
-        />
       </AccountsEmptyStateTitle>
     </AccountsEmptyStateBase>
   );
@@ -260,7 +256,7 @@ function CashflowAccountContextMenu({
       </MenuItem>
 
       <MenuItem
-    text={<T id={'cash_flow_money_out'} />}
+        text={<T id={'cash_flow_money_out'} />}
         icon={<Icon icon={'arrow-upward'} iconSize={16} />}
       >
         <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />

src/lang/ar/index.json

@@ -1369,46 +1369,46 @@
   "filter.enter_date": "أدخل تاريخ",
   "filter.value": "قيمة",
   "payment_made.empty_status.title": "المنشأة لم تدفع اي اموال إلي الموردين ، إلي حد الأن!.",
-  "estimate.delete.error.estimate_converted_to_invoice":"لا يمكن حذف عملية عرض اسعار الذي تم تحويلها إلي فاتورة بيع.",
+  "estimate.delete.error.estimate_converted_to_invoice": "لا يمكن حذف عملية عرض اسعار الذي تم تحويلها إلي فاتورة بيع.",
   "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
 
   "items.option.only_active": "Only active",
   "items.option_all_items.hint": "جميع الاصناف ، بما في ذلك تلك الاصناف لديها رصيد صفر.",
   "items.option_with_transactions": "الاصناف مع معاملات",
   "items.option_with_transactions.hint": "قم بتضمين الاصناف التي لها معاملات في فترة التاريخ المحددة فقط.",
-  "items.option_without_zero_balance":  "الاصناف ذات رصيد صفر",
+  "items.option_without_zero_balance": "الاصناف ذات رصيد صفر",
   "items.option_without_zero_balance.hint": "قم بتضمين الاصناف واستبعاد تلك التي لديها رصيد صفري.",
   "items.label_filter_items": "تصفية الاصناف",
 
-  "customers.option_all_customers.hint":"All customers, including that ones have zero-balance.",
+  "customers.option_all_customers.hint": "All customers, including that ones have zero-balance.",
   "customers.option_without_zero_balance": "Customers without zero-balance",
-  "customers.option_without_zero_balance.hint":"Include customers and exclude that ones have zero-balance.",
+  "customers.option_without_zero_balance.hint": "Include customers and exclude that ones have zero-balance.",
   "customers.option_with_transactions": "Customers with transactions",
   "customers.option_with_transactions.hint": "Include customers that onces have transactions on the given date period only.",
   "customers.label_filter_customers": "Filter customers",
 
 
-  "vendors.option_all_vendors.hint":"All vendors, including that ones have zero-balance.",
+  "vendors.option_all_vendors.hint": "All vendors, including that ones have zero-balance.",
   "vendors.label_filter_vendors": "Filter Vendors",
   "vendors.option_without_zero_balance": "Vendors without zero-balance",
-  "vendors.option_without_zero_balance.hint":"Include vendors and exclude that ones have zero-balance.",
+  "vendors.option_without_zero_balance.hint": "Include vendors and exclude that ones have zero-balance.",
   "vendors.option_with_transactions": "Vendors with transactions",
   "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",
 
-  "siebar.cashflow":"التدفق النقدي",
+  "siebar.cashflow": "التدفق النقدي",
-  "siebar.cashflow.label_cash_and_bank_accounts": "حسابات نقدية ومصرفية ",
+  "siebar.cashflow.label_cash_and_bank_accounts": "حسابات نقدية والمصارف ",
-  "cash_flow.label_account_transcations": "حساب المعاملات",
+  "cash_flow.label_account_transcations": "معاملات الحساب",
   "cash_flow.label.deposit": "الإيداع",
   "cash_flow.label.withdrawal": "السحب",
   "cash_flow.label.running_balance": "الرصيد التحليلي",
-  "cash_flow.label.add_cash_account": "اضافة حساب نقدي",
+  "cash_flow.label.add_cash_account": "اضافة حساب نقدية",
-  "cash_flow.label.add_bank_account": "اضافة حساب مصرفي",
+  "cash_flow.label.add_bank_account": "اضافة حساب مصرف",
-  "cash_flow.label.add_money_in": "إيداع إلي حساب",
+  "cash_flow.label.add_money_in": "إيداع إلي الحساب",
-  "cash_flow.label.add_money_out": "سحب من حساب",
+  "cash_flow.label.add_money_out": "سحب من الحساب",
 
   "cash_flow.owner_contribution": "زيادة رأس المال",
-  "cash_flow.other_income": "الإيرادات الأخرى",
+  "cash_flow.other_income": "إيراد أخر",
-  "cash_flow.owner_drawings": "نقصان رأس المال",
+  "cash_flow.owner_drawings": "سحب رأس المال",
   "cash_flow.expenses": "المصاريف",
   "cash_flow.transfer_form_account": "تحويل من الحساب ",
   "cash_flow.transfer_to_account": "تحويل إلى الحساب ",
@@ -1423,7 +1423,7 @@
   "cash_flow_transaction.label_transfer_from_account": "تحويل من الحساب ",
   "cash_flow_transaction.label_transfer_to_account": "تحويل إلى الحساب ",
   "cash_flow_transaction.label_current_account": "حساب الحالي",
-  "cash_flow_transaction.delete.alert_message":  "تم حذف معاملة التدفق النقدي بنجاح",
+  "cash_flow_transaction.delete.alert_message": "تم حذف معاملة التدفق النقدي بنجاح",
   "cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it": "بمجرد حذف هذه معاملة ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف ؟",
   "cash_flow.auto_increment.auto": "يتم تعيين أرقام المعاملات على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
   "cash_flow.auto_increment.manually": "يتم تعيين أرقام معاملاتك يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
@@ -1431,10 +1431,10 @@
   "cash_flow_drawer.label_transaction_type": " نوع المعاملة",
   "cash_flow.drawer.label_transaction_no": " رقم المعاملة",
   "cash_flow.drawer.label_transaction": "معاملة التدفق النقدي {number}",
-  "cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account": "لا توجد معاملات إيداع / سحب على الحساب الحالي.  ",
+  "cash_flow.account_transactions.no_results": "لا توجد معاملات إيداع او سحب على الحساب الحالي.",
-  "cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria:":"لا توجد حسابات تدفق نقدي بمعايير التصفية الحالية. ",
+  "cash_flow.accounts.no_results": "لا توجد حسابات نقدية او مصرف بحسب شروط المرشح الحالية. ",
-  "cash_flow_money_in":"إيداع مال الي حساب",
+  "cash_flow_money_in": "إيداع",
-  "cash_flow_money_out":"سحب مال من حساب",
+  "cash_flow_money_out": "سحب",
-  "cash_flow_transaction.switch_item":" {value} من معاملات "
+  "cash_flow_transaction.switch_item": " {value} معاملة علي حساب",
+  "cash_flow_transaction.balance_in_bigcapital": "الرصيد في Bigcapital"
 }
-

src/lang/en/index.json

@@ -1365,7 +1365,7 @@
   "vendors.option_with_transactions": "Vendors with transactions",
   "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",
   "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
-  "siebar.cashflow":"Cash flow",
+  "siebar.cashflow": "Cash flow",
   "siebar.cashflow.label_cash_and_bank_accounts": "Cash & Bank Accounts",
   "cash_flow.label_account_transcations": "Account Transcations",
   "cash_flow.label.deposit": "Deposit",
@@ -1400,12 +1400,11 @@
   "cash_flow_drawer.label_transaction_type": "Transaction type",
   "cash_flow.drawer.label_transaction_no": "Transaction number",
   "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
-  "cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account": "There are no deposit/withdrawal transactions on the current account.",
+  "cash_flow.transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
-  "cash_flow_balance_in":"Balance in {name}",
+  "cash_flow_balance_in": "Balance in {name}",
-  "cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria:":"There are no cashflow accounts with current filter criteria.",
+  "cash_flow.accounts.no_results": "There are no cashflow accounts with current filter criteria.",
-  "cash_flow_money_in":"Money In",
+  "cash_flow_money_in": "Money In",
-  "cash_flow_money_out":"Money Out",
+  "cash_flow_money_out": "Money Out",
-  "cash_flow_transaction.switch_item":"Transactions {value}"
+  "cash_flow_transaction.switch_item": "Transactions {value}",
-
+  "cash_flow_transaction.balance_in_bigcapital": "Balance in Bigcapital"
-
 }

src/utils/styled-components.js

@@ -0,0 +1,9 @@
+import { css } from 'styled-components';
+
+export const whenRtl = (restCss) => css`
+  ${({ theme }) => theme.dir === 'rtl' && restCss}
+`;
+
+export const whenLtr = (restCss) => css`
+  ${({ theme }) => !theme.dir === 'ltr' && restCss}
+`;