feat: Add swagger decorators

refactor: The expense G/L writer

packages/server/package.json

@@ -109,6 +109,7 @@
     "rtl-detect": "^1.0.4",
     "socket.io": "^4.7.4",
     "source-map-loader": "^4.0.1",
+    "swagger-ui-express": "^5.0.1",
     "tmp-promise": "^3.0.3",
     "ts-transformer-keys": "^0.4.2",
     "tsyringe": "^4.3.0",

packages/server/src/api/controllers/Attachments/AttachmentsController.ts

@@ -5,7 +5,14 @@ import { body, param } from 'express-validator';
 import BaseController from '@/api/controllers/BaseController';
 import { AttachmentsApplication } from '@/services/Attachments/AttachmentsApplication';
 import { AttachmentUploadPipeline } from '@/services/Attachments/S3UploadPipeline';
+import {
+  ApiOperation,
+  ApiResponse,
+  ApiTags,
+  Route,
+} from '@/decorators/swagger-decorators';
 
+@ApiTags('Attachments')
 @Service()
 export class AttachmentsController extends BaseController {
   @Inject()
@@ -121,6 +128,26 @@ export class AttachmentsController extends BaseController {
    * @param {NextFunction} next
    * @returns {Promise<Response|void>}
    */
+  @ApiResponse({
+    status: 200,
+    description: 'Details of the given attachement',
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' },
+          name: { type: 'string' },
+          email: { type: 'string' },
+        },
+      },
+    },
+  })
+  @ApiOperation({
+    summary: 'Retrieve a specific details of attachment',
+    description: 'Get all registered users',
+  })
+  @Route('/attachments/:id')
   private async getAttachment(
     req: Request,
     res: Response,

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

@@ -8,6 +8,11 @@ import { IItemDTO, ItemAction, AbilitySubject } from '@/interfaces';
 import { DATATYPES_LENGTH } from '@/data/DataTypes';
 import CheckAbilities from '@/api/middleware/CheckPolicies';
 import { ItemsApplication } from '@/services/Items/ItemsApplication';
+import {
+  ApiOperation,
+  ApiResponse,
+  Route,
+} from '@/decorators/swagger-decorators';
 
 @Service()
 export default class ItemsController extends BaseController {
@@ -198,6 +203,22 @@ export default class ItemsController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
+  @ApiResponse({
+    status: 200,
+    description: 'Details of the given attachement',
+    schema: {
+      type: 'object',
+      properties: {
+        id: { type: 'string' },
+        name: { type: 'string' },
+      },
+    },
+  })
+  @ApiOperation({
+    summary: 'Creates a new item (inventory or service)',
+    description: 'Get all registered users',
+  })
+  @Route('/items')
   private async newItem(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const itemDTO: IItemDTO = this.matchedBodyData(req);

packages/server/src/constants/event-tracker.ts

@@ -34,6 +34,42 @@ export const ITEM_EVENT_DELETED = 'Item deleted';
 export const AUTH_SIGNED_UP = 'Auth Signed-up';
 export const AUTH_RESET_PASSWORD = 'Auth reset password';
 
+export const SUBSCRIPTION_CANCELLED = 'Subscription cancelled';
+export const SUBSCRIPTION_RESUMED = 'Subscription resumed';
+export const SUBSCRIPTION_PLAN_CHANGED = 'Subscription plan changed';
+
+export const CUSTOMER_CREATED = 'Customer created';
+export const CUSTOMER_EDITED = 'Customer edited';
+export const CUSTOMER_DELETED = 'Customer deleted';
+
+export const VENDOR_CREATED = 'Vendor created';
+export const VENDOR_EDITED = 'Vendor edited';
+export const VENDOR_DELETED = 'Vendor deleted';
+
+export const TRANSACTIONS_LOCKING_LOCKED = 'Transactions locking locked';
+export const TRANSACTIONS_LOCKING_LOCKING_CANCELLED =
+  'Transactions locking cancelled';
+export const TRANSACTIONS_LOCKING_PARTIALLY_UNLOCKED =
+  'Transactions locking partially unlocked';
+export const TRANSACTIONS_LOCKING_PARTIALLY_UNLOCK_CANCELLED =
+  'Transactions locking partially unlock cancelled';
+
+export const BANK_TRANSACTION_MATCHED = 'Bank transaction matching deleted';
+export const BANK_TRANSACTION_EXCLUDED = 'Bank transaction excluded';
+export const BANK_TRANSACTION_CATEGORIZED = 'Bank transaction categorized';
+export const BANK_TRANSACTION_UNCATEGORIZED = 'Bank transaction uncategorized';
+export const BANK_ACCOUNT_DISCONNECTED = 'Bank account disconnected';
+
+export const MANUAL_JOURNAL_CREATED = 'Manual journal created';
+export const MANUAL_JOURNAL_EDITED = 'Manual journal edited';
+export const MANUAL_JOURNAL_DELETED = 'Manual journal deleted';
+export const MANUAL_JOURNAL_PUBLISHED = 'Manual journal published';
+
+export const BANK_RULE_CREATED = 'Bank rule created';
+export const BANK_RULE_EDITED = 'Bank rule edited';
+export const BANK_RULE_DELETED = 'Bank rule deleted';
+
+// # Event Groups
 export const ACCOUNT_GROUP = 'Account';
 export const ITEM_GROUP = 'Item';
 export const AUTH_GROUP = 'Auth';

packages/server/src/decorators/swagger-decorators.ts

@@ -0,0 +1,63 @@
+export const swaggerDocs = {
+  tags: {},
+  paths: {},
+};
+
+// Decorator to set a tag for a route
+export function ApiTags(tag) {
+  return function (target) {
+    if (!swaggerDocs.tags[tag]) {
+      swaggerDocs.tags[tag] = { name: tag };
+    }
+  };
+}
+
+// Decorator to add an operation for a specific route
+export function ApiOperation(options) {
+  return function (target, propertyKey, descriptor) {
+    const routePath = Reflect.getMetadata('path', target, propertyKey);
+
+    swaggerDocs.paths[routePath] = swaggerDocs.paths[routePath] || {};
+    swaggerDocs.paths[routePath].get = {
+      summary: options.summary,
+      description: options.description || '',
+      responses: options.responses || {
+        200: {
+          description: 'Successful Response',
+        },
+      },
+    };
+
+    
+  };
+}
+
+// Decorator to define the route path
+export function Route(path) {
+  return function (target, propertyKey, descriptor) {
+    Reflect.defineMetadata('path', path, target, propertyKey);
+  };
+}
+
+// Decorator to add a response schema for a specific route
+export function ApiResponse(options) {
+  return function (target, propertyKey, descriptor) {
+    const routePath = Reflect.getMetadata('path', target, propertyKey);
+    
+    if (!swaggerDocs.paths[routePath]) {
+      swaggerDocs.paths[routePath] = { get: {} };
+    }
+
+    swaggerDocs.paths[routePath].get.responses =
+      swaggerDocs.paths[routePath].get.responses || {};
+
+    swaggerDocs.paths[routePath].get.responses[options.status] = {
+      description: options.description || 'No description provided',
+      content: {
+        'application/json': {
+          schema: options.schema || {},
+        },
+      },
+    };
+  };
+}

packages/server/src/interfaces/Bill.ts

@@ -99,6 +99,7 @@ export interface IBillsFilter extends IDynamicListFilterDTO {
   stringifiedFilterRoles?: string;
   page: number;
   pageSize: number;
+  filterQuery?: (q: any) => void;
 }
 
 export interface IBillsService {

packages/server/src/interfaces/Contact.ts

@@ -241,6 +241,7 @@ export interface ICustomerEventCreatingPayload {
   trx: Knex.Transaction;
 }
 export interface ICustomerEventEditedPayload {
+  tenantId: number
   customerId: number;
   customer: ICustomer;
   trx: Knex.Transaction;

packages/server/src/interfaces/CreditNote.ts

@@ -130,7 +130,9 @@ export interface ICreditNoteOpenedPayload {
   trx: Knex.Transaction;
 }
 
-export interface ICreditNotesQueryDTO {}
+export interface ICreditNotesQueryDTO {
+  filterQuery?: (query: any) => void;
+}
 
 export interface ICreditNotesQueryDTO extends IDynamicListFilter {
   page: number;

packages/server/src/interfaces/Expenses.ts

@@ -17,6 +17,7 @@ export interface IExpensesFilter {
   columnSortBy: string;
   sortOrder: string;
   viewSlug?: string;
+  filterQuery?: (query: any) => void;
 }
 
 export interface IExpense {

packages/server/src/interfaces/Model.ts

@@ -151,6 +151,7 @@ export interface IModelMetaFieldCommon2 {
   importHint?: string;
   order?: number;
   unique?: number;
+  features?: Array<any>
 }
 
 export interface IModelMetaRelationField2 {

packages/server/src/interfaces/SaleEstimate.ts

@@ -44,6 +44,7 @@ export interface ISaleEstimateDTO {
 
 export interface ISalesEstimatesFilter extends IDynamicListFilterDTO {
   stringifiedFilterRoles?: string;
+  filterQuery?: (q: any) => void;
 }
 
 export interface ISalesEstimatesService {

packages/server/src/interfaces/SaleInvoice.ts

@@ -79,6 +79,7 @@ export interface ISalesInvoicesFilter extends IDynamicListFilter {
   page: number;
   pageSize: number;
   searchKeyword?: string;
+  filterQuery?: (q: Knex.QueryBuilder) => void;
 }
 
 export interface ISalesInvoicesService {

packages/server/src/interfaces/SaleReceipt.ts

@@ -29,7 +29,9 @@ export interface ISaleReceipt {
   entries?: IItemEntry[];
 }
 
-export interface ISalesReceiptsFilter {}
+export interface ISalesReceiptsFilter {
+  filterQuery?: (query: any) => void;
+}
 
 export interface ISaleReceiptDTO {
   customerId: number;

packages/server/src/interfaces/VendorCredit.ts

@@ -106,6 +106,7 @@ export interface IVendorCreditsQueryDTO extends IDynamicListFilter {
   page: number;
   pageSize: number;
   searchKeyword?: string;
+  filterQuery?: (q: any) => void;
 }
 
 export interface IVendorCreditEditingPayload {

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   defaultFilterField: 'vendor',
   defaultSort: {
@@ -167,6 +169,18 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     billNumber: {
@@ -238,6 +252,22 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true,
+    },
   },
 };
 

packages/server/src/models/Bill.ts

@@ -402,6 +402,7 @@ export default class Bill extends mixin(TenantModel, [
     const ItemEntry = require('models/ItemEntry');
     const BillLandedCost = require('models/BillLandedCost');
     const Branch = require('models/Branch');
+    const Warehouse = require('models/Warehouse');
     const TaxRateTransaction = require('models/TaxRateTransaction');
     const Document = require('models/Document');
     const { MatchedBankTransaction } = require('models/MatchedBankTransaction');
@@ -453,6 +454,18 @@ export default class Bill extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Bill may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'bills.warehouseId',
+          to: 'warehouses.id',
+        },
+      },
+
       /**
        * Bill may has associated tax rate transactions.
        */

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   defaultFilterField: 'vendor',
   defaultSort: {
@@ -141,6 +143,12 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     vendorId: {
@@ -204,5 +212,13 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
   },
 };

packages/server/src/models/Branch.settings.ts

@@ -0,0 +1,11 @@
+export default {
+  fields2: {
+    name: {
+      name: 'Name',
+      fieldType: 'text',
+      required: true,
+    },
+  },
+  columns: {},
+  fields: {}
+};

packages/server/src/models/Branch.ts

@@ -1,7 +1,9 @@
-import { Model } from 'objection';
+import { Model, mixin } from 'objection';
 import TenantModel from 'models/TenantModel';
+import BranchMetadata from './Branch.settings';
+import ModelSetting from './ModelSetting';
 
-export default class Branch extends TenantModel {
+export default class Branch extends mixin(TenantModel, [ModelSetting]) {
   /**
    * Table name.
    */
@@ -169,4 +171,11 @@ export default class Branch extends TenantModel {
       },
     };
   }
+
+  /**
+   * Model settings.
+   */
+  static get meta() {
+    return BranchMetadata;
+  }
 }

packages/server/src/models/CreditNote.Meta.ts

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 function StatusFieldFilterQuery(query, role) {
   query.modify('filterByStatus', role.value);
 }
@@ -100,7 +102,7 @@ export default {
     },
     creditNoteDate: {
       name: 'Credit Note Date',
-      accessor: 'formattedCreditNoteDate'
+      accessor: 'formattedCreditNoteDate',
     },
     referenceNo: {
       name: 'Reference No.',
@@ -147,6 +149,18 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     customerId: {
@@ -215,5 +229,21 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true,
+    },
   },
 };

packages/server/src/models/CreditNote.ts

@@ -175,6 +175,7 @@ export default class CreditNote extends mixin(TenantModel, [
     const Customer = require('models/Customer');
     const Branch = require('models/Branch');
     const Document = require('models/Document');
+    const Warehouse = require('models/Warehouse');
 
     return {
       /**
@@ -235,6 +236,18 @@ export default class CreditNote extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Credit note may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'credit_notes.warehouseId',
+          to: 'warehouses.id',
+        },
+      },
+
       /**
        * Credit note may has many attached attachments.
        */

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 /**
  * Expense - Settings.
  */
@@ -119,6 +121,12 @@ export default {
       type: 'boolean',
       printable: false,
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     paymentAccountId: {
@@ -178,6 +186,14 @@ export default {
       name: 'expense.field.publish',
       fieldType: 'boolean',
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
   },
 };
 

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   importable: true,
 
@@ -128,6 +130,12 @@ export default {
       type: 'date',
       printable: false,
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     customerId: {
@@ -189,5 +197,13 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
   },
 };

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   defaultFilterField: 'estimate_date',
   defaultSort: {
@@ -174,6 +176,18 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     customerId: {
@@ -252,6 +266,22 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true,
+    },
   },
 };
 

packages/server/src/models/SaleEstimate.ts

@@ -182,6 +182,7 @@ export default class SaleEstimate extends mixin(TenantModel, [
     const ItemEntry = require('models/ItemEntry');
     const Customer = require('models/Customer');
     const Branch = require('models/Branch');
+    const Warehouse = require('models/Warehouse');
     const Document = require('models/Document');
 
     return {
@@ -221,6 +222,18 @@ export default class SaleEstimate extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Sale estimate may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'sales_estimates.warehouseId',
+          to: 'warehouses.id',
+        },
+      },
+
       /**
        * Sale estimate transaction may has many attached attachments.
        */

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   defaultFilterField: 'customer',
   defaultSort: {
@@ -185,6 +187,18 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     invoiceDate: {
@@ -268,6 +282,22 @@ export default {
       fieldType: 'boolean',
       printable: false,
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true,
+    },
   },
 };
 

packages/server/src/models/SaleInvoice.ts

@@ -408,6 +408,7 @@ export default class SaleInvoice extends mixin(TenantModel, [
     const InventoryCostLotTracker = require('models/InventoryCostLotTracker');
     const PaymentReceiveEntry = require('models/PaymentReceiveEntry');
     const Branch = require('models/Branch');
+    const Warehouse = require('models/Warehouse');
     const Account = require('models/Account');
     const TaxRateTransaction = require('models/TaxRateTransaction');
     const Document = require('models/Document');
@@ -499,6 +500,18 @@ export default class SaleInvoice extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Invoice may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'sales_invoices.warehouseId',
+          to: 'warehouses.id',
+        }
+      },
+
       /**
        * Invoice may has associated written-off expense account.
        */

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

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 export default {
   defaultFilterField: 'receipt_date',
   defaultSort: {
@@ -169,6 +171,18 @@ export default {
       type: 'date',
       printable: false,
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     receiptDate: {
@@ -245,6 +259,22 @@ export default {
       name: 'Receipt Message',
       fieldType: 'text',
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true,
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true,
+    },
   },
 };
 

packages/server/src/models/SaleReceipt.ts

@@ -109,6 +109,7 @@ export default class SaleReceipt extends mixin(TenantModel, [
     const ItemEntry = require('models/ItemEntry');
     const Branch = require('models/Branch');
     const Document = require('models/Document');
+    const Warehouse = require('models/Warehouse');
 
     return {
       customer: {
@@ -169,6 +170,18 @@ export default class SaleReceipt extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Sale receipt may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'sales_receipts.warehouseId',
+          to: 'warehouses.id',
+        },
+      },
+
       /**
        * Sale receipt transaction may has many attached attachments.
        */

packages/server/src/models/VendorCredit.Meta.ts

@@ -1,3 +1,5 @@
+import { Features } from '@/interfaces';
+
 function StatusFieldFilterQuery(query, role) {
   query.modify('filterByStatus', role.value);
 }
@@ -160,6 +162,18 @@ export default {
         },
       },
     },
+    branch: {
+      name: 'Branch',
+      type: 'text',
+      accessor: 'branch.name',
+      features: [Features.BRANCHES],
+    },
+    warehouse: {
+      name: 'Warehouse',
+      type: 'text',
+      accessor: 'warehouse.name',
+      features: [Features.BRANCHES],
+    },
   },
   fields2: {
     vendorId: {
@@ -225,5 +239,21 @@ export default {
         },
       },
     },
+    branchId: {
+      name: 'Branch',
+      fieldType: 'relation',
+      relationModel: 'Branch',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.BRANCHES],
+      required: true
+    },
+    warehouseId: {
+      name: 'Warehouse',
+      fieldType: 'relation',
+      relationModel: 'Warehouse',
+      relationImportMatch: ['name', 'code'],
+      features: [Features.WAREHOUSES],
+      required: true
+    },
   },
 };

packages/server/src/models/VendorCredit.ts

@@ -178,6 +178,7 @@ export default class VendorCredit extends mixin(TenantModel, [
     const ItemEntry = require('models/ItemEntry');
     const Branch = require('models/Branch');
     const Document = require('models/Document');
+    const Warehouse = require('models/Warehouse');
 
     return {
       vendor: {
@@ -217,6 +218,18 @@ export default class VendorCredit extends mixin(TenantModel, [
         },
       },
 
+      /**
+       * Vendor credit may has associated warehouse.
+       */
+      warehouse: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Warehouse.default,
+        join: {
+          from: 'vendor_credits.warehouseId',
+          to: 'warehouses.id',
+        },
+      },
+
       /**
        * Vendor credit may has many attached attachments.
        */

packages/server/src/models/Warehouse.settings.ts

@@ -0,0 +1,11 @@
+export default {
+  fields2: {
+    name: {
+      name: 'Name',
+      fieldType: 'text',
+      required: true,
+    },
+  },
+  columns: {},
+  fields: {}
+};

packages/server/src/services/Banking/RegonizeTranasctions/RecognizeTranasctionsService.ts

@@ -78,9 +78,9 @@ export class RecognizeTranasctionsService {
       });
 
     const bankRules = await BankRule.query(trx).onBuild((q) => {
-      const rulesIds = castArray(ruleId);
+      const rulesIds = !isEmpty(ruleId) ? castArray(ruleId) : [];
 
-      if (!isEmpty(rulesIds)) {
+      if (rulesIds?.length > 0) {
         q.whereIn('id', rulesIds);
       }
       q.withGraphFetched('conditions');

packages/server/src/services/Contacts/Customers/CRUD/EditCustomer.ts

@@ -65,6 +65,7 @@ export class EditCustomer {
       });
       // Triggers `onCustomerEdited` event.
       await this.eventPublisher.emitAsync(events.customers.onEdited, {
+        tenantId,
         customerId,
         customer,
         trx,

packages/server/src/services/CreditNotes/CreditNotesExportable.ts

@@ -15,12 +15,17 @@ export class CreditNotesExportable extends Exportable {
    * @returns {}
    */
   public exportable(tenantId: number, query: ICreditNotesQueryDTO) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: 12000,
+      filterQuery,
     } as ICreditNotesQueryDTO;
 
     return this.getCreditNotes

packages/server/src/services/CreditNotes/ListCreditNotes.ts

@@ -48,6 +48,7 @@ export default class ListCreditNotes extends BaseCreditNotes {
         builder.withGraphFetched('entries.item');
         builder.withGraphFetched('customer');
         dynamicFilter.buildQuery()(builder);
+        creditNotesQuery?.filterQuery && creditNotesQuery?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

packages/server/src/services/EventsTracker/events/BankRuleEventsTracker.ts

@@ -0,0 +1,68 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import {
+  IBankRuleEventCreatedPayload,
+  IBankRuleEventEditedPayload,
+  IBankRuleEventDeletedPayload,
+} from '@/services/Banking/Rules/types'; // Updated import path for interfaces
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  BANK_RULE_CREATED,
+  BANK_RULE_EDITED,
+  BANK_RULE_DELETED,
+} from '@/constants/event-tracker';
+
+@Service()
+export class BankRuleEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  /**
+   * Constructor method.
+   */
+  public attach(bus) {
+    bus.subscribe(
+      events.bankRules.onCreated,
+      this.handleTrackBankRuleCreatedEvent
+    );
+    bus.subscribe(
+      events.bankRules.onEdited,
+      this.handleTrackEditedBankRuleEvent
+    );
+    bus.subscribe(
+      events.bankRules.onDeleted,
+      this.handleTrackDeletedBankRuleEvent
+    );
+  }
+
+  private handleTrackBankRuleCreatedEvent = ({
+    tenantId,
+  }: IBankRuleEventCreatedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_RULE_CREATED,
+      properties: {},
+    });
+  };
+
+  private handleTrackEditedBankRuleEvent = ({
+    tenantId,
+  }: IBankRuleEventEditedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_RULE_EDITED,
+      properties: {},
+    });
+  };
+
+  private handleTrackDeletedBankRuleEvent = ({
+    tenantId,
+  }: IBankRuleEventDeletedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_RULE_DELETED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/BankTransactionEventsTracker.ts

@@ -0,0 +1,97 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  BANK_TRANSACTION_MATCHED,
+  BANK_TRANSACTION_EXCLUDED,
+  BANK_TRANSACTION_CATEGORIZED,
+  BANK_TRANSACTION_UNCATEGORIZED,
+  BANK_ACCOUNT_DISCONNECTED,
+} from '@/constants/event-tracker';
+import { IBankTransactionMatchedEventPayload } from '@/services/Banking/Matching/types';
+import { IBankAccountDisconnectedEventPayload } from '@/services/Banking/BankAccounts/types';
+import {
+  ICashflowTransactionCategorizedPayload,
+  ICashflowTransactionUncategorizedPayload,
+} from '@/interfaces';
+import { IBankTransactionExcludedEventPayload } from '@/services/Banking/Exclude/_types';
+
+@Service()
+export class BankTransactionEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  public attach(bus) {
+    bus.subscribe(
+      events.bankMatch.onMatched,
+      this.handleTrackBankTransactionMatchedEvent
+    );
+    bus.subscribe(
+      events.bankTransactions.onExcluded,
+      this.handleTrackBankTransactionExcludedEvent
+    );
+    bus.subscribe(
+      events.cashflow.onTransactionCategorized,
+      this.handleTrackBankTransactionCategorizedEvent
+    );
+    bus.subscribe(
+      events.cashflow.onTransactionUncategorized,
+      this.handleTrackBankTransactionUncategorizedEvent
+    );
+    bus.subscribe(
+      events.bankAccount.onDisconnected,
+      this.handleTrackBankAccountDisconnectedEvent
+    );
+  }
+
+  private handleTrackBankTransactionMatchedEvent = ({
+    tenantId,
+  }: IBankTransactionMatchedEventPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_TRANSACTION_MATCHED,
+      properties: {},
+    });
+  };
+
+  private handleTrackBankTransactionExcludedEvent = ({
+    tenantId,
+  }: IBankTransactionExcludedEventPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_TRANSACTION_EXCLUDED,
+      properties: {},
+    });
+  };
+
+  private handleTrackBankTransactionCategorizedEvent = ({
+    tenantId,
+  }: ICashflowTransactionCategorizedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_TRANSACTION_CATEGORIZED,
+      properties: {},
+    });
+  };
+
+  private handleTrackBankTransactionUncategorizedEvent = ({
+    tenantId,
+  }: ICashflowTransactionUncategorizedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_TRANSACTION_UNCATEGORIZED,
+      properties: {},
+    });
+  };
+
+  private handleTrackBankAccountDisconnectedEvent = ({
+    tenantId,
+  }: IBankAccountDisconnectedEventPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BANK_ACCOUNT_DISCONNECTED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/CustomerEventsTracker.ts

@@ -0,0 +1,65 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import {
+  ICustomerEventCreatedPayload,
+  ICustomerEventEditedPayload,
+  ICustomerEventDeletedPayload,
+} from '@/interfaces';
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  CUSTOMER_CREATED,
+  CUSTOMER_EDITED,
+  CUSTOMER_DELETED,
+} from '@/constants/event-tracker';
+
+@Service()
+export class CustomerEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  public attach(bus) {
+    bus.subscribe(
+      events.customers.onCreated,
+      this.handleTrackCustomerCreatedEvent
+    );
+    bus.subscribe(
+      events.customers.onEdited,
+      this.handleTrackEditedCustomerEvent
+    );
+    bus.subscribe(
+      events.customers.onDeleted,
+      this.handleTrackDeletedCustomerEvent
+    );
+  }
+
+  private handleTrackCustomerCreatedEvent = ({
+    tenantId,
+  }: ICustomerEventCreatedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CUSTOMER_CREATED,
+      properties: {},
+    });
+  };
+
+  private handleTrackEditedCustomerEvent = ({
+    tenantId,
+  }: ICustomerEventEditedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CUSTOMER_EDITED,
+      properties: {},
+    });
+  };
+
+  private handleTrackDeletedCustomerEvent = ({
+    tenantId,
+  }: ICustomerEventDeletedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CUSTOMER_DELETED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/ManualJournalEventsTracker.ts

@@ -0,0 +1,68 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import {
+  IManualJournalEventCreatedPayload,
+  IManualJournalEventEditedPayload,
+  IManualJournalEventDeletedPayload,
+} from '@/interfaces';
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  MANUAL_JOURNAL_CREATED,
+  MANUAL_JOURNAL_EDITED,
+  MANUAL_JOURNAL_DELETED,
+} from '@/constants/event-tracker';
+
+@Service()
+export class ManualJournalEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  /**
+   * Constructor method.
+   */
+  public attach(bus) {
+    bus.subscribe(
+      events.manualJournals.onCreated,
+      this.handleTrackManualJournalCreatedEvent
+    );
+    bus.subscribe(
+      events.manualJournals.onEdited,
+      this.handleTrackEditedManualJournalEvent
+    );
+    bus.subscribe(
+      events.manualJournals.onDeleted,
+      this.handleTrackDeletedManualJournalEvent
+    );
+  }
+
+  private handleTrackManualJournalCreatedEvent = ({
+    tenantId,
+  }: IManualJournalEventCreatedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: MANUAL_JOURNAL_CREATED,
+      properties: {},
+    });
+  };
+
+  private handleTrackEditedManualJournalEvent = ({
+    tenantId,
+  }: IManualJournalEventEditedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: MANUAL_JOURNAL_EDITED,
+      properties: {},
+    });
+  };
+
+  private handleTrackDeletedManualJournalEvent = ({
+    tenantId,
+  }: IManualJournalEventDeletedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: MANUAL_JOURNAL_DELETED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/SubscriptionEventsTracker.ts

@@ -0,0 +1,76 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import { ITransactionsLockingPartialUnlocked } from '@/interfaces';
+import { PosthogService } from '../PostHog';
+import {
+  TRANSACTIONS_LOCKING_LOCKED,
+  TRANSACTIONS_LOCKING_LOCKING_CANCELLED,
+  TRANSACTIONS_LOCKING_PARTIALLY_UNLOCK_CANCELLED,
+  TRANSACTIONS_LOCKING_PARTIALLY_UNLOCKED,
+} from '@/constants/event-tracker';
+import events from '@/subscribers/events';
+
+@Service()
+export class TransactionsLockingEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  public attach(bus) {
+    bus.subscribe(
+      events.transactionsLocking.locked,
+      this.handleTransactionsLockingLockedEvent
+    );
+    bus.subscribe(
+      events.transactionsLocking.lockCanceled,
+      this.handleTransactionsLockingCancelledEvent
+    );
+    bus.subscribe(
+      events.transactionsLocking.partialUnlocked,
+      this.handleTransactionsLockingPartiallyUnlockedEvent
+    );
+    bus.subscribe(
+      events.transactionsLocking.partialUnlockCanceled,
+      this.handleTransactionsLockingPartiallyUnlockCancelledEvent
+    );
+  }
+
+  private handleTransactionsLockingLockedEvent = ({
+    tenantId,
+  }: ITransactionsLockingPartialUnlocked) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: TRANSACTIONS_LOCKING_LOCKED,
+      properties: {},
+    });
+  };
+
+  private handleTransactionsLockingCancelledEvent = ({
+    tenantId,
+  }: ITransactionsLockingPartialUnlocked) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: TRANSACTIONS_LOCKING_LOCKING_CANCELLED,
+      properties: {},
+    });
+  };
+
+  private handleTransactionsLockingPartiallyUnlockedEvent = ({
+    tenantId,
+  }: ITransactionsLockingPartialUnlocked) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: TRANSACTIONS_LOCKING_PARTIALLY_UNLOCKED,
+      properties: {},
+    });
+  };
+
+  private handleTransactionsLockingPartiallyUnlockCancelledEvent = ({
+    tenantId,
+  }: ITransactionsLockingPartialUnlocked) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: TRANSACTIONS_LOCKING_PARTIALLY_UNLOCK_CANCELLED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/TransactionsLockingEventsTracker.ts

