WIP Financial statements.

client/src/components/DataTable.js

@@ -121,16 +121,21 @@ export default function DataTable({
 
   // Renders table row.
   const RenderRow = useCallback(({ style = {}, row }) => {
-    prepareRow(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}>
-        <h1 class="financial-sheet__title">{ companyTitle }</h1>
+      <LoadingIndicator loading={loading} spinnerSize={34} />
+
+      <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">
-          Accounting Basis: Accural
-        </div>
-      </LoadingIndicator>
+        { (basisLabel) && (
+          <div class="financial-sheet__basis">
+            Accounting Basis: { basisLabel }
+          </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 (