fix: Getting the sheet columns in import sheet

fix: Typo one-click demo page

packages/server/src/interfaces/Import.ts

@@ -3,6 +3,6 @@ import { ImportFilePreviewPOJO } from "@/services/Import/interfaces";
 
 export interface IImportFileCommitedEventPayload {
   tenantId: number;
-  importId: number;
+  importId: string;
   meta: ImportFilePreviewPOJO;
 }

packages/server/src/lib/Transformer/Transformer.ts

@@ -2,6 +2,7 @@ import moment from 'moment';
 import * as R from 'ramda';
 import { includes, isFunction, isObject, isUndefined, omit } from 'lodash';
 import { formatNumber, sortObjectKeysAlphabetically } from 'utils';
+import { EXPORT_DTE_FORMAT } from '@/services/Export/constants';
 
 export class Transformer {
   public context: any;
@@ -156,22 +157,34 @@ export class Transformer {
   }
 
   /**
-   *
+   * Format date.
-   * @param date
+   * @param {} date
-   * @returns
+   * @param {string} format -
+   * @returns {}
    */
-  protected formatDate(date) {
+  protected formatDate(date, format?: string) {
-    return date ? moment(date).format(this.dateFormat) : '';
+    // Use the export date format if the async operation is in exporting,
+    // otherwise use the given or default format.
+    const _format = this.context.exportAls.isExport
+      ? EXPORT_DTE_FORMAT
+      : format || this.dateFormat;
+
+    return date ? moment(date).format(_format) : '';
   }
 
-  protected formatDateFromNow(date){
+  /**
+   *
+   * @param date
+   * @returns {}
+   */
+  protected formatDateFromNow(date) {
     return date ? moment(date).fromNow(true) : '';
   }
 
   /**
    *
    * @param number
-   * @returns
+   * @returns {}
    */
   protected formatNumber(number, props?) {
     return formatNumber(number, { money: false, ...props });
@@ -181,7 +194,7 @@ export class Transformer {
    *
    * @param money
    * @param options
-   * @returns
+   * @returns {}
    */
   protected formatMoney(money, options?) {
     return formatNumber(money, {

packages/server/src/lib/Transformer/TransformerInjectable.ts

@@ -3,12 +3,17 @@ import { isNull } from 'lodash';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { TenantMetadata } from '@/system/models';
 import { Transformer } from './Transformer';
+import { ImportAls } from '@/services/Import/ImportALS';
+import { ExportAls } from '@/services/Export/ExportAls';
 
 @Service()
 export class TransformerInjectable {
   @Inject()
   private tenancy: HasTenancyService;
 
+  @Inject()
+  private exportAls: ExportAls;
+
   /**
    * Retrieves the application context of all tenant transformers.
    * @param   {number} tenantId
@@ -17,10 +22,12 @@ export class TransformerInjectable {
   async getApplicationContext(tenantId: number) {
     const i18n = this.tenancy.i18n(tenantId);
     const organization = await TenantMetadata.query().findOne({ tenantId });
+    const exportAls = this.exportAls;
 
     return {
       organization,
       i18n,
+      exportAls,
     };
   }
 

packages/server/src/models/Customer.Settings.ts

@@ -95,6 +95,11 @@ export default {
     },
   },
   columns: {
+    customerType: {
+      name: 'Customer Type',
+      type: 'text',
+      accessor: 'formattedCustomerType',
+    },
     firstName: {
       name: 'vendor.field.first_name',
       type: 'text',
@@ -135,116 +140,117 @@ export default {
     openingBalance: {
       name: 'vendor.field.opening_balance',
       type: 'number',
-      printable: false
+      printable: false,
     },
     openingBalanceAt: {
       name: 'vendor.field.opening_balance_at',
       type: 'date',
-      printable: false
+      printable: false,
+      accessor: 'formattedOpeningBalanceAt'
     },
     currencyCode: {
       name: 'vendor.field.currency',
       type: 'text',
-      printable: false
+      printable: false,
     },
     status: {
       name: 'vendor.field.status',
-      printable: false
+      printable: false,
     },
     note: {
       name: 'vendor.field.note',
-      printable: false
+      printable: false,
     },
     // Billing Address
     billingAddress1: {
       name: 'Billing Address 1',
       column: 'billing_address1',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddress2: {
       name: 'Billing Address 2',
       column: 'billing_address2',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddressCity: {
       name: 'Billing Address City',
       column: 'billing_address_city',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddressCountry: {
       name: 'Billing Address Country',
       column: 'billing_address_country',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddressPostcode: {
       name: 'Billing Address Postcode',
       column: 'billing_address_postcode',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddressState: {
       name: 'Billing Address State',
       column: 'billing_address_state',
       type: 'text',
-      printable: false
+      printable: false,
     },
     billingAddressPhone: {
       name: 'Billing Address Phone',
       column: 'billing_address_phone',
       type: 'text',
-      printable: false
+      printable: false,
     },
     // Shipping Address
     shippingAddress1: {
       name: 'Shipping Address 1',
       column: 'shipping_address1',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddress2: {
       name: 'Shipping Address 2',
       column: 'shipping_address2',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddressCity: {
       name: 'Shipping Address City',
       column: 'shipping_address_city',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddressCountry: {
       name: 'Shipping Address Country',
       column: 'shipping_address_country',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddressPostcode: {
       name: 'Shipping Address Postcode',
       column: 'shipping_address_postcode',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddressPhone: {
       name: 'Shipping Address Phone',
       column: 'shipping_address_phone',
       type: 'text',
-      printable: false
+      printable: false,
     },
     shippingAddressState: {
       name: 'Shipping Address State',
       column: 'shipping_address_state',
       type: 'text',
-      printable: false
+      printable: false,
     },
     createdAt: {
       name: 'vendor.field.created_at',
       type: 'date',
-      printable: false
+      printable: false,
     },
   },
   fields2: {

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

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { AccountsApplication } from './AccountsApplication';
 import { Exportable } from '../Export/Exportable';
 import { IAccountsFilter, IAccountsStructureType } from '@/interfaces';
+import { EXPORT_SIZE_LIMIT } from '../Export/constants';
 
 @Service()
 export class AccountsExportable extends Exportable {
@@ -20,7 +21,7 @@ export class AccountsExportable extends Exportable {
       inactiveMode: false,
       ...query,
       structure: IAccountsStructureType.Flat,
-      pageSize: 12000,
+      pageSize: EXPORT_SIZE_LIMIT,
       page: 1,
     } as IAccountsFilter;
 

packages/server/src/services/Banking/RegonizeTranasctions/events/TriggerRecognizedTransactions.ts

@@ -100,7 +100,6 @@ export class TriggerRecognizedTransactions {
   private async triggerRecognizeTransactionsOnImportCommitted({
     tenantId,
     importId,
-    meta,
   }: IImportFileCommitedEventPayload) {
     const importFile = await Import.query().findOne({ importId });
     const batch = importFile.paramsParsed.batch;

packages/server/src/services/Contacts/Customers/CustomersExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IItemsFilter } from '@/interfaces';
 import { CustomersApplication } from './CustomersApplication';
 import { Exportable } from '@/services/Export/Exportable';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class CustomersExportable extends Exportable {
@@ -17,9 +18,9 @@ export class CustomersExportable extends Exportable {
     const parsedQuery = {
       sortOrder: 'DESC',
       columnSortBy: 'created_at',
-      page: 1,
       ...query,
-      pageSize: 12,
+      page: 1,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IItemsFilter;
 
     return this.customersApplication

packages/server/src/services/Contacts/Vendors/VendorsExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IItemsFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { VendorsApplication } from './VendorsApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class VendorsExportable extends Exportable {
@@ -17,9 +18,9 @@ export class VendorsExportable extends Exportable {
     const parsedQuery = {
       sortOrder: 'DESC',
       columnSortBy: 'created_at',
-      page: 1,
       ...query,
-      pageSize: 12,
+      page: 1,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IItemsFilter;
 
     return this.vendorsApplication

packages/server/src/services/Expenses/ExpensesExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { Exportable } from '../Export/Exportable';
 import { IExpensesFilter } from '@/interfaces';
 import { ExpensesApplication } from './ExpensesApplication';
+import { EXPORT_SIZE_LIMIT } from '../Export/constants';
 
 @Service()
 export class ExpensesExportable extends Exportable {
@@ -19,7 +20,7 @@ export class ExpensesExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 12000,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IExpensesFilter;
 
     return this.expensesApplication

packages/server/src/services/Export/ExportAls.ts

@@ -0,0 +1,48 @@
+import { Service } from 'typedi';
+import { AsyncLocalStorage } from 'async_hooks';
+
+@Service()
+export class ExportAls {
+  private als: AsyncLocalStorage<Map<string, any>>;
+
+  constructor() {
+    this.als = new AsyncLocalStorage();
+  }
+
+  /**
+   * Runs a callback function within the context of a new AsyncLocalStorage store.
+   * @param callback The function to be executed within the AsyncLocalStorage context.
+   * @returns The result of the callback function.
+   */
+  public run<T>(callback: () => T): T {
+    return this.als.run<T>(new Map(), () => {
+      this.markAsExport();
+
+      return callback();
+    });
+  }
+
+  /**
+   * Retrieves the current AsyncLocalStorage store.
+   * @returns The current store or undefined if not in a valid context.
+   */
+  public getStore(): Map<string, any> | undefined {
+    return this.als.getStore();
+  }
+
+  /**
+   * Marks the current context as an export operation.
+   * @param flag Boolean flag to set or unset the export status. Defaults to true.
+   */
+  public markAsExport(flag: boolean = true): void {
+    const store = this.getStore();
+    store?.set('isExport', flag);
+  }
+  /**
+   * Checks if the current context is an export operation.
+   * @returns {boolean} True if the context is an export operation, false otherwise.
+   */
+  public get isExport(): boolean {
+    return !!this.getStore()?.get('isExport');
+  }
+}

packages/server/src/services/Export/ExportService.ts

@@ -10,6 +10,7 @@ import { Errors, ExportFormat } from './common';
 import { IModelMeta, IModelMetaColumn } from '@/interfaces';
 import { flatDataCollections, getDataAccessor } from './utils';
 import { ExportPdf } from './ExportPdf';
+import { ExportAls } from './ExportAls';
 
 @Service()
 export class ExportResourceService {
@@ -22,13 +23,33 @@ export class ExportResourceService {
   @Inject()
   private exportPdf: ExportPdf;
 
+  @Inject()
+  private exportAls: ExportAls;
+
+  /**
+   *
+   * @param {number} tenantId
+   * @param {string} resourceName
+   * @param {ExportFormat} format
+   * @returns
+   */
+  public async export(
+    tenantId: number,
+    resourceName: string,
+    format: ExportFormat = ExportFormat.Csv
+  ) {
+    return this.exportAls.run(() =>
+      this.exportAlsRun(tenantId, resourceName, format)
+    );
+  }
+
   /**
    * Exports the given resource data through csv, xlsx or pdf.
    * @param {number} tenantId - Tenant id.
    * @param {string} resourceName - Resource name.
    * @param {ExportFormat} format - File format.
    */
-  public async export(
+  public async exportAlsRun(
     tenantId: number,
     resourceName: string,
     format: ExportFormat = ExportFormat.Csv

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

@@ -0,0 +1,2 @@
+export const EXPORT_SIZE_LIMIT = 9999999;
+export const EXPORT_DTE_FORMAT = 'YYYY-MM-DD';

packages/server/src/services/Import/ImportALS.ts

@@ -0,0 +1,105 @@
+import { Service } from 'typedi';
+import { AsyncLocalStorage } from 'async_hooks';
+
+@Service()
+export class ImportAls {
+  private als: AsyncLocalStorage<Map<string, any>>;
+
+  constructor() {
+    this.als = new AsyncLocalStorage();
+  }
+
+  /**
+   * Runs a callback function within the context of a new AsyncLocalStorage store.
+   * @param callback The function to be executed within the AsyncLocalStorage context.
+   * @returns The result of the callback function.
+   */
+  public run<T>(callback: () => T): T {
+    return this.als.run<T>(new Map(), callback);
+  }
+
+  /**
+   * Runs a callback function in preview mode within the AsyncLocalStorage context.
+   * @param callback The function to be executed in preview mode.
+   * @returns The result of the callback function.
+   */
+  public runPreview<T>(callback: () => T): T {
+    return this.run(() => {
+      this.markAsImport();
+      this.markAsImportPreview();
+      return callback();
+    });
+  }
+
+  /**
+   * Runs a callback function in commit mode within the AsyncLocalStorage context.
+   * @param {() => T} callback - The function to be executed in commit mode.
+   * @returns {T} The result of the callback function.
+   */
+  public runCommit<T>(callback: () => T): T {
+    return this.run(() => {
+      this.markAsImport();
+      this.markAsImportCommit();
+      return callback();
+    });
+  }
+
+  /**
+   * Retrieves the current AsyncLocalStorage store.
+   * @returns The current store or undefined if not in a valid context.
+   */
+  public getStore(): Map<string, any> | undefined {
+    return this.als.getStore();
+  }
+
+  /**
+   * Marks the current context as an import operation.
+   * @param flag Boolean flag to set or unset the import status. Defaults to true.
+   */
+  public markAsImport(flag: boolean = true): void {
+    const store = this.getStore();
+    store?.set('isImport', flag);
+  }
+
+  /**
+   * Marks the current context as an import commit operation.
+   * @param flag Boolean flag to set or unset the import commit status. Defaults to true.
+   */
+  public markAsImportCommit(flag: boolean = true): void {
+    const store = this.getStore();
+    store?.set('isImportCommit', flag);
+  }
+
+  /**
+   * Marks the current context as an import preview operation.
+   * @param {boolean} flag - Boolean flag to set or unset the import preview status. Defaults to true.
+   */
+  public markAsImportPreview(flag: boolean = true): void {
+    const store = this.getStore();
+    store?.set('isImportPreview', flag);
+  }
+
+  /**
+   * Checks if the current context is an import operation.
+   * @returns {boolean} True if the context is an import operation, false otherwise.
+   */
+  public get isImport(): boolean {
+    return !!this.getStore()?.get('isImport');
+  }
+
+  /**
+   * Checks if the current context is an import commit operation.
+   * @returns {boolean} True if the context is an import commit operation, false otherwise.
+   */
+  public get isImportCommit(): boolean {
+    return !!this.getStore()?.get('isImportCommit');
+  }
+
+  /**
+   * Checks if the current context is an import preview operation.
+   * @returns {boolean} True if the context is an import preview operation, false otherwise.
+   */
+  public get isImportPreview(): boolean {
+    return !!this.getStore()?.get('isImportPreview');
+  }
+}

packages/server/src/services/Import/ImportFileCommon.ts

@@ -1,4 +1,3 @@
-import XLSX from 'xlsx';
 import bluebird from 'bluebird';
 import * as R from 'ramda';
 import { Inject, Service } from 'typedi';
@@ -27,23 +26,7 @@ export class ImportFileCommon {
 
   @Inject()
   private resource: ResourceService;
-
+  
-  /**
-   * Maps the columns of the imported data based on the provided mapping attributes.
-   * @param {Record<string, any>[]} body - The array of data objects to map.
-   * @param {ImportMappingAttr[]} map - The mapping attributes.
-   * @returns {Record<string, any>[]} - The mapped data objects.
-   */
-  public parseXlsxSheet(buffer: Buffer): Record<string, unknown>[] {
-    const workbook = XLSX.read(buffer, { type: 'buffer', raw: true });
-
-    const firstSheetName = workbook.SheetNames[0];
-    const worksheet = workbook.Sheets[firstSheetName];
-
-    return XLSX.utils.sheet_to_json(worksheet, {});
-  }
-
-
   /**
    * Imports the given parsed data to the resource storage through registered importable service.
    * @param {number} tenantId -

packages/server/src/services/Import/ImportFilePreview.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import HasTenancyService from '../Tenancy/TenancyService';
 import { ImportFilePreviewPOJO } from './interfaces';
 import { ImportFileProcess } from './ImportFileProcess';
+import { ImportAls } from './ImportALS';
 
 @Service()
 export class ImportFilePreview {
@@ -11,13 +12,31 @@ export class ImportFilePreview {
   @Inject()
   private importFile: ImportFileProcess;
 
+  @Inject()
+  private importAls: ImportAls;
+
+  /**
+   * Preview the imported file results before commiting the transactions.
+   * @param {number} tenantId - 
+   * @param {string} importId - 
+   * @returns {Promise<ImportFilePreviewPOJO>}
+   */
+  public async preview(
+    tenantId: number,
+    importId: string
+  ): Promise<ImportFilePreviewPOJO> {
+    return this.importAls.runPreview<Promise<ImportFilePreviewPOJO>>(() =>
+      this.previewAlsRun(tenantId, importId)
+    );
+  }
+
   /**
    * Preview the imported file results before commiting the transactions.
    * @param {number} tenantId
    * @param {number} importId
    * @returns {Promise<ImportFilePreviewPOJO>}
    */
-  public async preview(
+  public async previewAlsRun(
     tenantId: number,
     importId: string
   ): Promise<ImportFilePreviewPOJO> {

packages/server/src/services/Import/ImportFileProcess.ts

@@ -2,18 +2,14 @@ import { Inject, Service } from 'typedi';
 import { chain } from 'lodash';
 import { Knex } from 'knex';
 import { ServiceError } from '@/exceptions';
-import {
+import { ERRORS, getUnmappedSheetColumns, readImportFile } from './_utils';
-  ERRORS,
-  getSheetColumns,
-  getUnmappedSheetColumns,
-  readImportFile,
-} from './_utils';
 import { ImportFileCommon } from './ImportFileCommon';
 import { ImportFileDataTransformer } from './ImportFileDataTransformer';
 import ResourceService from '../Resource/ResourceService';
 import UnitOfWork from '../UnitOfWork';
 import { ImportFilePreviewPOJO } from './interfaces';
 import { Import } from '@/system/models';
+import { parseSheetData } from './sheet_utils';
 
 @Service()
 export class ImportFileProcess {
@@ -49,10 +45,10 @@ export class ImportFileProcess {
     if (!importFile.isMapped) {
       throw new ServiceError(ERRORS.IMPORT_FILE_NOT_MAPPED);
     }
-    // Read the imported file.
+    // Read the imported file and parse the given buffer to get columns
+    // and sheet data in json format.
     const buffer = await readImportFile(importFile.filename);
-    const sheetData = this.importCommon.parseXlsxSheet(buffer);
+    const [sheetData, sheetColumns] = parseSheetData(buffer);
-    const header = getSheetColumns(sheetData);
 
     const resource = importFile.resource;
     const resourceFields = this.resource.getResourceFields2(tenantId, resource);
@@ -87,7 +83,7 @@ export class ImportFileProcess {
       .flatten()
       .value();
 
-    const unmappedColumns = getUnmappedSheetColumns(header, mapping);
+    const unmappedColumns = getUnmappedSheetColumns(sheetColumns, mapping);
     const totalCount = allData.length;
 
     const createdCount = successedImport.length;

packages/server/src/services/Import/ImportFileProcessCommit.ts

@@ -5,6 +5,7 @@ import { ImportFileProcess } from './ImportFileProcess';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
 import { IImportFileCommitedEventPayload } from '@/interfaces/Import';
+import { ImportAls } from './ImportALS';
 
 @Service()
 export class ImportFileProcessCommit {
@@ -14,16 +15,34 @@ export class ImportFileProcessCommit {
   @Inject()
   private importFile: ImportFileProcess;
 
+  @Inject()
+  private importAls: ImportAls;
+
   @Inject()
   private eventPublisher: EventPublisher;
 
+  /**
+   * Commits the imported file under ALS.
+   * @param {number} tenantId
+   * @param {string} importId
+   * @returns {Promise<ImportFilePreviewPOJO>}
+   */
+  public commit(
+    tenantId: number,
+    importId: string
+  ): Promise<ImportFilePreviewPOJO> {
+    return this.importAls.runCommit<Promise<ImportFilePreviewPOJO>>(() =>
+      this.commitAlsRun(tenantId, importId)
+    );
+  }
+
   /**
    * Commits the imported file.
    * @param {number} tenantId
    * @param {number} importId
    * @returns {Promise<ImportFilePreviewPOJO>}
    */
-  public async commit(
+  public async commitAlsRun(
     tenantId: number,
     importId: string
   ): Promise<ImportFilePreviewPOJO> {

packages/server/src/services/Import/ImportFileUpload.ts

@@ -11,6 +11,7 @@ import { ImportFileCommon } from './ImportFileCommon';
 import { ImportFileDataValidator } from './ImportFileDataValidator';
 import { ImportFileUploadPOJO } from './interfaces';
 import { Import } from '@/system/models';
+import { parseSheetData } from './sheet_utils';
 
 @Service()
 export class ImportFileUploadService {
@@ -77,14 +78,12 @@ export class ImportFileUploadService {
     const buffer = await readImportFile(filename);
 
     // Parse the buffer file to array data.
-    const sheetData = this.importFileCommon.parseXlsxSheet(buffer);
+    const [sheetData, sheetColumns] = parseSheetData(buffer);
+    const coumnsStringified = JSON.stringify(sheetColumns);
 
     // Throws service error if the sheet data is empty.
     validateSheetEmpty(sheetData);
 
-    const sheetColumns = this.importFileCommon.parseSheetColumns(sheetData);
-    const coumnsStringified = JSON.stringify(sheetColumns);
-
     try {
       // Validates the params Yup schema.
       await this.importFileCommon.validateParamsSchema(resource, params);

packages/server/src/services/Import/sheet_utils.ts

@@ -0,0 +1,56 @@
+import XLSX from 'xlsx';
+import { first } from 'lodash';
+
+/**
+ * Parses the given sheet buffer to worksheet.
+ * @param {Buffer} buffer
+ * @returns {XLSX.WorkSheet}
+ */
+export function parseFirstSheet(buffer: Buffer): XLSX.WorkSheet {
+  const workbook = XLSX.read(buffer, { type: 'buffer', raw: true });
+
+  const firstSheetName = workbook.SheetNames[0];
+  const worksheet = workbook.Sheets[firstSheetName];
+
+  return worksheet;
+}
+
+/**
+ * Extracts the given worksheet to columns.
+ * @param {XLSX.WorkSheet} worksheet
+ * @returns {Array<string>}
+ */
+export function extractSheetColumns(worksheet: XLSX.WorkSheet): Array<string> {
+  // By default, sheet_to_json scans the first row and uses the values as headers.
+  // With the header: 1 option, the function exports an array of arrays of values.
+  const sheetCells = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+  const sheetCols = first(sheetCells) as Array<string>;
+
+  return sheetCols.filter((col) => col);
+}
+
+/**
+ * Parses the given worksheet to json values. the keys are columns labels.
+ * @param {XLSX.WorkSheet} worksheet
+ * @returns {Array<Record<string, string>>}
+ */
+export function parseSheetToJson(
+  worksheet: XLSX.WorkSheet
+): Array<Record<string, string>> {
+  return XLSX.utils.sheet_to_json(worksheet, {});
+}
+
+/**
+ * Parses the given sheet buffer then retrieves the sheet data and columns.
+ * @param {Buffer} buffer
+ */
+export function parseSheetData(
+  buffer: Buffer
+): [Array<Record<string, string>>, string[]] {
+  const worksheet = parseFirstSheet(buffer);
+
+  const columns = extractSheetColumns(worksheet);
+  const data = parseSheetToJson(worksheet);
+
+  return [data, columns];
+}

packages/server/src/services/Inventory/Inventory.ts

@@ -157,7 +157,6 @@ export default class InventoryService {
       ...commonJobsQuery,
       'data.startingDate': { $gte: startingDate },
     });
-
     // If the depends jobs cleared.
     if (dependsJobs.length === 0) {
       await agenda.schedule(
@@ -174,6 +173,13 @@ export default class InventoryService {
         events.inventory.onComputeItemCostJobScheduled,
         { startingDate, itemId, tenantId } as IInventoryItemCostScheduledPayload
       );
+    } else {
+      // Re-schedule the jobs that have higher date from current moment.
+      await Promise.all(
+        dependsJobs.map((job) =>
+          job.schedule(config.scheduleComputeItemCost).save()
+        )
+      );
     }
   }
 

packages/server/src/services/Items/ItemsExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { Exportable } from '../Export/Exportable';
 import { IItemsFilter } from '@/interfaces';
 import { ItemsApplication } from './ItemsApplication';
+import { EXPORT_SIZE_LIMIT } from '../Export/constants';
 
 @Service()
 export class ItemsExportable extends Exportable {
@@ -19,7 +20,7 @@ export class ItemsExportable extends Exportable {
       columnSortBy: 'created_at',
       page: 1,
       ...query,
-      pageSize: 12,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IItemsFilter;
 
     return this.itemsApplication

packages/server/src/services/ManualJournals/ManualJournalExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IManualJournalsFilter } from '@/interfaces';
 import { Exportable } from '../Export/Exportable';
 import { ManualJournalsApplication } from './ManualJournalsApplication';
+import { EXPORT_SIZE_LIMIT } from '../Export/constants';
 
 @Service()
 export class ManualJournalsExportable extends Exportable {
@@ -19,7 +20,7 @@ export class ManualJournalsExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 12000,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IManualJournalsFilter;
 
     return this.manualJournalsApplication

packages/server/src/services/Purchases/BillPayments/BillPaymentExportable.ts

@@ -1,6 +1,7 @@
 import { Inject, Service } from 'typedi';
 import { Exportable } from '@/services/Export/Exportable';
 import { BillPaymentsApplication } from './BillPaymentsApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class BillPaymentExportable extends Exportable {
@@ -14,11 +15,11 @@ export class BillPaymentExportable extends Exportable {
    */
   public exportable(tenantId: number, query: any) {
     const parsedQuery = {
-      page: 1,
-      pageSize: 12,
-      ...query,
       sortOrder: 'desc',
       columnSortBy: 'created_at',
+      ...query,
+      page: 1,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as any;
 
     return this.billPaymentsApplication

packages/server/src/services/Purchases/Bills/BillsExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IBillsFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { BillsApplication } from './BillsApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class BillsExportable extends Exportable {
@@ -19,7 +20,7 @@ export class BillsExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 12000,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IBillsFilter;
 
     return this.billsApplication

packages/server/src/services/Sales/Estimates/SaleEstimatesExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ISalesInvoicesFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { SaleEstimatesApplication } from './SaleEstimatesApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class SaleEstimatesExportable extends Exportable {
@@ -19,7 +20,7 @@ export class SaleEstimatesExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 12000,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as ISalesInvoicesFilter;
 
     return this.saleEstimatesApplication

packages/server/src/services/Sales/Invoices/SaleInvoicesExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ISalesInvoicesFilter } from '@/interfaces';
 import { SaleInvoiceApplication } from './SaleInvoicesApplication';
 import { Exportable } from '@/services/Export/Exportable';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class SaleInvoicesExportable extends Exportable {
@@ -19,7 +20,7 @@ export class SaleInvoicesExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 120000,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as ISalesInvoicesFilter;
 
     return this.saleInvoicesApplication

packages/server/src/services/Sales/PaymentReceived/PaymentsReceivedExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IAccountsStructureType, IPaymentsReceivedFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { PaymentReceivesApplication } from './PaymentReceivedApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class PaymentsReceivedExportable extends Exportable {
@@ -21,6 +22,8 @@ export class PaymentsReceivedExportable extends Exportable {
       inactiveMode: false,
       ...query,
       structure: IAccountsStructureType.Flat,
+      page: 1,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as IPaymentsReceivedFilter;
 
     return this.paymentReceivedApp

packages/server/src/services/Sales/Receipts/SaleReceiptsExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ISalesReceiptsFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { SaleReceiptApplication } from './SaleReceiptApplication';
+import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
 
 @Service()
 export class SaleReceiptsExportable extends Exportable {
@@ -19,7 +20,7 @@ export class SaleReceiptsExportable extends Exportable {
       columnSortBy: 'created_at',
       ...query,
       page: 1,
-      pageSize: 12,
+      pageSize: EXPORT_SIZE_LIMIT,
     } as ISalesReceiptsFilter;
 
     return this.saleReceiptsApp

packages/server/src/subscribers/Inventory/Inventory.ts

@@ -10,6 +10,7 @@ import {
 } from '@/interfaces';
 import { runAfterTransaction } from '@/services/UnitOfWork/TransactionsHooks';
 import { SaleInvoicesCost } from '@/services/Sales/Invoices/SalesInvoicesCost';
+import { ImportAls } from '@/services/Import/ImportALS';
 
 @Service()
 export default class InventorySubscriber {
@@ -25,6 +26,9 @@ export default class InventorySubscriber {
   @Inject('agenda')
   private agenda: any;
 
+  @Inject()
+  private importAls: ImportAls;
+
   /**
    * Attaches events with handlers.
    */
@@ -88,7 +92,10 @@ export default class InventorySubscriber {
     inventoryTransactions,
     trx,
   }: IInventoryTransactionsCreatedPayload) => {
-    const inventoryItemsIds = map(inventoryTransactions, 'itemId');
+    const inImportPreviewScope = this.importAls.isImportPreview;
+
+    // Avoid running the cost items job if the async process is in import preview.
+    if (inImportPreviewScope) return;
 
     await this.saleInvoicesCost.computeItemsCostByInventoryTransactions(
       tenantId,

packages/server/src/subscribers/SaleInvoices/WriteJournalEntries.ts

@@ -6,7 +6,6 @@ import {
   ISaleInvoiceEditedPayload,
 } from '@/interfaces';
 import { SaleInvoiceGLEntries } from '@/services/Sales/Invoices/InvoiceGLEntries';
-import { runAfterTransaction } from '@/services/UnitOfWork/TransactionsHooks';
 
 @Service()
 export default class SaleInvoiceWriteGLEntriesSubscriber {

packages/webapp/src/components/App.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { lazy, Suspense } from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';
@@ -11,25 +12,26 @@ import 'moment/locale/es-us';
 import AppIntlLoader from './AppIntlLoader';
 import { EnsureAuthenticated } from '@/components/Guards/EnsureAuthenticated';
 import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
-import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
-import { Authentication } from '@/containers/Authentication/Authentication';
 
-import LazyLoader from '@/components/LazyLoader';
 import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';
-import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
-import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
 import { EnsureUserEmailNotVerified } from './Guards/EnsureUserEmailNotVerified';
 
-const EmailConfirmation = LazyLoader({
+const DashboardPrivatePages = lazy(
-  loader: () => import('@/containers/Authentication/EmailConfirmation'),
+  () => import('@/components/Dashboard/PrivatePages'),
-});
+);
-const RegisterVerify = LazyLoader({
+const AuthenticationPage = lazy(
-  loader: () => import('@/containers/Authentication/RegisterVerify'),
+  () => import('@/containers/Authentication/AuthenticationPage'),
-});
+);
-const OneClickDemoPage = LazyLoader({
+const EmailConfirmation = lazy(
-  loader: () => import('@/containers/OneClickDemo/OneClickDemoPage'),
+  () => import('@/containers/Authentication/EmailConfirmation'),
-});
+);
+const RegisterVerify = lazy(
+  () => import('@/containers/Authentication/RegisterVerify'),
+);
+const OneClickDemoPage = lazy(
+  () => import('@/containers/OneClickDemo/OneClickDemoPage'),
+);
 
 /**
  * App inner.
@@ -38,36 +40,27 @@ function AppInsider({ history }) {
   return (
     <div className="App">
       <DashboardThemeProvider>
-        <Router history={history}>
+        <Suspense fallback={'Loading...'}>
-          <Switch>
+          <Router history={history}>
-            <Route path={'/one_click_demo'} children={<OneClickDemoPage />} />
+            <Switch>
-            <Route path={'/auth/register/verify'}>
+              <Route path={'/one_click_demo'} children={<OneClickDemoPage />} />
-              <EnsureAuthenticated>
+              <Route path={'/auth/register/verify'}>
-                <EnsureUserEmailNotVerified>
+                <EnsureAuthenticated>
-                  <RegisterVerify />
+                  <EnsureUserEmailNotVerified>
-                </EnsureUserEmailNotVerified>
+                    <RegisterVerify />
-              </EnsureAuthenticated>
+                  </EnsureUserEmailNotVerified>
-            </Route>
+                </EnsureAuthenticated>
+              </Route>
 
-            <Route path={'/auth/email_confirmation'}>
+              <Route
-              <EmailConfirmation />
+                path={'/auth/email_confirmation'}
-            </Route>
+                children={<EmailConfirmation />}
-
+              />
-            <Route path={'/auth'}>
+              <Route path={'/auth'} children={<AuthenticationPage />} />
-              <EnsureAuthNotAuthenticated>
+              <Route path={'/'} children={<DashboardPrivatePages />} />
-                <Authentication />
+            </Switch>
-              </EnsureAuthNotAuthenticated>
+          </Router>
-            </Route>
+        </Suspense>
-
-            <Route path={'/'}>
-              <EnsureAuthenticated>
-                <EnsureUserEmailVerified>
-                  <DashboardPrivatePages />
-                </EnsureUserEmailVerified>
-              </EnsureAuthenticated>
-            </Route>
-          </Switch>
-        </Router>
 
         <GlobalErrors />
       </DashboardThemeProvider>

packages/webapp/src/components/Dashboard/PrivatePages.tsx

@@ -1,35 +1,37 @@
 // @ts-nocheck
-import React from 'react';
+import React, { lazy } from 'react';
 import { Switch, Route } from 'react-router';
 
 import Dashboard from '@/components/Dashboard/Dashboard';
-import SetupWizardPage from '@/containers/Setup/WizardSetupPage';
 
-import EnsureOrganizationIsReady from '../Guards/EnsureOrganizationIsReady';
-import EnsureOrganizationIsNotReady from '../Guards/EnsureOrganizationIsNotReady';
 import { PrivatePagesProvider } from './PrivatePagesProvider';
+import EnsureOrganizationIsReady from '../Guards/EnsureOrganizationIsReady';
+import { EnsureAuthenticated } from '../Guards/EnsureAuthenticated';
+import { EnsureUserEmailVerified } from '../Guards/EnsureUserEmailVerified';
 
 import '@/style/pages/Dashboard/Dashboard.scss';
 
+const SetupWizardPage = lazy(
+  () => import('@/containers/Setup/WizardSetupPage'),
+);
 /**
  * Dashboard inner private pages.
  */
 export default function DashboardPrivatePages() {
   return (
-    <PrivatePagesProvider>
+    <EnsureAuthenticated>
-      <Switch>
+      <EnsureUserEmailVerified>
-        <Route path={'/setup'}>
+        <PrivatePagesProvider>
-          <EnsureOrganizationIsNotReady>
+          <Switch>
-            <SetupWizardPage />
+            <Route path={'/setup'} children={<SetupWizardPage />} />
-          </EnsureOrganizationIsNotReady>
+            <Route path="/">
-        </Route>
+              <EnsureOrganizationIsReady>
-
+                <Dashboard />
-        <Route path="/">
+              </EnsureOrganizationIsReady>
-          <EnsureOrganizationIsReady>
+            </Route>
-            <Dashboard />
+          </Switch>
-          </EnsureOrganizationIsReady>
+        </PrivatePagesProvider>
-        </Route>
+      </EnsureUserEmailVerified>
-      </Switch>
+    </EnsureAuthenticated>
-    </PrivatePagesProvider>
   );
 }

packages/webapp/src/components/LazyLoader.tsx

@@ -1,22 +0,0 @@
-// @ts-nocheck
-import * as React from 'react';
-import * as Loadable from 'react-loadable';
-
-const Loader = (config) =>
-  Loadable({
-    loading: (props) => {
-      if (props.error) {
-        /* tslint:disable */
-        console.error(`======= DefaultLoader Error =======`);
-        console.error(props.error);
-        console.error(`======= DefaultLoader Error =======`);
-        /* tslint:enable */
-        return null;
-      }
-      return null;
-    },
-    delay: 250,
-    ...config
-  });
-
-export default Loader;

packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx

@@ -1,21 +1,33 @@
 // @ts-nocheck
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import preferencesRoutes from '@/routes/preferences';
+import { getPreferenceRoutes } from '@/routes/preferences';
+import { Spinner } from '@blueprintjs/core';
+import { Box } from '../Layout';
 
 export default function DashboardContentRoute() {
+  const preferencesRoutes = getPreferenceRoutes();
+
   return (
     <Route pathname="/preferences">
-      <Switch>
+      <Suspense
-        {preferencesRoutes.map((route, index) => (
+        fallback={
-          <Route
+          <Box style={{ padding: 20 }}>
-            key={index}
+            <Spinner size={20} />
-            path={`${route.path}`}
+          </Box>
-            exact={route.exact}
+        }
-            component={route.component}
+      >
-          />
+        <Switch>
-        ))}
+          {preferencesRoutes.map((route, index) => (
-      </Switch>
+            <Route
+              key={index}
+              path={`${route.path}`}
+              exact={route.exact}
+              component={route.component}
+            />
+          ))}
+        </Switch>
+      </Suspense>
     </Route>
   );
 }

packages/webapp/src/containers/Authentication/Authentication.tsx

@@ -2,10 +2,12 @@
 import { Route, Switch, useLocation } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import styled from 'styled-components';
+import { Suspense } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { Spinner } from '@blueprintjs/core';
 
 import authenticationRoutes from '@/routes/authentication';
-import { Icon, FormattedMessage as T } from '@/components';
+import { Box, Icon, FormattedMessage as T } from '@/components';
 import { AuthMetaBootProvider } from './AuthMetaBoot';
 
 import '@/style/pages/Authentication/Auth.scss';
@@ -20,7 +22,15 @@ export function Authentication() {
           </AuthLogo>
 
           <AuthMetaBootProvider>
-            <AuthenticationRoutes />
+            <Suspense
+              fallback={
+                <Box style={{ marginTop: '5rem' }}>
+                  <Spinner size={30} />
+                </Box>
+              }
+            >
+              <AuthenticationRoutes />
+            </Suspense>
           </AuthMetaBootProvider>
         </AuthInsider>
       </AuthPage>

packages/webapp/src/containers/Authentication/AuthenticationPage.tsx

@@ -0,0 +1,10 @@
+import { EnsureAuthNotAuthenticated } from "@/components/Guards/EnsureAuthNotAuthenticated";
+import { Authentication } from "./Authentication";
+
+export default function AuthenticationPage() {
+  return (
+    <EnsureAuthNotAuthenticated>
+      <Authentication />
+    </EnsureAuthNotAuthenticated>
+  );
+}

packages/webapp/src/containers/OneClickDemo/OneClickDemoPageContent.tsx

@@ -73,8 +73,9 @@ export function OneClickDemoPageContent() {
               )}
               {running && (
                 <Text className={style.waitingText}>
-                  We're preparing temporary environment for trial, It typically
+                  We're preparing the temporary environment for trial. It
-                  take few seconds. Do not close or refresh the page.
+                  typically takes a few seconds. Do not close or refresh the
+                  page.
                 </Text>
               )}
             </Stack>

packages/webapp/src/containers/Setup/WizardSetupPage.tsx

@@ -2,14 +2,17 @@
 import React from 'react';
 import SetupRightSection from './SetupRightSection';
 import SetupLeftSection from './SetupLeftSection';
+import EnsureOrganizationIsNotReady from '@/components/Guards/EnsureOrganizationIsNotReady';
 
 import '@/style/pages/Setup/SetupPage.scss';
 
 export default function WizardSetupPage() {
   return (
-    <div class="setup-page">
+    <EnsureOrganizationIsNotReady>
-      <SetupLeftSection />
+      <div class="setup-page">
-      <SetupRightSection />
+        <SetupLeftSection />
-    </div>
+        <SetupRightSection />
+      </div>
+    </EnsureOrganizationIsNotReady>
   );
-};
+}

packages/webapp/src/routes/authentication.tsx

@@ -1,43 +1,35 @@
 // @ts-nocheck
-import LazyLoader from '@/components/LazyLoader';
+import { lazy } from 'react';
 
 const BASE_URL = '/auth';
 
 export default [
   {
     path: `${BASE_URL}/login`,
-    component: LazyLoader({
+    component: lazy(() => import('@/containers/Authentication/Login')),
-      loader: () => import('@/containers/Authentication/Login'),
-    }),
   },
   {
     path: `${BASE_URL}/send_reset_password`,
-    component: LazyLoader({
+    component: lazy(
-      loader: () => import('@/containers/Authentication/SendResetPassword'),
+      () => import('@/containers/Authentication/SendResetPassword'),
-    }),
+    ),
   },
   {
     path: `${BASE_URL}/reset_password/:token`,
-    component: LazyLoader({
+    component: lazy(() => import('@/containers/Authentication/ResetPassword')),
-      loader: () => import('@/containers/Authentication/ResetPassword'),
-    }),
   },
   {
     path: `${BASE_URL}/invite/:token/accept`,
-    component: LazyLoader({
+    component: lazy(() => import('@/containers/Authentication/InviteAccept')),
-      loader: () => import('@/containers/Authentication/InviteAccept'),
-    }),
   },
   {
     path: `${BASE_URL}/register/email_confirmation`,
-    component: LazyLoader({
+    component: lazy(
-      loader: () => import('@/containers/Authentication/EmailConfirmation'),
+      () => import('@/containers/Authentication/EmailConfirmation'),
-    }),
+    ),
   },
   {
     path: `${BASE_URL}/register`,
-    component: LazyLoader({
+    component: lazy(() => import('@/containers/Authentication/Register')),
-      loader: () => import('@/containers/Authentication/Register'),
-    }),
   },
 ];

packages/webapp/src/routes/preferences.tsx

@@ -1,88 +1,96 @@
 // @ts-nocheck
 import { lazy } from 'react';
-import General from '@/containers/Preferences/General/General';
-import Users from '../containers/Preferences/Users/Users';
-import Roles from '../containers/Preferences/Users/Roles/RolesForm/RolesFormPage';
-import Accountant from '@/containers/Preferences/Accountant/Accountant';
-import Currencies from '@/containers/Preferences/Currencies/Currencies';
-import Item from '@/containers/Preferences/Item';
-// import SMSIntegration from '../containers/Preferences/SMSIntegration';
-import DefaultRoute from '../containers/Preferences/DefaultRoute';
-import Warehouses from '../containers/Preferences/Warehouses';
-import Branches from '../containers/Preferences/Branches';
-import Invoices from '../containers/Preferences/Invoices/PreferencesInvoices';
-import { PreferencesCreditNotes } from '../containers/Preferences/CreditNotes/PreferencesCreditNotes';
-import { PreferencesEstimates } from '@/containers/Preferences/Estimates/PreferencesEstimates';
-import { PreferencesReceipts } from '@/containers/Preferences/Receipts/PreferencesReceipts';
-
-import BillingPage from '@/containers/Subscriptions/BillingPage';
 
 const BASE_URL = '/preferences';
 
-export default [
+export const getPreferenceRoutes = () => [
   {
     path: `${BASE_URL}/general`,
-    component: General,
+    component: lazy(() => import('@/containers/Preferences/General/General')),
     exact: true,
   },
   {
     path: `${BASE_URL}/users`,
-    component: Users,
+    component: lazy(() => import('../containers/Preferences/Users/Users')),
     exact: true,
   },
   {
     path: `${BASE_URL}/invoices`,
-    component: Invoices,
+    component: lazy(
+      () => import('../containers/Preferences/Invoices/PreferencesInvoices'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/credit-notes`,
-    component: PreferencesCreditNotes,
+    component: lazy(() =>
+      import(
+        '../containers/Preferences/CreditNotes/PreferencesCreditNotes'
+      ).then((module) => ({ default: module.PreferencesCreditNotes })),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/estimates`,
-    component: PreferencesEstimates,
+    component: lazy(() =>
+      import('@/containers/Preferences/Estimates/PreferencesEstimates').then(
+        (module) => ({ default: module.PreferencesEstimates }),
+      ),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/receipts`,
-    component: PreferencesReceipts,
+    component: lazy(() =>
+      import('@/containers/Preferences/Receipts/PreferencesReceipts').then(
+        (module) => ({ default: module.PreferencesReceipts }),
+      ),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/roles`,
-    component: Roles,
+    component: lazy(
+      () =>
+        import('../containers/Preferences/Users/Roles/RolesForm/RolesFormPage'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/roles/:id`,
-    component: Roles,
+    component: lazy(
+      () =>
+        import('../containers/Preferences/Users/Roles/RolesForm/RolesFormPage'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/currencies`,
-    component: Currencies,
+    component: lazy(
+      () => import('@/containers/Preferences/Currencies/Currencies'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/warehouses`,
-    component: Warehouses,
+    component: lazy(() => import('../containers/Preferences/Warehouses')),
     exact: true,
   },
   {
     path: `${BASE_URL}/branches`,
-    component: Branches,
+    component: lazy(() => import('../containers/Preferences/Branches')),
     exact: true,
   },
   {
     path: `${BASE_URL}/accountant`,
-    component: Accountant,
+    component: lazy(
+      () => import('@/containers/Preferences/Accountant/Accountant'),
+    ),
     exact: true,
   },
   {
     path: `${BASE_URL}/items`,
-    component: Item,
+    component: lazy(() => import('@/containers/Preferences/Item')),
     exact: true,
   },
   // {
@@ -92,12 +100,12 @@ export default [
   // },
   {
     path: `${BASE_URL}/billing`,
-    component: BillingPage,
+    component: lazy(() => import('@/containers/Subscriptions/BillingPage')),
     exact: true,
   },
   {
     path: `${BASE_URL}/`,
-    component: DefaultRoute,
+    component: lazy(() => import('../containers/Preferences/DefaultRoute')),
     exact: true,
   },
 ];