feat: cashflow accounts grid layout.

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,