fix: remove the ignore script from vercel.

fix: BIG-421 account form issues

.github/workflows/docker-build.yml

@@ -19,7 +19,7 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: abouhuolia/bigcapital-client
+  IMAGE_NAME: abouhuolia/bigcapital-webapp
 
 jobs:
   setup-build-publish-deploy:
@@ -50,8 +50,9 @@ jobs:
       uses: docker/build-push-action@v2
       with:
           context: .
+          file: ./packages/webapp/Dockerfile
           push: true
-          tags: ghcr.io/bigcapitalhq/client:latest
+          tags: ghcr.io/bigcapitalhq/webapp:latest
           labels: ${{ steps.meta.outputs.labels }}
     # Send notification to Slack channel.
     - name: Slack Notification built and published successfully.

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn commitlint --edit 

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"

.vercelignore

@@ -0,0 +1,5 @@
+/*
+!package.json
+!package-lock.json
+!yarn.lock
+!packages/webapp

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-lerna-scopes'] };

lerna.json

@@ -1,5 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useWorkspaces": true,
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "npmClient": "npm"
 }

package.json

@@ -6,17 +6,29 @@
     "dev": "lerna run dev",
     "build": "lerna run build",
     "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\"",
-    "build:webapp": "lerna run dev --scope \"@bigcapital/webapp\"",
+    "build:webapp": "lerna run build --scope \"@bigcapital/webapp\"",
     "dev:server": "lerna run dev --scope \"@bigcapital/server\"",
-    "build:server": "lerna run dev --scope \"@bigcapital/server\""
+    "build:server": "lerna run build --scope \"@bigcapital/server\"",
+    "prepare": "husky install"
   },
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "shared/*"
   ],
   "devDependencies": {
-    "lerna": "^6.4.1"
+    "@commitlint/config-conventional": "^17.4.2",
+    "@commitlint/config-lerna-scopes": "^17.4.2",
+    "husky": "^8.0.3",
+    "lerna": "^6.4.1",
+    "@commitlint/cli": "^17.4.2"
   },
   "engines": {
-    "node": ">=14.20"
-  }
-}
+    "node": "14.x"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "dependencies": {}
+}

packages/server/README.md

@@ -0,0 +1 @@
+# @bigcapital/server

packages/server/bin/utils.js

@@ -1,94 +0,0 @@
-import Knex from 'knex';
-import { knexSnakeCaseMappers } from 'objection';
-import color from 'colorette';
-import config from '../src/config';
-// import { systemKnexConfig } from '../src/config/knexConfig';
-
-function initSystemKnex() {
-  return Knex({
-    client: config.system.db_client,
-    connection: {
-      host: config.system.db_host,
-      user: config.system.db_user,
-      password: config.system.db_password,
-      database: config.system.db_name,
-      charset: 'utf8',
-    },
-    migrations: {
-      directory: config.system.migrations_dir,
-    },
-    seeds: {
-      directory: config.system.seeds_dir,
-    },
-    pool: { min: 0, max: 7 },
-    ...knexSnakeCaseMappers({ upperCase: true }),
-  });
-}
-
-function getAllSystemTenants(knex) {
-  return knex('tenants');
-}
-
-function initTenantKnex(organizationId) {
-  return Knex({
-    client: config.tenant.db_client,
-    connection: {
-      host: config.tenant.db_host,
-      user: config.tenant.db_user,
-      password: config.tenant.db_password,
-      database: `${config.tenant.db_name_prefix}${organizationId}`,
-      charset: config.tenant.charset,
-    },
-    migrations: {
-      directory: config.tenant.migrations_dir,
-    },
-    seeds: {
-      directory: config.tenant.seeds_dir,
-    },
-    pool: { min: 0, max: 5 },
-    ...knexSnakeCaseMappers({ upperCase: true }),
-  })
-}
-
-function exit(text) {
-  if (text instanceof Error) {
-    console.error(
-      color.red(`${text.detail ? `${text.detail}\n` : ''}${text.stack}`)
-    );
-  } else {
-    console.error(color.red(text));
-  }
-  process.exit(1);
-}
-
-function success(text) {
-  console.log(text);
-  process.exit(0);
-}
-
-function log(text) {
-  console.log(text);
-}
-
-function getDeepValue(prop, obj) {
-  if (!Object.keys(obj).length) { return []; }
-
-  return Object.entries(obj).reduce((acc, [key, val]) => {
-    if (key === prop) {
-      acc.push(val);
-    } else {
-      acc.push(Array.isArray(val) ? val.map(getIds).flat() : getIds(val));
-    }
-    return acc.flat();
-  }, []);
-}
-
-export {
-  initTenantKnex,
-  initSystemKnex,
-  getAllSystemTenants,
-  exit,
-  success,
-  log,
-  getDeepValue,
-}

packages/server/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bigcapital-server",
+  "name": "@bigcapital/server",
   "version": "1.7.1",
   "description": "",
   "main": "src/server.ts",
@@ -8,7 +8,9 @@
     "clear": "rimraf build",
     "dev": "cross-env NODE_ENV=development webpack --config scripts/webpack.config.js",
     "build:resources": "gulp --gulpfile=scripts/gulpfile.js styles styles-rtl",
-    "build": "cross-env NODE_ENV=production webpack --config scripts/webpack.config.js",
+    "build:app": "cross-env NODE_ENV=production webpack --config scripts/webpack.config.js",
+    "build:commands": "cross-env NODE_ENV=production webpack --config scripts/webpack.cli.js",
+    "build": "npm-run-all build:*",
     "lint:fix": "eslint --fix ./**/*.ts"
   },
   "author": "Ahmed Bouhuolia, <a.bouhuolia@gmail.com>",

