feat: sorting columns.

2026-02-15 20:30:33 +00:00 · 2021-03-03 20:07:33 +02:00
parent 31f864bc4e
commit 5f92196317
15 changed files with 305 additions and 269 deletions
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -44,17 +44,17 @@ export const useManualJournalsColumns = () => {
        className: 'journal_type',
      },
      {
-        id: 'publish',
+        id: 'status',
        Header: formatMessage({ id: 'publish' }),
        accessor: (row) => StatusAccessor(row),
        width: 95,
-        className: 'publish',
+        className: 'status',
      },
      {
        id: 'note',
        Header: formatMessage({ id: 'note' }),
        accessor: NoteAccessor,
-        disableSorting: true,
+        disableSortBy: true,
        width: 85,
        className: 'note',
      },
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -139,28 +139,28 @@ export function useExpensesTableColumns() {
        className: 'payment_date',
      },
      {
-        id: 'total_amount',
+        id: 'amount',
        Header: formatMessage({ id: 'full_amount' }),
        accessor: TotalAmountAccessor,
-        className: 'total_amount',
+        className: 'amount',
        width: 150,
      },
      {
-        id: 'payment_account_id',
+        id: 'payment_account',
        Header: formatMessage({ id: 'payment_account' }),
        accessor: 'payment_account.name',
        className: 'payment_account',
        width: 150,
      },
      {
-        id: 'expense_account_id',
+        id: 'expense_account',
        Header: formatMessage({ id: 'expense_account' }),
        accessor: ExpenseAccountAccessor,
        width: 160,
        className: 'expense_account',
      },
      {
-        id: 'publish',
+        id: 'published',
        Header: formatMessage({ id: 'publish' }),
        accessor: PublishAccessor,
        width: 100,
--- a/client/src/containers/InventoryAdjustments/components.js
+++ b/client/src/containers/InventoryAdjustments/components.js
@@ -158,7 +158,7 @@ export const useInventoryAdjustmentsColumns = () => {
        width: 100,
      },
      {
-        id: 'publish',
+        id: 'published_at',
        Header: formatMessage({ id: 'status' }),
        accessor: PublishAccessor,
        width: 95,
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -82,7 +82,7 @@ export function ItemsActionMenuList({
  },
 }) {
  const { formatMessage } = useIntl();
- 
+
  return (
    <Menu>
      <MenuItem
@@ -124,7 +124,7 @@ export function ItemsActionMenuList({
      />
    </Menu>
  );
-};
+}

 export const ItemsActionsTableCell = (props) => {
  return (
@@ -137,7 +137,6 @@ export const ItemsActionsTableCell = (props) => {
  );
 };

-
 /**
 * Retrieve all items table columns.
 */
@@ -147,30 +146,35 @@ export const useItemsTableColumns = () => {
  return React.useMemo(
    () => [
      {
+        id: 'name',
        Header: formatMessage({ id: 'item_name' }),
        accessor: 'name',
        className: 'name',
        width: 180,
      },
      {
+        id:'code',
        Header: formatMessage({ id: 'item_code' }),
        accessor: 'code',
        className: 'code',
        width: 120,
      },
      {
+        id: 'type',
        Header: formatMessage({ id: 'item_type' }),
        accessor: ItemTypeAccessor,
        className: 'item_type',
        width: 120,
      },
      {
+        id: 'category',
        Header: formatMessage({ id: 'category' }),
        accessor: 'category.name',
        className: 'category',
        width: 150,
      },
      {
+        id:'sell_price',
        Header: formatMessage({ id: 'sell_price' }),
        Cell: SellPriceCell,
        accessor: 'sell_price',
@@ -178,6 +182,7 @@ export const useItemsTableColumns = () => {
        width: 150,
      },
      {
+        id:'cost_price',
        Header: formatMessage({ id: 'cost_price' }),
        Cell: CostPriceCell,
        accessor: 'cost_price',
@@ -185,6 +190,7 @@ export const useItemsTableColumns = () => {
        width: 150,
      },
      {
+        id:'quantity_on_hand',
        Header: formatMessage({ id: 'quantity_on_hand' }),
        accessor: 'quantity_on_hand',
        Cell: QuantityOnHandCell,
@@ -199,4 +205,4 @@ export const useItemsTableColumns = () => {
    ],
    [formatMessage],
  );
-}
+};
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -112,11 +112,11 @@ export function useBillsTableColumns() {
        className: 'bill_date',
      },
      {
-        id: 'vendor_id',
+        id: 'vendor',
        Header: formatMessage({ id: 'vendor_name' }),
        accessor: 'vendor.display_name',
        width: 140,
-        className: 'vendor_id',
+        className: 'vendor',
      },
      {
        id: 'bill_number',
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -83,7 +83,7 @@ export function usePaymentMadesTableColumns() {
        className: 'payment_date',
      },
      {
-        id: 'vendor_id',
+        id: 'vendor',
        Header: formatMessage({ id: 'vendor_name' }),
        accessor: 'vendor.display_name',
        width: 140,
@@ -98,7 +98,7 @@ export function usePaymentMadesTableColumns() {
        className: 'payment_number',
      },
      {
-        id: 'payment_account_id',
+        id: 'payment_account',
        Header: formatMessage({ id: 'payment_account' }),
        accessor: 'payment_account.name',
        width: 140,
@@ -112,7 +112,7 @@ export function usePaymentMadesTableColumns() {
        className: 'amount',
      },
      {
-        id: 'reference',
+        id: 'reference_no',
        Header: formatMessage({ id: 'reference' }),
        accessor: 'reference',
        width: 140,
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -153,7 +153,7 @@ export function useEstiamtesTableColumns() {
        className: 'estimate_date',
      },
      {
-        id: 'customer_id',
+        id: 'customer',
        Header: formatMessage({ id: 'customer_name' }),
        accessor: 'customer.display_name',
        width: 140,
@@ -190,11 +190,11 @@ export function useEstiamtesTableColumns() {
        className: 'status',
      },
      {
-        id: 'reference',
+        id: 'reference_no',
        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference',
-        width: 140,
-        className: 'reference',
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
      },
      {
        id: 'actions',
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -159,7 +159,7 @@ export function useInvoicesTableColumns() {
        className: 'invoice_date',
      },
      {
-        id: 'customer_id',
+        id: 'customer',
        Header: formatMessage({ id: 'customer_name' }),
        accessor: 'customer.display_name',
        width: 180,
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -93,7 +93,7 @@ export function usePaymentReceivesColumns() {
        className: 'payment_date',
      },
      {
-        id: 'customer_id',
+        id: 'customer',
        Header: formatMessage({ id: 'customer_name' }),
        accessor: 'customer.display_name',
        width: 160,
@@ -122,7 +122,7 @@ export function usePaymentReceivesColumns() {
        className: 'reference_no',
      },
      {
-        id: 'deposit_account_id',
+        id: 'deposit_account',
        Header: formatMessage({ id: 'deposit_account' }),
        accessor: 'deposit_account.name',
        width: 140,
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -104,7 +104,7 @@ export function useReceiptsTableColumns() {
        className: 'receipt_date',
      },
      {
-        id: 'customer_id',
+        id: 'customer',
        Header: formatMessage({ id: 'customer_name' }),
        accessor: 'customer.display_name',
        width: 140,
@@ -119,7 +119,7 @@ export function useReceiptsTableColumns() {
        className: 'receipt_number',
      },
      {
-        id: 'deposit_account_id',
+        id: 'deposit_account',
        Header: formatMessage({ id: 'deposit_account' }),
        accessor: 'deposit_account.name',
        width: 140,
--- a/server/src/models/BillPayment.js
+++ b/server/src/models/BillPayment.js
@@ -1,19 +1,19 @@
-import { Model } from 'objection';
-import TenantModel from 'models/TenantModel';
+import { Model } from "objection";
+import TenantModel from "models/TenantModel";

 export default class BillPayment extends TenantModel {
  /**
   * Table name
   */
  static get tableName() {
-    return 'bills_payments';
+    return "bills_payments";
  }

  /**
   * Timestamps columns.
   */
  get timestamps() {
-    return ['createdAt', 'updatedAt'];
+    return ["createdAt", "updatedAt"];
  }

  static get resourceable() {
@@ -24,18 +24,18 @@ export default class BillPayment extends TenantModel {
   * Relationship mapping.
   */
  static get relationMappings() {
-    const BillPaymentEntry = require('models/BillPaymentEntry');
-    const AccountTransaction = require('models/AccountTransaction');
-    const Contact = require('models/Contact');
-    const Account = require('models/Account');
+    const BillPaymentEntry = require("models/BillPaymentEntry");
+    const AccountTransaction = require("models/AccountTransaction");
+    const Contact = require("models/Contact");
+    const Account = require("models/Account");

    return {
      entries: {
        relation: Model.HasManyRelation,
        modelClass: BillPaymentEntry.default,
        join: {
-          from: 'bills_payments.id',
-          to: 'bills_payments_entries.billPaymentId',
+          from: "bills_payments.id",
+          to: "bills_payments_entries.billPaymentId",
        },
      },

@@ -43,20 +43,20 @@ export default class BillPayment extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: Contact.default,
        join: {
-          from: 'bills_payments.vendorId',
-          to: 'contacts.id',
+          from: "bills_payments.vendorId",
+          to: "contacts.id",
        },
        filter(query) {
-          query.where('contact_service', 'vendor');
-        }
+          query.where("contact_service", "vendor");
+        },
      },

      paymentAccount: {
        relation: Model.BelongsToOneRelation,
        modelClass: Account.default,
        join: {
-          from: 'bills_payments.paymentAccountId',
-          to: 'accounts.id',
+          from: "bills_payments.paymentAccountId",
+          to: "accounts.id",
        },
      },

@@ -64,11 +64,11 @@ export default class BillPayment extends TenantModel {
        relation: Model.HasManyRelation,
        modelClass: AccountTransaction.default,
        join: {
-          from: 'bills_payments.id',
-          to: 'accounts_transactions.referenceId'
+          from: "bills_payments.id",
+          to: "accounts_transactions.referenceId",
        },
        filter(builder) {
-          builder.where('reference_type', 'BillPayment');
+          builder.where("reference_type", "BillPayment");
        },
      },
    };
@@ -80,16 +80,22 @@ export default class BillPayment extends TenantModel {
  static get fields() {
    return {
      vendor: {
-        lable: "Vendor name",
-        column: 'vendor_id',
-        relation: 'contacts.id',
-        relationColumn: 'contacts.display_name',
+        label: "Vendor name",
+        column: "vendor_id",
+        relation: "contacts.id",
+        relationColumn: "contacts.display_name",
      },
      amount: {
        label: "Amount",
        column: "amount",
-        columnType: 'number',
-        fieldType: 'number',
+        columnType: "number",
+        fieldType: "number",
+      },
+      due_amount: {
+        label: "Due amount",
+        column: "due_amount",
+        columnType: "number",
+        fieldType: "number",
      },
      payment_account: {
        label: "Payment account",
@@ -97,40 +103,40 @@ export default class BillPayment extends TenantModel {
        relation: "accounts.id",
        relationColumn: "accounts.name",

-        fieldType: 'options',
-        optionsResource: 'Account',
-        optionsKey: 'id',
-        optionsLabel: 'name',
+        fieldType: "options",
+        optionsResource: "Account",
+        optionsKey: "id",
+        optionsLabel: "name",
      },
      payment_number: {
        label: "Payment number",
        column: "payment_number",
-        columnType: 'string',
-        fieldType: 'text',
+        columnType: "string",
+        fieldType: "text",
      },
      payment_date: {
        label: "Payment date",
        column: "payment_date",
-        columnType: 'date',
-        fieldType: 'date',
+        columnType: "date",
+        fieldType: "date",
      },
      reference_no: {
        label: "Reference No.",
        column: "reference",
-        columnType: 'string',
-        fieldType: 'text',
+        columnType: "string",
+        fieldType: "text",
      },
      description: {
        label: "Description",
        column: "description",
-        columnType: 'string',
-        fieldType: 'text',
+        columnType: "string",
+        fieldType: "text",
      },
      created_at: {
-        label: 'Created at',
-        column: 'created_at',
-        columnType: 'date',
+        label: "Created at",
+        column: "created_at",
+        columnType: "date",
      },
-    }
+    };
  }
 }
--- a/server/src/models/Item.js
+++ b/server/src/models/Item.js
@@ -1,22 +1,20 @@
-import { Model } from 'objection';
-import TenantModel from 'models/TenantModel';
-import {
-  buildFilterQuery,
-} from 'lib/ViewRolesBuilder';
+import { Model } from "objection";
+import TenantModel from "models/TenantModel";
+import { buildFilterQuery } from "lib/ViewRolesBuilder";

 export default class Item extends TenantModel {
  /**
   * Table name
   */
  static get tableName() {
-    return 'items';
+    return "items";
  }

  /**
   * Model timestamps.
   */
  get timestamps() {
-    return ['createdAt', 'updatedAt'];
+    return ["createdAt", "updatedAt"];
  }

  /**
@@ -44,9 +42,9 @@ export default class Item extends TenantModel {
   * Relationship mapping.
   */
  static get relationMappings() {
-    const Media = require('models/Media');
-    const Account = require('models/Account');
-    const ItemCategory = require('models/ItemCategory');
+    const Media = require("models/Media");
+    const Account = require("models/Account");
+    const ItemCategory = require("models/ItemCategory");

    return {
      /**
@@ -56,8 +54,8 @@ export default class Item extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: ItemCategory.default,
        join: {
-          from: 'items.categoryId',
-          to: 'items_categories.id',
+          from: "items.categoryId",
+          to: "items_categories.id",
        },
      },

@@ -65,8 +63,8 @@ export default class Item extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: Account.default,
        join: {
-          from: 'items.costAccountId',
-          to: 'accounts.id',
+          from: "items.costAccountId",
+          to: "accounts.id",
        },
      },

@@ -74,8 +72,8 @@ export default class Item extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: Account.default,
        join: {
-          from: 'items.sellAccountId',
-          to: 'accounts.id',
+          from: "items.sellAccountId",
+          to: "accounts.id",
        },
      },

@@ -83,8 +81,8 @@ export default class Item extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: Account.default,
        join: {
-          from: 'items.inventoryAccountId',
-          to: 'accounts.id',
+          from: "items.inventoryAccountId",
+          to: "accounts.id",
        },
      },

@@ -92,13 +90,13 @@ export default class Item extends TenantModel {
        relation: Model.ManyToManyRelation,
        modelClass: Media.default,
        join: {
-          from: 'items.id',
+          from: "items.id",
          through: {
-            from: 'media_links.model_id',
-            to: 'media_links.media_id',
+            from: "media_links.model_id",
+            to: "media_links.media_id",
          },
-          to: 'media.id',
-        }
+          to: "media.id",
+        },
      },
    };
  }
@@ -109,72 +107,76 @@ export default class Item extends TenantModel {
  static get fields() {
    return {
      type: {
-        label: 'Type',
-        column: 'type',
+        label: "Type",
+        column: "type",
      },
      name: {
-        label: 'Name',
-        column: 'name',
+        label: "Name",
+        column: "name",
+      },
+      code: {
+        label: "Code",
+        column: "code",
      },
      sellable: {
-        label: 'Sellable',
-        column: 'sellable',
+        label: "Sellable",
+        column: "sellable",
      },
      purchasable: {
-        label: 'Purchasable',
-        column: 'purchasable',
+        label: "Purchasable",
+        column: "purchasable",
      },
      sell_price: {
-        label: 'Sell price',
-        column: 'sell_price'
+        label: "Sell price",
+        column: "sell_price",
      },
      cost_price: {
-        label: 'Cost price',
-        column: 'cost_price',
+        label: "Cost price",
+        column: "cost_price",
      },
      currency_code: {
-        label: 'Currency',
-        column: 'currency_code',
+        label: "Currency",
+        column: "currency_code",
      },
      cost_account: {
-        label: 'Cost account',
-        column: 'cost_account_id',
-        relation: 'accounts.id',
-        relationColumn: 'accounts.name',
+        label: "Cost account",
+        column: "cost_account_id",
+        relation: "accounts.id",
+        relationColumn: "accounts.name",
      },
      sell_account: {
-        label: 'Sell account',
-        column: 'sell_account_id',
-        relation: 'accounts.id',
-        relationColumn: 'accounts.name',
+        label: "Sell account",
+        column: "sell_account_id",
+        relation: "accounts.id",
+        relationColumn: "accounts.name",
      },
      inventory_account: {
        label: "Inventory account",
-        column: 'inventory_account_id',
-        relation: 'accounts.id',
-        relationColumn: 'accounts.name',
+        column: "inventory_account_id",
+        relation: "accounts.id",
+        relationColumn: "accounts.name",
      },
      sell_description: {
        label: "Sell description",
-        column: 'sell_description',
+        column: "sell_description",
      },
      purchase_description: {
        label: "Purchase description",
-        column: 'purchase_description',
+        column: "purchase_description",
      },
      quantity_on_hand: {
        label: "Quantity on hand",
-        column: 'quantity_on_hand',
+        column: "quantity_on_hand",
      },
      note: {
-        label: 'Note',
-        column: 'note',
+        label: "Note",
+        column: "note",
      },
      category: {
        label: "Category",
-        column: 'category_id',
-        relation: 'items_categories.id',
-        relationColumn: 'items_categories.name',
+        column: "category_id",
+        relation: "items_categories.id",
+        relationColumn: "items_categories.name",
      },
      // user: {
      //   label: 'User',
@@ -183,10 +185,10 @@ export default class Item extends TenantModel {
      //   relationColumn: 'users.',
      // },
      created_at: {
-        label: 'Created at',
-        column: 'created_at',
-        columnType: 'date',
-        fieldType: 'date',
+        label: "Created at",
+        column: "created_at",
+        columnType: "date",
+        fieldType: "date",
      },
    };
  }
--- a/server/src/models/SaleEstimate.js
+++ b/server/src/models/SaleEstimate.js
@@ -172,6 +172,12 @@ export default class SaleEstimate extends TenantModel {
        columnType: 'number',
        fieldType: 'number',
      },
+      estimate_number: {
+        label: 'Estimate number',
+        column: 'estimate_number',
+        columnType: 'text',
+        fieldType: 'text',
+      },
      customer: {
        label: 'Customer',
        column: 'customer_id',
@@ -195,6 +201,12 @@ export default class SaleEstimate extends TenantModel {
        columnType: 'date',
        fieldType: 'date',
      },
+      reference_no: {
+        label: "Reference No.",
+        column: "reference_no",
+        columnType: "number",
+        fieldType: "number",
+      },
      note: {
        label: 'Note',
        column: 'note',
--- a/server/src/models/SaleInvoice.js
+++ b/server/src/models/SaleInvoice.js
@@ -1,23 +1,23 @@
-import { Model, raw } from 'objection';
-import moment from 'moment';
-import TenantModel from 'models/TenantModel';
-import { defaultToTransform } from 'utils';
-import { QueryBuilder } from 'knex';
-import { query } from 'winston';
+import { Model, raw } from "objection";
+import moment from "moment";
+import TenantModel from "models/TenantModel";
+import { defaultToTransform } from "utils";
+import { QueryBuilder } from "knex";
+import { query } from "winston";

 export default class SaleInvoice extends TenantModel {
  /**
   * Table name
   */
  static get tableName() {
-    return 'sales_invoices';
+    return "sales_invoices";
  }

  /**
   * Timestamps columns.
   */
  get timestamps() {
-    return ['created_at', 'updated_at'];
+    return ["created_at", "updated_at"];
  }

  /**
@@ -25,14 +25,14 @@ export default class SaleInvoice extends TenantModel {
   */
  static get virtualAttributes() {
    return [
-      'dueAmount',
-      'isDelivered',
-      'isOverdue',
-      'isPartiallyPaid',
-      'isFullyPaid',
-      'isPaid',
-      'remainingDays',
-      'overdueDays',
+      "dueAmount",
+      "isDelivered",
+      "isOverdue",
+      "isPartiallyPaid",
+      "isFullyPaid",
+      "isPaid",
+      "remainingDays",
+      "overdueDays",
    ];
  }

@@ -91,12 +91,14 @@ export default class SaleInvoice extends TenantModel {
   */
  get remainingDays() {
    // Can't continue in case due date not defined.
-    if (!this.dueDate) { return null; }
+    if (!this.dueDate) {
+      return null;
+    }

    const date = moment();
    const dueDate = moment(this.dueDate);

-    return Math.max(dueDate.diff(date, 'days'), 0);
+    return Math.max(dueDate.diff(date, "days"), 0);
  }

  /**
@@ -112,17 +114,19 @@ export default class SaleInvoice extends TenantModel {
  }

  /**
-   * 
-   * @param {*} asDate 
+   *
+   * @param {*} asDate
   */
-  getOverdueDays(asDate = moment().format('YYYY-MM-DD')) {
+  getOverdueDays(asDate = moment().format("YYYY-MM-DD")) {
    // Can't continue in case due date not defined.
-    if (!this.dueDate) { return null; }
+    if (!this.dueDate) {
+      return null;
+    }

    const date = moment(asDate);
    const dueDate = moment(this.dueDate);

-    return Math.max(date.diff(dueDate, 'days'), 0);
+    return Math.max(date.diff(dueDate, "days"), 0);
  }

  /**
@@ -134,71 +138,71 @@ export default class SaleInvoice extends TenantModel {
       * Filters the due invoices.
       */
      dueInvoices(query) {
-        query.where(raw('BALANCE - PAYMENT_AMOUNT > 0'));
+        query.where(raw("BALANCE - PAYMENT_AMOUNT > 0"));
      },
      /**
       * Filters the invoices between the given date range.
       */
-      filterDateRange(query, startDate, endDate, type = 'day') {
-        const dateFormat = 'YYYY-MM-DD HH:mm:ss';
+      filterDateRange(query, startDate, endDate, type = "day") {
+        const dateFormat = "YYYY-MM-DD HH:mm:ss";
        const fromDate = moment(startDate).startOf(type).format(dateFormat);
        const toDate = moment(endDate).endOf(type).format(dateFormat);

        if (startDate) {
-          query.where('invoice_date', '>=', fromDate);
+          query.where("invoice_date", ">=", fromDate);
        }
        if (endDate) {
-          query.where('invoice_date', '<=', toDate);
+          query.where("invoice_date", "<=", toDate);
        }
      },
      /**
       * Filters the invoices in draft status.
       */
      draft(query) {
-        query.where('delivered_at', null);
+        query.where("delivered_at", null);
      },
      /**
       * Filters the delivered invoices.
       */
      delivered(query) {
-        query.whereNot('delivered_at', null);
+        query.whereNot("delivered_at", null);
      },
      /**
       * Filters the unpaid invoices.
       */
      unpaid(query) {
-        query.where(raw('PAYMENT_AMOUNT = 0'));
+        query.where(raw("PAYMENT_AMOUNT = 0"));
      },
      /**
       * Filters the overdue invoices.
       */
-      overdue(query, asDate = moment().format('YYYY-MM-DD')) {
-        query.where('due_date', '<', asDate);
+      overdue(query, asDate = moment().format("YYYY-MM-DD")) {
+        query.where("due_date", "<", asDate);
      },
      /**
       * Filters the not overdue invoices.
       */
-      notOverdue(query, asDate = moment().format('YYYY-MM-DD')) {
-        query.where('due_date', '>=', asDate);
+      notOverdue(query, asDate = moment().format("YYYY-MM-DD")) {
+        query.where("due_date", ">=", asDate);
      },
      /**
       * Filters the partially invoices.
       */
      partiallyPaid(query) {
-        query.whereNot('payment_amount', 0);
-        query.whereNot(raw('`PAYMENT_AMOUNT` = `BALANCE`'));
+        query.whereNot("payment_amount", 0);
+        query.whereNot(raw("`PAYMENT_AMOUNT` = `BALANCE`"));
      },
      /**
       * Filters the paid invoices.
       */
      paid(query) {
-        query.where(raw('PAYMENT_AMOUNT = BALANCE'));
+        query.where(raw("PAYMENT_AMOUNT = BALANCE"));
      },
      /**
       * Filters the sale invoices from the given date.
       */
      fromDate(query, fromDate) {
-        query.where('invoice_date', '<=', fromDate)
+        query.where("invoice_date", "<=", fromDate);
      },
      /**
       * Sort the sale invoices by full-payment invoices.
@@ -210,8 +214,8 @@ export default class SaleInvoice extends TenantModel {
       * Sort the sale invoices by the due amount.
       */
      sortByDueAmount(query, order) {
-        query.orderByRaw(`BALANCE - PAYMENT_AMOUNT ${order}`)
-      }
+        query.orderByRaw(`BALANCE - PAYMENT_AMOUNT ${order}`);
+      },
    };
  }

@@ -219,22 +223,22 @@ export default class SaleInvoice extends TenantModel {
   * Relationship mapping.
   */
  static get relationMappings() {
-    const AccountTransaction = require('models/AccountTransaction');
-    const ItemEntry = require('models/ItemEntry');
-    const Contact = require('models/Contact');
-    const InventoryCostLotTracker = require('models/InventoryCostLotTracker');
-    const PaymentReceiveEntry = require('models/PaymentReceiveEntry');
+    const AccountTransaction = require("models/AccountTransaction");
+    const ItemEntry = require("models/ItemEntry");
+    const Contact = require("models/Contact");
+    const InventoryCostLotTracker = require("models/InventoryCostLotTracker");
+    const PaymentReceiveEntry = require("models/PaymentReceiveEntry");

    return {
      entries: {
        relation: Model.HasManyRelation,
        modelClass: ItemEntry.default,
        join: {
-          from: 'sales_invoices.id',
-          to: 'items_entries.referenceId',
+          from: "sales_invoices.id",
+          to: "items_entries.referenceId",
        },
        filter(builder) {
-          builder.where('reference_type', 'SaleInvoice');
+          builder.where("reference_type", "SaleInvoice");
        },
      },

@@ -242,23 +246,23 @@ export default class SaleInvoice extends TenantModel {
        relation: Model.BelongsToOneRelation,
        modelClass: Contact.default,
        join: {
-          from: 'sales_invoices.customerId',
-          to: 'contacts.id',
+          from: "sales_invoices.customerId",
+          to: "contacts.id",
        },
        filter(query) {
-          query.where('contact_service', 'Customer');
-        }
+          query.where("contact_service", "Customer");
+        },
      },

      transactions: {
        relation: Model.HasManyRelation,
        modelClass: AccountTransaction.default,
        join: {
-          from: 'sales_invoices.id',
-          to: 'accounts_transactions.referenceId'
+          from: "sales_invoices.id",
+          to: "accounts_transactions.referenceId",
        },
        filter(builder) {
-          builder.where('reference_type', 'SaleInvoice');
+          builder.where("reference_type", "SaleInvoice");
        },
      },

@@ -266,11 +270,11 @@ export default class SaleInvoice extends TenantModel {
        relation: Model.HasManyRelation,
        modelClass: InventoryCostLotTracker.default,
        join: {
-          from: 'sales_invoices.id',
-          to: 'inventory_cost_lot_tracker.transactionId'
+          from: "sales_invoices.id",
+          to: "inventory_cost_lot_tracker.transactionId",
        },
        filter(builder) {
-          builder.where('transaction_type', 'SaleInvoice');
+          builder.where("transaction_type", "SaleInvoice");
        },
      },

@@ -278,8 +282,8 @@ export default class SaleInvoice extends TenantModel {
        relation: Model.HasManyRelation,
        modelClass: PaymentReceiveEntry.default,
        join: {
-          from: 'sales_invoices.id',
-          to: 'payment_receives_entries.invoice_id',
+          from: "sales_invoices.id",
+          to: "payment_receives_entries.invoice_id",
        },
      },
    };
@@ -287,15 +291,15 @@ export default class SaleInvoice extends TenantModel {

  /**
   * Change payment amount.
-   * @param {Integer} invoiceId 
-   * @param {Numeric} amount 
+   * @param {Integer} invoiceId
+   * @param {Numeric} amount
   */
  static async changePaymentAmount(invoiceId, amount) {
-    const changeMethod = amount > 0 ? 'increment' : 'decrement';
+    const changeMethod = amount > 0 ? "increment" : "decrement";

    await this.query()
-      .where('id', invoiceId)
-      [changeMethod]('payment_amount', Math.abs(amount));      
+      .where("id", invoiceId)
+      [changeMethod]("payment_amount", Math.abs(amount));
  }

  /**
@@ -304,114 +308,120 @@ export default class SaleInvoice extends TenantModel {
  static get fields() {
    return {
      customer: {
-        label: 'Customer',
-        column: 'customer_id',
-        relation: 'contacts.id',
-        relationColumn: 'contacts.displayName',
+        label: "Customer",
+        column: "customer_id",
+        relation: "contacts.id",
+        relationColumn: "contacts.displayName",

-        fieldType: 'options',
-        optionsResource: 'customers',
-        optionsKey: 'id',
-        optionsLable: 'displayName',
+        fieldType: "options",
+        optionsResource: "customers",
+        optionsKey: "id",
+        optionsLable: "displayName",
      },
      invoice_date: {
-        label: 'Invoice date',
-        column: 'invoice_date',
-        columnType: 'date',
-        fieldType: 'date',
+        label: "Invoice date",
+        column: "invoice_date",
+        columnType: "date",
+        fieldType: "date",
      },
      due_date: {
-        label: 'Due date',
-        column: 'due_date',
-        columnType: 'date',
-        fieldType: 'date',
+        label: "Due date",
+        column: "due_date",
+        columnType: "date",
+        fieldType: "date",
      },
      invoice_no: {
-        label: 'Invoice No.',
-        column: 'invoice_no',
-        columnType: 'number',
-        fieldType: 'number',
+        label: "Invoice No.",
+        column: "invoice_no",
+        columnType: "number",
+        fieldType: "number",
      },
-      refernece_no: {
-        label: 'Reference No.',
-        column: 'reference_no',
-        columnType: 'number',
-        fieldType: 'number',
+      reference_no: {
+        label: "Reference No.",
+        column: "reference_no",
+        columnType: "number",
+        fieldType: "number",
      },
      invoice_message: {
-        label: 'Invoice message',
-        column: 'invoice_message',
-        columnType: 'text',
-        fieldType: 'text',
+        label: "Invoice message",
+        column: "invoice_message",
+        columnType: "text",
+        fieldType: "text",
      },
      terms_conditions: {
-        label: 'Terms & conditions',
-        column: 'terms_conditions',
-        columnType: 'text',
-        fieldType: 'text',
+        label: "Terms & conditions",
+        column: "terms_conditions",
+        columnType: "text",
+        fieldType: "text",
      },
      invoice_amount: {
-        label: 'Invoice amount',
-        column: 'invoice_amount',
-        columnType: 'number',
-        fieldType: 'number',
+        label: "Invoice amount",
+        column: "invoice_amount",
+        columnType: "number",
+        fieldType: "number",
      },
      payment_amount: {
-        label: 'Payment amount',
-        column: 'payment_amount',
-        columnType: 'number',
-        fieldType: 'number',
+        label: "Payment amount",
+        column: "payment_amount",
+        columnType: "number",
+        fieldType: "number",
+      },
+      balance: {
+        label: "Balance",
+        column: "balance",
+        columnType: "number",
+        fieldType: "number",
      },
      due_amount: {
-        label: 'Due amount',
-        column: 'due_amount',
-        columnType: 'number',
-        fieldType: 'number',
+        label: "Due amount",
+        column: "due_amount",
+        columnType: "number",
+        fieldType: "number",
        sortQuery(query, role) {
-          query.modify('sortByDueAmount', role.order);
-        }
+          query.modify("sortByDueAmount", role.order);
+        },
      },
      created_at: {
-        label: 'Created at',
-        column: 'created_at',
-        columnType: 'date',
+        label: "Created at",
+        column: "created_at",
+        columnType: "date",
      },
      status: {
-        label: 'Status',
+        label: "Status",
        options: [
-          { key: 'draft', label: 'Draft', },
-          { key: 'delivered', label: 'Delivered' },
-          { key: 'unpaid', label: 'Unpaid' },
-          { key: 'overdue', label: 'Overdue' },
-          { key: 'partially-paid', label: 'Partially paid' },
-          { key: 'paid', label: 'Paid' },
+          { key: "draft", label: "Draft" },
+          { key: "delivered", label: "Delivered" },
+          { key: "unpaid", label: "Unpaid" },
+          { key: "overdue", label: "Overdue" },
+          { key: "partially-paid", label: "Partially paid" },
+          { key: "paid", label: "Paid" },
        ],
        query: (query, role) => {
-          switch(role.value) {
-            case 'draft':
-              query.modify('draft');
+          switch (role.value) {
+            case "draft":
+              query.modify("draft");
              break;
-            case 'delivered':
-              query.modify('delivered');
+            case "delivered":
+              query.modify("delivered");
              break;
-            case 'unpaid':
-              query.modify('unpaid');
+            case "unpaid":
+              query.modify("unpaid");
              break;
-            case 'overdue':
-              query.modify('overdue');
+            case "overdue":
+              query.modify("overdue");
              break;
-            case 'partially-paid':
-              query.modify('partiallyPaid');
+            case "partially-paid":
+              query.modify("partiallyPaid");
              break;
-            case 'paid':
-              query.modify('paid');
+            case "paid":
+              query.modify("paid");
              break;
          }
        },
        sortQuery(query, role) {
-          query.modify('sortByStatus', role.order);
-        }
-      }
+          query.modify("sortByStatus", role.order);
+        },
+      },
    };
  }
 }
--- a/server/src/models/SaleReceipt.js
+++ b/server/src/models/SaleReceipt.js
@@ -133,7 +133,7 @@ export default class SaleReceipt extends TenantModel {
      },
      deposit_account: {
        column: 'deposit_account_id',
-        lable: 'Deposit account',
+        label: 'Deposit account',
        relation: "accounts.id",
        optionsResource: "account",
      },