import React, { useCallback, useMemo } from 'react'; import moment from 'moment'; import { defaultExpanderReducer, compose } from 'utils'; import { useIntl } from 'react-intl'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; import Money from 'components/Money'; import withGeneralLedger from './withGeneralLedger'; const ROW_TYPE = { CLOSING_BALANCE: 'closing_balance', OPENING_BALANCE: 'opening_balance', ACCOUNT: 'account_name', TRANSACTION: 'transaction', }; function GeneralLedgerTable({ companyName, generalLedgerSheetLoading, generalLedgerTableRows, generalLedgerQuery, }) { const { formatMessage } = useIntl(); // Account name column accessor. const accountNameAccessor = (row) => { switch (row.rowType) { case ROW_TYPE.OPENING_BALANCE: return 'Opening Balance'; case ROW_TYPE.CLOSING_BALANCE: return 'Closing Balance'; default: return row.name; } }; // Date accessor. const dateAccessor = (row) => { const TYPES = [ ROW_TYPE.OPENING_BALANCE, ROW_TYPE.CLOSING_BALANCE, ROW_TYPE.TRANSACTION, ]; return TYPES.indexOf(row.rowType) !== -1 ? moment(row.date).format('DD MMM YYYY') : ''; }; // Amount cell const amountCell = useCallback(({ cell }) => { const transaction = cell.row.original; if (transaction.rowType === ROW_TYPE.ACCOUNT) { return !cell.row.isExpanded ? ( ) : ( '' ); } return ; }, []); const columns = useMemo( () => [ { Header: formatMessage({ id: 'account_name' }), accessor: accountNameAccessor, className: 'name', width: 225, }, { Header: formatMessage({ id: 'date' }), accessor: dateAccessor, className: 'date', width: 115, }, { Header: formatMessage({ id: 'transaction_type' }), accessor: 'referenceType', className: 'transaction_type', width: 145, }, { Header: formatMessage({ id: 'trans_num' }), accessor: 'reference_id', className: 'transaction_number', width: 110, }, { Header: formatMessage({ id: 'description' }), accessor: 'note', className: 'description', width: 145, }, { Header: formatMessage({ id: 'amount' }), Cell: amountCell, className: 'amount', width: 150, }, { Header: formatMessage({ id: 'balance' }), Cell: amountCell, className: 'balance', width: 150, }, ], [], ); // Default expanded rows of general ledger table. const expandedRows = useMemo( () => defaultExpanderReducer(generalLedgerTableRows, 1), [generalLedgerTableRows], ); const rowClassNames = (row) => [`row-type--${row.original.rowType}`]; return ( ); } export default compose( withGeneralLedger( ({ generalLedgerTableRows, generalLedgerSheetLoading, generalLedgerQuery, }) => ({ generalLedgerTableRows, generalLedgerSheetLoading, generalLedgerQuery, }), ), )(GeneralLedgerTable);