@@ -0,0 +1,55 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import { ITransactionsLockingPartialUnlocked } from '@/interfaces';
+import { PosthogService } from '../PostHog';
+import {
+  SUBSCRIPTION_CANCELLED,
+  SUBSCRIPTION_PLAN_CHANGED,
+  SUBSCRIPTION_RESUMED,
+} from '@/constants/event-tracker';
+import events from '@/subscribers/events';
+
+@Service()
+export class TransactionsLockingEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  public attach(bus) {
+    bus.subscribe(
+      events.subscription.onSubscriptionResumed,
+      this.handleSubscriptionResumedEvent
+    );
+    bus.subscribe(
+      events.subscription.onSubscriptionCancelled,
+      this.handleSubscriptionCancelledEvent
+    );
+    bus.subscribe(
+      events.subscription.onSubscriptionPlanChanged,
+      this.handleSubscriptionPlanChangedEvent
+    );
+  }
+
+  private handleSubscriptionResumedEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SUBSCRIPTION_RESUMED,
+      properties: {},
+    });
+  };
+
+  private handleSubscriptionCancelledEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SUBSCRIPTION_CANCELLED,
+      properties: {},
+    });
+  };
+
+  private handleSubscriptionPlanChangedEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SUBSCRIPTION_PLAN_CHANGED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/VendorEventsTracker.ts

