WIP

client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -78,16 +78,12 @@ function BalanceSheetTable({
         }
       },
     }))),
-  
-  
-    
-  ], [balanceSheetColumns]);
+  ], [balanceSheetColumns, balanceSheetQuery]);
  
   const [data, setData] = useState([]);
 
   useEffect(() => {
     if (!balanceSheet) { return; }
-
     setData([
       {
         name: 'Assets',
@@ -106,9 +102,6 @@ function BalanceSheetTable({
     ])
   }, [])
 
-  // if (balanceSheets.length > 0) {
-  //   setData(balanceSheets[0].balance_sheet);
-  // }
   return (
     <FinancialSheet
       companyTitle={'Facebook, Incopration'}

client/src/containers/Dashboard/FinancialStatements/Journal/Journal.js

@@ -0,0 +1,72 @@
+import React, {useState, useEffect, useMemo} from 'react';
+import {compose} from 'utils';
+import LoadingIndicator from 'components/LoadingIndicator';
+import JournalConnect from 'connectors/Journal.connect';
+import JournalHeader from 'containers/Dashboard/FinancialStatements/Journal/JournalHeader';
+import useAsync from 'hooks/async';
+import {useIntl} from 'react-intl';
+import moment from 'moment';
+import JournalTable from './JournalTable';
+import DashboardConnect from 'connectors/Dashboard.connector';
+
+function Journal({
+  fetchJournalSheet,
+  getJournalSheet,
+  getJournalSheetIndex,
+  changePageTitle,
+}) {
+  const [filter, setFilter] = useState({
+    from_date: moment().startOf('year').format('YYYY-MM-DD'),
+    to_date: moment().endOf('year').format('YYYY-MM-DD'),
+  });
+  const [reload, setReload] = useState(false);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchJournalSheet(filter),
+    ]);
+    setReload(false);
+  });
+
+  useEffect(() => {
+    changePageTitle('Journal');
+  }, []);
+
+  useEffect(() => {
+    if (reload) {
+      fetchHook.execute();
+    }
+  }, [reload, fetchHook]);
+
+  const journalSheetIndex = useMemo(() => {
+    return getJournalSheetIndex(filter);
+  }, [filter, getJournalSheetIndex]);
+
+  const handleFilterSubmit = (filter) => {
+    setFilter({
+      ...filter,
+      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+    });
+    setReload(true);
+  };
+  return (
+    <div class="financial-statement">
+      <JournalHeader
+        pageFilter={filter}
+        onSubmitFilter={handleFilterSubmit} />
+
+      <div class="financial-statement__body">
+        <LoadingIndicator loading={fetchHook.pending}>
+          <JournalTable
+            journalIndex={journalSheetIndex} />
+        </LoadingIndicator>
+      </div>
+    </div>
+  )
+}
+
+export default compose(
+  JournalConnect,
+  DashboardConnect,
+)(Journal);

client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js

