feat: remove uncategorized transaction from expenses

feat(webapp): Dialog to choose the bank service provider

packages/server/src/api/controllers/Cashflow/CashflowController.ts

@@ -13,9 +13,9 @@ export default class CashflowController {
   router() {
     const router = Router();
 
+    router.use(Container.get(CommandCashflowTransaction).router());
     router.use(Container.get(GetCashflowTransaction).router());
     router.use(Container.get(GetCashflowAccounts).router());
-    router.use(Container.get(CommandCashflowTransaction).router());
     router.use(Container.get(DeleteCashflowTransaction).router());
 
     return router;

packages/server/src/api/controllers/Cashflow/DeleteCashflowTransaction.ts

@@ -3,14 +3,15 @@ import { Router, Request, Response, NextFunction } from 'express';
 import { param } from 'express-validator';
 import BaseController from '../BaseController';
 import { ServiceError } from '@/exceptions';
-import DeleteCashflowTransactionService from '../../../services/Cashflow/DeleteCashflowTransactionService';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
+
 import { AbilitySubject, CashflowAction } from '@/interfaces';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
 
 @Service()
-export default class DeleteCashflowTransaction extends BaseController {
+export default class DeleteCashflowTransactionController extends BaseController {
   @Inject()
-  deleteCashflowService: DeleteCashflowTransactionService;
+  private cashflowApplication: CashflowApplication;
 
   /**
    * Controller router.
@@ -44,7 +45,7 @@ export default class DeleteCashflowTransaction extends BaseController {
 
     try {
       const { oldCashflowTransaction } =
-        await this.deleteCashflowService.deleteCashflowTransaction(
+        await this.cashflowApplication.deleteTransaction(
           tenantId,
           transactionId
         );

packages/server/src/api/controllers/Cashflow/GetCashflowAccounts.ts

@@ -1,20 +1,16 @@
 import { Service, Inject } from 'typedi';
 import { Router, Request, Response, NextFunction } from 'express';
-import { param, query } from 'express-validator';
-import GetCashflowAccountsService from '@/services/Cashflow/GetCashflowAccountsService';
+import { query } from 'express-validator';
 import BaseController from '../BaseController';
-import GetCashflowTransactionsService from '@/services/Cashflow/GetCashflowTransactionsService';
 import { ServiceError } from '@/exceptions';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
 import { AbilitySubject, CashflowAction } from '@/interfaces';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
 
 @Service()
 export default class GetCashflowAccounts extends BaseController {
   @Inject()
-  getCashflowAccountsService: GetCashflowAccountsService;
-
-  @Inject()
-  getCashflowTransactionsService: GetCashflowTransactionsService;
+  private cashflowApplication: CashflowApplication;
 
   /**
    * Controller router.
@@ -62,10 +58,7 @@ export default class GetCashflowAccounts extends BaseController {
 
     try {
       const cashflowAccounts =
-        await this.getCashflowAccountsService.getCashflowAccounts(
-          tenantId,
-          filter
-        );
+        await this.cashflowApplication.getCashflowAccounts(tenantId, filter);
 
       return res.status(200).send({
         cashflow_accounts: this.transfromToResponse(cashflowAccounts),

packages/server/src/api/controllers/Cashflow/GetCashflowTransaction.ts

@@ -2,15 +2,15 @@ import { Service, Inject } from 'typedi';
 import { Router, Request, Response, NextFunction } from 'express';
 import { param } from 'express-validator';
 import BaseController from '../BaseController';
-import GetCashflowTransactionsService from '@/services/Cashflow/GetCashflowTransactionsService';
 import { ServiceError } from '@/exceptions';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
 import { AbilitySubject, CashflowAction } from '@/interfaces';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
 
 @Service()
 export default class GetCashflowAccounts extends BaseController {
   @Inject()
-  getCashflowTransactionsService: GetCashflowTransactionsService;
+  private cashflowApplication: CashflowApplication;
 
   /**
    * Controller router.
@@ -43,11 +43,10 @@ export default class GetCashflowAccounts extends BaseController {
     const { transactionId } = req.params;
 
     try {
-      const cashflowTransaction =
-        await this.getCashflowTransactionsService.getCashflowTransaction(
-          tenantId,
-          transactionId
-        );
+      const cashflowTransaction = await this.cashflowApplication.getTransaction(
+        tenantId,
+        transactionId
+      );
 
       return res.status(200).send({
         cashflow_transaction: this.transfromToResponse(cashflowTransaction),

packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts

@@ -1,16 +1,16 @@
 import { Service, Inject } from 'typedi';
-import { check } from 'express-validator';
+import { ValidationChain, check, param, query } from 'express-validator';
 import { Router, Request, Response, NextFunction } from 'express';
 import BaseController from '../BaseController';
 import { ServiceError } from '@/exceptions';
-import NewCashflowTransactionService from '@/services/Cashflow/NewCashflowTransactionService';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
 import { AbilitySubject, CashflowAction } from '@/interfaces';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
 
 @Service()
 export default class NewCashflowTransactionController extends BaseController {
   @Inject()
-  private newCashflowTranscationService: NewCashflowTransactionService;
+  private cashflowApplication: CashflowApplication;
 
   /**
    * Router constructor.
@@ -18,6 +18,18 @@ export default class NewCashflowTransactionController extends BaseController {
   public router() {
     const router = Router();
 
+    router.get(
+      '/transactions/uncategorized/:id',
+      this.asyncMiddleware(this.getUncategorizedCashflowTransaction),
+      this.catchServiceErrors
+    );
+    router.get(
+      '/transactions/:id/uncategorized',
+      this.getUncategorizedTransactionsValidationSchema,
+      this.validationResult,
+      this.asyncMiddleware(this.getUncategorizedCashflowTransactions),
+      this.catchServiceErrors
+    );
     router.post(
       '/transactions',
       CheckPolicies(CashflowAction.Create, AbilitySubject.Cashflow),
@@ -26,13 +38,72 @@ export default class NewCashflowTransactionController extends BaseController {
       this.asyncMiddleware(this.newCashflowTransaction),
       this.catchServiceErrors
     );
+    router.post(
+      '/transactions/:id/uncategorize',
+      this.revertCategorizedCashflowTransaction,
+      this.catchServiceErrors
+    );
+    router.post(
+      '/transactions/:id/categorize',
+      this.categorizeCashflowTransactionValidationSchema,
+      this.validationResult,
+      this.categorizeCashflowTransaction,
+      this.catchServiceErrors
+    );
+    router.post(
+      '/transaction/:id/categorize/expense',
+      this.categorizeAsExpenseValidationSchema,
+      this.validationResult,
+      this.categorizesCashflowTransactionAsExpense,
+      this.catchServiceErrors
+    );
     return router;
   }
 
+  /**
+   * Getting uncategorized transactions validation schema.
+   * @returns {ValidationChain}
+   */
+  public get getUncategorizedTransactionsValidationSchema() {
+    return [
+      param('id').exists().isNumeric().toInt(),
+      query('page').optional().isNumeric().toInt(),
+      query('page_size').optional().isNumeric().toInt(),
+    ];
+  }
+
+  /**
+   * Categorize as expense validation schema.
+   */
+  public get categorizeAsExpenseValidationSchema() {
+    return [
+      check('expense_account_id').exists(),
+      check('date').isISO8601().exists(),
+      check('reference_no').optional(),
+      check('exchange_rate').optional().isFloat({ gt: 0 }).toFloat(),
+    ];
+  }
+
+  /**
+   * Categorize cashflow tranasction validation schema.
+   */
+  public get categorizeCashflowTransactionValidationSchema() {
+    return [
+      check('date').exists().isISO8601().toDate(),
+      check('credit_account_id').exists().isInt().toInt(),
+      check('transaction_number').optional(),
+      check('transaction_type').exists(),
+      check('reference_no').optional(),
+      check('exchange_rate').optional().isFloat({ gt: 0 }).toFloat(),
+      check('description').optional(),
+      check('branch_id').optional({ nullable: true }).isNumeric().toInt(),
+    ];
+  }
+
   /**
    * New cashflow transaction validation schema.
    */
-  get newTransactionValidationSchema() {
+  public get newTransactionValidationSchema() {
     return [
       check('date').exists().isISO8601().toDate(),
       check('reference_no').optional({ nullable: true }).trim().escape(),
@@ -48,9 +119,7 @@ export default class NewCashflowTransactionController extends BaseController {
       check('credit_account_id').exists().isInt().toInt(),
 
       check('exchange_rate').optional().isFloat({ gt: 0 }).toFloat(),
-
       check('branch_id').optional({ nullable: true }).isNumeric().toInt(),
-
       check('publish').default(false).isBoolean().toBoolean(),
     ];
   }
@@ -70,13 +139,12 @@ export default class NewCashflowTransactionController extends BaseController {
     const ownerContributionDTO = this.matchedBodyData(req);
 
     try {
-      const { cashflowTransaction } =
-        await this.newCashflowTranscationService.newCashflowTransaction(
+      const cashflowTransaction =
+        await this.cashflowApplication.createTransaction(
           tenantId,
           ownerContributionDTO,
           userId
         );
-
       return res.status(200).send({
         id: cashflowTransaction.id,
         message: 'New cashflow transaction has been created successfully.',
@@ -86,11 +154,147 @@ export default class NewCashflowTransactionController extends BaseController {
     }
   };
 
+  /**
+   * Revert the categorized cashflow transaction.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  private revertCategorizedCashflowTransaction = async (
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) => {
+    const { tenantId } = req;
+    const { id: cashflowTransactionId } = req.params;
+
+    try {
+      const data = await this.cashflowApplication.uncategorizeTransaction(
+        tenantId,
+        cashflowTransactionId
+      );
+      return res.status(200).send({ data });
+    } catch (error) {
+      next(error);
+    }
+  };
+
+  /**
+   * Categorize the cashflow transaction.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  private categorizeCashflowTransaction = async (
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) => {
+    const { tenantId } = req;
+    const { id: cashflowTransactionId } = req.params;
+    const cashflowTransaction = this.matchedBodyData(req);
+
+    try {
+      await this.cashflowApplication.categorizeTransaction(
+        tenantId,
+        cashflowTransactionId,
+        cashflowTransaction
+      );
+      return res.status(200).send({
+        message: 'The cashflow transaction has been created successfully.',
+      });
+    } catch (error) {
+      next(error);
+    }
+  };
+
+  /**
+   * Categorize the transaction as expense transaction.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  private categorizesCashflowTransactionAsExpense = async (
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) => {
+    const { tenantId } = req;
+    const { id: cashflowTransactionId } = req.params;
+    const cashflowTransaction = this.matchedBodyData(req);
+
+    try {
+      await this.cashflowApplication.categorizeAsExpense(
+        tenantId,
+        cashflowTransactionId,
+        cashflowTransaction
+      );
+      return res.status(200).send({
+        message: 'The cashflow transaction has been created successfully.',
+      });
+    } catch (error) {
+      next(error);
+    }
+  };
+
+  /**
+   * Retrieves the uncategorized cashflow transactions.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  public getUncategorizedCashflowTransaction = async (
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) => {
+    const { tenantId } = req;
+    const { id: transactionId } = req.params;
+
+    try {
+      const data = await this.cashflowApplication.getUncategorizedTransaction(
+        tenantId,
+        transactionId
+      );
+      return res.status(200).send({ data });
+    } catch (error) {
+      next(error);
+    }
+  };
+
+  /**
+   * Retrieves the uncategorized cashflow transactions.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  public getUncategorizedCashflowTransactions = async (
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) => {
+    const { tenantId } = req;
+    const { id: accountId } = req.params;
+    const query = this.matchedQueryData(req);
+
+    try {
+      const data = await this.cashflowApplication.getUncategorizedTransactions(
+        tenantId,
+        accountId,
+        query
+      );
+
+      return res.status(200).send(data);
+    } catch (error) {
+      next(error);
+    }
+  };
+
   /**
    * Handle the service errors.
    * @param error
-   * @param req
-   * @param res
+   * @param {Request} req
+   * @param {res
    * @param next
    * @returns
    */
@@ -140,6 +344,16 @@ export default class NewCashflowTransactionController extends BaseController {
           ],
         });
       }
+      if (error.errorType === 'UNCATEGORIZED_TRANSACTION_TYPE_INVALID') {
+        return res.boom.badRequest(null, {
+          errors: [
+            {
+              type: 'UNCATEGORIZED_TRANSACTION_TYPE_INVALID',
+              code: 4100,
+            },
+          ],
+        });
+      }
     }
     next(error);
   }

packages/server/src/database/migrations/20240228183404_create_uncateogrized_cashflow_transactions_table.js

@@ -0,0 +1,28 @@
+exports.up = function (knex) {
+  return knex.schema.createTable(
+    'uncategorized_cashflow_transactions',
+    (table) => {
+      table.increments('id');
+      table.date('date').index();
+      table.decimal('amount');
+      table.string('currency_code');
+      table.string('reference_no').index();
+      table.string('payee');
+      table
+        .integer('account_id')
+        .unsigned()
+        .references('id')
+        .inTable('accounts');
+      table.string('description');
+      table.string('categorize_ref_type');
+      table.integer('categorize_ref_id').unsigned();
+      table.boolean('categorized').defaultTo(false);
+      table.string('plaid_transaction_id');
+      table.timestamps();
+    }
+  );
+};
+
+exports.down = function (knex) {
+  return knex.schema.dropTableIfExists('uncategorized_cashflow_transactions');
+};

packages/server/src/database/migrations/20240304153926_add_uncategorized_transactions_column_to_accounts_table.js

@@ -0,0 +1,10 @@
+exports.up = function (knex) {
+  return knex.schema.table('accounts', (table) => {
+    table.integer('uncategorized_transactions').defaultTo(0);
+    table.boolean('is_system_account').defaultTo(true);
+    table.boolean('is_feeds_active').defaultTo(false);
+    table.datetime('last_feeds_updated_at').nullable();
+  });
+};
+
+exports.down = function (knex) {};

packages/server/src/interfaces/CashFlow.ts

@@ -233,3 +233,38 @@ export interface ICashflowTransactionSchema {
 }
 
 export interface ICashflowTransactionInput extends ICashflowTransactionSchema {}
+
+export interface ICategorizeCashflowTransactioDTO {
+  creditAccountId: number;
+  referenceNo: string;
+  transactionNumber: string;
+  transactionType: string;
+  exchangeRate: number;
+  description: string;
+  branchId: number;
+}
+
+export interface IUncategorizedCashflowTransaction {
+  id?: number;
+  amount: number;
+  date: Date;
+  currencyCode: string;
+  accountId: number;
+  description: string;
+  referenceNo: string;
+  categorizeRefType: string;
+  categorizeRefId: number;
+  categorized: boolean;
+}
+
+
+export interface CreateUncategorizedTransactionDTO {
+  date: Date | string;
+  accountId: number;
+  amount: number;
+  currencyCode: string;
+  payee?: string;
+  description?: string;
+  referenceNo?: string | null;
+  plaidTransactionId?: string | null;
+}

packages/server/src/interfaces/CashflowService.ts

@@ -1,5 +1,6 @@
 import { Knex } from 'knex';
 import { IAccount } from './Account';
+import { IUncategorizedCashflowTransaction } from './CashFlow';
 
 export interface ICashflowAccountTransactionsFilter {
   page: number;
@@ -124,8 +125,39 @@ export interface ICommandCashflowDeletedPayload {
   trx: Knex.Transaction;
 }
 
+export interface ICashflowTransactionCategorizedPayload {
+  tenantId: number;
+  cashflowTransactionId: number;
+  cashflowTransaction: ICashflowTransaction;
+  trx: Knex.Transaction;
+}
+export interface ICashflowTransactionUncategorizingPayload {
+  tenantId: number;
+  uncategorizedTransaction: IUncategorizedCashflowTransaction;
+  trx: Knex.Transaction;
+}
+export interface ICashflowTransactionUncategorizedPayload {
+  tenantId: number;
+  uncategorizedTransaction: IUncategorizedCashflowTransaction;
+  oldUncategorizedTransaction: IUncategorizedCashflowTransaction;
+  trx: Knex.Transaction;
+}
+
 export enum CashflowAction {
   Create = 'Create',
   Delete = 'Delete',
   View = 'View',
 }
+
+export interface CategorizeTransactionAsExpenseDTO {
+  expenseAccountId: number;
+  exchangeRate: number;
+  referenceNo: string;
+  description: string;
+  branchId?: number;
+}
+
+export interface IGetUncategorizedTransactionsQuery {
+  page?: number;
+  pageSize?: number;
+}

packages/server/src/interfaces/Plaid.ts

@@ -38,6 +38,7 @@ export interface PlaidTransaction {
   iso_currency_code: string;
   transaction_id: string;
   transaction_type: string;
+  payment_meta: { reference_number: string | null; payee: string | null };
 }
 
 export interface PlaidFetchedTransactionsUpdates {

packages/server/src/loaders/eventEmitter.ts

@@ -88,6 +88,7 @@ import { PlaidUpdateTransactionsOnItemCreatedSubscriber } from '@/services/Banki
 import { InvoiceChangeStatusOnMailSentSubscriber } from '@/services/Sales/Invoices/subscribers/InvoiceChangeStatusOnMailSentSubscriber';
 import { SaleReceiptMarkClosedOnMailSentSubcriber } from '@/services/Sales/Receipts/subscribers/SaleReceiptMarkClosedOnMailSentSubcriber';
 import { SaleEstimateMarkApprovedOnMailSent } from '@/services/Sales/Estimates/subscribers/SaleEstimateMarkApprovedOnMailSent';
+import { DeleteCashflowTransactionOnUncategorize } from '@/services/Cashflow/subscribers/DeleteCashflowTransactionOnUncategorize';
 
 export default () => {
   return new EventPublisher();
@@ -212,6 +213,9 @@ export const susbcribers = () => {
     SyncItemTaxRateOnEditTaxSubscriber,
 
     // Plaid
-    PlaidUpdateTransactionsOnItemCreatedSubscriber
+    PlaidUpdateTransactionsOnItemCreatedSubscriber,
+
+    // Cashflow
+    DeleteCashflowTransactionOnUncategorize,
   ];
 };

packages/server/src/loaders/tenantModels.ts

@@ -62,6 +62,7 @@ import TaxRate from 'models/TaxRate';
 import TaxRateTransaction from 'models/TaxRateTransaction';
 import Attachment from 'models/Attachment';
 import PlaidItem from 'models/PlaidItem';
+import UncategorizedCashflowTransaction from 'models/UncategorizedCashflowTransaction';
 
 export default (knex) => {
   const models = {
@@ -126,7 +127,8 @@ export default (knex) => {
     TaxRate,
     TaxRateTransaction,
     Attachment,
-    PlaidItem
+    PlaidItem,
+    UncategorizedCashflowTransaction
   };
   return mapValues(models, (model) => model.bindKnex(knex));
 };

packages/server/src/models/Account.ts

@@ -196,6 +196,7 @@ export default class Account extends mixin(TenantModel, [
     const Expense = require('models/Expense');
     const ExpenseEntry = require('models/ExpenseCategory');
     const ItemEntry = require('models/ItemEntry');
+    const UncategorizedTransaction = require('models/UncategorizedCashflowTransaction');
 
     return {
       /**
@@ -305,6 +306,21 @@ export default class Account extends mixin(TenantModel, [
           to: 'items_entries.sellAccountId',
         },
       },
+
+      /**
+       * Associated uncategorized transactions.
+       */
+      uncategorizedTransactions: {
+        relation: Model.HasManyRelation,
+        modelClass: UncategorizedTransaction.default,
+        join: {
+          from: 'accounts.id',
+          to: 'uncategorized_cashflow_transactions.accountId',
+        },
+        filter: (query) => {
+          query.where('categorized', false);
+        },
+      },
     };
   }
 

packages/server/src/models/CashflowTransaction.ts

@@ -12,6 +12,7 @@ export default class CashflowTransaction extends TenantModel {
   transactionType: string;
   amount: number;
   exchangeRate: number;
+  uncategorize: boolean;
 
   /**
    * Table name.

packages/server/src/models/Expense.ts

@@ -215,6 +215,10 @@ export default class Expense extends mixin(TenantModel, [
           to: 'branches.id',
         },
       },
+
+      /**
+       * 
+       */
       media: {
         relation: Model.ManyToManyRelation,
         modelClass: Media.default,

packages/server/src/models/UncategorizedCashflowTransaction.ts

@@ -0,0 +1,140 @@
+/* eslint-disable global-require */
+import TenantModel from 'models/TenantModel';
+import { Model, ModelOptions, QueryContext } from 'objection';
+import Account from './Account';
+
+export default class UncategorizedCashflowTransaction extends TenantModel {
+  id!: number;
+  amount!: number;
+  categorized!: boolean;
+  accountId!: number;
+
+  /**
+   * Table name.
+   */
+  static get tableName() {
+    return 'uncategorized_cashflow_transactions';
+  }
+
+  /**
+   * Timestamps columns.
+   */
+  static get timestamps() {
+    return ['createdAt', 'updatedAt'];
+  }
+
+  /**
+   * Virtual attributes.
+   */
+  static get virtualAttributes() {
+    return [
+      'withdrawal',
+      'deposit',
+      'isDepositTransaction',
+      'isWithdrawalTransaction',
+    ];
+  }
+
+  /**
+   * Retrieves the withdrawal amount.
+   * @returns {number}
+   */
+  public get withdrawal() {
+    return this.amount < 0 ? Math.abs(this.amount) : 0;
+  }
+
+  /**
+   * Retrieves the deposit amount.
+   * @returns {number}
+   */
+  public get deposit(): number {
+    return this.amount > 0 ? Math.abs(this.amount) : 0;
+  }
+
+  /**
+   * Detarmines whether the transaction is deposit transaction.
+   */
+  public get isDepositTransaction(): boolean {
+    return 0 < this.deposit;
+  }
+
+  /**
+   * Detarmines whether the transaction is withdrawal transaction.
+   */
+  public get isWithdrawalTransaction(): boolean {
+    return 0 < this.withdrawal;
+  }
+
+  /**
+   * Relationship mapping.
+   */
+  static get relationMappings() {
+    const Account = require('models/Account');
+
+    return {
+      /**
+       * Transaction may has associated to account.
+       */
+      account: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: Account.default,
+        join: {
+          from: 'uncategorized_cashflow_transactions.accountId',
+          to: 'accounts.id',
+        },
+      },
+    };
+  }
+
+  /**
+   * Updates the count of uncategorized transactions for the associated account
+   * based on the specified operation.
+   * @param {QueryContext} queryContext - The query context for the transaction.
+   * @param {boolean} increment - Indicates whether to increment or decrement the count.
+   */
+  private async updateUncategorizedTransactionCount(
+    queryContext: QueryContext,
+    increment: boolean
+  ) {
+    const operation = increment ? 'increment' : 'decrement';
+    const amount = increment ? 1 : -1;
+
+    await Account.query(queryContext.transaction)
+      .findById(this.accountId)
+      [operation]('uncategorized_transactions', amount);
+  }
+
+  /**
+   * Runs after insert.
+   * @param {QueryContext} queryContext
+   */
+  public async $afterInsert(queryContext) {
+    await super.$afterInsert(queryContext);
+    await this.updateUncategorizedTransactionCount(queryContext, true);
+  }
+
+  /**
+   * Runs after update.
+   * @param {ModelOptions} opt
+   * @param {QueryContext} queryContext
+   */
+  public async $afterUpdate(
+    opt: ModelOptions,
+    queryContext: QueryContext
+  ): Promise<any> {
+    await super.$afterUpdate(opt, queryContext);
+
+    if (this.id && this.categorized) {
+      await this.updateUncategorizedTransactionCount(queryContext, false);
+    }
+  }
+
+  /**
+   * Runs after delete.
+   * @param {QueryContext} queryContext
+   */
+  public async $afterDelete(queryContext: QueryContext) {
+    await super.$afterDelete(queryContext);
+    await this.updateUncategorizedTransactionCount(queryContext, false);
+  }
+}

packages/server/src/services/Banking/Plaid/PlaidSyncDB.ts

@@ -8,9 +8,9 @@ import {
   transformPlaidAccountToCreateAccount,
   transformPlaidTrxsToCashflowCreate,
 } from './utils';
-import NewCashflowTransactionService from '@/services/Cashflow/NewCashflowTransactionService';
-import DeleteCashflowTransactionService from '@/services/Cashflow/DeleteCashflowTransactionService';
+import { DeleteCashflowTransaction } from '@/services/Cashflow/DeleteCashflowTransactionService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
+import { CashflowApplication } from '@/services/Cashflow/CashflowApplication';
 
 const CONCURRENCY_ASYNC = 10;
 
@@ -23,10 +23,10 @@ export class PlaidSyncDb {
   private createAccountService: CreateAccount;
 
   @Inject()
-  private createCashflowTransactionService: NewCashflowTransactionService;
+  private cashflowApp: CashflowApplication;
 
   @Inject()
-  private deleteCashflowTransactionService: DeleteCashflowTransactionService;
+  private deleteCashflowTransactionService: DeleteCashflowTransaction;
 
   /**
    * Syncs the plaid accounts to the system accounts.
@@ -36,11 +36,14 @@ export class PlaidSyncDb {
    */
   public async syncBankAccounts(
     tenantId: number,
-    plaidAccounts: PlaidAccount[]
+    plaidAccounts: PlaidAccount[],
+    institution: any
   ): Promise<void> {
-    const accountCreateDTOs = R.map(transformPlaidAccountToCreateAccount)(
-      plaidAccounts
-    );
+    const transformToPlaidAccounts =
+      transformPlaidAccountToCreateAccount(institution);
+
+    const accountCreateDTOs = R.map(transformToPlaidAccounts)(plaidAccounts);
+
     await bluebird.map(
       accountCreateDTOs,
       (createAccountDTO: any) =>
@@ -75,17 +78,18 @@ export class PlaidSyncDb {
       cashflowAccount.id,
       openingEquityBalance.id
     );
-    const accountsCashflowDTO = R.map(transformTransaction)(plaidTranasctions);
+    const uncategorizedTransDTOs =
+      R.map(transformTransaction)(plaidTranasctions);
 
     // Creating account transaction queue.
     await bluebird.map(
-      accountsCashflowDTO,
-      (cashflowDTO) =>
-        this.createCashflowTransactionService.newCashflowTransaction(
+      uncategorizedTransDTOs,
+      (uncategoriedDTO) =>
+        this.cashflowApp.createUncategorizedTransaction(
           tenantId,
-          cashflowDTO
+          uncategoriedDTO
         ),
-      { concurrency: CONCURRENCY_ASYNC }
+      { concurrency: 1 }
     );
   }
 
@@ -157,4 +161,38 @@ export class PlaidSyncDb {
 
     await PlaidItem.query().findOne({ plaidItemId }).patch({ lastCursor });
   }
+
+  /**
+   * Updates the last feeds updated at of the given Plaid accounts ids.
+   * @param {number} tenantId
+   * @param {string[]} plaidAccountIds
+   */
+  public async updateLastFeedsUpdatedAt(
+    tenantId: number,
+    plaidAccountIds: string[]
+  ) {
+    const { Account } = this.tenancy.models(tenantId);
+
+    await Account.query().whereIn('plaid_account_id', plaidAccountIds).patch({
+      lastFeedsUpdatedAt: new Date(),
+    });
+  }
+
+  /**
+   * Updates the accounts feed active status of the given Plaid accounts ids.
+   * @param {number} tenantId
+   * @param {number[]} plaidAccountIds
+   * @param {boolean} isFeedsActive
+   */
+  public async updateAccountsFeedsActive(
+    tenantId: number,
+    plaidAccountIds: string[],
+    isFeedsActive: boolean = true
+  ) {
+    const { Account } = this.tenancy.models(tenantId);
+
+    await Account.query().whereIn('plaid_account_id', plaidAccountIds).patch({
+      isFeedsActive,
+    });
+  }
 }

packages/server/src/services/Banking/Plaid/PlaidUpdateTransactions.ts

@@ -25,11 +25,19 @@ export class PlaidUpdateTransactions {
     const request = { access_token: accessToken };
     const plaidInstance = new PlaidClientWrapper();
     const {
-      data: { accounts },
+      data: { accounts, item },
     } = await plaidInstance.accountsGet(request);
 
+    const plaidAccountsIds = accounts.map((a) => a.account_id);
+
+    const {
+      data: { institution },
+    } = await plaidInstance.institutionsGetById({
+      institution_id: item.institution_id,
+      country_codes: ['US', 'UK'],
+    });
     // Update the DB.
-    await this.plaidSync.syncBankAccounts(tenantId, accounts);
+    await this.plaidSync.syncBankAccounts(tenantId, accounts, institution);
     await this.plaidSync.syncAccountsTransactions(
       tenantId,
       added.concat(modified)
@@ -37,6 +45,12 @@ export class PlaidUpdateTransactions {
     await this.plaidSync.syncRemoveTransactions(tenantId, removed);
     await this.plaidSync.syncTransactionsCursor(tenantId, plaidItemId, cursor);
 
+    // Update the last feeds updated at of the updated accounts.
+    await this.plaidSync.updateLastFeedsUpdatedAt(tenantId, plaidAccountsIds);
+
+    // Turn on the accounts feeds flag.
+    await this.plaidSync.updateAccountsFeedsActive(tenantId, plaidAccountsIds);
+
     return {
       addedCount: added.length,
       modifiedCount: modified.length,

packages/server/src/services/Banking/Plaid/utils.ts

@@ -1,7 +1,7 @@
 import * as R from 'ramda';
 import {
+  CreateUncategorizedTransactionDTO,
   IAccountCreateDTO,
-  ICashflowNewCommandDTO,
   PlaidAccount,
   PlaidTransaction,
 } from '@/interfaces';
@@ -11,51 +11,44 @@ import {
  * @param {PlaidAccount} plaidAccount
  * @returns {IAccountCreateDTO}
  */
-export const transformPlaidAccountToCreateAccount = (
-  plaidAccount: PlaidAccount
-): IAccountCreateDTO => {
-  return {
-    name: plaidAccount.name,
-    code: '',
-    description: plaidAccount.official_name,
-    currencyCode: plaidAccount.balances.iso_currency_code,
-    accountType: 'cash',
-    active: true,
-    plaidAccountId: plaidAccount.account_id,
-    bankBalance: plaidAccount.balances.current,
-    accountMask: plaidAccount.mask,
-  };
-};
+export const transformPlaidAccountToCreateAccount = R.curry(
+  (institution: any, plaidAccount: PlaidAccount): IAccountCreateDTO => {
+    return {
+      name: `${institution.name} - ${plaidAccount.name}`,
+      code: '',
+      description: plaidAccount.official_name,
+      currencyCode: plaidAccount.balances.iso_currency_code,
+      accountType: 'cash',
+      active: true,
+      plaidAccountId: plaidAccount.account_id,
+      bankBalance: plaidAccount.balances.current,
+      accountMask: plaidAccount.mask,
+    };
+  }
+);
 
 /**
  * Transformes the plaid transaction to cashflow create DTO.
  * @param {number} cashflowAccountId - Cashflow account ID.
  * @param {number} creditAccountId - Credit account ID.
  * @param {PlaidTransaction} plaidTranasction - Plaid transaction.
- * @returns {ICashflowNewCommandDTO}
+ * @returns {CreateUncategorizedTransactionDTO}
  */
 export const transformPlaidTrxsToCashflowCreate = R.curry(
   (
     cashflowAccountId: number,
     creditAccountId: number,
     plaidTranasction: PlaidTransaction
-  ): ICashflowNewCommandDTO => {
+  ): CreateUncategorizedTransactionDTO => {
     return {
       date: plaidTranasction.date,
-
-      transactionType: 'OwnerContribution',
-      description: plaidTranasction.name,
-
       amount: plaidTranasction.amount,
-      exchangeRate: 1,
+      description: plaidTranasction.name,
+      payee: plaidTranasction.payment_meta?.payee,
       currencyCode: plaidTranasction.iso_currency_code,
-      creditAccountId,
-      cashflowAccountId,
-
-      // transactionNumber: string;
-      // referenceNo: string;
+      accountId: cashflowAccountId,
+      referenceNo: plaidTranasction.payment_meta?.reference_number,
       plaidTransactionId: plaidTranasction.transaction_id,
-      publish: true,
     };
   }
 );

packages/server/src/services/Cashflow/CashflowApplication.ts

@@ -0,0 +1,213 @@
+import { Inject, Service } from 'typedi';
+import { DeleteCashflowTransaction } from './DeleteCashflowTransactionService';
+import { UncategorizeCashflowTransaction } from './UncategorizeCashflowTransaction';
+import { CategorizeCashflowTransaction } from './CategorizeCashflowTransaction';
+import {
+  CategorizeTransactionAsExpenseDTO,
+  CreateUncategorizedTransactionDTO,
+  ICashflowAccountsFilter,
+  ICashflowNewCommandDTO,
+  ICategorizeCashflowTransactioDTO,
+  IGetUncategorizedTransactionsQuery,
+} from '@/interfaces';
+import { CategorizeTransactionAsExpense } from './CategorizeTransactionAsExpense';
+import { GetUncategorizedTransactions } from './GetUncategorizedTransactions';
+import { CreateUncategorizedTransaction } from './CreateUncategorizedTransaction';
+import { GetUncategorizedTransaction } from './GetUncategorizedTransaction';
+import NewCashflowTransactionService from './NewCashflowTransactionService';
+import GetCashflowAccountsService from './GetCashflowAccountsService';
+import { GetCashflowTransactionService } from './GetCashflowTransactionsService';
+
+@Service()
+export class CashflowApplication {
+  @Inject()
+  private createTransactionService: NewCashflowTransactionService;
+
+  @Inject()
+  private deleteTransactionService: DeleteCashflowTransaction;
+
+  @Inject()
+  private getCashflowAccountsService: GetCashflowAccountsService;
+
+  @Inject()
+  private getCashflowTransactionService: GetCashflowTransactionService;
+
+  @Inject()
+  private uncategorizeTransactionService: UncategorizeCashflowTransaction;
+
+  @Inject()
+  private categorizeTransactionService: CategorizeCashflowTransaction;
+
+  @Inject()
+  private categorizeAsExpenseService: CategorizeTransactionAsExpense;
+
+  @Inject()
+  private getUncategorizedTransactionsService: GetUncategorizedTransactions;
+
+  @Inject()
+  private getUncategorizedTransactionService: GetUncategorizedTransaction;
+
+  @Inject()
+  private createUncategorizedTransactionService: CreateUncategorizedTransaction;
+
+  /**
+   * Creates a new cashflow transaction.
+   * @param {number} tenantId
+   * @param {ICashflowNewCommandDTO} transactionDTO
+   * @param {number} userId
+   * @returns
+   */
+  public createTransaction(
+    tenantId: number,
+    transactionDTO: ICashflowNewCommandDTO,
+    userId?: number
+  ) {
+    return this.createTransactionService.newCashflowTransaction(
+      tenantId,
+      transactionDTO,
+      userId
+    );
+  }
+
+  /**
+   * Deletes the given cashflow transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @returns
+   */
+  public deleteTransaction(tenantId: number, cashflowTransactionId: number) {
+    return this.deleteTransactionService.deleteCashflowTransaction(
+      tenantId,
+      cashflowTransactionId
+    );
+  }
+
+  /**
+   * Retrieves specific cashflow transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @returns
+   */
+  public getTransaction(tenantId: number, cashflowTransactionId: number) {
+    return this.getCashflowTransactionService.getCashflowTransaction(
+      tenantId,
+      cashflowTransactionId
+    );
+  }
+
+  /**
+   * Retrieves the cashflow accounts.
+   * @param {number} tenantId
+   * @param {ICashflowAccountsFilter} filterDTO
+   * @returns
+   */
+  public getCashflowAccounts(
+    tenantId: number,
+    filterDTO: ICashflowAccountsFilter
+  ) {
+    return this.getCashflowAccountsService.getCashflowAccounts(
+      tenantId,
+      filterDTO
+    );
+  }
+
+  /**
+   * Creates a new uncategorized cash transaction.
+   * @param {number} tenantId
+   * @param {CreateUncategorizedTransactionDTO} createUncategorizedTransactionDTO
+   * @returns {IUncategorizedCashflowTransaction}
+   */
+  public createUncategorizedTransaction(
+    tenantId: number,
+    createUncategorizedTransactionDTO: CreateUncategorizedTransactionDTO
+  ) {
+    return this.createUncategorizedTransactionService.create(
+      tenantId,
+      createUncategorizedTransactionDTO
+    );
+  }
+
+  /**
+   * Uncategorize the given cashflow transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @returns
+   */
+  public uncategorizeTransaction(
+    tenantId: number,
+    cashflowTransactionId: number
+  ) {
+    return this.uncategorizeTransactionService.uncategorize(
+      tenantId,
+      cashflowTransactionId
+    );
+  }
+
+  /**
+   * Categorize the given cashflow transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @param {ICategorizeCashflowTransactioDTO} categorizeDTO
+   * @returns
+   */
+  public categorizeTransaction(
+    tenantId: number,
+    cashflowTransactionId: number,
+    categorizeDTO: ICategorizeCashflowTransactioDTO
+  ) {
+    return this.categorizeTransactionService.categorize(
+      tenantId,
+      cashflowTransactionId,
+      categorizeDTO
+    );
+  }
+
+  /**
+   * Categorizes the given cashflow transaction as expense transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @param {CategorizeTransactionAsExpenseDTO} transactionDTO
+   */
+  public categorizeAsExpense(
+    tenantId: number,
+    cashflowTransactionId: number,
+    transactionDTO: CategorizeTransactionAsExpenseDTO
+  ) {
+    return this.categorizeAsExpenseService.categorize(
+      tenantId,
+      cashflowTransactionId,
+      transactionDTO
+    );
+  }
+
+  /**
+   * Retrieves the uncategorized cashflow transactions.
+   * @param {number} tenantId
+   */
+  public getUncategorizedTransactions(
+    tenantId: number,
+    accountId: number,
+    query: IGetUncategorizedTransactionsQuery
+  ) {
+    return this.getUncategorizedTransactionsService.getTransactions(
+      tenantId,
+      accountId,
+      query
+    );
+  }
+
+  /**
+   * Retrieves specific uncategorized transaction.
+   * @param {number} tenantId
+   * @param {number} uncategorizedTransactionId
+   */
+  public getUncategorizedTransaction(
+    tenantId: number,
+    uncategorizedTransactionId: number
+  ) {
+    return this.getUncategorizedTransactionService.getTransaction(
+      tenantId,
+      uncategorizedTransactionId
+    );
+  }
+}

packages/server/src/services/Cashflow/CashflowTransactionJournalEntries.ts

@@ -1,11 +1,9 @@
 import { Inject, Service } from 'typedi';
 import { Knex } from 'knex';
-import * as R from 'ramda';
 import {
   ILedgerEntry,
   ICashflowTransaction,
   AccountNormal,
-  ICashflowTransactionLine,
 } from '../../interfaces';
 import {
   transformCashflowTransactionType,

packages/server/src/services/Cashflow/CategorizeCashflowTransaction.ts

@@ -0,0 +1,101 @@
+import { Inject, Service } from 'typedi';
+import HasTenancyService from '../Tenancy/TenancyService';
+import events from '@/subscribers/events';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import UnitOfWork from '../UnitOfWork';
+import {
+  ICashflowTransactionCategorizedPayload,
+  ICashflowTransactionUncategorizingPayload,
+  ICategorizeCashflowTransactioDTO,
+} from '@/interfaces';
+import { Knex } from 'knex';
+import { transformCategorizeTransToCashflow } from './utils';
+import { CommandCashflowValidator } from './CommandCasflowValidator';
+import NewCashflowTransactionService from './NewCashflowTransactionService';
+import { TransferAuthorizationGuaranteeDecision } from 'plaid';
+
+@Service()
+export class CategorizeCashflowTransaction {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject()
+  private uow: UnitOfWork;
+
+  @Inject()
+  private commandValidators: CommandCashflowValidator;
+
+  @Inject()
+  private createCashflow: NewCashflowTransactionService;
+
+  /**
+   * Categorize the given cashflow transaction.
+   * @param {number} tenantId
+   * @param {ICategorizeCashflowTransactioDTO} categorizeDTO
+   */
+  public async categorize(
+    tenantId: number,
+    uncategorizedTransactionId: number,
+    categorizeDTO: ICategorizeCashflowTransactioDTO
+  ) {
+    const { UncategorizedCashflowTransaction } = this.tenancy.models(tenantId);
+
+    // Retrieves the uncategorized transaction or throw an error.
+    const transaction = await UncategorizedCashflowTransaction.query()
+      .findById(uncategorizedTransactionId)
+      .throwIfNotFound();
+
+    // Validates the transaction shouldn't be categorized before.
+    this.commandValidators.validateTransactionShouldNotCategorized(transaction);
+
+    // Validate the uncateogirzed transaction if it's deposit the transaction direction
+    // should `IN` and the same thing if it's withdrawal the direction should be OUT.
+    this.commandValidators.validateUncategorizeTransactionType(
+      transaction,
+      categorizeDTO.transactionType
+    );
+    // Edits the cashflow transaction under UOW env.
+    return this.uow.withTransaction(tenantId, async (trx: Knex.Transaction) => {
+      // Triggers `onTransactionCategorizing` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionCategorizing,
+        {
+          tenantId,
+          trx,
+        } as ICashflowTransactionUncategorizingPayload
+      );
+      // Transformes the categorize DTO to the cashflow transaction.
+      const cashflowTransactionDTO = transformCategorizeTransToCashflow(
+        transaction,
+        categorizeDTO
+      );
+      // Creates a new cashflow transaction.
+      const cashflowTransaction =
+        await this.createCashflow.newCashflowTransaction(
+          tenantId,
+          cashflowTransactionDTO
+        );
+      // Updates the uncategorized transaction as categorized.
+      await UncategorizedCashflowTransaction.query(trx).patchAndFetchById(
+        uncategorizedTransactionId,
+        {
+          categorized: true,
+          categorizeRefType: 'CashflowTransaction',
+          categorizeRefId: cashflowTransaction.id,
+        }
+      );
+      // Triggers `onCashflowTransactionCategorized` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionCategorized,
+        {
+          tenantId,
+          // cashflowTransaction,
+          trx,
+        } as ICashflowTransactionCategorizedPayload
+      );
+    });
+  }
+}

packages/server/src/services/Cashflow/CategorizeTransactionAsExpense.ts

@@ -0,0 +1,80 @@
+import {
+  CategorizeTransactionAsExpenseDTO,
+  ICashflowTransactionCategorizedPayload,
+} from '@/interfaces';
+import { Inject, Service } from 'typedi';
+import UnitOfWork from '../UnitOfWork';
+import events from '@/subscribers/events';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import HasTenancyService from '../Tenancy/TenancyService';
+import { Knex } from 'knex';
+import { CreateExpense } from '../Expenses/CRUD/CreateExpense';
+
+@Service()
+export class CategorizeTransactionAsExpense {
+  @Inject()
+  private uow: UnitOfWork;
+
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject()
+  private createExpenseService: CreateExpense;
+
+  /**
+   * Categorize the transaction as expense transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   * @param {CategorizeTransactionAsExpenseDTO} transactionDTO
+   */
+  public async categorize(
+    tenantId: number,
+    cashflowTransactionId: number,
+    transactionDTO: CategorizeTransactionAsExpenseDTO
+  ) {
+    const { CashflowTransaction } = this.tenancy.models(tenantId);
+
+    const transaction = await CashflowTransaction.query()
+      .findById(cashflowTransactionId)
+      .throwIfNotFound();
+
+    return this.uow.withTransaction(tenantId, async (trx: Knex.Transaction) => {
+      // Triggers `onTransactionUncategorizing` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionCategorizingAsExpense,
+        {
+          tenantId,
+          trx,
+        } as ICashflowTransactionCategorizedPayload
+      );
+      // Creates a new expense transaction.
+      const expenseTransaction = await this.createExpenseService.newExpense(
+        tenantId,
+        {
+          
+        },
+        1
+      );
+      // Updates the item on the storage and fetches the updated once.
+      const cashflowTransaction = await CashflowTransaction.query(
+        trx
+      ).patchAndFetchById(cashflowTransactionId, {
+        categorizeRefType: 'Expense',
+        categorizeRefId: expenseTransaction.id,
+        uncategorized: true,
+      });
+      // Triggers `onTransactionUncategorized` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionCategorizedAsExpense,
+        {
+          tenantId,
+          cashflowTransaction,
+          trx,
+        } as ICashflowTransactionUncategorizedPayload
+      );
+    });
+  }
+}

packages/server/src/services/Cashflow/CommandCasflowValidator.ts

@@ -1,9 +1,14 @@
 import { Service } from 'typedi';
 import { includes, camelCase, upperFirst } from 'lodash';
-import { IAccount } from '@/interfaces';
+import { IAccount, IUncategorizedCashflowTransaction } from '@/interfaces';
 import { getCashflowTransactionType } from './utils';
 import { ServiceError } from '@/exceptions';
-import { CASHFLOW_TRANSACTION_TYPE, ERRORS } from './constants';
+import {
+  CASHFLOW_DIRECTION,
+  CASHFLOW_TRANSACTION_TYPE,
+  ERRORS,
+} from './constants';
+import CashflowTransaction from '@/models/CashflowTransaction';
 
 @Service()
 export class CommandCashflowValidator {
@@ -46,4 +51,52 @@ export class CommandCashflowValidator {
     }
     return transformedType;
   };
+
+  /**
+   * Validate the given transaction should be categorized.
+   * @param {CashflowTransaction} cashflowTransaction
+   */
+  public validateTransactionShouldCategorized(
+    cashflowTransaction: CashflowTransaction
+  ) {
+    if (!cashflowTransaction.uncategorize) {
+      throw new ServiceError(ERRORS.TRANSACTION_ALREADY_CATEGORIZED);
+    }
+  }
+
+  /**
+   * Validate the given transcation shouldn't be categorized.
+   * @param {CashflowTransaction} cashflowTransaction
+   */
+  public validateTransactionShouldNotCategorized(
+    cashflowTransaction: CashflowTransaction
+  ) {
+    if (cashflowTransaction.uncategorize) {
+      throw new ServiceError(ERRORS.TRANSACTION_ALREADY_CATEGORIZED);
+    }
+  }
+
+  /**
+   *
+   * @param {uncategorizeTransaction}
+   * @param {string} transactionType
+   * @throws {ServiceError(ERRORS.UNCATEGORIZED_TRANSACTION_TYPE_INVALID)}
+   */
+  public validateUncategorizeTransactionType(
+    uncategorizeTransaction: IUncategorizedCashflowTransaction,
+    transactionType: string
+  ) {
+    const type = getCashflowTransactionType(
+      upperFirst(camelCase(transactionType)) as CASHFLOW_TRANSACTION_TYPE
+    );
+    if (
+      (type.direction === CASHFLOW_DIRECTION.IN &&
+        uncategorizeTransaction.isDepositTransaction) ||
+      (type.direction === CASHFLOW_DIRECTION.OUT &&
+        uncategorizeTransaction.isWithdrawalTransaction)
+    ) {
+      return;
+    }
+    throw new ServiceError(ERRORS.UNCATEGORIZED_TRANSACTION_TYPE_INVALID);
+  }
 }

packages/server/src/services/Cashflow/CreateUncategorizedTransaction.ts

@@ -0,0 +1,40 @@
+import { Inject, Service } from 'typedi';
+import HasTenancyService from '../Tenancy/TenancyService';
+import UnitOfWork, { IsolationLevel } from '../UnitOfWork';
+import { Knex } from 'knex';
+import { CreateUncategorizedTransactionDTO } from '@/interfaces';
+
+@Service()
+export class CreateUncategorizedTransaction {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private uow: UnitOfWork;
+
+  /**
+   * Creates an uncategorized cashflow transaction.
+   * @param {number} tenantId
+   * @param {CreateUncategorizedTransactionDTO} createDTO
+   */
+  public create(
+    tenantId: number,
+    createDTO: CreateUncategorizedTransactionDTO
+  ) {
+    const { UncategorizedCashflowTransaction, Account } =
+      this.tenancy.models(tenantId);
+
+    return this.uow.withTransaction(
+      tenantId,
+      async (trx: Knex.Transaction) => {
+        const transaction = await UncategorizedCashflowTransaction.query(
+          trx
+        ).insertAndFetch({
+          ...createDTO,
+        });
+        
+        return transaction;
+      },
+    );
+  }
+}

packages/server/src/services/Cashflow/DeleteCashflowTransactionService.ts

@@ -13,15 +13,15 @@ import UnitOfWork from '@/services/UnitOfWork';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 
 @Service()
-export default class CommandCashflowTransactionService {
+export class DeleteCashflowTransaction {
   @Inject()
-  tenancy: HasTenancyService;
+  private tenancy: HasTenancyService;
 
   @Inject()
-  eventPublisher: EventPublisher;
+  private eventPublisher: EventPublisher;
 
   @Inject()
-  uow: UnitOfWork;
+  private uow: UnitOfWork;
 
   /**
    * Deletes the cashflow transaction with associated journal entries.

packages/server/src/services/Cashflow/GetCashflowTransactionsService.ts

@@ -4,17 +4,13 @@ import { CashflowTransactionTransformer } from './CashflowTransactionTransformer
 import { ERRORS } from './constants';
 import { ICashflowTransaction } from '@/interfaces';
 import { ServiceError } from '@/exceptions';
-import I18nService from '@/services/I18n/I18nService';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
 
 @Service()
-export default class GetCashflowTransactionsService {
+export class GetCashflowTransactionService {
   @Inject()
   private tenancy: HasTenancyService;
 
-  @Inject()
-  private i18nService: I18nService;
-
   @Inject()
   private transfromer: TransformerInjectable;
 
@@ -35,6 +31,7 @@ export default class GetCashflowTransactionsService {
       .withGraphFetched('entries.cashflowAccount')
       .withGraphFetched('entries.creditAccount')
       .withGraphFetched('transactions.account')
+      .orderBy('date', 'DESC')
       .throwIfNotFound();
 
     this.throwErrorCashflowTranscationNotFound(cashflowTransaction);

packages/server/src/services/Cashflow/GetUncategorizedTransaction.ts

@@ -0,0 +1,36 @@
+import { Inject, Service } from 'typedi';
+import HasTenancyService from '../Tenancy/TenancyService';
+import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { UncategorizedTransactionTransformer } from './UncategorizedTransactionTransformer';
+
+@Service()
+export class GetUncategorizedTransaction {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private transformer: TransformerInjectable;
+
+  /**
+   * Retrieves specific uncategorized cashflow transaction.
+   * @param {number} tenantId - Tenant id.
+   * @param {number} uncategorizedTransactionId - Uncategorized transaction id.
+   */
+  public async getTransaction(
+    tenantId: number,
+    uncategorizedTransactionId: number
+  ) {
+    const { UncategorizedCashflowTransaction } = this.tenancy.models(tenantId);
+
+    const transaction = await UncategorizedCashflowTransaction.query()
+      .findById(uncategorizedTransactionId)
+      .withGraphFetched('account')
+      .throwIfNotFound();
+
+    return this.transformer.transform(
+      tenantId,
+      transaction,
+      new UncategorizedTransactionTransformer()
+    );
+  }
+}

packages/server/src/services/Cashflow/GetUncategorizedTransactions.ts

@@ -0,0 +1,51 @@
+import { Inject, Service } from 'typedi';
+import HasTenancyService from '../Tenancy/TenancyService';
+import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { UncategorizedTransactionTransformer } from './UncategorizedTransactionTransformer';
+import { IGetUncategorizedTransactionsQuery } from '@/interfaces';
+
+@Service()
+export class GetUncategorizedTransactions {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private transformer: TransformerInjectable;
+
+  /**
+   * Retrieves the uncategorized cashflow transactions.
+   * @param {number} tenantId - Tenant id.
+   * @param {number} accountId - Account Id.
+   */
+  public async getTransactions(
+    tenantId: number,
+    accountId: number,
+    query: IGetUncategorizedTransactionsQuery
+  ) {
+    const { UncategorizedCashflowTransaction } = this.tenancy.models(tenantId);
+
+    // Parsed query with default values.
+    const _query = {
+      page: 1,
+      pageSize: 20,
+      ...query,
+    };
+    const { results, pagination } =
+      await UncategorizedCashflowTransaction.query()
+        .where('accountId', accountId)
+        .where('categorized', false)
+        .withGraphFetched('account')
+        .orderBy('date', 'DESC')
+        .pagination(_query.page - 1, _query.pageSize);
+
+    const data = await this.transformer.transform(
+      tenantId,
+      results,
+      new UncategorizedTransactionTransformer()
+    );
+    return {
+      data,
+      pagination,
+    };
+  }
+}

packages/server/src/services/Cashflow/NewCashflowTransactionService.ts

@@ -1,11 +1,10 @@
 import { Service, Inject } from 'typedi';
-import { isEmpty, pick } from 'lodash';
+import { pick } from 'lodash';
 import { Knex } from 'knex';
 import * as R from 'ramda';
 import {
   ICashflowNewCommandDTO,
   ICashflowTransaction,
-  ICashflowTransactionLine,
   ICommandCashflowCreatedPayload,
   ICommandCashflowCreatingPayload,
   ICashflowTransactionInput,
@@ -126,7 +125,7 @@ export default class NewCashflowTransactionService {
     tenantId: number,
     newTransactionDTO: ICashflowNewCommandDTO,
     userId?: number
-  ): Promise<{ cashflowTransaction: ICashflowTransaction }> => {
+  ): Promise<ICashflowTransaction> => {
     const { CashflowTransaction, Account } = this.tenancy.models(tenantId);
 
     // Retrieves the cashflow account or throw not found error.
@@ -175,7 +174,7 @@ export default class NewCashflowTransactionService {
           trx,
         } as ICommandCashflowCreatedPayload
       );
-      return { cashflowTransaction };
+      return cashflowTransaction;
     });
   };
 }

packages/server/src/services/Cashflow/UncategorizeCashflowTransaction.ts

@@ -0,0 +1,72 @@
+import { Knex } from 'knex';
+import { Inject, Service } from 'typedi';
+import HasTenancyService from '../Tenancy/TenancyService';
+import UnitOfWork from '../UnitOfWork';
+import events from '@/subscribers/events';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import {
+  ICashflowTransactionUncategorizedPayload,
+  ICashflowTransactionUncategorizingPayload,
+} from '@/interfaces';
+
+@Service()
+export class UncategorizeCashflowTransaction {
+  @Inject()
+  private tenancy: HasTenancyService;
+
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject()
+  private uow: UnitOfWork;
+
+  /**
+   * Uncategorizes the given cashflow transaction.
+   * @param {number} tenantId
+   * @param {number} cashflowTransactionId
+   */
+  public async uncategorize(
+    tenantId: number,
+    uncategorizedTransactionId: number
+  ) {
+    const { UncategorizedCashflowTransaction } = this.tenancy.models(tenantId);
+
+    const oldUncategorizedTransaction =
+      await UncategorizedCashflowTransaction.query()
+        .findById(uncategorizedTransactionId)
+        .throwIfNotFound();
+
+    // Updates the transaction under UOW.
+    return this.uow.withTransaction(tenantId, async (trx: Knex.Transaction) => {
+      // Triggers `onTransactionUncategorizing` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionUncategorizing,
+        {
+          tenantId,
+          trx,
+        } as ICashflowTransactionUncategorizingPayload
+      );
+      // Removes the ref relation with the related transaction.
+      const uncategorizedTransaction =
+        await UncategorizedCashflowTransaction.query(trx).updateAndFetchById(
+          uncategorizedTransactionId,
+          {
+            categorized: false,
+            categorizeRefId: null,
+            categorizeRefType: null,
+          }
+        );
+      // Triggers `onTransactionUncategorized` event.
+      await this.eventPublisher.emitAsync(
+        events.cashflow.onTransactionUncategorized,
+        {
+          tenantId,
+          uncategorizedTransaction,
+          oldUncategorizedTransaction,
+          trx,
+        } as ICashflowTransactionUncategorizedPayload
+      );
+      return uncategorizedTransaction;
+    });
+  }
+}

packages/server/src/services/Cashflow/UncategorizedTransactionTransformer.ts

@@ -0,0 +1,65 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+import { formatNumber } from '@/utils';
+
+export class UncategorizedTransactionTransformer extends Transformer {
+  /**
+   * Include these attributes to sale invoice object.
+   * @returns {string[]}
+   */
+  public includeAttributes = (): string[] => {
+    return [
+      'formattedAmount',
+      'formattedDate',
+      'formattetDepositAmount',
+      'formattedWithdrawalAmount',
+    ];
+  };
+
+  /**
+   * Formattes the transaction date.
+   * @param transaction
+   * @returns {string}
+   */
+  public formattedDate(transaction) {
+    return this.formatDate(transaction.date);
+  }
+
+  /**
+   * Formatted amount.
+   * @param transaction 
+   * @returns {string}
+   */
+  public formattedAmount(transaction) {
+    return formatNumber(transaction.amount, {
+      currencyCode: transaction.currencyCode,
+    });
+  }
+
+  /**
+   * Formatted deposit amount.
+   * @param transaction
+   * @returns {string}
+   */
+  protected formattetDepositAmount(transaction) {
+    if (transaction.isDepositTransaction) {
+      return formatNumber(transaction.deposit, {
+        currencyCode: transaction.currencyCode,
+      });
+    }
+    return '';
+  }
+
+  /**
+   * Formatted withdrawal amount.
+   * @param transaction
+   * @returns {string}
+   */
+  protected formattedWithdrawalAmount(transaction) {
+    if (transaction.isWithdrawalTransaction) {
+      return formatNumber(transaction.withdrawal, {
+        currencyCode: transaction.currencyCode,
+      });
+    }
+    return '';
+  }
+}

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

@@ -8,7 +8,10 @@ export const ERRORS = {
   CREDIT_ACCOUNTS_IDS_NOT_FOUND: 'CREDIT_ACCOUNTS_IDS_NOT_FOUND',
   CREDIT_ACCOUNTS_HAS_INVALID_TYPE: 'CREDIT_ACCOUNTS_HAS_INVALID_TYPE',
   ACCOUNT_ID_HAS_INVALID_TYPE: 'ACCOUNT_ID_HAS_INVALID_TYPE',
-  ACCOUNT_HAS_ASSOCIATED_TRANSACTIONS: 'account_has_associated_transactions'
+  ACCOUNT_HAS_ASSOCIATED_TRANSACTIONS: 'account_has_associated_transactions',
+  TRANSACTION_ALREADY_CATEGORIZED: 'TRANSACTION_ALREADY_CATEGORIZED',
+  TRANSACTION_ALREADY_UNCATEGORIZED: 'TRANSACTION_ALREADY_UNCATEGORIZED',
+  UNCATEGORIZED_TRANSACTION_TYPE_INVALID: 'UNCATEGORIZED_TRANSACTION_TYPE_INVALID'
 };
 
 export enum CASHFLOW_DIRECTION {

packages/server/src/services/Cashflow/subscribers/DeleteCashflowTransactionOnUncategorize.ts

@@ -0,0 +1,40 @@
+import { Inject, Service } from 'typedi';
+import events from '@/subscribers/events';
+import { ICashflowTransactionUncategorizedPayload } from '@/interfaces';
+import { DeleteCashflowTransaction } from '../DeleteCashflowTransactionService';
+
+@Service()
+export class DeleteCashflowTransactionOnUncategorize {
+  @Inject()
+  private deleteCashflowTransactionService: DeleteCashflowTransaction;
+
+  /**
+   * Attaches events with handlers.
+   */
+  public attach = (bus) => {
+    bus.subscribe(
+      events.cashflow.onTransactionUncategorized,
+      this.deleteCashflowTransactionOnUncategorize.bind(this)
+    );
+  };
+
+  /**
+   * Deletes the cashflow transaction on uncategorize transaction.
+   * @param {ICashflowTransactionUncategorizedPayload} payload
+   */
+  public async deleteCashflowTransactionOnUncategorize({
+    tenantId,
+    oldUncategorizedTransaction,
+    trx,
+  }: ICashflowTransactionUncategorizedPayload) {
+    // Deletes the cashflow transaction.
+    if (
+      oldUncategorizedTransaction.categorizeRefType === 'CashflowTransaction'
+    ) {
+      await this.deleteCashflowTransactionService.deleteCashflowTransaction(
+        tenantId,
+        oldUncategorizedTransaction.categorizeRefId
+      );
+    }
+  }
+}

packages/server/src/services/Cashflow/utils.ts

@@ -1,13 +1,19 @@
-import { upperFirst, camelCase } from 'lodash';
+import { upperFirst, camelCase, omit } from 'lodash';
 import {
   CASHFLOW_TRANSACTION_TYPE,
   CASHFLOW_TRANSACTION_TYPE_META,
   ICashflowTransactionTypeMeta,
 } from './constants';
+import {
+  ICashflowNewCommandDTO,
+  ICashflowTransaction,
+  ICategorizeCashflowTransactioDTO,
+  IUncategorizedCashflowTransaction,
+} from '@/interfaces';
 
 /**
  * Ensures the given transaction type to transformed to appropriate format.
- * @param {string} type 
+ * @param {string} type
  * @returns {string}
  */
 export const transformCashflowTransactionType = (type) => {
@@ -32,3 +38,29 @@ export function getCashflowTransactionType(
 export const getCashflowAccountTransactionsTypes = () => {
   return Object.values(CASHFLOW_TRANSACTION_TYPE_META).map((meta) => meta.type);
 };
+
+/**
+ * Tranasformes the given uncategorized transaction and categorized DTO
+ * to cashflow create DTO.
+ * @param {IUncategorizedCashflowTransaction} uncategorizeModel 
+ * @param {ICategorizeCashflowTransactioDTO} categorizeDTO 
+ * @returns {ICashflowNewCommandDTO}
+ */
+export const transformCategorizeTransToCashflow = (
+  uncategorizeModel: IUncategorizedCashflowTransaction,
+  categorizeDTO: ICategorizeCashflowTransactioDTO
+): ICashflowNewCommandDTO => {
+  return {
+    date: uncategorizeModel.date,
+    referenceNo: categorizeDTO.referenceNo || uncategorizeModel.referenceNo,
+    description: categorizeDTO.description || uncategorizeModel.description,
+    cashflowAccountId: uncategorizeModel.accountId,
+    creditAccountId: categorizeDTO.creditAccountId,
+    exchangeRate: categorizeDTO.exchangeRate || 1,
+    currencyCode: uncategorizeModel.currencyCode,
+    amount: uncategorizeModel.amount,
+    transactionNumber: categorizeDTO.transactionNumber,
+    transactionType: categorizeDTO.transactionType,
+    publish: true,
+  };
+};

packages/server/src/subscribers/events.ts

@@ -392,6 +392,15 @@ export default {
 
     onTransactionDeleting: 'onCashflowTransactionDeleting',
     onTransactionDeleted: 'onCashflowTransactionDeleted',
+
+    onTransactionCategorizing: 'onTransactionCategorizing',
+    onTransactionCategorized: 'onCashflowTransactionCategorized',
+
+    onTransactionUncategorizing: 'onTransactionUncategorizing',
+    onTransactionUncategorized: 'onTransactionUncategorized',
+
+    onTransactionCategorizingAsExpense: 'onTransactionCategorizingAsExpense',
+    onTransactionCategorizedAsExpense: 'onTransactionCategorizedAsExpense',
   },
 
   /**

packages/webapp/src/components/ContentTabs/ContentTabs.tsx

@@ -0,0 +1,111 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+
+const ContentTabsRoot = styled('div')`
+  display: flex;
+  gap: 10px;
+`;
+interface ContentTabItemRootProps {
+  active?: boolean;
+}
+const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
+  flex: 1 0;
+  background: #fff;
+  border: 1px solid #e1e2e8;
+  border-radius: 5px;
+  padding: 11px;
+  text-align: left;
+  cursor: pointer;
+
+  ${(props) =>
+    props.active &&
+    `
+      border-color: #1552c8;
+      box-shadow: 0 0 0 0.25px #1552c8;
+
+      ${ContentTabTitle} {
+        color: #1552c8;
+        font-weight: 500;
+      }
+      ${ContentTabDesc} {
+        color: #1552c8;        
+      }
+    `}
+  &:hover,
+  &:active {
+    border-color: #1552c8;
+  }
+`;
+const ContentTabTitle = styled('h3')`
+  font-size: 14px;
+  font-weight: 400;
+  color: #2f343c;
+`;
+const ContentTabDesc = styled('p')`
+  margin: 0;
+  color: #5f6b7c;
+  margin-top: 4px;
+  font-size: 12px;
+`;
+
+interface ContentTabsItemProps {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  active?: boolean;
+}
+
+const ContentTabsItem = ({
+  title,
+  description,
+  active,
+  onClick,
+}: ContentTabsItemProps) => {
+  return (
+    <ContentTabItemRoot active={active} onClick={onClick}>
+      <ContentTabTitle>{title}</ContentTabTitle>
+      <ContentTabDesc>{description}</ContentTabDesc>
+    </ContentTabItemRoot>
+  );
+};
+
+interface ContentTabsProps {
+  initialValue?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ContentTabs({
+  initialValue,
+  value,
+  onChange,
+  children,
+  className,
+}: ContentTabsProps) {
+  const [localValue, handleItemChange] = useUncontrolled<string>({
+    initialValue,
+    value,
+    onChange,
+    finalValue: '',
+  });
+  const tabs = React.Children.toArray(children);
+
+  return (
+    <ContentTabsRoot className={className}>
+      {tabs.map((tab) => (
+        <ContentTabsItem
+          key={tab.key}
+          {...tab.props}
+          active={localValue === tab.props.id}
+          onClick={() => handleItemChange(tab.props?.id)}
+        />
+      ))}
+    </ContentTabsRoot>
+  );
+}
+
+ContentTabs.Tab = ContentTabsItem;

packages/webapp/src/components/ContentTabs/index.ts

@@ -0,0 +1 @@
+export * from './ContentTabs';

packages/webapp/src/components/Drawer/DrawerBody.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import clsx from 'classnames';
 import { Classes } from '@blueprintjs/core';
 import { LoadingIndicator } from '../Indicator';
 
@@ -11,8 +12,8 @@ export function DrawerLoading({ loading, mount = false, children }) {
   );
 }
 
-export function DrawerBody({ children }) {
-  return <div className={Classes.DRAWER_BODY}>{children}</div>;
+export function DrawerBody({ children, className }) {
+  return <div className={clsx(Classes.DRAWER_BODY, className)}>{children}</div>;
 }
 
 export * from './DrawerActionsBar';

packages/webapp/src/components/DrawersContainer.tsx

@@ -23,6 +23,7 @@ import WarehouseTransferDetailDrawer from '@/containers/Drawers/WarehouseTransfe
 import TaxRateDetailsDrawer from '@/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsDrawer';
 
 import { DRAWERS } from '@/constants/drawers';
+import CategorizeTransactionDrawer from '@/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionDrawer';
 
 /**
  * Drawers container of the dashboard.
@@ -61,6 +62,7 @@ export default function DrawersContainer() {
         name={DRAWERS.WAREHOUSE_TRANSFER_DETAILS}
       />
       <TaxRateDetailsDrawer name={DRAWERS.TAX_RATE_DETAILS} />
+      <CategorizeTransactionDrawer name={DRAWERS.CATEGORIZE_TRANSACTION} />
     </div>
   );
 }

packages/webapp/src/components/Forms/Select.tsx

@@ -26,12 +26,12 @@ const SelectButton = styled(Button)`
   position: relative;
   padding-right: 30px;
 
-  &.bp4-small{
+  &.bp4-small {
     padding-right: 24px;
   }
 
   &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
-    color: #5c7080;
+    color: #8f99a8;
   }
   &:after {
     content: '';

packages/webapp/src/constants/drawers.ts

@@ -23,4 +23,5 @@ export enum DRAWERS {
   REFUND_VENDOR_CREDIT_DETAILS = 'refund-vendor-detail-drawer',
   WAREHOUSE_TRANSFER_DETAILS = 'warehouse-transfer-detail-drawer',
   TAX_RATE_DETAILS = 'tax-rate-detail-drawer',
+  CATEGORIZE_TRANSACTION = 'categorize-transaction',
 }

packages/webapp/src/constants/tables.tsx

@@ -15,6 +15,7 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
+  UNCATEGORIZED_CASHFLOW_TRANSACTION: 'UNCATEGORIZED_CASHFLOW_TRANSACTION',
   CREDIT_NOTES: 'credit_notes',
   VENDOR_CREDITS: 'vendor_credits',
   WAREHOUSE_TRANSFERS: 'warehouse_transfers',

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

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React from 'react';
+import { flatten, map } from 'lodash';
+import { IntersectionObserver } from '@/components';
+import { useAccountTransactionsInfinity } from '@/hooks/query';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+const AccountTransactionsAllBootContext = React.createContext();
+
+function flattenInfinityPages(data) {
+  return flatten(map(data.pages, (page) => page.transactions));
+}
+
+interface AccountTransactionsAllPoviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Account transctions all provider.
+ */
+function AccountTransactionsAllProvider({
+  children,
+}: AccountTransactionsAllPoviderProps) {
+  const { accountId } = useAccountTransactionsContext();
+
+  // Fetch cashflow account transactions list
+  const {
+    data: cashflowTransactionsPages,
+    isFetching: isCashFlowTransactionsFetching,
+    isLoading: isCashFlowTransactionsLoading,
+    isSuccess: isCashflowTransactionsSuccess,
+    fetchNextPage: fetchNextTransactionsPage,
+    isFetchingNextPage: isCashflowTransactionsFetchingNextPage,
+    hasNextPage: hasCashflowTransactionsNextPgae,
+  } = useAccountTransactionsInfinity(accountId, {
+    page_size: 50,
+    account_id: accountId,
+  });
+  // Memorized the cashflow account transactions.
+  const cashflowTransactions = React.useMemo(
+    () =>
+      isCashflowTransactionsSuccess
+        ? flattenInfinityPages(cashflowTransactionsPages)
+        : [],
+    [cashflowTransactionsPages, isCashflowTransactionsSuccess],
+  );
+  // Handle the observer ineraction.
+  const handleObserverInteract = React.useCallback(() => {
+    if (!isCashFlowTransactionsFetching && hasCashflowTransactionsNextPgae) {
+      fetchNextTransactionsPage();
+    }
+  }, [
+    isCashFlowTransactionsFetching,
+    hasCashflowTransactionsNextPgae,
+    fetchNextTransactionsPage,
+  ]);
+  // Provider payload.
+  const provider = {
+    cashflowTransactions,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+  };
+
+  return (
+    <AccountTransactionsAllBootContext.Provider value={provider}>
+      {children}
+      <IntersectionObserver
+        onIntersect={handleObserverInteract}
+        enabled={!isCashflowTransactionsFetchingNextPage}
+      />
+    </AccountTransactionsAllBootContext.Provider>
+  );
+}
+
+const useAccountTransactionsAllContext = () =>
+  React.useContext(AccountTransactionsAllBootContext);
+
+export { AccountTransactionsAllProvider, useAccountTransactionsAllContext };

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

@@ -18,10 +18,10 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
-import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from '@/utils';
+import { useAccountTransactionsAllContext } from './AccountTransactionsAllBoot';
 
 /**
  * Account transactions data table.
@@ -41,7 +41,7 @@ function AccountTransactionsDataTable({
 
   // Retrieve list context.
   const { cashflowTransactions, isCashFlowTransactionsLoading } =
-    useAccountTransactionsContext();
+    useAccountTransactionsAllContext();
 
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
@@ -51,11 +51,10 @@ function AccountTransactionsDataTable({
   const handleDeleteTransaction = ({ reference_id }) => {
     openAlert('account-transaction-delete', { referenceId: reference_id });
   };
-
+  // Handle view details action.
   const handleViewDetailCashflowTransaction = (referenceType) => {
     handleCashFlowTransactionType(referenceType, openDrawer);
   };
-
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     const referenceType = cell.row.original;

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

@@ -84,6 +84,18 @@ function AccountBankBalanceItem() {
   );
 }
 
+function AccountNumberItem() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  if (!currentAccount.account_mask) return null;
+
+  return (
+    <AccountBalanceItemWrap>
+      Account Number: xxx{currentAccount.account_mask}
+    </AccountBalanceItemWrap>
+  );
+}
+
 function AccountTransactionsDetailsBarSkeleton() {
   return (
     <React.Fragment>
@@ -101,6 +113,7 @@ function AccountTransactionsDetailsContent() {
   return (
     <React.Fragment>
       <AccountSwitchItem />
+      <AccountNumberItem />
       <AccountBalanceItem />
       <AccountBankBalanceItem />
     </React.Fragment>

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

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { ContentTabs } from '@/components/ContentTabs/ContentTabs';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+const AccountContentTabs = styled(ContentTabs)`
+  margin: 15px 15px 0 15px;
+`;
+
+export function AccountTransactionsFilterTabs() {
+  const { filterTab, setFilterTab, currentAccount } =
+    useAccountTransactionsContext();
+
+  const handleChange = (value) => {
+    setFilterTab(value);
+  };
+
+  const hasUncategorizedTransx = Boolean(
+    currentAccount.uncategorized_transactions,
+  );
+
+  return (
+    <AccountContentTabs value={filterTab} onChange={handleChange}>
+      <ContentTabs.Tab
+        id={'dashboard'}
+        title={'Dashboard'}
+        description={'Account Summary'}
+      />
+      {hasUncategorizedTransx && (
+        <ContentTabs.Tab
+          id={'uncategorized'}
+          title={
+            <>
+              <span style={{ color: '#ff0000' }}>
+                {currentAccount.uncategorized_transactions}
+              </span>{' '}
+              Uncategorized Transactions
+            </>
+          }
+          description={'For Bank Statement'}
+        />
+      )}
+      <ContentTabs.Tab
+        id="all"
+        title={'All Transactions'}
+        description={'In Bigcapital'}
+      />
+    </AccountContentTabs>
+  );
+}

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

@@ -1,16 +1,19 @@
 // @ts-nocheck
-import React from 'react';
-import styled from 'styled-components';
+import React, { Suspense } from 'react';
+import { Spinner } from '@blueprintjs/core';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
 import { DashboardPageContent } from '@/components';
 
 import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
-import AccountTransactionsDataTable from './AccountTransactionsDataTable';
-import { AccountTransactionsProvider } from './AccountTransactionsProvider';
+import {
+  AccountTransactionsProvider,
+  useAccountTransactionsContext,
+} from './AccountTransactionsProvider';
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsProgressBar } from './components';
+import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 
 /**
  * Account transactions list.
@@ -23,9 +26,11 @@ function AccountTransactionsList() {
       <AccountTransactionsProgressBar />
 
       <DashboardPageContent>
-        <CashflowTransactionsTableCard>
-          <AccountTransactionsDataTable />
-        </CashflowTransactionsTableCard>
+        <AccountTransactionsFilterTabs />
+
+        <Suspense fallback={<Spinner size={30} />}>
+          <AccountTransactionsContent />
+        </Suspense>
       </DashboardPageContent>
     </AccountTransactionsProvider>
   );
@@ -33,11 +38,20 @@ function AccountTransactionsList() {
 
 export default AccountTransactionsList;
 
-const CashflowTransactionsTableCard = styled.div`
-  border: 2px solid #f0f0f0;
-  border-radius: 10px;
-  padding: 30px 18px;
-  margin: 30px 15px;
-  background: #fff;
-  flex: 0 1;
-`;
+const AccountsTransactionsAll = React.lazy(
+  () => import('./AccountsTransactionsAll'),
+);
+
+const AccountsTransactionsUncategorized = React.lazy(
+  () => import('./AllTransactionsUncategorized'),
+);
+
+function AccountTransactionsContent() {
+  const { filterTab } = useAccountTransactionsContext();
+
+  return filterTab === 'uncategorized' ? (
+    <AccountsTransactionsUncategorized />
+  ) : (
+    <AccountsTransactionsAll />
+  );
+}

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

@@ -1,20 +1,12 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { flatten, map } from 'lodash';
-import { IntersectionObserver, DashboardInsider } from '@/components';
-import {
-  useAccountTransactionsInfinity,
-  useCashflowAccounts,
-  useAccount,
-} from '@/hooks/query';
+import { DashboardInsider } from '@/components';
+import { useCashflowAccounts, useAccount } from '@/hooks/query';
+import { useAppQueryString } from '@/hooks';
 
 const AccountTransactionsContext = React.createContext();
 
-function flattenInfinityPages(data) {
-  return flatten(map(data.pages, (page) => page.transactions));
-}
-
 /**
  * Account transctions provider.
  */
@@ -22,29 +14,12 @@ function AccountTransactionsProvider({ query, ...props }) {
   const { id } = useParams();
   const accountId = parseInt(id, 10);
 
-  // Fetch cashflow account transactions list
-  const {
-    data: cashflowTransactionsPages,
-    isFetching: isCashFlowTransactionsFetching,
-    isLoading: isCashFlowTransactionsLoading,
-    isSuccess: isCashflowTransactionsSuccess,
-    fetchNextPage: fetchNextTransactionsPage,
-    isFetchingNextPage,
-    hasNextPage,
-  } = useAccountTransactionsInfinity(accountId, {
-    page_size: 50,
-    account_id: accountId,
-  });
-
-  // Memorized the cashflow account transactions.
-  const cashflowTransactions = React.useMemo(
-    () =>
-      isCashflowTransactionsSuccess
-        ? flattenInfinityPages(cashflowTransactionsPages)
-        : [],
-    [cashflowTransactionsPages, isCashflowTransactionsSuccess],
-  );
+  const [locationQuery, setLocationQuery] = useAppQueryString();
 
+  const filterTab = locationQuery?.filter || 'all';
+  const setFilterTab = (value: string) => {
+    setLocationQuery({ filter: value });
+  };
   // Fetch cashflow accounts.
   const {
     data: cashflowAccounts,
@@ -53,40 +28,31 @@ function AccountTransactionsProvider({ query, ...props }) {
   } = useCashflowAccounts(query, { keepPreviousData: true });
 
   // Retrieve specific account details.
+  
   const {
     data: currentAccount,
     isFetching: isCurrentAccountFetching,
     isLoading: isCurrentAccountLoading,
   } = useAccount(accountId, { keepPreviousData: true });
 
-  // Handle the observer ineraction.
-  const handleObserverInteract = React.useCallback(() => {
-    if (!isFetchingNextPage && hasNextPage) {
-      fetchNextTransactionsPage();
-    }
-  }, [isFetchingNextPage, hasNextPage, fetchNextTransactionsPage]);
-
   // Provider payload.
   const provider = {
     accountId,
-    cashflowTransactions,
     cashflowAccounts,
     currentAccount,
-    isCashFlowTransactionsFetching,
-    isCashFlowTransactionsLoading,
+
     isCashFlowAccountsFetching,
     isCashFlowAccountsLoading,
     isCurrentAccountFetching,
     isCurrentAccountLoading,
+
+    filterTab,
+    setFilterTab,
   };
 
   return (
     <DashboardInsider name={'account-transactions'}>
       <AccountTransactionsContext.Provider value={provider} {...props} />
-      <IntersectionObserver
-        onIntersect={handleObserverInteract}
-        enabled={!isFetchingNextPage}
-      />
     </DashboardInsider>
   );
 }

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

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { Tag } from '@blueprintjs/core';
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 18px;
+`;
+
+const FilterTag = styled(Tag)`
+  min-height: 26px;
+
+  &.bp4-minimal:not([class*='bp4-intent-']) {
+    background: #fff;
+    border: 1px solid #e1e2e8;
+
+    &.bp4-interactive:hover {
+      background-color: rgba(143, 153, 168, 0.05);
+    }
+  }
+`;
+
+export function AccountTransactionsUncategorizeFilter() {
+  return (
+    <Root>
+      <FilterTag round interactive>
+        All <strong>(2)</strong>
+      </FilterTag>
+      <FilterTag round minimal interactive>
+        Recognized <strong>(0)</strong>
+      </FilterTag>
+    </Root>
+  );
+}

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

@@ -0,0 +1,129 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  DataTable,
+  TableFastCell,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  TableVirtualizedListRows,
+  FormattedMessage as T,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useMemorizedColumnsWidths } from '@/hooks';
+import {
+  ActionsMenu,
+  useAccountUncategorizedTransactionsColumns,
+} from './components';
+import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUncategorizedBoot';
+
+import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
+
+/**
+ * Account transactions data table.
+ */
+function AccountTransactionsDataTable({
+  // #withSettings
+  cashflowTansactionsTableSize,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Retrieve table columns.
+  const columns = useAccountUncategorizedTransactionsColumns();
+
+  // Retrieve list context.
+  const { uncategorizedTransactions, isUncategorizedTransactionsLoading } =
+    useAccountUncategorizedTransactionsContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_CASHFLOW_TRANSACTION);
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer(DRAWERS.CATEGORIZE_TRANSACTION, {
+      uncategorizedTransactionId: cell.row.original.id,
+    });
+  };
+
+  return (
+    <CashflowTransactionsTable
+      noInitialFetch={true}
+      columns={columns}
+      data={uncategorizedTransactions || []}
+      sticky={true}
+      loading={isUncategorizedTransactionsLoading}
+      headerLoading={isUncategorizedTransactionsLoading}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={cashflowTansactionsTableSize === 'small' ? 32 : 40}
+      vListOverscanRowCount={0}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      className="table-constrant"
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+  withDrawerActions,
+)(AccountTransactionsDataTable);
+
+const DashboardConstrantTable = styled(DataTable)`
+  .table {
+    .thead {
+      .th {
+        background: #fff;
+      }
+    }
+
+    .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/AccountsTransactionsAll.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import styled from 'styled-components';
+
+import '@/style/pages/CashFlow/AccountTransactions/List.scss';
+
+import AccountTransactionsDataTable from './AccountTransactionsDataTable';
+import { AccountTransactionsUncategorizeFilter } from './AccountTransactionsUncategorizeFilter';
+import { AccountTransactionsAllProvider } from './AccountTransactionsAllBoot';
+
+const Box = styled.div`
+  margin: 30px 15px;
+`;
+
+const CashflowTransactionsTableCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  background: #fff;
+  flex: 0 1;
+`;
+
+export default function AccountTransactionsAll() {
+  return (
+    <AccountTransactionsAllProvider>
+      <Box>
+        <AccountTransactionsUncategorizeFilter />
+
+        <CashflowTransactionsTableCard>
+          <AccountTransactionsDataTable />
+        </CashflowTransactionsTableCard>
+      </Box>
+    </AccountTransactionsAllProvider>
+  );
+}

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

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import styled from 'styled-components';
+
+import '@/style/pages/CashFlow/AccountTransactions/List.scss';
+
+import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable';
+import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot';
+
+const Box = styled.div`
+  margin: 30px 15px;
+`;
+
+const CashflowTransactionsTableCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  background: #fff;
+  flex: 0 1;
+`;
+
+export default function AllTransactionsUncategorized() {
+  return (
+    <AccountUncategorizedTransactionsBoot>
+      <Box>
+        <CashflowTransactionsTableCard>
+          <AccountTransactionsUncategorizedTable />
+        </CashflowTransactionsTableCard>
+      </Box>
+    </AccountUncategorizedTransactionsBoot>
+  );
+}

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

@@ -0,0 +1,78 @@
+// @ts-nocheck
+
+import React from 'react';
+import { flatten, map } from 'lodash';
+import { IntersectionObserver } from '@/components';
+import { useAccountUncategorizedTransactionsInfinity } from '@/hooks/query';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+const AccountUncategorizedTransactionsContext = React.createContext();
+
+function flattenInfinityPagesData(data) {
+  return flatten(map(data.pages, (page) => page.data));
+}
+
+/**
+ * Account uncategorized transctions provider.
+ */
+function AccountUncategorizedTransactionsBoot({ children }) {
+  const { accountId } = useAccountTransactionsContext();
+
+  // Fetches the uncategorized transactions.
+  const {
+    data: uncategorizedTransactionsPage,
+    isFetching: isUncategorizedTransactionFetching,
+    isLoading: isUncategorizedTransactionsLoading,
+    isSuccess: isUncategorizedTransactionsSuccess,
+    isFetchingNextPage: isUncategorizedTransactionFetchNextPage,
+    fetchNextPage: fetchNextUncategorizedTransactionsPage,
+    hasNextPage: hasUncategorizedTransactionsNextPage,
+  } = useAccountUncategorizedTransactionsInfinity(accountId, {
+    page_size: 50,
+  });
+  // Memorized the cashflow account transactions.
+  const uncategorizedTransactions = React.useMemo(
+    () =>
+      isUncategorizedTransactionsSuccess
+        ? flattenInfinityPagesData(uncategorizedTransactionsPage)
+        : [],
+    [uncategorizedTransactionsPage, isUncategorizedTransactionsSuccess],
+  );
+  // Handle the observer ineraction.
+  const handleObserverInteract = React.useCallback(() => {
+    if (
+      !isUncategorizedTransactionFetching &&
+      hasUncategorizedTransactionsNextPage
+    ) {
+      fetchNextUncategorizedTransactionsPage();
+    }
+  }, [
+    isUncategorizedTransactionFetching,
+    hasUncategorizedTransactionsNextPage,
+    fetchNextUncategorizedTransactionsPage,
+  ]);
+  // Provider payload.
+  const provider = {
+    uncategorizedTransactions,
+    isUncategorizedTransactionFetching,
+    isUncategorizedTransactionsLoading,
+  };
+
+  return (
+    <AccountUncategorizedTransactionsContext.Provider value={provider}>
+      {children}
+      <IntersectionObserver
+        onIntersect={handleObserverInteract}
+        enabled={!isUncategorizedTransactionFetchNextPage}
+      />
+    </AccountUncategorizedTransactionsContext.Provider>
+  );
+}
+
+const useAccountUncategorizedTransactionsContext = () =>
+  React.useContext(AccountUncategorizedTransactionsContext);
+
+export {
+  AccountUncategorizedTransactionsBoot,
+  useAccountUncategorizedTransactionsContext,
+};

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

@@ -39,6 +39,7 @@ export function ActionsMenu({
     </Menu>
   );
 }
+
 /**
  * Retrieve account transctions table columns.
  */
@@ -131,7 +132,75 @@ export function useAccountTransactionsColumns() {
  * Account transactions progress bar.
  */
 export function AccountTransactionsProgressBar() {
-  const { isCashFlowTransactionsFetching } = useAccountTransactionsContext();
+  const { isCashFlowTransactionsFetching, isUncategorizedTransactionFetching } =
+    useAccountTransactionsContext();
 
-  return isCashFlowTransactionsFetching ? <MaterialProgressBar /> : null;
+  return isCashFlowTransactionsFetching ||
+    isUncategorizedTransactionFetching ? (
+    <MaterialProgressBar />
+  ) : null;
+}
+
+/**
+ * Retrieve account uncategorized transctions table columns.
+ */
+export function useAccountUncategorizedTransactionsColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        width: 40,
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'description',
+        Header: 'Description',
+        accessor: 'description',
+        width: 160,
+        textOverview: true,
+        clickable: true,
+      },
+      {
+        id: 'payee',
+        Header: 'Payee',
+        accessor: 'payee',
+        width: 60,
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 50,
+        className: 'reference_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'deposit',
+        Header: intl.get('cash_flow.label.deposit'),
+        accessor: 'formattet_deposit_amount',
+        width: 40,
+        className: 'deposit',
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'withdrawal',
+        Header: intl.get('cash_flow.label.withdrawal'),
+        accessor: 'formatted_withdrawal_amount',
+        className: 'withdrawal',
+        width: 40,
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+    ],
+    [],
+  );
 }

packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -110,12 +110,12 @@ function CashFlowAccountsActionsBar({
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
-        {/* <Button
+        <Button
           className={Classes.MINIMAL}
           text={'Connect to Bank / Credit Card'}
           onClick={handleConnectToBank}
         />
-        <NavbarDivider /> */}
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}

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

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import React from 'react';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';
+import {
+  useAccounts,
+  useBranches,
+  useUncategorizedTransaction,
+} from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+const CategorizeTransactionBootContext = React.createContext();
+
+/**
+ * Categorize transcation boot.
+ */
+function CategorizeTransactionBoot({ uncategorizedTransactionId, ...props }) {
+  // Detarmines whether the feature is enabled.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches accounts list.
+  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+
+  // Fetches the branches list.
+  const { data: branches, isLoading: isBranchesLoading } = useBranches(
+    {},
+    { enabled: isBranchFeatureCan },
+  );
+  // Retrieves the uncategorized transaction.
+  const {
+    data: uncategorizedTransaction,
+    isLoading: isUncategorizedTransactionLoading,
+  } = useUncategorizedTransaction(uncategorizedTransactionId);
+
+  const provider = {
+    uncategorizedTransactionId,
+    uncategorizedTransaction,
+    isUncategorizedTransactionLoading,
+    branches,
+    accounts,
+    isBranchesLoading,
+    isAccountsLoading,
+  };
+  const isLoading =
+    isBranchesLoading || isUncategorizedTransactionLoading || isAccountsLoading;
+
+  return (
+    <DrawerLoading loading={isLoading}>
+      <DrawerHeaderContent
+        name={DRAWERS.CATEGORIZE_TRANSACTION}
+        title={'Categorize Transaction'}
+      />
+      <CategorizeTransactionBootContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useCategorizeTransactionBoot = () =>
+  React.useContext(CategorizeTransactionBootContext);
+
+export { CategorizeTransactionBoot, useCategorizeTransactionBoot };

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

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { DrawerBody } from '@/components';
+import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
+import { CategorizeTransactionForm } from './CategorizeTransactionForm';
+
+export default function CategorizeTransactionContent({
+  uncategorizedTransactionId,
+}) {
+  return (
+    <CategorizeTransactionBoot
+      uncategorizedTransactionId={uncategorizedTransactionId}
+    >
+      <CategorizeTransactionDrawerBody>
+        <CategorizeTransactionForm />
+      </CategorizeTransactionDrawerBody>
+    </CategorizeTransactionBoot>
+  );
+}
+
+export const CategorizeTransactionDrawerBody = styled(DrawerBody)`
+  padding: 20px;
+  background-color: #fff;
+`;

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const CategorizeTransactionContent = lazy(
+  () => import('./CategorizeTransactionContent'),
+);
+
+/**
+ * Categorize the uncategorized transaction drawer.
+ */
+function CategorizeTransactionDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { uncategorizedTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '480px', maxWidth: '600px' }}
+      size={'40%'}
+    >
+      <DrawerSuspense>
+        <CategorizeTransactionContent
+          uncategorizedTransactionId={uncategorizedTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(CategorizeTransactionDrawer);

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionForm.schema.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  amount: Yup.string().required().label('Amount'),
+  exchangeRate: Yup.string().required().label('Exchange rate'),
+  transactionType: Yup.string().required().label('Transaction type'),
+  date: Yup.string().required().label('Date'),
+  creditAccountId: Yup.string().required().label('Credit account'),
+  referenceNo: Yup.string().optional().label('Reference No.'),
+  description: Yup.string().optional().label('Description'),
+});
+
+export const CreateCategorizeTransactionSchema = Schema;

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

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import { Formik, Form } from 'formik';
+import styled from 'styled-components';
+import { CreateCategorizeTransactionSchema } from './CategorizeTransactionForm.schema';
+import { CategorizeTransactionFormContent } from './CategorizeTransactionFormContent';
+import { CategorizeTransactionFormFooter } from './CategorizeTransactionFormFooter';
+import { useCategorizeTransaction } from '@/hooks/query';
+import { useCategorizeTransactionBoot } from './CategorizeTransactionBoot';
+import { DRAWERS } from '@/constants/drawers';
+import {
+  transformToCategorizeForm,
+  defaultInitialValues,
+  tranformToRequest,
+} from './_utils';
+import { compose } from '@/utils';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+
+/**
+ * Categorize cashflow transaction form dialog content.
+ */
+function CategorizeTransactionFormRoot({
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { uncategorizedTransactionId, uncategorizedTransaction } =
+    useCategorizeTransactionBoot();
+  const { mutateAsync: categorizeTransaction } = useCategorizeTransaction();
+
+  // Callbacks handles form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const transformedValues = tranformToRequest(values);
+
+    setSubmitting(true);
+    categorizeTransaction([uncategorizedTransactionId, transformedValues])
+      .then(() => {
+        setSubmitting(false);
+        closeDrawer(DRAWERS.CATEGORIZE_TRANSACTION);
+        
+        AppToaster.show({
+          message: 'The uncategorized transaction has been categorized.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        setSubmitting(false);
+        AppToaster.show({
+          message: 'Something went wrong!',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+  // Form initial values in create and edit mode.
+  const initialValues = {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToCategorizeForm(uncategorizedTransaction),
+  };
+
+  return (
+    <DivRoot>
+      <Formik
+        validationSchema={CreateCategorizeTransactionSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <CategorizeTransactionFormContent />
+          <CategorizeTransactionFormFooter />
+        </Form>
+      </Formik>
+    </DivRoot>
+  );
+}
+
+export const CategorizeTransactionForm = compose(withDrawerActions)(
+  CategorizeTransactionFormRoot,
+);
+
+const DivRoot = styled.div`
+  .bp4-form-group .bp4-form-content {
+    flex: 1 0;
+  }
+  .bp4-form-group .bp4-label {
+    width: 140px;
+  }
+  .bp4-form-group {
+    margin-bottom: 18px;
+  }
+`;

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

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FormGroup } from '@blueprintjs/core';
+import { FFormGroup, FSelect, } from '@/components';
+import { getAddMoneyInOptions, getAddMoneyOutOptions } from '@/constants';
+import { useFormikContext } from 'formik';
+import { useCategorizeTransactionBoot } from './CategorizeTransactionBoot';
+
+// Retrieves the add money in button options.
+const MoneyInOptions = getAddMoneyInOptions();
+const MoneyOutOptions = getAddMoneyOutOptions();
+
+const Title = styled('h3')`
+  font-size: 20px;
+  font-weight: 400;
+  color: #cd4246;
+`;
+
+export function CategorizeTransactionFormContent() {
+  const { uncategorizedTransaction } = useCategorizeTransactionBoot();
+
+  const transactionTypes = uncategorizedTransaction?.is_deposit_transaction
+    ? MoneyInOptions
+    : MoneyOutOptions;
+
+  return (
+    <>
+      <FormGroup label={'Amount'} inline>
+        <Title>{uncategorizedTransaction.formatted_amount}</Title>
+      </FormGroup>
+
+      <FFormGroup name={'category'} label={'Category'} fastField inline>
+        <FSelect
+          name={'transactionType'}
+          items={transactionTypes}
+          popoverProps={{ minimal: true }}
+          valueAccessor={'value'}
+          textAccessor={'name'}
+          fill
+        />
+      </FFormGroup>
+
+      <CategorizeTransactionFormSubContent />
+    </>
+  );
+}
+
+const CategorizeTransactionOtherIncome = React.lazy(
+  () => import('./MoneyIn/CategorizeTransactionOtherIncome'),
+);
+
+const CategorizeTransactionOwnerContribution = React.lazy(
+  () => import('./MoneyIn/CategorizeTransactionOwnerContribution'),
+);
+
+const CategorizeTransactionTransferFrom = React.lazy(
+  () => import('./MoneyIn/CategorizeTransactionTransferFrom'),
+);
+
+const CategorizeTransactionOtherExpense = React.lazy(
+  () => import('./MoneyOut/CategorizeTransactionOtherExpense'),
+);
+
+const CategorizeTransactionToAccount = React.lazy(
+  () => import('./MoneyOut/CategorizeTransactionToAccount'),
+);
+
+const CategorizeTransactionOwnerDrawings = React.lazy(
+  () => import('./MoneyOut/CategorizeTransactionOwnerDrawings'),
+);
+
+function CategorizeTransactionFormSubContent() {
+  const { values } = useFormikContext();
+
+  // Other expense.
+  if (values.transactionType === 'other_expense') {
+    return <CategorizeTransactionOtherExpense />;
+    // Owner contribution.
+  } else if (values.transactionType === 'owner_contribution') {
+    return <CategorizeTransactionOwnerContribution />;
+    // Other Income.
+  } else if (values.transactionType === 'other_income') {
+    return <CategorizeTransactionOtherIncome />;
+    // Transfer from account.
+  } else if (values.transactionType === 'transfer_from_account') {
+    return <CategorizeTransactionTransferFrom />;
+    // Transfer to account.
+  } else if (values.transactionType === 'transfer_to_account') {
+    return <CategorizeTransactionToAccount />;
+    // Owner drawings.
+  } else if (values.transactionType === 'OwnerDrawing') {
+    return <CategorizeTransactionOwnerDrawings />;
+  }
+  return null;
+}

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

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+import { Group } from '@/components';
+
+function CategorizeTransactionFormFooterRoot({
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    closeDrawer(DRAWERS.CATEGORIZE_TRANSACTION);
+  };
+
+  return (
+    <Root>
+      <div className={Classes.DRAWER_FOOTER}>
+        <Group spacing={10}>
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Save
+          </Button>
+
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '75px' }}
+          >
+            Close
+          </Button>
+        </Group>
+      </div>
+    </Root>
+  );
+}
+
+export const CategorizeTransactionFormFooter = R.compose(withDrawerActions)(
+  CategorizeTransactionFormFooterRoot,
+);
+
+const Root = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+`;

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyIn/CategorizeTransactionOtherIncome.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionOtherIncome() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'To Account'}
+        fastField={true}
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'Income Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'creditAccountId'}
+          items={accounts}
+          filterByRootTypes={['income']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyIn/CategorizeTransactionOwnerContribution.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionOwnerContribution() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'From Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'Equity Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'creditAccountId'}
+          items={accounts}
+          filterByRootTypes={['equity']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea name={'description'} growVertically large fill />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyIn/CategorizeTransactionTransferFrom.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionTransferFrom() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'From Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'To Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'to_account_id'}
+          items={accounts}
+          filterByRootTypes={['asset']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyOut/CategorizeTransactionOtherExpense.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionOtherExpense() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'Payment Account'}
+        fastField={true}
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'Expense Account'}
+        fastField={true}
+        inline
+      >
+        <AccountsSelect
+          name={'creditAccountId'}
+          items={accounts}
+          filterByRootTypes={['expense']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyOut/CategorizeTransactionOwnerDrawings.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionOwnerDrawings() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'Debit Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'Equity Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'creditAccountId'}
+          items={accounts}
+          filterByRootTypes={['equity']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyOut/CategorizeTransactionToAccount.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { Position } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FDateInput,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
+import { useCategorizeTransactionBoot } from '../CategorizeTransactionBoot';
+
+export default function CategorizeTransactionToAccount() {
+  const { accounts } = useCategorizeTransactionBoot();
+
+  return (
+    <>
+      <FFormGroup name={'date'} label={'Date'} fastField inline>
+        <FDateInput
+          name={'date'}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          inputProps={{ fill: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'debitAccountId'}
+        label={'From Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'debitAccountId'}
+          items={accounts}
+          fastField
+          fill
+          allowCreate
+          disabled
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'creditAccountId'}
+        label={'To Account'}
+        fastField
+        inline
+      >
+        <AccountsSelect
+          name={'creditAccountId'}
+          items={accounts}
+          filterByRootTypes={['assset']}
+          fastField
+          fill
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
+        <FInputGroup name={'reference_no'} fill />
+      </FFormGroup>
+
+      <FFormGroup name={'description'} label={'Description'} fastField inline>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
+    </>
+  );
+}

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import { transformToForm, transfromToSnakeCase } from '@/utils';
+
+// Default initial form values.
+export const defaultInitialValues = {
+  amount: '',
+  date: '',
+  creditAccountId: '',
+  debitAccountId: '',
+  exchangeRate: '1',
+  transactionType: '',
+  referenceNo: '',
+  description: '',
+};
+
+export const transformToCategorizeForm = (uncategorizedTransaction) => {
+  const defaultValues = {
+    debitAccountId: uncategorizedTransaction.account_id,
+    transactionType: uncategorizedTransaction.is_deposit_transaction
+      ? 'other_income'
+      : 'other_expense',
+    amount: uncategorizedTransaction.amount,
+    date: uncategorizedTransaction.date,
+  };
+  return transformToForm(defaultValues, defaultInitialValues);
+};
+
+
+export const tranformToRequest = (formValues) => {
+  return transfromToSnakeCase(formValues);
+};

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/index.ts

@@ -0,0 +1 @@
+export * from './CategorizeTransactionDrawer';

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx

@@ -26,6 +26,7 @@ function ConnectBankDialogBodyRoot({
   const { mutateAsync: getPlaidLinkToken } = useGetPlaidLinkToken();
   const setPlaidId = useSetBankingPlaidToken();
 
+  // Handles the form submitting.
   const handleSubmit = (
     values: ConnectBankDialogForm,
     { setSubmitting }: FormikHelpers<ConnectBankDialogForm>,

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx

@@ -1,30 +1,48 @@
-import { Button } from '@blueprintjs/core';
-import { FFormGroup, FSelect } from '@/components';
-import { useFormikContext } from 'formik';
+// @ts-nocheck
+import styled from 'styled-components';
+import { Stack } from '@/components';
+import { TellerIcon } from '../Icons/TellerIcon';
+import { YodleeIcon } from '../Icons/YodleeIcon';
+import { PlaidIcon } from '../Icons/PlaidIcon';
+import { BankServiceCard } from './ConnectBankServiceCard';
+
+const TopDesc = styled('p')`
+  margin-bottom: 20px;
+  color: #5f6b7c;
+`;
 
 export function ConnectBankDialogContent() {
-  const { isSubmitting } = useFormikContext();
-
   return (
     <div>
-      <FFormGroup
-        label={'Banking Syncing Service Provider'}
-        name={'serviceProvider'}
-      >
-        <FSelect
-          name={'serviceProvider'}
-          valueAccessor={'key'}
-          textAccessor={'label'}
-          popoverProps={{ minimal: true }}
-          items={BankFeedsServiceProviders}
-        />
-      </FFormGroup>
+      <TopDesc>
+        Connect your bank accounts and fetch the bank transactions using
+        one of our supported third-party service providers.
+      </TopDesc>
 
-      <Button type={'submit'} loading={isSubmitting}>
-        Connect
-      </Button>
+      <Stack>
+        <BankServiceCard
+          title={'Plaid (US, UK & Canada)'}
+          icon={<PlaidIcon />}
+        >
+          Plaid gives the connection to 12,000 financial institutions across US, UK and Canada.
+        </BankServiceCard>
+
+        <BankServiceCard
+          title={'Teller (US) — Soon'}
+          icon={<TellerIcon />}
+          disabled
+        >
+          Connect instantly with more than 5,000 financial institutions across US.
+        </BankServiceCard>
+
+        <BankServiceCard
+          title={'Yodlee (Global) — Soon'}
+          icon={<YodleeIcon />}
+          disabled
+        >
+          Connect instantly with a global network of financial institutions.
+        </BankServiceCard>
+      </Stack>
     </div>
   );
 }
-
-export const BankFeedsServiceProviders = [{ label: 'Plaid', key: 'plaid' }];

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { Group } from '@/components';
+
+const BankServiceIcon = styled('div')`
+  height: 40px;
+  width: 40px;
+  border: 1px solid #c8cad0;
+  border-radius: 3px;
+  display: flex;
+
+  svg {
+    margin: auto;
+  }
+`;
+const BankServiceContent = styled(`div`)`
+  flex: 1 0;
+`;
+const BankServiceCardRoot = styled('button')`
+  border-radius: 3px;
+  border: 1px solid #c8cad0;
+  transition: all 0.1s ease-in-out;
+  background: transparent;
+  text-align: inherit;
+  padding: 14px;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+  &:hover:not(:disabled) {
+    border-color: #0153cc;
+  }
+  &:disabled {
+    background: #f9fdff;
+  }
+`;
+const BankServiceTitle = styled(`h3`)`
+  font-weight: 600;
+  font-size: 14px;
+  color: #2d333d;
+`;
+const BankServiceDesc = styled('p')`
+  margin-top: 4px;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: #738091;
+`;
+
+interface BankServiceCardProps {
+  title: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  icon: React.ReactNode;
+}
+
+export function BankServiceCard({
+  title,
+  children,
+  icon,
+  disabled,
+}: BankServiceCardProps) {
+  return (
+    <BankServiceCardRoot disabled={disabled}>
+      <Group>
+        <BankServiceIcon>{icon}</BankServiceIcon>
+        <BankServiceContent>
+          <BankServiceTitle>{title}</BankServiceTitle>
+          <BankServiceDesc>{children}</BankServiceDesc>
+        </BankServiceContent>
+      </Group>
+    </BankServiceCardRoot>
+  );
+}

packages/webapp/src/containers/CashFlow/Icons/PlaidIcon.tsx

@@ -0,0 +1,17 @@
+
+export const PlaidIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={30}
+    height={30}
+    viewBox={'0 0 48 48'}
+    {...props}
+  >
+    <path
+      fill="#111"
+      fillRule="evenodd"
+      d="M18.637 0 4.09 3.81.081 18.439l5.014 5.148L0 28.65l3.773 14.693 14.484 4.047 5.096-5.064 5.014 5.147 14.547-3.81 4.008-14.63-5.013-5.146 5.095-5.063L43.231 4.13 28.745.083l-5.094 5.063zM9.71 6.624l7.663-2.008 3.351 3.44-4.887 4.856zm16.822 1.478 3.405-3.383 7.63 2.132-6.227 6.187zM4.672 17.238l2.111-7.705 6.125 6.288-4.886 4.856zm29.547-1.243 6.227-6.189 1.986 7.74-3.404 3.384zm-15.502-.127 4.887-4.856 4.807 4.936-4.886 4.856zm-7.814 7.765 4.886-4.856 4.81 4.936-4.888 4.856zm15.503.127 4.886-4.856L36.1 23.84l-4.887 4.856zM4.57 29.927l3.406-3.385 4.807 4.937-6.225 6.186zm14.021 1.598 4.887-4.856 4.808 4.936-4.886 4.856zm15.502.128 4.887-4.856 3.351 3.439-2.11 7.705zm-24.656 8.97 6.226-6.189 4.81 4.936-3.406 3.385zm16.843-1.206 4.886-4.856 6.126 6.289-7.662 2.007z"
+      mask="url(#a)"
+    />
+  </svg>
+);

packages/webapp/src/containers/CashFlow/Icons/TellerIcon.tsx

@@ -0,0 +1,42 @@
+export const TellerIcon = () => (
+  <svg
+    height={30}
+    width={30}
+    viewBox="0 0 789 789"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_4283_1925)">
+      <path
+        d="M433.606 360.544C351.138 278.075 351.138 144.366 433.606 61.8977C516.075 -20.5711 649.784 -20.5711 732.252 61.8977C814.721 144.366 814.721 278.075 732.252 360.544C649.784 443.012 516.075 443.012 433.606 360.544Z"
+        fill="#FF5833"
+      ></path>
+      <path
+        d="M639.444 578.592C639.444 599.543 622.46 616.527 601.509 616.527H215.57C194.62 616.527 177.636 599.543 177.636 578.592V192.654C177.636 171.703 194.62 154.719 215.57 154.719H601.509C622.46 154.719 639.444 171.703 639.444 192.654V578.592Z"
+        fill="#0057FF"
+      ></path>
+      <path
+        d="M379.425 154.717L601.501 154.717C622.452 154.717 639.436 171.701 639.436 192.651V414.731C568.518 434.347 489.361 416.283 433.616 360.538C377.871 304.793 359.807 225.635 379.425 154.717Z"
+        fill="#FF77FA"
+      ></path>
+      <path
+        d="M383.842 410.314C466.311 492.783 466.311 626.492 383.842 708.961L334.294 758.508C294.899 797.904 231.025 797.904 191.63 758.509L35.647 602.526C-3.74884 563.13 -3.74887 499.257 35.647 459.861L85.1942 410.314C167.663 327.845 301.372 327.845 383.842 410.314Z"
+        fill="#3CE475"
+      ></path>
+      <path
+        d="M437.917 616.525H215.576C194.626 616.525 177.642 599.541 177.642 578.59L177.642 356.224C248.655 336.442 327.991 354.472 383.833 410.314C439.68 466.161 457.708 545.507 437.917 616.525Z"
+        fill="#00FFFF"
+      ></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_4283_1925">
+        <rect
+          width="2427.58"
+          height="788.009"
+          fill="white"
+          transform="translate(0.55127 0.0461426)"
+        ></rect>
+      </clipPath>
+    </defs>
+  </svg>
+);

packages/webapp/src/containers/CashFlow/Icons/YodleeIcon.tsx

@@ -0,0 +1,45 @@
+export const YodleeIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    id="Layer_1"
+    x={0}
+    y={0}
+    style={{
+      width: 28,
+      height: 28,
+    }}
+    viewBox="0 0 30 57.5"
+    {...props}
+  >
+    <style>{'.st0{fill:#343741}.st1{fill:#0084d4}.st3{fill:#8bd3e6}'}</style>
+    <path
+      d="m15.1 30.2 4.4-1.4-4.4-1.4-4.4 1.4z"
+      style={{
+        fill: 'none',
+      }}
+    />
+    <path
+      d="M0 0v9.8l19.5 6.3 15-4.9zM0 12.7v9.8l15.1-4.9zM19.5 28.8l15-4.9-4.3-1.4-15.1 4.9zM19.5 41.4l15-4.9-4.3-1.4L15.1 40zM10.7 28.8 0 32.3v2.8l15.1-4.9z"
+      className="st3"
+    />
+    <path
+      d="M0 35.1v9.8L15.1 40zM15.1 30.2l15.1 4.9 4.3-1.4-15-4.9z"
+      className="st0"
+    />
+    <path
+      d="M34.5 33.7v-9.8l-15 4.9zM0 35.1 15.1 40l15.1-4.9-15.1-4.9z"
+      className="st1"
+    />
+    <path d="M0 47.7v9.8l34.5-11.2-15-4.9z" className="st0" />
+    <path d="M34.5 46.3v-9.8l-15 4.9z" className="st1" />
+    <path
+      d="m15.1 17.6 15.1 4.9 4.3-1.5-15-4.9zM15.1 27.4 0 22.5v2.8l10.7 3.5z"
+      className="st0"
+    />
+    <path
+      d="M34.5 21v-9.8l-15 4.9zM0 22.5l15.1 4.9 15.1-4.9-15.1-4.9zM0 25.3v7l10.7-3.5z"
+      className="st1"
+    />
+  </svg>
+);

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx

@@ -14,14 +14,18 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleInvoiceAction,
+} from '@/constants/abilityOption';
 import { EstimateMoreMenuItems } from './components';
 import {
   DrawerActionsBar,
   Icon,
   FormattedMessage as T,
   Can,
-  Choose,
+  If,
 } from '@/components';
 
 import { compose } from '@/utils';
@@ -42,7 +46,7 @@ function EstimateDetailActionsBar({
   closeDrawer,
 }) {
   // Estimate details drawer context.
-  const { estimateId } = useEstimateDetailDrawerContext();
+  const { estimateId, estimate } = useEstimateDetailDrawerContext();
 
   // History.
   const history = useHistory();
@@ -52,6 +56,15 @@ function EstimateDetailActionsBar({
     history.push(`/estimates/${estimateId}/edit`);
     closeDrawer(DRAWERS.ESTIMATE_DETAILS);
   };
+
+  // Handle convert to invoice.
+  const handleConvertEstimate = () => {
+    history.push(`/invoices/new?from_estimate_id=${estimateId}`, {
+      action: estimateId,
+    });
+    closeDrawer(DRAWERS.ESTIMATE_DETAILS);
+  };
+
   // Handle delete sale estimate.
   const handleDeleteEstimate = () => {
     openAlert('estimate-delete', { estimateId });
@@ -82,7 +95,18 @@ function EstimateDetailActionsBar({
           />
           <NavbarDivider />
         </Can>
-
+        <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+          <If condition={!estimate.is_converted_to_invoice}>
+            <Button
+              className={Classes.MINIMAL}
+              intent={Intent.SUCCESS}
+              icon={<Icon icon="tick" />}
+              text={<T id={'convert_to_invoice'} />}
+              onClick={handleConvertEstimate}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
         <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
           <Button
             className={Classes.MINIMAL}

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx

@@ -57,6 +57,11 @@ function InvoiceDetailActionsBar({
     closeDrawer(DRAWERS.INVOICE_DETAILS);
   };
 
+  // Hanlde deliver sale invoice.
+  const handleDeliverInvoice = ({ id }) => {
+    openAlert('invoice-deliver', { invoiceId });
+  };
+
   // Handle convert to invoice.
   const handleConvertToCreitNote = () => {
     history.push(`/credit-notes/new?from_invoice_id=${invoiceId}`, {
@@ -153,6 +158,7 @@ function InvoiceDetailActionsBar({
               onCancelBadDebt: handleCancelBadDebtInvoice,
               onNotifyViaSMS: handleNotifyViaSMS,
               onConvert: handleConvertToCreitNote,
+              onDeliver: handleDeliverInvoice,
             }}
           />
         </Can>

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx

@@ -19,6 +19,7 @@ import {
   FormattedMessage as T,
   Choose,
   Can,
+  If,
   TextOverviewTooltipCell,
 } from '@/components';
 import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
@@ -94,7 +95,7 @@ export const useInvoiceReadonlyEntriesColumns = () => {
  * @returns {React.JSX}
  */
 export const BadDebtMenuItem = ({
-  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert },
+  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert, onDeliver },
 }) => {
   const { invoice } = useInvoiceDetailDrawerContext();
 
@@ -108,6 +109,12 @@ export const BadDebtMenuItem = ({
       }}
       content={
         <Menu>
+          <If condition={!invoice.is_delivered}>
+            <MenuItem
+              onClick={onDeliver}
+              text={<T id={'mark_as_delivered'} />}
+            />
+          </If>
           <Choose>
             <Choose.When condition={!invoice.is_writtenoff}>
               <MenuItem

packages/webapp/src/hooks/query/cashflowAccounts.tsx

@@ -104,8 +104,8 @@ export function useDeleteCashflowTransaction(props) {
 export function useAccountTransactionsInfinity(
   accountId,
   query,
-  axios,
   infinityProps,
+  axios,
 ) {
   const apiRequest = useApiRequest();
 
@@ -134,6 +134,45 @@ export function useAccountTransactionsInfinity(
   );
 }
 
+/**
+ * Retrieve account transactions infinity scrolling.
+ * @param {number} accountId
+ * @param {*} axios
+ * @returns
+ */
+export function useAccountUncategorizedTransactionsInfinity(
+  accountId,
+  query,
+  infinityProps,
+  axios,
+) {
+  const apiRequest = useApiRequest();
+
+  return useInfiniteQuery(
+    [t.CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY, accountId],
+    async ({ pageParam = 1 }) => {
+      const response = await apiRequest.http({
+        ...axios,
+        method: 'get',
+        url: `/api/cashflow/transactions/${accountId}/uncategorized`,
+        params: { page: pageParam, ...query },
+      });
+      return response.data;
+    },
+    {
+      getPreviousPageParam: (firstPage) => firstPage.pagination.page - 1,
+      getNextPageParam: (lastPage) => {
+        const { pagination } = lastPage;
+
+        return pagination.total > pagination.page_size * pagination.page
+          ? lastPage.pagination.page + 1
+          : undefined;
+      },
+      ...infinityProps,
+    },
+  );
+}
+
 /**
  * Refresh cashflow transactions infinity.
  */
@@ -172,3 +211,48 @@ export function useRefreshCashflowTransactions() {
     },
   };
 }
+
+/**
+ * Retrieves specific uncategorized transaction.
+ * @param {number} uncategorizedTranasctionId -
+ */
+export function useUncategorizedTransaction(
+  uncategorizedTranasctionId: nunber,
+  props,
+) {
+  return useRequestQuery(
+    [t.CASHFLOW_UNCAATEGORIZED_TRANSACTION, uncategorizedTranasctionId],
+    {
+      method: 'get',
+      url: `cashflow/transactions/uncategorized/${uncategorizedTranasctionId}`,
+    },
+    {
+      select: (res) => res.data?.data,
+      ...props,
+    },
+  );
+}
+
+/**
+ * Categorize the cashflow transaction.
+ */
+export function useCategorizeTransaction(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`cashflow/transactions/${id}/categorize`, values),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+        queryClient.invalidateQueries(t.CASHFLOW_UNCAATEGORIZED_TRANSACTION);
+        queryClient.invalidateQueries(
+          t.CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY,
+        );
+      },
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/types.tsx

@@ -77,7 +77,7 @@ const SALE_RECEIPTS = {
   SALE_RECEIPT: 'SALE_RECEIPT',
   SALE_RECEIPT_SMS_DETAIL: 'SALE_RECEIPT_SMS_DETAIL',
   NOTIFY_SALE_RECEIPT_BY_SMS: 'NOTIFY_SALE_RECEIPT_BY_SMS',
-  SALE_RECEIPT_MAIL_OPTIONS: 'SALE_RECEIPT_MAIL_OPTIONS'
+  SALE_RECEIPT_MAIL_OPTIONS: 'SALE_RECEIPT_MAIL_OPTIONS',
 };
 
 const INVENTORY_ADJUSTMENTS = {
@@ -115,7 +115,7 @@ const SALE_INVOICES = {
   BAD_DEBT: 'BAD_DEBT',
   CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
   SALE_INVOICE_PAYMENT_TRANSACTIONS: 'SALE_INVOICE_PAYMENT_TRANSACTIONS',
-  SALE_INVOICE_DEFAULT_OPTIONS: 'SALE_INVOICE_DEFAULT_OPTIONS'
+  SALE_INVOICE_DEFAULT_OPTIONS: 'SALE_INVOICE_DEFAULT_OPTIONS',
 };
 
 const USERS = {
@@ -200,6 +200,9 @@ const CASH_FLOW_ACCOUNTS = {
   CASH_FLOW_TRANSACTION: 'CASH_FLOW_TRANSACTION',
   CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY:
     'CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY',
+  CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY:
+    'CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY',
+  CASHFLOW_UNCAATEGORIZED_TRANSACTION: 'CASHFLOW_UNCAATEGORIZED_TRANSACTION',
 };
 
 const TARNSACTIONS_LOCKING = {

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

@@ -382,6 +382,12 @@ export default {
     ],
     viewBox: '0 0 20 20',
   },
+  tick: {
+    path: [
+      'M14,3c-0.28,0-0.53,0.11-0.71,0.29L6,10.59L2.71,7.29C2.53,7.11,2.28,7,2,7C1.45,7,1,7.45,1,8c0,0.28,0.11,0.53,0.29,0.71l4,4C5.47,12.89,5.72,13,6,13s0.53-0.11,0.71-0.29l8-8C14.89,4.53,15,4.28,15,4C15,3.45,14.55,3,14,3z',
+    ],
+    viewBox: '0 0 16 16',
+  },
   'swap-vert': {
     path: [
       'M10.6,10.9V5.4H9v5.5H6.7L9.8,14l3.1-3.1ZM5.1,0,2,3.1H4.3V8.6H5.9V3.1H8.2Z',

packages/webapp/src/style/pages/Dashboard/Dashboard.scss

@@ -212,6 +212,16 @@ $dashboard-views-bar-height: 44px;
             background: rgba(219, 55, 55, 0.1);
           }
         }
+        &.#{$ns}-minimal.#{$ns}-intent-success{
+          color: #1c6e42;
+
+          &:hover,
+          &:focus {
+            background: rgba(35, 133, 81, 0.1);
+            color: #1c6e42;
+          }
+        }
+
 
         &.button--blue-highlight {
           background-color: #ebfaff;