@@ -0,0 +1,56 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import {
+  IVendorEventCreatedPayload,
+  IVendorEventEditedPayload,
+  IVendorEventDeletedPayload,
+} from '@/interfaces';
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  VENDOR_CREATED,
+  VENDOR_EDITED,
+  VENDOR_DELETED,
+} from '@/constants/event-tracker';
+
+@Service()
+export class VendorEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  public attach(bus) {
+    bus.subscribe(events.vendors.onCreated, this.handleTrackVendorCreatedEvent);
+    bus.subscribe(events.vendors.onEdited, this.handleTrackEditedVendorEvent);
+    bus.subscribe(events.vendors.onDeleted, this.handleTrackDeletedVendorEvent);
+  }
+
+  private handleTrackVendorCreatedEvent = ({
+    tenantId,
+  }: IVendorEventCreatedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: VENDOR_CREATED,
+      properties: {},
+    });
+  };
+
+  private handleTrackEditedVendorEvent = ({
+    tenantId,
+  }: IVendorEventEditedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: VENDOR_EDITED,
+      properties: {},
+    });
+  };
+
+  private handleTrackDeletedVendorEvent = ({
+    tenantId,
+  }: IVendorEventDeletedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: VENDOR_DELETED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/events.ts

@@ -7,6 +7,11 @@ import { ExpenseEventsTracker } from './ExpenseEventsTracker';
 import { AccountEventsTracker } from './AccountEventsTracker';
 import { AuthenticationEventsTracker } from './AuthenticationEventsTracker';
 import { ItemEventsTracker } from './ItemEventsTracker';
+import { BankTransactionEventsTracker } from './BankTransactionEventsTracker';
+import { CustomerEventsTracker } from './CustomerEventsTracker';
+import { VendorEventsTracker } from './VendorEventsTracker';
+import { ManualJournalEventsTracker } from './ManualJournalEventsTracker';
+import { BankRuleEventsTracker } from './BankRuleEventsTracker';
 
 export const EventsTrackerListeners = [
   SaleInvoiceEventsTracker,
@@ -17,5 +22,10 @@ export const EventsTrackerListeners = [
   AccountEventsTracker,
   ExpenseEventsTracker,
   AuthenticationEventsTracker,
-  ItemEventsTracker
+  ItemEventsTracker,
+  BankTransactionEventsTracker,
+  CustomerEventsTracker,
+  VendorEventsTracker,
+  ManualJournalEventsTracker,
+  BankRuleEventsTracker,
 ];

packages/server/src/services/Expenses/CRUD/CommandExpenseValidator.ts

@@ -1,7 +1,7 @@
 import { Service, Inject } from 'typedi';
 import { sumBy, difference } from 'lodash';
 import { ServiceError } from '@/exceptions';
-import { ERRORS } from '../constants';
+import { ERRORS, SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES } from '../constants';
 import {
   IAccount,
   IExpense,
@@ -79,7 +79,9 @@ export class CommandExpenseValidator {
    * @throws {ServiceError}
    */
   public validatePaymentAccountType = (paymentAccount: number[]) => {
-    if (!paymentAccount.isParentType(ACCOUNT_PARENT_TYPE.CURRENT_ASSET)) {
+    if (
+      !paymentAccount.isAccountType(SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES)
+    ) {
       throw new ServiceError(ERRORS.PAYMENT_ACCOUNT_HAS_INVALID_TYPE);
     }
   };

packages/server/src/services/Expenses/CRUD/GetExpenses.ts

@@ -54,6 +54,7 @@ export class GetExpenses {
         builder.withGraphFetched('categories.expenseAccount');
 
         dynamicList.buildQuery()(builder);
+        filterDTO?.filterQuery && filterDTO?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

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

@@ -0,0 +1,113 @@
+import * as R from 'ramda';
+import {
+  AccountNormal,
+  IExpenseCategory,
+  ILedger,
+  ILedgerEntry,
+} from '@/interfaces';
+import Ledger from '../Accounting/Ledger';
+
+export class ExpenseGL {
+  private expense: any;
+
+  /**
+   * Constructor method.
+   */
+  constructor(expense: any) {
+    this.expense = expense;
+  }
+
+  /**
+   * Retrieves the expense GL common entry.
+   * @param {IExpense} expense
+   * @returns {Partial<ILedgerEntry>}
+   */
+  private getExpenseGLCommonEntry = (): Partial<ILedgerEntry> => {
+    return {
+      currencyCode: this.expense.currencyCode,
+      exchangeRate: this.expense.exchangeRate,
+
+      transactionType: 'Expense',
+      transactionId: this.expense.id,
+
+      date: this.expense.paymentDate,
+      userId: this.expense.userId,
+
+      debit: 0,
+      credit: 0,
+
+      branchId: this.expense.branchId,
+    };
+  };
+
+  /**
+   * Retrieves the expense GL payment entry.
+   * @param {IExpense} expense
+   * @returns {ILedgerEntry}
+   */
+  private getExpenseGLPaymentEntry = (): ILedgerEntry => {
+    const commonEntry = this.getExpenseGLCommonEntry();
+
+    return {
+      ...commonEntry,
+      credit: this.expense.localAmount,
+      accountId: this.expense.paymentAccountId,
+      accountNormal:
+        this.expense?.paymentAccount?.accountNormal === 'debit'
+          ? AccountNormal.DEBIT
+          : AccountNormal.CREDIT,
+      index: 1,
+    };
+  };
+
+  /**
+   * Retrieves the expense GL category entry.
+   * @param {IExpense} expense -
+   * @param {IExpenseCategory} expenseCategory -
+   * @param {number} index
+   * @returns {ILedgerEntry}
+   */
+  private getExpenseGLCategoryEntry = R.curry(
+    (category: IExpenseCategory, index: number): ILedgerEntry => {
+      const commonEntry = this.getExpenseGLCommonEntry();
+      const localAmount = category.amount * this.expense.exchangeRate;
+
+      return {
+        ...commonEntry,
+        accountId: category.expenseAccountId,
+        accountNormal: AccountNormal.DEBIT,
+        debit: localAmount,
+        note: category.description,
+        index: index + 2,
+        projectId: category.projectId,
+      };
+    }
+  );
+
+  /**
+   * Retrieves the expense GL entries.
+   * @param {IExpense} expense
+   * @returns {ILedgerEntry[]}
+   */
+  public getExpenseGLEntries = (): ILedgerEntry[] => {
+    const getCategoryEntry = this.getExpenseGLCategoryEntry();
+
+    const paymentEntry = this.getExpenseGLPaymentEntry();
+    const categoryEntries = this.expense.categories.map(getCategoryEntry);
+
+    return [paymentEntry, ...categoryEntries];
+  };
+
+  /**
+   * Retrieves the given expense ledger.
+   * @param {IExpense} expense
+   * @returns {ILedger}
+   */
+  public getExpenseLedger = (): ILedger => {
+    const entries = this.getExpenseGLEntries();
+
+    console.log(entries, 'entries');
+
+    return new Ledger(entries);
+  };
+}

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

@@ -1,106 +0,0 @@
-import * as R from 'ramda';
-import { Service } from 'typedi';
-import {
-  AccountNormal,
-  IExpense,
-  IExpenseCategory,
-  ILedger,
-  ILedgerEntry,
-} from '@/interfaces';
-import Ledger from '@/services/Accounting/Ledger';
-
-@Service()
-export class ExpenseGLEntries {
-  /**
-   * Retrieves the expense GL common entry.
-   * @param {IExpense} expense
-   * @returns
-   */
-  private getExpenseGLCommonEntry = (expense: IExpense) => {
-    return {
-      currencyCode: expense.currencyCode,
-      exchangeRate: expense.exchangeRate,
-
-      transactionType: 'Expense',
-      transactionId: expense.id,
-
-      date: expense.paymentDate,
-      userId: expense.userId,
-
-      debit: 0,
-      credit: 0,
-
-      branchId: expense.branchId,
-    };
-  };
-
-  /**
-   * Retrieves the expense GL payment entry.
-   * @param   {IExpense} expense
-   * @returns {ILedgerEntry}
-   */
-  private getExpenseGLPaymentEntry = (expense: IExpense): ILedgerEntry => {
-    const commonEntry = this.getExpenseGLCommonEntry(expense);
-
-    return {
-      ...commonEntry,
-      credit: expense.localAmount,
-      accountId: expense.paymentAccountId,
-      accountNormal: AccountNormal.DEBIT,
-      index: 1,
-    };
-  };
-
-  /**
-   * Retrieves the expense GL category entry.
-   * @param   {IExpense} expense -
-   * @param   {IExpenseCategory} expenseCategory -
-   * @param   {number} index
-   * @returns {ILedgerEntry}
-   */
-  private getExpenseGLCategoryEntry = R.curry(
-    (
-      expense: IExpense,
-      category: IExpenseCategory,
-      index: number
-    ): ILedgerEntry => {
-      const commonEntry = this.getExpenseGLCommonEntry(expense);
-      const localAmount = category.amount * expense.exchangeRate;
-
-      return {
-        ...commonEntry,
-        accountId: category.expenseAccountId,
-        accountNormal: AccountNormal.DEBIT,
-        debit: localAmount,
-        note: category.description,
-        index: index + 2,
-        projectId: category.projectId,
-      };
-    }
-  );
-
-  /**
-   * Retrieves the expense GL entries.
-   * @param   {IExpense} expense
-   * @returns {ILedgerEntry[]}
-   */
-  public getExpenseGLEntries = (expense: IExpense): ILedgerEntry[] => {
-    const getCategoryEntry = this.getExpenseGLCategoryEntry(expense);
-
-    const paymentEntry = this.getExpenseGLPaymentEntry(expense);
-    const categoryEntries = expense.categories.map(getCategoryEntry);
-
-    return [paymentEntry, ...categoryEntries];
-  };
-
-  /**
-   * Retrieves the given expense ledger.
-   * @param   {IExpense} expense
-   * @returns {ILedger}
-   */
-  public getExpenseLedger = (expense: IExpense): ILedger => {
-    const entries = this.getExpenseGLEntries(expense);
-
-    return new Ledger(entries);
-  };
-}

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

@@ -0,0 +1,45 @@
+import { Knex } from 'knex';
+import { Inject, Service } from 'typedi';
+import { IExpense, ILedger } from '@/interfaces';
+import { ExpenseGL } from './ExpenseGL';
+import HasTenancyService from '../Tenancy/TenancyService';
+
+@Service()
+export class ExpenseGLEntries {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  /**
+   * Retrieves the expense G/L of the given id.
+   * @param {number} tenantId
+   * @param {number} expenseId
+   * @param {Knex.Transaction} trx
+   * @returns {Promise<ILedger>}
+   */
+  public getExpenseLedgerById = async (
+    tenantId: number,
+    expenseId: number,
+    trx?: Knex.Transaction
+  ): Promise<ILedger> => {
+    const { Expense } = await this.tenancy.models(tenantId);
+
+    const expense = await Expense.query(trx)
+      .findById(expenseId)
+      .withGraphFetched('categories')
+      .withGraphFetched('paymentAccount')
+      .throwIfNotFound();
+
+    return this.getExpenseLedger(expense);
+  };
+
+  /**
+   * Retrieves the given expense ledger.
+   * @param {IExpense} expense
+   * @returns {ILedger}
+   */
+  public getExpenseLedger = (expense: IExpense): ILedger => {
+    const expenseGL = new ExpenseGL(expense);
+
+    return expenseGL.getExpenseLedger();
+  };
+}

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

@@ -2,7 +2,7 @@ import { Knex } from 'knex';
 import { Service, Inject } from 'typedi';
 import LedgerStorageService from '@/services/Accounting/LedgerStorageService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { ExpenseGLEntries } from './ExpenseGLEntries';
+import { ExpenseGLEntries } from './ExpenseGLEntriesService';
 
 @Service()
 export class ExpenseGLEntriesStorage {
@@ -12,9 +12,6 @@ export class ExpenseGLEntriesStorage {
   @Inject()
   private ledgerStorage: LedgerStorageService;
 
-  @Inject()
-  private tenancy: HasTenancyService;
-
   /**
    * Writes the expense GL entries.
    * @param {number} tenantId
@@ -26,15 +23,12 @@ export class ExpenseGLEntriesStorage {
     expenseId: number,
     trx?: Knex.Transaction
   ) => {
-    const { Expense } = await this.tenancy.models(tenantId);
-
-    const expense = await Expense.query(trx)
-      .findById(expenseId)
-      .withGraphFetched('categories');
-
     // Retrieves the given expense ledger.
-    const expenseLedger = this.expenseGLEntries.getExpenseLedger(expense);
+    const expenseLedger = await this.expenseGLEntries.getExpenseLedgerById(
-
+      tenantId,
+      expenseId,
+      trx
+    );
     // Commits the expense ledger entries.
     await this.ledgerStorage.commit(tenantId, expenseLedger, trx);
   };

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

@@ -15,12 +15,16 @@ export class ExpensesExportable extends Exportable {
    * @returns
    */
   public exportable(tenantId: number, query: IExpensesFilter) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: EXPORT_SIZE_LIMIT,
+      filterQuery,
     } as IExpensesFilter;
 
     return this.expensesApplication

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

@@ -1,3 +1,5 @@
+import { ACCOUNT_TYPE } from '@/data/AccountTypes';
+
 export const DEFAULT_VIEW_COLUMNS = [];
 export const DEFAULT_VIEWS = [
   {
@@ -76,3 +78,12 @@ export const ExpensesSampleData = [
     Publish: 'T',
   },
 ];
+
+export const SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES = [
+  ACCOUNT_TYPE.CASH,
+  ACCOUNT_TYPE.BANK,
+  ACCOUNT_TYPE.CREDIT_CARD,
+  ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+  ACCOUNT_TYPE.NON_CURRENT_ASSET,
+  ACCOUNT_TYPE.FIXED_ASSET,
+];

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

@@ -56,7 +56,10 @@ export class ExportResourceService {
   ) {
     const resource = sanitizeResourceName(resourceName);
     const resourceMeta = this.getResourceMeta(tenantId, resource);
-
+    const resourceColumns = this.resourceService.getResourceColumns(
+      tenantId,
+      resource
+    );
     this.validateResourceMeta(resourceMeta);
 
     const data = await this.getExportableData(tenantId, resource);
@@ -64,7 +67,7 @@ export class ExportResourceService {
 
     // Returns the csv, xlsx format.
     if (format === ExportFormat.Csv || format === ExportFormat.Xlsx) {
-      const exportableColumns = this.getExportableColumns(resourceMeta);
+      const exportableColumns = this.getExportableColumns(resourceColumns);
       const workbook = this.createWorkbook(transformed, exportableColumns);
 
       return this.exportWorkbook(workbook, format);
@@ -143,7 +146,7 @@ export class ExportResourceService {
    * @param {IModelMeta} resourceMeta - The metadata of the resource.
    * @returns An array of exportable columns.
    */
-  private getExportableColumns(resourceMeta: IModelMeta) {
+  private getExportableColumns(resourceColumns: any) {
     const processColumns = (
       columns: { [key: string]: IModelMetaColumn },
       parent = ''
@@ -166,7 +169,7 @@ export class ExportResourceService {
           }
         });
     };
-    return processColumns(resourceMeta.columns);
+    return processColumns(resourceColumns);
   }
 
   private getPrintableColumns(resourceMeta: IModelMeta) {

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

@@ -33,6 +33,8 @@ export class ImportFileMapping {
     // Invalidate the from/to map attributes.
     this.validateMapsAttrs(tenantId, importFile, maps);
 
+    // @todo validate the required fields.
+
     // Validate the diplicated relations of map attrs.
     this.validateDuplicatedMapAttrs(maps);
 

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

@@ -16,6 +16,7 @@ export class BillPaymentExportable extends Exportable {
   public exportable(tenantId: number, query: any) {
     const filterQuery = (builder) => {
       builder.withGraphFetched('entries.bill');
+      builder.withGraphFetched('branch');
     };
     const parsedQuery = {
       sortOrder: 'desc',

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

@@ -1,8 +1,10 @@
 import { Inject, Service } from 'typedi';
+import { Knex } from 'knex';
 import { IBillsFilter } from '@/interfaces';
 import { Exportable } from '@/services/Export/Exportable';
 import { BillsApplication } from './BillsApplication';
 import { EXPORT_SIZE_LIMIT } from '@/services/Export/constants';
+import Objection from 'objection';
 
 @Service()
 export class BillsExportable extends Exportable {
@@ -15,12 +17,17 @@ export class BillsExportable extends Exportable {
    * @returns
    */
   public exportable(tenantId: number, query: IBillsFilter) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: EXPORT_SIZE_LIMIT,
+      filterQuery,
     } as IBillsFilter;
 
     return this.billsApplication

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

@@ -51,6 +51,9 @@ export class GetBills {
         builder.withGraphFetched('vendor');
         builder.withGraphFetched('entries.item');
         dynamicFilter.buildQuery()(builder);
+
+        // Filter query.
+        filterDTO?.filterQuery && filterDTO?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

packages/server/src/services/Purchases/VendorCredits/ListVendorCredits.ts

@@ -48,6 +48,10 @@ export default class ListVendorCredits extends BaseVendorCredit {
         builder.withGraphFetched('entries');
         builder.withGraphFetched('vendor');
         dynamicFilter.buildQuery()(builder);
+
+        // Gives ability to inject custom query to filter results.
+        vendorCreditQuery?.filterQuery &&
+          vendorCreditQuery?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

packages/server/src/services/Purchases/VendorCredits/VendorCreditsExportable.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { IVendorCreditsQueryDTO } from '@/interfaces';
 import ListVendorCredits from './ListVendorCredits';
 import { Exportable } from '@/services/Export/Exportable';
+import { QueryBuilder } from 'knex';
 
 @Service()
 export class VendorCreditsExportable extends Exportable {
@@ -15,12 +16,17 @@ export class VendorCreditsExportable extends Exportable {
    * @returns {}
    */
   public exportable(tenantId: number, query: IVendorCreditsQueryDTO) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: 12000,
+      filterQuery,
     } as IVendorCreditsQueryDTO;
 
     return this.getVendorCredits

packages/server/src/services/Resource/ResourceService.ts

@@ -1,11 +1,18 @@
 import { Service, Inject } from 'typedi';
-import { camelCase, upperFirst, pickBy } from 'lodash';
+import { camelCase, upperFirst, pickBy, isEmpty } from 'lodash';
 import * as qim from 'qim';
 import pluralize from 'pluralize';
-import { IModelMeta, IModelMetaField, IModelMetaField2 } from '@/interfaces';
+import {
+  Features,
+  IModelMeta,
+  IModelMetaField,
+  IModelMetaField2,
+} from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import { ServiceError } from '@/exceptions';
 import I18nService from '@/services/I18n/I18nService';
+import { WarehousesSettings } from '../Warehouses/WarehousesSettings';
+import { BranchesSettings } from '../Branches/BranchesSettings';
 
 const ERRORS = {
   RESOURCE_MODEL_NOT_FOUND: 'RESOURCE_MODEL_NOT_FOUND',
@@ -19,6 +26,12 @@ export default class ResourceService {
   @Inject()
   i18nService: I18nService;
 
+  @Inject()
+  private branchesSettings: BranchesSettings;
+
+  @Inject()
+  private warehousesSettings: WarehousesSettings;
+
   /**
    * Transform resource to model name.
    * @param {string} resourceName
@@ -74,13 +87,45 @@ export default class ResourceService {
     return meta.fields;
   }
 
+  public filterSupportFeatures = (
+    tenantId,
+    fields: { [key: string]: IModelMetaField2 }
+  ) => {
+    const isMultiFeaturesEnabled =
+      this.branchesSettings.isMultiBranchesActive(tenantId);
+    const isMultiWarehousesEnabled =
+      this.warehousesSettings.isMultiWarehousesActive(tenantId);
+
+    return pickBy(fields, (field) => {
+      if (
+        !isMultiWarehousesEnabled &&
+        field.features?.includes(Features.WAREHOUSES)
+      ) {
+        return false;
+      }
+      if (
+        !isMultiFeaturesEnabled &&
+        field.features?.includes(Features.BRANCHES)
+      ) {
+        return false;
+      }
+      return true;
+    });
+  };
+
   public getResourceFields2(
     tenantId: number,
     modelName: string
   ): { [key: string]: IModelMetaField2 } {
     const meta = this.getResourceMeta(tenantId, modelName);
 
-    return meta.fields2;
+    return this.filterSupportFeatures(tenantId, meta.fields2);
+  }
+
+  public getResourceColumns(tenantId: number, modelName: string) {
+    const meta = this.getResourceMeta(tenantId, modelName);
+
+    return this.filterSupportFeatures(tenantId, meta.columns);
   }
 
   /**

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

@@ -53,6 +53,7 @@ export class GetSaleEstimates {
         builder.withGraphFetched('entries');
         builder.withGraphFetched('entries.item'); 
         dynamicFilter.buildQuery()(builder);
+        filterDTO?.filterQuery && filterDTO?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

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

@@ -15,12 +15,17 @@ export class SaleEstimatesExportable extends Exportable {
    * @returns
    */
   public exportable(tenantId: number, query: ISalesInvoicesFilter) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: EXPORT_SIZE_LIMIT,
+      filterQuery,
     } as ISalesInvoicesFilter;
 
     return this.saleEstimatesApplication

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

@@ -52,6 +52,7 @@ export class GetSaleInvoices {
         builder.withGraphFetched('entries.item');
         builder.withGraphFetched('customer');
         dynamicFilter.buildQuery()(builder);
+        filterDTO?.filterQuery && filterDTO?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

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

@@ -15,12 +15,17 @@ export class SaleInvoicesExportable extends Exportable {
    * @returns
    */
   public exportable(tenantId: number, query: ISalesInvoicesFilter) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: EXPORT_SIZE_LIMIT,
+      filterQuery,
     } as ISalesInvoicesFilter;
 
     return this.saleInvoicesApplication

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

@@ -18,6 +18,7 @@ export class PaymentsReceivedExportable extends Exportable {
   public exportable(tenantId: number, query: IPaymentsReceivedFilter) {
     const filterQuery = (builder) => {
       builder.withGraphFetched('entries.invoice');
+      builder.withGraphFetched('branch');
     };
 
     const parsedQuery = {

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

@@ -56,6 +56,7 @@ export class GetSaleReceipts {
         builder.withGraphFetched('entries.item');
 
         dynamicFilter.buildQuery()(builder);
+        filterDTO?.filterQuery && filterDTO?.filterQuery(builder);
       })
       .pagination(filter.page - 1, filter.pageSize);
 

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

@@ -15,12 +15,17 @@ export class SaleReceiptsExportable extends Exportable {
    * @returns
    */
   public exportable(tenantId: number, query: ISalesReceiptsFilter) {
+    const filterQuery = (query) => {
+      query.withGraphFetched('branch');
+      query.withGraphFetched('warehouse');
+    };
     const parsedQuery = {
       sortOrder: 'desc',
       columnSortBy: 'created_at',
       ...query,
       page: 1,
       pageSize: EXPORT_SIZE_LIMIT,
+      filterQuery,
     } as ISalesReceiptsFilter;
 
     return this.saleReceiptsApp

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

@@ -9,7 +9,12 @@ import {
   Classes,
   Tooltip,
   Position,
+  MenuItem,
+  Menu,
+  MenuDivider,
 } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
 import { FormattedMessage as T, Icon, Hint, If } from '@/components';
 
 import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
@@ -19,9 +24,20 @@ import DashboardBackLink from '@/components/Dashboard/DashboardBackLink';
 import withUniversalSearchActions from '@/containers/UniversalSearch/withUniversalSearchActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withDashboard from '@/containers/Dashboard/withDashboard';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import QuickNewDropdown from '@/containers/QuickNewDropdown/QuickNewDropdown';
-import { DashboardHamburgerButton, DashboardQuickSearchButton } from './_components';
+import {
+  DashboardHamburgerButton,
+  DashboardQuickSearchButton,
+} from './_components';
+
+import { DialogsName } from '@/constants/dialogs';
+import {
+  COMMUNITY_BIGCAPITAL_LINK,
+  DOCS_BIGCAPITAL_LINK,
+} from '@/constants/routes';
+
 import { compose } from '@/utils';
 
 /**
@@ -41,6 +57,9 @@ function DashboardTopbar({
 
   // #withGlobalSearch
   openGlobalSearch,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -112,11 +131,34 @@ function DashboardTopbar({
               />
             </Tooltip>
 
-            <Button
+            <Popover2
-              className={Classes.MINIMAL}
+              content={
-              icon={<Icon icon={'help-24'} iconSize={20} />}
+                <Menu>
-              text={<T id={'help'} />}
+                  <MenuItem
-            />
+                    text={'Documents'}
+                    onClick={() => window.open(DOCS_BIGCAPITAL_LINK)}
+                    labelElement={<Icon icon={'share'} iconSize={16} />}
+                  />
+                  <MenuItem
+                    text={'Community support'}
+                    onClick={() => window.open(COMMUNITY_BIGCAPITAL_LINK)}
+                    labelElement={<Icon icon={'share'} iconSize={16} />}
+                  />
+                  <MenuItem
+                    text={'Keyboard shortcuts'}
+                    onClick={() => openDialog(DialogsName.KeyboardShortcutForm)}
+                  />
+                  <MenuDivider />
+                  <MenuItem text={'Share feedback'} />
+                </Menu>
+              }
+            >
+              <Button
+                className={Classes.MINIMAL}
+                icon={<Icon icon={'help-24'} iconSize={20} />}
+                text={<T id={'help'} />}
+              />
+            </Popover2>
             <NavbarDivider />
           </NavbarGroup>
         </Navbar>
@@ -138,4 +180,5 @@ export default compose(
     pageHint,
   })),
   withDashboardActions,
+  withDialogActions,
 )(DashboardTopbar);

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

@@ -1,13 +1,14 @@
 // @ts-nocheck
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { camelCase} from 'lodash';
+import { camelCase } from 'lodash';
 
 import { If, Skeleton } from '@/components';
 import { useAppIntlContext } from '@/components/AppIntlProvider';
 import TableContext from './TableContext';
 import { saveInvoke, ignoreEventFromSelectors } from '@/utils';
 import { isCellLoading } from './utils';
+import { MoneyDisplay } from '../Money/MoneyDisplay';
 
 const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox'];
 
@@ -58,7 +59,7 @@ export default function TableCell({ cell, row, index }) {
       return;
     }
     saveInvoke(onCellClick, cell, event);
-  };  
+  };
   const cellType = camelCase(cell.column.Cell.cellType) || 'text';
 
   return (
@@ -109,7 +110,11 @@ export default function TableCell({ cell, row, index }) {
           </span>
         </If>
 
-        {cell.render('Cell')}
+        {cell.column?.money ? (
+          <MoneyDisplay>{cell.render('Cell')}</MoneyDisplay>
+        ) : (
+          <>{cell.render('Cell')}</>
+        )}
       </div>
     </div>
   );

packages/webapp/src/components/Money/MoneyDisplay.module.scss

@@ -0,0 +1,4 @@
+
+.root {
+  font-variant-numeric: tabular-nums;
+}

packages/webapp/src/components/Money/MoneyDisplay.tsx

@@ -0,0 +1,9 @@
+import styles from './MoneyDisplay.module.scss';
+
+interface MoneyDisplayProps {
+  children: React.ReactNode;
+}
+
+export function MoneyDisplay({ children }: MoneyDisplayProps) {
+  return <span className={styles.root}>{children}</span>;
+}

packages/webapp/src/constants/routes.ts

@@ -0,0 +1,2 @@
+export const DOCS_BIGCAPITAL_LINK = 'https://docs.bigcapital.app';
+export const COMMUNITY_BIGCAPITAL_LINK = 'https://community.bigcapital.app';

packages/webapp/src/containers/Accounting/JournalsLanding/utils.tsx

@@ -27,6 +27,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'formatted_amount',
         width: 115,
         clickable: true,
+        money: true,
         align: 'right',
         className: clsx(CLASSES.FONT_BOLD),
       },

packages/webapp/src/containers/Accounts/utils.tsx

@@ -1,7 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent, Tag, Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
 
 import { If, AppToaster } from '@/components';
 import { NormalCell, BalanceCell, BankBalanceCell } from './components';
@@ -73,7 +74,7 @@ export const useAccountsTableColumns = () => {
         id: 'type',
         Header: intl.get('type'),
         accessor: 'account_type_label',
-        className: 'type',
+        className: clsx('type', Classes.TEXT_MUTED),
         width: 140,
         clickable: true,
         textOverview: true,
@@ -91,6 +92,7 @@ export const useAccountsTableColumns = () => {
         id: 'currency',
         Header: intl.get('currency'),
         accessor: 'currency_code',
+        className: clsx(Classes.TEXT_MUTED),
         width: 75,
         clickable: true,
       },
@@ -102,6 +104,7 @@ export const useAccountsTableColumns = () => {
         width: 150,
         clickable: true,
         align: 'right',
+        money: true,
       },
       {
         id: 'balance',
@@ -110,6 +113,7 @@ export const useAccountsTableColumns = () => {
         Cell: BalanceCell,
         width: 150,
         clickable: true,
+        money: true,
         align: 'right',
       },
     ],

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx

@@ -34,21 +34,23 @@ import {
 } from '@/constants/cashflowOptions';
 import { useRefreshCashflowTransactions } from '@/hooks/query';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
-
+import { withBankingActions } from '../withBankingActions';
-import { compose } from '@/utils';
+import { withBanking } from '../withBanking';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 import {
   useUpdateBankAccount,
   useExcludeUncategorizedTransactions,
   useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
-import { withBankingActions } from '../withBankingActions';
+
-import { withBanking } from '../withBanking';
-import withAlertActions from '@/containers/Alert/withAlertActions';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions
@@ -221,6 +223,13 @@ function AccountTransactionsActionsBar({
     });
   };
 
+  const { hideAside } = useAppShellContext();
+  const isMin1350Query = useMediaQuery('(min-width: 1350px)');
+
+  // Shrink actions to dropdown if the aside is open and matched the media query,
+  // To avoid actions overflow in small screens.
+  const shrinkActions = !hideAside && !isMin1350Query;
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -241,23 +250,27 @@ function AccountTransactionsActionsBar({
           }}
         />
         <NavbarDivider />
-        <Button
+
-          className={Classes.MINIMAL}
+        <If condition={!shrinkActions}>
-          icon={<Icon icon="print-16" iconSize={16} />}
+          <Button
-          text={<T id={'print'} />}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon="print-16" iconSize={16} />}
-        <Button
+            text={<T id={'print'} />}
-          className={Classes.MINIMAL}
+          />
-          icon={<Icon icon="file-export-16" iconSize={16} />}
+          <Button
-          text={<T id={'export'} />}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon="file-export-16" iconSize={16} />}
-        <Button
+            text={<T id={'export'} />}
-          className={Classes.MINIMAL}
+          />
-          icon={<Icon icon="file-import-16" iconSize={16} />}
+          <Button
-          text={<T id={'import'} />}
+            className={Classes.MINIMAL}
-          onClick={handleImportBtnClick}
+            icon={<Icon icon="file-import-16" iconSize={16} />}
-        />
+            text={<T id={'import'} />}
-        <NavbarDivider />
+            onClick={handleImportBtnClick}
+          />
+          <NavbarDivider />
+        </If>
+
         <DashboardRowsHeightButton
           initialValue={cashflowTansactionsTableSize}
           onChange={handleTableRowSizeChange}
@@ -290,6 +303,40 @@ function AccountTransactionsActionsBar({
           </Tooltip>
         </If>
 
+        <If condition={shrinkActions}>
+          <NavbarDivider />
+          <Popover
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+            modifiers={{
+              offset: { offset: '0, 4' },
+            }}
+            content={
+              <Menu>
+                <MenuItem
+                  icon={<Icon icon="print-16" iconSize={16} />}
+                  text={<T id={'print'} />}
+                />
+                <MenuItem
+                  icon={<Icon icon="file-export-16" iconSize={16} />}
+                  text={<T id={'export'} />}
+                />
+                <MenuItem
+                  icon={<Icon icon="file-import-16" iconSize={16} />}
+                  text={<T id={'import'} />}
+                  onClick={handleImportBtnClick}
+                />
+              </Menu>
+            }
+          >
+            <Button
+              icon={<Icon icon="more-h-16" iconSize={16} />}
+              minimal={true}
+            />
+          </Popover>
+        </If>
+
         {!isEmpty(uncategorizedTransationsIdsSelected) && (
           <Button
             icon={<Icon icon="disable" iconSize={16} />}
@@ -368,7 +415,6 @@ function AccountTransactionsActionsBar({
               </If>
 
               <MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
-
               <MenuDivider />
               <If condition={isSyncingOwner && isFeedsActive}>
                 <MenuItem

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { Suspense, lazy } from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { AppContentShell } from '@/components/AppShell';
+
+const CategorizeTransactionAside = lazy(() =>
+  import('../CategorizeTransactionAside/CategorizeTransactionAside').then(
+    (module) => ({ default: module.CategorizeTransactionAside }),
+  ),
+);
+
+export function AccountTransactionsAside() {
+  return (
+    <AppContentShell.Aside>
+      <Suspense fallback={<Spinner size={20} />}>
+        <CategorizeTransactionAside />
+      </Suspense>
+    </AppContentShell.Aside>
+  );
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx

@@ -22,6 +22,7 @@ import { withBankingActions } from '../withBankingActions';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsAllContext } from './AccountTransactionsAllBoot';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { useUnmatchMatchedUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { useUncategorizeTransaction } from '@/hooks/query';
 import { handleCashFlowTransactionType } from './utils';
@@ -62,6 +63,8 @@ function AccountTransactionsDataTable({
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
 
+  const { scrollableRef } = useAccountTransactionsContext();
+
   // Handle view details action.
   const handleViewDetailCashflowTransaction = (referenceType) => {
     handleCashFlowTransactionType(referenceType, openDrawer);
@@ -132,7 +135,7 @@ function AccountTransactionsDataTable({
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
-      vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
+      vListrowHeight={32}
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
@@ -140,6 +143,7 @@ function AccountTransactionsDataTable({
       onSelectedRowsChange={handleSelectedRowsChange}
       noResults={<T id={'cash_flow.account_transactions.no_results'} />}
       className="table-constrant"
+      windowScrollerProps={{ scrollElement: scrollableRef }}
       payload={{
         onViewDetails: handleViewDetailCashflowTransaction,
         onUncategorize: handleUncategorizeTransaction,

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { curry } from 'lodash/fp';
+import { useHistory } from 'react-router-dom';
 import {
   Popover,
   Menu,
@@ -11,10 +13,9 @@ import {
   Classes,
 } from '@blueprintjs/core';
 import { Icon } from '@/components';
-import { useHistory } from 'react-router-dom';
-import { curry } from 'lodash/fp';
 
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -22,7 +23,7 @@ function AccountSwitchButton() {
   return (
     <AccountSwitchButtonBase
       minimal={true}
-      rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
+      rightIcon={<Icon icon={'caret-down-16'} iconSize={16} />}
     >
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
@@ -110,12 +111,16 @@ function AccountTransactionsDetailsBarSkeleton() {
 }
 
 function AccountTransactionsDetailsContent() {
+  const { hideAside } = useAppShellContext();
+
   return (
     <React.Fragment>
       <AccountSwitchItem />
-      <AccountNumberItem />
+
+      {/** Hide some details once the aside opens to preserve space on details bar. */}
+      {hideAside && <AccountNumberItem />}
       <AccountBalanceItem />
-      <AccountBankBalanceItem />
+      {hideAside && <AccountBankBalanceItem />}
     </React.Fragment>
   );
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { Suspense } from 'react';
 import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
+import { Suspense, lazy } from 'react';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
@@ -15,7 +15,7 @@ import {
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppContentShell } from '@/components/AppShell';
-import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { AccountTransactionsAside } from './AccountTransactionsAside';
 import { AccountTransactionsLoadingBar } from './components';
 import { withBanking } from '../withBanking';
 
@@ -56,14 +56,6 @@ function AccountTransactionsMain() {
   );
 }
 
-function AccountTransactionsAside() {
-  return (
-    <AppContentShell.Aside>
-      <CategorizeTransactionAside />
-    </AppContentShell.Aside>
-  );
-}
-
 export default R.compose(
   withBanking(
     ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
@@ -73,11 +65,8 @@ export default R.compose(
   ),
 )(AccountTransactionsListRoot);
 
-const AccountsTransactionsAll = React.lazy(
+const AccountsTransactionsAll = lazy(() => import('./AccountsTransactionsAll'));
-  () => import('./AccountsTransactionsAll'),
+const AccountsTransactionsUncategorized = lazy(
-);
-
-const AccountsTransactionsUncategorized = React.lazy(
   () => import('./AllTransactionsUncategorized'),
 );
 

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx

@@ -1,10 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 import * as R from 'ramda';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
@@ -17,9 +15,10 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useExcludedTransactionsColumns } from './_utils';
 import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
+import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 
 import { ActionsMenu } from './_components';
-import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 import {
   WithBankingActionsProps,
   withBankingActions,
@@ -78,7 +77,7 @@ function ExcludedTransactionsTableRoot({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={excludedBankTransactions}
@@ -116,42 +115,3 @@ function ExcludedTransactionsTableRoot({
 export const ExcludedTransactionsTable = R.compose(withBankingActions)(
   ExcludedTransactionsTableRoot,
 );
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 13px;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td {
-        border-bottom: 1px solid #e6e6e6;
-      }
-    }
-  }
-`;

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx

@@ -54,12 +54,14 @@ export function useExcludedTransactionsColumns() {
         accessor: 'formatted_deposit_amount',
         align: 'right',
         width: depositWidth,
+        money: true
       },
       {
         Header: 'Withdrawal',
         accessor: 'formatted_withdrawal_amount',
         align: 'right',
         width: withdrawalWidth,
+        money: true
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx

@@ -1,9 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import clsx from 'classnames';
-import styled from 'styled-components';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
@@ -16,6 +13,7 @@ import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 import { usePendingTransactionsContext } from './PendingTransactionsTableBoot';
 import { usePendingTransactionsTableColumns } from './_hooks';
 
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 import { compose } from '@/utils';
 
 /**
@@ -37,7 +35,7 @@ function PendingTransactionsDataTableRoot({
   } = usePendingTransactionsContext();
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={pendingTransactions || []}
@@ -54,7 +52,6 @@ function PendingTransactionsDataTableRoot({
       vListOverscanRowCount={0}
       noResults={'There is no pending transactions in the current account.'}
       windowScrollerProps={{ scrollElement: scrollableRef }}
-      className={clsx('table-constrant')}
     />
   );
 }
@@ -65,47 +62,3 @@ export const PendingTransactionsDataTable = compose(
   })),
   withBankingActions,
 )(PendingTransactionsDataTableRoot);
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 13px;i
-        font-weight: 500;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
-      }
-
-      .td-description {
-        color: #5f6b7c;
-      }
-    }
-  }
-`;

packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx

@@ -48,6 +48,7 @@ export function usePendingTransactionsTableColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
       {
         id: 'withdrawal',
@@ -58,6 +59,7 @@ export function usePendingTransactionsTableColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx

@@ -27,6 +27,7 @@ import {
   withBankingActions,
 } from '../../withBankingActions';
 import styles from './RecognizedTransactionsTable.module.scss';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 
 interface RecognizedTransactionsTableProps extends WithBankingActionsProps {}
 
@@ -83,7 +84,7 @@ function RecognizedTransactionsTableRoot({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={recognizedTransactions}
@@ -100,14 +101,12 @@ function RecognizedTransactionsTableRoot({
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
-      vListrowHeight={'small' == 'small' ? 32 : 40}
       vListrowHeight={40}
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
       windowScrollerProps={{ scrollElement: scrollableRef }}
       noResults={<RecognizedTransactionsTableNoResults />}
-      className="table-constrant"
       payload={{
         onExclude: handleExcludeClick,
         onCategorize: handleCategorizeClick,
@@ -120,45 +119,6 @@ export const RecognizedTransactionsTable = compose(withBankingActions)(
   RecognizedTransactionsTableRoot,
 );
 
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        font-size: 13px;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td {
-        border-bottom: 1px solid #e6e6e6;
-      }
-    }
-  }
-`;
-
 function RecognizedTransactionsTableNoResults() {
   return (
     <Stack spacing={12} className={styles.emptyState}>

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx

@@ -1,7 +1,9 @@
 // @ts-nocheck
+import React from 'react';
+import clsx from 'classnames';
+import { Classes } from '@blueprintjs/core';
 import { Group, Icon } from '@/components';
 import { getColumnWidth } from '@/utils';
-import React from 'react';
 import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot';
 
 const getReportColWidth = (data, accessor, headerText) => {
@@ -28,10 +30,6 @@ const recognizeAccessor = (transaction) => {
   );
 };
 
-const descriptionAccessor = (transaction) => {
-  return <span style={{ color: '#5F6B7C' }}>{transaction.description}</span>;
-};
-
 /**
  * Retrieve uncategorized transactions columns table.
  */
@@ -59,7 +57,8 @@ export function useUncategorizedTransactionsColumns() {
       },
       {
         Header: 'Description',
-        accessor: descriptionAccessor,
+        accessor: 'description',
+        className: clsx(Classes.TEXT_MUTED),        
         textOverview: true,
       },
       {
@@ -82,12 +81,14 @@ export function useUncategorizedTransactionsColumns() {
         accessor: 'formatted_deposit_amount',
         align: 'right',
         width: depositWidth,
+        money: true
       },
       {
         Header: 'Withdrawal',
         accessor: 'formatted_withdrawal_amount',
         align: 'right',
         width: withdrawalWidth,
+        money: true
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React from 'react';
 import clsx from 'classnames';
-import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 import {
-  DataTable,
   TableFastCell,
   TableSkeletonRows,
   TableSkeletonHeader,
   TableVirtualizedListRows,
-  FormattedMessage as T,
   AppToaster,
 } from '@/components';
 import { TABLES } from '@/constants/tables';
 import { ActionsMenu } from './components';
+import { BankAccountDataTable } from '../components/BankAccountDataTable';
 
 import withSettings from '@/containers/Settings/withSettings';
 import { withBankingActions } from '../../withBankingActions';
+import { withBanking } from '../../withBanking';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountUncategorizedTransactionsContext } from '../AllTransactionsUncategorizedBoot';
@@ -25,7 +24,6 @@ import { useAccountUncategorizedTransactionsColumns } from './hooks';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 
 import { compose } from '@/utils';
-import { withBanking } from '../../withBanking';
 import styles from './AccountTransactionsUncategorizedTable.module.scss';
 
 /**
@@ -48,7 +46,6 @@ function AccountTransactionsDataTable({
 }) {
   // Retrieve table columns.
   const columns = useAccountUncategorizedTransactionsColumns();
-
   const { scrollableRef } = useAccountTransactionsContext();
 
   // Retrieve list context.
@@ -100,7 +97,7 @@ function AccountTransactionsDataTable({
   };
 
   return (
-    <CashflowTransactionsTable
+    <BankAccountDataTable
       noInitialFetch={true}
       columns={columns}
       data={uncategorizedTransactions || []}
@@ -119,7 +116,7 @@ function AccountTransactionsDataTable({
       ContextMenu={ActionsMenu}
       onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
-      vListrowHeight={cashflowTansactionsTableSize === 'small' ? 32 : 40}
+      vListrowHeight={cashflowTansactionsTableSize === 'small' ? 34 : 40}
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
@@ -132,7 +129,7 @@ function AccountTransactionsDataTable({
       }}
       onSelectedRowsChange={handleSelectedRowsChange}
       windowScrollerProps={{ scrollElement: scrollableRef }}
-      className={clsx('table-constrant', styles.table, {
+      className={clsx(styles.table, {
         [styles.showCategorizeColumn]: enableMultipleCategorization,
       })}
     />
@@ -151,47 +148,3 @@ export default compose(
     }),
   ),
 )(AccountTransactionsDataTable);
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 13px;i
-        font-weight: 500;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const CashflowTransactionsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
-      }
-
-      .td-description {
-        color: #5f6b7c;
-      }
-    }
-  }
-`;

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx

@@ -1,8 +1,10 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import {
   Checkbox,
+  Classes,
   Intent,
   PopoverInteractionKind,
   Position,
@@ -97,6 +99,7 @@ export function useAccountUncategorizedTransactionsColumns() {
         width: 160,
         textOverview: true,
         clickable: true,
+        className: clsx(Classes.TEXT_MUTED),
       },
       {
         id: 'payee',
@@ -123,21 +126,21 @@ export function useAccountUncategorizedTransactionsColumns() {
         id: 'deposit',
         Header: intl.get('banking.label.deposit'),
         accessor: 'formatted_deposit_amount',
-        width: 40,
-        className: 'deposit',
-        textOverview: true,
         align: 'right',
+        width: 40,
+        textOverview: true,
         clickable: true,
+        money: true
       },
       {
         id: 'withdrawal',
         Header: intl.get('banking.label.withdrawal'),
         accessor: 'formatted_withdrawal_amount',
-        className: 'withdrawal',
         width: 40,
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true
       },
       {
         id: 'categorize_include',

packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx

@@ -123,6 +123,7 @@ export function useAccountTransactionsColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true,
       },
       {
         id: 'withdrawal',
@@ -133,16 +134,18 @@ export function useAccountTransactionsColumns() {
         textOverview: true,
         align: 'right',
         clickable: true,
+        money: true,
       },
       {
         id: 'running_balance',
         Header: intl.get('banking.label.running_balance'),
         accessor: 'formatted_running_balance',
         className: 'running_balance',
+        align: 'right',
         width: 150,
         textOverview: true,
-        align: 'right',
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss

@@ -0,0 +1,29 @@
+.root {
+  :global .table{    
+    .thead {
+      .th {
+        background: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 2rem 0;
+        font-size: 14px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+
+    .tbody-inner {
+      .tr .td{
+        border-bottom: 1px solid #ececec;
+      }
+    }
+  }
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.tsx

@@ -0,0 +1,19 @@
+import clsx from 'classnames';
+import { DataTable } from '@/components';
+import styles from './BankAccountDataTable.module.scss';
+
+interface BankAccountDataTableProps {
+  className?: string;
+}
+
+export function BankAccountDataTable({
+  className,
+  ...props
+}: BankAccountDataTableProps) {
+  return (
+    <DataTable
+      {...props}
+      className={clsx('table-constrant', styles.root, className)}
+    />
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx

@@ -1,6 +1,8 @@
 // @ts-nocheck
+import { Suspense } from 'react';
 import styled from 'styled-components';
 import * as R from 'ramda';
+import { Spinner } from '@blueprintjs/core';
 import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import { CategorizeTransactionForm } from './CategorizeTransactionForm';
 import { withBanking } from '@/containers/CashFlow/withBanking';
@@ -13,7 +15,9 @@ function CategorizeTransactionContentRoot({
       uncategorizedTransactionsIds={transactionsToCategorizeIdsSelected}
     >
       <CategorizeTransactionDrawerBody>
-        <CategorizeTransactionForm />
+        <Suspense fallback={<Spinner size={40} />}>
+          <CategorizeTransactionForm />
+        </Suspense>
       </CategorizeTransactionDrawerBody>
     </CategorizeTransactionBoot>
   );

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx

@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 import { defaultTo } from 'lodash';
 import * as R from 'ramda';
 import { useGetBankTransactionsMatches } from '@/hooks/query/bank-rules';
+import { Spinner } from '@blueprintjs/core';
 
 interface MatchingTransactionBootValues {
   isMatchingTransactionsLoading: boolean;
@@ -52,6 +53,11 @@ function MatchingTransactionBoot({
     matches,
   } as MatchingTransactionBootValues;
 
+  const isLoading = isMatchingTransactionsLoading;
+
+  if (isLoading) {
+    return <Spinner size={40} />;
+  }
   return <RuleFormBootContext.Provider value={provider} {...props} />;
 }
 

packages/webapp/src/containers/Customers/CustomersLanding/components.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import {
   Menu,
   MenuItem,
@@ -14,6 +15,7 @@ import {
 import { Can, Icon, Money, If, AvatarCell } from '@/components';
 import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants';
 
 /**
  * Actions menu.
@@ -140,7 +142,7 @@ export function useCustomersTableColumns() {
         id: 'company_name',
         Header: intl.get('company_name'),
         accessor: 'company_name',
-        className: 'company_name',
+        className: clsx('company_name', CLASSES.TEXT_MUTED),
         width: 150,
         clickable: true,
       },
@@ -148,9 +150,9 @@ export function useCustomersTableColumns() {
         id: 'work_phone',
         Header: intl.get('phone_number'),
         accessor: PhoneNumberAccessor,
-        className: 'phone_number',
         width: 100,
         clickable: true,
+        className: clsx('phone_number', CLASSES.TEXT_MUTED)
       },
       {
         id: 'note',
@@ -159,6 +161,7 @@ export function useCustomersTableColumns() {
         disableSortBy: true,
         width: 85,
         clickable: true,
+        className: clsx(CLASSES.TEXT_MUTED)
       },
       {
         id: 'balance',
@@ -167,6 +170,7 @@ export function useCustomersTableColumns() {
         align: 'right',
         width: 100,
         clickable: true,
+        money: true,
       },
     ],
     [],

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx

@@ -1,9 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { CustomersSelect, FormattedMessage as T } from '@/components';
+import { CustomersSelect, FInputGroup, FormattedMessage as T } from '@/components';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -15,15 +15,14 @@ import {
 import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
   CurrencySelectList,
-  CustomerSelectField,
   FFormGroup,
   AccountsSelect,
   FieldRequiredHint,
   Hint,
 } from '@/components';
 import { ExpensesExchangeRateInputField } from './components';
-import { ACCOUNT_PARENT_TYPE } from '@/constants/accountTypes';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
+import { SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES } from './constants';
 
 /**
  * Expense form header.
@@ -68,7 +67,7 @@ export default function ExpenseFormHeader() {
           name={'payment_account_id'}
           items={accounts}
           placeholder={<T id={'select_payment_account'} />}
-          filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+          filterByTypes={SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES}
           allowCreate={true}
           fastField={true}
           shouldUpdate={accountsFieldShouldUpdate}
@@ -107,19 +106,15 @@ export default function ExpenseFormHeader() {
         formGroupProps={{ label: ' ', inline: true }}
       />
 
-      <FastField name={'reference_no'}>
+      {/* ----------- Reference No. ----------- */}
-        {({ form, field, meta: { error, touched } }) => (
+      <FFormGroup
-          <FormGroup
+        name={'reference_no'}
-            label={<T id={'reference_no'} />}
+        label={<T id={'reference_no'} />}
-            className={classNames('form-group--ref_no', Classes.FILL)}
+        inline={true}
-            intent={inputIntent({ error, touched })}
+        fastField
-            helperText={<ErrorMessage name="reference_no" />}
+      >
-            inline={true}
+        <FInputGroup minimal={true} name={'reference_no'} fastField />
-          >
+      </FFormGroup>
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/* ----------- Customer ----------- */}
       <ExpenseFormCustomerSelect />

packages/webapp/src/containers/Expenses/ExpenseForm/constants.ts

@@ -0,0 +1,10 @@
+import { ACCOUNT_TYPE } from "@/constants";
+
+export const SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES = [
+  ACCOUNT_TYPE.CASH,
+  ACCOUNT_TYPE.BANK,
+  ACCOUNT_TYPE.CREDIT_CARD,
+  ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+  ACCOUNT_TYPE.NON_CURRENT_ASSET,
+  ACCOUNT_TYPE.FIXED_ASSET,
+];

packages/webapp/src/containers/Expenses/ExpensesLanding/components.tsx

@@ -140,26 +140,25 @@ export function useExpensesTableColumns() {
         id: 'amount',
         Header: intl.get('full_amount'),
         accessor: 'formatted_amount',
-        className: 'amount',
         align: 'right',
         width: 150,
         clickable: true,
+        money: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'payment_account',
         Header: intl.get('payment_account'),
         accessor: 'payment_account.name',
-        className: 'payment_account',
         width: 150,
         clickable: true,
+        className: clsx(CLASSES.TEXT_MUTED),
       },
       {
         id: 'expense_account',
         Header: intl.get('expense_account'),
         accessor: ExpenseAccountAccessor,
         width: 160,
-        className: 'expense_account',
         disableSortBy: true,
         clickable: true,
       },

packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
 import * as R from 'ramda';
 import { getColumnWidth } from '@/utils';
 import { Align } from '@/constants';
@@ -25,6 +24,7 @@ const currentAccessor = R.curry((data, column) => {
     className: column.id,
     width: getColumnWidth(data, accessor, { minWidth: 120 }),
     align: Align.Right,
+    money: true,
   };
 });
 
@@ -38,6 +38,7 @@ const totalAccessor = R.curry((data, column) => {
     className: column.key,
     width: getColumnWidth(data, accessor, { minWidth: 120 }),
     align: Align.Right,
+    money: true,
   };
 });
 
@@ -51,6 +52,7 @@ const agingPeriodAccessor = R.curry((data, column) => {
     className: column.key,
     width: getColumnWidth(data, accessor, { minWidth: 120 }),
     align: Align.Right,
+    money: true,
   };
 });
 

packages/webapp/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.tsx

@@ -3,7 +3,6 @@ import * as R from 'ramda';
 import { isEmpty } from 'lodash';
 
 import { Align } from '@/constants';
-import { CellTextSpan } from '@/components/Datatable/Cells';
 import { getColumnWidth } from '@/utils';
 
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
@@ -12,12 +11,11 @@ const getReportColWidth = (data, accessor, headerText) => {
   return getColumnWidth(
     data,
     accessor,
-    { magicSpacing: 10, minWidth: 100 },
+    { magicSpacing: 12, minWidth: 100 },
     headerText,
   );
 };
 
-
 /**
  * Account name column mapper.
  */
@@ -77,6 +75,7 @@ const dateRangeMapper = R.curry((data, column) => {
     key: column.key,
     disableSortBy: true,
     textOverview: true,
+    money: true,
     align: isDateColumnHasColumns ? Align.Center : Align.Right,
   };
   return R.compose(
@@ -104,9 +103,9 @@ const totalMapper = R.curry((data, column) => {
     Header: column.label,
     accessor,
     textOverview: true,
-    Cell: CellTextSpan,
     width,
     disableSortBy: true,
+    money: true,
     align: hasChildren ? Align.Center : Align.Right,
   };
   return R.compose(
@@ -129,6 +128,7 @@ const percentageOfColumnAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -147,6 +147,7 @@ const percentageOfRowAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -165,6 +166,7 @@ const previousYearAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -183,6 +185,7 @@ const previousYearChangeAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -201,6 +204,7 @@ const previousYearPercentageAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -219,6 +223,7 @@ const previousPeriodAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -237,6 +242,7 @@ const previousPeriodChangeAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 
@@ -255,6 +261,7 @@ const previousPeriodPercentageAccessor = R.curry((data, column) => {
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
+    money: true,
   };
 });
 

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.tsx

@@ -30,13 +30,14 @@ const dateRangeMapper = (data, index, column) => ({
   key: column.key,
   accessor: `cells[${index}].value`,
   width: getColumnWidth(data, `cells.${index}.value`, {
-    magicSpacing: 10,
+    magicSpacing: 12,
     minWidth: 100,
   }),
   className: `date-period ${column.key}`,
   disableSortBy: true,
   textOverview: true,
   align: Align.Right,
+  money: true
 });
 
 /**
@@ -50,11 +51,12 @@ const totalMapper = (data, index, column) => ({
   textOverview: true,
   Cell: CellTextSpan,
   width: getColumnWidth(data, `cells[${index}].value`, {
-    magicSpacing: 10,
+    magicSpacing: 12,
     minWidth: 100,
   }),
   disableSortBy: true,
   align: Align.Right,
+  money: true
 });
 
 /**

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/components.tsx

@@ -61,9 +61,10 @@ export const useCustomersTransactionsColumns = () => {
         textOverview: true,
         width: getColumnWidth(tableRows, 'cells[5].value', {
           minWidth: 100,
-          magicSpacing: 10,
+          magicSpacing: 12,
         }),
         align: Align.Right,
+        money: true,
       },
       {
         Header: intl.get('debit'),
@@ -72,9 +73,10 @@ export const useCustomersTransactionsColumns = () => {
         textOverview: true,
         width: getColumnWidth(tableRows, 'cells[6].value', {
           minWidth: 100,
-          magicSpacing: 10,
+          magicSpacing: 12,
         }),
         align: Align.Right,
+        money: true,
       },
       {
         Header: intl.get('running_balance'),
@@ -83,9 +85,10 @@ export const useCustomersTransactionsColumns = () => {
         textOverview: true,
         width: getColumnWidth(tableRows, 'cells[7].value', {
           minWidth: 120,
-          magicSpacing: 10,
+          magicSpacing: 12,
         }),
         align: Align.Right,
+        money: true,
       },
     ],
     [tableRows],