WIP Financial statements.

client/src/components/DataTable.js

@@ -122,15 +122,20 @@ export default function DataTable({
   // Renders table row.
   const RenderRow = useCallback(({ style = {}, row }) => {
     prepareRow(row);    
+    const rowClasses = rowClassNames && rowClassNames(row.original);
+
     return (
-      <div {...row.getRowProps({ style })} className="tr">
+      <div {...row.getRowProps({
+        className: classnames('tr', rowClasses),
+        style
+      })}>
         {row.cells.map((cell) => {
           return <div {...cell.getCellProps({
             className: classnames(cell.column.className || '', 'td'),
           })}>{ cell.render('Cell') }</div>
         })}
       </div>);
-  }, [prepareRow]);
+  }, [prepareRow, rowClassNames]);
 
   // Renders virtualize circle table rows.
   const RenderVirtualizedRows = useCallback(({ index, style }) => {

client/src/components/FinancialSheet.js

@@ -1,40 +1,59 @@
-import React, { Children } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
 import LoadingIndicator from 'components/LoadingIndicator';
 
 export default function FinancialSheet({
-  companyTitle,
+  companyName,
   sheetType,
-  date,
+  fromDate,
+  toDate,
   children,
   accountingBasis,
   name,
   loading,
   className,
+  basis,
 }) {
-  const formattedDate = moment(date).format('DD MMMM YYYY')
+  const formattedFromDate = moment(fromDate).format('DD MMMM YYYY');
+  const formattedToDate = moment(toDate).format('DD MMMM YYYY');
   const nameModifer = name ? `financial-sheet--${name}` : '';
 
+  const methodsLabels = useMemo(() => ({
+    'cash': 'Cash',
+    'accural': 'Accural',
+  }), []);
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(() => getBasisLabel(basis), [getBasisLabel, basis]);
+
   return (
     <div className={classnames('financial-sheet', nameModifer, className)}>
-      <LoadingIndicator loading={loading}>
+      <LoadingIndicator loading={loading} spinnerSize={34} />
-        <h1 class="financial-sheet__title">{ companyTitle }</h1>
+
+      <div className={classnames('financial-sheet__inner', {
+        'is-loading': loading,
+      })}>
+        <h1 class="financial-sheet__title">
+          { companyName }
+        </h1>
         <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
-        <div class="financial-sheet__date">From { formattedDate } | To { formattedDate }</div>
+        <div class="financial-sheet__date">
+          From { formattedFromDate } | To { formattedToDate }
+        </div>
 
         <div class="financial-sheet__table">
           { children }
         </div>
-
         <div class="financial-sheet__accounting-basis">
           { accountingBasis }
         </div>
 
-        <div class="financial-sheet__basis">
+        { (basisLabel) && (
-          Accounting Basis: Accural
+          <div class="financial-sheet__basis">
-        </div>
+            Accounting Basis: { basisLabel }
-      </LoadingIndicator>
+          </div>
+        )}        
+      </div>
     </div>
   );
 }

client/src/components/LoadingIndicator.js

@@ -27,7 +27,7 @@ export default function LoadingIndicator({
     <div style={componentStyle}>{ children }</div>
   ), [children, componentStyle]);
 
-  const maybeRenderComponent = rendered && renderComponent;
+  const maybeRenderComponent = (rendered && children) && renderComponent;
   const maybeRenderLoadingSpinner = loading && loadingComponent;
 
   return (

client/src/connectors/Settings.connect.js

@@ -0,0 +1,13 @@
+import {connect} from 'react-redux';
+
+export const mapStateToProps = (state, props) => {
+  return {
+    organizationSettings: state.settings.data.organization,
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

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

@@ -5,12 +5,12 @@ import useAsync from 'hooks/async';
 import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
 import {useIntl} from 'react-intl';
 import BalanceSheetHeader from './BalanceSheetHeader';
-import LoadingIndicator from 'components/LoadingIndicator';
 import BalanceSheetTable from './BalanceSheetTable';
 import moment from 'moment';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
+import SettingsConnect from 'connectors/Settings.connect';
 
 function BalanceSheet({
   fetchBalanceSheet,
@@ -18,6 +18,7 @@ function BalanceSheet({
   balanceSheetLoading, 
   getBalanceSheetIndex,
   getBalanceSheet,
+  organizationSettings
 }) {
   const intl = useIntl();
   const [filter, setFilter] = useState({
@@ -70,6 +71,7 @@ function BalanceSheet({
 
           <div class="financial-statement__body">
             <BalanceSheetTable
+              companyName={organizationSettings.name}
               loading={balanceSheetLoading}
               balanceSheetIndex={balanceSheetIndex}
               onFetchData={handleFetchData} />
@@ -83,4 +85,5 @@ function BalanceSheet({
 export default compose(
   DashboardConnect,
   BalanceSheetConnect,
+  SettingsConnect,
 )(BalanceSheet);

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

@@ -11,6 +11,7 @@ import {
 } from 'utils';
 
 function BalanceSheetTable({
+  companyName,
   balanceSheetAccounts,
   balanceSheetColumns,
   balanceSheetQuery,
@@ -110,9 +111,11 @@ function BalanceSheetTable({
 
   return (
     <FinancialSheet
-      companyTitle={'Facebook, Incopration'}
+      companyName={companyName}
       sheetType={'Balance Sheet'}
-      date={asDate}
+      fromDate={balanceSheetQuery.from_date}
+      toDate={balanceSheetQuery.to_date}
+      basis={balanceSheetQuery.basis}
       loading={loading}>
       
       <DataTable

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

@@ -8,9 +8,9 @@ import GeneralLedgerHeader from './GeneralLedgerHeader';
 import {compose} from 'utils';
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import DashboardActionsBar from 'components/Accounts/AccountsActionsBar'
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import AccountsConnect from 'connectors/Accounts.connector';
+import SettingsConnect from 'connectors/Settings.connect';
 
 function GeneralLedger({
   changePageTitle,
@@ -19,6 +19,7 @@ function GeneralLedger({
   fetchGeneralLedger,
   generalLedgerSheetLoading,
   fetchAccounts,
+  organizationSettings,
 }) {
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
@@ -80,6 +81,7 @@ function GeneralLedger({
 
           <div class="financial-statement__table">
             <GeneralLedgerTable
+              companyName={organizationSettings.name}
               loading={generalLedgerSheetLoading}
               data={[
                 ... (generalLedgerSheet) ?
@@ -97,4 +99,5 @@ export default compose(
   DashboardConnect,
   AccountsConnect,
   GeneralLedgerConnect,
+  SettingsConnect,
 )(GeneralLedger);

client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -16,6 +16,7 @@ const ROW_TYPE = {
 }
 
 export default function GeneralLedgerTable({
+  companyName,
   onFetchData,
   loading,
   data,
@@ -144,7 +145,7 @@ export default function GeneralLedgerTable({
 
   return (
     <FinancialSheet
-      companyTitle={'Facebook, Incopration'}
+      companyName={companyName}
       sheetType={'General Ledger Sheet'}
       date={new Date()}
       name="general-ledger"

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

@@ -1,6 +1,5 @@
 import React, {useState, useCallback, 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';
@@ -11,6 +10,7 @@ import DashboardConnect from 'connectors/Dashboard.connector';
 import JournalActionsBar from './JournalActionsBar';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import SettingsConnect from 'connectors/Settings.connect';
 
 function Journal({
   fetchJournalSheet,
@@ -18,6 +18,7 @@ function Journal({
   getJournalSheetIndex,
   changePageTitle,
   journalSheetLoading,
+  organizationSettings,
 }) {
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
@@ -83,6 +84,7 @@ function Journal({
           
           <div class="financial-statement__table">
             <JournalTable
+              companyName={organizationSettings.name}
               data={[
                 ...(journalSheet && journalSheet.tableRows)
                   ? journalSheet.tableRows : []
@@ -99,4 +101,5 @@ function Journal({
 export default compose(
   JournalConnect,
   DashboardConnect,
+  SettingsConnect,
 )(Journal);

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

@@ -14,6 +14,7 @@ function JournalSheetTable({
   onFetchData,
   data,
   loading,
+  companyName,
 }) {
   const rowTypeFilter = (rowType, value, types) => {
     return (types.indexOf(rowType) === -1) ? '' : value;
@@ -76,7 +77,7 @@ function JournalSheetTable({
 
   return (
     <FinancialSheet
-      companyTitle={'Facebook, Incopration'}
+      companyName={companyName}
       sheetType={'Journal Sheet'}
       date={new Date()}
       name="journal"

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

@@ -1,21 +1,23 @@
 import React, {useState, useMemo, useCallback, useEffect} from 'react';
-import ProfitLossSheetHeader from './ProfitLossSheetHeader';
+import moment from 'moment';
-import ProfitLossSheetTable from './ProfitLossSheetTable';
-import LoadingIndicator from 'components/LoadingIndicator';
 import useAsync from 'hooks/async';
 import {compose} from 'utils';
+import ProfitLossSheetHeader from './ProfitLossSheetHeader';
+import ProfitLossSheetTable from './ProfitLossSheetTable';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
 import ProfitLossActionsBar from './ProfitLossActionsBar';
-import moment from 'moment';
+import SettingsConnect from 'connectors/Settings.connect';
+
 
 function ProfitLossSheet({
   changePageTitle,
   fetchProfitLossSheet,
   getProfitLossSheetIndex,
   profitLossSheetLoading,
+  organizationSettings,
 }) {
   const [filter, setFilter] = useState({
     basis: 'cash',
@@ -66,6 +68,7 @@ function ProfitLossSheet({
 
           <div class="financial-statement__body">
             <ProfitLossSheetTable
+              companyName={organizationSettings.name}
               profitLossSheetIndex={profitLossSheetIndex}
               onFetchData={handleFetchData}
               loading={profitLossSheetLoading} />
@@ -78,5 +81,6 @@ function ProfitLossSheet({
 
 export default compose(
   DashboardConnect,
-  ProfitLossSheetConnect
+  ProfitLossSheetConnect,
+  SettingsConnect,
 )(ProfitLossSheet);

client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -9,11 +9,11 @@ import { compose, defaultExpanderReducer } from 'utils';
 
 function ProfitLossSheetTable({
   loading,
-  data,
   onFetchData,
   profitLossTableRows,
   profitLossQuery,
-  profitLossColumns
+  profitLossColumns,
+  companyName,
 }) {
   const columns = useMemo(() => [
     {
@@ -113,11 +113,12 @@ function ProfitLossSheetTable({
 
   return (
     <FinancialSheet
-      companyTitle={'Facebook, Incopration'}
+      companyName={companyName}
       sheetType={'Profit/Loss Sheet'}
       date={new Date()}
       name="profit-loss-sheet"
-      loading={loading}>
+      loading={loading}
+      basis={profitLossQuery.basis}>
 
       <DataTable
         className="bigcapital-datatable--financial-report"

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
-import LoadingIndicator from 'components/LoadingIndicator';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import useAsync from 'hooks/async';
 import moment from 'moment';
@@ -10,7 +9,7 @@ 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,
@@ -18,6 +17,7 @@ function TrialBalanceSheet({
   getTrialBalanceSheetIndex,
   getTrialBalanceAccounts,
   trialBalanceSheetLoading,
+  organizationSettings,
 }) {
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
@@ -72,6 +72,7 @@ function TrialBalanceSheet({
 
           <div class="financial-statement__body">
             <TrialBalanceSheetTable
+              companyName={organizationSettings.name}
               trialBalanceSheetAccounts={trialBalanceAccounts}
               trialBalanceSheetIndex={trialBalanceSheetIndex}
               onFetchData={handleFetchData}
@@ -86,4 +87,5 @@ function TrialBalanceSheet({
 export default compose(
   DashboardConnect,
   TrialBalanceSheetConnect,
+  SettingsConnect,
 )(TrialBalanceSheet);

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

@@ -8,6 +8,7 @@ export default function TrialBalanceSheetTable({
   trialBalanceSheetIndex,
   onFetchData,
   loading,
+  companyName,
 }) {
   const [data, setData] = useState([]);
 
@@ -88,7 +89,7 @@ export default function TrialBalanceSheetTable({
 
   return (
     <FinancialSheet
-      companyTitle={'Facebook, Incopration'}
+      companyName={companyName}
       sheetType={'Trial Balance Sheet'}
       date={new Date()}
       name="trial-balance"

client/src/store/reducers.js

@@ -12,6 +12,7 @@ import currencies from './currencies/currencies.reducer';
 import resources from './resources/resources.reducer';
 import financialStatements from './financialStatement/financialStatements.reducer';
 import itemCategories from './itemCategories/itemsCateory.reducer';
+import settings from './settings/settings.reducer';
 
 export default combineReducers({
   authentication,
@@ -25,5 +26,6 @@ export default combineReducers({
   resources,
   financialStatements,
   items,
-  itemCategories
+  itemCategories,
+  settings,
 });

client/src/store/settings/settings.reducer.js

@@ -0,0 +1,16 @@
+import { createReducer } from '@reduxjs/toolkit';
+import t from 'store/types';
+
+const initialState = {
+  data: {
+    organization: {
+      name: 'Bigcapital, Limited Liabilities',
+    },
+  },
+};
+
+export default createReducer(initialState, {
+  ['asdfas']: (state, action) => {
+    
+  },
+});

client/src/store/settings/settings.type.js

@@ -0,0 +1,5 @@
+
+
+export default {
+
+};

client/src/store/types.js

@@ -11,6 +11,7 @@ import resources from './resources/resource.types';
 import users from './users/users.types';
 import financialStatements from './financialStatement/financialStatements.types';
 import itemCategories from './itemCategories/itemsCategory.type';
+import settings from './settings/settings.type';
 
 export default {
   ...authentication,
@@ -25,5 +26,6 @@ export default {
   ...resources,
   ...users,
   ...financialStatements,
-  ...itemCategories
+  ...itemCategories,
+  ...settings
 };

client/src/style/pages/financial-statements.scss

@@ -35,6 +35,7 @@
     justify-content: center;
     align-items: center;
   }
+
 }
 
 .financial-sheet{
@@ -76,6 +77,20 @@
         color: #777;
       }
     }
+    .tr.no-results{
+      .td{
+        flex-direction: column;
+        padding: 20px;
+        color: #666;
+        align-items: center;
+      }
+    }
+  }
+
+  &__inner{
+    &.is-loading{
+      display: none;
+    }
   }
   &__basis{
     color: #888;
@@ -85,8 +100,7 @@
     font-size: 12px;
   }
   .dashboard__loading-indicator{
-    margin-left: auto;
+    margin: 60px auto 0;
-    margin-right: auto;
   }
 
   &--expended{
@@ -106,7 +120,7 @@
   &--journal{
     .financial-sheet__table{
       .tbody{
-        .tr .td{
+        .tr:not(.no-results) .td{
           padding: 0.4rem;
           color: #444;
           border-bottom-color: #F0F0F0;