Merge branch 'feature/manual-journals' of https://github.com/abouolia/Ratteb

client/src/components/JournalEntry/ManualJournalActionsBar.js

@@ -0,0 +1,111 @@
+import React, { useMemo, useState } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Intent
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { useRouteMatch, useHistory } from 'react-router-dom';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import DialogConnect from 'connectors/Dialog.connector';
+import { compose } from 'utils';
+import FilterDropdown from 'components/FilterDropdown';
+import ManualJournalsConnect from 'connectors/ManualJournals.connect';
+import ResourceConnect from 'connectors/Resource.connector';
+
+function ManualJournalActionsBar({ 
+  views,
+  getResourceFields,
+  addManualJournalsTableQueries,
+  onFilterChanged
+}) {
+  const { path } = useRouteMatch();
+  const history = useHistory();
+
+  const manualJournalFields = getResourceFields('manual_journals');
+  const viewsMenuItems = views.map(view => {
+    return (
+      <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
+    );
+  });
+
+  const onClickNewManualJournal = () => {
+    history.push('/dashboard/accounting/make-journal-entry');
+  };
+  const filterDropdown = FilterDropdown({
+    fields: manualJournalFields,
+    onFilterChange: filterConditions => {
+      addManualJournalsTableQueries({
+        filter_roles: filterConditions || ''
+      });
+      onFilterChanged && onFilterChanged(filterConditions);
+    }
+  });
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Popover
+          content={<Menu>{viewsMenuItems}</Menu>}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--table-views')}
+            icon={<Icon icon='table' />}
+            text='Table Views'
+            rightIcon={'caret-down'}
+          />
+        </Popover>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='plus' />}
+          text='New Journal'
+          onClick={onClickNewManualJournal}
+        />
+        <Popover
+          content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text='Filter'
+            icon={<Icon icon='filter' />}
+          />
+        </Popover>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='trash' iconSize={15} />}
+          text='Delete'
+          intent={Intent.DANGER}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-import' />}
+          text='Import'
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  DialogConnect,
+  ManualJournalsConnect,
+  ResourceConnect
+)(ManualJournalActionsBar);