packages/server/scripts/webpack.cli.js

@@ -0,0 +1,11 @@
+const { getCommonWebpackOptions } = require('./webpack.common');
+
+const inputEntry = './src/commands/index.ts';
+const outputDir = '../build';
+const outputFilename = 'commands.js';
+
+module.exports = getCommonWebpackOptions({
+  inputEntry,
+  outputDir,
+  outputFilename,
+});

packages/server/scripts/webpack.common.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const { NormalModuleReplacementPlugin } = require('webpack');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const isDev = process.env.NODE_ENV === 'development';
+
+exports.getCommonWebpackOptions = ({
+  inputEntry,
+  outputDir,
+  outputFilename,
+}) => {
+  const webpackOptions = {
+    entry: ['regenerator-runtime/runtime', inputEntry],
+    target: 'node',
+    mode: isDev ? 'development' : 'production',
+    watch: isDev,
+    watchOptions: {
+      aggregateTimeout: 200,
+      poll: 1000,
+    },
+    output: {
+      path: path.resolve(__dirname, outputDir),
+      filename: outputFilename,
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+      extensionAlias: {
+        '.ts': ['.js', '.ts'],
+        '.cts': ['.cjs', '.cts'],
+        '.mts': ['.mjs', '.mts'],
+      },
+      plugins: [
+        new TsconfigPathsPlugin({
+          configFile: './tsconfig.json',
+          extensions: ['.ts', '.tsx', '.js'],
+        }),
+      ],
+    },
+    plugins: [
+      // Ignore knex dynamic required dialects that we don't use
+      new NormalModuleReplacementPlugin(
+        /m[sy]sql2?|oracle(db)?|sqlite3|pg-(native|query)/,
+        'noop2'
+      ),
+      new ProgressBarPlugin(),
+    ],
+    externals: [nodeExternals(), 'aws-sdk', 'prettier'],
+    module: {
+      rules: [
+        {
+          test: /\.([cm]?ts|tsx|js)$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+                configFile: 'tsconfig.json',
+              },
+            },
+          ],
+          exclude: /(node_modules)/,
+        },
+      ],
+    },
+  };
+
+  if (isDev) {
+    webpackOptions.plugins.push(
+      new RunScriptWebpackPlugin({ name: outputFilename })
+    );
+  }
+  return webpackOptions;
+};

packages/server/scripts/webpack.config.js

@@ -1,74 +1,11 @@
-const path = require('path');
-const { NormalModuleReplacementPlugin } = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
-const nodeExternals = require('webpack-node-externals');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const { getCommonWebpackOptions } = require('./webpack.common');
 
-const isDev = process.env.NODE_ENV === 'development';
+const inputEntry = './src/server.ts';
 const outputDir = '../build';
 const outputFilename = 'index.js';
-const inputEntry = './src/server.ts';
 
-const webpackOptions = {
-  entry: ['regenerator-runtime/runtime', inputEntry],
-  target: 'node',
-  mode: isDev ? 'development' : 'production',
-  watch: isDev,
-  watchOptions: {
-    aggregateTimeout: 200,
-    poll: 1000,
-  },
-  output: {
-    path: path.resolve(__dirname, outputDir),
-    filename: outputFilename,
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
-    extensionAlias: {
-      '.ts': ['.js', '.ts'],
-      '.cts': ['.cjs', '.cts'],
-      '.mts': ['.mjs', '.mts'],
-    },
-    plugins: [
-      new TsconfigPathsPlugin({
-        configFile: './tsconfig.json',
-        extensions: ['.ts', '.tsx', '.js'],
-      }),
-    ],
-  },
-  plugins: [
-    // Ignore knex dynamic required dialects that we don't use
-    new NormalModuleReplacementPlugin(
-      /m[sy]sql2?|oracle(db)?|sqlite3|pg-(native|query)/,
-      'noop2'
-    ),
-    new ProgressBarPlugin(),
-  ],
-  externals: [nodeExternals(), 'aws-sdk', 'prettier'],
-  module: {
-    rules: [
-      {
-        test: /\.([cm]?ts|tsx|js)$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
-              configFile: 'tsconfig.json',
-            },
-          },
-        ],
-        exclude: /(node_modules)/,
-      },
-    ],
-  },
-};
-
-if (isDev) {
-  webpackOptions.plugins.push(
-    new RunScriptWebpackPlugin({ name: outputFilename })
-  );
-}
-
-module.exports = webpackOptions;
+module.exports = getCommonWebpackOptions({
+  inputEntry,
+  outputDir,
+  outputFilename,
+});

packages/server/src/api/controllers/Accounts.ts

@@ -9,6 +9,7 @@ import DynamicListingService from '@/services/DynamicListing/DynamicListService'
 import { DATATYPES_LENGTH } from '@/data/DataTypes';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
 import { AccountsApplication } from '@/services/Accounts/AccountsApplication';
+import { MAX_ACCOUNTS_CHART_DEPTH } from 'services/Accounts/constants';
 
 @Service()
 export default class AccountsController extends BaseController {
@@ -494,6 +495,22 @@ export default class AccountsController extends BaseController {
           }
         );
       }
+      if (error.errorType === 'PARENT_ACCOUNT_EXCEEDED_THE_DEPTH_LEVEL') {
+        return res.boom.badRequest(
+          'The parent account exceeded the depth level of accounts chart.',
+          {
+            errors: [
+              {
+                type: 'PARENT_ACCOUNT_EXCEEDED_THE_DEPTH_LEVEL',
+                code: 1500,
+                data: {
+                  maxDepth: MAX_ACCOUNTS_CHART_DEPTH,
+                },
+              },
+            ],
+          }
+        );
+      }
     }
     next(error);
   }

