WIP Version 0.0.1

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarHeading,
+  NavbarDivider,
+  Intent,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
+import classNames from 'classnames';
+import FilterDropdown from 'components/FilterDropdown';
+
+export default function GeneralLedgerActionsBar({
+
+}) {
+  const filterDropdown = FilterDropdown({
+    fields: [],
+    onFilterChange: (filterConditions) => {
+      
+    },
+  });
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon='cog' />}
+          text='Customize Report'
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text='Print'
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
+import TrialBalanceSheetTable from './TrialBalanceSheetTable';
+import useAsync from 'hooks/async';
+import moment from 'moment';
+import {compose} from 'utils';
+import TrialBalanceSheetConnect from 'connectors/TrialBalanceSheet.connect';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import TrialBalanceActionsBar from './TrialBalanceActionsBar';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import SettingsConnect from 'connectors/Settings.connect';
+
+function TrialBalanceSheet({
+  changePageTitle,
+  fetchTrialBalanceSheet,
+  getTrialBalanceSheetIndex,
+  getTrialBalanceAccounts,
+  trialBalanceSheetLoading,
+  organizationSettings,
+}) {
+  const [filter, setFilter] = useState({
+    from_date: moment().startOf('year').format('YYYY-MM-DD'),
+    to_date: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+    none_zero: false,
+  });
+
+  const fetchHook = useAsync((query = filter) => {
+    return Promise.all([
+      fetchTrialBalanceSheet(query),
+    ]);
+  }, false);
+
+  // handle fetch data of trial balance table.
+  const handleFetchData = useCallback(() => { fetchHook.execute() }, [fetchHook]);
+
+  // Retrieve balance sheet index by the given filter query.
+  const trialBalanceSheetIndex = useMemo(() => 
+    getTrialBalanceSheetIndex(filter),
+    [getTrialBalanceSheetIndex, filter]);
+
+  // Retrieve balance sheet accounts bu the given sheet index.
+  const trialBalanceAccounts = useMemo(() =>
+    getTrialBalanceAccounts(trialBalanceSheetIndex),
+    [getTrialBalanceAccounts, trialBalanceSheetIndex]);
+
+  // Change page title of the dashboard.
+  useEffect(() => {
+    changePageTitle('Trial Balance Sheet');
+  }, []);
+
+  const handleFilterSubmit = useCallback((filter) => {
+    const parsedFilter = {
+      ...filter,
+      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+    };
+    setFilter(parsedFilter);
+    fetchHook.execute(parsedFilter);
+  }, [setFilter, fetchHook]);
+
+  return (
+    <DashboardInsider>
+      <TrialBalanceActionsBar />
+
+      <DashboardPageContent>
+        <div class="financial-statement">
+          <TrialBalanceSheetHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit} />
+
+          <div class="financial-statement__body">
+            <TrialBalanceSheetTable
+              companyName={organizationSettings.name}
+              trialBalanceSheetAccounts={trialBalanceAccounts}
+              trialBalanceSheetIndex={trialBalanceSheetIndex}
+              onFetchData={handleFetchData}
+              loading={trialBalanceSheetLoading} />
+          </div>
+        </div>
+      </DashboardPageContent>
+    </DashboardInsider>
+  )
+}
+
+export default compose(
+  DashboardConnect,
+  TrialBalanceSheetConnect,
+  SettingsConnect,
+)(TrialBalanceSheet);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -0,0 +1,66 @@
+import React, {useState, useCallback, useMemo} from 'react';
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import {Row, Col} from 'react-grid-system';
+import { 
+  Button,
+  FormGroup,
+  Position,
+  MenuItem,
+  RadioGroup,
+  Radio,
+  HTMLSelect,
+  Intent,
+  Popover,
+} from "@blueprintjs/core";
+import moment from 'moment';
+import {useIntl} from 'react-intl';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import Icon from 'components/Icon';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+
+export default function TrialBalanceSheetHeader({
+  pageFilter,
+  onSubmitFilter,
+}) {
+  const intl = useIntl();
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...pageFilter,
+      from_date: moment(pageFilter.from_date).toDate(),
+      to_date: moment(pageFilter.to_date).toDate()
+    },
+    validationSchema: Yup.object().shape({
+      from_date: Yup.date().required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+    }),
+    onSubmit: (values, actions) => {
+      onSubmitFilter(values);
+      actions.setSubmitting(false);
+    }
+  });
+
+  const handleSubmitClick = useCallback(() => {
+    formik.submitForm();
+  }, [formik]);
+
+  return (
+    <FinancialStatementHeader>
+      <FinancialStatementDateRange formik={formik} />
+
+      <Row>
+        <Col sm={3}>
+          <Button
+            type="submit"
+            onClick={handleSubmitClick}
+            disabled={formik.isSubmitting}
+            className={'button--submit-filter'}>
+            { 'Run Report' }
+          </Button>
+        </Col>
+      </Row>
+    </FinancialStatementHeader>
+  );
+}

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -0,0 +1,105 @@
+import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import Money from 'components/Money';
+
+export default function TrialBalanceSheetTable({
+  trialBalanceSheetAccounts,
+  trialBalanceSheetIndex,
+  onFetchData,
+  loading,
+  companyName,
+}) {
+  const [data, setData] = useState([]);
+
+  const columns = useMemo(() => [
+    {
+      // Build our expander column
+      id: 'expander', // Make sure it has an ID
+      className: 'expander',      
+      Header: ({
+        getToggleAllRowsExpandedProps,
+        isAllRowsExpanded
+      }) => (
+        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          {isAllRowsExpanded ?
+            (<span class="arrow-down" />) :
+            (<span class="arrow-right" />)
+          }
+        </span>
+      ),
+      Cell: ({ row }) =>
+        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
+        // to build the toggle for expanding a row
+        row.canExpand ? (
+          <span
+            {...row.getToggleRowExpandedProps({
+              style: {
+                // We can even use the row.depth property
+                // and paddingLeft to indicate the depth
+                // of the row
+                paddingLeft: `${row.depth * 2}rem`,
+              },
+              className: 'toggle',
+            })}
+          >
+            {row.isExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ) : null,
+      width: 20,
+      disableResizing: true,
+    },
+    {
+      Header: 'Account Name',
+      accessor: 'name',
+      className: "name",
+    },
+    {
+      Header: 'Code', 
+      accessor: 'code',
+      className: "code",
+      width: 120,
+    },
+    {
+      Header: 'Credit',
+      accessor: r => (<Money amount={r.credit} currency="USD" />),
+      className: 'credit',
+      width: 120,
+    },
+    {
+      Header: 'Debit',
+      accessor: r => (<Money amount={r.debit} currency="USD" />),
+      className: 'debit',
+      width: 120,
+    },
+    {
+      Header: 'Balance',
+      accessor: r => (<Money amount={r.balance} currency="USD" />),
+      className: 'balance',
+      width: 120,
+    }
+  ], []);
+
+  const handleFetchData = useCallback(() => {
+    onFetchData && onFetchData();
+  }, [onFetchData]);
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={'Trial Balance Sheet'}
+      date={new Date()}
+      name="trial-balance"
+      loading={loading}>
+
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={trialBalanceSheetAccounts}
+        onFetchData={handleFetchData} />
+    </FinancialSheet>
+  ); 
+}