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

fix: cashflow service Arabic localization.

Browse Source
This commit is contained in:
a.bouhuolia
2021-10-27 22:39:45 +02:00
parent b0f1584b04
commit 0b5c5d83a4
12 changed files with 187 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/App.js
View File

@@ -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}>
<Switch>
<Route path={'/auth'} component={Authentication} />
<Route path={'/'}>
<PrivateRoute component={DashboardPrivatePages} />
</Route>
</Switch>
</Router>
<DashboardThemeProvider>
<Router history={history}>
<Switch>
<Route path={'/auth'} component={Authentication} />
<Route path={'/'}>
<PrivateRoute component={DashboardPrivatePages} />
</Route>
</Switch>
</Router>
<GlobalErrors />
<GlobalErrors />
</DashboardThemeProvider>
</div>
);
}

184
src/components/BankAccounts/index.js
View File

@@ -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>
);
}

9
src/components/Dashboard/DashboardThemeProvider.js Normal file
View File

@@ -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>;
}

5
src/components/Dashboard/index.js
View File

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