packages/server/src/commands/bigcapital.ts

@@ -1,15 +1,81 @@
+#!/usr/bin/env node
 import commander from 'commander';
 import color from 'colorette';
-import argv from 'getopts'
-import config from '../src/config';
-import { 
-  initSystemKnex,
-  getAllSystemTenants,
-  initTenantKnex,
-  exit,
-  success,
-  log,
-} from './utils';
+import argv from 'getopts';
+import Knex from 'knex';
+import { knexSnakeCaseMappers } from 'objection';
+import config from '../config';
+
+function initSystemKnex() {
+  return Knex({
+    client: config.system.db_client,
+    connection: {
+      host: config.system.db_host,
+      user: config.system.db_user,
+      password: config.system.db_password,
+      database: config.system.db_name,
+      charset: 'utf8',
+    },
+    migrations: {
+      directory: config.system.migrations_dir,
+    },
+    seeds: {
+      directory: config.system.seeds_dir,
+    },
+    pool: { min: 0, max: 7 },
+    ...knexSnakeCaseMappers({ upperCase: true }),
+  });
+}
+
+function initTenantKnex(organizationId) {
+  return Knex({
+    client: config.tenant.db_client,
+    connection: {
+      host: config.tenant.db_host,
+      user: config.tenant.db_user,
+      password: config.tenant.db_password,
+      database: `${config.tenant.db_name_prefix}${organizationId}`,
+      charset: config.tenant.charset,
+    },
+    migrations: {
+      directory: config.tenant.migrations_dir,
+    },
+    seeds: {
+      directory: config.tenant.seeds_dir,
+    },
+    pool: { min: 0, max: 5 },
+    ...knexSnakeCaseMappers({ upperCase: true }),
+  });
+}
+function exit(text) {
+  if (text instanceof Error) {
+    console.error(
+      color.red(`${text.detail ? `${text.detail}\n` : ''}${text.stack}`)
+    );
+  } else {
+    console.error(color.red(text));
+  }
+  process.exit(1);
+}
+
+function success(text) {
+  console.log(text);
+  process.exit(0);
+}
+function log(text) {
+  console.log(text);
+}
+
+function getAllSystemTenants(knex) {
+  return knex('tenants');
+}
+
+// module.exports = {
+//   log,
+//   success,
+//   exit,
+//   initSystemKnex,
+// };
 
 // - bigcapital system:migrate:latest
 // - bigcapital system:migrate:rollback
@@ -17,12 +83,12 @@ import {
 // - bigcapital tenants:migrate:latest --tenant_id=XXX
 // - bigcapital tenants:migrate:rollback
 // - bigcapital tenants:migrate:rollback --tenant_id=XXX
-// - bigcapital tenants:migrate:make 
-// - bigcapital system:migrate:make 
+// - bigcapital tenants:migrate:make
+// - bigcapital system:migrate:make
 // - bigcapital tenants:list
 
 commander
-  .command('system:migrate:rollback') 
+  .command('system:migrate:rollback')
   .description('Migrate the system database of the application.')
   .action(async () => {
     try {
@@ -33,18 +99,17 @@ commander
         success(color.cyan('Already at the base migration'));
       }
       success(
-        color.green(
-          `Batch ${batchNo} rolled back: ${_log.length} migrations`
-        ) + (argv.verbose ? `\n${color.cyan(_log.join('\n'))}` : '')
+        color.green(`Batch ${batchNo} rolled back: ${_log.length} migrations`) +
+          (argv.verbose ? `\n${color.cyan(_log.join('\n'))}` : '')
       );
-    } catch(error) {
+    } catch (error) {
       exit(error);
     }
   });
 
 commander
   .command('system:migrate:latest')
-  .description('Rollback latest mgiration of the system database.')
+  .description('Migrate latest mgiration of the system database.')
   .action(async () => {
     try {
       const sysKnex = await initSystemKnex();
@@ -57,7 +122,7 @@ commander
         color.green(`Batch ${batchNo} run: ${log.length} migrations`) +
           (argv.verbose ? `\n${color.cyan(log.join('\n'))}` : '')
       );
-    } catch(error) {
+    } catch (error) {
       exit(error);
     }
   });
@@ -67,85 +132,47 @@ commander
   .description('Created a named migration file to the system database.')
   .action(async (name) => {
     const sysKnex = await initSystemKnex();
-    
-    sysKnex.migrate.make(name).then((name) => {
-      success(color.green(`Created Migration: ${name}`));
-    }).catch(exit)
-  });
 
-commander
-  .command('tenants:migrate:make <name>')
-  .description('Created a name migration file to the tenants databases.')
-  .action(async (name) => {
-    const sysKnex = await initTenantKnex();
-    
-    sysKnex.migrate.make(name).then((name) => {
-      success(color.green(`Created Migration: ${name}`));
-    }).catch(exit)
+    sysKnex.migrate
+      .make(name)
+      .then((name) => {
+        success(color.green(`Created Migration: ${name}`));
+      })
+      .catch(exit);
   });
 
 commander
   .command('tenants:list')
   .description('Retrieve a list of all system tenants databases.')
   .action(async (cmd) => {
-    try{
+    try {
       const sysKnex = await initSystemKnex();
       const tenants = await getAllSystemTenants(sysKnex);
 
       tenants.forEach((tenant) => {
         const dbName = `${config.tenant.db_name_prefix}${tenant.organizationId}`;
-        console.log(`ID: ${tenant.id} | Organization ID: ${tenant.organizationId} | DB Name: ${dbName}`);
+        console.log(
+          `ID: ${tenant.id} | Organization ID: ${tenant.organizationId} | DB Name: ${dbName}`
+        );
       });
-    } catch(error) { exit(error); };
+    } catch (error) {
+      exit(error);
+    }
     success('---');
   });
 
 commander
