feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/components/DataTableCells/MoneyFieldCell.js

@@ -1,19 +1,20 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
-import MoneyInputGroup from 'components/MoneyInputGroup';
+import { MoneyInputGroup } from 'components';
+import { CLASSES } from 'common/classes';
 
 // Input form cell renderer.
 const MoneyFieldCellRenderer = ({
-  row: { index },
+  row: { index, moneyInputGroupProps = {} },
   column: { id },
   cell: { value: initialValue },
   payload: { errors, updateData },
 }) => {
   const [value, setValue] = useState(initialValue);
 
-  const handleFieldChange = useCallback((e, value) => {
+  const handleFieldChange = useCallback((value) => {
     setValue(value);
-  }, []);
+  }, [setValue]);
 
   function isNumeric(data) {
     return (
@@ -21,7 +22,7 @@ const MoneyFieldCellRenderer = ({
     );
   }
 
-  const onBlur = () => {
+  const handleFieldBlur = () => {
     const updateValue = isNumeric(value) ? parseFloat(value) : value;
     updateData(index, id, updateValue);
   };
@@ -34,15 +35,14 @@ const MoneyFieldCellRenderer = ({
 
   return (
     <FormGroup
-      intent={error ? Intent.DANGER : null}>
+      intent={error ? Intent.DANGER : null}
+      className={CLASSES.FILL}>
       <MoneyInputGroup
         value={value}
         prefix={'$'}
         onChange={handleFieldChange}
-        inputGroupProps={{
-          fill: true,
-          onBlur,
-        }}
+        onBlur={handleFieldBlur}
+        {...moneyInputGroupProps}
       />
     </FormGroup>
   );

client/src/components/DataTableCells/PercentFieldCell.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
-import MoneyInputGroup from 'components/MoneyInputGroup';
+import { MoneyInputGroup } from 'components';
 
 const PercentFieldCell = ({
   cell: { value: initialValue },
@@ -10,14 +10,15 @@ const PercentFieldCell = ({
 }) => {
   const [value, setValue] = useState(initialValue);
 
-  const onBlur = (e) => {
-    updateData(index, id, parseInt(e.target.value, 10));
+  const handleBlurChange = (newValue) => {
+    const parsedValue = newValue === '' || newValue === undefined
+      ? '' : parseInt(newValue, 10);
+    updateData(index, id, parsedValue);
   };
 
-  const onChange = useCallback((e) => {
-    setValue(e.target.value);
-  }, []);
-
+  const handleChange = useCallback((value) => {
+    setValue(value);
+  }, [setValue]);
 
   useEffect(() => {
     setValue(initialValue);
@@ -29,12 +30,8 @@ const PercentFieldCell = ({
     <FormGroup intent={error ? Intent.DANGER : null}>
       <MoneyInputGroup
         value={value}
-        suffix={'%'}
-        onChange={onChange}
-        inputGroupProps={{
-          fill: true,
-          onBlur,
-        }}
+        onChange={handleChange}
+        onBlurValue={handleBlurChange}
       />
     </FormGroup>
   );

client/src/components/DataTableCells/index.js

@@ -5,6 +5,7 @@ import ContactsListFieldCell from './ContactsListFieldCell';
 import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
+
 export {
   AccountsListFieldCell,
   MoneyFieldCell,