From 74fd76ce770297040bcd21a7eec4905a9d70a794 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 17 Jan 2024 00:24:13 +0200
Subject: [PATCH 1/6] feat(server): sales by items export csv & xlsx

---
 .../FinancialStatements/SalesByItems.ts       | 28 ++++----
 .../src/interfaces/SalesByItemsSheet.ts       |  2 +-
 .../SalesByItems/SalesByItemsApplication.ts   | 54 +++++++++++++++
 .../SalesByItems/SalesByItemsExport.ts        | 43 ++++++++++++
 .../SalesByItems/SalesByItemsService.ts       |  2 +-
 .../SalesByItems/SalesByItemsTable.ts         | 65 +++++++++++++++++++
 .../SalesByItemsTableInjectable.tsx           | 33 ++++++++++
 7 files changed, 213 insertions(+), 14 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsExport.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx

diff --git a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
index d31954398..0952610f2 100644
--- a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
@@ -7,6 +7,7 @@ import BaseFinancialReportController from './BaseFinancialReportController';
 import SalesByItemsReportService from '@/services/FinancialStatements/SalesByItems/SalesByItemsService';
 import { AbilitySubject, ReportsAction } from '@/interfaces';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
+import { ACCEPT_TYPE } from '@/interfaces/Http';
 
 @Service()
 export default class SalesByItemsReportController extends BaseFinancialReportController {
@@ -68,18 +69,21 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
     const { tenantId } = req;
     const filter = this.matchedQueryData(req);
 
-    try {
-      const { data, query, meta } = await this.salesByItemsService.salesByItems(
-        tenantId,
-        filter
-      );
-      return res.status(200).send({
-        meta: this.transfromToResponse(meta),
-        data: this.transfromToResponse(data),
-        query: this.transfromToResponse(query),
-      });
-    } catch (error) {
-      next(error);
+    const accept = this.accepts(req);
+
+    const acceptType = accept.types([
+      ACCEPT_TYPE.APPLICATION_JSON,
+      ACCEPT_TYPE.APPLICATION_JSON_TABLE,
+      ACCEPT_TYPE.APPLICATION_CSV,
+      ACCEPT_TYPE.APPLICATION_XLSX,
+    ]);
+
+    if (ACCEPT_TYPE.APPLICATION_CSV === acceptType) {
+    } else if (ACCEPT_TYPE.APPLICATION_XLSX === acceptType) {
+    } else if (ACCEPT_TYPE.APPLICATION_XLSX === acceptType) {
+    } else {
+      await this.salesByItemsService.salesByItems(tenantId, filter);
+      return res.status(200).send({ meta, data, query });
     }
   }
 }