-  .command('tenants:migrate:rollback')
-  .description('Rollback the last batch of tenants migrations.')
-  .option('-t, --tenant_id [tenant_id]', 'Which tenant id do you migrate.')
-  .action(async (cmd) => {
-    try {
-      const sysKnex = await initSystemKnex();
-      const tenants = await getAllSystemTenants(sysKnex);
-      const tenantsOrgsIds = tenants.map((tenant) => tenant.organizationId);
+  .command('tenants:migrate:make <name>')
+  .description('Created a named migration file to the tenants database.')
+  .action(async (name) => {
+    const sysKnex = await initTenantKnex();
 
-      if (cmd.tenant_id && tenantsOrgsIds.indexOf(cmd.tenant_id) === -1) {
-        exit(`The given tenant id ${cmd.tenant_id} is not exists.`);
-      } 
-
-      const migrateOpers = [];
-      const migrateTenant = async (organizationId) => {
-        try {
-          const tenantKnex = await initTenantKnex(organizationId);
-          const [batchNo, _log] = await tenantKnex.migrate.rollback();
-          const tenantDb = `${config.tenant.db_name_prefix}${organizationId}`;
-
-          if (_log.length === 0) {
-            log(color.cyan('Already at the base migration'));
-          }
-          log(
-            color.green(
-              `Tenant: ${tenantDb} > Batch ${batchNo} rolled back: ${_log.length} migrations`
-            ) + (argv.verbose ? `\n${color.cyan(_log.join('\n'))}` : '')
-          );
-          log('---------------');
-        } catch (error) { exit(error); }
-      };
-
-      if (!cmd.tenant_id) {
-        tenants.forEach((tenant) => {
-          const oper = migrateTenant(tenant.organizationId);
-          migrateOpers.push(oper);
-        });
-      } else {
-        const oper = migrateTenant(cmd.tenant_id);
-        migrateOpers.push(oper);
-      }
-      Promise.all(migrateOpers).then(() => {
-        success('All tenants are rollbacked.');
-      });
-    } catch (error) { exit(error); }
+    sysKnex.migrate
+      .make(name)
+      .then((name) => {
+        success(color.green(`Created Migration: ${name}`));
+      })
+      .catch(exit);
   });
 
 commander
@@ -156,8 +183,8 @@ commander
     try {
       const sysKnex = await initSystemKnex();
       const tenants = await getAllSystemTenants(sysKnex);
-      const tenantsOrgsIds = tenants.map(tenant => tenant.organizationId);
-      
+      const tenantsOrgsIds = tenants.map((tenant) => tenant.organizationId);
+
       if (cmd.tenant_id && tenantsOrgsIds.indexOf(cmd.tenant_id) === -1) {
         exit(`The given tenant id ${cmd.tenant_id} is not exists.`);
       }
@@ -174,14 +201,15 @@ commander
             log(color.cyan('Already up to date'));
           }
           log(
-            color.green(`Tenant ${tenantDb} > Batch ${batchNo} run: ${_log.length} migrations`) +
-              (argv.verbose ? `\n${color.cyan(log.join('\n'))}` : '')
+            color.green(
+              `Tenant ${tenantDb} > Batch ${batchNo} run: ${_log.length} migrations`
+            ) + (argv.verbose ? `\n${color.cyan(log.join('\n'))}` : '')
           );
           log('-------------------');
         } catch (error) {
           log(error);
         }
-      }
+      };
       if (!cmd.tenant_id) {
         tenants.forEach((tenant) => {
           const oper = migrateTenant(tenant.organizationId);
@@ -200,4 +228,55 @@ commander
     }
   });
 
-commander.parse(process.argv);
+commander
+  .command('tenants:migrate:rollback')
+  .description('Rollback the last batch of tenants migrations.')
+  .option('-t, --tenant_id [tenant_id]', 'Which tenant id do you migrate.')
+  .action(async (cmd) => {
+    try {
+      const sysKnex = await initSystemKnex();
+      const tenants = await getAllSystemTenants(sysKnex);
+      const tenantsOrgsIds = tenants.map((tenant) => tenant.organizationId);
+
+      if (cmd.tenant_id && tenantsOrgsIds.indexOf(cmd.tenant_id) === -1) {
+        exit(`The given tenant id ${cmd.tenant_id} is not exists.`);
+      }
+
+      const migrateOpers = [];
+      const migrateTenant = async (organizationId) => {
+        try {
+          const tenantKnex = await initTenantKnex(organizationId);
+          const [batchNo, _log] = await tenantKnex.migrate.rollback();
+          const tenantDb = `${config.tenant.db_name_prefix}${organizationId}`;
+
+          if (_log.length === 0) {
+            log(color.cyan('Already at the base migration'));
+          }
+          log(
+            color.green(
+              `Tenant: ${tenantDb} > Batch ${batchNo} rolled back: ${_log.length} migrations`
+            ) + (argv.verbose ? `\n${color.cyan(_log.join('\n'))}` : '')
+          );
+          log('---------------');
+        } catch (error) {
+          exit(error);
+        }
+      };
+
+      if (!cmd.tenant_id) {
+        tenants.forEach((tenant) => {
+          const oper = migrateTenant(tenant.organizationId);
+          migrateOpers.push(oper);
+        });
+      } else {
+        const oper = migrateTenant(cmd.tenant_id);
+        migrateOpers.push(oper);
+      }
+      Promise.all(migrateOpers).then(() => {
+        success('All tenants are rollbacked.');
+      });
+    } catch (error) {
+      exit(error);
+    }
+  });
+

