feat: Receivable aging summary front-end.

client/src/containers/Accounts/AccountsActionsBar.js

@@ -58,9 +58,9 @@ function AccountsActionsBar({
   const viewsMenuItems = accountsViews.map((view) => {
     return <MenuItem onClick={() => onClickViewItem(view)} text={view.name} />;
   });
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
+  const hasSelectedRows = useMemo(
+    () => selectedRows.length > 0,
+    [selectedRows]);
 
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
@@ -73,10 +73,6 @@ function AccountsActionsBar({
     },
   });
 
-  // const handleBulkArchive = useCallback(() => {
-  //   onBulkArchive && onBulkArchive(selectedRows.map(r => r.id));
-  // }, [onBulkArchive, selectedRows]);
-
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
@@ -100,8 +96,8 @@ function AccountsActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon='table-16' iconSize={16} />}
-            text={<T id={'table_views'}/>}
+            icon={<Icon icon="table-16" iconSize={16} />}
+            text={<T id={'table_views'} />}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -119,30 +115,40 @@ function AccountsActionsBar({
           content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
           position={Position.BOTTOM_LEFT}
+          canOutsideClickClose={true}
         >
           <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
-            icon={ <Icon icon="filter-16" iconSize={16} /> }/>
+            className={classNames(Classes.MINIMAL, 'button--filter', {
+              'has-active-filters': filterCount > 0,
+            })}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} filters applied`
+              )
+            }
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
         </Popover>
 
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='play-16' iconSize={16} />}
-            text={<T id={'activate'}/>}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            text={<T id={'activate'} />}
             onClick={handelBulkActivate}
           />
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='pause-16' iconSize={16} />}
-            text={<T id={'inactivate'}/>}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            text={<T id={'inactivate'} />}
             onClick={handelBulkInactive}
           />
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash-16' iconSize={16} />}
-            text={<T id={'delete'}/>}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
@@ -150,18 +156,18 @@ function AccountsActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='print-16' iconSize={16} />}
-          text={<T id={'print'}/>}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export-16' iconSize={16} />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import-16' iconSize={16} />}
-          text={<T id={'import'}/>}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Dialogs/AccountFormDialog.js

@@ -190,12 +190,7 @@ function AccountFormDialog({
   // Account item of select accounts field.
   const accountItem = (item, { handleClick, modifiers, query }) => {
     return (
-      <MenuItem
-        text={item.name}
-        label={item.code}
-        key={item.id}
-        onClick={handleClick}
-      />
+      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
     );
   };
 

client/src/containers/Expenses/ExpensesList.js

@@ -71,12 +71,8 @@ function ExpensesList({
     requestDeleteExpense(deleteExpense.id).then(() => {
       AppToaster.show({
         message: formatMessage(
-          {
-            id: 'the_expense_has_been_successfully_deleted',
-          },
-          {
-            number: deleteExpense.payment_account_id,
-          },
+          { id: 'the_expense_has_been_successfully_deleted' },
+          { number: deleteExpense.payment_account_id },
         ),
         intent: Intent.SUCCESS,
       });
@@ -102,8 +98,8 @@ function ExpensesList({
       .then(() => {
         AppToaster.show({
           message: formatMessage(
-            { id: 'the_expenses_has_been_successfully_deleted', },
-            { count: selectedRowsCount, },
+            { id: 'the_expenses_has_been_successfully_deleted' },
+            { count: selectedRowsCount },
           ),
           intent: Intent.SUCCESS,
         });
@@ -112,8 +108,8 @@ function ExpensesList({
       .catch((error) => {
         setBulkDelete(false);
       });
-  
-      // @todo 
+
+    // @todo
   }, [requestDeleteBulkExpenses, bulkDelete, formatMessage, selectedRowsCount]);
 
   // Handle cancel bulk delete alert.
@@ -179,11 +175,11 @@ function ExpensesList({
       <DashboardPageContent>
         <Switch>
           <Route
-            // exact={true}
-            // path={[
-            //   '/expenses/:custom_view_id/custom_view',
-            //   '/expenses/new',
-            // ]}
+          // exact={true}
+          // path={[
+          //   '/expenses/:custom_view_id/custom_view',
+          //   '/expenses/new',
+          // ]}
           >
             <ExpenseViewTabs />
 

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

@@ -18,8 +18,6 @@ import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
-
-
 function BalanceSheet({
   // #withDashboardActions
   changePageTitle,

client/src/containers/FinancialStatements/FinancialStatementDateRange.js

@@ -3,7 +3,6 @@ import {Row, Col} from 'react-grid-system';
 import {momentFormatter} from 'utils';
 import {DateInput} from '@blueprintjs/datetime';
 import { useIntl } from 'react-intl';
-
 import {
   HTMLSelect,
   FormGroup, 
@@ -11,6 +10,7 @@ import {
   Position,
 } from '@blueprintjs/core';
 import Icon from 'components/Icon';
+import { FieldHint } from 'components';
 import {
   parseDateRangeQuery
 } from 'utils';
@@ -87,7 +87,7 @@ export default function FinancialStatementDateRange({
       <Col sm={3}>
         <FormGroup
           label={intl.formatMessage({'id': 'to_date'})}
-          labelInfo={infoIcon}          
+          labelInfo={<FieldHint />}          
           fill={true}
           intent={formik.errors.to_date && Intent.DANGER}>
 

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

@@ -76,6 +76,7 @@ function GeneralLedgerHeader({
             />
           </FormGroup>
         </Col>
+
         <Col sm={3}>
           <RadiosAccountingBasis
             onChange={handleAccountingBasisChange}

client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+
+import moment from 'moment';
+import { FinancialStatement } from 'components';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import ReceivableAgingSummaryActionsBar from './ReceivableAgingSummaryActionsBar';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import ReceivableAgingSummaryHeader from './ReceivableAgingSummaryHeader'
+import ReceivableAgingSummaryTable from './ReceivableAgingSummaryTable';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withReceivableAgingSummaryActions from './withReceivableAgingSummaryActions';
+import { compose } from 'utils';
+
+
+function ReceivableAgingSummarySheet({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withReceivableAgingSummaryActions
+  requestReceivableAgingSummary,
+}) {
+  const { formatMessage } = useIntl();
+  const [query, setQuery] = useState({
+    as_date: moment().format('YYYY-MM-DD'),
+    aging_before_days: 30,
+    aging_periods: 3,
+  });
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
+  }, []);
+
+  const fetchSheet = useQuery(['receivable-aging-summary', query], 
+    (key, q) => requestReceivableAgingSummary(q),
+    { manual: true });
+
+  // Handle fetch the data of receivable aging summary sheet.
+  const handleFetchData = useCallback(() => {
+    fetchSheet.refetch({ force: true });
+  }, [fetchSheet]);
+
+  const handleFilterSubmit = useCallback((filter) => {
+    const _filter = {
+      ...filter,
+      as_date: moment(filter.as_date).format('YYYY-MM-DD'),
+    };
+    setQuery(_filter);
+    fetchSheet.refetch({ force: true });
+  }, [fetchSheet]);
+
+  return (
+    <DashboardInsider>
+      <ReceivableAgingSummaryActionsBar />
+ 
+      <DashboardPageContent>
+        <FinancialStatement>
+          <ReceivableAgingSummaryHeader
+            onSubmitFilter={handleFilterSubmit} />
+
+          <div class="financial-statement__body">
+            <ReceivableAgingSummaryTable
+              receivableAgingSummaryQuery={query}
+              onFetchData={handleFetchData}
+            />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withReceivableAgingSummaryActions
+)(ReceivableAgingSummarySheet);

client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryActionsBar.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from "@blueprintjs/core";
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import DashboardActionsBar from "components/Dashboard/DashboardActionsBar";
+import FilterDropdown from 'components/FilterDropdown';
+import Icon from 'components/Icon';
+import { If } from 'components';
+
+import withReceivableAging from './withReceivableAgingSummary';
+import withReceivableAgingActions from './withReceivableAgingSummaryActions';
+
+import { compose } from 'utils';
+
+
+function ReceivableAgingSummaryActionsBar({
+  toggleFilterReceivableAgingSummary,
+  receivableAgingFilter,
+}) {
+  const filterDropdown = FilterDropdown({
+    fields: [],
+    onFilterChange: (filterConditions) => {},
+  });
+
+  const handleFilterToggleClick = () => {
+    toggleFilterReceivableAgingSummary();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={<T id={'customize_report'} />}
+        />
+        <NavbarDivider />
+
+        <If condition={receivableAgingFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            onClick={handleFilterToggleClick}
+            icon={<Icon icon="arrow-to-top" />}
+          />
+        </If>
+
+        <If condition={!receivableAgingFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            onClick={handleFilterToggleClick}
+            icon={<Icon icon="arrow-to-bottom" />}
+          />
+        </If>
+        <NavbarDivider />
+
+        <Popover
+          content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='print-16' iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  )
+}
+
+export default compose(
+  withReceivableAgingActions,
+  withReceivableAging(({ receivableAgingSummaryFilter }) => ({
+    receivableAgingFilter: receivableAgingSummaryFilter,
+  })),
+)(ReceivableAgingSummaryActionsBar)

client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryHeader.js

@@ -0,0 +1,140 @@
+import React, { useCallback } from 'react';
+import { useIntl, FormattedMessage as T, } from 'react-intl';
+import { useFormik } from "formik";
+import { Row, Col } from 'react-grid-system';
+import * as Yup from 'yup';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Button,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import {
+  ErrorMessage,
+  FieldHint,
+  FieldRequiredHint,
+} from 'components';
+import {
+  momentFormatter,
+} from 'utils';
+
+import withReceivableAging from './withReceivableAgingSummary';
+import { compose } from 'utils';
+
+function ReceivableAgingSummaryHeader({
+  onSubmitFilter, 
+  receivableAgingFilter,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    values,
+    errors,
+    touched,
+    setFieldValue,
+    getFieldProps,
+    submitForm,
+    isSubmitting
+  } = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      // as_date: new Date(),
+      aging_before_days: 30,
+      aging_periods: 3,
+    },
+    validationSchema: Yup.object().shape({
+      as_date: Yup.date().required().label('As date'),
+      aging_before_days: Yup.number().required().integer().positive().label('aging_before_days'),
+      aging_periods: Yup.number().required().integer().positive().label('aging_periods'),
+    }),
+    onSubmit: (values, { setSubmitting }) => {
+      onSubmitFilter(values);
+      setSubmitting(false);
+    }
+  });
+
+  const handleDateChange = useCallback((name) => (date) => {
+    setFieldValue(name, date);
+  }, []);
+
+  // Handle submit filter submit button.
+  const handleSubmitClick = useCallback(() => {
+    submitForm();
+  }, [submitForm]);
+
+  return (
+    <FinancialStatementHeader show={receivableAgingFilter}>
+      <Row>
+        <Col sm={3}>
+          <FormGroup
+            label={formatMessage({'id': 'as_date'})}
+            labelInfo={<FieldHint />}
+            fill={true}
+            intent={errors.as_date && Intent.DANGER}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              // value={values.as_date}
+              onChange={handleDateChange('as_date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              minimal={true}
+              fill={true} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={3}>
+          <FormGroup
+            label={<T id={'aging_before_days'} />}
+            labelInfo={<FieldHint />}
+            className={'form-group--aging-before-days'}
+            intent={errors.aging_before_days && Intent.DANGER}
+            helperText={<ErrorMessage name="aging_before_days" {...{ errors, touched }} />}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.aging_before_days && Intent.DANGER}
+              {...getFieldProps('aging_before_days')}
+            />
+          </FormGroup>
+        </Col>
+
+        <Col sm={3}>
+          <FormGroup
+            label={<T id={'aging_periods'} />}
+            labelInfo={<FieldHint />}
+            className={'form-group--aging-periods'}
+            intent={errors.aging_before_days && Intent.DANGER}
+            helperText={<ErrorMessage name="aging_periods" {...{ errors, touched }} />}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.aging_before_days && Intent.DANGER}
+              {...getFieldProps('aging_periods')}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col sm={3}>
+          <Button
+            type="submit"
+            onClick={handleSubmitClick}
+            disabled={isSubmitting}
+            className={'button--submit-filter'}>
+            <T id={'calculate_report'} />
+          </Button>
+        </Col>
+      </Row>
+    </FinancialStatementHeader>
+  );
+}
+
+export default compose(
+  withReceivableAging(({ receivableAgingSummaryFilter }) => ({
+    receivableAgingFilter: receivableAgingSummaryFilter,
+  })),
+)(ReceivableAgingSummaryHeader);

client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryTable.js

@@ -0,0 +1,82 @@
+import React, { useMemo, useCallback } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import DataTable from "components/DataTable";
+import FinancialSheet from 'components/FinancialSheet';
+import Money from 'components/Money';
+
+import withSettings from 'containers/Settings/withSettings';
+
+import { compose } from 'utils';
+import withReceivableAgingSummary from './withReceivableAgingSummary';
+import withReceivableAgingSummaryTable from './withReceivableAgingSummaryTable';
+
+function ReceivableAgingSummaryTable({
+  // #withPreferences
+  organizationSettings,
+
+  // #withReceivableAgingSummary
+  receviableAgingRows = [],
+  receivableAgingLoading,
+  receivableAgingColumns,
+  
+  // #ownProps
+  receivableAgingSummaryQuery,
+  onFetchData,
+}) {
+  const { formatMessage } = useIntl();
+
+  const agingColumns = useMemo(() => {
+    return receivableAgingColumns.map((agingColumn) => {
+      return `${agingColumn.before_days} - ${agingColumn.to_days || '<'}`;
+    });
+  }, [receivableAgingColumns]);
+  
+  const columns = useMemo(() => ([
+    {
+      Header: (<T id={'customer_name'} />),
+      accessor: 'customer_name',
+      className: 'customer_name',
+    },
+    ...agingColumns.map((agingColumn, index) => ({
+      Header: agingColumn,
+      id: `asd-${index}`,
+    })),
+    {
+      Header: (<T id={'total'} />),
+      accessor: 'total',
+      className: 'total',
+    },
+  ]), [agingColumns]);
+
+  const handleFetchData = useCallback((...args) => {
+    onFetchData && onFetchData(...args);
+  }, [onFetchData]);
+
+  return (
+    <FinancialSheet
+      companyName={organizationSettings.name}
+      sheetType={formatMessage({ id: 'receivable_aging_summary' })}
+      asDate={new Date()}
+      loading={receivableAgingLoading}>
+
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={receviableAgingRows}
+        onFetchData={handleFetchData}
+        sticky={true}
+      />
+    </FinancialSheet>
+  );
+}
+
+export default compose(
+  withSettings,
+  withReceivableAgingSummaryTable,
+  withReceivableAgingSummary(({
+    receivableAgingSummaryLoading,
+    receivableAgingSummaryColumns }) => ({
+    receivableAgingLoading: receivableAgingSummaryLoading,
+    receivableAgingColumns: receivableAgingSummaryColumns 
+  })),
+)(ReceivableAgingSummaryTable);

client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummary.js

@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import {
+  getFinancialSheet,
+  getFinancialSheetColumns,
+} from 'store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { receivableAgingSummaryIndex } = props;
+
+    const mapped = {
+      receivableAgingSummarySheet: getFinancialSheet(
+        state.financialStatements.receivableAgingSummary.sheets,
+        receivableAgingSummaryIndex,
+      ),
+      receivableAgingSummaryColumns: getFinancialSheetColumns(
+        state.financialStatements.receivableAgingSummary.sheets,
+        receivableAgingSummaryIndex,
+      ),
+      receivableAgingSummaryLoading:
+        state.financialStatements.receivableAgingSummary.loading,
+      receivableAgingSummaryFilter: 
+        state.financialStatements.receivableAgingSummary.filter,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+}

client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { fetchReceivableAgingSummary } from 'store/financialStatement/financialStatements.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  requestReceivableAgingSummary: (query) =>
+    dispatch(fetchReceivableAgingSummary({ query })),
+  toggleFilterReceivableAgingSummary: () => dispatch({
+    type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
+  }),
+});
+
+export default connect(null, mapActionsToProps);

client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryTable.js

@@ -0,0 +1,14 @@
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
+import { connect } from 'react-redux';
+
+const mapStateToProps = (state, props) => {
+  const { receivableAgingSummaryQuery } = props;
+
+  return {
+    receivableAgingSummaryIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.receivableAgingSummary.sheets,
+      receivableAgingSummaryQuery,
+    ),
+  };
+}
+export default connect(mapStateToProps);

client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js

@@ -7,6 +7,8 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { MODIFIER } from 'components';
 
 export default function SelectsListColumnsBy(props) {
   const { onItemSelect, formGroupProps, selectListProps } = props;
@@ -46,9 +48,10 @@ export default function SelectsListColumnsBy(props) {
         noResults={<MenuItem disabled={true} text="No results." />}
         filterable={false}
         itemRenderer={itemRenderer}
-        popoverProps={{ minimal: true }}
+        popoverProps={{ minimal: true, usePortal: false, inline: true }}
         buttonLabel={buttonLabel}
-        onItemSelect={handleItemSelect}        
+        onItemSelect={handleItemSelect}
+        className={classNames(MODIFIER.SELECT_LIST_FILL_POPOVER)}
         {...selectListProps} />
     </FormGroup>
   );

client/src/containers/Resources/withResourceDetails.js

@@ -3,12 +3,14 @@ import {
   getResourceColumns,
   getResourceFields,
   getResourceMetadata,
+  getResourceData,
 } from 'store/resources/resources.reducer';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const { resourceName } = props;
     const mapped =  {
+      resourceData: getResourceData(state, resourceName),
       resourceFields: getResourceFields(state, resourceName),
       resourceColumns: getResourceColumns(state, resourceName),
       resourceMetadata: getResourceMetadata(state, resourceName),

client/src/containers/Resources/withResourcesActions.js

@@ -2,11 +2,13 @@ import {connect} from 'react-redux';
 import {
   fetchResourceColumns,
   fetchResourceFields,
+  fetchResourceData,
 } from 'store/resources/resources.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
   requestFetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
+  requestResourceData: (resourceSlug) => dispatch(fetchResourceData({ resourceSlug })),
 });
 
 export default connect(null, mapDispatchToProps);