From 32fb3f8649aaab0611947bf18368045fb4125094 Mon Sep 17 00:00:00 2001
From: Ricargame <78000356+Ricargame@users.noreply.github.com>
Date: Mon, 6 May 2024 15:33:04 -0400
Subject: [PATCH] feat: `Invoice` search field (#2199)

* bugfix: Invoices

* fix: Invoice

* fix: Invoice

* fix: Invoice

* fix: Invoice

* fix: Invoice

* bugfix: Invoices

* fix: Invoice

* fix: Invoice

* fix: Invoice
---
 src/api/ADempiere/field/search/invoice.ts     | 114 +++++
 .../PanelForm/QueryCriteria/InvoiceField.vue  |  95 +++++
 .../QueryCriteria/PaidFieldInvoice.vue        |  63 +++
 .../QueryCriteria/SaleTransactionField.vue    | 106 +++++
 .../QueryCriteria/billingDateField.vue        |  73 ++++
 .../QueryCriteria/businessPartnerField.vue    | 100 +++++
 .../QueryCriteria/descriptionField.vue        |  54 +++
 .../PanelForm/QueryCriteria/documentField.vue |  53 +++
 .../QueryCriteria/grandTotalField.vue         |  66 +++
 .../PanelForm/QueryCriteria/index.vue         | 120 ++++++
 .../InvoiceInfo/PanelForm/index.vue           | 403 ++++++++++++++++++
 .../InvoiceInfo/PanelForm/useInvoice.js       | 288 +++++++++++++
 .../FieldSearch/InvoiceInfo/button.vue        | 141 ++++++
 .../FieldSearch/InvoiceInfo/index.vue         | 207 +++++++++
 .../FieldSearch/InvoiceInfo/mixinInvoice.js   |  85 ++++
 .../FieldSearch/InvoiceInfo/panelFooter.vue   | 229 ++++++++++
 .../FieldSearch/InvoiceInfo/tableRecords.vue  | 280 ++++++++++++
 .../FieldDefinition/FieldSearch/index.vue     |   3 +
 src/lang/ADempiere/en/field/index.js          |   4 +-
 src/lang/ADempiere/en/field/invoice.js        |  36 ++
 src/lang/ADempiere/es/field/index.js          |   4 +-
 src/lang/ADempiere/es/field/invoice.js        |  36 ++
 src/lang/ADempiere/es/field/product.ts        |   4 +-
 .../ADempiere/field/search/invoiceSearch.js   |  99 +++++
 .../dictionary/field/search/invoice.ts        |  61 +++
 25 files changed, 2720 insertions(+), 4 deletions(-)
 create mode 100644 src/api/ADempiere/field/search/invoice.ts
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/InvoiceField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/PaidFieldInvoice.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/SaleTransactionField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/billingDateField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/businessPartnerField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/descriptionField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/documentField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/grandTotalField.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/index.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/index.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/useInvoice.js
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/button.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/index.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/mixinInvoice.js
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/panelFooter.vue
 create mode 100644 src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/tableRecords.vue
 create mode 100644 src/lang/ADempiere/en/field/invoice.js
 create mode 100644 src/lang/ADempiere/es/field/invoice.js
 create mode 100644 src/store/modules/ADempiere/field/search/invoiceSearch.js
 create mode 100644 src/utils/ADempiere/dictionary/field/search/invoice.ts

diff --git a/src/api/ADempiere/field/search/invoice.ts b/src/api/ADempiere/field/search/invoice.ts
new file mode 100644
index 00000000000..7565090501c
--- /dev/null
+++ b/src/api/ADempiere/field/search/invoice.ts
@@ -0,0 +1,114 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Get Instance for connection
+import { request } from '@/utils/ADempiere/request'
+
+export function requestListOrders({
+  filters,
+  sort_by,
+  group_columns,
+  select_columns,
+  page_size,
+  page_token,
+  search_value,
+  context_attributes,
+  is_only_active_records,
+  is_sales_transaction
+}) {
+  return request({
+    url: '/field/invoices/orders',
+    method: 'get',
+    params: {
+      filters,
+      sort_by,
+      group_columns,
+      select_columns,
+      page_size,
+      page_token,
+      search_value,
+      context_attributes,
+      is_only_active_records,
+      is_sales_transaction
+    }
+  })
+}
+
+export function requestListBusinessPartners({
+  filters,
+  sort_by,
+  group_columns,
+  select_columns,
+  page_size,
+  page_token,
+  search_value,
+  context_attributes,
+  is_only_active_records,
+  is_sales_transaction
+}) {
+  return request({
+    url: '/field/invoices/business-partners',
+    method: 'get',
+    params: {
+      filters,
+      sort_by,
+      group_columns,
+      select_columns,
+      page_size,
+      page_token,
+      search_value,
+      context_attributes,
+      is_only_active_records,
+      is_sales_transaction
+    }
+  })
+}
+
+export function requestListInvoicesInfo({
+  page_size,
+  page_token,
+  document_no,
+  is_sales_transaction,
+  business_partner_id,
+  is_paid,
+  description,
+  invoice_date_from,
+  invoice_date_to,
+  order_id,
+  grand_total_from,
+  grand_total_to
+}) {
+  return request({
+    url: '/field/invoices',
+    method: 'get',
+    params: {
+      page_size,
+      page_token,
+      document_no,
+      is_sales_transaction,
+      business_partner_id,
+      is_paid,
+      description,
+      invoice_date_from,
+      invoice_date_to,
+      order_id,
+      grand_total_from,
+      grand_total_to
+    }
+  })
+}
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/InvoiceField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/InvoiceField.vue
new file mode 100644
index 00000000000..396164c8a2f
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/InvoiceField.vue
@@ -0,0 +1,95 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item :label="$t('field.invoice.saleOrder')">
+    <el-select
+      v-model="saleOrderField"
+      clearable
+      filterable
+      size="mini"
+      :filter-method="filterSearchOrder"
+      style="margin: 0px; width: 100%"
+      @visible-change="showList"
+      @change="currentValue()"
+    >
+      <el-option
+        v-for="item in optionsListOrder"
+        :key="item.id"
+        :label="item.displayColumn"
+        :value="item.id"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import {
+  defineComponent, ref
+} from '@vue/composition-api'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import store from '@/store'
+
+//
+import { requestListOrders } from '@/api/ADempiere/field/search/invoice.ts'
+
+export default defineComponent({
+  name: 'InvoiceField',
+
+  setup() {
+    const optionsListOrder = ref([])
+    const saleOrderField = ref('')
+    function showList(isShow) {
+      if (isShow && isEmptyValue(optionsListOrder.value)) { filterSearchOrder({}) }
+    }
+
+    function filterSearchOrder(
+      searchQuery
+    ) {
+      requestListOrders({
+        search_value: searchQuery
+      })
+        .then(response => {
+          const { records } = response
+          optionsListOrder.value = records.map((list) => {
+            return {
+              ...list,
+              displayColumn: list.values.DisplayColumn
+            }
+          })
+        })
+    }
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        order_id: saleOrderField.value
+      })
+    }
+
+    return {
+      optionsListOrder,
+      saleOrderField,
+      //
+      filterSearchOrder,
+      showList,
+      currentValue
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/PaidFieldInvoice.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/PaidFieldInvoice.vue
new file mode 100644
index 00000000000..e8be3fc9561
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/PaidFieldInvoice.vue
@@ -0,0 +1,63 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.paid')"
+    style="align-items: center;"
+  >
+    <el-select
+      v-model="paidFieldValue"
+      @change="currentValue()"
+    >
+      <el-option
+        v-for="(option, key) in YES_NO_OPTIONS_LIST"
+        :key="key"
+        :value="option.stringValue"
+        :label="option.displayValue"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+// Constants
+import { YES_NO_OPTIONS_LIST } from '@/utils/ADempiere/dictionary/field/yesNo.js'
+
+export default defineComponent({
+  name: 'PaidField',
+
+  setup() {
+    const paidFieldValue = ref('')
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        is_paid: paidFieldValue.value
+      })
+    }
+    return {
+      paidFieldValue,
+      YES_NO_OPTIONS_LIST,
+      //
+      currentValue
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/SaleTransactionField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/SaleTransactionField.vue
new file mode 100644
index 00000000000..28172132a00
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/SaleTransactionField.vue
@@ -0,0 +1,106 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.saleTransaction')"
+    style="align-items: center;"
+  >
+    <el-select
+      v-model="saleTransactionField"
+      @change="currentValue()"
+    >
+      <el-option
+        v-for="(option, key) in YES_NO_OPTIONS_LIST"
+        :key="key"
+        :value="option.stringValue"
+        :label="option.displayValue"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref, computed } from '@vue/composition-api'
+import store from '@/store'
+
+// Constants
+import { YES_NO_OPTIONS_LIST } from '@/utils/ADempiere/dictionary/field/yesNo'
+// Utils and Helper Methods
+import { isSalesTransaction } from '@/utils/ADempiere/contextUtils'
+// import { isEmptyValue } from '@/utils/ADempiere'
+
+export default defineComponent({
+  name: 'saleTransactionField',
+  props: {
+    uuidForm: {
+      required: true,
+      type: String
+    },
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      required: true,
+      type: String
+    }
+  },
+
+  setup(props) {
+    const saleTransactionField = ref('')
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        is_sales_transaction: saleTransactionField.value
+      })
+    }
+
+    const isSalesTransactionContext = computed(() => {
+      return isSalesTransaction({
+        parentUuid: props.parentUuid,
+        containerUuid: props.containerUuid
+      })
+    })
+    function changeValue() {
+      const response = isSalesTransactionContext.value
+      if (response === true) {
+        saleTransactionField.value = 'Y'
+        return
+      } else if (response === false) {
+        saleTransactionField.value = 'N'
+        return
+      } else {
+        saleTransactionField.value = ''
+      }
+      currentValue()
+      return
+    }
+
+    changeValue()
+
+    return {
+      saleTransactionField,
+      YES_NO_OPTIONS_LIST,
+      isSalesTransactionContext,
+      //
+      currentValue,
+      changeValue
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/billingDateField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/billingDateField.vue
new file mode 100644
index 00000000000..23bd1ea6d95
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/billingDateField.vue
@@ -0,0 +1,73 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.invoiceDate')"
+    style="align-items: center;"
+  >
+    <div class="date-picker-container">
+      <el-date-picker
+        v-model="billingDateFieldFrom"
+        type="datetime"
+        placeholder="Select date and time"
+        @change="currentValue()"
+      />
+      <b style="color: #c0c4cc;padding: 0px 5px;font-weight: bold;">
+        {{ '-' }}
+      </b>
+      <el-date-picker
+        v-model="billingDateFieldTo"
+        type="datetime"
+        placeholder="Select date and time"
+        @change="currentValue"
+      />
+    </div>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'BillingDateField',
+  setup() {
+    const billingDateFieldFrom = ref(null)
+    const billingDateFieldTo = ref(null)
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        invoice_date_from: billingDateFieldFrom.value,
+        invoice_date_to: billingDateFieldTo.value
+      })
+    }
+
+    return {
+      billingDateFieldFrom,
+      billingDateFieldTo,
+      //
+      currentValue
+    }
+  }
+})
+</script>
+  <style scoped>
+  .date-picker-container {
+    display: flex
+  }
+  </style>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/businessPartnerField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/businessPartnerField.vue
new file mode 100644
index 00000000000..7a159c64d87
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/businessPartnerField.vue
@@ -0,0 +1,100 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item :label="$t('field.invoice.businessParnet')">
+    <el-select
+      v-model="businessPartnerField"
+      clearable
+      filterable
+      size="mini"
+      :filter-method="filterSearchBusinnes"
+      style="margin: 0px; width: 100%"
+      @visible-change="showList"
+      @change="currentValue()"
+    >
+      <el-option
+        v-for="item in optionsListBussines"
+        :key="item.id"
+        :label="item.displayColumn"
+        :value="item.id"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+
+import {
+  defineComponent, ref
+} from '@vue/composition-api'
+
+// import store from '@/store'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+//
+import { requestListBusinessPartners } from '@/api/ADempiere/field/search/invoice.ts'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'BusinessPartnerField',
+
+  setup() {
+    const optionsListBussines = ref([])
+    const businessPartnerField = ref('')
+
+    function showList(isShow) {
+      if (isShow && isEmptyValue(optionsListBussines.value)) { filterSearchBusinnes({}) }
+    }
+
+    function filterSearchBusinnes(
+      searchQuery
+    ) {
+      requestListBusinessPartners({
+        search_value: searchQuery
+      })
+        .then(response => {
+          const { records } = response
+          optionsListBussines.value = records.map((list) => {
+            return {
+              ...list,
+              displayColumn: list.values.DisplayColumn
+            }
+          })
+        })
+    }
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        business_partner_id: businessPartnerField.value
+      })
+    }
+
+    return {
+      optionsListBussines,
+      businessPartnerField,
+      //
+      currentValue,
+      //
+      filterSearchBusinnes,
+      showList
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/descriptionField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/descriptionField.vue
new file mode 100644
index 00000000000..2088265c25d
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/descriptionField.vue
@@ -0,0 +1,54 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.description')"
+  >
+    <el-input
+      v-model="descriptionFieldValue"
+      clearable
+      @input="currentValue()"
+    />
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'DescriptionField',
+
+  setup() {
+    const descriptionFieldValue = ref('')
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        description: descriptionFieldValue.value
+      })
+    }
+
+    return {
+      descriptionFieldValue,
+      //
+      currentValue
+    }
+  }
+
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/documentField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/documentField.vue
new file mode 100644
index 00000000000..33c19c19ede
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/documentField.vue
@@ -0,0 +1,53 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.document')"
+  >
+    <el-input
+      v-model="documentField"
+      clearable
+      @input="currentValue()"
+    />
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'DocumentField',
+
+  setup() {
+    const documentField = ref('')
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        document_no: documentField.value
+      })
+    }
+
+    return {
+      documentField,
+      //
+      currentValue
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/grandTotalField.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/grandTotalField.vue
new file mode 100644
index 00000000000..75e16acb555
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/grandTotalField.vue
@@ -0,0 +1,66 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-form-item
+    :label="$t('field.invoice.grandTotal')"
+    style="align-items: center;"
+  >
+    <div style="display: flex;">
+      <el-input
+        v-model="grandTotalFieldFrom"
+        clearable
+        @input="currentValue()"
+      />
+      <b style="color: #c0c4cc;padding: 0px 5px;font-weight: bold;">
+        {{ '-' }}
+      </b>
+      <el-input
+        v-model="grandTotalFieldTo"
+        clearable
+        @input="currentValue"
+      />
+    </div>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'GrandTotalField',
+  setup() {
+    const grandTotalFieldFrom = ref(null)
+    const grandTotalFieldTo = ref(null)
+
+    const currentValue = () => {
+      store.dispatch('searchInvociesInfos', {
+        grand_total_from: grandTotalFieldFrom.value,
+        grand_total_to: grandTotalFieldTo.value
+      })
+    }
+
+    return {
+      grandTotalFieldFrom,
+      grandTotalFieldTo,
+      //
+      currentValue
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/index.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/index.vue
new file mode 100644
index 00000000000..59c83897a87
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria/index.vue
@@ -0,0 +1,120 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-form label-position="top" size="mini" class="form-base">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <document-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+      <el-col :span="8">
+        <business-partner-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+      <el-col :span="8">
+        <sale-transaction-field
+          :uuid-form="uuidForm"
+          :parent-uuid="metadata.parentUuid"
+          :container-uuid="metadata.containerUuid"
+        />
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <description-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+      <el-col :span="8">
+        <paid-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+      <el-col :span="8">
+        <invoice-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <billing-date-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+      <el-col :span="12">
+        <grand-total-field
+          :uuid-form="uuidForm"
+        />
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+// Components and Mixins
+import DocumentField from './documentField.vue'
+import BusinessPartnerField from './businessPartnerField.vue'
+import SaleTransactionField from './SaleTransactionField.vue'
+import PaidField from './PaidFieldInvoice.vue'
+import BillingDateField from './billingDateField.vue'
+import DescriptionField from './descriptionField.vue'
+import InvoiceField from './InvoiceField.vue'
+import GrandTotalField from './grandTotalField.vue'
+
+// Constants
+import {
+  INVOICE_LIST_FORM,
+  COLUMN_NAME
+} from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+
+export default defineComponent({
+  name: 'QueryCriteria',
+
+  components: {
+    DocumentField,
+    BusinessPartnerField,
+    SaleTransactionField,
+    PaidField,
+    BillingDateField,
+    DescriptionField,
+    InvoiceField,
+    GrandTotalField
+  },
+
+  props: {
+    uuidForm: {
+      required: true,
+      type: String
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: INVOICE_LIST_FORM,
+          columnName: COLUMN_NAME
+        }
+      }
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/index.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/index.vue
new file mode 100644
index 00000000000..e68a0c5d895
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/index.vue
@@ -0,0 +1,403 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-main
+    v-shortkey="shortsKey"
+    v-loading="isLoadingFields"
+    class="general-info-list-container"
+    style="padding-top: 0px"
+    @shortkey.native="keyAction"
+  >
+    <el-collapse
+      v-model="activeAccordion"
+      accordion
+      class="general-info-list-query-criteria"
+    >
+      <el-collapse-item name="query-criteria">
+        <template slot="title">
+          {{ title }}
+        </template>
+
+        <query-criteria
+          :uuid-form="uuidForm"
+          :container-manager="containerManager"
+          :metadata="metadata"
+        />
+      </el-collapse-item>
+    </el-collapse>
+
+    <table-records
+      :uuid-form="uuidForm"
+      :container-manager="containerManager"
+      :metadata="metadata"
+    />
+    <panel-footer
+      :uuid-form="uuidForm"
+      :container-manager="containerManager"
+      :metadata="metadata"
+    />
+  </el-main>
+</template>
+
+<script>
+import store from '@/store'
+
+// Constants
+import { INVOICE_LIST_FORM } from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+import { DISPLAY_COLUMN_PREFIX } from '@/utils/ADempiere/dictionaryUtils'
+import { OPERATOR_LIKE } from '@/utils/ADempiere/dataUtils'
+
+// Components and Mixins
+import MixinFieldSearch from '../../mixinFieldSearch'
+import QueryCriteria from '@/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/QueryCriteria'
+import TableRecords from '@/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/tableRecords.vue'
+import PanelFooter from '@/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/panelFooter.vue'
+// Utils and Helper Methods
+import { isEmptyValue, isSameValues } from '@/utils/ADempiere/valueUtils'
+import { containerManager as containerManagerForm } from '@/utils/ADempiere/dictionary/form'
+
+/**
+ * TODO: Disable select inactive records.
+ */
+export default {
+  name: 'PanelGeneralInfoSearch',
+
+  components: {
+    QueryCriteria,
+    TableRecords,
+    PanelFooter
+  },
+
+  mixins: [MixinFieldSearch],
+
+  props: {
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: INVOICE_LIST_FORM,
+          columnName: undefined,
+          elementName: undefined
+        }
+      }
+    },
+    showPopover: {
+      type: Boolean,
+      default: () => false
+    },
+    containerManager: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      activeAccordion: 'query-criteria',
+      timeOutRecords: null,
+      isLoadingRecords: false,
+      timeOutFields: null,
+      isLoadingFields: false,
+      unsubscribe: () => {}
+    }
+  },
+
+  computed: {
+    title() {
+      let title = this.metadata.name
+      if (
+        !isEmptyValue(this.metadata.panelName) &&
+        !isSameValues(this.metadata.panelName, this.metadata.name)
+      ) {
+        title += ` (${this.metadata.panelName})`
+      }
+      return title
+    },
+    uuidForm() {
+      if (!isEmptyValue(this.metadata.containerUuid)) {
+        return this.metadata.columnName + '_' + this.metadata.containerUuid
+      }
+      return INVOICE_LIST_FORM
+    },
+    tableName() {
+      return this.metadata.referenceTableName
+    },
+    shortsKey() {
+      return {
+        close: ['esc'],
+        refreshList: ['f5']
+      }
+    },
+    selection() {
+      if (isEmptyValue(this.currentRow)) {
+        return 0
+      }
+      return 1
+    },
+    containerManagerList() {
+      return {
+        ...this.containerManager,
+        ...containerManagerForm,
+        actionPerformed: () => {},
+        getFieldsLit: () => {},
+        isDisplayedField: () => {
+          return true
+        },
+        isDisplayedDefault: () => {
+          return true
+        },
+        isReadOnlyColumn: ({ field, row }) => {
+          return true
+        },
+        setDefaultValues: () => {},
+        setPageNumber: this.setPageNumber
+      }
+    },
+    storedFieldsListQuery() {
+      return store.getters
+        .getSearchQueryFields({
+          tableName: this.tableName
+        })
+        .map((fieldItem) => {
+          return {
+            ...fieldItem,
+            containerUuid: this.uuidForm
+          }
+        })
+    },
+    storedColumnsListTable() {
+      return store.getters
+        .getSearchTableFields({
+          tableName: this.tableName
+        })
+        .filter((fieldItem) => {
+          return fieldItem.sequence > 0
+        })
+    },
+    isloadingTable() {
+      return (
+        this.isLoadingRecords && !isEmptyValue(this.storedColumnsListTable)
+      )
+    },
+    generalInfoData() {
+      return store.getters.getGeneralInfoData({
+        containerUuid: this.uuidForm
+      })
+    },
+    pageNumber() {
+      return this.generalInfoData.pageNumber
+    },
+    pageSize() {
+      return this.generalInfoData.pageSize
+    },
+    isReadyFromGetData() {
+      const { isLoaded } = this.generalInfoData
+      return !isLoaded && this.showPopover
+    },
+    currentRow: {
+      set(rowSelected) {
+        store.commit('setGeneralInfoSelectedRow', {
+          containerUuid: this.uuidForm,
+          currentRow: rowSelected
+        })
+      },
+      get() {
+        return store.getters.getGeneralInfoCurrentRow({
+          containerUuid: this.uuidForm
+        })
+      }
+    }
+  },
+
+  watch: {
+    isReadyFromGetData(isToLoad) {
+      if (isToLoad) {
+        this.getListSearchRecords()
+      }
+    }
+  },
+
+  created() {
+    this.unsubscribe = this.subscribeChanges()
+
+    this.loadSearchFields()
+
+    if (this.isReadyFromGetData) {
+      this.getListSearchRecords()
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.generalInfoTable) {
+        this.$refs.generalInfoTable.setCurrentRow(this.currentRow)
+      }
+    })
+  },
+
+  beforeDestroy() {
+    this.unsubscribe()
+  },
+
+  methods: {
+    handleCurrentChange(row) {
+      this.currentRow = row
+    },
+    keyAction(event) {
+      switch (event.srcKey) {
+        case 'refreshList':
+          /**
+           * TODO: When refreshing you are making 2 list requests, you can be the
+           * observer that activates the second request
+           */
+          this.getListSearchRecords()
+          break
+
+        case 'close':
+          this.closeList()
+          break
+      }
+    },
+    changeRecord() {
+      if (!isEmptyValue(this.currentRow)) {
+        this.setValues(this.currentRow)
+        this.closeList()
+      }
+    },
+    closeList() {
+      store.commit('setGeneralInfoShow', {
+        containerUuid: this.uuidForm,
+        show: false
+      })
+    },
+    setPageNumber(pageNumber) {
+      this.getListSearchRecords(pageNumber, this.pageSize)
+    },
+    subscribeChanges() {
+      return store.subscribe((mutation, state) => {
+        if (mutation.type === 'updateValueOfField') {
+          if (mutation.payload.containerUuid === this.uuidForm) {
+            if (!isEmptyValue(mutation.payload.columnName)) {
+              this.getListSearchRecords()
+            }
+          }
+        }
+      })
+    },
+    loadSearchFields() {
+      const fieldsListTable = this.storedColumnsListTable
+      if (isEmptyValue(fieldsListTable)) {
+        store
+          .dispatch('getSearchFieldsFromServer', {
+            tableName: this.tableName
+          })
+          .finally(() => {
+            this.isLoadingFields = false
+          })
+      }
+    },
+    getListSearchRecords(pageNumber = 0, pageSize) {
+      const values = store.getters
+        .getValuesView({
+          containerUuid: this.uuidForm,
+          format: 'array'
+        })
+        .filter((attribute) => {
+          if (attribute.columnName.startsWith(DISPLAY_COLUMN_PREFIX)) {
+            return false
+          }
+          return !isEmptyValue(attribute.value)
+        })
+        .map((attribute) => {
+          if (
+            !isEmptyValue(attribute) &&
+            !isEmptyValue(attribute.value) &&
+            (String(attribute.value).startsWith('%') ||
+              String(attribute.value).endsWith('%'))
+          ) {
+            return {
+              ...attribute,
+              operator: OPERATOR_LIKE.operator
+            }
+          }
+          return attribute
+        })
+
+      this.isLoadingRecords = true
+
+      clearTimeout(this.timeOutRecords)
+      this.timeOutRecords = setTimeout(() => {
+        // search on server
+        this.containerManager
+          .getSearchRecordsList({
+            containerUuid: this.uuidForm,
+            parentUuid: this.metadata.parentUuid,
+            tableName: this.metadata.referenceTableName,
+            columnName: this.metadata.columnName,
+            id: this.metadata.id,
+            contextColumnNames: this.metadata.reference.context_column_names,
+            filters: values,
+            pageNumber,
+            pageSize
+          })
+          .then((response) => {
+            if (isEmptyValue(response)) {
+              this.$message({
+                type: 'warning',
+                showClose: true,
+                message: this.metadata.name + this.$t('infoSearch.notFound')
+              })
+            }
+
+            this.$nextTick(() => {
+              if (this.$refs.generalInfoTable) {
+                this.$refs.generalInfoTable.setCurrentRow(this.currentRow)
+              }
+            })
+          })
+          .finally(() => {
+            this.isLoadingRecords = false
+          })
+      }, 500)
+    },
+    handleChangeSizePage(pageSize) {
+      this.getListSearchRecords(1, pageSize)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.general-info-list-container {
+  .general-info-list-query-criteria {
+    // space between quey criteria and table
+    .el-collapse-item__content {
+      padding-bottom: 0px !important;
+    }
+  }
+  .general-info-table {
+    .el-table__cell {
+      padding: 0px !important;
+      &.is-leaf {
+        padding: 6px !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/useInvoice.js b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/useInvoice.js
new file mode 100644
index 00000000000..90c1a598789
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/PanelForm/useInvoice.js
@@ -0,0 +1,288 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { computed, nextTick, ref } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Constants
+import {
+  DISPLAY_COLUMN_PREFIX,
+  UNIVERSALLY_UNIQUE_IDENTIFIER_COLUMN_SUFFIX
+} from '@/utils/ADempiere/dictionaryUtils'
+import {
+  INVOICE_LIST_FORM,
+  COLUMN_NAME
+} from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+import { ROWS_OF_RECORDS_BY_PAGE } from '@/utils/ADempiere/tableUtils'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import { generateDisplayedValue } from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+import { isSalesTransaction } from '@/utils/ADempiere/contextUtils'
+
+/**
+ * Use Business Partner as mixin
+ * @param {*} recordRow
+ * @returns
+ */
+export default ({
+  uuidForm = INVOICE_LIST_FORM,
+  parentUuid,
+  containerUuid,
+  containerManager,
+  fieldAttributes
+}) => {
+  const timeOutRecords = ref(null)
+
+  const blankValues = computed(() => {
+    const { column_name, elementColumnName } = this.metadata
+    return {
+      [column_name]: undefined,
+      [elementColumnName]: undefined,
+      [COLUMN_NAME]: undefined,
+      id: undefined,
+      uuid: undefined,
+      business_partner: undefined,
+      date_invoiced: undefined,
+      document_no: undefined,
+      currency: undefined,
+      grand_total: undefined,
+      converted_amount: undefined,
+      open_amount: undefined,
+      payment_term: undefined,
+      is_paid: undefined,
+      is_sales_transaction: undefined,
+      description: undefined,
+      po_reference: undefined,
+      document_status: undefined
+    }
+  })
+
+  const businessPartnerData = computed(() => {
+    return store.getters.getBusinessPartnerData({
+      containerUuid: uuidForm
+    })
+  })
+
+  const isLoadedRecords = computed(() => {
+    const { isLoaded } = businessPartnerData.value
+    return isLoaded
+  })
+
+  const isLoadingRecords = computed(() => {
+    const { isLoading } = businessPartnerData.value
+    return isLoading
+  })
+
+  const currentRow = computed({
+    set(rowSelected) {
+      store.commit('setBusinessPartnerSelectedRow', {
+        containerUuid: uuidForm,
+        currentRow: rowSelected
+      })
+    },
+    get() {
+      return store.getters.getBusinessPartnerCurrentRow({
+        containerUuid: uuidForm
+      })
+    }
+  })
+
+  const showQueryFields = computed({
+    set(newValue) {
+      store.commit('setBusinessPartnerShowQueryFields', {
+        containerUuid: uuidForm,
+        showQueryFields: newValue
+      })
+    },
+    get() {
+      return store.getters.getBusinessPartnerShowQueryFields({
+        containerUuid: uuidForm
+      })
+    }
+  })
+
+  const isSalesTransactionContext = computed(() => {
+    return isSalesTransaction({
+      parentUuid: fieldAttributes.parentUuid,
+      containerUuid: fieldAttributes.containerUuid
+    })
+  })
+
+  function clearValues() {
+    setValues(
+      blankValues.value
+    )
+  }
+
+  function closeList() {
+    store.commit('setInoviceShow', {
+      containerUuid: uuidForm,
+      show: false
+    })
+  }
+  function setValues(recordRow) {
+    const { columnName, elementName, isSameColumnElement } = fieldAttributes
+    const { uuid, id } = recordRow
+
+    const displayValue = generateDisplayedValue(recordRow)
+    // console.log(displayValue)
+    store.commit('updateValueOfField', {
+      parentUuid,
+      containerUuid,
+      columnName,
+      value: id
+    })
+    // set display column (name) value
+    store.commit('updateValueOfField', {
+      parentUuid,
+      containerUuid,
+      // DisplayColumn_'ColumnName'
+      columnName: DISPLAY_COLUMN_PREFIX + columnName,
+      value: displayValue
+    })
+    // set UUID value
+    store.commit('updateValueOfField', {
+      parentUuid,
+      containerUuid,
+      columnName: columnName + UNIVERSALLY_UNIQUE_IDENTIFIER_COLUMN_SUFFIX,
+      value: uuid
+    })
+    // update element column name (smart browse)
+    if (!isSameColumnElement) {
+      store.commit('updateValueOfField', {
+        parentUuid,
+        containerUuid,
+        columnName: elementName,
+        value: id
+      })
+      // set display column (name) value
+      store.commit('updateValueOfField', {
+        parentUuid,
+        containerUuid,
+        // DisplayColumn_'ColumnName'
+        columnName: DISPLAY_COLUMN_PREFIX + elementName,
+        value: displayValue
+      })
+    }
+
+    // implement container manager row
+    if (fieldAttributes.inTable && containerManager && containerManager.setCell) {
+      containerManager.setCell({
+        containerUuid,
+        rowIndex: fieldAttributes.rowIndex,
+        columnName,
+        value: id
+      })
+      containerManager.setCell({
+        containerUuid,
+        rowIndex: fieldAttributes.rowIndex,
+        columnName: DISPLAY_COLUMN_PREFIX + columnName,
+        value: displayValue
+      })
+    }
+
+    store.dispatch('notifyFieldChange', {
+      containerUuid,
+      containerManager,
+      field: fieldAttributes,
+      columnName,
+      newValue: id
+    })
+  }
+
+  function loadRecordsList({ pageNumber = 0, pageSize = ROWS_OF_RECORDS_BY_PAGE }) {
+    let parentUuid = fieldAttributes.parentUuid
+    if (isEmptyValue(parentUuid)) {
+      parentUuid = fieldAttributes.containerUuid
+    }
+
+    // isLoadingRecords.value = true
+    clearTimeout(timeOutRecords.value)
+    timeOutRecords.value = setTimeout(() => {
+      // search on server
+      containerManager.getSearchRecordsList({
+        parentUuid,
+        containerUuid: uuidForm,
+        contextColumnNames: fieldAttributes.reference.context_column_names,
+        tableName: fieldAttributes.referenceTableName,
+        uuid: fieldAttributes.uuid,
+        id: fieldAttributes.id,
+        // filters,
+        pageNumber,
+        pageSize
+      })
+        .then(response => {
+          // store.commit('setFiltersList', {
+          //   containerUuid: uuidForm,
+          //   isSOTrx: this.isSOTrx
+          // })
+          if (isEmptyValue(response)) {
+            // this.$message({
+            //   type: 'warning',
+            //   showClose: true,
+            //   message: this.$t('businessPartner.notFound')
+            // })
+          }
+
+          nextTick(() => {
+            // if (this.$refs.businessPartnerTable) {
+            //   this.$refs.businessPartnerTable.setCurrentRow(this.currentRow)
+            // }
+          })
+        })
+    }, 500)
+  }
+
+  function keyAction(event) {
+    switch (event.srcKey) {
+      case 'toggleQuery':
+        showQueryFields.value = !showQueryFields.value
+        break
+      case 'refreshList':
+        /**
+         * TODO: When refreshing you are making 2 list requests, you can be the
+         * observer that activates the second request
+        */
+        loadRecordsList({})
+        break
+
+      case 'close':
+        closeList()
+        break
+    }
+  }
+
+  return {
+    blankValues,
+    businessPartnerData,
+    currentRow,
+    isLoadedRecords,
+    isLoadingRecords,
+    isSalesTransactionContext,
+    showQueryFields,
+    //
+    clearValues,
+    closeList,
+    generateDisplayedValue,
+    keyAction,
+    setValues,
+    loadRecordsList
+  }
+}
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/button.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/button.vue
new file mode 100644
index 00000000000..1834e44dbf0
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/button.vue
@@ -0,0 +1,141 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-popover
+    ref="generalSearchListPopover"
+    v-model="showedPopoverGeneralInfoPanel"
+    placement="top"
+    width="900"
+    trigger="click"
+  >
+    <panel-general-info-search
+      v-if="showedPopoverGeneralInfoPanel"
+      :show-popover="showedPopoverGeneralInfoPanel"
+      :metadata="parentMetadata"
+      :container-manager="containerManager"
+    />
+
+    <el-button slot="reference" class="button-search" :disabled="isDisabled">
+      <i v-if="icon.type === 'i'" :class="icon.class" />
+      <svg-icon v-else :icon-class="icon.class" />
+    </el-button>
+  </el-popover>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Components and Mixins
+import PanelGeneralInfoSearch from './PanelForm'
+
+// Constants
+import { GENERAL_INFO_SEARCH_LIST_FORM } from '@/utils/ADempiere/dictionary/field/search/index.ts'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default defineComponent({
+  name: 'GeneralInfoSearch',
+
+  components: {
+    PanelGeneralInfoSearch
+  },
+
+  props: {
+    parentMetadata: {
+      type: Object,
+      default: () => {
+        return {
+          parentUuid: undefined,
+          containerUuid: undefined
+        }
+      }
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: Object,
+      default: () => {
+        return {
+          type: 'svg',
+          class: 'search'
+        }
+      }
+    },
+    containerManager: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const generalSearchListPopover = ref(null)
+    const uuidForm = computed(() => {
+      if (!isEmptyValue(props.parentMetadata.containerUuid)) {
+        return (
+          props.parentMetadata.columnName +
+          '_' +
+          props.parentMetadata.containerUuid
+        )
+      }
+      return GENERAL_INFO_SEARCH_LIST_FORM
+    })
+
+    const showedPopoverGeneralInfoPanel = computed({
+      get() {
+        return store.getters.getGeneralInfoShow({
+          containerUuid: uuidForm.value
+        })
+      },
+      set(value) {
+        store.commit('setGeneralInfoShow', {
+          containerUuid: uuidForm.value,
+          show: value
+        })
+      }
+    })
+    return {
+      generalSearchListPopover,
+      // computeds
+      uuidForm,
+      showedPopoverGeneralInfoPanel
+    }
+  }
+})
+</script>
+<style lang="scss">
+.button-search {
+  padding-left: 9px !important;
+  padding-right: 0px !important;
+
+  i,
+  svg {
+    font-size: 20px !important;
+
+    // M_InOut icon
+    &.el-icon-truck {
+      font-size: 26px !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/index.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/index.vue
new file mode 100644
index 00000000000..b079462b877
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/index.vue
@@ -0,0 +1,207 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-autocomplete
+    ref="autocompleteGeneralInfo"
+    v-model="displayedValue"
+    v-bind="commonsProperties"
+    value-key="name"
+    clearable
+    style="width: 100%;max-height: 60px;"
+    popper-class="custom-field-search-info"
+    :trigger-on-focus="false"
+    :fetch-suggestions="localSearch"
+    :select-when-unmatched="true"
+    :highlight-first-item="true"
+    @select="handleSelect"
+    @clear="clearValues"
+    @focus="setNewDisplayedValue"
+    @blur="setOldDisplayedValue"
+  >
+    <!--
+    @keyup.enter.native="getRecord"
+      -->
+    <template slot-scope="recordRow">
+      <div class="header">
+        <b> {{ generateDisplayedValue(recordRow.item) }} </b>
+      </div>
+      <span class="info">
+        {{ generatedDescription(recordRow.item) }}
+      </span>
+    </template>
+
+    <template slot="append">
+      <button-general-info-search
+        :parent-metadata="metadata"
+        :is-disabled="isDisabled"
+        :container-manager="containerManager"
+        :icon="icon"
+      />
+    </template>
+  </el-autocomplete>
+</template>
+
+<script>
+import store from '@/store'
+
+// Components and Mixins
+import fieldMixin from '@/components/ADempiere/FieldDefinition/mixin/mixinField.js'
+import fieldSearchMixin from '@/components/ADempiere/FieldDefinition/FieldSearch/mixinFieldSearch.js'
+import ButtonGeneralInfoSearch from './button.vue'
+
+// Constants
+import { RECORD_ROWS_BY_LIST } from '@/utils/ADempiere/dictionary/field/lookups'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default {
+  name: 'GeneralInfoSearch',
+
+  components: {
+    ButtonGeneralInfoSearch
+  },
+
+  mixins: [
+    fieldMixin,
+    fieldSearchMixin
+  ],
+
+  props: {
+    parentMetadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: ''
+        }
+      }
+    },
+    icon: {
+      type: Object,
+      default: () => {
+        return {
+          type: 'svg',
+          class: 'search'
+        }
+      }
+    },
+    containerManager: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    cssClassCustomField() {
+      return ' custom-field-search-info '
+    },
+    uuidForm() {
+      return this.metadata.containerUuid
+    },
+    // to records list overwrite
+    recordsList() {
+      return store.getters.getGeneralInfoRecordsList({
+        containerUuid: this.uuidForm
+      })
+    }
+  },
+
+  beforeMount() {
+    if (this.metadata.displayed) {
+      this.setDisplayedValue()
+    }
+  },
+
+  methods: {
+    remoteSearch(searchValue) {
+      return new Promise(resolve => {
+        this.isLoading = true
+        this.containerManager.getSearchRecordsList({
+          containerUuid: this.metadata.containerUuid,
+          parentUuid: this.metadata.containerUuid,
+          contextColumnNames: this.metadata.reference.context_column_names,
+          tableName: this.metadata.referenceTableName,
+          columnName: this.metadata.column_name,
+          uuid: this.metadata.uuid,
+          id: this.metadata.id,
+          searchValue,
+          pageNumber: 1,
+          pageSize: RECORD_ROWS_BY_LIST
+        })
+          .then(responseRecords => {
+            if (isEmptyValue(responseRecords)) {
+              this.whitOutResultsMessage()
+            }
+
+            resolve(responseRecords)
+          })
+          .catch(error => {
+            console.warn(error.message)
+
+            this.whitOutResultsMessage()
+            resolve([])
+          })
+          .finally(() => {
+            this.isLoading = false
+            if (this.recordsList.length === 1) {
+              const recordSelected = this.recordsList.at()
+              this.handleSelect(recordSelected)
+            }
+          })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.custom-field-search-info {
+  // button icon suffix
+  .button-search {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+
+    >i {
+      font-size: 20px;
+    }
+  }
+}
+</style>
+<style lang="scss" scope>
+.custom-field-search-info {
+  // items of lust
+  li {
+    line-height: normal;
+    // padding: 15px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+
+    .header {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .info {
+      color: #7e7e7e;
+      float: left;
+      font-size: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/mixinInvoice.js b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/mixinInvoice.js
new file mode 100644
index 00000000000..cd9a276f811
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/mixinInvoice.js
@@ -0,0 +1,85 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import store from '@/store'
+
+// Constants
+import {
+  COLUMN_NAME
+} from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+
+// Utils and Helper Methods
+import { generateDisplayedValue } from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+
+export default {
+  name: 'MixinInvoice',
+
+  props: {
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          parentUuid: undefined,
+          containerUuid: undefined,
+          column_name: COLUMN_NAME,
+          elementColumnName: COLUMN_NAME
+        }
+      }
+    }
+  },
+
+  computed: {
+    blankValues() {
+      const { column_name, elementColumnName } = this.metadata
+      return {
+        [column_name]: undefined,
+        [elementColumnName]: undefined,
+        [COLUMN_NAME]: undefined,
+        id: undefined,
+        uuid: undefined,
+        business_partner: undefined,
+        date_invoiced: undefined,
+        document_no: undefined,
+        currency: undefined,
+        grand_total: undefined,
+        converted_amount: undefined,
+        open_amount: undefined,
+        payment_term: undefined,
+        is_paid: undefined,
+        is_sales_transaction: undefined,
+        description: undefined,
+        po_reference: undefined,
+        document_status: undefined
+      }
+    },
+    recordsList() {
+      return store.getters.getBusinessPartnerRecordsList({
+        containerUuid: this.uuidForm
+      })
+    }
+  },
+
+  methods: {
+    /**
+     * @overwrite
+     * Get custom displayed value
+     * @returns {string}
+     */
+    generateDisplayedValue
+  }
+}
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/panelFooter.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/panelFooter.vue
new file mode 100644
index 00000000000..aa8a072cf2d
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/panelFooter.vue
@@ -0,0 +1,229 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-row :gutter="24">
+    <el-col :span="14">
+      <custom-pagination
+        :container-manager="containerManager"
+        :total-records="recordCount"
+        :is-showed-selected="false"
+        :selection="selectedRecords"
+        :page-number="pageNumber"
+        :page-size="pageSize"
+        :handle-change-page-number="setPageNumber"
+        :handle-change-page-size="setPageSize"
+      />
+    </el-col>
+    <el-col :span="10">
+      <samp style="float: right; padding-top: 10px">
+        <el-button
+          type="info"
+          class="button-base-icon"
+          plain
+        >
+          <svg-icon icon-class="layers-clear" />
+        </el-button>
+        <el-button
+          :loading="isLoadingRecords"
+          type="success"
+          class="button-base-icon"
+          icon="el-icon-refresh-right"
+          @click="searchRecordsList({})"
+        />
+        <el-button
+          type="danger"
+          class="button-base-icon"
+          icon="el-icon-close"
+          @click="closeList(); clearValues();"
+        />
+        <el-button
+          type="primary"
+          class="button-base-icon"
+          icon="el-icon-check"
+          @click="changeRecord()"
+        />
+      </samp>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { computed, defineComponent, ref } from '@vue/composition-api'
+import store from '@/store'
+
+// Components and Mixins
+import CustomPagination from '@/components/ADempiere/DataTable/Components/CustomPagination.vue'
+import IndexColumn from '@/components/ADempiere/DataTable/Components/IndexColumn.vue'
+import useInvoice from './PanelForm/useInvoice.js'
+import fieldSearchMixin from '../mixinFieldSearch'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import { INVOICE_LIST_FORM, COLUMN_NAME } from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+
+export default defineComponent({
+  name: 'PanelFooter',
+
+  components: {
+    CustomPagination,
+    IndexColumn
+  },
+
+  mixins: [
+    fieldSearchMixin
+  ],
+
+  computed: {
+    uuidForm() {
+      if (!isEmptyValue(this.metadata.containerUuid)) {
+        return this.metadata.columnName + '_' + this.metadata.containerUuid
+      }
+      return INVOICE_LIST_FORM
+    }
+  },
+
+  props: {
+    containerManager: {
+      type: Object,
+      default: () => ({
+        actionPerformed: () => {},
+        getFieldsLit: () => {},
+        setDefaultValues: () => {}
+      })
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: INVOICE_LIST_FORM,
+          columnName: COLUMN_NAME
+        }
+      }
+    },
+    showPopover: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      activeAccordion: 'query-criteria',
+      timeOutRecords: null,
+      isLoadingRecords: false,
+      timeOutFields: null,
+      isLoadingFields: false,
+      unsubscribe: () => {}
+    }
+  },
+
+  methods: {
+    closeList() {
+      store.commit('setGeneralInfoShow', {
+        containerUuid: this.uuidForm,
+        show: false
+      })
+    }
+  },
+
+  setup(props) {
+    const invoicesData = ref(0)
+    const currentRow = ref(0)
+    const isLoadingRecords = ref(false)
+    const timeOutRecords = ref(null)
+
+    const {
+      closeList,
+      setValues
+    } = useInvoice({
+      uuidForm: props.uuidForm,
+      parentUuid: props.metadata.parentUuid,
+      containerUuid: props.metadata.containerUuid,
+      containerManager: props.containerManager,
+      fieldAttributes: props.metadata
+    })
+
+    function searchRecordsList() {
+      store.dispatch('searchInvociesInfos', {
+        page_size: 0
+      })
+        .then(() => {
+          clearTimeout(timeOutRecords.value)
+          isLoadingRecords.value = true
+          timeOutRecords.value = setTimeout(() => {
+            isLoadingRecords.value = false
+          }, 1000)
+        })
+    }
+
+    const selectedRecords = computed(() => {
+      if (!isEmptyValue(currentRow.value)) {
+        return 1
+      }
+      return 0
+    })
+
+    const recordCount = computed(() => {
+      return store.getters.getCountInvocies
+    })
+
+    const pageNumber = computed(() => {
+      return invoicesData.value.pageNumber
+    })
+
+    const pageSize = computed(() => {
+      return invoicesData.value.pageSize
+    })
+    function setPageNumber(page_token) {
+      store.dispatch('searchInvociesInfos', {
+        page_token
+      })
+    }
+    function setPageSize(page_size) {
+      store.dispatch('searchInvociesInfos', {
+        page_size
+      })
+    }
+
+    function changeRecord(row) {
+      if (!isEmptyValue(row)) {
+        setValues(row)
+        store.commit('setGeneralInfoShow', {
+          containerUuid: props.uuidForm,
+          show: false
+        })
+      }
+    }
+
+    return {
+      isLoadingRecords,
+      //
+      searchRecordsList,
+      setPageNumber,
+      setPageSize,
+      closeList,
+      //
+      recordCount,
+      pageNumber,
+      pageSize,
+      selectedRecords,
+      changeRecord
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/tableRecords.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/tableRecords.vue
new file mode 100644
index 00000000000..60d036e35d0
--- /dev/null
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo/tableRecords.vue
@@ -0,0 +1,280 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div>
+    <el-table
+      v-loading="isLoadingRecords"
+      highlight-current-row
+      :border="true"
+      fit
+      :data="SearchList"
+      height="300"
+      style="width: 100%"
+      size="mini"
+      @row-dblclick="changeRecord"
+    >
+      <index-column />
+      <el-table-column
+        v-for="(header, key) in headerList"
+        :key="key"
+        :align="header.align"
+        :width="header.width"
+        :label="header.label"
+        :prop="header.columnName"
+        header-align="center"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import lang from '@/lang'
+
+import { computed, defineComponent, ref } from '@vue/composition-api'
+
+// Constants
+import { INVOICE_LIST_FORM, COLUMN_NAME } from '@/utils/ADempiere/dictionary/field/search/invoice.ts'
+
+// Components and Mixins
+import IndexColumn from '@/components/ADempiere/DataTable/Components/IndexColumn.vue'
+import invoicesMixin from './mixinInvoice.js'
+import fieldSearchMixin from '../mixinFieldSearch.js'
+
+// Utils and Helper Methods
+import { formatQuantity } from '@/utils/ADempiere/formatValue/numberFormat'
+import { formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
+import { convertBooleanToTranslationLang } from '@/utils/ADempiere/formatValue/booleanFormat.js'
+import { isEmptyValue } from '@/utils/ADempiere'
+import useInvoice from './PanelForm/useInvoice'
+
+export default defineComponent({
+  name: 'TableRecords',
+
+  components: {
+    IndexColumn
+  },
+
+  mixins: [
+    invoicesMixin,
+    fieldSearchMixin
+  ],
+  props: {
+    // uuidForm: {
+    //   required: true
+    // },
+    containerManager: {
+      type: Object,
+      default: () => ({
+        actionPerformed: () => {},
+        getFieldsLit: () => {},
+        setDefaultValues: () => {}
+      })
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: INVOICE_LIST_FORM,
+          columnName: COLUMN_NAME
+        }
+      }
+    }
+  },
+
+  methods: {
+    closeList() {
+      store.commit('setGeneralInfoShow', {
+        containerUuid: this.uuidForm,
+        show: false
+      })
+    }
+  },
+  computed: {
+    uuidForm() {
+      if (!isEmptyValue(this.metadata.containerUuid)) {
+        return this.metadata.columnName + '_' + this.metadata.containerUuid
+      }
+      return INVOICE_LIST_FORM
+    }
+  },
+  setup(props) {
+    const listSummary = []
+    const isLoadingRecords = ref(false)
+    const timeOutRecords = ref(null)
+    const {
+      setValues
+    } = useInvoice({
+      uuidForm: props.uuidForm,
+      parentUuid: props.metadata.parentUuid,
+      containerUuid: props.metadata.containerUuid,
+      containerManager: props.containerManager,
+      fieldAttributes: props.metadata
+    })
+    const headerList = ref([
+      {
+        label: lang.t('field.invoice.businessParnet'),
+        columnName: 'business_partner',
+        width: '150',
+        align: 'center'
+      },
+      {
+        label: lang.t('field.invoice.invoiceDate'),
+        columnName: 'date_invoiced',
+        width: '145',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.documentNo'),
+        columnName: 'document_no',
+        width: '120',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.currency'),
+        columnName: 'currency',
+        width: '70',
+        align: 'center'
+      },
+      {
+        label: lang.t('field.invoice.grandTotal'),
+        columnName: 'grand_total',
+        width: '90',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.converted'),
+        columnName: 'converted_amount',
+        width: '90',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.open'),
+        columnName: 'open_amount',
+        width: '90',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.payment'),
+        columnName: 'payment_term',
+        width: '120',
+        align: 'center'
+      },
+      {
+        label: lang.t('field.invoice.paid'),
+        columnName: 'is_paid',
+        width: '70',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.saleTransaction'),
+        columnName: 'is_sales_transaction',
+        width: '155',
+        align: 'right'
+      },
+      {
+        label: lang.t('field.invoice.description'),
+        columnName: 'description',
+        width: '100',
+        align: 'center'
+      },
+      {
+        label: lang.t('field.invoice.reference'),
+        columnName: 'po_reference',
+        width: '265',
+        align: 'center'
+      }
+    ])
+
+    const SearchList = computed(() => {
+      const invoiceList = store.getters.getInvoicesSearchFieldRecordsList
+      setTime()
+      if (isEmptyValue(invoiceList)) return []
+      return invoiceList.map((list) => {
+        return {
+          ...list,
+          business_partner: list.business_partner,
+          date_invoiced: formatDate({ value: list.date_invoiced }),
+          document_no: list.document_no,
+          currency: list.currency,
+          grand_total: formatQuantity({ value: list.grand_total }),
+          converted_amount: formatQuantity({ value: list.converted_amount }),
+          open_amount: formatQuantity({ value: list.open_amount }),
+          payment_term: list.payment_term,
+          is_paid: convertBooleanToTranslationLang(list.is_paid),
+          is_sales_transaction: convertBooleanToTranslationLang(list.is_sales_transaction),
+          description: list.description,
+          po_reference: list.po_reference
+        }
+      })
+    })
+
+    function setTime() {
+      clearTimeout(timeOutRecords.value)
+      isLoadingRecords.value = true
+      timeOutRecords.value = setTimeout(() => {
+        isLoadingRecords.value = false
+      }, 1000)
+    }
+
+    function searchRecordsList() {
+      store.dispatch('searchInvociesInfos', {})
+    }
+
+    const currentRow = computed({
+      get() {
+        return store.getters.getAccountCombinationsCurrentRow({
+          containerUuid: props.uuidForm
+        })
+      },
+      // setter
+      set(rowSelected) {
+        store.commit('setAccountCombinationsSelectedRow', {
+          containerUuid: props.uuidForm,
+          currentRow: rowSelected
+        })
+      }
+    })
+
+    function changeRecord(row) {
+      if (!isEmptyValue(row)) {
+        setValues(row)
+        store.commit('setGeneralInfoShow', {
+          containerUuid: this.uuidForm,
+          show: false
+        })
+      }
+    }
+
+    searchRecordsList()
+    return {
+      //
+      isLoadingRecords,
+      currentRow,
+      //
+      SearchList,
+      headerList,
+      listSummary,
+      //
+      searchRecordsList,
+      changeRecord
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FieldDefinition/FieldSearch/index.vue b/src/components/ADempiere/FieldDefinition/FieldSearch/index.vue
index b81547c4d26..a9e570c73a5 100644
--- a/src/components/ADempiere/FieldDefinition/FieldSearch/index.vue
+++ b/src/components/ADempiere/FieldDefinition/FieldSearch/index.vue
@@ -92,6 +92,9 @@ export default {
           break
         // case 'A_Asset':
         // case 'C_Order':
+        case 'C_Invoice':
+          fieldRender = () => import('@/components/ADempiere/FieldDefinition/FieldSearch/InvoiceInfo')
+          break
         default:
           fieldRender = () => import('@/components/ADempiere/FieldDefinition/FieldSearch/GeneralInfoSearch')
           break
diff --git a/src/lang/ADempiere/en/field/index.js b/src/lang/ADempiere/en/field/index.js
index b404bb618e9..a43177d0699 100644
--- a/src/lang/ADempiere/en/field/index.js
+++ b/src/lang/ADempiere/en/field/index.js
@@ -21,6 +21,7 @@ import product from './product.ts'
 import productAttribute from './productAttribute'
 import warehouseLocator from './warehouseLocator'
 import locationsAddress from './locationsAddress'
+import invoice from './invoice'
 
 export default {
   businessPartner,
@@ -40,5 +41,6 @@ export default {
   product,
   productAttribute,
   warehouseLocator,
-  locationsAddress
+  locationsAddress,
+  invoice
 }
diff --git a/src/lang/ADempiere/en/field/invoice.js b/src/lang/ADempiere/en/field/invoice.js
new file mode 100644
index 00000000000..b5ee7c19ef9
--- /dev/null
+++ b/src/lang/ADempiere/en/field/invoice.js
@@ -0,0 +1,36 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Elsio Sanchez elsiosanchez15@outlook.com https://github.com/elsiosanchez
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+const invoice = {
+  document: 'Document',
+  businessParnet: 'Business Partner',
+  saleTransaction: 'Sale Transaction',
+  paid: 'Paid',
+  description: 'Description',
+  invoiceDate: 'Invoice Date',
+  saleOrder: 'Sale Order',
+  grandTotal: 'Grand Total',
+  documentNo: 'Document No.',
+  currency: 'Currency',
+  converted: 'Converted',
+  open: 'Open',
+  payment: 'Payment Term',
+  reference: 'Business Partner Order Reference'
+}
+
+export default invoice
diff --git a/src/lang/ADempiere/es/field/index.js b/src/lang/ADempiere/es/field/index.js
index 644628d539d..9a7136e96dc 100644
--- a/src/lang/ADempiere/es/field/index.js
+++ b/src/lang/ADempiere/es/field/index.js
@@ -21,6 +21,7 @@ import product from './product.ts'
 import productAttribute from './productAttribute'
 import warehouseLocator from './warehouseLocator'
 import locationsAddress from './locationsAddress'
+import invoice from './invoice'
 
 export default {
   businessPartner,
@@ -40,5 +41,6 @@ export default {
   product,
   productAttribute,
   warehouseLocator,
-  locationsAddress
+  locationsAddress,
+  invoice
 }
diff --git a/src/lang/ADempiere/es/field/invoice.js b/src/lang/ADempiere/es/field/invoice.js
new file mode 100644
index 00000000000..af0e500949b
--- /dev/null
+++ b/src/lang/ADempiere/es/field/invoice.js
@@ -0,0 +1,36 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Elsio Sanchez elsiosanchez15@outlook.com https://github.com/elsiosanchez
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+const invoice = {
+  document: 'Número de Documento',
+  businessParnet: 'Socio del Negocio',
+  saleTransaction: 'Transacción de Venta',
+  paid: 'Pagado',
+  description: 'Descripción',
+  invoiceDate: 'Fecha de Facturación',
+  saleOrder: 'Orden de Venta',
+  grandTotal: 'Gran Total',
+  documentNo: 'Documento No.',
+  currency: 'Moneda',
+  converted: 'Convertido',
+  open: 'Abierto',
+  payment: 'Término de Pago',
+  reference: 'Referencia de Orden de Socio del Negocio'
+}
+
+export default invoice
diff --git a/src/lang/ADempiere/es/field/product.ts b/src/lang/ADempiere/es/field/product.ts
index f3a59b23d42..fb451661363 100644
--- a/src/lang/ADempiere/es/field/product.ts
+++ b/src/lang/ADempiere/es/field/product.ts
@@ -87,14 +87,14 @@ const product = {
   availableToPromisesTables: {
     name: 'Nombre',
     value: 'Código',
-    locator: 'localizacion',
+    locator: 'localización',
     availableQuantity: 'Cantidad Disponible',
     onHandQuantity: 'Cantidad Pedida',
     expectedChangeQuantity: 'Cantidad de Cambio Prevista',
     businessPartner: 'Socio de Negocios',
     reservedQuantity: 'Cantidad Disponible',
     standardPrice: 'Precio Estandar',
-    documentNo: 'Numero de Documento',
+    documentNo: 'Número de Documento',
     attributeSetInstance: 'Attributo'
   },
   vendorPurchasesTables: {
diff --git a/src/store/modules/ADempiere/field/search/invoiceSearch.js b/src/store/modules/ADempiere/field/search/invoiceSearch.js
new file mode 100644
index 00000000000..32151043017
--- /dev/null
+++ b/src/store/modules/ADempiere/field/search/invoiceSearch.js
@@ -0,0 +1,99 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Elsio Sanchez elsiosanchez@gmail.com https://github.com/elsiosanchez
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+
+import { requestListInvoicesInfo } from '@/api/ADempiere/field/search/invoice.ts'
+
+const initState = {
+  InvociesInfo: {},
+  CountInvocies: 0,
+  BPShowInvoice: {}
+}
+
+export default {
+  state: initState,
+
+  mutations: {
+    setInvociesInfo(state, element) {
+      state.InvociesInfo = element
+    },
+    setCountInfo(state, count) {
+      state.CountInvocies = count
+    },
+    setInoviceShow(state, {
+      containerUuid,
+      show = false
+    }) {
+      Vue.set(state.BPShowInvoice, containerUuid, show)
+    }
+  },
+
+  actions: {
+    searchInvociesInfos({ commit }, {
+      page_size,
+      page_token,
+      document_no,
+      is_sales_transaction,
+      business_partner_id,
+      is_paid,
+      description,
+      invoice_date_from,
+      invoice_date_to,
+      order_id,
+      grand_total_from,
+      grand_total_to
+    }) {
+      return new Promise(resolve => {
+        requestListInvoicesInfo({
+          page_size,
+          page_token,
+          document_no,
+          is_sales_transaction,
+          business_partner_id,
+          is_paid,
+          description,
+          invoice_date_from,
+          invoice_date_to,
+          order_id,
+          grand_total_from,
+          grand_total_to
+        })
+          .then(response => {
+            const { records } = response
+            commit('setInvociesInfo', records)
+
+            commit('setCountInfo', records.length)
+            resolve(records)
+          })
+      })
+    }
+  },
+
+  getters: {
+    getInvoicesSearchFieldRecordsList: (state) => {
+      return state.InvociesInfo
+    },
+    getCountInvocies: (state) => {
+      return state.CountInvocies
+    },
+    getSetShow: (state) => ({ containerUuid }) => {
+      return state.BPShowInvoice[containerUuid] || false
+    }
+  }
+}
diff --git a/src/utils/ADempiere/dictionary/field/search/invoice.ts b/src/utils/ADempiere/dictionary/field/search/invoice.ts
new file mode 100644
index 00000000000..8cfb8369565
--- /dev/null
+++ b/src/utils/ADempiere/dictionary/field/search/invoice.ts
@@ -0,0 +1,61 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export const TABLE_NAME = 'C_Invoice'
+
+export const COLUMN_NAME = 'C_Invoice_ID'
+
+export const INVOICE_LIST_FORM = 'Accouting-Combination-List'
+
+/**
+ * Generate displayed value from values
+ * @param {Object} recordRow
+ * @returns {String}
+ */
+
+export function generateDisplayedValue(recordRow) {
+  const { document_no, date_invoiced, grand_total } = recordRow
+  let displayedValue = document_no
+  if (!isEmptyValue(date_invoiced)) {
+    if (!isEmptyValue(displayedValue)) {
+      displayedValue += ' - ' + date_invoiced
+    } if (!isEmptyValue(grand_total)) {
+      displayedValue += ' - ' + grand_total
+    } else {
+      displayedValue = date_invoiced
+    }
+    return displayedValue
+  }
+  // generate with standard columns
+  const { business_partner } = recordRow
+
+  if (!isEmptyValue(business_partner)) {
+    displayedValue = business_partner
+  }
+  if (!isEmptyValue(date_invoiced)) {
+    if (!isEmptyValue(displayedValue)) {
+      displayedValue += ' - ' + date_invoiced
+    } else {
+      displayedValue = date_invoiced
+    }
+  }
+  return displayedValue
+}