packages/server/src/commands/index.ts

@@ -0,0 +1,4 @@
+import commander from 'commander';
+import './bigcapital';
+
+commander.parse();

packages/server/src/config/index.ts

@@ -9,7 +9,7 @@ if (envFound.error) {
   throw new Error("⚠️  Couldn't find .env file  ⚠️");
 }
 
-export default {
+module.exports = {
   /**
    * Your favorite port
    */

packages/server/src/exceptions/HttpException.ts

@@ -6,4 +6,4 @@ class HttpException extends Error {
     this.status = status;
     this.message = message;
   }
-}
+}

packages/server/src/exceptions/PaymentInputInvalid.ts

@@ -1,5 +1,3 @@
-
-
 export default class PaymentInputInvalid {
   constructor() {}
-}
+}

packages/server/src/exceptions/ServiceErrors.ts

@@ -1,6 +1,5 @@
 import ServiceError from './ServiceError';
 
-
 export default class ServiceErrors {
   errors: ServiceError[];
 
@@ -9,7 +8,8 @@ export default class ServiceErrors {
   }
 
   hasType(errorType: string) {
-    return this.errors
-      .some((error: ServiceError) => error.errorType === errorType);
+    return this.errors.some(
+      (error: ServiceError) => error.errorType === errorType
+    );
   }
-}
+}

packages/server/src/exceptions/TenantAlreadyInitialized.ts

@@ -1,7 +1,3 @@
-
-
 export default class TenantAlreadyInitialized {
-  constructor() {
-    
-  }
-}
+  constructor() {}
+}

packages/server/src/exceptions/TenantAlreadySeeded.ts

@@ -1,9 +1,3 @@
-
-
-
-
 export default class TenantAlreadySeeded {
-  constructor() {
-    
-  }
-}
+  constructor() {}
+}

packages/server/src/exceptions/TenantDatabaseNotBuilt.ts

@@ -1,7 +1,3 @@
-
-
 export default class TenantDatabaseNotBuilt {
-  constructor() {
-    
-  }
-}
+  constructor() {}
+}

packages/server/src/exceptions/VoucherCodeRequired.ts