client/src/components/JournalEntry/ManualJournalsDataTable.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { useParams, useHistory } from 'react-router-dom';
+import Icon from 'components/Icon';
+import { compose } from 'utils';
+import moment from 'moment';
+import ManualJournalsConnect from 'connectors/ManualJournals.connect';
+import DialogConnect from 'connectors/Dialog.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ViewConnect from 'connectors/View.connector';
+import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
+import Money from 'components/Money';
+
+function ManualJournalsDataTable({
+  manualJournals,
+  changeCurrentView,
+  changePageSubtitle,
+  getViewItem,
+  setTopbarEditView,
+  manualJournalsLoading,
+  onFetchData,
+  onEditJournal,
+  onDeleteJournal,
+  onPublishJournal,
+}) {
+  const { custom_view_id: customViewId } = useParams();
+
+  useEffect(() => {
+    const viewMeta = getViewItem(customViewId);
+
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  }, [customViewId]);
+
+  const actionMenuList = (journal) => (
+    <Menu>
+      <MenuItem text='View Details' />
+      <MenuDivider />
+      {!journal.status && (
+        <MenuItem
+          text="Publish Journal"
+          onClick={() => {
+            onPublishJournal && onPublishJournal(journal);          
+          }} />
+      )}      
+      <MenuItem
+        text='Edit Journal'
+        onClick={() => {
+          onEditJournal && onEditJournal(journal);
+        }} />
+      <MenuItem
+        text='Delete Journal'
+        intent={Intent.DANGER}
+        onClick={() => {
+          onDeleteJournal && onDeleteJournal(journal);
+        }} />
+    </Menu>
+  );
+
+  const columns = useMemo(() => [
+    {
+      id: 'date',
+      Header: 'Date',
+      accessor: r => moment().format('YYYY-MM-DD'),
+      disableResizing: true,
+      width: 150,
+      className: 'date',
+    },
+    {
+      id: 'amount',
+      Header: 'Amount',
+      accessor: r => (<Money amount={r.amount} currency={'USD'} />),
+      disableResizing: true,
+      className: 'amount',
+    },
+    {
+      id: 'journal_number',
+      Header: 'Journal No.',
+      accessor: 'journal_number',
+      disableResizing: true,
+      className: 'journal_number',
+    },
+    {
+      id: 'status',
+      Header: 'Status',
+      accessor: (r) => {
+        return r.status ? 'Published' : 'Draft';
+      },
+      disableResizing: true,
+      width: 100,
+      className: 'status',
+    },
+    {
+      id: 'note',
+      Header: 'Note',
+      accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
+      disableResizing: true,
+      width: 100,
+      className: 'note',
+    },
+    {
+      id: 'transaction_type',
+      Header: 'Transaction type ',
+      accessor: 'transaction_type',
+      width: 100,
+      className: 'transaction_type',
+    },
+    {
+      id: 'created_at',
+      Header: 'Created At',
+      accessor: r => moment().format('YYYY-MM-DD'),
+      disableResizing: true,
+      width: 150,
+      className: 'created_at',
+    },
+    {
+      id: 'actions',
+      Header: '',
+      Cell: ({ cell }) => (
+        <Popover
+          content={actionMenuList(cell.row.original)}
+          position={Position.RIGHT_BOTTOM}
+        >
+          <Button icon={<Icon icon='ellipsis-h' />} />
+        </Popover>
+      ),
+      className: 'actions',
+      width: 50,
+      disableResizing: true,
+    },
+  ], []);
+
+  const handleDataTableFetchData = useCallback(() => {
+    onFetchData && onFetchData();
+  }, [onFetchData]);
+
+  return (
+    <LoadingIndicator loading={manualJournalsLoading} spinnerSize={30}>
+      <DataTable
+        columns={columns}
+        data={manualJournals}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+      />
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  DialogConnect,
+  DashboardConnect,
+  ViewConnect,
+  ManualJournalsConnect,
+)(ManualJournalsDataTable);

client/src/components/JournalEntry/ManualJournalsViewTabs.js

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  Tabs,
+  Tab,
+  Button,
+} from '@blueprintjs/core';
+import { useParams } from 'react-router-dom';
+import Icon from 'components/Icon';
+import { Link } from 'react-router-dom';
+import { compose } from 'utils';
+import ManualJournalsConnect from 'connectors/ManualJournals.connect';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import { useUpdateEffect } from 'hooks';
+
+function ManualJournalsViewTabs({
+  views,
+  manualJournals,
+  setTopbarEditView,
+  customViewChanged,
+  addManualJournalsTableQueries,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId } = useParams();
+
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/dashboard/custom_views/manual_journals/new');
+  };
+  const handleViewLinkClick = () => {
+    setTopbarEditView(customViewId);
+  };
+
+  useUpdateEffect(() => {
+    customViewChanged && customViewChanged(customViewId);
+
+    addManualJournalsTableQueries({
+      custom_view_id: customViewId || null,
+    });
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
+  useEffect(() => {
+    addManualJournalsTableQueries({
+      custom_view_id: customViewId,
+    });
+  }, [customViewId]);
+
+  const tabs = views.map((view) => {
+    //FIXME: dashboard/accounting/make-journal-entry
+
+    const baseUrl = '/dashboard/accounting/manual-journals';
+    const link = (
+      <Link
+        to={`${baseUrl}/${view.id}/custom_view`}
+        onClick={handleViewLinkClick}
+      >
+        {view.name}
+      </Link>
+    );
+    return <Tab id={`custom_view_${view.id}`} title={link} />;
+  });
+
+  return (
+    <Navbar className='navbar--dashboard-views'>
+      <NavbarGroup align={Alignment.LEFT}>
+        <Tabs
+          id='navbar'
+          large={true}
+          selectedTabId={`custom_view_${customViewId}`}
+          className='tabs--dashboard-views'
+        >
+          <Tab
+            id='all'
+            title={
+              <Link to={`/dashboard/accounting/manual-journals`}>All</Link>
+            }
+          />
+          {tabs}
+          <Button
+            className='button--new-view'
+            icon={<Icon icon='plus' />}
+            onClick={handleClickNewView}
+          />
+        </Tabs>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  ManualJournalsConnect,
+  DashboardConnect
+)(ManualJournalsViewTabs);

client/src/config/sidebarMenu.js

@@ -43,10 +43,14 @@ export default [
         text: 'Accounts Chart',
         href: '/dashboard/accounts'
       },
+      {
+        text: 'Manual Journal',
+        href: '/dashboard/accounting/manual-journals'
+      },
       {
         text: 'Make Journal',
         href: '/dashboard/accounting/make-journal-entry'
-      }
+      },
     ]
   },
   {

client/src/connectors/MakeJournalEntries.connect.js

@@ -3,10 +3,10 @@ import {
   makeJournalEntries,
   fetchManualJournal,
   editManualJournal,
-} from 'store/accounting/accounting.actions';
+} from 'store/manualJournals/manualJournals.actions';
 import {
   getManualJournal,
-} from 'store/accounting/accounting.reducers';
+} from 'store/manualJournals/manualJournals.reducers';
 
 export const mapStateToProps = (state, props) => ({
   getManualJournal: (id) => getManualJournal(state, id),

client/src/connectors/ManualJournals.connect.js

@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+import {
+  deleteManualJournal,
+  fetchManualJournalsTable,
+  publishManualJournal,
+} from 'store/manualJournals/manualJournals.actions';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import t from 'store/types';
+import {
+  getManualJournalsItems,
+} from 'store/manualJournals/manualJournals.selectors'
+
+const mapStateToProps = (state, props) => ({
+  views: getResourceViews(state, 'manual_journals'),
+  manualJournals: getManualJournalsItems(state, state.manualJournals.currentViewId),
+  tableQuery: state.manualJournals.tableQuery,
+  manualJournalsLoading: state.manualJournals.loading,
+});
+
+const mapActionsToProps = (dispatch) => ({
+  requestDeleteManualJournal: (id) => dispatch(deleteManualJournal({ id })),
+  changeCurrentView: (id) =>
+    dispatch({
+      type: t.MANUAL_JOURNALS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+  addManualJournalsTableQueries: (queries) =>
+    dispatch({
+      type: 'MANUAL_JOURNALS_TABLE_QUERIES_ADD',
+      queries,
+    }),
+  fetchManualJournalsTable: (query = {}) =>
+    dispatch(fetchManualJournalsTable({ query: { ...query } })),
+
+  requestPublishManualJournal: (id) => 
+    dispatch(publishManualJournal({ id })),
+});
+
+export default connect(mapStateToProps, mapActionsToProps);

client/src/containers/Dashboard/Accounting/MakeJournalEntriesFooter.js

@@ -7,6 +7,8 @@ import { FormattedList } from 'react-intl';
 
 export default function MakeJournalEntriesFooter({
   formik,
+  onSubmitClick,
+  onCancelClick,
 }) {
   return (
     <div>
@@ -14,28 +16,38 @@ export default function MakeJournalEntriesFooter({
         <Button
           disabled={formik.isSubmitting}
           intent={Intent.PRIMARY}
-          type="submit">
+          name={'save'}
+          onClick={() => {
+            onSubmitClick({ publish: true, redirect: true });
+          }}>
           Save
         </Button>
 
         <Button
           disabled={formik.isSubmitting}
           intent={Intent.PRIMARY}
-          type="submit"
-          className={'ml1'}>
+          className={'ml1'}
+          name={'save_and_new'}
+          onClick={() => {
+            onSubmitClick({ publish: true, redirect: false }); 
+          }}>
           Save & New
         </Button>
 
         <Button
           disabled={formik.isSubmitting}
-          type="submit"
-          className={'button-secondary ml1'}>
+          className={'button-secondary ml1'}
+          onClick={() => {
+            onSubmitClick({ publish: false, redirect: false }); 
+          }}>
           Save as Draft
         </Button>
 
         <Button
-          type="submit"
-          className={'button-secondary ml1'}>
+          className={'button-secondary ml1'}
+          onClick={() => {
+            onCancelClick && onCancelClick();
+          }}>
           Cancel
         </Button>
       </div>

client/src/containers/Dashboard/Accounting/MakeJournalEntriesForm.js

@@ -1,6 +1,4 @@
-
-
-import React, {useMemo, useEffect} from 'react';
+import React, {useMemo, useState, useEffect, useCallback} from 'react';
 import * as Yup from 'yup';
 import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
 import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
@@ -10,10 +8,9 @@ import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import {compose} from 'utils';
-import useAsync from 'hooks/async';
 import moment from 'moment';
 import AppToaster from 'components/AppToaster';
-import {pick, omit} from 'lodash';
+import {pick} from 'lodash';
 
 function MakeJournalEntriesForm({
   requestMakeJournalEntries,
@@ -21,6 +18,8 @@ function MakeJournalEntriesForm({
   changePageTitle,
   changePageSubtitle,
   editJournal,
+  onFormSubmit,
+  onCancelForm,
 }) {
   useEffect(() => {
     if (editJournal && editJournal.id) {
@@ -49,6 +48,12 @@ function MakeJournalEntriesForm({
     )
   });
 
+  const saveInvokeSubmit = useCallback((payload) => {
+    onFormSubmit && onFormSubmit(payload)
+  }, [onFormSubmit]);
+
+  const [payload, setPayload] = useState({});
+
   const defaultEntry = useMemo(() => ({
     account_id: null,
     credit: 0,
@@ -83,11 +88,11 @@ function MakeJournalEntriesForm({
       }
     },
     onSubmit: (values, actions) => {
-      const form = values.entries.filter((entry) => (
+      const entries = values.entries.filter((entry) => (
         (entry.credit || entry.debit)
       ));
       const getTotal = (type = 'credit') => {
-        return form.reduce((total, item) => {
+        return entries.reduce((total, item) => {
           return item[type] ? item[type] + total : total;
         }, 0);
       }
@@ -101,24 +106,27 @@ function MakeJournalEntriesForm({
         actions.setSubmitting(false);
         return;
       }
-      
+      const form = { ...values, status: payload.publish, entries };
+
       if (editJournal && editJournal.id) {
-        requestEditManualJournal(editJournal.id, { ...values, entries: form })
+        requestEditManualJournal(editJournal.id, form)
           .then((response) => {
             AppToaster.show({
               message: 'manual_journal_has_been_edited',
             }); 
             actions.setSubmitting(false);
+            saveInvokeSubmit({ action: 'update', ...payload });
           }).catch((error) => {
             actions.setSubmitting(false);
           });
       } else {
-        requestMakeJournalEntries({ ...values, entries: form })
+        requestMakeJournalEntries(form)
           .then((response) => {
             AppToaster.show({
               message: 'manual_journal_has_been_submit',
             }); 
             actions.setSubmitting(false);
+            saveInvokeSubmit({ action: 'new', ...payload });
           }).catch((error) => {
             actions.setSubmitting(false);
           });
@@ -126,12 +134,24 @@ function MakeJournalEntriesForm({
     },
   });
 
+  const handleSubmitClick = useCallback((payload) => {
+    setPayload(payload);
+    formik.handleSubmit();
+  }, [setPayload, formik]);
+
+  const handleCancelClick = useCallback((payload) => {
+    onCancelForm && onCancelForm(payload); 
+  }, [onCancelForm]);
+
   return (
     <div class="make-journal-entries">
       <form onSubmit={formik.handleSubmit}>
         <MakeJournalEntriesHeader formik={formik} />
         <MakeJournalEntriesTable formik={formik} defaultRow={defaultEntry} />
-        <MakeJournalEntriesFooter formik={formik} />
+        <MakeJournalEntriesFooter
+          formik={formik}
+          onSubmitClick={handleSubmitClick}
+          onCancelClick={handleCancelClick} />
       </form>
     </div>
   );

client/src/containers/Dashboard/Accounting/MakeJournalEntriesHeader.js

@@ -1,13 +1,11 @@
 import React, {useMemo, useCallback} from 'react';
-import * as Yup from 'yup';
 import {
   InputGroup,
   FormGroup,
   Intent,
   Position,
 } from '@blueprintjs/core';
-import {DatePicker, DateInput} from '@blueprintjs/datetime';
-import {Formik, useFormik} from "formik";
+import {DateInput} from '@blueprintjs/datetime';
 import {useIntl} from 'react-intl';
 import {Row, Col} from 'react-grid-system';
 import moment from 'moment';

client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js

@@ -1,5 +1,5 @@
-import React, {useMemo} from 'react';
-import { useParams } from 'react-router-dom';
+import React, {useMemo, useCallback} from 'react';
+import { useParams, useHistory } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import MakeJournalEntriesForm from './MakeJournalEntriesForm';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -13,6 +13,7 @@ function MakeJournalEntriesPage({
   getManualJournal,
   fetchAccounts,
 }) {
+  const history = useHistory();
   const { id } = useParams();
 
   const fetchJournal = useAsync(() => {
@@ -25,9 +26,21 @@ function MakeJournalEntriesPage({
     getManualJournal(id) || null,
     [getManualJournal, id]);
 
+  const handleFormSubmit = useCallback((payload) => {
+    payload.redirect && 
+      history.push('/dashboard/accounting/manual-journals');
+  }, [history]);
+
+  const handleCancel = useCallback(() => {
+    history.push('/dashboard/accounting/manual-journals');
+  }, [history]);
+
   return (
     <LoadingIndicator loading={fetchJournal.loading} mount={false}>
-      <MakeJournalEntriesForm editJournal={editJournal} />
+      <MakeJournalEntriesForm
+        onFormSubmit={handleFormSubmit}
+        editJournal={editJournal}
+        onCancelForm={handleCancel} />
     </LoadingIndicator>
   );
 }

client/src/containers/Dashboard/Accounting/ManualJournalsTable.js

@@ -0,0 +1,126 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+import useAsync from 'hooks/async';
+import { Alert, Intent } from '@blueprintjs/core';
+import AppToaster from 'components/AppToaster';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import ManualJournalsViewTabs from 'components/JournalEntry/ManualJournalsViewTabs';
+import ManualJournalsDataTable from 'components/JournalEntry/ManualJournalsDataTable';
+import DashboardActionsBar from 'components/JournalEntry/ManualJournalActionsBar';
+import ManualJournalsConnect from 'connectors/ManualJournals.connect';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import CustomViewConnect from 'connectors/CustomView.connector';
+import ResourceConnect from 'connectors/Resource.connector';
+import { compose } from 'utils';
+
+function ManualJournalsTable({
+  changePageTitle,
+  fetchResourceViews,
+  fetchManualJournalsTable,
+  requestDeleteManualJournal,
+  requestPublishManualJournal,
+}) {
+  const history = useHistory();
+  const [deleteManualJournal, setDeleteManualJournal] = useState(false);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchResourceViews('manual_journals'),
+    ]);
+  });
+
+  const fetchManualJournalsHook = useAsync(async () => {
+    return fetchManualJournalsTable();
+  }, false);
+
+  useEffect(() => {
+    changePageTitle('Manual Journals');
+  }, []);
+
+  const handleCancelManualJournalDelete = () => {
+    setDeleteManualJournal(false);
+  };
+
+  const handleConfirmManualJournalDelete = useCallback(() => {
+    requestDeleteManualJournal(deleteManualJournal.id).then(() => {
+      setDeleteManualJournal(false);
+      AppToaster.show({ message: 'the_manual_Journal_has_been_deleted' });
+    });
+  }, [deleteManualJournal, requestDeleteManualJournal]);
+
+  const handleEditJournal = useCallback((journal) => {
+    history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
+  }, [history]);
+  
+  const handleDeleteJournal = useCallback((journal) => {
+    setDeleteManualJournal(journal);
+  }, []);
+
+  const handleFilterChanged = useCallback(() => {
+    fetchManualJournalsHook.execute();
+  }, []);
+
+  const handleViewChanged = useCallback(() => {
+    fetchManualJournalsHook.execute();
+  }, []);
+
+  const handleFetchData = useCallback(() => {
+    fetchManualJournalsHook.execute();
+  }, []);
+
+  const handlePublishJournal = useCallback((journal) => {
+    requestPublishManualJournal(journal.id).then(() => {
+      AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
+    })
+  }, [requestPublishManualJournal]);
+
+  return (
+    <DashboardInsider loading={fetchHook.pending} name={'manual-journals'}>
+      <DashboardActionsBar
+        onFilterChanged={handleFilterChanged} />
+
+      <DashboardPageContent>
+        <Switch>
+          <Route
+            exact={true}
+            path={[
+              '/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
+              '/dashboard/accounting/manual-journals',
+            ]}>
+            <ManualJournalsViewTabs
+              onViewChanged={handleViewChanged} />
+          </Route>
+        </Switch>
+
+        <ManualJournalsDataTable
+          onDeleteJournal={handleDeleteJournal}
+          onFetchData={handleFetchData}
+          onEditJournal={handleEditJournal}
+          onPublishJournal={handlePublishJournal} />
+
+        <Alert
+          cancelButtonText='Cancel'
+          confirmButtonText='Move to Trash'
+          icon='trash'
+          intent={Intent.DANGER}
+          isOpen={deleteManualJournal}
+          onCancel={handleCancelManualJournalDelete}
+          onConfirm={handleConfirmManualJournalDelete}
+        >
+          <p>
+            Are you sure you want to move <b>filename</b> to Trash? You will be
+            able to restore it later, but it will become private to you.
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  ManualJournalsConnect,
+  CustomViewConnect,
+  ResourceConnect,
+  DashboardConnect
+)(ManualJournalsTable);

client/src/routes/dashboard.js

@@ -67,7 +67,7 @@ export default [
   },
 
   {
-    path: `${BASE_URL}/accounting/manual-journal/:id`,
+    path: `${BASE_URL}/accounting/manual-journals/:id/edit`,
     name: 'dashboard.manual.journal.edit',
     component: LazyLoader({
       loader: () =>
@@ -75,6 +75,15 @@ export default [
     }),
   },
 
+  {
+    path: `${BASE_URL}/accounting/manual-journals`,
+    component: LazyLoader({
+      loader: () =>
+        import('containers/Dashboard/Accounting/ManualJournalsTable')
+    }),
+    text: 'Manual Journals'
+  },
+
   // Items
   {
     path: `${BASE_URL}/items/list`,
@@ -95,14 +104,16 @@ export default [
       loader: () => import('containers/Dashboard/Items/ItemsCategoryList')
     })
   },
-  ,
+
   // Financial Reports.
   {
     path: `${BASE_URL}/accounting/general-ledger`,
     name: 'dashboard.accounting.general.ledger',
     component: LazyLoader({
       loader: () =>
-        import('containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger')
+        import(
+          'containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger'
+        )
     })
   },
   {

client/src/static/json/icons.js

@@ -98,5 +98,9 @@ export default {
   "times-circle": {
     path: ['M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'],
     viewBox: '0 0 512 512',
-  }
+  },
+  "file-alt": {
+    path: ['M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'],
+    viewBox: '0 0 384 512'
+  },
 }

client/src/store/accounting/accounting.actions.js

@@ -1,33 +0,0 @@
-import ApiService from 'services/ApiService';
-import t from 'store/types';
-
-export const makeJournalEntries = ({ form }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.post('accounting/make-journal-entries', form).then((response) => {
-      resolve(response);
-    }).catch((error) => { reject(error); });
-  });
-};
-
-export const fetchManualJournal = ({ id }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get(`accounting/manual-journals/${id}`).then((response) => {
-      dispatch({
-        type: t.MANUAL_JOURNAL_SET,
-        payload: {
-          id,
-          manualJournal: response.data.manual_journal,
-        }        
-      });
-      resolve(response);
-    }).catch((error) => { reject(error); });
-  });
-};
-
-export const editManualJournal = ({ form, id }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.post(`accounting/manual-journals/${id}`, form).then((response) => {
-      resolve(response);
-    }).catch((error) => { reject(error); });
-  });
-}

client/src/store/accounting/accounting.reducers.js

@@ -1,19 +0,0 @@
-import t from 'store/types';
-import { createReducer } from '@reduxjs/toolkit';
-
-const initialState = {
-  manualJournals: {},
-};
-
-export default createReducer(initialState, {
-  
-  [t.MANUAL_JOURNAL_SET]: (state, action) => {
-    const { id, manualJournal } = action.payload;
-    state.manualJournals[id] = manualJournal;
-  },
-});
-
-
-export const getManualJournal = (state, id) => {
-  return state.accounting.manualJournals[id];
-}

client/src/store/accounting/accounting.types.js

@@ -1,6 +0,0 @@
-
-
-export default {
-  MAKE_JOURNAL_ENTRIES: 'MAKE_JOURNAL_ENTRIES',
-  MANUAL_JOURNAL_SET: 'MANUAL_JOURNAL_SET',
-}

client/src/store/accounts/accounts.selectors.js

@@ -1,9 +1,11 @@
-import {pickItemsFromIds} from 'store/selectors';
+import { pickItemsFromIds } from 'store/selectors';
 
 export const getAccountsItems = (state, viewId) => {
-  const accountsView = state.accounts.views[(viewId || -1)];
+  
+  const accountsView = state.accounts.views[viewId || -1];
   const accountsItems = state.accounts.items;
 
-  return (typeof accountsView === 'object')
-    ? (pickItemsFromIds(accountsItems, accountsView.ids) || []) : [];
-}
+  return typeof accountsView === 'object'
+    ? pickItemsFromIds(accountsItems, accountsView.ids) || []
+    : [];
+};

client/src/store/manualJournals/manualJournals.actions.js

@@ -0,0 +1,97 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const makeJournalEntries = ({ form }) => {
+  return (dispatch) => new Promise((resolve, reject) => {
+    ApiService.post('accounting/make-journal-entries', form).then((response) => {
+      resolve(response);
+    }).catch((error) => { reject(error); });
+  });
+};
+
+export const fetchManualJournal = ({ id }) => {
+  return (dispatch) => new Promise((resolve, reject) => {
+    ApiService.get(`accounting/manual-journals/${id}`).then((response) => {
+      dispatch({
+        type: t.MANUAL_JOURNAL_SET,
+        payload: {
+          id,
+          manualJournal: response.data.manual_journal,
+        }, 
+      });
+      resolve(response);
+    }).catch((error) => { reject(error); });
+  });
+};
+
+export const editManualJournal = ({ form, id }) => {
+  return (dispatch) => new Promise((resolve, reject) => {
+    ApiService.post(`accounting/manual-journals/${id}`, form).then((response) => {
+      resolve(response);
+    }).catch((error) => { reject(error); });
+  });
+};
+
+export const deleteManualJournal = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`accounting/manual-journals/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.MANUAL_JOURNAL_REMOVE,
+            payload: { id },
+          });
+          resolve(response);
+        })
+        .catch((error) => { reject(error); });
+    });
+};
+
+export const publishManualJournal = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post(`accounting/manual-journals/${id}/publish`)
+        .then((response) => {
+          dispatch({
+            type: t.MANUAL_JOURNAL_PUBLISH,
+            payload: { id },
+          });
+          resolve(response);
+        })
+        .catch((error) => { reject(error); });
+    });
+}
+
+export const fetchManualJournalsTable = ({ query } = {}) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      const pageQuery = getState().manualJournals.tableQuery;
+      dispatch({
+        type: t.MANUAL_JOURNALS_TABLE_LOADING,
+        loading: true,
+      });
+      ApiService.get('accounting/manual-journals', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          
+          dispatch({
+            type: t.MANUAL_JOURNALS_PAGE_SET,
+            manual_journals: response.data.manualJournals,
+            customViewId: response.data.customViewId,
+          });
+          dispatch({
+            type: t.MANUAL_JOURNALS_ITEMS_SET,
+            manual_journals: response.data.manualJournals,
+          });
+          dispatch({
+            type: t.MANUAL_JOURNALS_TABLE_LOADING,
+            loading: false,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};

client/src/store/manualJournals/manualJournals.reducers.js

@@ -0,0 +1,68 @@
+import t from 'store/types';
+import { createReducer } from '@reduxjs/toolkit';
+import { omit } from 'lodash';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  currentViewId: -1,
+  tableQuery: {},
+};
+
+export default createReducer(initialState, {
+  
+  [t.MANUAL_JOURNAL_SET]: (state, action) => {
+    const { id, manualJournal } = action.payload;
+    state.items[id] = manualJournal;
+  },
+
+  [t.MANUAL_JOURNAL_PUBLISH]: (state, action) => {
+    const { id } = action.payload;
+    const item = state.items[id] || {};
+
+    state.items[id] = {
+      ...item, status: 1,
+    };
+  },
+
+  [t.MANUAL_JOURNALS_ITEMS_SET]: (state, action) => {
+    const _manual_journals = {};
+
+    action.manual_journals.forEach((manual_journal) => {
+      _manual_journals[manual_journal.id] = manual_journal;
+    });
+    state.items = {
+      ...state.items,
+      ..._manual_journals,
+    };
+  },
+
+  [t.MANUAL_JOURNALS_PAGE_SET]: (state, action) => {
+    const viewId = action.customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      ids: action.manual_journals.map((i) => i.id),
+    };
+  },
+
+  [t.MANUAL_JOURNALS_TABLE_LOADING]: (state, action) => {
+    state.loading = action.loading;
+  },
+
+  [t.MANUAL_JOURNALS_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.MANUAL_JOURNAL_REMOVE]: (state, action) => {
+    const { id } = action.payload;
+    state.items = omit(state.items, [id]);
+  }
+});
+
+
+export const getManualJournal = (state, id) => {
+  return state.manualJournals.items[id];
+}

client/src/store/manualJournals/manualJournals.selectors.js

@@ -0,0 +1,10 @@
+import { pickItemsFromIds } from 'store/selectors';
+
+export const getManualJournalsItems = (state, viewId) => {
+  const accountsView = state.manualJournals.views[viewId || -1];
+  const accountsItems = state.manualJournals.items;
+
+  return typeof accountsView === 'object'
+    ? pickItemsFromIds(accountsItems, accountsView.ids) || []
+    : [];
+};

client/src/store/manualJournals/manualJournals.types.js

@@ -0,0 +1,13 @@
+export default {
+  MAKE_JOURNAL_ENTRIES: 'MAKE_JOURNAL_ENTRIES',
+  MANUAL_JOURNAL_SET: 'MANUAL_JOURNAL_SET',
+
+  MANUAL_JOURNALS_TABLE_LOADING: 'MANUAL_JOURNALS_TABLE_LOADING',
+  MANUAL_JOURNALS_PAGE_SET: 'MANUAL_JOURNALS_PAGE_SET',
+  MANUAL_JOURNALS_ITEMS_SET: 'MANUAL_JOURNALS_ITEMS_SET',
+  MANUAL_JOURNALS_SET_CURRENT_VIEW: 'MANUAL_JOURNALS_SET_CURRENT_VIEW',
+  MANUAL_JOURNALS_TABLE_QUERIES_ADD: 'MANUAL_JOURNALS_TABLE_QUERIES_ADD',
+  MANUAL_JOURNAL_REMOVE: 'MANUAL_JOURNAL_REMOVE',
+
+  MANUAL_JOURNAL_PUBLISH: 'MANUAL_JOURNAL_PUBLISH',
+};

client/src/store/reducers.js

@@ -11,16 +11,16 @@ import expenses from './expenses/expenses.reducer';
 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 itemCategories from './itemCategories/itemsCategory.reducer';
 import settings from './settings/settings.reducer';
-import accounting from './accounting/accounting.reducers';
+import manualJournals from './manualJournals/manualJournals.reducers';
 
 export default combineReducers({
   authentication,
   dashboard,
   users,
   accounts,
-  accounting,
+  manualJournals,
   fields,
   views,
   expenses,

client/src/store/types.js

@@ -1,6 +1,6 @@
 import authentication from './authentication/authentication.types';
 import accounts from './accounts/accounts.types';
-import accounting from './accounting/accounting.types'
+import accounting from './manualJournals/manualJournals.types'
 import currencies from './currencies/currencies.types';
 import customFields from './customFields/customFields.types';
 import customViews from './customViews/customViews.types';

client/src/style/App.scss

@@ -35,6 +35,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import "pages/make-journal-entries";
 @import "pages/preferences";
 @import "pages/view-form";
+@import "pages/manual-journals";
 
 // Views
 @import "views/filter-dropdown";

client/src/style/components/data-table.scss

@@ -16,7 +16,7 @@
       overflow-x: hidden;
 
       .th{
-        padding: 1rem 1.5rem;
+        padding: 1rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
         color: #666;
@@ -54,7 +54,6 @@
       .bp3-control{
         margin-bottom: 0;
       }
-
       .resizer {
         display: inline-block;
         background: transparent;
@@ -90,8 +89,8 @@
 
       .tr .td{
         border-bottom: 1px solid #E0E2E2;
-      }
-      
+        align-items: center;
+      }      
       .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;

client/src/style/pages/manual-journals.scss

@@ -0,0 +1,26 @@
+
+
+.dashboard__insider--manual-journals{
+
+  .bigcapital-datatable{
+
+    .thead{
+
+    }
+
+    .tbody{
+      .amount > span{
+        font-weight: 600;
+      }
+      .note{
+        .bp3-icon{
+          color: #666;
+        }
+      }
+      .status{
+        font-size: 13px;
+        text-transform: uppercase;
+      }
+    }
+  }
+}

server/src/http/controllers/Accounting.js

@@ -433,11 +433,15 @@ export default {
           errors: [{ type: 'MANUAL.JOURNAL.NOT.FOUND', code: 100 }],
         });
       }
-      if (!manualJournal.status) {
+      if (manualJournal.status) {
         return res.status(400).send({
           errors: [{ type: 'MANUAL.JOURNAL.PUBLISHED.ALREADY', code: 200 }],
         });
       }
+      const updateJournalTransactionOper = ManualJournal.query()
+        .where('id', manualJournal.id)
+        .update({ status: 1 });
+
       const transactions = await AccountTransaction.query()
         .whereIn('reference_type', ['Journal', 'ManualJournal'])
         .where('reference_id', manualJournal.id)
@@ -452,6 +456,7 @@ export default {
         .update({ draft: 0 });
 
       await Promise.all([
+        updateJournalTransactionOper,
         updateAccountsTransactionsOper,
         journal.saveBalance(),
       ]);