feat: cashflow accounts grid layout.

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 (
+    <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>Balance</BankAccountBalanceLabel>
+    </BankAccountBalanceWrap>
+  );
+}
+
+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 (
+    <AccountIconWrap>
+      <Icon icon={'credit-card'} iconSize={18} />
+    </AccountIconWrap>
+  );
+}
+
+
+
+export function BankAccount({
+  title,
+  code,
+  type,
+  balance,
+  loading = false,
+}) {
+  return (
+    <BankAccountWrap>
+      <BankAccountAnchor href="#">
+        <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={'Account transactions'}
+            value={2}
+            className={clsx({ [Classes.SKELETON]: loading })}
+          />
+          <BankAccountMetaLine
+            title={'Updated 2 days ago'}
+            className={clsx({ [Classes.SKELETON]: loading })}
+          />
+        </BankAccountMeta>
+
+        <BankAccountBalance amount={balance} loading={loading} />
+      </BankAccountAnchor>
+    </BankAccountWrap>
+  );
+}

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;
 

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 (
     <CashFlowAccountsProvider>
       <CashFlowAccountsActionsBar />
+
       <DashboardPageContent>
-        <DashboardContentTable>
-          <CashFlowAccountsDataTable />
-        </DashboardContentTable>
+        <CashflowAccountsGrid />
       </DashboardPageContent>
     </CashFlowAccountsProvider>
   );

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) => (
+    <BankAccount
+      title={'XXXXX'}
+      code={'XXXXX'}
+      balance={'XXXXXX'}
+      cash={'cash'}
+      loading={true}
+    />
+  ));
+}
+
+function CashflowAccountsGridItems({ accounts }) {
+  return accounts.map((account) => (
+    <BankAccount
+      title={account.name}
+      code={account.code}
+      balance={!isNull(account.amount) ? account.formattedAmount : '-'}
+      type={'cash'}
+    />
+  ));
+}
+
+export default function CashflowAccountsGrid() {
+  // Retrieve list context.
+  const { cashflowAccounts, isCashFlowAccountsLoading } =
+    useCashFlowAccountsContext();
+
+  return (
+    <CashflowAccountsGridWrap>
+      <BankAccountsList>
+        {isCashFlowAccountsLoading ? (
+          <CashflowAccountsSkeleton />
+        ) : (
+          <CashflowAccountsGridItems accounts={cashflowAccounts} />
+        )}
+      </BankAccountsList>
+    </CashflowAccountsGridWrap>
+  );
+}

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 <Link to={`/account/${account.id}/transactions`}>{account.name}</Link>;
+  return (
+    <>
+      <div>X</div>
+      <Link to={`/account/${account.id}/transactions`}>{account.name}</Link>
+    </>
+  );
 };
 
 /**
@@ -48,7 +52,6 @@ export function useCashFlowAccountsTableColumns() {
         Header: intl.get('account_name'),
         accessor: 'name',
         Cell: AccountCell,
-
         className: 'account_name',
         width: 200,
         textOverview: true,

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",

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],
   },

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',
+  }
 };