@@ -1,4 +1,3 @@
-
 export default class VoucherCodeRequired {
   constructor() {
     this.name = 'VoucherCodeRequired';

packages/server/src/services/Accounts/CommandAccountValidators.ts

@@ -3,7 +3,7 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import { ServiceError } from '@/exceptions';
 import { IAccountDTO, IAccount, IAccountCreateDTO } from '@/interfaces';
 import AccountTypesUtils from '@/lib/AccountTypes';
-import { ERRORS } from './constants';
+import { ERRORS, MAX_ACCOUNTS_CHART_DEPTH } from './constants';
 
 @Service()
 export class CommandAccountValidators {
@@ -154,13 +154,13 @@ export class CommandAccountValidators {
    * parent account.
    * @param  {IAccountCreateDTO} accountDTO
    * @param  {IAccount} parentAccount
-   * @param  {string} baseCurrency - 
+   * @param  {string} baseCurrency -
    * @throws {ServiceError(ERRORS.ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT)}
    */
   public validateCurrentSameParentAccount = (
     accountDTO: IAccountCreateDTO,
     parentAccount: IAccount,
-    baseCurrency: string,
+    baseCurrency: string
   ) => {
     // If the account DTO currency not assigned and the parent account has no base currency.
     if (
@@ -208,4 +208,24 @@ export class CommandAccountValidators {
     }
     return account;
   }
+
+  /**
+   * Validates the max depth level of accounts chart.
+   * @param {numebr} tenantId - Tenant id.
+   * @param {number} parentAccountId - Parent account id.
+   */
+  public async validateMaxParentAccountDepthLevels(
+    tenantId: number,
+    parentAccountId: number
+  ) {
+    const { accountRepository } = this.tenancy.repositories(tenantId);
+
+    const accountsGraph = await accountRepository.getDependencyGraph();
+
+    const parentDependantsIds = accountsGraph.dependantsOf(parentAccountId);
+
+    if (parentDependantsIds.length >= MAX_ACCOUNTS_CHART_DEPTH) {
+      throw new ServiceError(ERRORS.PARENT_ACCOUNT_EXCEEDED_THE_DEPTH_LEVEL);
+    }
+  }
 }

packages/server/src/services/Accounts/CreateAccount.ts

@@ -70,6 +70,11 @@ export class CreateAccount {
         parentAccount,
         baseCurrency
       );
+      // Validates the max depth level of accounts chart.
+      await this.validator.validateMaxParentAccountDepthLevels(
+        tenantId,
+        accountDTO.parentAccountId
+      );
     }
     // Validates the given account type supports the multi-currency.
     this.validator.validateAccountTypeSupportCurrency(accountDTO, baseCurrency);

packages/server/src/services/Accounts/GetAccounts.ts

@@ -5,6 +5,7 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import DynamicListingService from '@/services/DynamicListing/DynamicListService';
 import { AccountTransformer } from './AccountTransform';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { flatToNestedArray } from '@/utils';
 
 @Service()
 export class GetAccounts {
@@ -53,11 +54,17 @@ export class GetAccounts {
       builder.modify('inactiveMode', filter.inactiveMode);
     });
     // Retrievs the formatted accounts collection.
-    const transformedAccounts = await this.transformer.transform(
+    const preTransformedAccounts = await this.transformer.transform(
       tenantId,
       accounts,
       new AccountTransformer()
     );
+    // Transform accounts to nested array.
+    const transformedAccounts = flatToNestedArray(preTransformedAccounts, {
+      id: 'id',
+      parentId: 'parentAccountId',
+    });
+
     return {
       accounts: transformedAccounts,
       filterMeta: dynamicList.getResponseMeta(),

packages/server/src/services/Accounts/constants.ts

@@ -13,8 +13,12 @@ export const ERRORS = {
   CLOSE_ACCOUNT_AND_TO_ACCOUNT_NOT_SAME_TYPE:
     'close_account_and_to_account_not_same_type',
   ACCOUNTS_NOT_FOUND: 'accounts_not_found',
-  ACCOUNT_TYPE_NOT_SUPPORTS_MULTI_CURRENCY: 'ACCOUNT_TYPE_NOT_SUPPORTS_MULTI_CURRENCY',
-  ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT: 'ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT',
+  ACCOUNT_TYPE_NOT_SUPPORTS_MULTI_CURRENCY:
+    'ACCOUNT_TYPE_NOT_SUPPORTS_MULTI_CURRENCY',
+  ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT:
+    'ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT',
+  PARENT_ACCOUNT_EXCEEDED_THE_DEPTH_LEVEL:
+    'PARENT_ACCOUNT_EXCEEDED_THE_DEPTH_LEVEL',
 };
 
 // Default views columns.
@@ -27,6 +31,8 @@ export const DEFAULT_VIEW_COLUMNS = [
   { key: 'currencyCode', label: 'Currency' },
 ];
 
+export const MAX_ACCOUNTS_CHART_DEPTH = 5;
+
 // Accounts default views.
 export const DEFAULT_VIEWS = [
   {
@@ -43,7 +49,12 @@ export const DEFAULT_VIEWS = [
     slug: 'liabilities',
     rolesLogicExpression: '1',
     roles: [
-      { fieldKey: 'root_type', index: 1, comparator: 'equals', value: 'liability' },
+      {
+        fieldKey: 'root_type',
+        index: 1,
+        comparator: 'equals',
+        value: 'liability',
+      },
     ],
     columns: DEFAULT_VIEW_COLUMNS,
   },
@@ -52,7 +63,12 @@ export const DEFAULT_VIEWS = [
     slug: 'equity',
     rolesLogicExpression: '1',
     roles: [
-      { fieldKey: 'root_type', index: 1, comparator: 'equals', value: 'equity' },
+      {
+        fieldKey: 'root_type',
+        index: 1,
+        comparator: 'equals',
+        value: 'equity',
+      },
     ],
     columns: DEFAULT_VIEW_COLUMNS,
   },
@@ -61,7 +77,12 @@ export const DEFAULT_VIEWS = [
     slug: 'income',
     rolesLogicExpression: '1',
     roles: [
-      { fieldKey: 'root_type', index: 1, comparator: 'equals', value: 'income' },
+      {
+        fieldKey: 'root_type',
+        index: 1,
+        comparator: 'equals',
+        value: 'income',
+      },
     ],
     columns: DEFAULT_VIEW_COLUMNS,
   },
@@ -70,7 +91,12 @@ export const DEFAULT_VIEWS = [
     slug: 'expenses',
     rolesLogicExpression: '1',
     roles: [
-      { fieldKey: 'root_type', index: 1, comparator: 'equals', value: 'expense' },
+      {
+        fieldKey: 'root_type',
+        index: 1,
+        comparator: 'equals',
+        value: 'expense',
+      },
     ],
     columns: DEFAULT_VIEW_COLUMNS,
   },

packages/webapp/Dockerfile

@@ -4,17 +4,20 @@ USER root
 
 WORKDIR /app
 
-COPY ./package.json /app/package.json
-COPY ./package-lock.json /app/package-lock.json
+# Install dependencies
+COPY package.json ./
+COPY lerna.json ./
+
+COPY ./packages/webapp/package.json /app/packages/webapp/package.json
 
 RUN npm install
+RUN npm run bootstrap
 
-COPY . .
-
-RUN npm run build
+# Build webapp package
+COPY ./packages/webapp /app/packages/webapp
+RUN npm run build:webapp
 
 FROM nginx
 
-COPY ./nginx/sites/default.conf /etc/nginx/conf.d/default.conf
-
-COPY --from=build /app/build /usr/share/nginx/html
+COPY ./packages/webapp/nginx/sites/default.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/packages/webapp/build /usr/share/nginx/html

packages/webapp/README.md

@@ -1,68 +1 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+# @bigcapital/webapp

packages/webapp/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@bigcapital/webpack",
+  "name": "@bigcapital/webapp",
   "version": "1.7.1",
   "lockfileVersion": 1,
   "requires": true,
@@ -1144,6 +1144,11 @@
         "@babel/plugin-transform-typescript": "^7.9.0"
       }
     },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
     "@babel/runtime": {
       "version": "7.20.13",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -3516,9 +3521,9 @@
       }
     },
     "async-each": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.5.tgz",
-      "integrity": "sha512-5QzqtU3BlagehwmdoqwaS2FBQF2P5eL6vFqXwNsb5jwoEsmtfAXg1ocFvW7I6/gGLFhBMKwcMwZuy7uv/Bo9jA=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.6.tgz",
+      "integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg=="
     },
     "async-foreach": {
       "version": "0.1.3",
@@ -4681,9 +4686,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001450",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
-      "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew=="
+      "version": "1.0.30001451",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001451.tgz",
+      "integrity": "sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w=="
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -6015,9 +6020,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "electron-to-chromium": {
-      "version": "1.4.285",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.285.tgz",
-      "integrity": "sha512-47o4PPgxfU1KMNejz+Dgaodf7YTcg48uOfV1oM6cs3adrl2+7R+dHkt3Jpxqo0LRCbGJEzTKMUt0RdvByb/leg=="
+      "version": "1.4.289",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.289.tgz",
+      "integrity": "sha512-relLdMfPBxqGCxy7Gyfm1HcbRPcFUJdlgnCPVgQ23sr1TvUrRJz0/QPoGP0+x41wOVSTN/Wi3w6YDgHiHJGOzg=="
     },
     "elliptic": {
       "version": "6.5.4",
@@ -10984,9 +10989,9 @@
       }
     },
     "node-releases": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.9.tgz",
-      "integrity": "sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA=="
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
     },
     "node-sass": {
       "version": "4.14.1",
@@ -14129,23 +14134,18 @@
       "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
     },
     "regexpu-core": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
-      "integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.0.tgz",
+      "integrity": "sha512-ZdhUQlng0RoscyW7jADnUZ25F5eVtHdMyXSb2PiwafvteRAOJUjFoUPEYZSIfP99fBIs3maLIRfpEddT78wAAQ==",
       "requires": {
+        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.1.0",
-        "regjsgen": "^0.7.1",
         "regjsparser": "^0.9.1",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       }
     },
-    "regjsgen": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz",
-      "integrity": "sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA=="
-    },
     "regjsparser": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",

