diff --git a/package.json b/package.json
index af3dae2d7f6..af6dd5e6aec 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,12 @@
     "test:ci": "yarn lint && yarn test:unit"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.9",
+    "@fullcalendar/daygrid": "^6.1.9",
+    "@fullcalendar/interaction": "^6.1.9",
+    "@fullcalendar/list": "^6.1.9",
+    "@fullcalendar/timegrid": "^6.1.9",
+    "@fullcalendar/vue": "^6.1.9",
     "@kangc/v-md-editor": "^1.7.11",
     "@toast-ui/editor-plugin-chart": "^3.0.1",
     "@toast-ui/vue-editor": "3.2.3",
diff --git a/src/api/ADempiere/form/accouting.js b/src/api/ADempiere/form/accouting.js
index 1f742b65d7e..c09bcccfe8a 100644
--- a/src/api/ADempiere/form/accouting.js
+++ b/src/api/ADempiere/form/accouting.js
@@ -1,6 +1,6 @@
 /**
  * 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
+ * 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
@@ -23,6 +23,66 @@ import { camelizeObjectKeys } from '@/utils/ADempiere/transformObject.js'
 // Constants
 import { ROWS_OF_RECORDS_BY_PAGE } from '@/utils/ADempiere/tableUtils'
 
+export function requestListAccoutingSchemas({
+  searchValue,
+  pageToken,
+  pageSize = 100
+}) {
+  return request({
+    url: '/general-ledger/accounting-schemas',
+    method: 'get',
+    params: {
+      page_size: pageSize,
+      page_token: pageToken,
+      //  DSL Query
+      search_value: searchValue
+    }
+  })
+    .then(response => {
+      return camelizeObjectKeys(response)
+    })
+}
+
+export function requestListOrganizations({
+  searchValue,
+  pageToken,
+  pageSize = 100
+}) {
+  return request({
+    url: '/general-ledger/organizations',
+    method: 'get',
+    params: {
+      page_size: pageSize,
+      page_token: pageToken,
+      //  DSL Query
+      search_value: searchValue
+    }
+  })
+    .then(response => {
+      return camelizeObjectKeys(response)
+    })
+}
+
+export function requestPostingTypesList({
+  searchValue,
+  pageToken,
+  pageSize = 100
+}) {
+  return request({
+    url: '/general-ledger/posting-types',
+    method: 'get',
+    params: {
+      page_size: pageSize,
+      page_token: pageToken,
+      //  DSL Query
+      search_value: searchValue
+    }
+  })
+    .then(response => {
+      return camelizeObjectKeys(response)
+    })
+}
+
 export function requestAccountingFacts({
   tableName,
   recordId,
@@ -94,63 +154,3 @@ export function requestStartRePost({
       return camelizeObjectKeys(response)
     })
 }
-
-export function listAccoutingSchemasRequest({
-  searchValue,
-  pageToken,
-  pageSize = 100
-}) {
-  return request({
-    url: '/general-ledger/accounting-schemas',
-    method: 'get',
-    params: {
-      page_size: pageSize,
-      page_token: pageToken,
-      //  DSL Query
-      search_value: searchValue
-    }
-  })
-    .then(response => {
-      return camelizeObjectKeys(response)
-    })
-}
-
-export function listPostingTypesRequest({
-  searchValue,
-  pageToken,
-  pageSize = 100
-}) {
-  return request({
-    url: '/general-ledger/posting-types',
-    method: 'get',
-    params: {
-      page_size: pageSize,
-      page_token: pageToken,
-      //  DSL Query
-      search_value: searchValue
-    }
-  })
-    .then(response => {
-      return camelizeObjectKeys(response)
-    })
-}
-
-export function listOrganizationsRequest({
-  searchValue,
-  pageToken,
-  pageSize = 100
-}) {
-  return request({
-    url: '/general-ledger/list-organizations',
-    method: 'get',
-    params: {
-      page_size: pageSize,
-      page_token: pageToken,
-      //  DSL Query
-      search_value: searchValue
-    }
-  })
-    .then(response => {
-      return camelizeObjectKeys(response)
-    })
-}
diff --git a/src/api/ADempiere/form/point-of-sales.js b/src/api/ADempiere/form/point-of-sales.js
index 3d6b1bad7ba..4bce1a86dc5 100644
--- a/src/api/ADempiere/form/point-of-sales.js
+++ b/src/api/ADempiere/form/point-of-sales.js
@@ -626,6 +626,7 @@ export function createPayment({
   chargeUuid,
   isRefund,
   currencyUuid,
+  invoiceReferenceId,
   collectingAgentUuid,
   customerBankAccountUuid,
   referenceBankAccountUuid
@@ -646,6 +647,7 @@ export function createPayment({
       tender_type_code: tenderTypeCode,
       payment_method_uuid: paymentMethodUuid,
       is_refund: isRefund,
+      invoice_reference_id: invoiceReferenceId,
       currency_uuid: currencyUuid,
       collecting_agent_uuid: collectingAgentUuid,
       reference_bank_account_uuid: referenceBankAccountUuid,
diff --git a/src/api/ADempiere/process.js b/src/api/ADempiere/process.js
index 2d89559934f..ed7ef1bceae 100644
--- a/src/api/ADempiere/process.js
+++ b/src/api/ADempiere/process.js
@@ -1,6 +1,6 @@
 /**
  * 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
+ * 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
@@ -41,12 +41,14 @@ import { ROWS_OF_RECORDS_BY_PAGE } from '@/utils/ADempiere/tableUtils'
 export function requestRunProcess({
   id,
   uuid,
+  parametersList = [],
+  // window
   tableName,
   recordId,
   recordUuid,
-  parametersList = [],
-  selectionsList = [],
-  tableSelectedId
+  // browse
+  browserId,
+  selectionsList = []
 }) {
   parametersList = parametersList.map(parameter => {
     return {
@@ -61,11 +63,13 @@ export function requestRunProcess({
     data: {
       id,
       uuid,
+      parameters: parametersList,
+      //
       table_name: tableName,
       record_id: recordId,
       record_uuid: recordUuid,
-      table_selected_id: tableSelectedId,
-      parameters: parametersList,
+      //
+      browser_id: browserId,
       selections: selectionsList
     }
   })
diff --git a/src/components/ADempiere/Form/AcctViewer/ActionsFooter/index.vue b/src/components/ADempiere/Form/AcctViewer/ActionsFooter/index.vue
new file mode 100644
index 00000000000..4f2e51f15a7
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/ActionsFooter/index.vue
@@ -0,0 +1,176 @@
+<!--
+  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 style="margin-top: 10px;">
+    <el-button
+      :loading="isLoadingDataTable"
+      type="success"
+      class="button-base-icon"
+      icon="el-icon-refresh-right"
+      style="margin-top: 10px;float: right;"
+      @click="refreshAccount"
+    />
+
+    <el-button
+      plain
+      type="primary"
+      class="button-base-icon"
+      icon="el-icon-download"
+      style="margin-top: 10px;margin-right: 10px;float: right;"
+      @click="exportAccounting"
+    />
+
+    <el-button
+      type="primary"
+      plain
+      style="margin-right: 10px; !important"
+      :loading="isLoadingRePost"
+      :disabled="isLoadingRePost"
+      @click="rePost"
+    >
+      {{ $t('form.accountingViewer.rePosAccounting') }}
+    </el-button>
+
+    <el-checkbox
+      v-model="force"
+    >
+      {{ $t('form.accountingViewer.force') }}
+    </el-checkbox>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api'
+
+import store from '@/store'
+
+import {
+  requestStartRePost
+} from '@/api/ADempiere/form/accouting.js'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
+import { showMessage } from '@/utils/ADempiere/notification'
+// import { parseTime } from '@/utils'
+// import { exportFileFromJson } from '@/utils/ADempiere/exportUtil.js'
+
+export default defineComponent({
+  name: 'ActionsFooter',
+
+  props: {
+    tableName: {
+      type: String,
+      default: () => ''
+    },
+    recordId: {
+      type: Number,
+      default: () => 0
+    },
+    recordUuid: {
+      type: String,
+      default: () => ''
+    }
+  },
+
+  setup(props) {
+    const isLoadingDataTable = ref(false)
+    const isLoadingRePost = ref(false)
+    const force = ref(false)
+
+    // const accountingShemaId = computed(() => {
+    //   return store.getters.getCurrentStoredAccoutingSchemaId
+    // })
+
+    // const accountingShemasList = computed(() => {
+    //   return store.getters.getStoredAccoutingShemasList
+    // })
+
+    // function formatJson(filterVal, jsonData) {
+    //   return jsonData.map(v => filterVal.map(j => {
+    //     if (j === 'timestamp') {
+    //       return parseTime(v[j])
+    //     } else {
+    //       return v[j]
+    //     }
+    //   }))
+    // }
+
+    function exportAccounting() {
+      // const fileName = accountingShemasList.value.find(acctSchema => {
+      //   return acctSchema.KeyColumn === accountingShemaId.value
+      // }).DisplayColumn
+
+      // exportFileFromJson({
+      //   header: headerAccounting.value.map(a => a.label),
+      //   data: formatJson(
+      //     headerAccounting.value.map(a => a.columnName),
+      //     tableData.value
+      //   ),
+      //   fileName,
+      //   bookType: 'xlsx'
+      // })
+    }
+
+    function refreshAccount() {
+      store.dispatch('getAccoutingFactsFromServer', {
+        searchValue: '',
+        tableName: props.tableName,
+        recordUuid: props.recordUuid,
+        recordId: props.recordId
+      })
+    }
+
+    function rePost() {
+      isLoadingRePost.value = true
+      requestStartRePost({
+        tableName: props.tableName,
+        recordId: props.recordId,
+        recordUuid: props.recordUuid,
+        isForce: force.value
+      })
+        .then(response => {
+          if (!isEmptyValue(response.errorMsg)) {
+            showMessage({
+              message: response.errorMsg,
+              type: 'error'
+            })
+          }
+        })
+        .catch(error => {
+          console.warn(`LookupFactory: Get Start Re-Post Facts From Server (State) - Error ${error.code}: ${error.message}.`)
+        })
+        .finally(() => {
+          isLoadingRePost.value = false
+          store.dispatch('getAccoutingFactsFromServer', {
+            searchValue: ''
+          })
+        })
+    }
+
+    return {
+      isLoadingDataTable,
+      isLoadingRePost,
+      force,
+      exportAccounting,
+      refreshAccount,
+      rePost
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/QueryCriteria/accoutingSchemaFilter.vue b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/accoutingSchemaFilter.vue
new file mode 100644
index 00000000000..8900631ac2a
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/accoutingSchemaFilter.vue
@@ -0,0 +1,93 @@
+<!--
+  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('form.accountingViewer.accountingSchema')"
+    required
+  >
+    <el-select
+      v-model="accountingShemaId"
+      style="width: 100%;"
+      filterable
+      @visible-change="getAccoutingShemasList"
+    >
+      <el-option
+        v-for="item in accountingShemasList"
+        :key="item.KeyColumn"
+        :label="item.DisplayColumn"
+        :value="item.KeyColumn"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default defineComponent({
+  name: 'AccoutingSchemaFilter',
+
+  setup() {
+    const accountingShemaId = computed({
+      set(newValue) {
+        store.commit('setAccountSchemaId', newValue)
+      },
+      get() {
+        return store.getters.getCurrentStoredAccoutingSchemaId
+      }
+    })
+
+    const accountingShemasList = computed(() => {
+      return store.getters.getStoredAccoutingShemasList
+    })
+
+    function getAccoutingShemasList() {
+      if (!isEmptyValue(accountingShemasList.value)) {
+        return
+      }
+      store.dispatch('getAccoutingSchemasFromServer', {
+        searchValue: ''
+      })
+    }
+
+    if (isEmptyValue(accountingShemasList.value)) {
+      getAccoutingShemasList()
+    }
+    // set context value
+    if (isEmptyValue(accountingShemaId.value)) {
+      const globalAccoutingSchemaId = store.getters.getSessionContext({
+        columnName: '$C_AcctSchema_ID'
+      })
+      accountingShemaId.value = globalAccoutingSchemaId
+    }
+
+    return {
+      accountingShemaId,
+      accountingShemasList,
+      // Methods
+      getAccoutingShemasList
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/QueryCriteria/index.vue b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/index.vue
new file mode 100644
index 00000000000..e04851a1a6e
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/index.vue
@@ -0,0 +1,96 @@
+<!--
+  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-card class="box-card">
+    <el-divider content-position="left">
+      {{ $t('window.containerInfo.accountingInformation.selection') }}
+    </el-divider>
+
+    <el-form
+      ref="form-query-criteria"
+      label-position="top"
+      class="form-base"
+      size="small"
+      inline
+    >
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <accouting-schema-filter />
+        </el-col>
+
+        <el-col :span="8">
+          <posting-type-filter />
+        </el-col>
+
+        <template v-if="isDocumentSelectable">
+          <el-col v-if="false" :span="8">
+            <organization-filter />
+          </el-col>
+        </template>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { computed, defineComponent } from '@vue/composition-api'
+
+// Components and Mixins
+import AccoutingSchemaFilter from './accoutingSchemaFilter.vue'
+import OrganizationFilter from './organizationFilter.vue'
+import PostingTypeFilter from './postingTypeFilter.vue'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default defineComponent({
+  name: 'QueryCriteria',
+
+  components: {
+    AccoutingSchemaFilter,
+    OrganizationFilter,
+    PostingTypeFilter
+  },
+
+  props: {
+    containerUuid: {
+      type: String,
+      default: () => ''
+    },
+    tableName: {
+      type: String,
+      default: () => ''
+    },
+    recordId: {
+      type: Number,
+      default: () => 0
+    }
+  },
+
+  setup(props) {
+    const isDocumentSelectable = computed(() => {
+      return isEmptyValue(props.tableName) && props.recordId <= 0
+    })
+
+    return {
+      isDocumentSelectable
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/QueryCriteria/organizationFilter.vue b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/organizationFilter.vue
new file mode 100644
index 00000000000..22278510c7a
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/organizationFilter.vue
@@ -0,0 +1,81 @@
+<!--
+  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('form.accountingViewer.organization')"
+  >
+    <el-select
+      v-model="organizationId"
+      style="width: 100%;"
+      filterable
+      @visible-change="getAccoutingOrganizationsList"
+    >
+      <el-option
+        v-for="item in accountingOrganizationsList"
+        :key="item.KeyColumn"
+        :label="item.DisplayColumn"
+        :value="item.KeyColumn"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default defineComponent({
+  name: 'OrganizationFilter',
+
+  setup() {
+    const organizationId = computed({
+      set(newValue) {
+        store.commit('setAccountingOrganizationId', newValue)
+      },
+      get() {
+        return store.getters.getCurrentStoredAccoutingOrganizationId
+      }
+    })
+
+    const accountingOrganizationsList = computed(() => {
+      return store.getters.getStoredAccoutingOrganizationsList
+    })
+
+    function getAccoutingOrganizationsList() {
+      if (!isEmptyValue(accountingOrganizationsList.value)) {
+        return
+      }
+      store.dispatch('getAccoutingOrganizationsFromServer', {
+        searchValue: ''
+      })
+    }
+
+    return {
+      organizationId,
+      accountingOrganizationsList,
+      // Methods
+      getAccoutingOrganizationsList
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/QueryCriteria/postingTypeFilter.vue b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/postingTypeFilter.vue
new file mode 100644
index 00000000000..576abfc744d
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/QueryCriteria/postingTypeFilter.vue
@@ -0,0 +1,82 @@
+<!--
+  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('form.accountingViewer.postingType')"
+  >
+    <el-select
+      v-model="postingTypeValue"
+      style="width: 100%;"
+      filterable
+      @visible-change="getPostingTypesList"
+    >
+      <el-option
+        v-for="item in postingTypesList"
+        :key="item.KeyColumn"
+        :label="item.DisplayColumn"
+        :value="item.KeyColumn"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+export default defineComponent({
+  name: 'PostingTypeFilter',
+
+  setup() {
+    const postingTypeValue = computed({
+      set(newValue) {
+        store.commit('setPostingTypeValue', newValue)
+      },
+      get() {
+        return store.getters.getCurrentStoredPostingTypeValue
+      }
+    })
+
+    const postingTypesList = computed(() => {
+      return store.getters.getStoredPostingTypesList
+    })
+
+    function getPostingTypesList() {
+      if (!isEmptyValue(postingTypesList.value)) {
+        return
+      }
+      store.dispatch('getPostingTypesFromServer', {
+        searchValue: ''
+      })
+    }
+
+    return {
+      // Computeds
+      postingTypeValue,
+      postingTypesList,
+      // Methods
+      getPostingTypesList
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/TableRecords/accountElementColumns.vue b/src/components/ADempiere/Form/AcctViewer/TableRecords/accountElementColumns.vue
new file mode 100644
index 00000000000..d9576313348
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/TableRecords/accountElementColumns.vue
@@ -0,0 +1,50 @@
+<!--
+  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>
+  <span>
+    <el-table-column
+      v-for="(accoutingElement, key) in avaliableAccountingElements"
+      :key="key"
+      :label="$t('form.accountingViewer.uom')"
+      :min-width="80"
+    >
+      <span slot-scope="scope">
+        {{ scope.row.DisplayColumn_C_UOM_ID }}
+      </span>
+    </el-table-column>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import { getAvaliableAccountingElements } from '@/utils/ADempiere/accoutingUtils'
+
+export default defineComponent({
+  name: 'AccountElementColumns',
+
+  setup() {
+    const avaliableAccountingElements = getAvaliableAccountingElements()
+
+    return {
+      avaliableAccountingElements
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/TableRecords/filterColumns.vue b/src/components/ADempiere/Form/AcctViewer/TableRecords/filterColumns.vue
new file mode 100644
index 00000000000..36411cee55b
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/TableRecords/filterColumns.vue
@@ -0,0 +1,166 @@
+<!--
+  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-dropdown
+    trigger="click"
+    class="fields-display-accounting"
+    @command="handleDisplayColumn"
+  >
+    <span class="el-dropdown-link">
+      <svg-icon icon-class="list" />
+    </span>
+
+    <el-dropdown-menu slot="dropdown" style="max-width: 300px;">
+      <el-dropdown-item
+        command="showMinimalistView"
+      >
+        <svg-icon :icon-class="isShowMinialist ? 'eye-open' : 'eye'" />
+        {{ $t('table.dataTable.showMinimalistView') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        command="displayDocumentInformation"
+      >
+        <svg-icon :icon-class="isShowDocumentColumns ? 'eye-open' : 'eye'" />
+        {{ $t('form.accountingViewer.table.displayDocumentInfo') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        command="displaySourceInformation"
+      >
+        <svg-icon :icon-class="isShowSourceColumns ? 'eye-open' : 'eye'" />
+        {{ $t('form.accountingViewer.table.displaySourceInfo') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        command="displayQuantity"
+      >
+        <svg-icon :icon-class="isShowQuantityColumns ? 'eye-open' : 'eye'" />
+        {{ $t('form.accountingViewer.table.displayQuantity') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        command="displayAll"
+      >
+        <svg-icon :icon-class="isShowAllColumns ? 'eye-open' : 'eye'" />
+        {{ $t('table.dataTable.showAllColumns') }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+export default defineComponent({
+  name: 'FilterColumns',
+  setup() {
+    const isShowDocumentColumns = computed({
+      set(newValue) {
+        store.commit('setIsDisplayDocumentInfo', newValue)
+      },
+      get() {
+        return store.getters.getIsDisplayDocumentInfo
+      }
+    })
+
+    const isShowSourceColumns = computed({
+      set(newValue) {
+        store.commit('setIsDisplaySourceInfo', newValue)
+      },
+      get() {
+        return store.getters.getIsDisplaySourceInfo
+      }
+    })
+
+    const isShowQuantityColumns = computed({
+      set(newValue) {
+        store.commit('setIsDisplayQuantity', newValue)
+      },
+      get() {
+        return store.getters.getIsDisplayQuantity
+      }
+    })
+
+    const isShowMinialist = computed(() => {
+      return !(isShowDocumentColumns.value || isShowSourceColumns.value || isShowQuantityColumns.value)
+    })
+    const isShowAllColumns = computed(() => {
+      return isShowDocumentColumns.value && isShowSourceColumns.value && isShowQuantityColumns.value
+    })
+
+    const isLoadingDataTable = computed({
+      set(newValue) {
+        store.commit('setIsLoadingAccoutingRecords', newValue)
+      },
+      get() {
+        return store.getters.getIsLoadingAccoutingRecords
+      }
+    })
+
+    function handleDisplayColumn(displayColumn) {
+      isLoadingDataTable.value = true
+      setTimeout(() => {
+        isLoadingDataTable.value = false
+      }, 500)
+
+      switch (displayColumn) {
+        case 'displayAll':
+          isShowDocumentColumns.value = true
+          isShowSourceColumns.value = true
+          isShowQuantityColumns.value = true
+          break
+        case 'displayDocumentInformation':
+          isShowDocumentColumns.value = !isShowDocumentColumns.value
+          break
+        case 'displaySourceInformation':
+          isShowSourceColumns.value = !isShowSourceColumns.value
+          break
+        case 'displayQuantity':
+          isShowQuantityColumns.value = !isShowQuantityColumns.value
+          break
+        case 'showMinimalistView':
+          isShowDocumentColumns.value = false
+          isShowSourceColumns.value = false
+          isShowQuantityColumns.value = false
+          break
+      }
+    }
+
+    return {
+      isShowMinialist,
+      isShowAllColumns,
+      isShowDocumentColumns,
+      isShowSourceColumns,
+      isShowQuantityColumns,
+      //
+      handleDisplayColumn
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.fields-display-accounting {
+  float: right  ;
+  position: relative;
+  color: #606266;
+  font-size: 16px;
+  /* float: right; */
+  padding-left: 5px;
+}
+</style>
diff --git a/src/components/ADempiere/Form/AcctViewer/TableRecords/index.vue b/src/components/ADempiere/Form/AcctViewer/TableRecords/index.vue
new file mode 100644
index 00000000000..c1c1cef957f
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/TableRecords/index.vue
@@ -0,0 +1,270 @@
+<!--
+  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 style="padding: 10px;height: -webkit-fill-available;">
+    <filter-columns />
+
+    <el-table
+      v-loading="isLoadingDataTable"
+      :data="tableData"
+      :element-loading-text="$t('notifications.loading')"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      border
+      style="height: 70%;"
+    >
+      <index-column
+        :page-number="1"
+      />
+
+      <el-table-column
+        :label="$t('form.accountingViewer.organization')"
+        :min-width="110"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.DisplayColumn_AD_Org_ID }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.account')"
+        :min-width="110"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.DisplayColumn_Account_ID }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.accountedDebit')"
+        :min-width="140"
+      >
+        <span slot-scope="scope" class="cell-align-right">
+          {{ scope.row.AmtAcctDr }}
+        </span>
+      </el-table-column>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.accountedCredit')"
+        :min-width="140"
+      >
+        <span slot-scope="scope" class="cell-align-right">
+          {{ scope.row.AmtSourceCr }}
+        </span>
+      </el-table-column>
+
+      <!-- <source-columns v-if="isShowSourceColumns" /> -->
+      <template v-if="isShowSourceColumns">
+        <el-table-column
+          :label="$t('form.accountingViewer.transactionDate')"
+          :min-width="110"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.DateTrx }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.currency')"
+          :min-width="110"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.DisplayColumn_C_Currency_ID }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.sourceDebit')"
+          :min-width="130"
+        >
+          <span slot-scope="scope" class="cell-align-right">
+            {{ scope.row.AmtSourceDr }}
+          </span>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.sourceCredit')"
+          :min-width="130"
+        >
+          <span slot-scope="scope" class="cell-align-right">
+            {{ scope.row.AmtSourceCr }}
+          </span>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.rate')"
+          :min-width="110"
+        >
+          <span slot-scope="scope" class="cell-align-right">
+            {{ scope.row.Rate }}
+          </span>
+        </el-table-column>
+      </template>
+
+      <!-- <accouting-element-columns /> -->
+      <el-table-column
+        v-for="(acctElement, key) in avaliableAccountingElements"
+        :key="key"
+        :label="acctElement.name || acctElement.elementType"
+        :min-width="140"
+        header-align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row[DISPLAY_COLUMN_PREFIX + acctElement.columnName] }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.accountDate')"
+        :min-width="120"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.DateAcct }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.period')"
+        :min-width="80"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.DisplayColumn_C_Period_ID }}
+        </template>
+      </el-table-column>
+
+      <!-- <quantity-columns v-if="isShowQuantityColumns" /> -->
+      <template v-if="isShowQuantityColumns">
+        <el-table-column
+          :label="$t('form.accountingViewer.uom')"
+          :min-width="80"
+        >
+          <span slot-scope="scope">
+            {{ scope.row.DisplayColumn_C_UOM_ID }}
+          </span>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.quantity')"
+          :min-width="85"
+        >
+          <span slot-scope="scope" class="cell-align-right">
+            {{ scope.row.Qty }}
+          </span>
+        </el-table-column>
+      </template>
+
+      <template v-if="isShowDocumentColumns">
+        <el-table-column
+          :label="$t('form.accountingViewer.tableRecord')"
+          :min-width="210"
+        >
+          <span slot-scope="scope">
+            {{ scope.row.DisplayColumn_AD_Table_ID }}
+          </span>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.recordId')"
+          :min-width="90"
+        >
+          <span slot-scope="scope">
+            {{ scope.row.Record_ID }}
+          </span>
+        </el-table-column>
+        <el-table-column
+          :label="$t('form.accountingViewer.description')"
+          :min-width="310"
+        >
+          <span slot-scope="scope">
+            {{ scope.row.Description }}
+          </span>
+        </el-table-column>
+      </template>
+
+      <el-table-column
+        :label="$t('form.accountingViewer.postingType')"
+        :min-width="110"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.DisplayColumn_PostingType }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Constants
+import { DISPLAY_COLUMN_PREFIX } from '@/utils/ADempiere/dictionaryUtils'
+
+// Components and Mixins
+// import AccountElementColumns from './accountElementColumns.vue'
+import FilterColumns from './filterColumns.vue'
+import IndexColumn from '@/components/ADempiere/DataTable/Components/IndexColumn.vue'
+// import SourceColumns from './sourceColumns.vue'
+// import QuantityColumns from './quantityColumns.vue'
+
+// Utils and Helper Methods
+import { getAvaliableAccountingElements } from '@/utils/ADempiere/accoutingUtils'
+
+export default defineComponent({
+  name: 'TableRecords',
+
+  components: {
+    // AccountElementColumns,
+    FilterColumns,
+    IndexColumn
+    // SourceColumns,
+    // QuantityColumns
+  },
+
+  setup() {
+    const isShowDocumentColumns = computed(() => {
+      return store.getters.getIsDisplayDocumentInfo
+    })
+
+    const isShowSourceColumns = computed(() => {
+      return store.getters.getIsDisplaySourceInfo
+    })
+
+    const isShowQuantityColumns = computed(() => {
+      return store.getters.getIsDisplayQuantity
+    })
+
+    const isLoadingDataTable = computed(() => {
+      return store.getters.getIsLoadingAccoutingRecords
+    })
+
+    const tableData = computed(() => {
+      return store.getters.getAccoutingRecordsList
+    })
+
+    const avaliableAccountingElements = getAvaliableAccountingElements()
+
+    return {
+      avaliableAccountingElements,
+      DISPLAY_COLUMN_PREFIX,
+      // Refs
+      isShowDocumentColumns,
+      isShowSourceColumns,
+      isShowQuantityColumns,
+      // Computeds
+      isLoadingDataTable,
+      tableData
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/TableRecords/quantityColumns.vue b/src/components/ADempiere/Form/AcctViewer/TableRecords/quantityColumns.vue
new file mode 100644
index 00000000000..47ac4f7cc5a
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/TableRecords/quantityColumns.vue
@@ -0,0 +1,46 @@
+<!--
+  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>
+  <span>
+    <el-table-column
+      :label="$t('form.accountingViewer.uom')"
+      :min-width="80"
+    >
+      <span slot-scope="scope">
+        {{ scope.row.DisplayColumn_C_UOM_ID }}
+      </span>
+    </el-table-column>
+    <el-table-column
+      :label="$t('form.accountingViewer.quantity')"
+      :min-width="85"
+    >
+      <span slot-scope="scope" class="cell-align-right">
+        {{ scope.row.Qty }}
+      </span>
+    </el-table-column>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'QuantityColumns'
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/TableRecords/sourceColumns.vue b/src/components/ADempiere/Form/AcctViewer/TableRecords/sourceColumns.vue
new file mode 100644
index 00000000000..91f0459b75e
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/TableRecords/sourceColumns.vue
@@ -0,0 +1,70 @@
+<!--
+  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>
+  <span style="display: contents">
+    <el-table-column
+      :label="$t('form.accountingViewer.transactionDate')"
+      :min-width="110"
+    >
+      <template slot-scope="scope">
+        {{ scope.row.DateTrx }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('form.accountingViewer.currency')"
+      :min-width="110"
+    >
+      <template slot-scope="scope">
+        {{ scope.row.DisplayColumn_C_Currency_ID }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="$t('form.accountingViewer.sourceDebit')"
+      :min-width="110"
+    >
+      <span slot-scope="scope" class="cell-align-right">
+        {{ scope.row.AmtSourceDr }}
+      </span>
+    </el-table-column>
+    <el-table-column
+      :label="$t('form.accountingViewer.sourceCredit')"
+      :min-width="110"
+    >
+      <span slot-scope="scope" class="cell-align-right">
+        {{ scope.row.AmtSourceCr }}
+      </span>
+    </el-table-column>
+    <el-table-column
+      :label="$t('form.accountingViewer.rate')"
+      :min-width="110"
+    >
+      <span slot-scope="scope" class="cell-align-right">
+        {{ scope.row.Rate }}
+      </span>
+    </el-table-column>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'sourceColumns'
+})
+</script>
diff --git a/src/components/ADempiere/Form/AcctViewer/fieldsList.js b/src/components/ADempiere/Form/AcctViewer/fieldsList.js
new file mode 100644
index 00000000000..2e1cff6cbcd
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/fieldsList.js
@@ -0,0 +1,43 @@
+/**
+ * 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/>.
+ */
+
+export default [
+  // TODO: Add User1_ID, User2_ID, User3_ID, User4_ID to database translations
+  // // Accounting Schema
+  // {
+  //   fieldUuid: '8d3bc8b6-fb40-11e8-a479-7a0060f0aa01',
+  //   uuid: '8d3bc8b6-fb40-11e8-a479-7a0060f0aa01',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 8,
+  //     sequence: 10,
+  //     defaultValue: '$C_AcctSchema_ID'
+  //   }
+  // },
+  // // Posting Type
+  // {
+  //   fieldUuid: '8d37f330-fb40-11e8-a479-7a0060f0aa01',
+  //   uuid: '8d37f330-fb40-11e8-a479-7a0060f0aa01',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 8,
+  //     sequence: 20,
+  //     isMandatory: false
+  //   }
+  // }
+]
diff --git a/src/components/ADempiere/Form/AcctViewer/index.vue b/src/components/ADempiere/Form/AcctViewer/index.vue
new file mode 100644
index 00000000000..4c6b5b927c7
--- /dev/null
+++ b/src/components/ADempiere/Form/AcctViewer/index.vue
@@ -0,0 +1,142 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A.
+  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-container> -->
+  <div style="height: 84% !important;overflow: auto;">
+    <query-criteria
+      :table-name="tableName"
+      :record-id="recordId"
+    />
+
+    <div style="padding: 0px;height: fit-content !important;">
+      <table-records />
+    </div>
+    <div style="/*height: 6% !important;*/">
+      <actions-footer
+        :table-name="tableName"
+        :record-id="recordId"
+        :record-uuid="recordUuid"
+      />
+    </div>
+  </div>
+  <!-- </el-container> -->
+</template>
+
+<script>
+import { defineComponent, computed, watch, onUnmounted } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Components and Mixins
+import ActionsFooter from './ActionsFooter'
+import QueryCriteria from './QueryCriteria'
+import TableRecords from './TableRecords'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+/**
+ * org.compiere.acct.AcctViewer
+ * org.adempiere.webui.acct.WAcctViewer
+ */
+export default defineComponent({
+  name: 'AcctViewer',
+
+  components: {
+    ActionsFooter,
+    QueryCriteria,
+    TableRecords
+  },
+
+  props: {
+    containerUuid: {
+      type: String,
+      default: () => ''
+    },
+    tableName: {
+      type: String,
+      default: () => ''
+    },
+    recordId: {
+      type: Number,
+      default: () => 0
+    },
+    recordUuid: {
+      type: String,
+      default: () => ''
+    }
+  },
+
+  setup(props) {
+    const ACCOUTING_FACT_FORM = 'Accouting-Fact-Form'
+
+    // Computed
+    const uuidForm = computed(() => {
+      return ACCOUTING_FACT_FORM + '_' + props.containerUuid
+    })
+
+    const showContainerInfo = computed(() => {
+      return store.getters.getShowLogs
+    })
+
+    // Watch
+    // watch(accoutingSchemas, (newValue) => {
+    //   findAccountingFacts(newValue)
+    // })
+    // watch(postingType, (newValue) => {
+    //   findAccountingFacts(newValue)
+    // })
+    watch(showContainerInfo, (newValue) => {
+      // clearData()
+    })
+
+    // findAccountingFacts(accoutingFilters.value)
+
+    function subscribeAccoutingFacts() {
+      return store.subscribe((mutation, state) => {
+        const enabledMutations = ['setAccountSchemaId', 'setPostingTypeValue']
+        if (enabledMutations.includes(mutation.type)) {
+          if (mutation.type === 'setAccountSchemaId' && isEmptyValue(mutation.payload)) {
+            return
+          }
+          store.dispatch('getAccoutingFactsFromServer', {
+            searchValue: '',
+            tableName: props.tableName,
+            recordUuid: props.recordUuid,
+            recordId: props.recordId
+          })
+        }
+      })
+    }
+
+    const unsubscribeAccoutingFacts = subscribeAccoutingFacts()
+
+    onUnmounted(() => {
+      unsubscribeAccoutingFacts()
+    })
+
+    return {
+      // computed
+      uuidForm,
+      showContainerInfo
+    }
+  }
+
+})
+</script>
diff --git a/src/components/ADempiere/Form/VBankStatementMatch/index.vue b/src/components/ADempiere/Form/VBankStatementMatch/index.vue
index 265ba873d90..444173e952d 100644
--- a/src/components/ADempiere/Form/VBankStatementMatch/index.vue
+++ b/src/components/ADempiere/Form/VBankStatementMatch/index.vue
@@ -18,7 +18,7 @@
 
 <template>
   <div style="height: -webkit-fill-available;">
-    <div style="height: 6% !important;">
+    <div style="height: 5% !important;">
       <el-steps :active="currentSetp" finish-status="success">
         <el-step
           v-for="(list, key) in stepList"
@@ -27,7 +27,7 @@
         />
       </el-steps>
     </div>
-    <div style="height: 88% !important;">
+    <div style="height: 79% !important;">
       <transition name="el-fade-in-linear">
         <search-criteria
           v-if="currentSetp === 1"
@@ -42,7 +42,7 @@
         />
       </transition>
     </div>
-    <div style="height: 6% !important;text-align: end;">
+    <div style="height: 5% !important;text-align: end;">
       <el-button
         v-if="!isNext"
         type="info"
diff --git a/src/components/ADempiere/Form/VPOS/Collection/index.vue b/src/components/ADempiere/Form/VPOS/Collection/index.vue
index df825dbcf26..999d2cf9634 100644
--- a/src/components/ADempiere/Form/VPOS/Collection/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Collection/index.vue
@@ -972,7 +972,7 @@ export default {
   watch: {
     dateConvertions(value) {
       const currencyFromUuid = this.currentPointOfSales.priceList.currency.uuid
-      const currencyToUuid = this.isEmptyValue(this.selectCurrentFieldCurrency.uuid) ? '' : this.selectCurrentFieldCurrency.uuid
+      const currencyToUuid = this.isEmptyValue(this.selectCurrentFieldCurrency) ? '' : this.selectCurrentFieldCurrency.uuid
       if (!this.isEmptyValue(this.currentPointOfSales.conversionTypeUuid) &&
         !this.isEmptyValue(currencyFromUuid) && !this.isEmptyValue(currencyToUuid) &&
         !isSameValues(currencyFromUuid, currencyToUuid) &&
@@ -1558,12 +1558,13 @@ export default {
     showListCreditMemo(isShow) {
       if (!isShow) return
       const payment_method = this.availablePaymentMethods.find(list => list.uuid === this.currentFieldPaymentMethods)
-      let documentTypeId
-      if (!this.isEmptyValue(payment_method.document_type)) {
-        documentTypeId = payment_method.document_type.id
-      }
+      // let documentTypeId
+      // console.log({ payment_method })
+      // if (!this.isEmptyValue(payment_method.document_type)) {
+      //   documentTypeId = payment_method.document_type.id
+      // }
       this.$store.dispatch('searchListCreditMemo', {
-        documentTypeId
+        documentTypeId: payment_method.document_type_id
       })
         .then(response => {
           this.listCreditMemo = response.map(list => {
@@ -1610,11 +1611,14 @@ export default {
      * @param {Object} field
      */
     isDisabledLogiPos(field) {
+      const { columnName } = field
       if (this.isdisplayLogicBank) {
-        const { columnName } = field
         if (columnName === 'ReferenceNo' || columnName === 'DateTrx' || columnName === 'PayAmt') return false
         return !this.isEmptyValue(this.currentBankAccount)
       } else if (this.isdisplayLogicCreditMemo) {
+        if (columnName === 'PayAmt') {
+          return false
+        }
         return !this.isEmptyValue(this.currentCreditMemo)
       }
       return false
diff --git a/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/index.vue b/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/index.vue
index 6274c64eed8..15a16f49ab7 100644
--- a/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/index.vue
@@ -66,6 +66,7 @@ along with this program.  If not, see <https:www.gnu.org/licenses/>.
       :empty-text="$t('quickAccess.searchWithEnter')"
       :border="true"
       highlight-current-row
+      style="height: 60% !important;"
       @cell-dblclick="editLine"
     >
       <template v-for="(valueOrder, item, key) in orderLineDefinition">
@@ -566,6 +567,7 @@ export default defineComponent({
 .return-product {
   padding: 0px;
   width: 100%;
+  height: -webkit-fill-available;
   overflow-x: hidden;
 }
 .order-info {
diff --git a/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/previwer.vue b/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/previwer.vue
index 3a7a89b78fe..fb0f56afb3c 100644
--- a/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/previwer.vue
+++ b/src/components/ADempiere/Form/VPOS/Options/ReturnProduct/previwer.vue
@@ -27,7 +27,7 @@ along with this program.  If not, see <https:www.gnu.org/licenses/>.
       fit
       :empty-text="$t('quickAccess.searchWithEnter')"
       :border="true"
-      height="300"
+      style="height: 60% !important;"
       highlight-current-row
     >
       <template v-for="(valueOrder, item, key) in orderLineDefinition">
@@ -459,6 +459,7 @@ export default defineComponent({
 .return-product {
   padding: 0px;
   width: 100%;
+  height: -webkit-fill-available;
   overflow-x: hidden;
 }
 .order-info {
diff --git a/src/components/ADempiere/Form/VPOS/Options/index.vue b/src/components/ADempiere/Form/VPOS/Options/index.vue
index e554e9cb80a..5faa5222e8b 100644
--- a/src/components/ADempiere/Form/VPOS/Options/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Options/index.vue
@@ -489,6 +489,7 @@
                   :center="true"
                   :modal="false"
                   :append-to-body="true"
+                  custom-class="dialog-return-product"
                   width="90%"
                 >
                   <return-product />
@@ -668,7 +669,7 @@
       close-on-press-escape
       width="70%"
       center
-      class="dialogo-seller"
+      class="dialog-seller"
     >
       <mnemonic-command />
     </el-dialog>
@@ -680,7 +681,7 @@
       close-on-press-escape
       width="80%"
       center
-      class="dialogo-seller"
+      class="dialog-seller"
       @shortkey.native="cashManagementModal"
     >
       <component
@@ -890,6 +891,7 @@
       :center="true"
       :title="$t('form.pos.returnProduct')"
       width="80%"
+      custom-class="dialog-return-product"
     >
       <el-result
         v-if="!isEmptyValue(summaryReturnProduct)"
@@ -924,7 +926,7 @@
     </el-dialog>
     <el-dialog
       :title="$t('form.pos.optionsPoinSales.salesOrder.confirmDelivery')"
-      :visible.sync="showDialogoDelivery"
+      :visible.sync="showDialogDelivery"
       :center="true"
       :modal="false"
       :append-to-body="true"
@@ -968,13 +970,13 @@
                 type="danger"
                 class="custom-button-create-bp"
                 icon="el-icon-close"
-                @click="showDialogoDelivery = !showDialogoDelivery"
+                @click="showDialogDelivery = !showDialogDelivery"
               />
               <el-button
                 type="primary"
                 class="custom-button-create-bp"
                 icon="el-icon-check"
-                @click="showDialogoDelivery = !showDialogoDelivery"
+                @click="showDialogDelivery = !showDialogDelivery"
               />
             </samp>
           </el-col>
@@ -1102,7 +1104,7 @@ export default {
     summaryReturnProduct() {
       return this.$store.getters.getSummaryRMA
     },
-    showDialogoDelivery: {
+    showDialogDelivery: {
       get() {
         return this.$store.getters.getShowConfirmDelivery
       },
@@ -2384,10 +2386,10 @@ export default {
         containerUuid: this.$route.meta.uuid,
         columnName: 'C_BPartner_ID'
       })
-      const documentTypeUuid = this.$store.getters.getValueOfField({
-        containerUuid: this.$route.meta.uuid,
-        columnName: 'C_DocTypeTarget_ID_UUID'
-      })
+      // const documentTypeUuid = this.$store.getters.getValueOfField({
+      //   containerUuid: this.$route.meta.uuid,
+      //   columnName: 'C_DocTypeTarget_ID_UUID'
+      // })
       let customerUuid = isEmptyValue(bpartner) ? this.$store.getters.getNewCustomer.uuid : bpartner
       // TODO: Validate this static identifier
       if (isEmptyValue(customerUuid) || id === 1000006) {
@@ -2397,7 +2399,7 @@ export default {
         posUuid,
         customerUuid: this.currentPointOfSales.templateCustomer.uuid,
         salesRepresentativeUuid: this.currentPointOfSales.salesRepresentative.uuid,
-        documentTypeUuid
+        documentTypeUuid: this.currentPointOfSales.documentType.uuid
       })
         .then(response => {
           this.$store.dispatch('reloadOrder', { orderUuid: response.uuid })
@@ -2537,7 +2539,7 @@ export default {
     background-color:white;
     background:white;
   }
-  .dialogo-seller {
+  .dialog-seller {
     overflow: hidden;
   }
 </style>
@@ -2545,4 +2547,10 @@ export default {
   .el-textarea__inner:hover {
     background-color: #FFFFFF!important;
   }
+  .dialog-return-product {
+    height: 70%;
+    .el-dialog__body {
+      height: -webkit-fill-available;
+    }
+  }
 </style>
diff --git a/src/components/ADempiere/Form/VPOS/OrderList/fastOrder.vue b/src/components/ADempiere/Form/VPOS/OrderList/fastOrder.vue
index ebd82e40835..3bbba8f95ac 100644
--- a/src/components/ADempiere/Form/VPOS/OrderList/fastOrder.vue
+++ b/src/components/ADempiere/Form/VPOS/OrderList/fastOrder.vue
@@ -683,10 +683,10 @@ export default {
       }
       this.$store.commit('setShowPOSCollection', false)
       const posUuid = this.currentPointOfSales.uuid
-      const documentTypeUuid = this.$store.getters.getValueOfField({
-        containerUuid: this.$route.meta.uuid,
-        columnName: 'C_DocTypeTarget_ID_UUID'
-      })
+      // const documentTypeUuid = this.$store.getters.getValueOfField({
+      //   containerUuid: this.$route.meta.uuid,
+      //   columnName: 'C_DocTypeTarget_ID_UUID'
+      // })
       const bpartner = this.$store.getters.getValueOfField({
         containerUuid: this.$route.meta.uuid,
         columnName: 'DisplayColumn_C_BPartner_UUID' // this.parentMetadata.columnName
@@ -701,7 +701,7 @@ export default {
         customerUuid: this.currentPointOfSales.templateCustomer.uuid,
         salesRepresentativeUuid: this.currentPointOfSales.salesRepresentative.uuid,
         priceListUuid: this.$store.getters.currentPriceList.uuid,
-        documentTypeUuid
+        documentTypeUuid: this.currentPointOfSales.documentType.uuid
       })
         .then(response => {
           this.$store.commit('setCurrentPriceList', response.priceList)
diff --git a/src/components/ADempiere/Form/index.vue b/src/components/ADempiere/Form/index.vue
index 1e63ae70df5..4c3d78e3c18 100644
--- a/src/components/ADempiere/Form/index.vue
+++ b/src/components/ADempiere/Form/index.vue
@@ -1,19 +1,19 @@
 <!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
- Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
- 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.
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A.
+  Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+  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.
+  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/>.
+  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>
   <component
@@ -38,6 +38,9 @@ export default {
     componentRender() {
       let form
       switch (this.metadata.fileName) {
+        case 'AcctViewer':
+          form = import('@/components/ADempiere/Form/AcctViewer')
+          break
         case 'PriceChecking':
           form = import('@/components/ADempiere/Form/PriceChecking')
           this.$store.dispatch('settings/changeSetting', {
diff --git a/src/components/ADempiere/PanelInfo/Component/Accounting/fieldsList.js b/src/components/ADempiere/PanelInfo/Component/Accounting/fieldsList.js
deleted file mode 100644
index c1287b0c0b7..00000000000
--- a/src/components/ADempiere/PanelInfo/Component/Accounting/fieldsList.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// 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/>.
-
-export default [
-  // Accounting Schema
-  {
-    fieldUuid: '8d3bc8b6-fb40-11e8-a479-7a0060f0aa01',
-    uuid: '8d3bc8b6-fb40-11e8-a479-7a0060f0aa01',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 8,
-      sequence: 10,
-      defaultValue: '$C_AcctSchema_ID'
-    }
-  },
-  // Posting Type
-  {
-    fieldUuid: '8d37f330-fb40-11e8-a479-7a0060f0aa01',
-    uuid: '8d37f330-fb40-11e8-a479-7a0060f0aa01',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 8,
-      sequence: 20,
-      isMandatory: false
-    }
-  }
-]
diff --git a/src/components/ADempiere/PanelInfo/Component/Accounting/heardList.js b/src/components/ADempiere/PanelInfo/Component/Accounting/heardList.js
deleted file mode 100644
index 5ebc10807a7..00000000000
--- a/src/components/ADempiere/PanelInfo/Component/Accounting/heardList.js
+++ /dev/null
@@ -1,185 +0,0 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// 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/>.
-import language from '@/lang'
-
-export default [
-  {
-    // Organization
-    label: language.t('accounting.organization'),
-    columnName: 'DisplayColumn_AD_Org_ID',
-    align: 'center',
-    default: true,
-    width: 110
-  },
-  {
-    // Account
-    label: language.t('accounting.account'),
-    columnName: 'DisplayColumn_Account_ID',
-    align: 'center',
-    default: true,
-    width: 80
-  },
-  {
-    // Posted Debit
-    label: language.t('accounting.debitPosted'),
-    columnName: 'AmtAcctDr',
-    align: 'right',
-    default: true,
-    width: 165
-  },
-  {
-    // Posted Credit
-    label: language.t('accounting.PostedCredit'),
-    columnName: 'AmtSourceCr',
-    align: 'right',
-    default: true,
-    width: 168
-  },
-  {
-    // Transaction Date
-    label: language.t('accounting.transactionDate'),
-    columnName: 'DateTrx',
-    align: 'left',
-    displaySourceInformation: true,
-    width: 180
-  },
-  {
-    // Currency
-    label: language.t('accounting.currency'),
-    columnName: 'DisplayColumn_C_Currency_ID',
-    align: 'left',
-    displaySourceInformation: true,
-    width: 80
-  },
-  {
-    // Debit Source
-    label: language.t('accounting.debitSource'),
-    columnName: 'AmtAcctDr',
-    align: 'right',
-    displaySourceInformation: true,
-    width: 165
-  },
-  {
-    // Debit Source
-    label: language.t('accounting.creditSource'),
-    columnName: 'AmtSourceCr',
-    align: 'right',
-    displaySourceInformation: true,
-    width: 168
-  },
-  {
-    // Rate
-    label: language.t('accounting.rate'),
-    columnName: 'C_Tax_ID',
-    align: 'right',
-    displaySourceInformation: true,
-    width: 80
-  },
-  {
-    // Product
-    label: language.t('accounting.product'),
-    columnName: 'DisplayColumn_M_Product_ID',
-    align: 'center',
-    default: true,
-    width: 110
-  },
-  {
-    // Business Partner
-    label: language.t('accounting.businessPartner'),
-    columnName: 'DisplayColumn_C_BPartner_ID',
-    align: 'center',
-    default: true,
-    width: 142
-  },
-  {
-    // Project
-    label: language.t('accounting.Project'),
-    columnName: 'DisplayColumn_C_Project_ID',
-    align: 'center',
-    default: true,
-    width: 85
-  },
-  {
-    // Campaing
-    label: language.t('accounting.Campaign'),
-    columnName: 'DisplayColumn_C_Campaign_ID',
-    align: 'center',
-    default: true,
-    width: 85
-  },
-  {
-    // Accounting date
-    label: language.t('accounting.accountingDate'),
-    columnName: 'DateAcct',
-    align: 'center',
-    default: true,
-    width: 125
-  },
-  {
-    // Period
-    label: language.t('accounting.period'),
-    columnName: 'DisplayColumn_C_Period_ID',
-    align: 'right',
-    default: true,
-    width: 80
-  },
-  {
-    label: language.t('accounting.um'),
-    columnName: 'DisplayColumn_C_UOM_ID',
-    align: 'left',
-    displayQuantity: true,
-    width: 80
-  },
-  {
-    label: language.t('accounting.quantity'),
-    columnName: 'Qty',
-    align: 'right',
-    displayQuantity: true,
-    width: 85
-  },
-  {
-    // Table Name
-    label: language.t('accounting.table'),
-    columnName: 'DisplayColumn_AD_Table_ID',
-    align: 'left',
-    displayDocumentInformation: true,
-    width: 80
-  },
-  {
-    // Record ID
-    label: language.t('accounting.recordId'),
-    columnName: 'Record_ID',
-    align: 'right',
-    displayDocumentInformation: true,
-    width: 125
-  },
-  {
-    // Description
-    label: language.t('accounting.description'),
-    columnName: 'Description',
-    align: 'left',
-    displayDocumentInformation: true,
-    width: 100
-  },
-  {
-    // Type of application
-    label: language.t('accounting.typeApplication'),
-    columnName: 'DisplayColumn_PostingType',
-    align: 'left',
-    default: true,
-    width: 145
-  }
-]
diff --git a/src/components/ADempiere/PanelInfo/Component/Accounting/index.vue b/src/components/ADempiere/PanelInfo/Component/Accounting/index.vue
deleted file mode 100644
index d70e923b9e4..00000000000
--- a/src/components/ADempiere/PanelInfo/Component/Accounting/index.vue
+++ /dev/null
@@ -1,647 +0,0 @@
-<!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
- 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-container> -->
-  <div style="height: 98% !important;overflow: auto;">
-    <div style="height: 15% !important;padding: 0px;">
-      <el-card class="box-card">
-        <el-divider content-position="left">
-          {{ $t('window.containerInfo.accountingInformation.selection') }}
-        </el-divider>
-        <el-form
-          ref="form-express-receipt"
-          label-position="top"
-          class="field-from"
-          size="small"
-          inline
-        >
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <el-form-item
-                :label="$t('Esquema Contable')"
-                class="front-item-receipt"
-              >
-                <el-select
-                  v-model="accoutingSchemas"
-                  style="width: 100%;"
-                  filterable
-                  @visible-change="listAccoutingSchemas"
-                >
-                  <el-option
-                    v-for="item in listAccouting"
-                    :key="item.KeyColumn"
-                    :label="item.DisplayColumn"
-                    :value="item.KeyColumn"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item
-                :label="$t('Tipo de Aplicación')"
-                class="front-item-receipt"
-              >
-                <el-select
-                  v-model="postingType"
-                  style="width: 100%;"
-                  filterable
-                  @visible-change="listPostingTypes"
-                >
-                  <el-option
-                    v-for="item in listPosting"
-                    :key="item.KeyColumn"
-                    :label="item.DisplayColumn"
-                    :value="item.KeyColumn"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </el-card>
-    </div>
-    <div style="padding: 0px;height: 75% !important;">
-      <div
-        style="padding: 10px;height: -webkit-fill-available;"
-      >
-        <el-dropdown
-          trigger="click"
-          class="fields-display-accounting"
-          @command="handleDisplayColumn"
-        >
-          <span class="el-dropdown-link">
-            <svg-icon icon-class="list" />
-          </span>
-
-          <el-dropdown-menu slot="dropdown" style="max-width: 300px;">
-            <el-dropdown-item
-              command="showMinimalistView"
-            >
-              <svg-icon :icon-class="showMinimalistView ? 'eye-open' : 'eye'" />
-              {{ $t('table.dataTable.showMinimalistView') }} {{ showMinimalistView }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              command="displayDocumentInformation"
-            >
-              <svg-icon :icon-class="displayDocumentInformation ? 'eye-open' : 'eye'" />
-              {{ 'Mostrar Información de Documento' }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              command="displaySourceInformation"
-            >
-              <svg-icon :icon-class="displaySourceInformation ? 'eye-open' : 'eye'" />
-              {{ 'Mostrar Información Fuente' }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              command="displayQuantity"
-            >
-              <svg-icon :icon-class="displayQuantity ? 'eye-open' : 'eye'" />
-              {{ 'Mostrar Cantidad' }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              command="displayAll"
-            >
-              <svg-icon :icon-class="showAllColumns ? 'eye-open' : 'eye'" />
-              {{ $t('table.dataTable.showAllColumns') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-table
-          v-loading="isLoadingDataTable"
-          :data="tableData"
-          :element-loading-text="$t('notifications.loading')"
-          element-loading-background="rgba(255, 255, 255, 0.8)"
-          border
-          style="height: 98%;"
-        >
-          <el-table-column
-            type="index"
-            label="#"
-            width="35"
-            header-align="left"
-          />
-          <el-table-column
-            v-for="(head, key) in headerAccounting"
-            :key="key"
-            :label="head.label"
-            :align="head.align"
-            :min-width="head.width"
-            header-align="center"
-          >
-            <template slot-scope="scope">
-              {{ scope.row[head.columnName] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-    <div style="height: 6% !important;">
-      <div style="margin-top: 10px;">
-        <el-button
-          :loading="isLoadingDataTable"
-          type="success"
-          class="button-base-icon"
-          icon="el-icon-refresh-right"
-          style="margin-top: 10px;float: right;"
-          @click="refreshAccount"
-        />
-        <el-button
-          plain
-          type="primary"
-          class="button-base-icon"
-          icon="el-icon-download"
-          style="margin-top: 10px;margin-right: 10px;float: right;"
-          @click="exportAccounting"
-        />
-        <el-button
-          type="primary"
-          plain
-          style="margin-right: 10px; !important"
-          :loading="isLoadingRePost"
-          :disabled="isLoadingRePost"
-          @click="rePost"
-        >
-          {{ $t('accounting.rePosAccounting') }}
-        </el-button>
-        <el-checkbox
-          v-model="force"
-        >
-          {{ $t('accounting.force') }}
-        </el-checkbox>
-      </div>
-    </div>
-  </div>
-  <!-- </el-container> -->
-</template>
-
-<script>
-import { defineComponent, ref, computed, watch } from '@vue/composition-api'
-
-import store from '@/store'
-
-// components and mixins
-import fieldsList from './fieldsList'
-import heardList from './heardList'
-import FieldDefinition from '@/components/ADempiere/FieldDefinition/index.vue'
-import { containerManager as containerManagerForm } from '@/utils/ADempiere/dictionary/form/index.js'
-import { containerManager as containerManagerWindow } from '@/utils/ADempiere/dictionary/window'
-import {
-  createFieldFromDictionary
-} from '@/utils/ADempiere/lookupFactory'
-
-import {
-  requestAccountingFacts,
-  requestStartRePost,
-  // List Select
-  listAccoutingSchemasRequest,
-  // listOrganizationsRequest,
-  listPostingTypesRequest
-} from '@/api/ADempiere/form/accouting.js'
-
-// utils and helper methods
-import { DISPLAY_COLUMN_PREFIX, UNIVERSALLY_UNIQUE_IDENTIFIER_COLUMN_SUFFIX } from '@/utils/ADempiere/dictionaryUtils'
-import { formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
-import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
-import { showMessage } from '@/utils/ADempiere/notification'
-import { parseTime } from '@/utils'
-import { exportFileFromJson } from '@/utils/ADempiere/exportUtil.js'
-export default defineComponent({
-  name: 'AccountingFact',
-
-  components: {
-    FieldDefinition
-  },
-
-  props: {
-    allTabsList: {
-      type: Array,
-      default: () => []
-    },
-    containerUuid: {
-      type: String,
-      default: () => ''
-    },
-    tableName: {
-      type: String,
-      default: () => ''
-    },
-    recordId: {
-      type: Number,
-      default: () => 0
-    },
-    recordUuid: {
-      type: String,
-      default: () => ''
-    }
-  },
-
-  setup(props) {
-    const ACCOUTING_FACT_FORM = 'Accouting-Fact-Form'
-    // Refs
-    const tableData = ref([])
-    const metadataList = ref([])
-    const isLoadingDataTable = ref(false)
-    const isLoadingFields = ref(false)
-    const isLoadingRePost = ref(false)
-    const force = ref(false)
-
-    const displayDocumentInformation = ref(false)
-    const displaySourceInformation = ref(false)
-    const displayQuantity = ref(false)
-    const showAllColumns = ref(false)
-    const showMinimalistView = ref(true)
-    const isLoadingTable = ref(false)
-
-    const accoutingSchemas = ref('')
-    const listAccouting = ref('')
-
-    const postingType = ref('')
-    const listPosting = ref([])
-
-    // Computed
-    const uuidForm = computed(() => {
-      return ACCOUTING_FACT_FORM + '_' + props.containerUuid
-    })
-
-    const accoutingFilters = computed(() => {
-      return store.getters.getValuesView({
-        containerUuid: uuidForm.value,
-        format: 'array'
-      }).filter(attribute => {
-        return !isEmptyValue(attribute.value) &&
-          !(attribute.columnName.startsWith(DISPLAY_COLUMN_PREFIX) ||
-          attribute.columnName.endsWith(UNIVERSALLY_UNIQUE_IDENTIFIER_COLUMN_SUFFIX))
-      })
-    })
-
-    const showContainerInfo = computed(() => {
-      return store.getters.getShowLogs
-    })
-
-    const headerAccounting = computed(() => {
-      let header = []
-      if (showAllColumns.value) return heardList
-      if (showMinimalistView.value) return heardList.filter(list => list.default)
-      switch (true) {
-        case (displayDocumentInformation.value && displaySourceInformation.value && !displayQuantity.value):
-          header = heardList.filter(list => list.default || list.displayDocumentInformation || list.displaySourceInformation)
-          break
-        case (displayDocumentInformation.value && displayQuantity.value && !displaySourceInformation.value):
-          header = heardList.filter(list => list.default || list.displayDocumentInformation || list.displayQuantity)
-          break
-        case (displaySourceInformation.value && displayQuantity.value && !displayDocumentInformation.value):
-          header = heardList.filter(list => list.default || list.displaySourceInformation || list.displayQuantity)
-          break
-        case (displaySourceInformation.value && displayQuantity.value && displayDocumentInformation.value):
-          header = heardList.filter(list => list.default || list.displaySourceInformation || list.displayQuantity)
-          break
-        case (!displayDocumentInformation.value && !displayQuantity.value && !displaySourceInformation.value):
-          header = heardList.filter(list => list.default || list.displayDocumentInformation)
-          break
-        case (displayDocumentInformation.value && !displayQuantity.value && !displaySourceInformation.value):
-          header = heardList.filter(list => list.default || list.displayDocumentInformation)
-          break
-        case (displaySourceInformation.value && !displayDocumentInformation.value && !displayQuantity.value):
-          header = heardList.filter(list => list.default || list.displaySourceInformation)
-          break
-        case (displayQuantity.value && !displaySourceInformation.value && !displayDocumentInformation.value):
-          header = heardList.filter(list => list.default || list.displayQuantity)
-          break
-        case (!displaySourceInformation.value && !displayQuantity.value && !displayDocumentInformation.value):
-          header = heardList.filter(list => list.default)
-          break
-      }
-      return header
-    })
-
-    // Function
-
-    function listAccoutingSchemas(isFind) {
-      if (!isFind) return
-      listAccoutingSchemasRequest({
-        searchValue: accoutingSchemas.value
-      })
-        .then(response => {
-          const { records } = response
-          // let list = records
-          listAccouting.value = records
-          listAccouting.value = records.map(list => {
-            const { KeyColumn, UUID, DisplayColumn } = list.values
-            return {
-              UUID,
-              KeyColumn,
-              DisplayColumn
-            }
-          })
-        })
-    }
-
-    function listPostingTypes(isFind) {
-      if (!isFind) return
-      listPostingTypesRequest({
-        searchValue: postingType.value
-      })
-        .then(response => {
-          const { records } = response
-          // let list = records
-          listPosting.value = records.map(list => {
-            const { KeyColumn, UUID, DisplayColumn } = list.values
-            return {
-              UUID,
-              KeyColumn,
-              DisplayColumn
-            }
-          })
-        })
-    }
-
-    function setFieldsList() {
-      const list = []
-      fieldsList.forEach(element => {
-        createFieldFromDictionary(element)
-          .then(responseField => {
-            list.push({
-              ...responseField,
-              isReadOnly: false,
-              containerUuid: uuidForm.value
-            })
-          }).catch(error => {
-            console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-          })
-          .finally(() => {
-            metadataList.value = list
-            isLoadingFields.value = true
-          })
-      })
-    }
-
-    function findAccountingFacts() {
-      if (isEmptyValue(accoutingSchemas.value)) {
-        // showMessage({
-        //   message: lang.t('notifications.mandatoryFieldMissing') + 'C_AcctSchema_ID',
-        //   type: 'info'
-        // })
-        return
-      }
-
-      const accoutingSchemaUuid = store.getters.getValueOfField({
-        containerUuid: uuidForm.value,
-        columnName: 'C_AcctSchema_ID_UUID'
-      })
-
-      isLoadingDataTable.value = true
-      requestAccountingFacts({
-        accoutingSchemaId: accoutingSchemas.value,
-        postingType: postingType.value,
-        accoutingSchemaUuid,
-        tableName: props.tableName,
-        recordId: props.recordId,
-        recordUuid: props.recordUuid,
-        filters: []
-      })
-        .then(response => {
-          const recordsList = response.recordsList.map(record => {
-            const { id, uuid, tableName, attributes } = record
-            return {
-              ...attributes,
-              DateAcct: formatDate({ value: attributes.DateAcct }),
-              id,
-              uuid,
-              tableName
-            }
-          })
-          tableData.value = recordsList
-        })
-        .catch(error => {
-          console.warn(`LookupFactory: Get Accounting Facts From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-        .finally(() => {
-          isLoadingDataTable.value = false
-        })
-    }
-
-    function clearData() {
-      tableData.value = []
-      store.commit('updateValuesOfContainer', {
-        containerUuid: uuidForm.value,
-        attributes: [
-          {
-            columnName: 'C_AcctSchema_ID',
-            value: undefined
-          },
-          {
-            columnName: 'C_AcctSchema_ID_UUID',
-            value: undefined
-          },
-          {
-            columnName: 'DisplayColumn_C_AcctSchema_ID',
-            value: undefined
-          },
-          {
-            columnName: 'PostingType',
-            value: undefined
-          },
-          {
-            columnName: 'PostingType_UUID',
-            value: undefined
-          },
-          {
-            columnName: 'DisplayColumn_PostingType',
-            value: undefined
-          }
-        ]
-      })
-    }
-
-    function rePost() {
-      isLoadingRePost.value = true
-      requestStartRePost({
-        tableName: props.tableName,
-        recordId: props.recordId,
-        recordUuid: props.recordUuid,
-        isForce: force.value
-      })
-        .then(response => {
-          if (!isEmptyValue(response.errorMsg)) {
-            showMessage({
-              message: response.errorMsg,
-              type: 'error'
-            })
-          }
-        })
-        .catch(error => {
-          console.warn(`LookupFactory: Get Start Re-Post Facts From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-        .finally(() => {
-          isLoadingRePost.value = false
-          findAccountingFacts(accoutingFilters.value)
-        })
-    }
-
-    function handleDisplayColumn(displayColumn) {
-      isLoadingDataTable.value = true
-      setTimeout(() => {
-        isLoadingDataTable.value = false
-      }, 1000)
-      if (displayColumn === 'displayAll') {
-        showAllColumns.value = true
-        displayDocumentInformation.value = false
-        displaySourceInformation.value = false
-        displayQuantity.value = false
-        showMinimalistView.value = false
-        return
-      }
-      if (displayColumn === 'showMinimalistView') {
-        displayDocumentInformation.value = false
-        displaySourceInformation.value = false
-        displayQuantity.value = false
-        showAllColumns.value = false
-        showMinimalistView.value = true
-        return
-      }
-      switch (displayColumn) {
-        case 'displayDocumentInformation':
-          // displaySourceInformation.value = false
-          // displayQuantity.value = false
-          showAllColumns.value = false
-          showMinimalistView.value = false
-          displayDocumentInformation.value = !displayDocumentInformation.value
-          break
-        case 'displaySourceInformation':
-          displaySourceInformation.value = !displaySourceInformation.value
-          // displayDocumentInformation.value = false
-          // displayQuantity.value = false
-          showAllColumns.value = false
-          showMinimalistView.value = false
-          break
-        case 'displayQuantity':
-          // displayDocumentInformation.value = false
-          // displaySourceInformation.value = false
-          showAllColumns.value = false
-          showMinimalistView.value = false
-          displayQuantity.value = !displayQuantity.value
-          break
-      }
-    }
-
-    function exportAccounting() {
-      const fileName = listAccouting.value.find(list => list.KeyColumn === accoutingSchemas.value).DisplayColumn
-      exportFileFromJson({
-        header: headerAccounting.value.map(a => a.label),
-        data: formatJson(headerAccounting.value.map(a => a.columnName), tableData.value),
-        fileName,
-        bookType: 'xlsx'
-      })
-    }
-
-    function formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
-    }
-
-    if (isEmptyValue(accoutingSchemas.value)) {
-      const globalAccoutingSchemaId = computed(() => {
-        return store.getters.getSessionContext({
-          columnName: '$C_AcctSchema_ID'
-        })
-      })
-      listAccoutingSchemas(true)
-      accoutingSchemas.value = globalAccoutingSchemaId.value
-    }
-
-    // Watch
-    watch(accoutingSchemas, (newValue) => {
-      findAccountingFacts(newValue)
-    })
-    watch(postingType, (newValue) => {
-      findAccountingFacts(newValue)
-    })
-    watch(showContainerInfo, (newValue) => {
-      clearData()
-    })
-
-    if (!isLoadingFields.value) {
-      setFieldsList({})
-    }
-
-    function refreshAccount() {
-      findAccountingFacts(accoutingFilters.value)
-    }
-    findAccountingFacts(accoutingFilters.value)
-
-    return {
-      // ref
-      tableData,
-      isLoadingFields,
-      isLoadingDataTable,
-      isLoadingRePost,
-      metadataList,
-      isLoadingTable,
-      force,
-      accoutingSchemas,
-      listAccouting,
-      postingType,
-      listPosting,
-      //
-      displayDocumentInformation,
-      displaySourceInformation,
-      displayQuantity,
-      showMinimalistView,
-      showAllColumns,
-      //
-      containerManager: {
-        ...containerManagerForm,
-        getDefaultValue: containerManagerWindow.getDefaultValue
-      },
-      heardList,
-      headerAccounting,
-      // computed
-      uuidForm,
-      showContainerInfo,
-      // methods
-      setFieldsList,
-      clearData,
-      findAccountingFacts,
-      refreshAccount,
-      rePost,
-      handleDisplayColumn,
-      listAccoutingSchemas,
-      listPostingTypes,
-      exportAccounting
-    }
-  }
-
-})
-</script>
-
-<style scoped lang="scss">
-.fields-display-accounting {
-  float: right  ;
-  position: relative;
-  color: #606266;
-  font-size: 16px;
-  /* float: right; */
-  padding-left: 5px;
-}
-</style>
diff --git a/src/components/ADempiere/PanelInfo/index.vue b/src/components/ADempiere/PanelInfo/index.vue
index ed7df81461a..57b66617287 100644
--- a/src/components/ADempiere/PanelInfo/index.vue
+++ b/src/components/ADempiere/PanelInfo/index.vue
@@ -67,7 +67,7 @@ import language from '@/lang'
 import store from '@/store'
 
 // Components and Mixins
-import Accounting from './Component/Accounting/index.vue'
+import AcctViewer from '@/components/ADempiere/Form/AcctViewer'
 import AttachmentManager from './Component/AttachmentManager/index.vue'
 import RecordLogs from './Component/RecordLogs/index.vue'
 import recordIssues from './Component/RecordIssues/index.vue'
@@ -90,7 +90,7 @@ export default defineComponent({
   name: 'ContainerInfo',
 
   components: {
-    Accounting,
+    AcctViewer,
     AttachmentManager,
     RecordLogs,
     RecordNotes,
@@ -210,7 +210,7 @@ export default defineComponent({
           svg: true,
           isLoading: false,
           iconClass: 'balance',
-          component: () => import('./Component/Accounting/index.vue')
+          component: AcctViewer // () => import('@/components/ADempiere/Form/AcctViewer')
         },
         {
           name: 'listProductStorage',
diff --git a/src/lang/ADempiere/en/component/calendar.js b/src/lang/ADempiere/en/component/calendar.js
new file mode 100644
index 00000000000..4c13387e9b1
--- /dev/null
+++ b/src/lang/ADempiere/en/component/calendar.js
@@ -0,0 +1,26 @@
+/**
+ * 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/>.
+ */
+
+const calendar = {
+  allEvents: 'All Events',
+  calendar: 'Calendar',
+  deleteEventConfirm: 'Are you sure you want to delete the event?',
+  titleNewEvent: 'Please enter a new title for your event'
+}
+
+export default calendar
diff --git a/src/lang/ADempiere/en/component/index.js b/src/lang/ADempiere/en/component/index.js
index 9656bbbb89c..c6e25200df4 100644
--- a/src/lang/ADempiere/en/component/index.js
+++ b/src/lang/ADempiere/en/component/index.js
@@ -17,6 +17,7 @@
  */
 
 import attachment from './attachment'
+import calendar from './calendar'
 import dashboard from './dashboard'
 import date from './date'
 import sequenceSort from './sequenceSort'
@@ -24,6 +25,7 @@ import tree from './tree'
 
 export default {
   attachment,
+  calendar,
   dashboard,
   date,
   sequenceSort,
diff --git a/src/lang/ADempiere/en/form/accounting.js b/src/lang/ADempiere/en/form/accounting.js
deleted file mode 100644
index 2445feab8f7..00000000000
--- a/src/lang/ADempiere/en/form/accounting.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanches
-// 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 accounting = {
-  organization: 'Organization',
-  account: 'Account',
-  debitPosted: 'Posted Debit',
-  PostedCredit: 'Posted Credit',
-  product: 'Product',
-  businessPartner: 'Business Partner',
-  Project: 'Project',
-  Campaign: 'Campaign',
-  accountingDate: 'AccountingDate',
-  period: 'Period',
-  um: 'Unit of Measurement',
-  quantity: 'Quantity',
-  table: 'Table',
-  recordId: 'Record ID',
-  rePosAccounting: 'Re-Account',
-  currency: 'Currency',
-  transactionDate: 'Transaction Date',
-  force: 'Force',
-  creditSource: 'Credit Source',
-  debitSource: 'Debit Source',
-  rate: 'Rate',
-  description: 'Description',
-  typeApplication: 'Application Type'
-}
-
-export default accounting
diff --git a/src/lang/ADempiere/en/form/accountingViewer.js b/src/lang/ADempiere/en/form/accountingViewer.js
new file mode 100644
index 00000000000..5329a19d94c
--- /dev/null
+++ b/src/lang/ADempiere/en/form/accountingViewer.js
@@ -0,0 +1,63 @@
+/**
+ * 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 accountingViewer = {
+  account: 'Account',
+  accountDate: 'Account Date',
+  accountedCredit: 'Accoutend Credit',
+  accountedDebit: 'Accoutend Debit',
+  accountingSchema: 'Account Schema',
+  activity: 'Activity',
+  businessPartner: 'Business Partner',
+  campaign: 'Campaign',
+  currency: 'Currency',
+  description: 'Description',
+  force: 'Force',
+  locationFrom: 'Location From',
+  locationTo: 'Location To',
+  organization: 'Organization',
+  organizationTransaction: 'Trx Organization',
+  postingType: 'Posting Type',
+  period: 'Period',
+  product: 'Product',
+  project: 'Project',
+  quantity: 'Quantity',
+  rate: 'Rate',
+  recordId: 'Record ID',
+  rePosAccounting: 'Re-Account',
+  salesRegion: 'Sales Region',
+  sourceCredit: 'Source Credit',
+  sourceDebit: 'Source Debit',
+  subAccount: 'Sub Account',
+  tableRecord: 'Table',
+  table: {
+    displayDocumentInfo: 'Display Document Info',
+    displaySourceInfo: 'Display Source Info',
+    displayQuantity: 'Display Quantity'
+  },
+  transactionDate: 'Transaction Date',
+  uom: 'UOM',
+  userElement1: 'User Element 1',
+  userElement2: 'User Element 2',
+  userList1: 'User List 1',
+  userList2: 'User List 2',
+  userList3: 'User List 3',
+  userList4: 'User List 4'
+}
+
+export default accountingViewer
diff --git a/src/lang/ADempiere/en/form/index.js b/src/lang/ADempiere/en/form/index.js
index 2d9bda1a5c1..3bf1d2fffa8 100644
--- a/src/lang/ADempiere/en/form/index.js
+++ b/src/lang/ADempiere/en/form/index.js
@@ -16,6 +16,7 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import accountingViewer from './accountingViewer'
 import mnemonicCommand from './mnemonicCommand.js'
 import expressShipment from './expressShipment.js'
 import expressMovement from './expressMovement.js'
@@ -31,6 +32,7 @@ import match from './match'
 import tasks from './tasks'
 
 export default {
+  accountingViewer,
   workflowActivity,
   mnemonicCommand,
   expressShipment,
diff --git a/src/lang/ADempiere/en/index.js b/src/lang/ADempiere/en/index.js
index 51603d7f514..3cbae0bdecf 100644
--- a/src/lang/ADempiere/en/index.js
+++ b/src/lang/ADempiere/en/index.js
@@ -41,7 +41,6 @@ import operators from './operators.ts'
  */
 import actionNotice from './form/actionNotice'
 import payrollActionNotice from './form/payrollActionNotice'
-import accounting from './form/accounting'
 import pointOfSales from './form/pointOfSales'
 import listStoreProduct from './form/listStoreProduct'
 import timeControl from './form/timeControl'
@@ -65,7 +64,6 @@ export default {
   actionNotice,
   payrollActionNotice,
   pointOfSales,
-  accounting,
   listStoreProduct,
   timeControl,
   VPayPrint,
@@ -152,7 +150,8 @@ export default {
     searchRecord: 'Search Record',
     fixedleItems: 'Fixed Columns',
     switchActiveText: 'Yes',
-    switchInactiveText: 'Not'
+    switchInactiveText: 'Not',
+    todoList: 'Todo List'
   },
   grid: {
     recordAccess: {
diff --git a/src/lang/ADempiere/es/component/calendar.js b/src/lang/ADempiere/es/component/calendar.js
new file mode 100644
index 00000000000..59400e92219
--- /dev/null
+++ b/src/lang/ADempiere/es/component/calendar.js
@@ -0,0 +1,26 @@
+/**
+ * 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/>.
+ */
+
+const calendar = {
+  allEvents: 'Todos los Eventos',
+  calendar: 'Calendario',
+  deleteEventConfirm: '¿Seguro de que quiere eliminar el evento?',
+  titleNewEvent: 'Por favor ingresa un nuevo título para tu evento'
+}
+
+export default calendar
diff --git a/src/lang/ADempiere/es/component/index.js b/src/lang/ADempiere/es/component/index.js
index 9656bbbb89c..c6e25200df4 100644
--- a/src/lang/ADempiere/es/component/index.js
+++ b/src/lang/ADempiere/es/component/index.js
@@ -17,6 +17,7 @@
  */
 
 import attachment from './attachment'
+import calendar from './calendar'
 import dashboard from './dashboard'
 import date from './date'
 import sequenceSort from './sequenceSort'
@@ -24,6 +25,7 @@ import tree from './tree'
 
 export default {
   attachment,
+  calendar,
   dashboard,
   date,
   sequenceSort,
diff --git a/src/lang/ADempiere/es/form/accounting.js b/src/lang/ADempiere/es/form/accounting.js
deleted file mode 100644
index 731208db37f..00000000000
--- a/src/lang/ADempiere/es/form/accounting.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanches
-// 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 accounting = {
-  organization: 'Organización',
-  account: 'Cuenta',
-  debitPosted: 'Débito Contabilizado',
-  PostedCredit: 'Crédito Contabilizado',
-  product: 'Producto',
-  businessPartner: 'Socio del Negocio',
-  Project: 'Proyecto',
-  Campaign: 'Campaña',
-  accountingDate: 'Fecha Contable',
-  period: 'Período',
-  um: 'Unidad de Medida',
-  quantity: 'Cantidad',
-  table: 'Tabla',
-  recordId: 'ID del Registro',
-  rePosAccounting: 'Re-Contabilizar',
-  currency: 'Moneda',
-  transactionDate: 'Fecha de la Transacción',
-  force: 'Forzar',
-  creditSource: 'Crédito Fuente',
-  debitSource: 'Débito Fuente',
-  rate: 'Tasa',
-  description: 'Descripción',
-  typeApplication: 'Tipo de Aplicación'
-}
-
-export default accounting
diff --git a/src/lang/ADempiere/es/form/accountingViewer.js b/src/lang/ADempiere/es/form/accountingViewer.js
new file mode 100644
index 00000000000..434afc831a4
--- /dev/null
+++ b/src/lang/ADempiere/es/form/accountingViewer.js
@@ -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): 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 accountingViewer = {
+  account: 'Cuenta',
+  accountDate: 'Fecha Contable',
+  accountedCredit: 'Crédito Contabilizado',
+  accountedDebit: 'Débito Contabilizado',
+  accountingSchema: 'Esquema Contable',
+  activity: 'Actividad',
+  businessPartner: 'Socio del Negocio',
+  campaign: 'Campaña',
+  currency: 'Moneda',
+  description: 'Descripción',
+  force: 'Forzar',
+  locationFrom: 'Dirección Desde',
+  locationTo: 'Dirección A',
+  organization: 'Organización',
+  organizationTransaction: 'Organización de Transacción',
+  period: 'Período',
+  postingType: 'Tipo de Aplicación',
+  product: 'Producto',
+  project: 'Proyecto',
+  quantity: 'Cantidad',
+  rate: 'Tasa',
+  recordId: 'ID del Registro',
+  rePosAccounting: 'Re-Contabilizar',
+  salesRegion: 'Región de Ventas',
+  sourceCredit: 'Crédito Fuente',
+  sourceDebit: 'Débito Fuente',
+  subAccount: 'Sub Cuenta',
+  tableRecord: 'Tabla',
+  table: {
+    displayDocumentInfo: 'Mostrar Información de Documento',
+    displaySourceInfo: 'Mostrar Información Fuente',
+    displayQuantity: 'Mostrar Cantidad'
+  },
+  transactionDate: 'Fecha de la Transacción',
+  uom: 'UM',
+  userElement1: 'Elemento de Usuario 1',
+  userElement2: 'Elemento de Usuario 1',
+  userList1: 'Lista Usuario 1',
+  userList2: 'Lista Usuario 2',
+  userList3: 'Lista Usuario 3',
+  userList4: 'Lista Usuario 4'
+}
+
+export default accountingViewer
diff --git a/src/lang/ADempiere/es/form/index.js b/src/lang/ADempiere/es/form/index.js
index 2d9bda1a5c1..3bf1d2fffa8 100644
--- a/src/lang/ADempiere/es/form/index.js
+++ b/src/lang/ADempiere/es/form/index.js
@@ -16,6 +16,7 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import accountingViewer from './accountingViewer'
 import mnemonicCommand from './mnemonicCommand.js'
 import expressShipment from './expressShipment.js'
 import expressMovement from './expressMovement.js'
@@ -31,6 +32,7 @@ import match from './match'
 import tasks from './tasks'
 
 export default {
+  accountingViewer,
   workflowActivity,
   mnemonicCommand,
   expressShipment,
diff --git a/src/lang/ADempiere/es/index.js b/src/lang/ADempiere/es/index.js
index c10f7b6b32a..0abaeb85afe 100644
--- a/src/lang/ADempiere/es/index.js
+++ b/src/lang/ADempiere/es/index.js
@@ -41,7 +41,6 @@ import operators from './operators.ts'
  */
 import actionNotice from './form/actionNotice'
 import payrollActionNotice from './form/payrollActionNotice'
-import accounting from './form/accounting'
 import pointOfSales from './form/pointOfSales'
 import listStoreProduct from './form/listStoreProduct'
 import timeControl from './form/timeControl'
@@ -66,7 +65,6 @@ export default {
   actionNotice,
   payrollActionNotice,
   pointOfSales,
-  accounting,
   listStoreProduct,
   report,
   workflow,
@@ -153,7 +151,8 @@ export default {
     searchRecord: 'Buscar Registro',
     fixedleItems: 'Columnas Fijas',
     switchActiveText: 'Si',
-    switchInactiveText: 'No'
+    switchInactiveText: 'No',
+    todoList: 'Por Hacer'
   },
   grid: {
     recordAccess: {
diff --git a/src/lang/index.js b/src/lang/index.js
index 03afa74cb51..b14ea1fc64c 100644
--- a/src/lang/index.js
+++ b/src/lang/index.js
@@ -26,6 +26,19 @@ const dateTimeFormats = {
       minute: '2-digit',
       second: '2-digit',
       hour12: false
+    },
+    short: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    },
+    onlyDate: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
     }
   },
   'es': {
@@ -38,6 +51,19 @@ const dateTimeFormats = {
       minute: '2-digit',
       second: '2-digit',
       hour12: true
+    },
+    short: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    },
+    onlyDate: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
     }
   }
 }
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index 656f8e31cf1..afe517f4f1d 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="item-wrapper">
     <el-col :span="3" :style="iconMargin">
-      <i v-if="icon.includes('el-icon')" class="icon sub-el-icon" />
+      <i v-if="icon.includes('el-icon')" :class="'icon sub-el-icon ' + icon" />
       <svg-icon v-else :icon-class="icon" />
     </el-col>
     <el-col :span="21">
diff --git a/src/router/modules/ADempiere/menu.js b/src/router/modules/ADempiere/menu.js
index 189df0afbc6..1eb0dba8fb6 100644
--- a/src/router/modules/ADempiere/menu.js
+++ b/src/router/modules/ADempiere/menu.js
@@ -29,10 +29,6 @@ import { requestMenu } from '@/api/ADempiere/security/index.ts'
 import { convertAction } from '@/utils/ADempiere/dictionaryUtils.js'
 import { getCurrentClient, getCurrentOrganization, getCurrentRole } from '@/utils/ADempiere/auth'
 
-export const HIDDEN_ROUTES = [
-  '/ProductInfo'
-]
-
 /**
  * Get Menu from server
  * @author Elsio Sanchez <elsiosanches@gmail.com>
@@ -210,18 +206,19 @@ function getRouteFromMenuItem({ menu, clientId, roleId, organizationId }) {
  * @returns {object} routes with hidden/show
  */
 function hidenStactiRoutes({ staticRoutes, permiseRole }) {
-  const { isAllowInfoProduct } = permiseRole
-  if (!isAllowInfoProduct) {
-    // does not change the hidden visibility of ProductInfo
+  if (!permiseRole) {
     return staticRoutes
   }
 
   return staticRoutes.map(route => {
-    if (HIDDEN_ROUTES.includes(route.path)) {
+    if (route.validateToEnable) {
+      const isShow = route.validateToEnable({
+        role: permiseRole
+      })
       return {
         ...route,
         // is hidden by default, change to be visible
-        hidden: false
+        hidden: !isShow
       }
     }
     return {
diff --git a/src/router/modules/ADempiere/staticRoutes.js b/src/router/modules/ADempiere/staticRoutes.js
index cac887a6abd..daa0b65fb18 100644
--- a/src/router/modules/ADempiere/staticRoutes.js
+++ b/src/router/modules/ADempiere/staticRoutes.js
@@ -30,6 +30,52 @@ const staticRoutes = [
     hidden: true
   },
 
+  {
+    path: '/calendar',
+    component: Layout,
+    hidden: false,
+    children: [
+      {
+        path: '/calendar',
+        component: () => import('@/views/ADempiere/CalendarView'),
+        name: 'calendar',
+        meta: {
+          title: language.t('component.calendar.calendar'),
+          fileName: 'AcctViewer',
+          icon: 'el-icon-date',
+          noCache: true,
+          isIndex: true
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/acct-viewer',
+    component: Layout,
+    hidden: false,
+    validateToEnable: ({ role }) => {
+      if (!role) {
+        return false
+      }
+      return Boolean(role.isAllowInfoAccount)
+    },
+    children: [
+      {
+        path: '/acct-viewer',
+        component: () => import('@/views/ADempiere/Form'),
+        name: 'acct-viewer',
+        meta: {
+          title: 'Acctouting Viewer',
+          fileName: 'AcctViewer',
+          icon: 'balance',
+          noCache: true,
+          isIndex: true
+        }
+      }
+    ]
+  },
+
   {
     path: '/ProcessActivity',
     component: Layout,
@@ -158,6 +204,12 @@ const staticRoutes = [
     path: '/ProductInfo',
     component: Layout,
     hidden: false,
+    validateToEnable: ({ role }) => {
+      if (!role) {
+        return false
+      }
+      return Boolean(role.isAllowInfoProduct)
+    },
     children: [
       {
         path: '/ProductInfo',
diff --git a/src/store/modules/ADempiere/form/AcctViewer.js b/src/store/modules/ADempiere/form/AcctViewer.js
new file mode 100644
index 00000000000..677923ea4c5
--- /dev/null
+++ b/src/store/modules/ADempiere/form/AcctViewer.js
@@ -0,0 +1,266 @@
+/**
+ * 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/>.
+ */
+
+// API Request Methods
+import {
+  requestListAccoutingSchemas,
+  requestPostingTypesList,
+  requestListOrganizations,
+  requestAccountingFacts
+} from '@/api/ADempiere/form/accouting.js'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import { formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
+import { formatQuantity } from '@/utils/ADempiere/formatValue/numberFormat'
+
+const initState = {
+  currentAccoutingSchemaId: -1,
+  accountingShemasList: [],
+  currentPostingTypeValue: '',
+  postingTypesList: [],
+  currentAccoutingOrganizationId: ' ',
+  accountingOrganizationsList: [],
+  isLoadingAccoutingRecords: false,
+  accoutingRecordsList: [],
+  // user interface
+  isDisplayDocumentInfo: false,
+  isDisplaySourceInfo: false,
+  isDisplayQuantity: false
+}
+
+const acctViewer = {
+  state: initState,
+
+  mutations: {
+    setAccountSchemaId(state, id) {
+      state.currentAccoutingSchemaId = id
+    },
+    setAccountSchemasList(state, records = []) {
+      state.accountingShemasList = records
+    },
+    setPostingTypeValue(state, value) {
+      state.currentPostingTypeValue = value
+    },
+    setPostingTypesList(state, records = []) {
+      state.postingTypesList = records
+    },
+    setAccountingOrganizationId(state, id) {
+      state.currentAccoutingOrganizationId = id
+    },
+    setAccountingOrganizationsList(state, records = []) {
+      state.accountingOrganizationsList = records
+    },
+    setIsLoadingAccoutingRecords(state, isLoading = false) {
+      state.isLoadingAccoutingRecords = isLoading
+    },
+    setAccoutingRecordsList(state, records = []) {
+      state.accoutingRecordsList = records
+    },
+    setIsDisplayDocumentInfo(state, isShow = false) {
+      state.isDisplayDocumentInfo = isShow
+    },
+    setIsDisplaySourceInfo(state, isShow = false) {
+      state.isDisplaySourceInfo = isShow
+    },
+    setIsDisplayQuantity(state, isShow = false) {
+      state.isDisplayQuantity = isShow
+    }
+  },
+
+  actions: {
+    getAccoutingSchemasFromServer({ commit }, {
+      searchValue
+    }) {
+      return new Promise(resolve => {
+        requestListAccoutingSchemas({
+          searchValue
+        })
+          .then(response => {
+            const { records } = response
+            // let list = records
+            const recordsList = records.map(row => {
+              const { KeyColumn, UUID, DisplayColumn } = row.values
+              return {
+                UUID,
+                KeyColumn,
+                DisplayColumn
+              }
+            })
+
+            commit('setAccountSchemasList', recordsList)
+            resolve(recordsList)
+          })
+      })
+    },
+
+    getPostingTypesFromServer({ commit }, {
+      searchValue
+    }) {
+      return new Promise(resolve => {
+        requestPostingTypesList({
+          searchValue
+        })
+          .then(response => {
+            const { records } = response
+            // let list = records
+            const recordsList = records.map(row => {
+              const { KeyColumn, UUID, DisplayColumn } = row.values
+              return {
+                UUID,
+                KeyColumn,
+                DisplayColumn
+              }
+            })
+
+            commit('setPostingTypesList', recordsList)
+            resolve(recordsList)
+          })
+      })
+    },
+
+    getAccoutingOrganizationsFromServer({ commit }, {
+      searchValue
+    }) {
+      return new Promise(resolve => {
+        requestListOrganizations({
+          searchValue
+        })
+          .then(response => {
+            const { records } = response
+            // let list = records
+            const recordsList = records.map(row => {
+              const { KeyColumn, UUID, DisplayColumn } = row.values
+              return {
+                UUID,
+                KeyColumn,
+                DisplayColumn
+              }
+            })
+
+            commit('setAccountingOrganizationsList', recordsList)
+            resolve(recordsList)
+          })
+      })
+    },
+
+    getAccoutingFactsFromServer({ commit, getters }, {
+      searchValue,
+      tableName,
+      recordUuid,
+      recordId
+    }) {
+      const accoutingSchemaId = getters.getCurrentStoredAccoutingSchemaId
+      if (isEmptyValue(accoutingSchemaId)) {
+        return
+      }
+      return new Promise(resolve => {
+        commit('setIsLoadingAccoutingRecords', true)
+
+        requestAccountingFacts({
+          accoutingSchemaId,
+          postingType: getters.getCurrentStoredPostingTypeValue,
+          tableName,
+          recordId,
+          recordUuid,
+          searchValue,
+          filters: []
+        })
+          .then(response => {
+            const recordsList = response.recordsList.map(row => {
+              const { id, uuid, tableName, attributes } = row
+
+              let rate = attributes.AmtSourceDr + attributes.AmtSourceCr
+              if (rate !== 0) {
+                rate = (attributes.AmtAcctDr + attributes.AmtAcctCr) / (attributes.AmtSourceDr + attributes.AmtSourceCr)
+              }
+              return {
+                ...attributes,
+                AmtAcctDr: formatQuantity({
+                  value: attributes.AmtAcctDr
+                }),
+                AmtAcctCr: formatQuantity({
+                  value: attributes.AmtAcctCr
+                }),
+                DateAcct: formatDate({
+                  value: attributes.DateAcct
+                }),
+                DateTrx: formatDate({
+                  value: attributes.DateTrx
+                }),
+                Qty: formatQuantity({
+                  value: attributes.Qty
+                }),
+                Rate: formatQuantity({
+                  value: rate
+                }),
+                id,
+                uuid,
+                tableName
+              }
+            })
+
+            commit('setAccoutingRecordsList', recordsList)
+            resolve(recordsList)
+          })
+          .finally(() => {
+            commit('setIsLoadingAccoutingRecords', false)
+          })
+      })
+    }
+  },
+
+  getters: {
+    getCurrentStoredAccoutingSchemaId: (state) => {
+      return state.currentAccoutingSchemaId
+    },
+    getStoredAccoutingShemasList: (state) => {
+      return state.accountingShemasList
+    },
+    getCurrentStoredPostingTypeValue: (state) => {
+      return state.currentPostingTypeValue
+    },
+    getStoredPostingTypesList: (state) => {
+      return state.postingTypesList
+    },
+    getCurrentStoredAccoutingOrganizationId: (state) => {
+      return state.currentAccoutingOrganizationId
+    },
+    getStoredAccoutingOrganizationsList: (state) => {
+      return state.accountingOrganizationsList
+    },
+    getIsLoadingAccoutingRecords: (state) => {
+      return state.isLoadingAccoutingRecords
+    },
+    getAccoutingRecordsList: (state) => {
+      return state.accoutingRecordsList
+    },
+
+    getIsDisplayDocumentInfo: (state) => {
+      return state.isDisplayDocumentInfo
+    },
+    getIsDisplaySourceInfo: (state) => {
+      return state.isDisplaySourceInfo
+    },
+    getIsDisplayQuantity: (state) => {
+      return state.isDisplayQuantity
+    }
+  }
+}
+
+export default acctViewer
diff --git a/src/store/modules/ADempiere/processManager.js b/src/store/modules/ADempiere/processManager.js
index edbf2080f60..7ebce8f92fe 100644
--- a/src/store/modules/ADempiere/processManager.js
+++ b/src/store/modules/ADempiere/processManager.js
@@ -201,6 +201,8 @@ const processManager = {
         requestRunProcess({
           uuid: containerUuid,
           parametersList,
+          // in browser
+          browserId: browserDefinition.id,
           // in window
           recordId,
           // TODO: Add support to tableSelectedId
diff --git a/src/store/modules/ADempiere/system.js b/src/store/modules/ADempiere/system.js
index dbf134d491e..7c85be40706 100644
--- a/src/store/modules/ADempiere/system.js
+++ b/src/store/modules/ADempiere/system.js
@@ -117,11 +117,15 @@ const system = {
     getLanguagesList: (state) => {
       return state.languagesList
     },
-    getCurrentLanguageDefinition: (state) => {
+    getCurrentLanguage: (state) => {
       let { language } = state.systemDefinition
       if (isEmptyValue(language)) {
         language = 'en_US'
       }
+      return language
+    },
+    getCurrentLanguageDefinition: (state, getters) => {
+      const language = getters.getCurrentLanguage
       return state.languagesList.find(definition => {
         return definition.language === language
       })
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index cc819bc36b6..2cadc4ba81e 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -20,6 +20,7 @@ import language from '@/lang'
 
 // Constants
 import { ORGANIZATION, WAREHOUSE } from '@/utils/ADempiere/constants/systemColumns'
+import { title } from '@/settings'
 
 // API Request Methods
 import {
@@ -704,12 +705,34 @@ const actions = {
     return new Promise(resolve => {
       systemInfo()
         .then(response => {
+          if (isEmptyValue(response)) {
+            resolve()
+            return
+          }
           const info = camelizeObjectKeys(response)
+          let systemName = title
+          if (!isEmptyValue(info.name)) {
+            systemName = info.name
+          }
           commit('setSystem', {
             ...info,
-            name: isEmptyValue(info.name) ? 'ADempiere' : info.name
+            name: systemName
           })
-          resolve(response)
+          // tab browser title
+          window.document.title = response.name
+
+          // tab browser favicon
+          if (isEmptyValue(info.logoUrl)) {
+            let link = document.querySelector("link[rel~='icon']")
+            if (!link) {
+              link = document.createElement('link')
+              link.rel = 'icon'
+              document.head.appendChild(link)
+            }
+            link.href = info.logoUrl
+          }
+
+          resolve(info)
         })
         .catch(error => {
           commit('setSystem', {})
diff --git a/src/styles/ADempiere/form.scss b/src/styles/ADempiere/form.scss
index ea7f453d49f..8eb52a864e6 100644
--- a/src/styles/ADempiere/form.scss
+++ b/src/styles/ADempiere/form.scss
@@ -1,6 +1,6 @@
 /**
  * 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
+ * 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
@@ -56,3 +56,18 @@ button.button-show-popover {
   }
 }
 
+.form-base {
+  /**
+   * Reduce the spacing between the form element and its label
+   */
+   .el-form-item__label {
+    padding-bottom: 0px !important;
+  }
+
+  /**
+   * To select element and input number
+   */
+  .el-form-item {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/ADempiere/index.scss b/src/styles/ADempiere/index.scss
index e6cdc2834fe..74aa1b088b5 100644
--- a/src/styles/ADempiere/index.scss
+++ b/src/styles/ADempiere/index.scss
@@ -1,6 +1,6 @@
 /**
  * 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
+ * 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
@@ -9,13 +9,14 @@
  *
  * 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
+ * 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/>.
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 @import './form.scss';
 @import './view.scss';
+@import './table.scss';
 @import './text.scss';
diff --git a/src/styles/ADempiere/table.scss b/src/styles/ADempiere/table.scss
new file mode 100644
index 00000000000..f30cf45a52e
--- /dev/null
+++ b/src/styles/ADempiere/table.scss
@@ -0,0 +1,24 @@
+/**
+ * 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/>.
+ */
+
+// used in cell type number
+.cell-align-right {
+  text-align: right !important;
+  width: 100%;
+  display: inline-block;
+}
diff --git a/src/styles/ADempiere/text.scss b/src/styles/ADempiere/text.scss
index fda9fef73b9..7cb1ea27cb7 100644
--- a/src/styles/ADempiere/text.scss
+++ b/src/styles/ADempiere/text.scss
@@ -1,19 +1,21 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
-// 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/>.
+/**
+ * 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/>.
+ */
 
 .justify-text {
   word-break: normal
-}
\ No newline at end of file
+}
diff --git a/src/utils/ADempiere/accoutingUtils.js b/src/utils/ADempiere/accoutingUtils.js
new file mode 100644
index 00000000000..10fb4877d4b
--- /dev/null
+++ b/src/utils/ADempiere/accoutingUtils.js
@@ -0,0 +1,147 @@
+/**
+ * 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 language from '@/lang'
+import store from '@/store'
+
+export const ACCOUTING_ELEMENT_COLUMNS = [
+  // {
+  //   elementType: 'OO',
+  //   columnName: 'AD_Org_ID',
+  //   name: language.t('form.accountingViewer.organization'),
+  //   isMandatory: true,
+  // },
+  // {
+  //   elementType: 'AC',
+  //   name: language.t('form.accountingViewer.account'),
+  //   columnName: 'Account_ID',
+  //   isMandatory: true
+  // },
+  {
+    elementType: 'PR',
+    columnName: 'M_Product_ID',
+    name: language.t('form.accountingViewer.product'),
+    isMandatory: false
+  },
+  {
+    elementType: 'BP',
+    columnName: 'C_BPartner_ID',
+    name: language.t('form.accountingViewer.businessPartner'),
+    isMandatory: false
+  },
+  {
+    elementType: 'PJ',
+    columnName: 'C_Project_ID',
+    name: language.t('form.accountingViewer.project'),
+    isMandatory: false
+  },
+  {
+    elementType: 'MC',
+    columnName: 'C_Campaign_ID',
+    name: language.t('form.accountingViewer.campaign'),
+    isMandatory: false
+  },
+  {
+    elementType: 'SR',
+    columnName: 'C_SalesRegion_ID',
+    name: language.t('form.accountingViewer.salesRegion'),
+    isMandatory: false
+  },
+  {
+    elementType: 'OT',
+    columnName: 'AD_OrgTrx_ID',
+    name: language.t('form.accountingViewer.organizationTransaction'),
+    isMandatory: false
+  },
+  {
+    elementType: 'LF',
+    columnName: 'C_LocFrom_ID',
+    name: language.t('form.accountingViewer.locationFrom'),
+    isMandatory: false
+  },
+  {
+    elementType: 'LT',
+    columnName: 'C_LocTo_ID',
+    name: language.t('form.accountingViewer.locationTo'),
+    isMandatory: false
+  },
+  {
+    elementType: 'U1',
+    columnName: 'User1_ID',
+    name: language.t('form.accountingViewer.userList1'),
+    isMandatory: false
+  },
+  {
+    elementType: 'U2',
+    columnName: 'User2_ID',
+    name: language.t('form.accountingViewer.userList2'),
+    isMandatory: false
+  },
+  {
+    elementType: 'AY',
+    columnName: 'C_Activity_ID',
+    name: language.t('form.accountingViewer.activity'),
+    isMandatory: false
+  },
+  {
+    elementType: 'SA',
+    columnName: 'C_SubAcct_ID',
+    name: language.t('form.accountingViewer.subAccount'),
+    isMandatory: false
+  },
+  {
+    elementType: 'X1',
+    columnName: 'UserElement1_ID',
+    name: language.t('form.accountingViewer.userElement1'),
+    isMandatory: false
+  },
+  {
+    elementType: 'X2',
+    columnName: 'UserElement2_ID',
+    name: language.t('form.accountingViewer.userElement2'),
+    isMandatory: false
+  },
+  {
+    elementType: 'U3',
+    columnName: 'User1_ID',
+    name: language.t('form.accountingViewer.userList3'),
+    isMandatory: false
+  },
+  {
+    elementType: 'U4',
+    columnName: 'User4_ID',
+    name: language.t('form.accountingViewer.userList4'),
+    isMandatory: false
+  }
+]
+
+const ACCOUTING_ELEMENT_PREFIX = '$Element_'
+
+export function getAvaliableAccountingElements() {
+  const availableAccoutingElements = ACCOUTING_ELEMENT_COLUMNS.filter(acctElemnt => {
+    const { elementType, isMandatory } = acctElemnt
+    if (isMandatory) {
+      return true
+    }
+    const isEnableContext = store.getters.getSessionContext({
+      columnName: ACCOUTING_ELEMENT_PREFIX + elementType
+    })
+    return Boolean(isEnableContext)
+  })
+  return availableAccoutingElements
+}
diff --git a/src/utils/ADempiere/formatValue/dateFormat.js b/src/utils/ADempiere/formatValue/dateFormat.js
index ba2b6e9c4cc..4d77b5e4628 100644
--- a/src/utils/ADempiere/formatValue/dateFormat.js
+++ b/src/utils/ADempiere/formatValue/dateFormat.js
@@ -1,18 +1,20 @@
-// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
-// Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
-// 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/>.
+/**
+ * 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 lang from '@/lang'
 import store from '@/store'
@@ -169,14 +171,51 @@ export function formatDateToSend(date) {
   return date.slice(0, 10)
 }
 
+/**
+ * Get valid Date object
+ * @param {number|string} value
+ */
+export function getValidDate(value) {
+  let date = value
+  if (isEmptyValue(date)) {
+    date = new Date()
+  } if (typeof value === 'string') {
+    // TODO: Verify it time zone
+    if (value.length <= 10) {
+      value += 'T00:00:00' // without time zone
+    }
+    date = new Date(value)
+  } else if (typeof value === 'number') {
+    date = new Date(value)
+  }
+  return date
+}
+
+/**
+ * Translate date value
+ * @param {number} value
+ * @param {string} format
+ * @returns {string}
+ */
+export function translateDate({ value, format = 'short' }) {
+  const date = getValidDate(value)
+
+  const language = store.getters.language
+  const translatedDate = lang.d(date, format, language)
+  return translatedDate
+}
+
 /**
  * Translate date by long value
+ * @deprecated use {@link #translateDate} instead
  * @param {number} value
  * @returns {string}
  */
 export function translateDateByLong(value) {
-  const language = store.getters.language
-  return lang.d(new Date(value), 'long', language)
+  return translateDate({
+    value: new Date(value),
+    format: 'long'
+  })
 }
 
 /**
@@ -202,19 +241,7 @@ export function changeTimeZone({
   if (isEmptyValue(timeZone)) {
     timeZone = getBrowserTimeZone()
   }
-
-  let date = value
-  if (isEmptyValue(date)) {
-    date = new Date()
-  } if (typeof value === 'string') {
-    // TODO: Verify it time zone
-    if (value.length <= 10) {
-      value += 'T00:00:00' // without time zone
-    }
-    date = new Date(value)
-  } else if (typeof value === 'number') {
-    date = new Date(value)
-  }
+  const date = getValidDate(value)
 
   return new Date(
     date.toLocaleString('en-US', {
@@ -236,19 +263,8 @@ export function timeFormat({
   if (isEmptyValue(timeZone)) {
     timeZone = getBrowserTimeZone()
   }
+  const date = getValidDate(value)
 
-  let date = value
-  if (isEmptyValue(date)) {
-    date = new Date()
-  } if (typeof value === 'string') {
-    // TODO: Verify it time zone
-    if (value.length <= 10) {
-      value += 'T00:00:00' // without time zone
-    }
-    date = new Date(value)
-  } else if (typeof value === 'number') {
-    date = new Date(value)
-  }
   return date.toLocaleString('en-US', {
     timeZone,
     hour: '2-digit',
diff --git a/src/views/ADempiere/CalendarView/event-utils.js b/src/views/ADempiere/CalendarView/event-utils.js
new file mode 100644
index 00000000000..ded3862ec87
--- /dev/null
+++ b/src/views/ADempiere/CalendarView/event-utils.js
@@ -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/>.
+ */
+
+let eventGuid = 0
+const todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
+
+export const INITIAL_EVENTS = [
+  {
+    id: createEventId(),
+    title: 'All-day event',
+    start: todayStr
+  },
+  // {
+  //   id: createEventId(),
+  //   title: 'Timed event',
+  //   start: todayStr + 'T12:00:00'
+  // },
+  {
+    id: 1234,
+    title: 'Governors - Full Paint',
+    start: '2023-10-01 13:00-:00',
+    end: '2023-10-01 15:00:00'
+  },
+  {
+    id: 1111,
+    title: 'Yisel - Cleaning',
+    start: '2023-10-03 10:00:00',
+    end: '2023-10-03 12:00:00'
+  },
+  {
+    id: 2222,
+    title: 'Jennings Place - Housekeeper',
+    start: '2023-10-03 14:00:00',
+    end: '2023-10-03 16:00:00'
+  },
+  {
+    id: 3333,
+    title: 'Angel Cove - Carpet',
+    start: '2023-10-05 10:00:00',
+    end: '2023-10-05 12:00:00'
+  },
+  {
+    id: 4444,
+    title: 'Sterling Hills - Paint',
+    start: '2023-10-04 10:00:00',
+    end: '2023-10-04 12:00:00'
+  },
+  {
+    id: 5555,
+    title: 'Palm Beach - Cleaning',
+    start: '2023-10-06 10:00:00',
+    end: '2023-10-06 12:00:00'
+  }
+]
+
+export function createEventId() {
+  return String(eventGuid++)
+}
diff --git a/src/views/ADempiere/CalendarView/index.vue b/src/views/ADempiere/CalendarView/index.vue
new file mode 100644
index 00000000000..513ef1f0a0b
--- /dev/null
+++ b/src/views/ADempiere/CalendarView/index.vue
@@ -0,0 +1,211 @@
+<!--
+  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 class="demo-app">
+    <div class="demo-app-sidebar">
+      <!-- <div class="demo-app-sidebar-section">
+        <label>
+          <input
+            type="checkbox"
+            :checked="calendarOptions.weekends"
+            @change="handleWeekendsToggle"
+          />
+          toggle weekends
+        </label>
+      </div> -->
+      <div class="demo-app-sidebar-section">
+        <h2 style="padding-left: 10px;padding-top: 10px;">
+          {{ $t('component.calendar.allEvents') }} ({{ currentEvents.length }})
+        </h2>
+
+        <ul>
+          <li v-for="event in currentEvents" :key="event.id">
+            <b>{{ translateDate({
+              value: event.startStr,
+              format: event.startStr.length > 10 ? 'short' : 'onlyDate',
+
+            }) }}</b>
+            <i>{{ event.title }}</i>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="demo-app-main">
+      <FullCalendar
+        class="demo-app-calendar"
+        :options="calendarOptions"
+      >
+        <template v-slot:eventContent="arg">
+          <b>{{ arg.timeText }}</b>
+          <i>{{ arg.event.title }}</i>
+        </template>
+      </FullCalendar>
+    </div>
+  </div>
+</template>
+
+<script>
+import lang from '@/lang'
+
+// Components and Mixins
+import FullCalendar from '@fullcalendar/vue'
+import esLocale from '@fullcalendar/core/locales/es'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import listPlugin from '@fullcalendar/list'
+
+import { INITIAL_EVENTS, createEventId } from './event-utils'
+
+import { translateDate } from '@/utils/ADempiere/formatValue/dateFormat'
+
+export default {
+  name: 'CalendarView',
+
+  components: {
+    FullCalendar // make the <FullCalendar> tag available
+  },
+
+  data: function() {
+    return {
+      calendarOptions: {
+        plugins: [
+          dayGridPlugin,
+          timeGridPlugin,
+          interactionPlugin, // needed for dateClick
+          listPlugin
+        ],
+        locale: esLocale,
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          // to right buttons, not space
+          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+        },
+        initialView: 'dayGridMonth',
+        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
+        editable: true,
+        selectable: true,
+        selectMirror: true,
+        dayMaxEvents: true,
+        weekends: true,
+        select: this.handleDateSelect,
+        eventClick: this.handleEventClick,
+        eventsSet: this.handleEvents
+        /* you can update a remote database when these fire:
+        eventAdd:
+        eventChange:
+        eventRemove:
+        */
+      },
+      currentEvents: []
+    }
+  },
+
+  methods: {
+    translateDate,
+
+    handleWeekendsToggle() {
+      // update a property
+      this.calendarOptions.weekends = !this.calendarOptions.weekends
+    },
+
+    handleDateSelect(selectInfo) {
+      const title = prompt(lang.t('component.calendar.titleNewEvent'))
+      const calendarApi = selectInfo.view.calendar
+
+      calendarApi.unselect() // clear date selection
+
+      if (title) {
+        calendarApi.addEvent({
+          id: createEventId(),
+          title,
+          start: selectInfo.startStr,
+          end: selectInfo.endStr,
+          allDay: selectInfo.allDay
+        })
+      }
+    },
+
+    handleEventClick(clickInfo) {
+      if (confirm(`${lang.t('component.calendar.deleteEventConfirm')} '${clickInfo.event.title}'`)) {
+        clickInfo.event.remove()
+      }
+    },
+
+    handleEvents(events) {
+      this.currentEvents = events
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+.demo-app {
+  display: flex !important;
+  min-height: 100%;
+  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+  font-size: 14px;
+
+  .demo-app-sidebar {
+    width: 300px;
+    line-height: 1.5;
+    background: #eaf9ff;
+    border-right: 1px solid #d3e2e8;
+    h2 {
+      margin: 0;
+      font-size: 16px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0 0 0 1.5em;
+    }
+
+    li {
+      margin: 1.5em 0;
+      padding: 0;
+    }
+
+    b { /* used for event dates/times */
+      margin-right: 3px;
+    }
+  }
+
+  .demo-app-main {
+    flex-grow: 1;
+    /* padding: 3em; */
+    padding: 1em;
+
+    .demo-app-sidebar-section {
+      padding: 2em;
+    }
+  }
+
+  .fc { /* the calendar root */
+    /* max-width: 1100px; */
+    margin: 0 auto;
+    /* max-width: auto; */
+    width: auto;
+    height: 100%;
+    overflow: auto;
+    display: block;
+  }
+}
+</style>
diff --git a/src/views/ADempiere/Form/index.vue b/src/views/ADempiere/Form/index.vue
index 3eb548665e6..84a366b4852 100644
--- a/src/views/ADempiere/Form/index.vue
+++ b/src/views/ADempiere/Form/index.vue
@@ -1,19 +1,19 @@
 <!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
- Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
- 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/>.
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A.
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
+  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 :style="styleHeight">
@@ -80,6 +80,9 @@ import LoadingView from '@/components/ADempiere/LoadingView/index.vue'
 // import ModalDialog from '@/components/ADempiere/Dialog'
 import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
+
 export default {
   name: 'FormView',
 
@@ -109,7 +112,13 @@ export default {
       return this.formMetadata.name
     },
     formFileName() {
-      return this.formMetadata.fileName || this.$route.meta.title
+      if (!isEmptyValue(this.formMetadata.fileName)) {
+        return this.formMetadata.fileName
+      }
+      if (!isEmptyValue(this.$route.meta.fileName)) {
+        return this.$route.meta.fileName
+      }
+      return this.$route.meta.title
     },
     getterForm() {
       return this.$store.getters.getForm(this.formUuid)
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
index 8000d4146b5..ae7aa3c8a32 100644
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -2,7 +2,7 @@
   <section class="todoapp">
     <!-- header -->
     <header class="header">
-      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+      <input class="new-todo" autocomplete="off" :placeholder="$t('components.todoList')" @keyup.enter="addTodo">
     </header>
     <!-- main section -->
     <section v-show="todos.length" class="main">
@@ -47,14 +47,17 @@ const filters = {
   completed: todos => todos.filter(todo => todo.done)
 }
 const defalutList = [
-  { text: 'star this repository', done: false },
-  { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false },
-  { text: 'vue-element-admin', done: true },
-  { text: 'vue', done: true },
-  { text: 'element-ui', done: true },
-  { text: 'axios', done: true },
-  { text: 'webpack', done: true }
+  { text: 'Enviar Presupuesto', done: false },
+  { text: 'Generar Orden de Compra', done: false },
+  { text: 'Conciliar Cuenta Bancaria', done: false },
+  { text: 'Realizar cotización de Proveedores', done: true },
+  { text: 'Emitir Pagos', done: true },
+  { text: 'Planificación Mensual', done: true },
+  { text: 'Liquidación de nómina', done: true }
+  // { text: 'webpack', done: true },
+  // { text: 'Vue 3', done: true },
+  // { text: 'TypeScritp', done: true },
+  // { text: 'ADempire-UI', done: false }
 ]
 export default {
   components: { Todo },
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 5f58987c040..f0be772012f 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,6 +1,6 @@
 <!--
  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
+ 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
@@ -58,6 +58,20 @@
           />
         </el-col>
       </template>
+      <el-col
+        :key="index"
+        :xs="{ span: 24 }"
+        :sm="{ span: 24 }"
+        :md="{ span: 24 }"
+        :lg="{ span: 8 }"
+        :xl="{ span: 8 }"
+        style="padding-right:8px;margin-bottom:2px;"
+      >
+        <todo
+          :metadata="mainDashboard"
+          :title="mainDashboard.name"
+        />
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -71,6 +85,8 @@ import store from '@/store'
 import DashboardDefinition from '@/components/ADempiere/Dashboard/index.vue'
 import PanelGroup from '@/views/dashboard/admin/components/PanelGroup.vue'
 import UserInfo from '@/views/profile/components/InfoUser.vue'
+import Todo from '@/views/dashboard/admin/components/TodoList/index.vue'
+
 // Utils and Helper Methods
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
 
@@ -78,6 +94,7 @@ export default defineComponent({
   name: 'DashboardAdmin',
 
   components: {
+    Todo,
     UserInfo,
     PanelGroup,
     DashboardDefinition
diff --git a/yarn.lock b/yarn.lock
index 863b3213661..1bf65200499 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1034,6 +1034,40 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fullcalendar/core@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-6.1.9.tgz#ea735b0dd0a0a487969ebbb6c99b0967e07568c0"
+  integrity sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==
+  dependencies:
+    preact "~10.12.1"
+
+"@fullcalendar/daygrid@^6.1.9", "@fullcalendar/daygrid@~6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/daygrid/-/daygrid-6.1.9.tgz#efb8aabb2f928ac0b05a77c5443accb546ae5818"
+  integrity sha512-o/6joH/7lmVHXAkbaa/tUbzWYnGp/LgfdiFyYPkqQbjKEeivNZWF1WhHqFbhx0zbFONSHtrvkjY2bjr+Ef2quQ==
+
+"@fullcalendar/interaction@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/interaction/-/interaction-6.1.9.tgz#9023922df24c296cb7f4671887f1731f5d5a5db2"
+  integrity sha512-I3FGnv0kKZpIwujg3HllbKrciNjTqeTYy3oJG226oAn7lV6wnrrDYMmuGmA0jPJAGN46HKrQqKN7ItxQRDec4Q==
+
+"@fullcalendar/list@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/list/-/list-6.1.9.tgz#67ce0712a8713fd478fde5c71ec2d94dff68a2a4"
+  integrity sha512-OCKdC1Gz26cJ5QsXdQyXVyzVu23ypT2xzyAR+Wc8jEytcJLWXw2a914m/MVax8n8EHuaIYY2exhsy/eaSU0XNA==
+
+"@fullcalendar/timegrid@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/timegrid/-/timegrid-6.1.9.tgz#83b61ac734638d11182aeb579b638fa0bc52ea32"
+  integrity sha512-le7UV05wVE1Trdr054kgJXTwa+A1pEI8nlCBnPWdcyrL+dTLoPvQ4AWEVCnV7So+4zRYaCqnqGXfCJsj0RQa0g==
+  dependencies:
+    "@fullcalendar/daygrid" "~6.1.9"
+
+"@fullcalendar/vue@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/vue/-/vue-6.1.9.tgz#88ccae9284ce34b0852c8ede45c95e3e5563790a"
+  integrity sha512-cJet86Zq0MhAn+VNO6QByZOmv4P8vgfkQJC9PkgMZAzLnVHMQGPgEpV492i5BGEXeLelmaAhynZvLv15C4XbPQ==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -10972,6 +11006,11 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
+preact@~10.12.1:
+  version "10.12.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.12.1.tgz#8f9cb5442f560e532729b7d23d42fd1161354a21"
+  integrity sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"