@@ -0,0 +1,120 @@
+import React, {useState, useMemo, useEffect} from 'react';
+import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
+import {Row, Col} from 'react-grid-system';
+import {
+  Button,
+  FormGroup,
+  Position,
+  HTMLSelect,
+  Intent,
+} from '@blueprintjs/core';
+import {DateInput} from '@blueprintjs/datetime';
+import moment from 'moment';
+import {
+  momentFormatter,
+  parseDateRangeQuery,
+} from 'utils';
+import {useIntl} from 'react-intl';
+
+export default function JournalHeader({
+  pageFilter,
+  onSubmitFilter,
+}) {
+  const intl = useIntl();
+
+  const [filter, setFilter] = useState({
+    ...pageFilter,
+    from_date: moment(pageFilter.from_date).toDate(),
+    to_date: moment(pageFilter.to_date).toDate()
+  });
+
+  const setFilterByKey = (name, value) => {
+    setFilter({ ...filter, [name]: value });
+  };
+  const [reportDateRange, setReportDateRange] = useState('this_year');
+  const dateRangeOptions = [
+    {value: 'today', label: 'Today', },
+    {value: 'this_week', label: 'This Week'},
+    {value: 'this_month', label: 'This Month'},
+    {value: 'this_quarter', label: 'This Quarter'},
+    {value: 'this_year', label: 'This Year'},
+    {value: 'custom', label: 'Custom Range'},
+  ];
+  const handleDateChange = (name) => (date) => {
+    setReportDateRange('custom');
+    setFilterByKey(name, date);
+  };
+
+  useEffect(() => {
+    if (reportDateRange === 'custom') { return; }
+    const dateRange = parseDateRangeQuery(reportDateRange);
+
+    if (dateRange) {
+      setFilter((filter) => ({ ...filter, ...dateRange }));
+    }
+  }, [reportDateRange]);
+  
+  const handleSubmitClick = () => { onSubmitFilter(filter); };
+  
+  return (
+    <FinancialStatementHeader>
+      <Row>
+        <Col sm={3}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'report_date_range'})}
+            minimal={true}
+            fill={true}>
+
+            <HTMLSelect
+              fill={true}
+              options={dateRangeOptions}
+              value={reportDateRange}
+              onChange={(event) => setReportDateRange(event.target.value)} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={3}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'from_date'})}
+            minimal={true}
+            fill={true}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={filter.from_date}
+              onChange={handleDateChange('from_date')}
+              popoverProps={{ position: Position.BOTTOM }}
+              fill={true} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={3}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'to_date'})}
+            minimal={true}
+            fill={true}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={filter.to_date}
+              onChange={handleDateChange('to_date')}
+              popoverProps={{ position: Position.BOTTOM }}
+              fill={true} />
+          </FormGroup>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col sm={3}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitClick}>
+            { 'Run Report' }
+          </Button>
+        </Col>
+      </Row>
+
+    </FinancialStatementHeader>
+  );
+}

client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js

@@ -0,0 +1,89 @@
+import React, {useState, useEffect, useMemo} from 'react';
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import {compose} from 'utils';
+import moment from 'moment';
+import JournalConnect from 'connectors/Journal.connect';
+import {
+  getFinancialSheet,
+} from 'store/financialStatement/financialStatements.selectors';
+import {connect} from 'react-redux';
+
+function JournalSheetTable({
+  journalIndex,
+  journalTableData,
+}) {
+  const columns = useMemo(() => [
+    {
+      Header: 'Date',
+      accessor: r => moment(r.date).format('YYYY/MM/DD'),
+      className: 'date',
+    },
+    {
+      Header: 'Account Name',
+      accessor: 'account.name',
+    },
+    {
+      Header: 'Transaction Type',
+      accessor: 'transaction_type',
+      className: "transaction_type",
+    },
+    {
+      Header: 'Num.',
+      accessor: 'reference_id',
+      className: 'reference_id',
+    },
+    {
+      Header: 'Note',
+      accessor: 'note',
+    },
+    {
+      Header: 'Credit',
+      accessor: 'credit',
+    },
+    {
+      Header: 'Debit',
+      accessor: 'debit',
+    },
+  ], []);
+
+  return (
+    <FinancialSheet
+      companyTitle={'Facebook, Incopration'}
+      sheetType={'Balance Sheet'}
+      date={[]}>
+      
+      <DataTable
+        columns={columns}
+        data={journalTableData} />
+
+    </FinancialSheet>
+  );
+}
+
+const mapStateToProps = (state, props) => {
+  const journalTableData = [];
+  const journalSheet = getFinancialSheet(state.financialStatements.journalSheets, props.journalIndex);
+
+  if (journalSheet && journalSheet.journal) {
+    journalSheet.journal.forEach((journal) => {
+      journal.entries.forEach((entry, index) => {
+        journalTableData.push({ ...entry, index });
+      });
+      journalTableData.push({
+        credit: journal.credit,
+        debit: journal.debit,
+        total: true,
+      })
+    })
+  }
+  return {
+    journalSheet,
+    journalTableData,
+  }
+}
+
+export default compose(
+  connect(mapStateToProps),
+  JournalConnect,
+)(JournalSheetTable);