packages/webapp/package.json

@@ -99,7 +99,7 @@
     "yup": "^0.28.1"
   },
   "scripts": {
-    "dev": "craco start",
+    "dev": "PORT=4000 craco start",
     "build": "craco build",
     "test": "node scripts/test.js",
     "storybook": "start-storybook -p 6006"

packages/webapp/src/components/Datatable/TableCell.tsx

@@ -72,6 +72,7 @@ export default function TableCell({ cell, row, index }) {
           [`td-${cell.column.id}`]: cell.column.id,
           [`td-${cellType}-type`]: !!cellType,
         }),
+        tabindex: 0,
         onClick: handleCellClick,
       })}
     >

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogForm.tsx

@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
-import { omit } from 'lodash';
 import { AppToaster } from '@/components';
 
 import AccountDialogFormContent from './AccountDialogFormContent';
@@ -14,7 +13,11 @@ import {
   CreateAccountFormSchema,
 } from './AccountForm.schema';
 import { compose, transformToForm } from '@/utils';
-import { transformApiErrors, transformAccountToForm } from './utils';
+import {
+  transformApiErrors,
+  transformAccountToForm,
+  transformFormToReq,
+} from './utils';
 
 import '@/style/pages/Accounts/AccountFormDialog.scss';
 import { useAccountDialogContext } from './AccountDialogProvider';
@@ -26,7 +29,7 @@ const defaultInitialValues = {
   name: '',
   code: '',
   description: '',
-  currency_code:'',
+  currency_code: '',
   subaccount: false,
 };
 
