feat: optimize chart of accounts.

client/src/components/Accounts/AccountsDataTable.js

@@ -6,6 +6,8 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Classes,
+  Tooltip,
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
 import Icon from 'components/Icon';
@@ -16,6 +18,7 @@ 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 AccountsDataTable({
   accounts,
@@ -45,9 +48,10 @@ function AccountsDataTable({
   // Clear page subtitle when unmount the page.
   useEffect(() => () => { changePageSubtitle(''); }, []);
 
-  const handleEditAccount = account => () => {
+  const handleEditAccount = useCallback((account) => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
-  };
+  }, [openDialog]);
+
   const actionMenuList = account => (
     <Menu>
       <MenuItem text='View Details' />
@@ -64,20 +68,71 @@ function AccountsDataTable({
     </Menu>
   );
   const columns = useMemo(() => [
+    {
+      // Build our expander column
+      id: 'expander', // Make sure it has an ID
+      className: 'expander',
+      Header: ({
+        getToggleAllRowsExpandedProps,
+        isAllRowsExpanded
+      }) => (
+        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          {isAllRowsExpanded ?
+            (<span class="arrow-down" />) :
+            (<span class="arrow-right" />)
+          }
+        </span>
+      ),
+      Cell: ({ row }) =>
+        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
+        // to build the toggle for expanding a row
+        row.canExpand ? (
+          <span
+            {...row.getToggleRowExpandedProps({
+              style: {
+                // We can even use the row.depth property
+                // and paddingLeft to indicate the depth
+                // of the row
+                paddingLeft: `${row.depth * 2}rem`,
+              },
+              className: 'toggle',
+            })}
+          >
+            {row.isExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ) : null,
+      width: 20,
+      disableResizing: true,
+    },
     {
       id: 'name',
       Header: 'Account Name',
-      accessor: 'name',
+      accessor: row => {
+        return (row.description) ?
+          (<Tooltip
+            className={Classes.TOOLTIP_INDICATOR}
+            content={row.description}
+            position={Position.RIGHT_TOP}
+            hoverOpenDelay={500}>
+              { row.name }
+          </Tooltip>) : row.name;
+      },
+      className: 'account_name',
     },
     {
       id: 'code',
       Header: 'Code',
-      accessor: 'code'
+      accessor: 'code',
+      className: 'code',
     },
     {
       id: 'type',
       Header: 'Type',
-      accessor: 'type.name'
+      accessor: 'type.name',
+      className: 'type',
     },
     {
       id: 'normal',
@@ -96,14 +151,14 @@ function AccountsDataTable({
       Header: 'Balance',
       Cell: ({ cell }) => {
         const account = cell.row.original;
-        const {balance} = account;
+        const {balance = null} = account;
 
-        return ('undefined' !== typeof balance) ?
+        return (balance) ?
-          (<span>{ balance.amount }</span>) :
+          (<span>
-          (<span>--</span>);
+            <Money amount={balance.amount} currency={balance.currency_code} />
+            </span>) :
+          (<span class="placeholder">--</span>);
       },
-      
-      // canResize: false,
     },
     {
       id: 'actions',
@@ -111,18 +166,23 @@ function AccountsDataTable({
       Cell: ({ cell }) => (
         <Popover
           content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_BOTTOM}>
+          position={Position.RIGHT_TOP}>
           <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
       ),
       className: 'actions',
       width: 50,
-      // canResize: false
     }
   ], []);
 
-  const handleDatatableFetchData = useCallback(() => {
+  const selectionColumn = useMemo(() => ({
-    onFetchData && onFetchData();
+    minWidth: 42,
+    width: 42,
+    maxWidth: 42,
+  }), [])
+
+  const handleDatatableFetchData = useCallback((...params) => {
+    onFetchData && onFetchData(...params);
   }, []);
 
   return (
@@ -132,7 +192,7 @@ function AccountsDataTable({
         data={accounts}
         onFetchData={handleDatatableFetchData}
         manualSortBy={true}
-        selectionColumn={true} />
+        selectionColumn={selectionColumn} />
     </LoadingIndicator>    
   );
 }

client/src/components/DataTable.js

@@ -103,6 +103,8 @@ export default function DataTable({
               <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
             </div>
           ),
+          className: 'selection',
+          ...(typeof selectionColumn === 'object') ? selectionColumn : {},
         }] : [],
         ...columns,
       ])

client/src/components/Items/ItemsCategoryList.js

@@ -45,7 +45,11 @@ const ItemsCategoryList = ({
         Header: 'Description',
         accessor: 'description'
       },
-
+      {
+        id: 'count',
+        Header: 'Count',
+        // accessor: ''
+      },
       {
         id: 'actions',
         Header: '',

client/src/components/JournalEntry/ManualJournalActionsBar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -37,9 +37,10 @@ function ManualJournalActionsBar({
     );
   });
 
-  const onClickNewManualJournal = () => {
+  const onClickNewManualJournal = useCallback(() => {
     history.push('/dashboard/accounting/make-journal-entry');
-  };
+  }, [history]);
+
   const filterDropdown = FilterDropdown({
     fields: manualJournalFields,
     onFilterChange: filterConditions => {
@@ -83,12 +84,15 @@ function ManualJournalActionsBar({
             icon={<Icon icon='filter' />}
           />
         </Popover>
-        <Button
+
-          className={Classes.MINIMAL}
+        { (false) && (
-          icon={<Icon icon='trash' iconSize={15} />}
+          <Button
-          text='Delete'
+            className={Classes.MINIMAL}
-          intent={Intent.DANGER}
+            icon={<Icon icon='trash' iconSize={15} />}
-        />
+            text='Delete'
+            intent={Intent.DANGER}
+          />
+        )}
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}

client/src/components/JournalEntry/ManualJournalsDataTable.js

@@ -107,6 +107,7 @@ function ManualJournalsDataTable({
       Header: 'Note',
       accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
       disableResizing: true,
+      disableSorting: true,
       width: 100,
       className: 'note',
     },

client/src/components/JournalEntry/ManualJournalsViewTabs.js

@@ -85,6 +85,7 @@ function ManualJournalsViewTabs({
             className='button--new-view'
             icon={<Icon icon='plus' />}
             onClick={handleClickNewView}
+            minimal={true}
           />
         </Tabs>
       </NavbarGroup>

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -28,6 +28,7 @@ function AccountsChart({
   fetchResourceFields,
   getResourceFields,
   requestFetchAccountsTable,
+  addAccountsTableQueries
 }) {
   const [state, setState] = useState({
     deleteAlertActive: false,
@@ -116,9 +117,21 @@ function AccountsChart({
     console.log(accounts);
   };
 
-  const handleFilterChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFilterChanged = useCallback(() => {
+    
+    fetchAccountsHook.execute();
+  }, [fetchAccountsHook]);
+
   const handleViewChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
-  const handleFetchData = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
+    addAccountsTableQueries({
+      ...(sortBy.length > 0) ? {
+        column_sort_by: sortBy[0].id,
+        sort_by: sortBy[0].desc ? 'desc' : 'asc',
+      } : {},
+    });
+    fetchAccountsHook.execute();
+  }, [fetchAccountsHook, addAccountsTableQueries]);
 
   return (
     <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>

client/src/static/json/icons.js

@@ -36,9 +36,13 @@ export default {
     viewBox: '0 0 512 512',
   },
   "arrow-up": {
-    path: ['M4.465 263.536l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z'],
+    path: ['M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z'],
     viewBox: '0 0 448 512'
   },
+  "arrow-down": {
+    path: ['M441.9 250.1l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L250 385.4V44c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12v341.4L42.9 230.3c-4.7-4.7-12.3-4.7-17 0L6.1 250.1c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'],
+    viewBox: '0 0 448 512' 
+  },
   "ellipsis-h": {
     path: ['M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'],
     viewBox: '0 0 512 512',

client/src/style/App.scss

@@ -9,6 +9,8 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
 $menu-item-color-hover: $light-gray4;
 $menu-item-color-active: $light-gray3;
 
+$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
+
 // Blueprint framework.
 @import "@blueprintjs/core/src/blueprint.scss";
 @import "@blueprintjs/datetime/src/blueprint-datetime.scss";
@@ -27,6 +29,12 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 // Components
 @import "components/data-table";
 @import "components/dialog";
+  
+.bp3-breadcrumbs-collapsed::before{
+  background: escape-svg($breadcrumbs-collapsed-icon) center center;
+  width: 15px;
+  height: 15px;
+}
 
 // Pages
 @import "pages/dashboard";

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

@@ -4,19 +4,27 @@
   overflow-x: auto;
   overflow-y: hidden;
 
+  .dashboard__page-content &{
+
+    .table .thead{
+      .th{
+        border-bottom-color: #eaeaea;
+      }
+    }
+  }
+
   .table {
     text-align: left;
     border-spacing: 0;
     min-width: 100%;
     display: block;
-    // width: 100%;
 
     .thead{
       overflow-y: auto;
       overflow-x: hidden;
 
       .th{
-        padding: 1rem 0.5rem;
+        padding: 0.8rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
         color: #555;
@@ -109,13 +117,17 @@
       .tr .td{
         border-bottom: 1px solid #E0E2E2;
         align-items: center;
+
+        .placeholder{
+          color: #999;
+        }
       }      
       .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;
         box-shadow: none;
         padding: 5px 15px;
-        border-radius: 2px;
+        border-radius: 5px;
 
         &:hover,
         &:focus{

client/src/style/objects/typography.scss

@@ -1,7 +1,7 @@
 
 
 body{
-  color: #212529;
+  color: #444;
 }
 
 .#{$ns}-heading{

client/src/style/pages/accounts-chart.scss

@@ -2,12 +2,45 @@
 .dashboard__insider--accounts-chart{
 
   .bigcapital-datatable{
+
     .normal{
       .#{$ns}-icon{
-        color: #666;
+        color: #aaa;
         padding-left: 15px;
       }
     }
+
+    .table{
+      .thead,
+      .tbody{
+        .th.selection,
+        .td.selection{
+          padding-left: 18px;
+        }
+      }
+
+      .tbody{
+        .tr .td{
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        .account_name{
+          font-weight: 500;
+
+          .bp3-tooltip-indicator{
+            cursor: default;
+            border-bottom-color: #c6c6c6;
+          }
+        }
+        .code{
+          color: #666;
+        }
+        .actions{
+          padding-right: 18px;
+          justify-content: right;
+        }
+      }
+    }
   }
 }
 
@@ -48,7 +81,6 @@
     .form-group--parent-account{
       margin-bottom: 35px;
     }
-
     .form-group--account-code{
       margin-bottom: 16px;
     }

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

@@ -44,7 +44,7 @@
   width: auto;
   padding: 30px 20px;
   max-width: 100%;
-  margin: 35px auto;
+  margin: 25px auto 35px;
   min-height: 400px;
   display: flex;
   flex-direction: column;

server/src/http/controllers/Accounts.js

@@ -282,6 +282,7 @@ export default {
       const accounts = await Account.query().onBuild((builder) => {
         builder.modify('filterAccountTypes', filter.account_types);
         builder.withGraphFetched('type');
+        builder.withGraphFetched('balance');
 
         // Build custom view conditions query.
         if (viewConditionals.length > 0) {