From 0bb1e57061b85c6fa7352b9d5aca6e606b7c04bb Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 20 Oct 2021 11:30:42 +0200 Subject: [PATCH] feat: cashflow accounts grid layout. --- src/components/BankAccounts/index.js | 220 ++++++++++++++++++ src/components/index.js | 1 + .../CashFlowAccounts/CashFlowAccountsList.js | 9 +- .../CashFlowAccounts/CashflowAccountsGrid.js | 51 ++++ .../CashFlow/CashFlowAccounts/components.js | 9 +- src/lang/en/index.json | 2 +- src/routes/dashboard.js | 2 - src/static/json/icons.js | 12 + 8 files changed, 295 insertions(+), 11 deletions(-) create mode 100644 src/components/BankAccounts/index.js create mode 100644 src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js diff --git a/src/components/BankAccounts/index.js b/src/components/BankAccounts/index.js new file mode 100644 index 000000000..e6ee1b75b --- /dev/null +++ b/src/components/BankAccounts/index.js @@ -0,0 +1,220 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Classes } from '@blueprintjs/core'; +import clsx from 'classnames'; +import Icon from '../Icon'; + +const BankAccountWrap = styled.div` + width: 225px; + height: 180px; + display: flex; + flex-direction: column; + border-radius: 3px; + background: #fff; + margin: 8px; + border: 1px solid #c8cad0; + transition: all 0.1s ease-in-out; + + &:hover { + border-color: #0153cc; + } +`; + +const BankAccountAnchor = styled.a` + text-decoration: none; + display: flex; + flex-direction: column; + flex: 1; + color: inherit; + + &:hover, + &:focus, + &:active { + color: inherit; + text-decoration: none; + } +`; + +const BankAccountHeader = styled.div` + padding: 10px 12px; + padding-top: 16px; + position: relative; +`; + +const BankAccountTitle = styled.div` + font-size: 15px; + font-style: inherit; + letter-spacing: -0.003em; + color: rgb(23, 43, 77); + white-space: nowrap; + font-weight: 600; + line-height: 1; + overflow: hidden; + text-overflow: ellipsis; + margin: 0px; +`; + +const BnakAccountCode = styled.div` + font-size: 11px; + margin-top: 4px; + color: rgb(23, 43, 77); + display: inline-block; +`; + +const BankAccountBalanceWrap = styled.div` + display: flex; + flex-direction: column; + margin-top: auto; + border-top: 1px solid #dfdfdf; + padding: 10px 12px; +`; + +const BankAccountBalanceAmount = styled.div` + font-size: 16px; + font-weight: 600; + line-height: 1; + color: #57657e; +`; + +const BankAccountBalanceLabel = styled.div` + text-transform: uppercase; + font-size: 10px; + letter-spacing: 0.5px; + margin-top: 3px; + opacity: 0.6; +`; + +const MetaLineWrap = styled.div` + font-size: 11px; + display: flex; + color: #2f3c58; + + &:not(:first-of-type) { + margin-top: 6px; + } +`; +const MetaLineTitle = styled.div``; + +const MetaLineValue = styled.div` + box-sizing: border-box; + font-style: inherit; + background: rgb(223, 225, 230); + line-height: initial; + align-content: center; + padding: 0px 2px; + 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; +`; + +const BankAccountMeta = styled.div` + padding: 0 12px 10px; +`; + +export const BankAccountsList = styled.div` + display: flex; + margin: -8px; +`; + +const AccountIconWrap = styled.div` + position: absolute; + top: 14px; + right: 12px; + color: #abb3bb; +`; + +function BankAccountMetaLine({ title, value, className }) { + return ( + + {title} + {value && {value}} + + ); +} + +function BankAccountBalance({ amount, loading }) { + return ( + + + {amount} + + Balance + + ); +} + +const ACCOUNT_TYPE = { + CASH: 'cash', + CREDIT_CARD: 'credit-card', + BANK_ACCOUNT: 'bank-account', +}; + +const ACCOUNT_TYPE_PAIR_ICON = { + [ACCOUNT_TYPE.CASH]: 'payments', + [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card', + [ACCOUNT_TYPE.BANK_ACCOUNT]: 'account-balance', +}; + +function BankAccountTypeIcon({ type }) { + const icon = ACCOUNT_TYPE_PAIR_ICON[type]; + + if (!icon) { + return; + } + return ( + + + + ); +} + + + +export function BankAccount({ + title, + code, + type, + balance, + loading = false, +}) { + return ( + + + + + {title} + + + {code} + + {!loading && } + + + + + + + + + + + ); +} diff --git a/src/components/index.js b/src/components/index.js index 4c93d1628..54cdead52 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -81,6 +81,7 @@ export * from './Forms'; export * from './MultiSelectTaggable'; export * from './Utils/FormatNumber'; export * from './Utils/FormatDate'; +export * from './BankAccounts'; const Hint = FieldHint; diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js index 0010b4ab6..bc8afe880 100644 --- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js +++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js @@ -2,12 +2,12 @@ import React from 'react'; import 'style/pages/CashFlow/CashFlowAccounts/List.scss'; -import { DashboardPageContent, DashboardContentTable } from 'components'; +import { DashboardPageContent } from 'components'; import { CashFlowAccountsProvider } from './CashFlowAccountsProvider'; import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar'; -import CashFlowAccountsDataTable from './CashFlowAccountsDataTable'; +import CashflowAccountsGrid from './CashflowAccountsGrid'; /** * Cash flow accounts list. @@ -16,10 +16,9 @@ function CashFlowAccountsList({}) { return ( + - - - + ); diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js new file mode 100644 index 000000000..a493e2def --- /dev/null +++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { isNull } from 'lodash'; +import styled from 'styled-components'; +import { BankAccountsList, BankAccount } from '../../../components'; +import { useCashFlowAccountsContext } from './CashFlowAccountsProvider'; + +const CashflowAccountsGridWrap = styled.div` + margin: 30px; +`; +const CASHFLOW_SKELETON_N = 4; + +function CashflowAccountsSkeleton() { + return [...Array(CASHFLOW_SKELETON_N)].map((e, i) => ( + + )); +} + +function CashflowAccountsGridItems({ accounts }) { + return accounts.map((account) => ( + + )); +} + +export default function CashflowAccountsGrid() { + // Retrieve list context. + const { cashflowAccounts, isCashFlowAccountsLoading } = + useCashFlowAccountsContext(); + + return ( + + + {isCashFlowAccountsLoading ? ( + + ) : ( + + )} + + + ); +} diff --git a/src/containers/CashFlow/CashFlowAccounts/components.js b/src/containers/CashFlow/CashFlowAccounts/components.js index b5a8ed329..7193109da 100644 --- a/src/containers/CashFlow/CashFlowAccounts/components.js +++ b/src/containers/CashFlow/CashFlowAccounts/components.js @@ -5,7 +5,6 @@ import { Intent, Tag } from '@blueprintjs/core'; import { isBlank } from 'utils'; import { Link } from 'react-router-dom'; - /** * Account code accessor. */ @@ -34,7 +33,12 @@ export const BalanceCell = ({ cell }) => { */ const AccountCell = ({ row }) => { const account = row.original; - return {account.name}; + return ( + <> +
X
+ {account.name} + + ); }; /** @@ -48,7 +52,6 @@ export function useCashFlowAccountsTableColumns() { Header: intl.get('account_name'), accessor: 'name', Cell: AccountCell, - className: 'account_name', width: 200, textOverview: true, diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 7542a1fba..cb12f14ba 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1362,7 +1362,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.label_cash_and_bank_accounts": "Cash & Bank accounts", + "siebar.cashflow.label_cash_and_bank_accounts": "Cash & Bank Accounts", "cash_flow.label_account_transcations": "Account Transcations", "cash_flow.label.deposit":"Deposit", diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index 0d39a6e5d..39bc7f2fa 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -780,8 +780,6 @@ export const getDashboardRoutes = () => [ component: lazy(() => import('containers/CashFlow/CashFlowAccounts/CashFlowAccountsList'), ), - backLink: true, - // breadcrumb: intl.get('homepage'), pageTitle: intl.get('siebar.cashflow.label_cash_and_bank_accounts'), subscriptionActive: [SUBSCRIPTION_TYPE.MAIN], }, diff --git a/src/static/json/icons.js b/src/static/json/icons.js index db7c65052..1b20c6ae4 100644 --- a/src/static/json/icons.js +++ b/src/static/json/icons.js @@ -479,4 +479,16 @@ export default { ], viewBox: '0 0 16 16', }, + 'account-balance': { + path: [ + 'M6.5 10h-2v7h2v-7zm6 0h-2v7h2v-7zm8.5 9H2v2h19v-2zm-2.5-9h-2v7h2v-7zm-7-6.74L16.71 6H6.29l5.21-2.74m0-2.26L2 6v2h19V6l-9.5-5z' + ], + viewBox: '0 0 24 24', + }, + 'credit-card': { + path: [ + 'M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z', + ], + viewBox: '0 0 24 24', + } };