@@ -43,7 +46,6 @@ function AccountFormDialogContent({
     createAccountMutate,
     account,
 
-    accountId,
     payload,
     isNewMode,
     dialogName,
@@ -56,7 +58,7 @@ function AccountFormDialogContent({
 
   // Callbacks handles form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = omit(values, ['subaccount']);
+    const form = transformFormToReq(values);
     const toastAccountName = values.code
       ? `${values.code} - ${values.name}`
       : values.name;
@@ -90,8 +92,8 @@ function AccountFormDialogContent({
       setErrors({ ...errorsTransformed });
       setSubmitting(false);
     };
-    if (accountId) {
-      editAccountMutate([accountId, form])
+    if (payload.accountId) {
+      editAccountMutate([payload.accountId, form])
         .then(handleSuccess)
         .catch(handleError);
     } else {
@@ -113,7 +115,6 @@ function AccountFormDialogContent({
       defaultInitialValues,
     ),
   };
-
   // Handles dialog close.
   const handleClose = useCallback(() => {
     closeDialog(dialogName);

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx

@@ -26,6 +26,7 @@ import { inputIntent, compose } from '@/utils';
 import { useAutofocus } from '@/hooks';
 import { FOREIGN_CURRENCY_ACCOUNTS } from '@/constants/accountTypes';
 import { useAccountDialogContext } from './AccountDialogProvider';
+import { parentAccountShouldUpdate } from './utils';
 
 /**
  * Account form dialogs fields.
@@ -115,12 +116,7 @@ function AccountFormDialogFields({
             >
               <Checkbox
                 inline={true}
-                label={
-                  <>
-                    <T id={'sub_account'} />
-                    <Hint />
-                  </>
-                }
+                label={<T id={'sub_account'} />}
                 name={'subaccount'}
                 {...field}
               />
@@ -128,37 +124,36 @@ function AccountFormDialogFields({
           )}
         </Field>
 
-        <If condition={values.subaccount}>
-          <FastField name={'parent_account_id'}>
-            {({
-              form: { values, setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'parent_account'} />}
-                className={classNames(
-                  'form-group--parent-account',
-                  Classes.FILL,
-                )}
-                inline={true}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="parent_account_id" />}
-              >
-                <AccountsSelectList
-                  accounts={accounts}
-                  onAccountSelected={(account) => {
-                    setFieldValue('parent_account_id', account.id);
-                  }}
-                  defaultSelectText={<T id={'select_parent_account'} />}
-                  selectedAccountId={value}
-                  popoverFill={true}
-                  filterByTypes={values.account_type}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </If>
+        <FastField
+          name={'parent_account_id'}
+          shouldUpdate={parentAccountShouldUpdate}
+        >
+          {({
+            form: { values, setFieldValue },
+            field: { value },
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'parent_account'} />}
+              className={classNames('form-group--parent-account', Classes.FILL)}
+              inline={true}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="parent_account_id" />}
+            >
+              <AccountsSelectList
+                accounts={accounts}
+                onAccountSelected={(account) => {
+                  setFieldValue('parent_account_id', account.id);
+                }}
+                defaultSelectText={<T id={'select_parent_account'} />}
+                selectedAccountId={value}
+                popoverFill={true}
+                filterByTypes={values.account_type}
+                disabled={!values.subaccount}
+              />
+            </FormGroup>
+          )}
+        </FastField>
 
         <If condition={FOREIGN_CURRENCY_ACCOUNTS.includes(values.account_type)}>
           {/*------------ Currency  -----------*/}

packages/webapp/src/containers/Dialogs/AccountDialog/utils.tsx

@@ -2,6 +2,7 @@
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
 import { isUndefined } from 'lodash';
+import { defaultFastFieldShouldUpdate } from '@/utils';
 
 export const AccountDialogAction = {
   Edit: 'edit',
@@ -33,7 +34,7 @@ export const transformApiErrors = (errors) => {
 /**
  * Payload transformer in account edit mode.
  */
-function tranformNewChildAccountPayload(payload) {
+function tranformNewChildAccountPayload(account, payload) {
   return {
     parent_account_id: payload.parentAccountId || '',
     account_type: payload.accountType || '',
@@ -44,7 +45,7 @@ function tranformNewChildAccountPayload(payload) {
 /**
  * Payload transformer in new account with defined type.
  */
-function transformNewDefinedTypePayload(payload) {
+function transformNewDefinedTypePayload(account, payload) {
   return {
     account_type: payload.accountType || '',
   };
@@ -63,7 +64,9 @@ const mergeWithAccount = R.curry((transformed, account) => {
 /**
  * Default account payload transformer.
  */
-const defaultPayloadTransform = () => ({});
+const defaultPayloadTransform = (account, payload) => ({
+  subaccount: !!account.parent_account_id,
+});
 
 /**
  * Defined payload transformers.
@@ -89,7 +92,7 @@ export const transformAccountToForm = (account, payload) => {
 
     return [
       condition[0] === payload.action ? R.T : R.F,
-      mergeWithAccount(transformer(payload)),
+      mergeWithAccount(transformer(account, payload)),
     ];
   });
   return R.cond(results)(account);
@@ -106,3 +109,29 @@ export const getDisabledFormFields = (account, payload) => {
       payload.action === AccountDialogAction.NewDefinedType,
   };
 };
+
+/**
+ * Detarmines whether should update the parent account field.
+ * @param newProps
+ * @param oldProps
+ * @returns {boolean}
+ */
+export const parentAccountShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.formik.values.subaccount !== oldProps.formik.values.subaccount ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Transformes the form values to the request.
+ */
+export const transformFormToReq = (form) => {
+  return R.compose(
+    R.omit(['subaccount']),
+    R.when(
+      R.propSatisfies(R.equals(R.__, false), 'subaccount'),
+      R.assoc(['parent_account_id'], ''),
+    ),
+  )(form);
+};

packages/webapp/src/containers/Items/components.tsx

@@ -105,7 +105,7 @@ export function ItemsActionMenuList({
       </Can>
       <Can I={ItemAction.Create} a={AbilitySubject.Item}>
         <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          icon={<Icon icon="content-copy" iconSize={16} />}
           text={intl.get('duplicate')}
           onClick={safeCallback(onDuplicate, original)}
         />

packages/webapp/src/static/json/icons.tsx

@@ -559,4 +559,10 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+  'content-copy': {
+    path: [
+      'M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z'
+    ],
+    viewBox: '0 0 16 16'
+  }
 };

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -10,7 +10,7 @@
     display: block;
 
     .thead .thead-inner,
-    .tbody .tbody-inner{
+    .tbody .tbody-inner {
       min-width: fit-content;
     }
 
@@ -25,7 +25,7 @@
         font-weight: 400;
         border-bottom: 1px solid #d2dde2;
 
-        >div {
+        > div {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -208,6 +208,10 @@
             width: 100%;
           }
         }
+        &:focus {
+          outline: 1px solid rgba(0, 82, 204, 0.7);
+          outline-offset: -1px;
+        }
       }
 
       .tr:hover .td {
@@ -357,13 +361,9 @@
       position: sticky;
     }
 
-    [data-sticky-last-left-td] {
+    [data-sticky-last-left-td] {}
 
-    }
-
-    [data-sticky-first-right-td] {
-
-    }
+    [data-sticky-first-right-td] {}
   }
 
   &.has-virtualized-rows {

vercel.json

@@ -0,0 +1,9 @@
+{
+  "buildCommand": "npm run build:webapp",
+  "devCommand": "npm run dev:webapp",
+  "installCommand": "npm install && npm run bootstrap",
+  "outputDirectory": "packages/webapp/build",
+  "env": {
+    "CI": "false"
+  }
+}