diff --git a/packages/server/src/interfaces/SalesByItemsSheet.ts b/packages/server/src/interfaces/SalesByItemsSheet.ts
index 0e0a41f9e..2e253c49d 100644
--- a/packages/server/src/interfaces/SalesByItemsSheet.ts
+++ b/packages/server/src/interfaces/SalesByItemsSheet.ts
@@ -41,5 +41,5 @@ export interface ISalesByItemsTotal {
 export type ISalesByItemsSheetStatement = {
   items: ISalesByItemsItem[],
   total: ISalesByItemsTotal
-} | {};
+};
 
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
new file mode 100644
index 000000000..6fbd97459
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -0,0 +1,54 @@
+import { ISalesByItemsReportQuery } from '@/interfaces';
+import { SalesByItemsReportService } from './SalesByItemsService';
+import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
+import { SalesByItemsExport } from './SalesByItemsExport';
+import { Inject, Service } from 'typedi';
+
+@Service()
+export class SalesByItemsApplication {
+  @Inject()
+  private salesByItemsSheet: SalesByItemsReportService;
+
+  @Inject()
+  private salesByItemsTable: SalesByItemsTableInjectable;
+
+  @Inject()
+  private salesByItemsExport: SalesByItemsExport;
+
+  /**
+   * Retrieves the sales by items report in json format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} filter
+   * @returns {Promise<ISalesByItemsTable>}
+   */
+  public sheet(tenantId: number, filter: ISalesByItemsReportQuery) {
+    return this.salesByItemsSheet.salesByItems(tenantId, filter);
+  }
+  /**
+   * Retrieves the sales by items report in table format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} filter
+   * @returns {Promise<ISalesByItemsTable>}
+   */
+  public table(tenantId: number, filter: ISalesByItemsReportQuery) {
+    return this.salesByItemsTable.table(tenantId, filter);
+  }
+  /**
+   * Retrieves the sales by items report in csv format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} filter
+   * @returns {Promise<Buffer>}
+   */
+  public csv(tenantId: number, filter: ISalesByItemsReportQuery) {
+    return this.salesByItemsExport.csv(tenantId, filter);
+  }
+  /**
+   * Retrieves the sales by items report in xlsx format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} filter
+   * @returns {Promise<Buffer>}
+   */
+  public xlsx(tenantId: number, filter: ISalesByItemsReportQuery) {
+    return this.salesByItemsExport.xlsx(tenantId, filter);
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsExport.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsExport.ts
new file mode 100644
index 000000000..067aab546
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsExport.ts
@@ -0,0 +1,43 @@
+import { Inject, Service } from 'typedi';
+import { TableSheet } from '@/lib/Xlsx/TableSheet';
+import { ISalesByItemsReportQuery } from '@/interfaces';
+import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
+
+@Service()
+export class SalesByItemsExport {
+  @Inject()
+  private salesByItemsTable: SalesByItemsTableInjectable;
+
+  /**
+   * Retrieves the trial balance sheet in XLSX format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public async xlsx(tenantId: number, query: ISalesByItemsReportQuery) {
+    const table = await this.salesByItemsTable.table(tenantId, query);
+
+    const tableSheet = new TableSheet(table.table);
+    const tableCsv = tableSheet.convertToXLSX();
+
+    return tableSheet.convertToBuffer(tableCsv, 'xlsx');
+  }
+
+  /**
+   * Retrieves the trial balance sheet in CSV format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} query
+   * @returns {Promise<Buffer>}
+   */
+  public async csv(
+    tenantId: number,
+    query: ISalesByItemsReportQuery
+  ): Promise<string> {
+    const table = await this.salesByItemsTable.table(tenantId, query);
+
+    const tableSheet = new TableSheet(table.table);
+    const tableCsv = tableSheet.convertToCSV();
+
+    return tableCsv;
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
index 6f81e1489..086284d8e 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
@@ -10,7 +10,7 @@ import SalesByItems from './SalesByItems';
 import { Tenant } from '@/system/models';
 
 @Service()
-export default class SalesByItemsReportService {
+export class SalesByItemsReportService {
   @Inject()
   tenancy: TenancyService;
 
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
new file mode 100644
index 000000000..dad7126dc
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
@@ -0,0 +1,65 @@
+import * as R from 'ramda';
+import { ISalesByItemsSheetStatement, ITableColumn, ITableData, ITableRow } from '@/interfaces';
+import { tableRowMapper } from '@/utils';
+
+export class SalesByItemsTable {
+  private readonly data: ISalesByItemsSheetStatement;
+
+  constructor(data: ISalesByItemsSheetStatement) {
+    this.data = data;
+  }
+
+  private commonTableAccessors() {
+    return [
+      { key: 'item_name', accessor: 'name' },
+      { key: 'quantity', accessor: 'quantitySoldFormatted' },
+      { key: 'sold', accessor: 'soldCostFormatted' },
+    ];
+  }
+
+  private itemMap(item: any) {
+    const columns = this.commonTableAccessors();
+    const meta = {};
+
+    return tableRowMapper(item, columns, meta);
+  }
+
+  private itemsMap(items: any[]) {
+    return R.map(this.itemMap, items);
+  }
+
+  /**
+   * 
+   * @param total 
+   * @returns 
+   */
+  private totalMap(total: any) {
+    const columns = this.commonTableAccessors();
+    const meta = {};
+
+    return tableRowMapper(total, columns, meta);
+  }
+
+  /**
+   * 
+   * @returns {ITableRow[]}
+   */
+  public tableData(): ITableRow[] {
+    const itemsRows = this.itemsMap(this.data.items);
+    const totalRow = this.totalMap(this.data.total);
+
+    return [...itemsRows, totalRow];
+  }
+
+  /**
+   * Retrieves the table columns.
+   * @returns {ITableColumn[]}
+   */
+  public tableColumns(): ITableColumn[] {
+    return [
+      { key: 'item_name', label: 'Item Name' },
+      { key: 'quantity', label: 'Quantity' },
+      { key: 'sold_cost', label: 'Sold Cost' },
+    ];
+  }
+}
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx
new file mode 100644
index 000000000..037ca7073
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx
@@ -0,0 +1,33 @@
+import { ISalesByItemsReportQuery } from '@/interfaces';
+import { Inject, Service } from 'typedi';
+import { SalesByItemsReportService } from './SalesByItemsService';
+import { SalesByItemsTable } from './SalesByItemsTable';
+
+@Service()
+export class SalesByItemsTableInjectable {
+  @Inject()
+  salesByItemSheet: SalesByItemsReportService;
+
+  /**
+   * Retrieves the sales by items report in table format.
+   * @param {number} tenantId
+   * @param {ISalesByItemsReportQuery} filter
+   * @returns {Promise<ISalesByItemsTable>}
+   */
+  public async table(tenantId: number, filter: ISalesByItemsReportQuery) {
+    const { data, query, meta } = await this.salesByItemSheet.salesByItems(
+      tenantId,
+      filter
+    );
+    const table = new SalesByItemsTable(data);
+
+    return {
+      table: {
+        columns: table.tableColumns(),
+        rows: table.tableData(),
+      },
+      meta,
+      query,
+    };
+  }
+}

From 4a920176f42624e59443fde32142b6451ca65d7a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 17 Jan 2024 18:49:38 +0200
Subject: [PATCH 2/6] feat(server): sales by items table

---
 .../FinancialStatements/SalesByItems.ts       | 37 ++++++++---
 .../SalesByItems/SalesByItemsApplication.ts   |  3 +
 .../SalesByItems/SalesByItemsTable.ts         | 62 +++++++++++++------
 3 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
index 0952610f2..ffc0cb959 100644
--- a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
@@ -1,18 +1,17 @@
 import { Router, Request, Response, NextFunction } from 'express';
-import { query, ValidationChain } from 'express-validator';
-import moment from 'moment';
+import { query, ValidationChain, ValidationSchema } from 'express-validator';
 import { Inject, Service } from 'typedi';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
 import BaseFinancialReportController from './BaseFinancialReportController';
-import SalesByItemsReportService from '@/services/FinancialStatements/SalesByItems/SalesByItemsService';
 import { AbilitySubject, ReportsAction } from '@/interfaces';
 import CheckPolicies from '@/api/middleware/CheckPolicies';
 import { ACCEPT_TYPE } from '@/interfaces/Http';
+import { SalesByItemsApplication } from '@/services/FinancialStatements/SalesByItems/SalesByItemsApplication';
 
 @Service()
 export default class SalesByItemsReportController extends BaseFinancialReportController {
   @Inject()
-  salesByItemsService: SalesByItemsReportService;
+  salesByItemsApp: SalesByItemsApplication;
 
   /**
    * Router constructor.
@@ -32,6 +31,7 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
 
   /**
    * Validation schema.
+   * @returns {ValidationChain[]}
    */
   private get validationSchema(): ValidationChain[] {
     return [
@@ -68,7 +68,6 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
   ) {
     const { tenantId } = req;
     const filter = this.matchedQueryData(req);
-
     const accept = this.accepts(req);
 
     const acceptType = accept.types([
@@ -77,13 +76,33 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
       ACCEPT_TYPE.APPLICATION_CSV,
       ACCEPT_TYPE.APPLICATION_XLSX,
     ]);
-
+    // Retrieves the csv format.
     if (ACCEPT_TYPE.APPLICATION_CSV === acceptType) {
+      const buffer = await this.salesByItemsApp.csv(tenantId, filter);
+
+      res.setHeader('Content-Disposition', 'attachment; filename=output.csv');
+      res.setHeader('Content-Type', 'text/csv');
+
+      return res.send(buffer);
+      // Retrieves the json table format.
+    } else if (ACCEPT_TYPE.APPLICATION_JSON_TABLE === acceptType) {
+      const table = await this.salesByItemsApp.table(tenantId, filter);
+
+      return res.status(200).send(table);
+      // Retrieves the xlsx format.
     } else if (ACCEPT_TYPE.APPLICATION_XLSX === acceptType) {
-    } else if (ACCEPT_TYPE.APPLICATION_XLSX === acceptType) {
+      const buffer = this.salesByItemsApp.xlsx(tenantId, filter);
+
+      res.setHeader('Content-Disposition', 'attachment; filename=output.xlsx');
+      res.setHeader(
+        'Content-Type',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      );
+      return res.send(buffer);
+      // Retrieves the json format.
     } else {
-      await this.salesByItemsService.salesByItems(tenantId, filter);
-      return res.status(200).send({ meta, data, query });
+      const sheet = await this.salesByItemsApp.sheet(tenantId, filter);
+      return res.status(200).send(sheet);
     }
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
index 6fbd97459..d70cd703a 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -24,6 +24,7 @@ export class SalesByItemsApplication {
   public sheet(tenantId: number, filter: ISalesByItemsReportQuery) {
     return this.salesByItemsSheet.salesByItems(tenantId, filter);
   }
+
   /**
    * Retrieves the sales by items report in table format.
    * @param {number} tenantId
@@ -33,6 +34,7 @@ export class SalesByItemsApplication {
   public table(tenantId: number, filter: ISalesByItemsReportQuery) {
     return this.salesByItemsTable.table(tenantId, filter);
   }
+
   /**
    * Retrieves the sales by items report in csv format.
    * @param {number} tenantId
@@ -42,6 +44,7 @@ export class SalesByItemsApplication {
   public csv(tenantId: number, filter: ISalesByItemsReportQuery) {
     return this.salesByItemsExport.csv(tenantId, filter);
   }
+
   /**
    * Retrieves the sales by items report in xlsx format.
    * @param {number} tenantId
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
index dad7126dc..33c39ccd6 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
@@ -1,47 +1,72 @@
 import * as R from 'ramda';
-import { ISalesByItemsSheetStatement, ITableColumn, ITableData, ITableRow } from '@/interfaces';
+import {
+  ISalesByItemsItem,
+  ISalesByItemsSheetStatement,
+  ISalesByItemsTotal,
+  ITableColumn,
+  ITableRow,
+} from '@/interfaces';
 import { tableRowMapper } from '@/utils';
 
 export class SalesByItemsTable {
   private readonly data: ISalesByItemsSheetStatement;
 
+  /**
+   * Constructor method.
+   * @param {ISalesByItemsSheetStatement} data
+   */
   constructor(data: ISalesByItemsSheetStatement) {
     this.data = data;
   }
 
+  /**
+   * Retrieves the common table accessors.
+   * @returns {ITableColumn[]}
+   */
   private commonTableAccessors() {
     return [
       { key: 'item_name', accessor: 'name' },
-      { key: 'quantity', accessor: 'quantitySoldFormatted' },
-      { key: 'sold', accessor: 'soldCostFormatted' },
+      { key: 'sold_quantity', accessor: 'quantitySoldFormatted' },
+      { key: 'sold_amount', accessor: 'soldCostFormatted' },
+      { key: 'average_price', accessor: 'averageSellPriceFormatted' },
     ];
   }
 
-  private itemMap(item: any) {
+  /**
+   * Maps the given item node to table row.
+   * @param {ISalesByItemsItem} item
+   * @returns {ITableRow}
+   */
+  private itemMap = (item: ISalesByItemsItem): ITableRow => {
     const columns = this.commonTableAccessors();
     const meta = {};
 
     return tableRowMapper(item, columns, meta);
-  }
-
-  private itemsMap(items: any[]) {
-    return R.map(this.itemMap, items);
-  }
+  };
 
   /**
-   * 
-   * @param total 
-   * @returns 
+   * Maps the given items nodes to table rows.
+   * @param {ISalesByItemsItem[]} items
+   * @returns {ITableRow[]}
    */
-  private totalMap(total: any) {
+  private itemsMap = (items: ISalesByItemsItem[]): ITableRow[] => {
+    return R.map(this.itemMap, items);
+  };
+
+  /**
+   * Maps the given total node to table row.
+   * @param {ISalesByItemsTotal} total
+   * @returns {ITableRow[]}
+   */
+  private totalMap = (total: ISalesByItemsTotal) => {
     const columns = this.commonTableAccessors();
     const meta = {};
 
     return tableRowMapper(total, columns, meta);
-  }
+  };
 
   /**
-   * 
+   * Retrieves the table rows.
    * @returns {ITableRow[]}
    */
   public tableData(): ITableRow[] {
@@ -57,9 +82,10 @@ export class SalesByItemsTable {
    */
   public tableColumns(): ITableColumn[] {
     return [
-      { key: 'item_name', label: 'Item Name' },
-      { key: 'quantity', label: 'Quantity' },
-      { key: 'sold_cost', label: 'Sold Cost' },
+      { key: 'item_name', label: 'Item name' },
+      { key: 'sold_quantity', label: 'Sold quantity' },
+      { key: 'sold_amount', label: 'Sold amount' },
+      { key: 'average_price', label: 'Average price' },
     ];
   }
 }

From 471ce1b7af15ddd9d3e7169006e050ad229f3e9d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 18 Jan 2024 14:39:56 +0200
Subject: [PATCH 3/6] feat(webapp): dynamic columns of sales by items sheet

---
 .../SalesByItems/SalesByItemsTable.ts         | 23 +++--
 .../SalesByItems/constants.ts                 |  6 ++
 .../SalesByItems/SalesByItemProvider.tsx      |  6 +-
 .../SalesByItems/SalesByItemsActionsBar.tsx   | 18 +++-
 .../SalesByItems/SalesByItemsTable.tsx        |  8 +-
 .../SalesByItems/components.tsx               | 90 ++++++++++++++++-
 .../SalesByItems/dynamicColumns.ts            | 77 +++++++++++++++
 .../src/hooks/query/financialReports.tsx      | 99 +++++++++++++------
 8 files changed, 277 insertions(+), 50 deletions(-)
 create mode 100644 packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
 create mode 100644 packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts

diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
index 33c39ccd6..f876e9a02 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTable.ts
@@ -7,8 +7,15 @@ import {
   ITableRow,
 } from '@/interfaces';
 import { tableRowMapper } from '@/utils';
+import FinancialSheet from '../FinancialSheet';
+import { FinancialSheetStructure } from '../FinancialSheetStructure';
+import { FinancialTable } from '../FinancialTable';
+import { ROW_TYPE } from './constants';
 
-export class SalesByItemsTable {
+export class SalesByItemsTable extends R.compose(
+  FinancialTable,
+  FinancialSheetStructure
+)(FinancialSheet) {
   private readonly data: ISalesByItemsSheetStatement;
 
   /**
@@ -16,6 +23,7 @@ export class SalesByItemsTable {
    * @param {ISalesByItemsSheetStatement} data
    */
   constructor(data: ISalesByItemsSheetStatement) {
+    super();
     this.data = data;
   }
 
@@ -39,8 +47,9 @@ export class SalesByItemsTable {
    */
   private itemMap = (item: ISalesByItemsItem): ITableRow => {
     const columns = this.commonTableAccessors();
-    const meta = {};
-
+    const meta = {
+      rowTypes: [ROW_TYPE.ITEM],
+    };
     return tableRowMapper(item, columns, meta);
   };
 
@@ -60,8 +69,9 @@ export class SalesByItemsTable {
    */
   private totalMap = (total: ISalesByItemsTotal) => {
     const columns = this.commonTableAccessors();
-    const meta = {};
-
+    const meta = {
+      rowTypes: [ROW_TYPE.TOTAL],
+    };
     return tableRowMapper(total, columns, meta);
   };
 
@@ -81,11 +91,12 @@ export class SalesByItemsTable {
    * @returns {ITableColumn[]}
    */
   public tableColumns(): ITableColumn[] {
-    return [
+    const columns = [
       { key: 'item_name', label: 'Item name' },
       { key: 'sold_quantity', label: 'Sold quantity' },
       { key: 'sold_amount', label: 'Sold amount' },
       { key: 'average_price', label: 'Average price' },
     ];
+    return R.compose(this.tableColumnsCellIndexing)(columns);
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
new file mode 100644
index 000000000..0eb1e2311
--- /dev/null
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/constants.ts
@@ -0,0 +1,6 @@
+
+
+export enum ROW_TYPE {
+  ITEM = 'ITEM',
+  TOTAL = 'TOTAL',
+}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
index 8b06996dc..16c2ad44f 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useSalesByItems } from '@/hooks/query';
+import { useSalesByItemsTable } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const SalesByItemsContext = createContext();
@@ -12,7 +12,7 @@ function SalesByItemProvider({ query, ...props }) {
     isFetching,
     isLoading,
     refetch,
-  } = useSalesByItems(
+  } = useSalesByItemsTable(
     {
       ...transformFilterFormToQuery(query),
     },
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
index 56b025f35..9ac5a46a0 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
@@ -19,6 +19,7 @@ import withSalesByItemsActions from './withSalesByItemsActions';
 
 import { compose, saveInvoke } from '@/utils';
 import { useSalesByItemsContext } from './SalesByItemProvider';
+import { SalesByItemsSheetExportMenu } from './components';
 
 function SalesByItemsActionsBar({
   // #withSalesByItems
@@ -108,11 +109,18 @@ function SalesByItemsActionsBar({
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'export'} />}
-        />
+        <Popover
+          content={<SalesByItemsSheetExportMenu />}
+          interactionKind={PopoverInteractionKind.CLICK}
+          placement="bottom-start"
+          minimal
+        >
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="file-export-16" iconSize={16} />}
+            text={<T id={'export'} />}
+          />
+        </Popover>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
index 77e4da7e4..a3e439707 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { ReportDataTable, FinancialSheet } from '@/components';
 import { useSalesByItemsContext } from './SalesByItemProvider';
-import { useSalesByItemsTableColumns } from './components';
+import { useSalesByItemsTableColumns } from './dynamicColumns';
 import { tableRowTypesToClassnames } from '@/utils';
 import { TableStyle } from '@/constants';
 
@@ -15,7 +15,7 @@ import { TableStyle } from '@/constants';
 export default function SalesByItemsTable({ companyName }) {
   // Sales by items context.
   const {
-    salesByItems: { tableRows, query },
+    salesByItems: { table, query },
     isLoading,
   } = useSalesByItemsContext();
 
@@ -32,7 +32,7 @@ export default function SalesByItemsTable({ companyName }) {
     >
       <SalesByItemsDataTable
         columns={columns}
-        data={tableRows}
+        data={table.rows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
@@ -59,7 +59,7 @@ const SalesByItemsDataTable = styled(ReportDataTable)`
         padding-top: 0.4rem;
         padding-bottom: 0.4rem;
       }
-      .tr.row_type--total .td {
+      .tr.row_type--TOTAL .td {
         border-top: 1px solid #bbb;
         font-weight: 500;
         border-bottom: 3px double #000;
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
index 4219abf83..ba08171ed 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
@@ -3,12 +3,13 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
 import { getColumnWidth } from '@/utils';
-import { If } from '@/components';
+import { If, Stack } from '@/components';
 import { Align } from '@/constants';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-
+import { Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
+import { useBalanceSheetXlsxExport } from '@/hooks/query';
 
 /**
  * Retrieve sales by items table columns.
@@ -77,3 +78,88 @@ export function SalesByItemsLoadingBar() {
     </If>
   );
 }
+
+/**
+ * Retrieves the sales by items export menu.
+ * @returns {JSX.Element}
+ */
+export const SalesByItemsSheetExportMenu = () => {
+  const toastKey = useRef(null);
+  const commonToastConfig = {
+    isCloseButtonShown: true,
+    timeout: 2000,
+  };
+  const { query } = useBalanceSheetContext();
+
+  const openProgressToast = (amount: number) => {
+    return (
+      <Stack spacing={8}>
+        <Text>The report has been exported successfully.</Text>
+        <ProgressBar
+          className={classNames('toast-progress', {
+            [Classes.PROGRESS_NO_STRIPES]: amount >= 100,
+          })}
+          intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
+          value={amount / 100}
+        />
+      </Stack>
+    );
+  };
+
+  // Export the report to xlsx.
+  const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(query, {
+    onDownloadProgress: (xlsxExportProgress: number) => {
+      if (!toastKey.current) {
+        toastKey.current = AppToaster.show({
+          message: openProgressToast(xlsxExportProgress),
+          ...commonToastConfig,
+        });
+      } else {
+        AppToaster.show(
+          {
+            message: openProgressToast(xlsxExportProgress),
+            ...commonToastConfig,
+          },
+          toastKey.current,
+        );
+      }
+    },
+  });
+  // Export the report to csv.
+  const { mutateAsync: csvExport } = useBalanceSheetCsvExport(query, {
+    onDownloadProgress: (xlsxExportProgress: number) => {
+      if (!toastKey.current) {
+        toastKey.current = AppToaster.show({
+          message: openProgressToast(xlsxExportProgress),
+          ...commonToastConfig,
+        });
+      } else {
+        AppToaster.show(
+          {
+            message: openProgressToast(xlsxExportProgress),
+            ...commonToastConfig,
+          },
+          toastKey.current,
+        );
+      }
+    },
+  });
+  // Handle csv export button click.
+  const handleCsvExportBtnClick = () => {
+    csvExport().then(() => {});
+  };
+  // Handle xlsx export button click.
+  const handleXlsxExportBtnClick = () => {
+    xlsxExport().then(() => {});
+  };
+
+  return (
+    <Menu>
+      <MenuItem
+        text={'XLSX (Microsoft Excel)'}
+        onClick={handleXlsxExportBtnClick}
+      />
+      <MenuItem text={'CSV'} onClick={handleCsvExportBtnClick} />
+    </Menu>
+  );
+};
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
new file mode 100644
index 000000000..769af9cce
--- /dev/null
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
@@ -0,0 +1,77 @@
+// @ts-nocheck
+import { getColumnWidth } from '@/utils';
+import * as R from 'ramda';
+import { Align } from '@/constants';
+import { useSalesByItemsContext } from './SalesByItemProvider';
+
+const getTableCellValueAccessor = (index) => `cells[${index}].value`;
+
+const getReportColWidth = (data, accessor, headerText) => {
+  return getColumnWidth(
+    data,
+    accessor,
+    { magicSpacing: 10, minWidth: 100 },
+    headerText,
+  );
+};
+
+/**
+ * Account name column mapper.
+ */
+const commonColumnMapper = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    key: column.key,
+    Header: column.label,
+    accessor,
+    className: column.key,
+    textOverview: true,
+  };
+});
+
+/**
+ * Numeric columns accessor.
+ */
+const numericColumnAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    ...column,
+    align: Align.Right,
+    width,
+  };
+});
+
+const dynamiColumnMapper = R.curry((data, column) => {
+  const _numericColumnAccessor = numericColumnAccessor(data);
+
+  return R.compose(
+    R.when(R.pathEq(['key'], 'sold_quantity'), _numericColumnAccessor),
+    R.when(R.pathEq(['key'], 'sold_amount'), _numericColumnAccessor),
+    R.when(R.pathEq(['key'], 'average_price'), _numericColumnAccessor),
+    commonColumnMapper(data),
+  )(column);
+});
+
+/**
+ * Composes the dynamic columns that fetched from request to columns to table component.
+ */
+export const dynamicColumns = R.curry((data, columns) => {
+  return R.map(dynamiColumnMapper(data), columns);
+});
+
+/**
+ * Retrieves the G/L sheet table columns for table component.
+ */
+export const useSalesByItemsTableColumns = () => {
+  const { salesByItems } = useSalesByItemsContext();
+
+  if (!salesByItems) {
+    throw new Error('Sales by items context not found');
+  }
+  const { table } = salesByItems;
+
+  return dynamicColumns(table.rows, table.columns);
+};
diff --git a/packages/webapp/src/hooks/query/financialReports.tsx b/packages/webapp/src/hooks/query/financialReports.tsx
index e10951472..b3548c145 100644
--- a/packages/webapp/src/hooks/query/financialReports.tsx
+++ b/packages/webapp/src/hooks/query/financialReports.tsx
@@ -176,34 +176,33 @@ export function useGeneralLedgerSheet(query, props) {
   );
 }
 export const useGeneralLedgerSheetXlsxExport = (query, args) => {
-return useDownloadFile({
-  url: '/financial_statements/general_ledger',
-  config: {
-    headers: {
-      accept: 'application/xlsx',
+  return useDownloadFile({
+    url: '/financial_statements/general_ledger',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
     },
-    params: query,
-  },
-  filename: 'general_ledger.xlsx',
-  ...args,
-});
+    filename: 'general_ledger.xlsx',
+    ...args,
+  });
 };
 
 export const useGeneralLedgerSheetCsvExport = (query, args) => {
-return useDownloadFile({
-  url: '/financial_statements/general_ledger',
-  config: {
-    headers: {
-      accept: 'application/csv',
+  return useDownloadFile({
+    url: '/financial_statements/general_ledger',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
     },
-    params: query,
-  },
-  filename: 'general_ledger.csv',
-  ...args,
-});
+    filename: 'general_ledger.csv',
+    ...args,
+  });
 };
 
-
 /**
  * Retrieve journal sheet.
  */
@@ -414,20 +413,60 @@ export function useSalesByItems(query, props) {
       params: query,
     },
     {
-      select: (res) => ({
-        tableRows: salesByItemsReducer(res.data.data),
-        ...res.data,
-      }),
-      defaultData: {
-        tableRows: [],
-        data: [],
-        query: {},
-      },
       ...props,
     },
   );
 }
 
+/**
+ * Retrieves sales by items table format.
+ */
+export function useSalesByItemsTable(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/sales-by-items',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+export const useSalesByItemsCsvExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-by-items',
+    config: {
+      headers: {
+        accept: 'application/csv',
+      },
+      params: query,
+    },
+    filename: 'sales_by_items.csv',
+    ...args,
+  });
+};
+
+export const useSalesByItemsXlsxExport = (query, args) => {
+  return useDownloadFile({
+    url: '/financial_statements/sales-by-items',
+    config: {
+      headers: {
+        accept: 'application/xlsx',
+      },
+      params: query,
+    },
+    filename: 'sales_by_items.xlsx',
+    ...args,
+  });
+};
+
 /**
  * Retrieve customers balance summary report.
  */

From 2753908b83ddf5b0c083fcd288d2a1ab1c9ab749 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 18 Jan 2024 19:52:11 +0200
Subject: [PATCH 4/6] feat: sales by items dynamic columns

---
 .../SalesByItems/dynamicColumns.ts                   | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
index 769af9cce..b71b4f7c5 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
@@ -44,10 +44,22 @@ const numericColumnAccessor = R.curry((data, column) => {
   };
 });
 
+/**
+ * Item name column accessor.
+ */
+const itemNameColumnAccessor = R.curry((data, column) => {
+  return {
+    ...column,
+    width: 180,
+  }
+});
+
 const dynamiColumnMapper = R.curry((data, column) => {
   const _numericColumnAccessor = numericColumnAccessor(data);
+  const _itemNameColumnAccessor = itemNameColumnAccessor(data);
 
   return R.compose(
+    R.when(R.pathEq(['key'], 'item_name'), _itemNameColumnAccessor),
     R.when(R.pathEq(['key'], 'sold_quantity'), _numericColumnAccessor),
     R.when(R.pathEq(['key'], 'sold_amount'), _numericColumnAccessor),
     R.when(R.pathEq(['key'], 'average_price'), _numericColumnAccessor),

From 1d8416ebfe98d2a7734f47bd931ff3ee273648d5 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 19 Jan 2024 11:25:06 +0200
Subject: [PATCH 5/6] fix: sales by items TS types

---
 .../FinancialStatements/SalesByItems.ts       |  8 +--
 .../src/interfaces/SalesByItemsSheet.ts       | 67 +++++++++++--------
 .../Xlsx/{TableSheet.tsx => TableSheet.ts}    |  0
 .../SalesByItems/SalesByItemsApplication.ts   | 33 ++++++---
 .../SalesByItems/SalesByItemsService.ts       | 25 +++----
 ...ble.tsx => SalesByItemsTableInjectable.ts} |  4 +-
 6 files changed, 76 insertions(+), 61 deletions(-)
 rename packages/server/src/lib/Xlsx/{TableSheet.tsx => TableSheet.ts} (100%)
 rename packages/server/src/services/FinancialStatements/SalesByItems/{SalesByItemsTableInjectable.tsx => SalesByItemsTableInjectable.ts} (94%)

diff --git a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
index ffc0cb959..bac67231c 100644
--- a/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/SalesByItems.ts
@@ -24,7 +24,7 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
       CheckPolicies(ReportsAction.READ_SALES_BY_ITEMS, AbilitySubject.Report),
       this.validationSchema,
       this.validationResult,
-      asyncMiddleware(this.purchasesByItems.bind(this))
+      asyncMiddleware(this.salesByItems.bind(this))
     );
     return router;
   }
@@ -61,11 +61,7 @@ export default class SalesByItemsReportController extends BaseFinancialReportCon
    * @param {Request} req -
    * @param {Response} res -
    */
-  private async purchasesByItems(
-    req: Request,
-    res: Response,
-    next: NextFunction
-  ) {
+  private async salesByItems(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const filter = this.matchedQueryData(req);
     const accept = this.accepts(req);
diff --git a/packages/server/src/interfaces/SalesByItemsSheet.ts b/packages/server/src/interfaces/SalesByItemsSheet.ts
index 2e253c49d..84f49960b 100644
--- a/packages/server/src/interfaces/SalesByItemsSheet.ts
+++ b/packages/server/src/interfaces/SalesByItemsSheet.ts
@@ -1,45 +1,54 @@
-import {
-  INumberFormatQuery,
-} from './FinancialStatements';
+import { INumberFormatQuery } from './FinancialStatements';
+import { IFinancialTable } from './Table';
 
 export interface ISalesByItemsReportQuery {
   fromDate: Date | string;
   toDate: Date | string;
-  itemsIds: number[],
+  itemsIds: number[];
   numberFormat: INumberFormatQuery;
   noneTransactions: boolean;
-  onlyActive: boolean; 
-};
+  onlyActive: boolean;
+}
 
 export interface ISalesByItemsSheetMeta {
-  organizationName: string,
-  baseCurrency: string,
-};
+  organizationName: string;
+  baseCurrency: string;
+}
 
 export interface ISalesByItemsItem {
-  id: number,
-  name: string,
-  code: string,
-  quantitySold: number,
-  soldCost: number,
-  averageSellPrice: number,
+  id: number;
+  name: string;
+  code: string;
+  quantitySold: number;
+  soldCost: number;
+  averageSellPrice: number;
 
-  quantitySoldFormatted: string,
-  soldCostFormatted: string,
-  averageSellPriceFormatted: string,
-  currencyCode: string,
-};
+  quantitySoldFormatted: string;
+  soldCostFormatted: string;
+  averageSellPriceFormatted: string;
+  currencyCode: string;
+}
 
 export interface ISalesByItemsTotal {
-  quantitySold: number,
-  soldCost: number,
-  quantitySoldFormatted: string,
-  soldCostFormatted: string,
-  currencyCode: string,
+  quantitySold: number;
+  soldCost: number;
+  quantitySoldFormatted: string;
+  soldCostFormatted: string;
+  currencyCode: string;
+}
+
+export type ISalesByItemsSheetData = {
+  items: ISalesByItemsItem[];
+  total: ISalesByItemsTotal;
 };
 
-export type ISalesByItemsSheetStatement = {
-  items: ISalesByItemsItem[],
-  total: ISalesByItemsTotal
-};
+export interface ISalesByItemsSheet {
+  data: ISalesByItemsSheetData;
+  query: ISalesByItemsReportQuery;
+  meta: ISalesByItemsSheetMeta;
+}
 
+export interface ISalesByItemsTable extends IFinancialTable {
+  query: ISalesByItemsReportQuery;
+  meta: ISalesByItemsSheetMeta;
+}
\ No newline at end of file
diff --git a/packages/server/src/lib/Xlsx/TableSheet.tsx b/packages/server/src/lib/Xlsx/TableSheet.ts
similarity index 100%
rename from packages/server/src/lib/Xlsx/TableSheet.tsx
rename to packages/server/src/lib/Xlsx/TableSheet.ts
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
index d70cd703a..b3b51869f 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsApplication.ts
@@ -1,8 +1,13 @@
-import { ISalesByItemsReportQuery } from '@/interfaces';
+import { Inject, Service } from 'typedi';
+import {
+  ISalesByItemsReportQuery,
+  ISalesByItemsSheet,
+  ISalesByItemsSheetData,
+  ISalesByItemsTable,
+} from '@/interfaces';
 import { SalesByItemsReportService } from './SalesByItemsService';
 import { SalesByItemsTableInjectable } from './SalesByItemsTableInjectable';
 import { SalesByItemsExport } from './SalesByItemsExport';
-import { Inject, Service } from 'typedi';
 
 @Service()
 export class SalesByItemsApplication {
@@ -19,9 +24,12 @@ export class SalesByItemsApplication {
    * Retrieves the sales by items report in json format.
    * @param {number} tenantId
    * @param {ISalesByItemsReportQuery} filter
-   * @returns {Promise<ISalesByItemsTable>}
+   * @returns {Promise<ISalesByItemsSheetData>}
    */
-  public sheet(tenantId: number, filter: ISalesByItemsReportQuery) {
+  public sheet(
+    tenantId: number,
+    filter: ISalesByItemsReportQuery
+  ): Promise<ISalesByItemsSheet> {
     return this.salesByItemsSheet.salesByItems(tenantId, filter);
   }
 
@@ -31,7 +39,10 @@ export class SalesByItemsApplication {
    * @param {ISalesByItemsReportQuery} filter
    * @returns {Promise<ISalesByItemsTable>}
    */
-  public table(tenantId: number, filter: ISalesByItemsReportQuery) {
+  public table(
+    tenantId: number,
+    filter: ISalesByItemsReportQuery
+  ): Promise<ISalesByItemsTable> {
     return this.salesByItemsTable.table(tenantId, filter);
   }
 
@@ -39,9 +50,12 @@ export class SalesByItemsApplication {
    * Retrieves the sales by items report in csv format.
    * @param {number} tenantId
    * @param {ISalesByItemsReportQuery} filter
-   * @returns {Promise<Buffer>}
+   * @returns {Promise<string>}
    */
-  public csv(tenantId: number, filter: ISalesByItemsReportQuery) {
+  public csv(
+    tenantId: number,
+    filter: ISalesByItemsReportQuery
+  ): Promise<string> {
     return this.salesByItemsExport.csv(tenantId, filter);
   }
 
@@ -51,7 +65,10 @@ export class SalesByItemsApplication {
    * @param {ISalesByItemsReportQuery} filter
    * @returns {Promise<Buffer>}
    */
-  public xlsx(tenantId: number, filter: ISalesByItemsReportQuery) {
+  public xlsx(
+    tenantId: number,
+    filter: ISalesByItemsReportQuery
+  ): Promise<Buffer> {
     return this.salesByItemsExport.xlsx(tenantId, filter);
   }
 }
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
index 086284d8e..bad73e34b 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts
@@ -2,8 +2,8 @@ import { Service, Inject } from 'typedi';
 import moment from 'moment';
 import {
   ISalesByItemsReportQuery,
-  ISalesByItemsSheetStatement,
-  ISalesByItemsSheetMeta
+  ISalesByItemsSheetMeta,
+  ISalesByItemsSheet,
 } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import SalesByItems from './SalesByItems';
@@ -63,20 +63,14 @@ export class SalesByItemsReportService {
 
   /**
    * Retrieve balance sheet statement.
-   * -------------
    * @param {number} tenantId
    * @param {IBalanceSheetQuery} query
-   *
-   * @return {IBalanceSheetStatement}
+   * @return {Promise<ISalesByItemsSheet>}
    */
   public async salesByItems(
     tenantId: number,
     query: ISalesByItemsReportQuery
-  ): Promise<{
-    data: ISalesByItemsSheetStatement,
-    query: ISalesByItemsReportQuery,
-    meta: ISalesByItemsSheetMeta,
-  }> {
+  ): Promise<ISalesByItemsSheet> {
     const { Item, InventoryTransaction } = this.tenancy.models(tenantId);
 
     const tenant = await Tenant.query()
@@ -107,20 +101,19 @@ export class SalesByItemsReportService {
         builder.whereIn('itemId', inventoryItemsIds);
 
         // Filter the date range of the sheet.
-        builder.modify('filterDateRange', filter.fromDate, filter.toDate)
+        builder.modify('filterDateRange', filter.fromDate, filter.toDate);
       }
     );
-
-    const purchasesByItemsInstance = new SalesByItems(
+    const sheet = new SalesByItems(
       filter,
       inventoryItems,
       inventoryTransactions,
-      tenant.metadata.baseCurrency,
+      tenant.metadata.baseCurrency
     );
-    const purchasesByItemsData = purchasesByItemsInstance.reportData();
+    const salesByItemsData = sheet.reportData();
 
     return {
-      data: purchasesByItemsData,
+      data: salesByItemsData,
       query: filter,
       meta: this.reportMetadata(tenantId),
     };
diff --git a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.ts
similarity index 94%
rename from packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx
rename to packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.ts
index 037ca7073..c947cfa86 100644
--- a/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.tsx
+++ b/packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsTableInjectable.ts
@@ -1,12 +1,12 @@
-import { ISalesByItemsReportQuery } from '@/interfaces';
 import { Inject, Service } from 'typedi';
+import { ISalesByItemsReportQuery } from '@/interfaces';
 import { SalesByItemsReportService } from './SalesByItemsService';
 import { SalesByItemsTable } from './SalesByItemsTable';
 
 @Service()
 export class SalesByItemsTableInjectable {
   @Inject()
-  salesByItemSheet: SalesByItemsReportService;
+  private salesByItemSheet: SalesByItemsReportService;
 
   /**
    * Retrieves the sales by items report in table format.

From 3a5fd2782a4a83d00d3ac72fd11a46e5bc295cd9 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 19 Jan 2024 11:39:00 +0200
Subject: [PATCH 6/6] fix: sales by items issues

---
 .../SalesByItems/components.tsx               | 79 ++++---------------
 1 file changed, 14 insertions(+), 65 deletions(-)

diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
index ba08171ed..6f1ad9d51 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/components.tsx
@@ -1,71 +1,20 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { Classes } from '@blueprintjs/core';
 
 import { getColumnWidth } from '@/utils';
-import { If, Stack } from '@/components';
+import { AppToaster, If, Stack } from '@/components';
 import { Align } from '@/constants';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
-import { useBalanceSheetXlsxExport } from '@/hooks/query';
-
-/**
- * Retrieve sales by items table columns.
- */
-export const useSalesByItemsTableColumns = () => {
-  //sales by items context.
-  const {
-    salesByItems: { tableRows },
-  } = useSalesByItemsContext();
-
-  return useMemo(
-    () => [
-      {
-        Header: intl.get('item_name'),
-        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-        className: 'name',
-        width: 180,
-        textOverview: true,
-      },
-      {
-        Header: intl.get('sold_quantity'),
-        accessor: 'quantity_sold_formatted',
-        Cell: CellTextSpan,
-        className: 'quantity_sold',
-        width: getColumnWidth(tableRows, `quantity_sold_formatted`, {
-          minWidth: 150,
-        }),
-        textOverview: true,
-        align: Align.Right,
-      },
-      {
-        Header: intl.get('sold_amount'),
-        accessor: 'sold_cost_formatted',
-        Cell: CellTextSpan,
-        className: 'sold_cost',
-        width: getColumnWidth(tableRows, `sold_cost_formatted`, {
-          minWidth: 150,
-        }),
-        textOverview: true,
-        align: Align.Right,
-      },
-      {
-        Header: intl.get('average_price'),
-        accessor: 'average_sell_price_formatted',
-        Cell: CellTextSpan,
-        className: 'average_sell_price',
-        width: getColumnWidth(tableRows, `average_sell_price_formatted`, {
-          minWidth: 150,
-        }),
-        textOverview: true,
-        align: Align.Right,
-      },
-    ],
-    [tableRows],
-  );
-};
+import { Intent, Menu, MenuItem, ProgressBar, Text } from '@blueprintjs/core';
+import {
+  useSalesByItemsCsvExport,
+  useSalesByItemsXlsxExport,
+} from '@/hooks/query';
 
 /**
  * sales by items progress loading bar.
@@ -89,7 +38,7 @@ export const SalesByItemsSheetExportMenu = () => {
     isCloseButtonShown: true,
     timeout: 2000,
   };
-  const { query } = useBalanceSheetContext();
+  const { query } = useSalesByItemsContext();
 
   const openProgressToast = (amount: number) => {
     return (
@@ -107,7 +56,7 @@ export const SalesByItemsSheetExportMenu = () => {
   };
 
   // Export the report to xlsx.
-  const { mutateAsync: xlsxExport } = useBalanceSheetXlsxExport(query, {
+  const { mutateAsync: xlsxExport } = useSalesByItemsXlsxExport(query, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -126,7 +75,7 @@ export const SalesByItemsSheetExportMenu = () => {
     },
   });
   // Export the report to csv.
-  const { mutateAsync: csvExport } = useBalanceSheetCsvExport(query, {
+  const { mutateAsync: csvExport } = useSalesByItemsCsvExport(query, {
     onDownloadProgress: (xlsxExportProgress: number) => {
       if (!toastKey.current) {
         toastKey.current = AppToaster.show({
@@ -146,11 +95,11 @@ export const SalesByItemsSheetExportMenu = () => {
   });
   // Handle csv export button click.
   const handleCsvExportBtnClick = () => {
-    csvExport().then(() => {});
+    csvExport();
   };
   // Handle xlsx export button click.
   const handleXlsxExportBtnClick = () => {
-    xlsxExport().then(() => {});
+    xlsxExport();
   };
 
   return (