diff --git a/.gitignore b/.gitignore
index 78a752d8..b55f03fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+/bin/
diff --git a/LICENSE b/LICENSE
index 61515750..c3f5b52d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,674 @@
-MIT License
+GNU GENERAL PUBLIC LICENSE
+   Version 3, 29 June 2007
 
-Copyright (c) 2017-present PanJiaChen
+Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+        Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+   TERMS AND CONDITIONS
+
+0. Definitions.
+
+"This License" refers to version 3 of the GNU General Public License.
+
+"Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+1. Source Code.
+
+The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+The Corresponding Source for a work in source code form is that
+same work.
+
+2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+a) The work must carry prominent notices stating that you modified
+it, and giving a relevant date.
+
+b) The work must carry prominent notices stating that it is
+released under this License and any conditions added under section
+7.  This requirement modifies the requirement in section 4 to
+"keep intact all notices".
+
+c) You must license the entire work, as a whole, under this
+License to anyone who comes into possession of a copy.  This
+License will therefore apply, along with any applicable section 7
+additional terms, to the whole of the work, and all its parts,
+regardless of how they are packaged.  This License gives no
+permission to license the work in any other way, but it does not
+invalidate such permission if you have separately received it.
+
+d) If the work has interactive user interfaces, each must display
+Appropriate Legal Notices; however, if the Program has interactive
+interfaces that do not display Appropriate Legal Notices, your
+work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+a) Convey the object code in, or embodied in, a physical product
+(including a physical distribution medium), accompanied by the
+Corresponding Source fixed on a durable physical medium
+customarily used for software interchange.
+
+b) Convey the object code in, or embodied in, a physical product
+(including a physical distribution medium), accompanied by a
+written offer, valid for at least three years and valid for as
+long as you offer spare parts or customer support for that product
+model, to give anyone who possesses the object code either (1) a
+copy of the Corresponding Source for all the software in the
+product that is covered by this License, on a durable physical
+medium customarily used for software interchange, for a price no
+more than your reasonable cost of physically performing this
+conveying of source, or (2) access to copy the
+Corresponding Source from a network server at no charge.
+
+c) Convey individual copies of the object code with a copy of the
+written offer to provide the Corresponding Source.  This
+alternative is allowed only occasionally and noncommercially, and
+only if you received the object code with such an offer, in accord
+with subsection 6b.
+
+d) Convey the object code by offering access from a designated
+place (gratis or for a charge), and offer equivalent access to the
+Corresponding Source in the same way through the same place at no
+further charge.  You need not require recipients to copy the
+Corresponding Source along with the object code.  If the place to
+copy the object code is a network server, the Corresponding Source
+may be on a different server (operated by you or a third party)
+that supports equivalent copying facilities, provided you maintain
+clear directions next to the object code saying where to find the
+Corresponding Source.  Regardless of what server hosts the
+Corresponding Source, you remain obligated to ensure that it is
+available for as long as needed to satisfy these requirements.
+
+e) Convey the object code using peer-to-peer transmission, provided
+you inform other peers where the object code and Corresponding
+Source of the work are being offered to the general public at no
+charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+a) Disclaiming warranty or limiting liability differently from the
+terms of sections 15 and 16 of this License; or
+
+b) Requiring preservation of specified reasonable legal notices or
+author attributions in that material or in the Appropriate Legal
+Notices displayed by works containing it; or
+
+c) Prohibiting misrepresentation of the origin of that material, or
+requiring that modified versions of such material be marked in
+reasonable ways as different from the original version; or
+
+d) Limiting the use for publicity purposes of names of licensors or
+authors of the material; or
+
+e) Declining to grant rights under trademark law for use of some
+trade names, trademarks, or service marks; or
+
+f) Requiring indemnification of licensors and authors of that
+material by anyone who conveys the material (or modified versions of
+it) with contractual assumptions of liability to the recipient, for
+any liability that these contractual assumptions directly impose on
+those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+13. Use with the GNU Affero General Public License.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+ END OF TERMS AND CONDITIONS
+
+How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+<one line to give the program's name and a brief idea of what it does.>
+Copyright (C) <year>  <name of author>
+
+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/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+<program>  Copyright (C) <year>  <name of author>
+This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+This is free software, and you are welcome to redistribute it
+under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
diff --git a/PREVIOUS-LICENSE b/PREVIOUS-LICENSE
new file mode 100644
index 00000000..61515750
--- /dev/null
+++ b/PREVIOUS-LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.es.md b/README.es.md
new file mode 100644
index 00000000..4419513a
--- /dev/null
+++ b/README.es.md
@@ -0,0 +1,225 @@
+<p align="center">
+  <img width="320" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Adempiere-logo.png">
+</p>
+
+<p align="center">
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://travis-ci.org/adempiere/adempiere-vue" rel="nofollow">
+    <img src="https://travis-ci.org/adempiere/adempiere=vue.svg?branch=develop" alt="Build Status">
+  </a>
+  <a href="https://github.com/adempiere/adempiere-vue/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/adempiere/adempiere-vue/releases">
+    <img src="https://img.shields.io/github/release/adempiere/adempiere-vue.svg" alt="GitHub release">
+  </a>
+  <a href="https://gitter.im/adempiere/adempiere-vue">
+    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
+  </a>
+</p>
+
+Español | [Inglés](./README.md)
+
+## Introducción
+
+[adempiere-vue](https://github.com/adempiere/adempiere-vue) es una nueva UI para [ADempiere ERP, CRM & SCM](https://github.com/adempiere/adempiere)]. Se basa en [vue](https://github.com/vuejs/vue) y usa el conjunto de herraminentas de UI [element-ui](https://github.com/ElemeFE/element).
+
+Este es una gran UI para [ADempiere ERP, CRM & SCM](https://github.com/adempiere/adempiere)] basada en lo último desarrollado por vue, construido con i18n para manejo multi-idioma, plantillas para aplicaciones de negocio y muchas características asombrosas. Este proyecto es derivado de [Vue-Element-Admin](https://github.com/PanJiaChen/vue-element-admin) originalmente escrito por [PanJiaChen / 花裤衩](https://github.com/PanJiaChen) sobre [licencia MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) y cambiado a [licencia GNU/GPL v3](https://github.com/adempiere/adempiere-vue/blob/master/LICENSE) por [Yamel Senih](https://github.com/yamelsenih) después de derivar el proyecto y con permisos del autor original [PanJiaChen / 花裤衩](https://github.com/PanJiaChen) en el reporte ["Extend as GNU/Gpl v3 License #1434"](https://github.com/PanJiaChen/vue-element-admin/issues/1434).
+
+[adempiere-vue](https://github.com/adempiere/adempiere-vue) usa como RPC (Llamado a Procedimientos Remostos)[gRPC](https://grpc.io/) como [server](https://github.com/erpcya/adempiere-gRPC-Server).
+
+- [Vista Prévia](http://adempiere-ui.erpya.com:9526/)
+
+- [Documentación](https://panjiachen.github.io/vue-element-admin-site/)
+
+- [Gitter](https://gitter.im/adempiere/adempiere-vue)
+
+- [Donar](https://www.paypal.me/?)
+
+- [Wikipedia](http://wiki.adempiere.net/ADempiere_ERP)
+
+- [Derivado De](https://github.com/PanJiaChen/vue-element-admin)
+
+**La versión actual `v1.0+` está construida en `vue-cli`. Si encuentra algún problema, por favor escriba un [reporte de error](https://github.com/adempiere/adempiere-vue/issues/new).**
+
+**Este proyecto no soporta versiones bajas de los navegadores (e.g. IE).**
+
+## Preparación
+
+Necesita instalar [node](https://nodejs.org/) y [git](https://git-scm.com/) localmente. El proyecto está basado en [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [gRPC](https://grpc.io/) y [element-ui](https://github.com/ElemeFE/element).
+Entendiendo y aprendiendo acerca de lo anterior le ayudará a conocer el proyecto.
+
+<p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## Patrocinantes
+
+<a href="http://erpya.com/"><img width="250px" src="https://i0.wp.com/spin-suite.com/erpya/wp-content/uploads/sites/28/2017/11/ERP-logotipo-H-color.png" /></a>
+<a href="http://www.e-evolution.com/"><img width="250px" src="https://i0.wp.com/mysmart.business/evolution/wp-content/uploads/sites/29/2017/10/e-evolution-logo-v2.png?fit=150%2C92" /></a>
+<a href="http://westfalia-it.com/"><img width="150px" src="https://i1.wp.com/spin-suite.com/westfalia/wp-content/uploads/sites/30/2017/12/logo_copy.jpg?fit=265%2C357" /></a>
+<a href="http://erpya.com/"><img width="250px" src="https://i0.wp.com/spin-suite.com/openupsolutions/wp-content/uploads/sites/32/2017/05/Openup-Solutions-Logo-2017-80x200px.png" /></a>
+
+Sea un patrocinante y coloque su logo en nuestro LEEME en GitHub con un link a su sitio web. [Sea un Patrocinante](https://www.paypal.me/?)
+
+## Características
+
+```
+- Iniciar / Cerrar Sesión
+
+- Permisos de Authentication
+  - Permisos basado en ADempiere
+  - Página de Permisos
+  - Directivas de permisos
+  - Página de configuración de permisos
+  - Autenticación por dos pasos
+
+- Construcción Multi-entorno
+  - dev sit stage  producción
+
+- Características Globales
+  - I18n
+  - Temas dinámicos
+  - Dynamic sidebar (soporte a rutas multi-nivel)
+  - Barra de rutas dinámica
+  - Tags-view (Tab page Support right-click operation)
+  - Svg Sprite
+  - Datos de simulación con Mock
+  - Pantalla completa
+  - Responsive Sidebar
+
+- Editor
+  - Editor de Texto Enriquecido
+  - Editor Markdown
+  - Editor JSON
+
+- Excel
+  - Exportación a Excel
+  - Carga de Excel
+  - Visualización de Excel
+  - Exportación como zip
+
+- Tabla
+  - Tabla Dinámica
+  - Tabla con Arrastrar y Soltar
+  - Tabla de edición en línea
+
+- Páginas de Error
+  - 401
+  - 404
+
+- Componentes
+  - Carga de Avatar
+  - Botón para subir al inicio
+  - Arrastrar y Soltar (Diaglogo)
+  - Arrastrar y Soltar (Seleccionar)
+  - Arrastrar y Soltar (Kanban)
+  - Arrastrar y Soltar (Lista)
+  - Panel de división
+  - Componente para soltar archivos
+  - Adhesión de objetos
+  - Contador hasta
+- Soporte a ADempiere
+    - Ventan
+    - Proceso
+    - Reporte
+    - Visor Inteligente
+
+- Ejemplo Avanzado
+- Registro de Errores
+- Tablero de indicadores
+- Página de Guías
+- ECharts (Gráficos)
+- Portapapeles
+- Convertidor de Markdown a html
+```
+
+## Iniciando
+
+Use [gRPC ADempiere Server](https://github.com/erpcya/adempiere-gRPC-Server) como proveedor de gRPC.
+
+```bash
+# clone el proyecto
+git clone -b develop git@github.com:adempiere/vue-element-admin.git
+
+# vaya al directorio clonado
+cd adempiere-vue
+
+# instale las dependencias
+npm install
+
+# corra el proyecto como desarrollador
+npm run dev
+```
+
+Automáticamente se abrirá el siguiente enlace en su navegador http://localhost:9527
+
+## Construcción
+
+```bash
+# Construcción para entornos de prueba
+npm run build:stage
+
+# Construcción para entornos de producción
+npm run build:prod
+```
+
+## Avanzado
+
+```bash
+# Vista previa con efectos de entorno
+npm run preview
+
+# Vista previa  con efectos + análisis de recursos estáticos
+npm run preview -- --report
+
+# Chequeo de formato de código
+npm run lint
+
+# Chequeo de formato de código y auto-corrección
+npm run lint -- --fix
+```
+
+Vaya a [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) para mayor información.
+
+## Registro de Cambios
+
+Los cambios detallados por cada liberación se encuentran en [notas de liberación](https://github.com/adempiere/adempiere-vue/releases).
+
+## Demostración en línea
+
+[Preview](http://adempiere-ui.erpya.com:9526/)
+
+## Donación
+
+Si este proyecto es de mucha ayuda para ti, puedes ayudar a hacer una mejor UI
+
+[Dona por Paypal](https://www.paypal.me/?)
+
+## Navegadores Soportados
+
+Navegadores modernos e Internet Explorer 10+.
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+
+## Licencia
+
+[GNU/GPL v3](https://github.com/adempiere/adempiere-vue/blob/master/LICENSE)
+
+## Licencia Prévia
+[MIT](./PREVIOUS-LICENSE)
+
+## Contribuidores Iniciales
+
+- [Yamel Senih](https://github.com/yamelsenih)
+- [Raúl Muñoz](https://github.com/Raul-mz)
+- [Edwin Betancourt](https://github.com/EdwinBetanc0urt)
+- [Leonel Matos](https://github.com/leonel1524)
+- [Elsio Sanchez](https://github.com/elsiosanchez)
diff --git a/README.ja.md b/README.ja.md
deleted file mode 100644
index c99108fe..00000000
--- a/README.ja.md
+++ /dev/null
@@ -1,212 +0,0 @@
-<p align="center">
-  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
-</p>
-
-<p align="center">
-  <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
-  </a>
-  <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
-  </a>
-  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
-    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
-  </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-  </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-  </a>
-  <a href="https://gitter.im/vue-element-admin/discuss">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
-  </a>
-  <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
-    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
-  </a>
-</p>
-
-日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md)
-
-## 概要
-
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェース，[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています、素早くビジネス用の管理画面の現型を構築に役立ちます。
-
-- [デモページ](https://panjiachen.github.io/vue-element-admin)
-
-- [ドキュメント](https://panjiachen.github.io/vue-element-admin-site/)
-
-- [Gitter](https://gitter.im/vue-element-admin/discuss)
-
-- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
-
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
-- おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
-- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
-
-**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
-
-**現在のバージョン `v4.0+` は `vue-cli` で構築，バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。**
-
-**低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
-
-## 前準備
-
-ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)をインストールが必要です。[ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
-
-**バグ修正や新規機能追加のissue と pull requestは大歓迎です。**
-
- <p align="center">
-  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
-</p>
-
-## Sponsors
-
-Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
-
-<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
-
-## 機能一覧
-
-```
-- ログイン / ログアウト
-
-- Auth認証
-  - ページ権限
-  - 権限パーミッション
-  - 権限設定
-  - 外部IDでログイン
-
-- 複数環境デプロイ
-  - dev sit stage prod
-
-- 共通機能
-  - 多言語切替
-  - テーマ切替
-  - サイトメニュー（ルートから生成）
-  - Breadcrumb Navigation
-  - Tag Navigation
-  - Svg Sprite Icon
-  - ローカル/バックエンド モック データ
-  - Screenfull
-
-- WYSIWYG
-  - TinyMCE
-  - Markdown
-  - JSON
-
-- Excel
-  - エクスポート
-  - インポート
-  - リード
-  - Zip
-
-- Table
-  - Dynamic Table
-  - Drag And Drop Table
-  - Inline Edit Table
-
-- Error Page
-  - 401
-  - 404
-
-- コンポーネント
-  - Avatar Upload
-  - Back To Top
-  - Drag Dialog
-  - Drag Select
-  - Drag Kanban
-  - Drag List
-  - SplitPane
-  - Dropzone
-  - Sticky
-  - CountTo
-
-- Advanced Example
-- Error Log
-- Dashboard
-- Guide Page
-- ECharts
-- Clipboard
-- Markdown to html
-```
-
-## Getting started
-
-```bash
-# clone the project
-git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
-
-# enter the project directory
-cd vue-element-admin
-
-# install dependency
-npm install
-
-# develop
-npm run dev
-```
-
-This will automatically open http://localhost:9527
-
-## Build
-
-```bash
-# build for test environment
-npm run build:stage
-
-# build for production environment
-npm run build:prod
-```
-
-## Advanced
-
-```bash
-# preview the release environment effect
-npm run preview
-
-# preview the release environment effect + static resource analysis
-npm run preview -- --report
-
-# code format check
-npm run lint
-
-# code format check and auto fix
-npm run lint -- --fix
-```
-
-Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
-
-## Changelog
-
-Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
-
-## Online Demo
-
-[Preview](https://panjiachen.github.io/vue-element-admin)
-
-## Donate
-
-If you find this project useful, you can buy author a glass of juice :tropical_drink:
-
-![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
-
-[Paypal Me](https://www.paypal.me/panfree23)
-
-[Buy me a coffee](https://www.buymeacoffee.com/Pan)
-
-## Browsers support
-
-Modern browsers and Internet Explorer 10+.
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
-| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
-
-## License
-
-[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
-
-Copyright (c) 2017-present PanJiaChen
diff --git a/README.md b/README.md
index a2c63a00..381fe60b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+  <img width="320" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Adempiere-logo.png">
 </p>
 
 <p align="center">
@@ -9,78 +9,76 @@
   <a href="https://github.com/ElemeFE/element">
     <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
   </a>
-  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
-    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+  <a href="https://travis-ci.org/adempiere/adempiere-vue" rel="nofollow">
+    <img src="https://travis-ci.org/adempiere/adempiere=vue.svg?branch=develop" alt="Build Status">
   </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+  <a href="https://github.com/adempiere/adempiere-vue/blob/master/LICENSE">
     <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
   </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  <a href="https://github.com/adempiere/adempiere-vue/releases">
+    <img src="https://img.shields.io/github/release/adempiere/adempiere-vue.svg" alt="GitHub release">
   </a>
-  <a href="https://gitter.im/vue-element-admin/discuss">
+  <a href="https://gitter.im/adempiere/adempiere-vue">
     <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
   </a>
-  <a href="https://panjiachen.github.io/vue-element-admin-site/donate">
-    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
-  </a>
 </p>
 
-English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)
+English | [Spanish](./README.es.md)
 
 ## Introduction
 
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
+[adempiere-vue](https://github.com/adempiere/adempiere-vue) is a new UI for [ADempiere ERP, CRM & SCM](https://github.com/adempiere/adempiere)]. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
 
-It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
+It is a great UI for [ADempiere ERP, CRM & SCM](https://github.com/adempiere/adempiere)] based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. This project was forked from [Vue-Element-Admin](https://github.com/PanJiaChen/vue-element-admin) originally write by [PanJiaChen / 花裤衩](https://github.com/PanJiaChen) over [MIT license](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) and was changed to [GNU/GPL v3](https://github.com/adempiere/adempiere-vue/blob/master/LICENSE) by [Yamel Senih](https://github.com/yamelsenih) after forked granted by [PanJiaChen / 花裤衩](https://github.com/PanJiaChen) on issue ["Extend as GNU/Gpl v3 License #1434"](https://github.com/PanJiaChen/vue-element-admin/issues/1434).
 
-- [Preview](https://panjiachen.github.io/vue-element-admin)
+[adempiere-vue](https://github.com/adempiere/adempiere-vue) use the modern open source high performance RPC framework that can run in any environment [gRPC](https://grpc.io/) as [server](https://github.com/erpcya/adempiere-gRPC-Server).
+
+- [Preview](http://adempiere-ui.erpya.com:9526/)
 
 - [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
 
-- [Gitter](https://gitter.im/vue-element-admin/discuss)
+- [Gitter](https://gitter.im/adempiere/adempiere-vue)
 
-- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
+- [Donate](https://www.paypal.me/?)
 
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [Wiki](http://wiki.adempiere.net/ADempiere_ERP)
 
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+- [Forked From](https://github.com/PanJiaChen/vue-element-admin)
 
-- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
-- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
-
-**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
-
-**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli`**
+**The current version is `v1.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/adempiere/adempiere-vue/issues/new).**
 
 **This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**
 
 ## Preparation
 
-You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
+You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [gRPC](https://grpc.io/) and [element-ui](https://github.com/ElemeFE/element).
 Understanding and learning this knowledge in advance will greatly help the use of this project.
 
- <p align="center">
+<p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 
 ## Sponsors
 
-Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
+<a href="http://erpya.com/"><img width="250px" src="https://i0.wp.com/spin-suite.com/erpya/wp-content/uploads/sites/28/2017/11/ERP-logotipo-H-color.png" /></a>
+<a href="http://www.e-evolution.com/"><img width="250px" src="https://i0.wp.com/mysmart.business/evolution/wp-content/uploads/sites/29/2017/10/e-evolution-logo-v2.png?fit=150%2C92" /></a>
+<a href="http://westfalia-it.com/"><img width="150px" src="https://i1.wp.com/spin-suite.com/westfalia/wp-content/uploads/sites/30/2017/12/logo_copy.jpg?fit=265%2C357" /></a>
+<a href="http://erpya.com/"><img width="250px" src="https://i0.wp.com/spin-suite.com/openupsolutions/wp-content/uploads/sites/32/2017/05/Openup-Solutions-Logo-2017-80x200px.png" /></a>
 
-<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
+Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor](https://www.paypal.me/?)
 
 ## Features
 
 ```
 - Login / Logout
+- Register
+- Forgot Password
 
 - Permission Authentication
+  - ADempiere backend permission
   - Page permission
   - Directive permission
   - Permission configuration page
-  - Two-step login
 
 - Multi-environment build
   - dev sit stage prod
@@ -92,7 +90,6 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
   - Dynamic breadcrumb
   - Tags-view (Tab page Support right-click operation)
   - Svg Sprite
-  - Mock data
   - Screenfull
   - Responsive Sidebar
 
@@ -127,6 +124,11 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
   - Dropzone
   - Sticky
   - CountTo
+- ADempiere supported
+  - Window
+  - Process
+  - Report
+  - Smart Browser
 
 - Advanced Example
 - Error Log
@@ -139,12 +141,14 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 
 ## Getting started
 
+Use [gRPC ADempiere Server](https://github.com/erpcya/adempiere-gRPC-Server) as gRPC provider.
+
 ```bash
 # clone the project
-git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
+git clone -b develop git@github.com:adempiere/vue-element-admin.git
 
 # enter the project directory
-cd vue-element-admin
+cd adempiere-vue
 
 # install dependency
 npm install
@@ -185,21 +189,17 @@ Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/gui
 
 ## Changelog
 
-Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+Detailed changes for each release are documented in the [release notes](https://github.com/adempiere/adempiere-vue/releases).
 
 ## Online Demo
 
-[Preview](https://panjiachen.github.io/vue-element-admin)
+[Preview](http://adempiere-ui.erpya.com:9526/)
 
 ## Donate
 
-If you find this project useful, you can buy author a glass of juice :tropical_drink:
+If you find this project useful, you can help this make a better UI
 
-![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
-
-[Paypal Me](https://www.paypal.me/panfree23)
-
-[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+[Paypal Me](https://www.paypal.me/?)
 
 ## Browsers support
 
@@ -211,6 +211,15 @@ Modern browsers and Internet Explorer 10+.
 
 ## License
 
-[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+[GNU/GPL v3](https://github.com/adempiere/adempiere-vue/blob/master/LICENSE)
 
-Copyright (c) 2017-present PanJiaChen
+## Previous License
+[MIT](./PREVIOUS-LICENSE)
+
+## Initial Contributors
+
+- [Yamel Senih](https://github.com/yamelsenih)
+- [Raúl Muñoz](https://github.com/Raul-mz)
+- [Edwin Betancourt](https://github.com/EdwinBetanc0urt)
+- [Leonel Matos](https://github.com/leonel1524)
+- [Elsio Sanchez](https://github.com/elsiosanchez)
diff --git a/README.zh-CN.md b/README.zh-CN.md
deleted file mode 100644
index c6f4604d..00000000
--- a/README.zh-CN.md
+++ /dev/null
@@ -1,235 +0,0 @@
-<p align="center">
-  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
-</p>
-
-<p align="center">
-  <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
-  </a>
-  <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
-  </a>
-  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
-    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
-  </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-  </a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-  </a>
-  <a href="https://gitter.im/vue-element-admin/discuss">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
-  </a>
-  <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
-    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
-  </a>
-</p>
-
-简体中文 | [English](./README.md)
-
-## 简介
-
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
-
-- [在线预览](https://panjiachen.github.io/vue-element-admin)
-
-- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
-
-- [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)
-
-- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
-
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览（国内用户可访问该地址）
-
-- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档（方便没翻墙的用户查看）
-
-- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
-- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
-
-**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
-
-**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
-
-**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**
-
-群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西，或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1)
-
-## 前序准备
-
-你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
-
-同时配套了系列教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
-
-- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
-- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
-- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
-- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
-- [手摸手，带你用vue撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85)
-- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
-- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
-- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
-- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
-
-**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
-
- <p align="center">
-  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
-</p>
-
-## Sponsors
-
-Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
-
-<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
-
-## 功能
-
-```
-- 登录 / 注销
-
-- 权限验证
-  - 页面权限
-  - 指令权限
-  - 权限配置
-  - 二步登录
-
-- 多环境发布
-  - dev sit stage prod
-
-- 全局功能
-  - 国际化多语言
-  - 多种动态换肤
-  - 动态侧边栏（支持多级路由嵌套）
-  - 动态面包屑
-  - 快捷导航(标签页)
-  - Svg Sprite 图标
-  - 本地/后端 mock 数据
-  - Screenfull全屏
-  - 自适应收缩侧边栏
-
-- 编辑器
-  - 富文本
-  - Markdown
-  - JSON 等多格式
-
-- Excel
-  - 导出excel
-  - 导入excel
-  - 前端可视化excel
-  - 导出zip
-
-- 表格
-  - 动态表格
-  - 拖拽表格
-  - 内联编辑
-
-- 错误页面
-  - 401
-  - 404
-
-- 組件
-  - 头像上传
-  - 返回顶部
-  - 拖拽Dialog
-  - 拖拽Select
-  - 拖拽看板
-  - 列表拖拽
-  - SplitPane
-  - Dropzone
-  - Sticky
-  - CountTo
-
-- 综合实例
-- 错误日志
-- Dashboard
-- 引导页
-- ECharts 图表
-- Clipboard(剪贴复制)
-- Markdown2html
-```
-
-## 开发
-
-```bash
-# 克隆项目
-git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
-
-# 进入项目目录
-cd vue-element-admin
-
-# 安装依赖
-npm install
-
-# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
-npm install --registry=https://registry.npm.taobao.org
-
-# 启动服务
-npm run dev
-```
-
-浏览器访问 http://localhost:9527
-
-## 发布
-
-```bash
-# 构建测试环境
-npm run build:stage
-
-# 构建生产环境
-npm run build:prod
-```
-
-## 其它
-
-```bash
-# 预览发布环境效果
-npm run preview
-
-# 预览发布环境效果 + 静态资源分析
-npm run preview -- --report
-
-# 代码格式检查
-npm run lint
-
-# 代码格式检查并自动修复
-npm run lint -- --fix
-```
-
-更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
-
-## Changelog
-
-Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
-
-## Online Demo
-
-[在线 Demo](https://panjiachen.github.io/vue-element-admin)
-
-## Donate
-
-如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
-![donate](https://panjiachen.github.io/donate/donation.png)
-
-[更多捐赠方式](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
-
-[Paypal Me](https://www.paypal.me/panfree23)
-
-[Buy me a coffee](https://www.buymeacoffee.com/Pan)
-
-## Browsers support
-
-Modern browsers and Internet Explorer 10+.
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
-| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
-
-## License
-
-[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
-
-Copyright (c) 2017-present PanJiaChen
diff --git a/mock/role/routes.js b/mock/role/routes.js
index c4654566..d718919c 100644
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -41,7 +41,7 @@ export const constantRoutes = [
         path: 'dashboard',
         component: 'views/dashboard/index',
         name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
       }
     ]
   },
@@ -53,7 +53,7 @@ export const constantRoutes = [
         path: 'index',
         component: 'views/documentation/index',
         name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
       }
     ]
   },
@@ -66,7 +66,7 @@ export const constantRoutes = [
         path: 'index',
         component: 'views/guide/index',
         name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+        meta: { title: 'Guide', icon: 'guide', noCache: true }
       }
     ]
   }
@@ -79,7 +79,7 @@ export const asyncRoutes = [
     redirect: '/permission/index',
     alwaysShow: true,
     meta: {
-      title: 'permission',
+      title: 'Permission',
       icon: 'lock',
       roles: ['admin', 'editor']
     },
@@ -89,7 +89,7 @@ export const asyncRoutes = [
         component: 'views/permission/page',
         name: 'PagePermission',
         meta: {
-          title: 'pagePermission',
+          title: 'Page Permission',
           roles: ['admin']
         }
       },
@@ -98,7 +98,7 @@ export const asyncRoutes = [
         component: 'views/permission/directive',
         name: 'DirectivePermission',
         meta: {
-          title: 'directivePermission'
+          title: 'Directive Permission'
         }
       },
       {
@@ -106,7 +106,7 @@ export const asyncRoutes = [
         component: 'views/permission/role',
         name: 'RolePermission',
         meta: {
-          title: 'rolePermission',
+          title: 'Role Permission',
           roles: ['admin']
         }
       }
@@ -121,7 +121,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/icons/index',
         name: 'Icons',
-        meta: { title: 'icons', icon: 'icon', noCache: true }
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
       }
     ]
   },
@@ -132,7 +132,7 @@ export const asyncRoutes = [
     redirect: 'noRedirect',
     name: 'ComponentDemo',
     meta: {
-      title: 'components',
+      title: 'Components',
       icon: 'component'
     },
     children: [
@@ -140,49 +140,49 @@ export const asyncRoutes = [
         path: 'tinymce',
         component: 'views/components-demo/tinymce',
         name: 'TinymceDemo',
-        meta: { title: 'tinymce' }
+        meta: { title: 'Tinymce' }
       },
       {
         path: 'markdown',
         component: 'views/components-demo/markdown',
         name: 'MarkdownDemo',
-        meta: { title: 'markdown' }
+        meta: { title: 'Markdown' }
       },
       {
         path: 'json-editor',
         component: 'views/components-demo/json-editor',
         name: 'JsonEditorDemo',
-        meta: { title: 'jsonEditor' }
+        meta: { title: 'Json Editor' }
       },
       {
         path: 'split-pane',
         component: 'views/components-demo/split-pane',
         name: 'SplitpaneDemo',
-        meta: { title: 'splitPane' }
+        meta: { title: 'SplitPane' }
       },
       {
         path: 'avatar-upload',
         component: 'views/components-demo/avatar-upload',
         name: 'AvatarUploadDemo',
-        meta: { title: 'avatarUpload' }
+        meta: { title: 'Avatar Upload' }
       },
       {
         path: 'dropzone',
         component: 'views/components-demo/dropzone',
         name: 'DropzoneDemo',
-        meta: { title: 'dropzone' }
+        meta: { title: 'Dropzone' }
       },
       {
         path: 'sticky',
         component: 'views/components-demo/sticky',
         name: 'StickyDemo',
-        meta: { title: 'sticky' }
+        meta: { title: 'Sticky' }
       },
       {
         path: 'count-to',
         component: 'views/components-demo/count-to',
         name: 'CountToDemo',
-        meta: { title: 'countTo' }
+        meta: { title: 'Count To' }
       },
       {
         path: 'mixin',
@@ -194,31 +194,31 @@ export const asyncRoutes = [
         path: 'back-to-top',
         component: 'views/components-demo/back-to-top',
         name: 'BackToTopDemo',
-        meta: { title: 'backToTop' }
+        meta: { title: 'Back To Top' }
       },
       {
         path: 'drag-dialog',
         component: 'views/components-demo/drag-dialog',
         name: 'DragDialogDemo',
-        meta: { title: 'dragDialog' }
+        meta: { title: 'Drag Dialog' }
       },
       {
         path: 'drag-select',
         component: 'views/components-demo/drag-select',
         name: 'DragSelectDemo',
-        meta: { title: 'dragSelect' }
+        meta: { title: 'Drag Select' }
       },
       {
         path: 'dnd-list',
         component: 'views/components-demo/dnd-list',
         name: 'DndListDemo',
-        meta: { title: 'dndList' }
+        meta: { title: 'Dnd List' }
       },
       {
         path: 'drag-kanban',
         component: 'views/components-demo/drag-kanban',
         name: 'DragKanbanDemo',
-        meta: { title: 'dragKanban' }
+        meta: { title: 'Drag Kanban' }
       }
     ]
   },
@@ -228,7 +228,7 @@ export const asyncRoutes = [
     redirect: 'noRedirect',
     name: 'Charts',
     meta: {
-      title: 'charts',
+      title: 'Charts',
       icon: 'chart'
     },
     children: [
@@ -236,19 +236,19 @@ export const asyncRoutes = [
         path: 'keyboard',
         component: 'views/charts/keyboard',
         name: 'KeyboardChart',
-        meta: { title: 'keyboardChart', noCache: true }
+        meta: { title: 'Keyboard Chart', noCache: true }
       },
       {
         path: 'line',
         component: 'views/charts/line',
         name: 'LineChart',
-        meta: { title: 'lineChart', noCache: true }
+        meta: { title: 'Line Chart', noCache: true }
       },
       {
         path: 'mixchart',
         component: 'views/charts/mixChart',
         name: 'MixChart',
-        meta: { title: 'mixChart', noCache: true }
+        meta: { title: 'Mix Chart', noCache: true }
       }
     ]
   },
@@ -258,7 +258,7 @@ export const asyncRoutes = [
     redirect: '/nested/menu1/menu1-1',
     name: 'Nested',
     meta: {
-      title: 'nested',
+      title: 'Nested',
       icon: 'nested'
     },
     children: [
@@ -266,33 +266,33 @@ export const asyncRoutes = [
         path: 'menu1',
         component: 'views/nested/menu1/index',
         name: 'Menu1',
-        meta: { title: 'menu1' },
+        meta: { title: 'Menu1' },
         redirect: '/nested/menu1/menu1-1',
         children: [
           {
             path: 'menu1-1',
             component: 'views/nested/menu1/menu1-1',
             name: 'Menu1-1',
-            meta: { title: 'menu1-1' }
+            meta: { title: 'Menu1-1' }
           },
           {
             path: 'menu1-2',
             component: 'views/nested/menu1/menu1-2',
             name: 'Menu1-2',
             redirect: '/nested/menu1/menu1-2/menu1-2-1',
-            meta: { title: 'menu1-2' },
+            meta: { title: 'Menu1-2' },
             children: [
               {
                 path: 'menu1-2-1',
                 component: 'views/nested/menu1/menu1-2/menu1-2-1',
                 name: 'Menu1-2-1',
-                meta: { title: 'menu1-2-1' }
+                meta: { title: 'Menu1-2-1' }
               },
               {
                 path: 'menu1-2-2',
                 component: 'views/nested/menu1/menu1-2/menu1-2-2',
                 name: 'Menu1-2-2',
-                meta: { title: 'menu1-2-2' }
+                meta: { title: 'Menu1-2-2' }
               }
             ]
           },
@@ -300,7 +300,7 @@ export const asyncRoutes = [
             path: 'menu1-3',
             component: 'views/nested/menu1/menu1-3',
             name: 'Menu1-3',
-            meta: { title: 'menu1-3' }
+            meta: { title: 'Menu1-3' }
           }
         ]
       },
@@ -308,7 +308,7 @@ export const asyncRoutes = [
         path: 'menu2',
         name: 'Menu2',
         component: 'views/nested/menu2/index',
-        meta: { title: 'menu2' }
+        meta: { title: 'Menu2' }
       }
     ]
   },
@@ -319,7 +319,7 @@ export const asyncRoutes = [
     redirect: '/example/list',
     name: 'Example',
     meta: {
-      title: 'example',
+      title: 'Example',
       icon: 'example'
     },
     children: [
@@ -327,20 +327,20 @@ export const asyncRoutes = [
         path: 'create',
         component: 'views/example/create',
         name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'edit' }
       },
       {
         path: 'edit/:id(\\d+)',
         component: 'views/example/edit',
         name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: { title: 'Edit Article', noCache: true },
         hidden: true
       },
       {
         path: 'list',
         component: 'views/example/list',
         name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
+        meta: { title: 'Article List', icon: 'list' }
       }
     ]
   },
@@ -353,7 +353,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/tab/index',
         name: 'Tab',
-        meta: { title: 'tab', icon: 'tab' }
+        meta: { title: 'Tab', icon: 'tab' }
       }
     ]
   },
@@ -364,7 +364,7 @@ export const asyncRoutes = [
     redirect: 'noRedirect',
     name: 'ErrorPages',
     meta: {
-      title: 'errorPages',
+      title: 'Error Pages',
       icon: '404'
     },
     children: [
@@ -372,13 +372,13 @@ export const asyncRoutes = [
         path: '401',
         component: 'views/error-page/401',
         name: 'Page401',
-        meta: { title: 'page401', noCache: true }
+        meta: { title: 'Page 401', noCache: true }
       },
       {
         path: '404',
         component: 'views/error-page/404',
         name: 'Page404',
-        meta: { title: 'page404', noCache: true }
+        meta: { title: 'Page 404', noCache: true }
       }
     ]
   },
@@ -392,7 +392,7 @@ export const asyncRoutes = [
         path: 'log',
         component: 'views/error-log/index',
         name: 'ErrorLog',
-        meta: { title: 'errorLog', icon: 'bug' }
+        meta: { title: 'Error Log', icon: 'bug' }
       }
     ]
   },
@@ -403,7 +403,7 @@ export const asyncRoutes = [
     redirect: '/excel/export-excel',
     name: 'Excel',
     meta: {
-      title: 'excel',
+      title: 'Excel',
       icon: 'excel'
     },
     children: [
@@ -411,25 +411,25 @@ export const asyncRoutes = [
         path: 'export-excel',
         component: 'views/excel/export-excel',
         name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
+        meta: { title: 'Export Excel' }
       },
       {
         path: 'export-selected-excel',
         component: 'views/excel/select-excel',
         name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
+        meta: { title: 'Select Excel' }
       },
       {
         path: 'export-merge-header',
         component: 'views/excel/merge-header',
         name: 'MergeHeader',
-        meta: { title: 'mergeHeader' }
+        meta: { title: 'Merge Header' }
       },
       {
         path: 'upload-excel',
         component: 'views/excel/upload-excel',
         name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
+        meta: { title: 'Upload Excel' }
       }
     ]
   },
@@ -439,13 +439,13 @@ export const asyncRoutes = [
     component: 'layout/Layout',
     redirect: '/zip/download',
     alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
+    meta: { title: 'Zip', icon: 'zip' },
     children: [
       {
         path: 'download',
         component: 'views/zip/index',
         name: 'ExportZip',
-        meta: { title: 'exportZip' }
+        meta: { title: 'Export Zip' }
       }
     ]
   },
@@ -459,7 +459,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/pdf/index',
         name: 'PDF',
-        meta: { title: 'pdf', icon: 'pdf' }
+        meta: { title: 'PDF', icon: 'pdf' }
       }
     ]
   },
@@ -478,7 +478,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/theme/index',
         name: 'Theme',
-        meta: { title: 'theme', icon: 'theme' }
+        meta: { title: 'Theme', icon: 'theme' }
       }
     ]
   },
@@ -492,7 +492,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/clipboard/index',
         name: 'ClipboardDemo',
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+        meta: { title: 'Clipboard Demo', icon: 'clipboard' }
       }
     ]
   },
@@ -505,7 +505,7 @@ export const asyncRoutes = [
         path: 'index',
         component: 'views/i18n-demo/index',
         name: 'I18n',
-        meta: { title: 'i18n', icon: 'international' }
+        meta: { title: 'I18n', icon: 'international' }
       }
     ]
   },
@@ -516,7 +516,7 @@ export const asyncRoutes = [
     children: [
       {
         path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'externalLink', icon: 'link' }
+        meta: { title: 'External Link', icon: 'link' }
       }
     ]
   },
diff --git a/package.json b/package.json
index 6802c9b5..04c71cb1 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
-  "name": "vue-element-admin",
-  "version": "4.0.1",
+  "name": "adempiere-vue",
+  "version": "4.1.0",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
   "scripts": {
+    "start": "vue-cli-service serve",
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
@@ -43,6 +44,11 @@
     "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
+    "@adempiere/grpc-access-client": "^1.1.6",
+    "@adempiere/grpc-data-client": "^1.7.3",
+    "@adempiere/grpc-dictionary-client": "^1.3.1",
+    "@adempiere/grpc-enrollment-client": "^1.0.6",
+    "autoprefixer": "^9.5.1",
     "axios": "0.18.0",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
@@ -55,6 +61,8 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "mime-type": "^3.0.7",
+    "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
@@ -65,9 +73,11 @@
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
-    "vue-router": "3.0.2",
+    "vue-multipane": "^0.9.5",
+    "vue-router": "3.0.4",
+    "vue-split-panel": "^1.0.4",
     "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
+    "vuedraggable": "^2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
@@ -76,12 +86,12 @@
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
     "@vue/cli-plugin-eslint": "3.5.1",
-    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-plugin-unit-jest": "^3.7.0",
     "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
+    "babel-jest": "^24.8.0",
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
diff --git a/public/favicon.ico b/public/favicon.ico
index 34b63ac6..a8552724 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/App.vue b/src/App.vue
index ec9032c1..117eb414 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,27 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.getWindowWidth)
+      window.addEventListener('resize', this.getWindowHeight)
+
+      this.getWindowWidth()
+      this.getWindowHeight()
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getWindowWidth)
+    window.removeEventListener('resize', this.getWindowHeight)
+  },
+  methods: {
+    getWindowWidth(event) {
+      this.$store.dispatch('setWidth', document.documentElement.clientWidth)
+    },
+    getWindowHeight(event) {
+      this.$store.dispatch('setHeight', document.documentElement.clientHeight)
+    }
+  }
 }
 </script>
diff --git a/src/api/ADempiere/constants.js b/src/api/ADempiere/constants.js
new file mode 100644
index 00000000..d399050a
--- /dev/null
+++ b/src/api/ADempiere/constants.js
@@ -0,0 +1,14 @@
+
+export const ADDRESS_HOST = 'http://localhost'
+
+export const PORT_DICTIONARY = '8990'
+export const HOST_GRPC_DICTIONARY = ADDRESS_HOST + ':' + PORT_DICTIONARY
+
+export const PORT_DATA = '8991'
+export const HOST_GRPC_DATA = ADDRESS_HOST + ':' + PORT_DATA
+
+export const PORT_AUTHENTICATION = '8989'
+export const HOST_GRPC_AUTHENTICATION = ADDRESS_HOST + ':' + PORT_AUTHENTICATION
+
+export const PORT_ENROLLMENT = '8992'
+export const HOST_GRPC_ENROLLMENT = ADDRESS_HOST + ':' + PORT_ENROLLMENT
diff --git a/src/api/ADempiere/data.js b/src/api/ADempiere/data.js
new file mode 100644
index 00000000..cc98a996
--- /dev/null
+++ b/src/api/ADempiere/data.js
@@ -0,0 +1,320 @@
+import { getLanguage } from '@/lang/index'
+import { getToken } from '@/utils/auth'
+import BusinessData from '@adempiere/grpc-data-client'
+import { HOST_GRPC_DATA } from '@/api/ADempiere/constants'
+
+// Get Instance for connection
+function Instance() {
+  return new BusinessData(
+    HOST_GRPC_DATA,
+    getToken(),
+    getLanguage() || 'en_US'
+  )
+}
+
+/**
+ * Converted the gRPC value to the value needed
+ * @param {object} grpcValue Value get of gRPC
+ * @returns {mixed}
+ */
+export function convertValueFromGRPC(grpcValue) {
+  return Instance.call(this).convertValueFromGRPC(grpcValue)
+}
+
+/**
+ * Create entity
+ * @param {string}  parameters.tableName
+ * @param {array}   parameters.attributesList
+ */
+export function createEntity(parameters) {
+  var entityRequest = Instance.call(this).getCreateEntityRequest()
+  entityRequest.setTablename(parameters.tableName)
+  if (parameters.attributesList && parameters.attributesList.length) {
+    parameters.attributesList.forEach(attribute => {
+      const convertedAttribute = Instance.call(this).convertParameter(attribute)
+      entityRequest.addAttributes(convertedAttribute)
+    })
+  }
+  //  Create Entity
+  return Instance.call(this).createEntity(entityRequest)
+}
+
+/**
+ * Update entity
+ * @param {string}  parameters.tableName
+ * @param {integer} parameters.recordId
+ * @param {string}  parameters.recordUuid
+ * @param {array}   parameters.attributesList
+ */
+export function updateEntity(parameters) {
+  var entityRequest = Instance.call(this).getUpdateEntityRequest()
+  entityRequest.setTablename(parameters.tableName)
+  if (parameters.recordId) {
+    entityRequest.setRecordid(parameters.recordId)
+  }
+  entityRequest.setUuid(parameters.recordUuid)
+  if (parameters.attributesList && parameters.attributesList.length) {
+    parameters.attributesList.forEach(attribute => {
+      const convertedAttribute = Instance.call(this).convertParameter(attribute)
+      entityRequest.addAttributes(convertedAttribute)
+    })
+  }
+  //  Update Entity
+  return Instance.call(this).updateEntity(entityRequest)
+}
+
+/**
+ * Delete entity
+ * @param {string}  parameters.tableName
+ * @param {integer} parameters.recordId
+ * @param {string}  parameters.recordUuid
+ * @param {array}   parameters.attributesList
+ */
+export function deleteEntity(parameters) {
+  var entityRequest = Instance.call(this).getUpdateEntityRequest()
+  entityRequest.setTablename(parameters.tableName)
+  if (parameters.recordId) {
+    entityRequest.setRecordid(parameters.recordId)
+  }
+  entityRequest.setUuid(parameters.recordUuid)
+
+  //  Delete Entity
+  return Instance.call(this).deleteEntity(entityRequest)
+}
+
+export function getCriteria(tableName) {
+  return Instance.call(this).getCriteria(tableName)
+}
+
+export function getObject(table, uuid = false, id = false) {
+  return Instance.call(this).getEntity(
+    Instance.call(this).getEntityRequest(table, uuid, id)
+  )
+}
+
+/**
+ * Object List from window
+ * @param {string} object.tableName
+ * @param {string} object.query
+ * @param {string} object.whereClause
+ * @param {string} object.orderByClause
+ */
+export function getObjectListFromCriteria(object) {
+  const criteriaForList = getCriteria(object.tableName)
+
+  criteriaForList.setQuery(object.query)
+
+  if (object.whereClause) {
+    criteriaForList.setWhereclause(object.whereClause)
+  }
+  if (object.orderByClause) {
+    criteriaForList.setOrderbyclause(object.orderByClause)
+  }
+
+  // add conditions
+  if (object.conditions && object.conditions.length) {
+    object.conditions.forEach(itemCondition => {
+      const convertCondition = Instance.call(this).convertCondition(itemCondition)
+      criteriaForList.addConditions(convertCondition)
+    })
+  }
+
+  var nextPageToken
+  if (object.nextPageToken) {
+    nextPageToken = object.nextPageToken
+  }
+  return Instance.call(this).requestObjectListFromCriteria(criteriaForList, nextPageToken)
+}
+
+/**
+ * Rollback entity (Create, Update, Delete)
+ * @param {string} parametersRollback.tableName
+ * @param {integer} parametersRollback.recordId
+ * @param {string} parametersRollback.eventType
+ */
+export function rollbackEntity(parametersRollback) {
+  var rollbackRequest = Instance.call(this).getRollbackEntityRequest()
+  rollbackRequest.setTablename(parametersRollback.tableName)
+  rollbackRequest.setRecordid(parametersRollback.recordId)
+
+  // set event type
+  var eventType = Instance.call(this).getEventType()
+  eventType = eventType[parametersRollback.eventType]
+  rollbackRequest.setEventtype(eventType)
+
+  return Instance.call(this).rollbackEntityRequest(rollbackRequest)
+}
+
+/**
+ * Request a Lookup list data from Reference
+ * The main attributes that function hope are:
+ * @param {string} reference.tableName
+ * @param {string} reference.query
+ */
+export function getLookupList(reference) {
+  return Instance.call(this).requestLookupListFromReference(reference)
+}
+
+/**
+ * Request a Lookup data from Reference
+ * The main attributes that function hope are:
+ * @param {string} reference.tableName
+ * @param {string} reference.directQuery
+ * @param {string|number} value
+ */
+export function getLookup(reference) {
+  return Instance.call(this).requestLookupFromReference({
+    tableName: reference.tableName,
+    directQuery: reference.directQuery
+  }, reference.value)
+}
+
+/**
+ * Request a process
+ * This function allows follow structure:
+ * @param {object}  process
+ * @param {string}  process.uuid, uuid from process to run
+ * @param {integer} process.tableName, table name of tab, used only window
+ * @param {integer} process.recordId, record identifier, used only window
+ * @param {array}   process.parameters, parameters from process
+      [ { columnName, value } ]
+ * @param {array}   process.selection, selection records, used only browser
+      [ {
+          selectionId,
+          selectionValues [
+            { columnName, value }
+          ]
+      } ]
+ */
+export function runProcess(process) {
+  var processRequest = Instance.call(this).getProcessRequest()
+  //  Fill Request process
+  processRequest.setUuid(process.uuid)
+  // report export type
+  if (process.reportType) {
+    processRequest.setReporttype(process.reportType)
+  }
+  // process params
+  if (process.parameters && process.parameters.length) {
+    process.parameters.forEach(parameter => {
+      const convertedParameter = Instance.call(this).convertParameter(parameter)
+      processRequest.addParameters(convertedParameter)
+    })
+  }
+
+  // record in window
+  if (process.tableName) {
+    processRequest.setTablename(process.tableName)
+    processRequest.setRecordid(process.recordId)
+  }
+
+  // browser selection list records
+  if (process.selection && process.selection.length) {
+    process.selection.forEach(record => {
+      // selection format = { selectionId: integer, selectionValues: array }
+      const convertedRecord = Instance.call(this).convertSelection(record)
+      processRequest.addSelections(convertedRecord)
+    })
+  }
+
+  //  Run Process
+  return Instance.call(this).requestProcess(processRequest)
+}
+
+/**
+ * Request a browser search
+ * This function allows follow structure:
+ * @param {string} browser.uuid
+ * @param {string} browser.query
+ * @param {string} browser.whereClause
+ * @param {string} browser.orderByClause
+ * @param {array}  browser.parameters
+ * [{
+ *     columnName,
+ *     value
+ * }]
+ */
+export function getBrowserSearch(browser) {
+  var browserRequest = Instance.call(this).getBrowserRequest()
+  var criteria = Instance.call(this).getCriteria('')
+  //  Fill Request browser
+  browserRequest.setUuid(browser.uuid)
+  criteria.setQuery(browser.query)
+  criteria.setWhereclause(browser.whereClause)
+  criteria.setOrderbyclause(browser.orderByClause)
+
+  if (browser.nextPageToken) {
+    browserRequest.setPageToken(browser.nextPageToken)
+  }
+  browserRequest.setCriteria(criteria)
+  /* isQueryCriteria fields parameters */
+  if (browser.parameters !== undefined) {
+    browser.parameters.forEach(parameter => {
+      const convertedParameter = Instance.call(this).convertParameter(parameter)
+      browserRequest.addParameters(convertedParameter)
+    })
+  }
+  //  Run browser
+  return Instance.call(this).requestBrowser(browserRequest)
+}
+
+// Request a Process Activity list
+export function requestProcessActivity() {
+  //  Get Process Activity
+  return Instance.call(this).requestProcessActivity()
+}
+
+export function getRecentItems() {
+  return Instance.call(this).requestRecentItems()
+}
+/**
+ * forget password
+ * @param {string} parameters.forgetPassword
+ */
+export function getForgetPassword(parameters) {
+  return Instance.call(this).requestForgetPassword(parameters)
+}
+
+/**
+ * Reference List from Window
+ * @param {string}  parameters.tableName
+ * @param {string}  parameters.windowUuid
+ * @param {string}  parameters.recordUuid
+ * @param {integer} parameters.recordId
+ */
+export function getReferencesList(parameters) {
+  var requestReference = Instance.call(this).getReferencesRequest()
+  requestReference.setWindowuuid(parameters.windowUuid)
+  requestReference.setTablename(parameters.tableName)
+  requestReference.setUuid(parameters.recordUuid)
+  if (parameters.recordId) {
+    requestReference.setRecordid(parameters.recordId)
+  }
+
+  return Instance.call(this).listReferencesRequest(requestReference)
+}
+
+/**
+ * Run callout request
+ * @param {string}  parametersCallout.windowUuid
+ * @param {integer} parametersCallout.windowNo
+ * @param {string}  parametersCallout.tabUuid
+ * @param {string}  parametersCallout.tableName
+ * @param {string}  parametersCallout.columnName
+ * @param {mixed}   parametersCallout.value
+ * @param {mixed}   parametersCallout.oldValue
+ * @param {string}  parametersCallout.callout
+ * @param {array}   parametersCallout.attributesList
+ * @returns {Map} Entity
+ */
+export function runCallOutRequest(parametersCallout) {
+  return Instance.call(this).runCalloutRequest(parametersCallout)
+}
+
+export function getDefaultValueFromServer(query) {
+  return Instance.call(this).getDefaultValue(query)
+}
+
+export function getContextInfoValueFromServer({ uuid, query }) {
+  return Instance.call(this).getContextInfoValue({ uuid: uuid, query: query })
+}
diff --git a/src/api/ADempiere/dictionary.js b/src/api/ADempiere/dictionary.js
new file mode 100644
index 00000000..10376e87
--- /dev/null
+++ b/src/api/ADempiere/dictionary.js
@@ -0,0 +1,33 @@
+import { getLanguage } from '@/lang/index'
+import { getToken } from '@/utils/auth'
+import Dictionary from '@adempiere/grpc-dictionary-client'
+import { HOST_GRPC_DICTIONARY } from '@/api/ADempiere/constants'
+
+// Get Instance for connection
+function Instance() {
+  return new Dictionary(
+    HOST_GRPC_DICTIONARY,
+    getToken(),
+    getLanguage() || 'en_US'
+  )
+}
+
+export function getWindow(uuid, childrenTabs = true) {
+  return Instance.call(this).requestWindow(uuid, childrenTabs)
+}
+
+export function getProcess(uuid) {
+  return Instance.call(this).requestProcess(uuid)
+}
+
+export function getBrowser(uuid) {
+  return Instance.call(this).requestBrowser(uuid)
+}
+
+export function getTab(uuid, childrenFields = true) {
+  return Instance.call(this).requestTab(uuid, childrenFields)
+}
+
+export function getField(uuid) {
+  return Instance.call(this).requestField(uuid)
+}
diff --git a/src/api/ADempiere/enrollment.js b/src/api/ADempiere/enrollment.js
new file mode 100644
index 00000000..f463c146
--- /dev/null
+++ b/src/api/ADempiere/enrollment.js
@@ -0,0 +1,38 @@
+import Enrollment from '@adempiere/grpc-enrollment-client'
+import { HOST_GRPC_ENROLLMENT } from '@/api/ADempiere/constants'
+
+// Get Instance for connection
+function Instance() {
+  return new Enrollment(
+    HOST_GRPC_ENROLLMENT,
+    3.9,
+    'ADempier-Vue'
+  )
+}
+
+/**
+ * enroll User
+ * @param {string} userData.name
+ * @param {string} userData.userName
+ * @param {string} userData.password
+ */
+export function enrollmentUser(userData) {
+  return Instance.call(this).enrollUser(userData)
+}
+
+/**
+ * Request from forgot password
+ * @param {string} eMailOrUserName
+ */
+export function forgotPassword(eMailOrUserName) {
+  return Instance.call(this).requestResetPassword(eMailOrUserName)
+}
+
+/**
+ * Request from reset password with token
+ * @param {string} token
+ * @param {string} password
+ */
+export function resetPasswordFromToken(token, password) {
+  return Instance.call(this).resetPasswordFromToken(token, password)
+}
diff --git a/src/api/ADempiere/index.js b/src/api/ADempiere/index.js
new file mode 100644
index 00000000..e77829ff
--- /dev/null
+++ b/src/api/ADempiere/index.js
@@ -0,0 +1,4 @@
+// Export dictionary connection
+export * from './dictionary'
+// Export data connection
+export * from './data'
diff --git a/src/api/user.js b/src/api/user.js
index de69f707..d58ec48c 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,24 +1,96 @@
-import request from '@/utils/request'
+import { getLanguage } from '@/lang/index'
+import Access from '@adempiere/grpc-access-client'
+import { HOST_GRPC_AUTHENTICATION } from '@/api/ADempiere/constants'
 
-export function login(data) {
-  return request({
-    url: '/user/login',
-    method: 'post',
-    data
-  })
+// Instance for connection
+function Instance() {
+  return new Access(
+    HOST_GRPC_AUTHENTICATION,
+    'Version Epale',
+    getLanguage() || 'en_US'
+  )
 }
 
+// Make login by UserName and password, this function can return user data for show
+export function login(loginValues) {
+  if (loginValues.role !== undefined && loginValues.role.trim() !== '') {
+    return Instance.call(this).requestLogin(
+      loginValues.userName,
+      loginValues.password,
+      loginValues.role,
+      null,
+      loginValues.language
+    )
+  } else {
+    return Instance.call(this).requestLoginDefault(
+      loginValues.userName,
+      loginValues.password,
+      loginValues.language
+    )
+  }
+}
+
+// Get User Info from session Uuid or token
 export function getInfo(token) {
-  return request({
-    url: '/user/info',
-    method: 'get',
-    params: { token }
-  })
+  return Instance.call(this).requestUserInfoFromSession(token)
+    .then(session => {
+      var roles = []
+      var rolesList = session.getRolesList().map(itemRol => {
+        roles.push(itemRol.getName())
+        return {
+          id: itemRol.getId(),
+          uuid: itemRol.getUuid(),
+          name: itemRol.getName(),
+          description: itemRol.getDescription(),
+          clientId: itemRol.getClientid(),
+          clientName: itemRol.getClientname(),
+          organizationList: itemRol.getOrganizationsList()
+        }
+      })
+      // TODO: Add user.id, user.level in request
+      const user = session.getUserinfo()
+
+      const response = {
+        name: user.getName(),
+        comments: user.getComments(),
+        description: user.getDescription(),
+        // TODO: Add from ADempiere
+        avatar: 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4',
+        roles: roles, // rol list names, used from app (src/permission.js, src/utils/permission.js)
+        rolesList: rolesList,
+        responseGrpc: session
+      }
+      return response
+    }).catch(error => {
+      console.log(error)
+    })
 }
 
-export function logout() {
-  return request({
-    url: '/user/logout',
-    method: 'post'
-  })
+/**
+ * Get session info
+ * @param {string} sessionUuid
+ */
+export function getSessionInfo(sessionUuid) {
+  return Instance.call(this).getSession(sessionUuid)
+}
+
+// Logout from server
+export function logout(sessionUuid) {
+  return Instance.call(this).requestLogout(sessionUuid)
+}
+
+// Get User menu from server
+export function getMenu(sessionUuid) {
+  return Instance.call(this).requestUserMenuFromSession(sessionUuid)
+}
+
+/**
+ *
+ * @param {string} attributes.sessionUuid
+ * @param {string} attributes.roleUuid
+ * @param {string} attributes.organizationUuid
+ * @param {string} attributes.warehouseUuid
+ */
+export function changeRole(attributes) {
+  return Instance.call(this).requestChangeRole(attributes)
 }
diff --git a/src/components/ADempiere/Badge/index.vue b/src/components/ADempiere/Badge/index.vue
new file mode 100644
index 00000000..f17293c8
--- /dev/null
+++ b/src/components/ADempiere/Badge/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-badge :value="getRecordNotification.length" :hidden="getRecordNotification.length === 0" type="primary" class="item" style="vertical-align: baseline;">
+    <el-popover
+      placement="bottom"
+      width="400"
+      trigger="click"
+    >
+      <el-table
+        :data="getRecordNotification"
+        :highlight-current-row="true"
+        @row-click="handleCurrentChange"
+      >
+        <el-table-column prop="name" :label="$t('navbar.badge.Notifications')" />
+        <el-table-column
+          fixed="right"
+          width="50"
+        >
+          <template slot="header">
+            <el-button
+              icon="el-icon-delete"
+              type="text"
+              @click.native.prevent="deleteAll()"
+            />
+          </template>
+          <template slot-scope="scope">
+            <el-button
+              icon="el-icon-close"
+              type="text"
+              size="small"
+              @click.native.prevent="deleteRow(scope.$index, getRecordNotification)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="50"
+        >
+          <router-link :to="{ name: 'ProcessActivity' }">
+            <el-tooltip effect="dark" :content="$t('navbar.badge.link')" placement="top-start">
+              <svg-icon icon-class="tree-table" />
+            </el-tooltip>
+          </router-link>
+        </el-table-column>
+      </el-table>
+      <el-button slot="reference" type="text" icon="el-icon-bell" style="float: left;color: #000000;font-size: 121%;font-weight: 615!important;padding-top: 14px;" />
+    </el-popover>
+  </el-badge>
+</template>
+<script>
+export default {
+  name: 'Badge',
+  data() {
+    return {
+      currentRow: null
+    }
+  },
+  computed: {
+    getRecordNotification() {
+      return this.$store.getters.getNotificationProcess
+    }
+  },
+  watch: {
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$refs.badge && this.$refs.badge.blur()
+      this.options = []
+      this.show = false
+    },
+    handleCurrentChange(getRecordNotification, val, index, rows) {
+      if (val !== null) {
+        if (getRecordNotification && getRecordNotification.isReport) {
+          this.$router.push({
+            name: 'Report Viewer',
+            params: {
+              processId: getRecordNotification.processId,
+              instanceUuid: getRecordNotification.instanceUuid,
+              fileName: getRecordNotification.download
+            }
+          })
+        } else {
+          this.$router.push({
+            name: 'ProcessActivity'
+          })
+        }
+      }
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1)
+    },
+    deleteAll() {
+      // rows.splice(index, rows.lenght)
+      this.getRecordNotification.splice(0)
+    }
+  }
+}
+</script>
+
+<style>
+  .el-badge__content.is-fixed {
+    position: absolute;
+    top: 6px;
+    right: 10px;
+    -webkit-transform: translateY(-50%) translateX(100%);
+    transform: translateY(-50%) translateX(100%);
+  }
+</style>
diff --git a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
new file mode 100644
index 00000000..e74a8f2a
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="container-submenu container-context-menu">
+    <el-menu :default-active="activeMenu" :router="false" class="el-menu-demo" mode="horizontal" menu-trigger="hover" unique-opened>
+      <template>
+        <el-submenu v-if="relations !== undefined && relations.length" class="el-menu-item" index="1">
+          <template slot="title">
+            {{ $t('components.contextMenuRelations') }}
+          </template>
+          <el-scrollbar wrap-class="scroll">
+            <item v-for="(relation, index) in relations" :key="index" :item="relation" />
+          </el-scrollbar>
+        </el-submenu>
+        <el-menu-item v-else disabled index="1">
+          {{ $t('components.contextMenuRelations') }}
+        </el-menu-item>
+        <el-submenu v-if="actions !== undefined && actions.length" class="el-menu-item" index="2" @click.native="runAction(actions[0])">
+          <template slot="title">
+            {{ $t('components.contextMenuActions') }}
+          </template>
+          <template v-for="(action, index) in actions">
+            <el-submenu v-if="action.childs" :key="index" :index="action.name" :disabled="action.disabled">
+              <template slot="title">
+                {{ action.name }}
+              </template>
+              <el-menu-item v-for="(child, key) in action.childs" :key="key" :index="child.uuid" @click="runAction(child)">
+                {{ child.name }}
+              </el-menu-item>
+            </el-submenu>
+            <el-menu-item v-else :key="index" :index="action.name" :disabled="action.disabled" @click="runAction(action)">
+              {{ action.name }}
+            </el-menu-item>
+          </template>
+          <el-menu-item v-show="isReport" index="4">
+            <a :href="downloads" :download="file">
+              {{ $t('components.contextMenuDownload') }}
+            </a>
+          </el-menu-item>
+          <el-menu-item v-if="getDataSelection.length > 0 && panelType === 'browser'" index="6" @click="exporBrowser">
+            {{ $t('components.contextMennuExport') }}
+          </el-menu-item>
+          <el-menu-item v-if="panelType === 'window'" index="7" @click="exporBrowser">
+            {{ $t('components.contextMennuWindowReport') }}
+          </el-menu-item>
+          <el-menu-item v-if="panelType !== 'process'" index="8" @click="refreshData">
+            {{ $t('components.contextMenuRefresh') }}
+          </el-menu-item>
+          <el-menu-item index="5" @click="setShareLink">
+            {{ $t('components.contextMenuShareLink') }}
+          </el-menu-item>
+        </el-submenu>
+        <el-menu-item v-else disabled index="2">
+          {{ $t('components.contextMenuActions') }}
+        </el-menu-item>
+        <el-submenu :disabled="!isReferencesLoaded" class="el-menu-item" index="3">
+          <template slot="title">
+            {{ $t('components.contextMenuReferences') }}
+          </template>
+          <template v-if="references && references.referencesList">
+            <template v-for="(reference, index) in references.referencesList">
+              <el-menu-item :key="index" :index="reference.displayName" @click="runAction(reference)">
+                {{ reference.displayName }}
+              </el-menu-item>
+            </template>
+          </template>
+        </el-submenu>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { contextMixin } from '@/components/ADempiere/ContextMenu/contextMenuMixin'
+
+export default {
+  name: 'ContextMenuDesktop',
+  mixins: [contextMixin]
+}
+</script>
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMixin.js b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
new file mode 100644
index 00000000..a4451660
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
@@ -0,0 +1,410 @@
+import { showNotification } from '@/utils/ADempiere/notification'
+import Item from './items'
+import { convertFieldListToShareLink } from '@/utils/ADempiere/valueUtil'
+
+export const contextMixin = {
+  components: {
+    Item
+  },
+  props: {
+    menuParentUuid: {
+      type: String,
+      default: undefined
+    },
+    // uuid of the component where it is called
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    // uuid of the component where it is called
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    panelType: {
+      type: String,
+      default: undefined
+    },
+    isReport: {
+      type: Boolean,
+      default: false
+    },
+    lastParameter: {
+      type: String,
+      default: undefined
+    },
+    reportFormat: {
+      type: String,
+      default: undefined
+    },
+    modalMetadata: {
+      type: Object,
+      default: () => {}
+    },
+    // used only window
+    isInsertRecord: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      actions: [],
+      references: [],
+      file: this.$store.getters.getProcessResult.download,
+      downloads: this.$store.getters.getProcessResult.url,
+      metadataMenu: {},
+      recordUuid: this.$route.query.action,
+      isReferencesLoaded: false,
+      exportDefault: 'xls'
+    }
+  },
+  computed: {
+    activeMenu() {
+      const { meta, path } = this.$route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    getDataSelection() {
+      return this.$store.getters.getDataRecordSelection(this.containerUuid)
+    },
+    relations() {
+      if (this.$route.params.menuParentUuid !== undefined) {
+        return this.$store.getters.getRelations(this.$route.params.menuParentUuid)
+      }
+      return this.$store.getters.getRelations(this.menuParentUuid)
+    },
+    getterContextMenu() {
+      return this.$store.getters.getContextMenu(this.containerUuid)
+    },
+    isReferecesContent() {
+      if (this.panelType === 'window' && !this.isEmptyValue(this.recordUuid) && this.recordUuid !== 'create-new') {
+        return true
+      }
+      return false
+    },
+    getterReferences() {
+      if (this.isReferecesContent) {
+        return this.$store.getters.getReferencesList(this.parentUuid, this.recordUuid)
+      }
+      return []
+    },
+    permissionRoutes() {
+      return this.$store.getters.permission_routes
+    },
+    valuesPanelToShare() {
+      return this.$store.getters.getParametersToShare({
+        containerUuid: this.containerUuid,
+        isOnlyDisplayed: true,
+        isAdvancedQuery: this.$route.query.action === 'advancedQuery'
+      })
+    },
+    getterDataLog() {
+      if (this.panelType === 'window') {
+        return this.$store.getters.getDataLog(this.containerUuid, this.recordUuid)
+      }
+      return undefined
+    },
+    processParametersExecuted() {
+      return this.$store.getters.getCachedReport(this.$route.params.instanceUuid).parameters
+    },
+    getterWindowOldRoute() {
+      if (this.panelType === 'window') {
+        const oldRoute = this.$store.state.windowControl.windowOldRoute
+        if (!this.isEmptyValue(oldRoute.query.action) && oldRoute.query.action !== 'create-new' && this.$route.query.action === 'create-new') {
+          return oldRoute
+        }
+      }
+      return false
+    }
+  },
+  watch: {
+    '$route.query.action'(actionValue) {
+      this.recordUuid = actionValue
+      // only requires updating the context menu if it is Window
+      if (this.panelType === 'window') {
+        this.generateContextMenu()
+        this.getReferences()
+      }
+    },
+    isInsertRecord(newValue, oldValue) {
+      if (this.panelType === 'window' && newValue !== oldValue) {
+        this.generateContextMenu()
+      }
+    },
+    getterDataLog(newValue, oldValue) {
+      if (this.panelType === 'window' && newValue !== oldValue) {
+        this.generateContextMenu()
+      }
+    }
+  },
+  created() {
+    this.generateContextMenu()
+  },
+  mounted() {
+    this.getReferences()
+  },
+  methods: {
+    showNotification,
+    refreshData() {
+      if (this.panelType === 'window') {
+        this.$store.dispatch('getDataListTab', {
+          parentUuid: this.parentUuid,
+          containerUuid: this.containerUuid,
+          isRefreshPanel: true,
+          recordUuid: this.recordUuid
+        })
+      } else if (this.panelType === 'browser') {
+        this.$store.dispatch('getBrowserSearch', {
+          containerUuid: this.containerUuid,
+          isClearSelection: true
+        })
+      }
+    },
+    getReferences() {
+      if (this.isReferecesContent) {
+        var references = this.getterReferences
+        if (references && references.length) {
+          this.references = references
+          this.isReferencesLoaded = true
+        } else {
+          this.$store.dispatch('getReferencesListFromServer', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            recordUuid: this.recordUuid
+          })
+            .then(response => {
+              this.references = this.$store.getters.getReferencesList(this.parentUuid, this.recordUuid)
+              if (this.references.referencesList.length) {
+                this.isReferencesLoaded = true
+              } else {
+                this.isReferencesLoaded = false
+              }
+            })
+            .catch(error => {
+              console.warn('References Load Error ' + error.code + ': ' + error.message)
+            })
+        }
+      } else {
+        this.references = []
+        this.isReferencesLoaded = false
+      }
+    },
+    exporBrowser() {
+      this.$store.dispatch('startProcess', {
+        parentUuid: this.parentUuid,
+        containerUuid: this.containerUuid,
+        panelType: this.panelType, // determinate if get table name and record id (window) or selection (browser)
+        reportFormat: this.exportDefault
+      })
+        .catch(error => {
+          console.warn(error)
+        })
+    },
+    generateContextMenu() {
+      this.metadataMenu = this.getterContextMenu
+      this.actions = this.metadataMenu.actions
+
+      if (this.actions && this.actions.length) {
+        this.actions.forEach(itemAction => {
+          // if no exists set prop with value
+          itemAction.disabled = false
+          if (this.$route.name !== 'Report Viewer' && itemAction.action === 'changeParameters') {
+            itemAction.disabled = true
+          }
+          if (this.$route.meta.type === 'report' && itemAction.action === 'startProcess') {
+            itemAction.reportExportType = 'html'
+          }
+          if (this.$route.meta.type === 'process' && itemAction.type === 'summary') {
+            itemAction.disabled = true
+          }
+
+          if (this.$route.meta.type === 'window') {
+            if (this.recordUuid === 'create-new') {
+              itemAction.disabled = true
+            } else {
+              if (this.isInsertRecord) {
+                itemAction.disabled = false
+              } else {
+                itemAction.disabled = true
+              }
+            }
+            if (itemAction.action === 'undoModifyData') {
+              itemAction.disabled = Boolean(!this.getterDataLog && !this.getterWindowOldRoute)
+            }
+          }
+        })
+      }
+    },
+    showModal(action) {
+      // TODO: Refactor and remove redundant dispatchs
+      if (action.type === 'process') {
+        var processData = this.$store.getters.getProcess(action.uuid)
+        if (processData === undefined) {
+          this.$store.dispatch('getProcessFromServer', {
+            containerUuid: action.uuid,
+            routeToDelete: this.$route
+          })
+            .then(response => {
+              this.$store.dispatch('setShowDialog', {
+                type: action.type,
+                action: response
+              })
+            }).catch(error => {
+              console.warn('ContextMenu: Dictionary Process (State) - Error ' + error.code + ': ' + error.message)
+            })
+        } else {
+          this.$store.dispatch('setShowDialog', { type: action.type, action: processData })
+        }
+      } else {
+        this.$store.dispatch('setShowDialog', { type: action.type, action: this.modalMetadata })
+      }
+    },
+    runAction(action) {
+      if (action.type === 'action') {
+        // run process or report
+        const fieldNotReady = this.$store.getters.isNotReadyForSubmit(this.$route.meta.uuid)
+        if (!fieldNotReady) {
+          var containerParams = this.$route.meta.uuid
+          if (this.lastParameter !== undefined) {
+            containerParams = this.lastParameter
+          }
+
+          var parentMenu = this.menuParentUuid
+          if (this.$route.params) {
+            if (this.$route.params.menuParentUuid) {
+              parentMenu = this.$route.params.menuParentUuid
+            }
+          }
+          if (this.panelType === 'process') {
+            this.$store.dispatch('setTempShareLink', { processId: this.$route.params.processId, href: window.location.href })
+          }
+          this.$store.dispatch(action.action, {
+            action: action,
+            parentUuid: this.containerUuid,
+            containerUuid: containerParams, // EVALUATE IF IS action.uuid
+            panelType: this.panelType, // determinate if get table name and record id (window) or selection (browser)
+            reportFormat: this.$route.query.reportType ? this.$route.query.reportType : action.reportExportType,
+            menuParentUuid: parentMenu, // to load relations in context menu (report view)
+            routeToDelete: this.$route
+          })
+            .catch(error => {
+              console.warn(error)
+            })
+          if (this.panelType === 'process') {
+            // TODO: Verify use
+            this.$store.dispatch('deleteRecordContainer', {
+              viewUuid: this.$route
+            })
+          }
+        } else {
+          this.showNotification({
+            type: 'warning',
+            title: this.$t('notifications.emptyValues'),
+            name: '<b>' + fieldNotReady.name + '.</b> ',
+            message: this.$t('notifications.fieldMandatory')
+          })
+        }
+      } else if (action.type === 'process') {
+        // run process associate with view (window or browser)
+        this.showModal(action)
+        if (this.panelType === 'process' || this.panelType === 'browser' || this.panelType === 'report') {
+          this.$store.dispatch('resetPanelToNew', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            panelType: this.panelType
+          })
+        }
+      } else if (action.type === 'dataAction') {
+        if (action.action === 'undoModifyData' && Boolean(!this.getterDataLog) && this.getterWindowOldRoute) {
+          this.$router.push({
+            path: this.getterWindowOldRoute.path,
+            query: {
+              ...this.getterWindowOldRoute.query
+            }
+          })
+        } else {
+          this.$store.dispatch(action.action, {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            recordUuid: this.recordUuid,
+            panelType: this.panelType,
+            isNewRecord: action.action === 'resetPanelToNew'
+          })
+        }
+      } else if (action.type === 'reference') {
+        this.$store.dispatch('getWindowByUuid', { routes: this.permissionRoutes, windowUuid: action.windowUuid })
+        if (action.windowUuid && action.recordUuid) {
+          var windowRoute = this.$store.getters.getWindowRoute(action.windowUuid)
+          this.$router.push({ name: windowRoute.name, query: { action: action.type, referenceUuid: action.uuid, tabParent: 0 }})
+        }
+      }
+    },
+    setShareLink() {
+      var shareLink = this.panelType === 'window' || window.location.href.includes('?') ? `${window.location.href}&` : `${window.location.href}?`
+      if (this.$route.name === 'Report Viewer') {
+        var processParameters = convertFieldListToShareLink(this.processParametersExecuted)
+        var reportFormat = this.$store.getters.getReportType
+        shareLink = this.$store.getters.getTempShareLink
+        if (String(processParameters).length) {
+          shareLink += '?' + processParameters
+          shareLink += `&reportType=${reportFormat}`
+        }
+      } else {
+        if (String(this.valuesPanelToShare).length) {
+          shareLink += this.valuesPanelToShare
+        }
+        if (this.$route.query.action && this.$route.query.action !== 'create-new' && this.$route.query.action !== 'reference' && this.$route.query.action !== 'advancedQuery') {
+          shareLink = window.location.href
+        }
+      }
+      if (shareLink !== this.$route.fullPath) {
+        this.activeClipboard(shareLink)
+      }
+    },
+    fallbackCopyTextToClipboard(text) {
+      var textArea = document.createElement('textarea')
+      textArea.value = text
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      try {
+        var successful = document.execCommand('copy')
+        if (successful) {
+          var message = this.$t('notifications.copySuccessful')
+          this.clipboardMessage(message)
+        }
+      } catch (err) {
+        message = this.$t('notifications.copyUnsuccessful')
+        this.clipboardMessage(message)
+      }
+      document.body.removeChild(textArea)
+    },
+    activeClipboard(text) {
+      if (!navigator.clipboard) {
+        this.fallbackCopyTextToClipboard(text)
+        return
+      }
+      navigator.clipboard.writeText(text)
+        .then(() => {
+          var message = this.$t('notifications.copySuccessful')
+          this.clipboardMessage(message)
+        })
+        .catch(() => {
+          var message = this.$t('notifications.copyUnsuccessful')
+          this.clipboardMessage(message)
+        })
+      navigator.clipboard.writeText(text)
+    },
+    clipboardMessage(message) {
+      this.$message({
+        message: message,
+        type: 'success',
+        duration: 1500
+      })
+    }
+  }
+}
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMobile.vue b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
new file mode 100644
index 00000000..146c47e5
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="container-submenu-mobile container-context-menu">
+    <right-menu>
+      <el-menu :default-active="activeMenu" :router="false" class="el-menu-demo" mode="vertical" menu-trigger="hover" unique-opened style="width: 258px; float: right;">
+        <el-submenu index="1">
+          <template slot="title">
+            <svg-icon icon-class="tree" /> {{ $t('components.contextMenuRelations') }}
+          </template>
+          <el-menu-item-group>
+            <el-scrollbar wrap-class="scroll">
+              <item v-for="(relation, index) in relations" :key="index" :item="relation" />
+            </el-scrollbar>
+          </el-menu-item-group>
+        </el-submenu>
+        <el-submenu index="2">
+          <template slot="title">
+            <svg-icon icon-class="link" />{{ $t('components.contextMenuActions') }}
+          </template>
+          <el-menu-item-group>
+            <el-scrollbar wrap-class="scroll">
+              <template v-for="(action, index) in actions">
+                <el-submenu v-if="action.childs" :key="index" :index="action.name" :disabled="action.disabled">
+                  <template slot="title">
+                    {{ action.name }}
+                  </template>
+                  <el-menu-item v-for="(child, key) in action.childs" :key="key" :index="child.uuid" @click="runAction(child)">
+                    {{ child.name }}
+                  </el-menu-item>
+                </el-submenu>
+                <el-menu-item v-else :key="index" :index="action.name" :disabled="action.disabled" @click="runAction(action)">
+                  <svg-icon v-if="action.type === 'process'" icon-class="component" /> {{ action.name }}
+                </el-menu-item>
+              </template>
+              <el-menu-item v-show="isReport" index="4">
+                <a :href="downloads" :download="file">
+                  {{ $t('components.contextMenuDownload') }}
+                </a>
+              </el-menu-item>
+              <el-menu-item index="5" @click="setShareLink">
+                {{ $t('components.contextMenuShareLink') }}
+              </el-menu-item>
+              <el-menu-item index="6" @click="refreshData">
+                {{ $t('components.contextMenuRefresh') }}
+              </el-menu-item>
+            </el-scrollbar>
+          </el-menu-item-group>
+        </el-submenu>
+        <el-submenu :disabled="!isReferecesContent && !isReferencesLoaded" class="el-menu-item" index="3">
+          <template slot="title">
+            {{ $t('components.contextMenuReferences') }}
+          </template>
+          <template v-if="references && references.referencesList">
+            <template v-for="(reference, index) in references.referencesList">
+              <el-menu-item :key="index" :index="reference.displayName" @click="runAction(reference)">
+                {{ reference.displayName }}
+              </el-menu-item>
+            </template>
+          </template>
+        </el-submenu>
+      </el-menu>
+    </right-menu>
+  </div>
+</template>
+
+<script>
+import { contextMixin } from '@/components/ADempiere/ContextMenu/contextMenuMixin'
+import RightMenu from '@/components/RightPanel/menu'
+
+export default {
+  name: 'ContextMenuMobile',
+  components: {
+    RightMenu
+  },
+  mixins: [contextMixin]
+}
+</script>
diff --git a/src/components/ADempiere/ContextMenu/icon.js b/src/components/ADempiere/ContextMenu/icon.js
new file mode 100644
index 00000000..fb23ca16
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/icon.js
@@ -0,0 +1,32 @@
+
+export const icon = [
+  {
+    type: 'window',
+    icon: 'tab'
+  },
+  {
+    type: 'report',
+    icon: 'skill'
+  },
+  {
+    type: 'task',
+    icon: 'size'
+  },
+  {
+    type: 'process',
+    icon: 'component'
+  },
+  {
+    type: 'browser',
+    icon: 'search'
+  },
+  {
+    type: 'workflow',
+    icon: 'example'
+  },
+  {
+    type: 'form',
+    icon: 'form'
+  }
+
+]
diff --git a/src/components/ADempiere/ContextMenu/index.vue b/src/components/ADempiere/ContextMenu/index.vue
new file mode 100644
index 00000000..7e8bce09
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <component
+    :is="templateDevice"
+    :menu-parent-uuid="menuParentUuid"
+    :parent-uuid="parentUuid"
+    :container-uuid="containerUuid"
+    :panel-type="panelType"
+    :is-report="isReport"
+    :last-parameter="lastParameter"
+    :report-format="reportFormat"
+    :modal-metadata="modalMetadata"
+    :is-insert-record="isInsertRecord"
+  />
+</template>
+
+<script>
+export default {
+  name: 'ContextMenu',
+  props: {
+    menuParentUuid: {
+      type: String,
+      default: undefined
+    },
+    // uuid of the component where it is called
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    // uuid of the component where it is called
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    panelType: {
+      type: String,
+      default: undefined
+    },
+    isReport: {
+      type: Boolean,
+      default: false
+    },
+    lastParameter: {
+      type: String,
+      default: undefined
+    },
+    reportFormat: {
+      type: String,
+      default: undefined
+    },
+    modalMetadata: {
+      type: Object,
+      default: () => {}
+    },
+    // used only window
+    isInsertRecord: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    templateDevice() {
+      var template = 'contextMenuDesktop'
+      if (this.isMobile) {
+        template = 'contextMenuMobile'
+      }
+      return () => import(`@/components/ADempiere/ContextMenu/${template}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-submenu .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 27px !important;
+    padding: 0 45px;
+    min-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+</style>
+<style>
+  .Run-Report {
+    position: absolute;
+    right: 102%;
+    border: 0;
+  }
+  .icon-menu {
+    position: absolute;
+    right: 140%;
+    margin-top: -38%;
+  }
+  .List-Report {
+    border: 0;
+    background: transparent;
+  }
+  .container-context-menu {
+    z-index: 1;
+  }
+
+  .container-submenu-mobile {
+    position: absolute;
+    height: 39px !important;
+    width: 39px !important;
+    right: 0;
+    top: 0;
+  }
+
+  .container-submenu {
+    position: absolute;
+    height: 39px !important;
+    right: 0;
+    top: -1px;
+  }
+
+  ul.el-menu-demo > .el-menu-item {
+    height: 39px !important;
+    line-height: 39px !important;
+    padding: 0 10px;
+  }
+
+  .el-menu-demo > .el-menu-item > .el-submenu__title {
+    line-height: 39px;
+    height: 39px !important;
+    padding: 0;
+  }
+
+  .el-menu--horizontal .el-submenu > .el-menu--horizontal {
+    left: initial !important;
+    right: 150px;
+  }
+
+  .el-menu--popup-bottom-start {
+    min-width: 150px !important;
+  }
+
+  .el-menu--popup-right-start{
+    min-width: 150px !important;
+  }
+
+  .el-menu--popup-right-start > .el-menu-item {
+    min-width: 150px;
+  }
+
+  .scroll {
+    max-height: 400px;
+  }
+
+  .el-icon-more {
+    transform: rotate(90deg);
+  }
+</style>
diff --git a/src/components/ADempiere/ContextMenu/items.vue b/src/components/ADempiere/ContextMenu/items.vue
new file mode 100644
index 00000000..0d7be85d
--- /dev/null
+++ b/src/components/ADempiere/ContextMenu/items.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-menu-item
+    v-if="item.meta.type !== 'summary'"
+    v-show="item.meta.uuid!==$route.meta.uuid"
+    :index="item.meta.uuid"
+    @click="handleClick(item)"
+  >
+    <svg-icon v-if="isMobile" :icon-class="classIconMenuRight" /> {{ item.meta.title }}
+  </el-menu-item>
+  <el-submenu v-else :index="item.meta.title" popper-append-to-body>
+    <template slot="title">
+      <svg-icon v-if="isMobile" icon-class="nested" /> {{ item.meta.title }}
+    </template>
+    <!-- <el-scrollbar wrap-class="scroll"> -->
+    <item v-for="(child, key) in item.children" :key="key" :item="child">
+      {{ child.meta.title }}
+    </item>
+    <!-- </el-scrollbar> -->
+  </el-submenu>
+</template>
+
+<script>
+import { icon } from '@/components/ADempiere/ContextMenu/icon'
+
+export default {
+  name: 'Item',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    classIconMenuRight(iconMenu) {
+      var typeMenu = this.item.meta.type
+      iconMenu = icon.find(function(element) {
+        return element.type === typeMenu
+      })
+      return iconMenu.icon
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$router.push({ name: item.name, query: { tabParent: 0 }})
+    }
+  }
+}
+</script>
+
+<style>
+	.scroll {
+    max-height: 400px;
+  }
+</style>
diff --git a/src/components/ADempiere/DataTable/filterColumns.vue b/src/components/ADempiere/DataTable/filterColumns.vue
new file mode 100644
index 00000000..1c1545bb
--- /dev/null
+++ b/src/components/ADempiere/DataTable/filterColumns.vue
@@ -0,0 +1,76 @@
+<template>
+  <el-select
+    v-model="getterFieldListShowed"
+    :filterable="!isMobile"
+    :placeholder="$t('components.filterableItems')"
+    multiple
+    size="mini"
+    collapse-tags
+    value-key="key"
+    class="select"
+  >
+    <el-option
+      v-for="(item, key) in getterFieldListAvailable"
+      :key="key"
+      :label="item.name"
+      :value="item.columnName"
+    />
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'FilterColumns',
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    getterFieldList() {
+      return this.$store.getters.getFieldsListFromPanel(this.containerUuid)
+    },
+    // available fields
+    getterFieldListAvailable() {
+      return this.getterFieldList.filter(fieldItem => {
+        const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic
+        return fieldItem.isActive && isDisplayed && !fieldItem.isKey
+      })
+    },
+    getterFieldListShowed: {
+      get: function() {
+        // columns showed
+        return this.getterFieldList.filter(itemField => {
+          if (itemField.isShowedTableFromUser && (itemField.isDisplayed || itemField.isDisplayedFromLogic) && !itemField.isKey) {
+            return true
+          }
+        }).map(itemField => {
+          return itemField.columnName
+        })
+      },
+      set: function(selecteds) {
+        // set columns to show/hidden in vuex store
+        this.addField(selecteds)
+      }
+    }
+  },
+  methods: {
+    /**
+     * Set columns to hidden/showed in table
+     * @param {array} selectedValues
+     */
+    addField(selectedValues) {
+      this.$store.dispatch('changeFieldAttributesBoolean', {
+        containerUuid: this.containerUuid,
+        fieldsIncludes: selectedValues,
+        attribute: 'isShowedTableFromUser',
+        valueAttribute: true
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/DataTable/fixedColumns.vue b/src/components/ADempiere/DataTable/fixedColumns.vue
new file mode 100644
index 00000000..e276bd06
--- /dev/null
+++ b/src/components/ADempiere/DataTable/fixedColumns.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-select
+    v-model="columnsFixed"
+    :filterable="!isMobile"
+    :placeholder="$t('components.fixedleItems')"
+    multiple
+    size="mini"
+    collapse-tags
+    value-key="key"
+    @change="addField"
+  >
+    <el-option
+      v-for="(item, key) in columnListAvailable"
+      :key="key"
+      :label="item.name"
+      :value="item.columnName"
+    />
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'FixedColumns',
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      columnsFixed: [], // columns showed
+      columnListAvailable: [] // available fields
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    getterFieldList() {
+      return this.$store.getters.getFieldsListFromPanel(this.containerUuid)
+    }
+  },
+  created() {
+    this.getPanel()
+  },
+  methods: {
+    getPanel() {
+      var fieldList = this.getterFieldList
+      if (fieldList && fieldList.length) {
+        this.generatePanel(fieldList)
+      }
+    },
+    generatePanel(fieldList) {
+      this.columnListAvailable = fieldList.filter(fieldItem => {
+        return this.isDisplayed(fieldItem)
+      })
+    },
+    isDisplayed(field) {
+      var isDisplayed = field.isActive && field.isDisplayed && field.isDisplayedFromLogic && !field.isKey
+      if (field.isFixedTableColumn && field.isDisplayed) {
+        this.columnsFixed.push(field.columnName)
+      }
+      return isDisplayed
+    },
+    /**
+     * @param {array} selectedValues
+     */
+    addField(selectedValues) {
+      this.$store.dispatch('changeFieldAttributesBoolean', {
+        containerUuid: this.containerUuid,
+        fieldsIncludes: selectedValues,
+        attribute: 'isFixedTableColumn',
+        valueAttribute: true
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/DataTable/index.vue b/src/components/ADempiere/DataTable/index.vue
new file mode 100644
index 00000000..b01e79e7
--- /dev/null
+++ b/src/components/ADempiere/DataTable/index.vue
@@ -0,0 +1,1094 @@
+<template>
+  <el-container v-if="isLoadPanel" label-position="top" style="height: inherit;">
+    <el-main style="padding: 0px !important; overflow: hidden;">
+      <el-container style="height: 100%;">
+        <el-header :style="isAdvancedQuery ? activeName ? { height: '55%', overflow: 'auto' } : { height: '18%', overflow: 'hidden' } : { height: '5%' }">
+          <el-collapse
+            v-if="isParent && isAdvancedQuery"
+            v-show="isAdvancedQuery"
+            v-model="activeName"
+            accordion
+          >
+            <el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="1">
+              <main-panel
+                :container-uuid="containerUuid"
+                :parent-uuid="parentUuid"
+                :metadata="getterPanel"
+                panel-type="table"
+                is-advanced-query
+                :class="!activeName ? 'collapse_item' : 'collapse_item_wrap'"
+              />
+            </el-collapse-item>
+          </el-collapse>
+          <div>
+            <div v-if="!isMobile">
+              <el-menu :default-active="menuTable" :class="classTableMenu + ' menu-table-container'" mode="horizontal">
+                <el-submenu index="2">
+                  <template slot="title">
+                    <i class="el-icon-more" />
+                  </template>
+                  <el-menu-item
+                    v-if="!isParent && isPanelWindow"
+                    :disabled="isDisabledAddNew"
+                    index="new"
+                    @click="addNewRow()"
+                  >
+                    {{ $t('window.newRecord') }}
+                  </el-menu-item>
+                  <el-menu-item
+                    v-if="isPanelWindow"
+                    :disabled="Boolean(getDataSelection.length < 1 || (isReadOnlyParent && !isParent))"
+                    index="delete"
+                    @click="deleteSelection()"
+                  >
+                    {{ $t('table.dataTable.deleteSelection') }}
+                  </el-menu-item>
+                  <el-menu-item index="optional" @click="optionalPanel()">
+                    {{ $t('components.filterableItems') }}
+                  </el-menu-item>
+                  <el-menu-item index="mandatory" @click="showOnlyMandatoryColumns()">
+                    {{ $t('table.dataTable.showOnlyMandatoryColumns') }}
+                  </el-menu-item>
+                  <el-menu-item index="available" @click="showAllAvailableColumns()">
+                    {{ $t('table.dataTable.showAllAvailableColumns') }}
+                  </el-menu-item>
+                </el-submenu>
+              </el-menu>
+              <el-button
+                v-if="!isParent && isPanelWindow"
+                type="text"
+                :icon="(getterNewRecords <= 0) ? 'el-icon-circle-plus' : 'el-icon-remove'"
+                style="float: right; padding-top: 8px; font-size: larger; padding-left: 6px; color: gray;"
+                :disabled="getterNewRecords <= 0 ? isDisabledAddNew : false"
+                @click="(getterNewRecords <= 0) ? addNewRow() : callOffNewRecord()"
+              />
+              <icon-element v-if="!isMobile" icon="el-icon-news">
+                <fixed-columns
+                  :container-uuid="containerUuid"
+                  :panel-type="panelType"
+                  class="header-search-input"
+                />
+              </icon-element>
+              <filter-columns
+                v-if="isOptional"
+                :container-uuid="containerUuid"
+                :panel-type="panelType"
+                class="field-optional"
+              />
+              <!-- <i class="el-icon-circle-plus-outline" /> -->
+              <div :class="{ 'show': showTableSearch }" class="table-search">
+                <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
+                <el-input
+                  ref="headerSearchSelect"
+                  v-model="searchTable"
+                  size="mini"
+                  :placeholder="$t('table.dataTable.search')"
+                  class="header-search-select"
+                />
+              </div>
+            </div>
+            <div v-else>
+              <div v-if="!isParent">
+                <el-menu :default-active="menuTable" :class="classTableMenu + ' menu-table-container'" mode="horizontal">
+                  <el-submenu index="2">
+                    <template slot="title">
+                      <i class="el-icon-more" />
+                    </template>
+                    <el-menu-item
+                      v-if="isPanelWindow"
+                      :disabled="Boolean(getDataSelection.length < 1 || (isReadOnlyParent && !isParent))"
+                      index="delete"
+                      @click="deleteSelection()"
+                    >
+                      {{ $t('table.dataTable.deleteSelection') }}
+                    </el-menu-item>
+                    <el-menu-item index="optional" @click="optionalPanel()">
+                      {{ $t('components.filterableItems') }}
+                    </el-menu-item>
+                    <el-menu-item index="fixed" @click="fixedPanel()">
+                      {{ $t('components.fixedleItems') }}
+                    </el-menu-item>
+                    <el-menu-item index="mandatory" @click="showOnlyMandatoryColumns()">
+                      {{ $t('table.dataTable.showOnlyMandatoryColumns') }}
+                    </el-menu-item>
+                    <el-menu-item index="available" @click="showAllAvailableColumns()">
+                      {{ $t('table.dataTable.showAllAvailableColumns') }}
+                    </el-menu-item>
+                    <el-menu-item
+                      v-if="!isParent && isPanelWindow"
+                      :disabled="isDisabledAddNew"
+                      index="new"
+                      @click="addNewRow()"
+                    >
+                      {{ $t('window.newRecord') }}
+                    </el-menu-item>
+                  </el-submenu>
+                </el-menu>
+                <fixed-columns
+                  :container-uuid="containerUuid"
+                  :panel-type="panelType"
+                  class="header-search-input"
+                />
+                <filter-columns
+                  v-if="isOptional"
+                  :container-uuid="containerUuid"
+                  :panel-type="panelType"
+                  class="field-optional"
+                />
+                <div :class="{ 'show' :showTableSearch }" class="table-search">
+                  <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
+                  <el-input
+                    ref="headerSearchSelect"
+                    v-model="searchTable"
+                    size="mini"
+                    :placeholder="$t('table.dataTable.search')"
+                    class="header-search-select"
+                    clearable
+                  />
+                </div>
+              </div>
+              <div v-else class="panel-expand">
+                <div :class="{ 'show': showTableSearch }" class="table-search">
+                  <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
+                  <el-input
+                    ref="headerSearchSelect"
+                    v-model="searchTable"
+                    size="mini"
+                    :placeholder="$t('table.dataTable.search')"
+                    class="header-search-select-mobile"
+                    clearable
+                  />
+                </div>
+                <el-button
+                  v-show="isParent && isPanelWindow && isMobile && getDataSelection.length"
+                  type="text"
+                  icon="el-icon-delete"
+                  style="color: black; font-size: 17px; font-weight: 605 !important;"
+                  @click="deleteSelection()"
+                />
+                <icon-element icon="el-icon-news" style="padding-top: 0px;" @click="searchRecordNavegation()">
+                  <fixed-columns
+                    :container-uuid="containerUuid"
+                    :panel-type="panelType"
+                    class="header-search-input-mobile"
+                  />
+                </icon-element>
+              </div>
+            </div>
+          </div>
+        </el-header>
+        <el-main style="padding: 0px !important; overflow: hidden;">
+          <el-table
+            ref="multipleTable"
+            v-loading="$route.query.action !== 'create-new' && isLoaded"
+            :height="getHeigthTable"
+            style="width: 100%"
+            border
+            :row-key="getterPanel.keyColumn"
+            :reserve-selection="true"
+            :row-style="rowStyle"
+            :data="showTableSearch ? filterResult() : getterDataRecords"
+            :element-loading-text="$t('notifications.loading')"
+            element-loading-background="rgba(255, 255, 255, 0.8)"
+            element-loading-spinner="el-icon-loading"
+            cell-class-name="datatable-max-cell-height"
+            @row-click="handleRowClick"
+            @row-dblclick="handleRowDblClick"
+            @select="handleSelection"
+            @select-all="handleSelectionAll"
+          >
+            <el-table-column
+              v-if="isTableSelection"
+              type="selection"
+              :prop="getterPanel.keyColumn"
+              fixed
+              min-width="50"
+            />
+            <template v-for="(fieldAttributes, key) in fieldList">
+              <el-table-column
+                v-if="isDisplayed(fieldAttributes)"
+                :key="key"
+                :label="headerLabel(fieldAttributes)"
+                :column-key="fieldAttributes.columnName"
+                :prop="fieldAttributes.columnName"
+                sortable
+                :formatter="changeOrder"
+                min-width="200"
+                :class-name="cellClass(fieldAttributes)"
+                :fixed="fieldAttributes.isFixedTableColumn"
+              >
+                <template slot-scope="scope">
+                  <template v-if="rowCanBeEdited(scope.row, fieldAttributes)">
+                    <field-definition
+                      :is-data-table="true"
+                      :is-show-label="false"
+                      :in-table="true"
+                      :metadata-field="{
+                        ...fieldAttributes,
+                        parentUuid: parentUuid,
+                        displayColumn: scope.row['DisplayColumn_' + fieldAttributes.columnName],
+                        tableIndex: scope.$index,
+                        rowKey: scope.row[getterPanel.keyColumn],
+                        keyColumn: getterPanel.keyColumn,
+                        recordUuid: scope.row.UUID
+                      }"
+                      :record-data-fields="scope.row[fieldAttributes.columnName]"
+                      size="mini"
+                      @keyup.enter.native="confirmEdit(scope.row)"
+                    />
+                  </template>
+                  <span v-else>
+                    {{ displayedValue(scope.row, fieldAttributes) }}
+                  </span>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table>
+        </el-main>
+      </el-container>
+    </el-main>
+    <el-footer style="height: 30px;">
+      <div>
+        <div style="float: right;">
+          <el-pagination
+            small
+            layout="slot, total, prev, pager, next"
+            :current-page="currentPage"
+            :page-size="defaultMaxPagination"
+            :total="getterRecordCount"
+            @current-change="handleChangePage"
+          >
+            <template v-slot>
+              <span>{{ $t('table.dataTable.selected') }}: {{ getDataSelection.length }} / </span>
+            </template>
+          </el-pagination>
+        </div>
+      </div>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+import FieldDefinition from '@/components/ADempiere/Field'
+import Sortable from 'sortablejs'
+import FilterColumns from '@/components/ADempiere/DataTable/filterColumns'
+import FixedColumns from '@/components/ADempiere/DataTable/fixedColumns'
+import IconElement from '@/components/ADempiere/IconElement'
+import { formatDate } from '@/filters/ADempiere'
+import MainPanel from '@/components/ADempiere/Panel'
+import { sortFields } from '@/utils/ADempiere'
+import { FIELD_READ_ONLY_FORM } from '@/components/ADempiere/Field/references'
+import { fieldIsDisplayed } from '@/utils/ADempiere'
+
+export default {
+  name: 'DataTable',
+  components: {
+    FieldDefinition,
+    FilterColumns,
+    FixedColumns,
+    IconElement,
+    MainPanel
+  },
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    // is used in root view with primary records
+    isParent: {
+      type: Boolean,
+      default: false
+    },
+    // Show input section from search in data
+    isSearchable: {
+      type: Boolean,
+      default: false
+    },
+    // Show check from selection row
+    isTableSelection: {
+      type: Boolean,
+      default: true
+    },
+    // Show check from selection row, send to panel form
+    isShowedPanelRecord: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searchTable: '', // text from search
+      defaultMaxPagination: 100,
+      menuTable: '1',
+      activeName: '',
+      isOptional: false,
+      isFixed: false,
+      isLoadPanelFromServer: false,
+      rowStyle: { height: '52px' },
+      sortable: null,
+      isExpand: false,
+      currentPage: 1,
+      uuidCurrentRecordSelected: '',
+      showTableSearch: false,
+      isAdvancedQuery: true
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    classTableMenu() {
+      if (this.isMobile) {
+        return 'menu-table-mobile'
+      } else if (this.$store.state.app.sidebar.opened) {
+        return 'menu-table'
+      }
+      return 'menu-table'
+    },
+    getterPanel() {
+      return this.$store.getters.getPanel(this.containerUuid)
+    },
+    getterDataRecordsAndSelection() {
+      return this.$store.getters.getDataRecordAndSelection(this.containerUuid)
+    },
+    getterRecordCount() {
+      return this.getterDataRecordsAndSelection.recordCount
+    },
+    getterDataRecords() {
+      return this.getterDataRecordsAndSelection.record
+    },
+    getterNewRecords() {
+      if (this.isPanelWindow && !this.isParent) {
+        var newRecordTable = this.getterDataRecordsAndSelection.record.filter(recordItem => {
+          return recordItem.isNew
+        })
+        return newRecordTable.length
+      }
+      return 0
+    },
+    getPageNumber() {
+      return this.getterDataRecordsAndSelection.pageNumber
+    },
+    isLoaded() {
+      return !this.getterDataRecordsAndSelection.isLoaded
+    },
+    getDataSelection() {
+      return this.getterDataRecordsAndSelection.selection
+    },
+    getterFieldIsDisplayed() {
+      return this.$store.getters.getFieldsIsDisplayed(this.containerUuid)
+    },
+    getterIsShowedCriteria() {
+      var browser = this.$store.getters.getBrowser(this.containerUuid)
+      if (browser) {
+        return browser.isShowedCriteria
+      }
+      return false
+    },
+    getHeightPanelBottom() {
+      return this.$store.getters.getSplitHeight - 25
+    },
+    getterHeight() {
+      return this.$store.getters.getHeigth
+    },
+    getHeigthTable() {
+      if (this.isPanelWindow) {
+        // table record navigation
+        if (this.isParent) {
+          if (this.isAdvancedQuery) {
+            if (!this.activeName) {
+              return this.getterHeight - 220
+            } else {
+              return this.getterHeight - 420
+            }
+          } else {
+            return this.getterHeight - 180
+          }
+        }
+        if (!this.isExpand) {
+          return this.getHeightPanelBottom + 'vh'
+        }
+        return this.getterHeight - 220
+      } else if (this.panelType === 'browser') {
+        // open browser criteria
+        if (this.getterIsShowedCriteria) {
+          // showed some field query criteria
+          if (this.getterFieldIsDisplayed.isDisplayed) {
+            return this.getterHeight - 495
+          }
+          return this.getterHeight - 415
+        }
+        return this.getterHeight - 290
+      }
+      return this.getterHeight - 300
+    },
+    fieldList() {
+      if (this.getterPanel && this.getterPanel.fieldList) {
+        return this.sortFields(
+          this.getterPanel.fieldList,
+          this.panelType !== 'browser' ? 'seqNoGrid' : 'sequence'
+        )
+      }
+      return []
+    },
+    isLoadPanel() {
+      if (this.getterPanel && this.getterPanel.fieldList) {
+        return true
+      }
+      return false
+    },
+    windowFields() {
+      if (this.isAdvancedQuery) {
+        return this.$store.getters.getPanelParameters(this.containerUuid, false, [], this.isAdvancedQuery).params
+      }
+      return undefined
+    },
+    isPanelWindow() {
+      return Boolean(this.panelType === 'window')
+    },
+    getterContextClientId() {
+      if (this.isPanelWindow) {
+        return parseInt(this.$store.getters.getContextClientId, 10)
+      }
+      return undefined
+    },
+    isReadOnlyParent() {
+      if (this.isPanelWindow) {
+        if (this.$store.getters.getContextIsActive(this.parentUuid) === false) {
+          return true
+        }
+        if (this.$store.getters.getContextProcessing(this.parentUuid) === true ||
+          this.$store.getters.getContextProcessing(this.parentUuid) === 'Y') {
+          return true
+        }
+        if (this.$store.getters.getContextProcessed(this.parentUuid)) {
+          return true
+        }
+      }
+      return false
+    },
+    isDisabledAddNew() {
+      if (this.isParent) {
+        return true
+      }
+      if (this.$route.query.action === 'create-new') {
+        return true
+      }
+      if (!this.getterPanel.isInsertRecord) {
+        return true
+      }
+      if (this.isReadOnlyParent) {
+        return true
+      }
+      if (this.getterNewRecords) {
+        return true
+      }
+      return false
+    }
+  },
+  created() {
+    this.getPanel()
+  },
+  beforeMount() {
+    this.currentPage = this.getPageNumber
+  },
+  mounted() {
+    if (this.isTableSelection) {
+      this.toggleSelection(this.getDataSelection)
+    }
+  },
+  methods: {
+    sortFields,
+    handleChange(val) {
+      val = !val
+    },
+    showOnlyMandatoryColumns() {
+      this.$store.dispatch('showOnlyMandatoryColumns', {
+        containerUuid: this.containerUuid
+      })
+    },
+    showAllAvailableColumns() {
+      this.$store.dispatch('showAllAvailableColumns', {
+        containerUuid: this.containerUuid
+      })
+    },
+    headerLabel(field) {
+      if (field.isMandatory || field.isMandatoryFromLogic) {
+        return '* ' + field.name
+      }
+      return field.name
+    },
+    /**
+     * @param {object} row, row data
+     * @param {object} field, field with attributes
+     */
+    displayedValue(row, field) {
+      if (typeof row[field.columnName] === 'boolean') {
+        // replace boolean true-false value for 'Yes' or 'Not'
+        return row[field.columnName] ? this.$t('components.switchActiveText') : this.$t('components.switchInactiveText')
+      } else if (field.componentPath === 'FieldDate' || field.componentPath === 'FieldTime') {
+        let cell = row[field.columnName]
+        if (Object.prototype.toString.call(cell) === '[object Date]') {
+          cell = cell.getTime()
+        }
+        // replace number timestamp value for date
+        return formatDate(cell, field.referenceType)
+      }
+      return row['DisplayColumn_' + field.columnName] || row[field.columnName]
+    },
+    rowCanBeEdited(record, fieldAttributes) {
+      if (!this.isParent) {
+        if (this.isPanelWindow) {
+          // getter with context
+          if (this.isReadOnlyParent) {
+            return false
+          }
+          // if is IsActive, Processed, Processing
+          if (this.isReadOnlyRow(record, fieldAttributes)) {
+            return false
+          }
+        }
+        // if isReadOnly, isReadOnlyFromLogic
+        if (this.isReadOnlyCell(record, fieldAttributes)) {
+          return false
+        }
+        if (record.isEdit) {
+          return true
+        }
+      }
+      return false
+    },
+    isReadOnlyRow(row, field) {
+      // evaluate context
+      if (this.getterContextClientId !== parseInt(row.AD_Client_ID, 10)) {
+        return true
+      }
+      if (fieldIsDisplayed(field)) {
+        // const fieldReadOnlyAllForm = FIELD_READ_ONLY_FORM.filter(item => {
+        //   return row.hasOwnProperty(item.columnName) && item.isChangedAllForm
+        // })
+        // // columnName: Processed, Processing
+        // if (fieldReadOnlyAllForm.length) {
+        //   var isReadOnlyAllRow = Boolean(fieldReadOnlyAllForm.find(item => row[item.columnName] === item.valueIsReadOnlyForm))
+        //   return isReadOnlyAllRow
+        // }
+
+        // columnName: IsActive
+        const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => {
+          return row.hasOwnProperty(item.columnName) && !item.isChangedAllForm
+        })
+        if (fieldReadOnlyForm) {
+          var isReadOnlyRow = row[fieldReadOnlyForm.columnName] === fieldReadOnlyForm.valueIsReadOnlyForm && field.columnName !== fieldReadOnlyForm.columnName
+          return isReadOnlyRow
+        }
+      }
+      return false
+    },
+    isReadOnlyCell(row, field) {
+      // TODO: Add support to its type fields
+      if (field.componentPath === 'FieldImage' || field.componentPath === 'FieldBinary') {
+        return true
+      }
+
+      const isUpdateableAllFields = field.isReadOnly || field.isReadOnlyFromLogic
+      if (this.isPanelWindow) {
+        if (field.columnName === this.getterPanel.linkColumnName ||
+          field.columnName === this.getterPanel.fieldLinkColumnName) {
+          return true
+        }
+        // edit mode is diferent to create new
+        const editMode = !this.isEmptyValue(row.UUID)
+        return (!field.isUpdateable && editMode) || (isUpdateableAllFields || field.isReadOnlyFromForm)
+      } else if (this.panelType === 'browser') {
+        // browser result
+        return field.isReadOnly
+      }
+      // other type of panels (process/reports)
+      return isUpdateableAllFields
+    },
+    deleteSelection() {
+      this.$store.dispatch('deleteSelectionDataList', {
+        parentUuid: this.parentUuid,
+        containerUuid: this.containerUuid
+      })
+      this.$store.dispatch('setRecordSelection', {
+        parentUuid: this.parentUuid,
+        containerUuid: this.containerUuid,
+        panelType: this.panelType
+      })
+    },
+    callOffNewRecord() {
+      this.getterDataRecords.shift()
+    },
+    addNewRow() {
+      if (this.getterNewRecords <= 0) {
+        this.$store.dispatch('addNewRow', {
+          parentUuid: this.parentUuid,
+          containerUuid: this.containerUuid,
+          fieldList: this.fieldList,
+          isEdit: true,
+          isSendServer: false
+        })
+      } else {
+        const fieldsEmpty = this.$store.getters.getFieldListEmptyMandatory({ containerUuid: this.containerUuid })
+        this.$message({
+          message: this.$t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+          type: 'info'
+        })
+      }
+    },
+    optionalPanel() {
+      this.showTableSearch = false
+      this.isOptional = !this.isOptional
+    },
+    fixedPanel() {
+      this.showTableSearch = false
+      this.isFixed = !this.isFixed
+    },
+    expandPanel() {
+      this.isExpand = !this.isExpand
+    },
+    async getList() {
+      this.oldgetDataDetail = this.getterDataRecords.map(v => v.id)
+      this.newgetDataDetail = this.oldgetDataDetail.slice()
+      this.$nextTick(() => {
+        this.setSort()
+      })
+    },
+    setSort() {
+      if (!this.isMobile) {
+        const el = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+        this.sortable = Sortable.create(el, {
+          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+          setData: function(dataTransfer) {
+            // to avoid Firefox bug
+            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: evt => {
+            const targetRow = this.getterDataRecords.splice(evt.oldIndex, 1)[0]
+            this.getterDataRecords.splice(evt.newIndex, 0, targetRow)
+
+            // for show the changes, you can delete in you code
+            const tempIndex = this.newgetDataDetail.splice(evt.oldIndex, 1)[0]
+            this.newgetDataDetail.splice(evt.newIndex, 0, tempIndex)
+          }
+        })
+      }
+    },
+    changeOrder() {
+      var reversed = this.getterDataRecords.reverse()
+      return reversed
+    },
+    /**
+     * @param {object} field
+     */
+    cellClass(field) {
+      var classReturn = ''
+      if (field.isReadOnly) {
+        classReturn += 'cell-no-edit'
+      }
+      if (field.componentPath === 'FieldNumber') {
+        classReturn += 'cell-align-right'
+      }
+      // return 'cell-edit'
+      return classReturn
+    },
+    /**
+     * Select or unselect rows
+     * USE ONLY MOUNTED
+     */
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    confirmEdit(row) {
+      const fieldsEmpty = this.$store.getters.getFieldListEmptyMandatory({
+        containerUuid: this.containerUuid,
+        row: row
+      })
+
+      if (row.isNew) {
+        row.isEdit = true
+        this.$message({
+          message: this.$t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+          type: 'info'
+        })
+        return
+      }
+
+      if (row.isEdit && fieldsEmpty) {
+        row.isEdit = false
+        this.$message({
+          message: this.$t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+          type: 'info'
+        })
+        return
+      }
+      row.isEdit = false
+    },
+    handleRowClick(row, column, event) {
+      if (this.isShowedPanelRecord && this.isParent) {
+        if (this.uuidCurrentRecordSelected !== row.UUID) {
+          this.uuidCurrentRecordSelected = row.UUID
+          // disabled rollback when change route
+          this.$store.dispatch('setDataLog', {})
+        }
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            action: row.UUID
+          }
+        })
+      } else {
+        if (!row.isEdit) {
+          row.isEdit = true
+          /*
+          var inSelection = this.getDataSelection.some(item => {
+            return JSON.stringify(item) === JSON.stringify(row)
+          })
+          if (inSelection) {
+            row.isEdit = true
+          }
+          */
+        }
+      }
+    },
+    handleRowDblClick(row, column, event) {
+      if (!this.isShowedPanelRecord) {
+        this.confirmEdit(row)
+      }
+    },
+    handleSelection(rowsSelection, rowSelected) {
+      this.$store.dispatch('setSelection', {
+        containerUuid: this.containerUuid,
+        selection: rowsSelection
+      })
+    },
+    isAllSelected(selection = 0) {
+      if (selection > 0) {
+        var data = this.getterDataRecords
+        return data.length === selection
+      }
+      return false
+    },
+    handleSelectionAll(rowsSelection) {
+      // var selectAll = false
+      // if (this.isAllSelected(rowsSelection.length)) {
+      //   selectAll = true
+      // }
+      this.$store.dispatch('setSelection', {
+        containerUuid: this.containerUuid,
+        selection: rowsSelection
+      })
+      // rowsSelection.forEach(row => {
+      //   row.isEdit = selectAll
+      // })
+    },
+    filterResult() {
+      var data = []
+      data = this.getterDataRecords.filter(rowItem => {
+        if (this.searchTable.trim().length) {
+          let find = false
+          Object.keys(rowItem).forEach(key => {
+            if (String(rowItem[key]).toLowerCase().includes(String(this.searchTable).toLowerCase())) {
+              find = true
+              return find
+            }
+          })
+          return find
+        }
+        return true
+      })
+      return data
+    },
+    /**
+     * Verify is displayed field in column table
+     */
+    isDisplayed(field) {
+      var isDisplayed = field.isDisplayed && field.isDisplayedFromLogic && field.isShowedTableFromUser && !field.isKey
+      //  Verify for displayed and is active
+      return field.isActive && isDisplayed
+    },
+    /**
+     * Get the tab object with all its attributes as well as the fields it contains
+     */
+    getPanel() {
+      // get panel from server only window and tab children
+      if (this.isPanelWindow && !this.isParent && !this.getterPanel) {
+        this.$store.dispatch('getPanelAndFields', {
+          containerUuid: this.containerUuid,
+          parentUuid: this.parentUuid,
+          type: this.panelType
+        }).then(response => {
+          this.isLoadPanelFromServer = true
+        }).catch(error => {
+          console.warn('FieldList Load Error ' + error.code + ': ' + error.message)
+        })
+      }
+    },
+    handleChangePage(newPage) {
+      this.$store.dispatch('setPageNumber', {
+        parentUuid: this.parentUuid,
+        containerUuid: this.containerUuid,
+        pageNumber: newPage,
+        panelType: this.panelType
+      })
+    },
+    click() {
+      this.isOptional = false
+      this.showTableSearch = !this.showTableSearch
+      if (this.showTableSearch) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+      }
+    },
+    activeAdvancedQuery(value) {
+      this.isAdvancedQuery = value
+      if (value) {
+        this.$store.dispatch('setOldAction', this.$route.query.action)
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            action: 'advancedQuery'
+          }
+        })
+      }
+      if (!value) {
+        var oldAction = this.$store.getters.getOldAction
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            action: oldAction
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .el-table-row {
+    .hover-row {
+      background-color: black;
+    }
+    .current-row {
+      .hover-row {
+        background-color: initial !important;
+      }
+    }
+  }
+</style>
+<style>
+  .el-table > .cell {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    max-height: 41px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    line-height: 23px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .el-table .cell {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    max-height: 50px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    line-height: 50px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .tr.current-row > td {
+    background-color: initial !important;
+    /* background-color: #e8f4ff; */
+  }
+  .hover-row > tr {
+    background-color: initial !important;
+  }
+  .hover-row > td {
+    background-color: initial !important;
+  }
+  .header-table-records {
+    height: 45px !important;
+    padding: 0 !important;
+  }
+  .icon-mobile {
+    padding-right: 5%;
+  }
+  .el-table th, .el-table td {
+    padding: 12px 0;
+    min-width: 0;
+    height: 64px;
+    max-height: 407px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    position: relative;
+    text-align: left;
+  }
+  .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px transparent !important;
+  }
+  .menu-table {
+    width: 75px;
+    float: right;
+    height: 39px !important;
+  }
+  .menu-table-mobile {
+    height: 39px !important;
+    width: 35px;
+    float: right;
+  }
+  ul.menu-table > .el-submenu {
+    height: 39px !important;
+    line-height: 39px !important;
+    padding: 0 10px;
+  }
+  ul.menu-table > .el-submenu > .el-submenu__title {
+    line-height: 39px !important;
+    height: 39px !important;
+    padding: 0;
+  }
+  .el-submenu__title {
+    border-bottom: 0px !important;
+    color: #303133;
+  }
+  .panel-expand {
+    float: right;
+    padding-right: 40px;
+    display: flex;
+  }
+  .field-optional {
+    margin: 3px 10px;
+    float: right;
+  }
+
+  /* used in cell type number */
+  td.cell-align-right {
+    text-align: right !important;
+  }
+  .el-collapse {
+    border-top: 1px solid #e6ebf5;
+    border-bottom: 1px solid #e6ebf5;
+    overflow: hidden;
+    width: 100%;
+  }
+</style>
+<style lang="scss" scoped>
+  .collapse_item_wrap {
+    min-height: 180px;
+    max-height: 180px;
+    will-change: height;
+    background-color: #fff;
+    overflow: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e6ebf5;
+  }
+  .el-table__header-wrapper {
+    .el-table__footer-wrapper {
+      overflow: auto;
+      /* background: black; */
+    }
+  }
+  /* style in cursor if cell is no edit */
+  .cell-no-edit {
+    cursor: not-allowed !important;
+  }
+  .cell-edit {
+    cursor: pointer !important;
+  }
+
+  .table-root {
+    padding-right: 0px;
+    .table-footer {
+      bottom: 0px;
+      float: right;
+      text-align: right;
+      padding: 10px;
+    }
+  }
+  .table-search {
+    font-size: 0 !important;
+    float: right;
+    color: #5a5e66;
+    height: 39px !important;
+    line-height: 39px !important;
+      .search-icon {
+        cursor: pointer;
+        font-size: 18px;
+        vertical-align: middle;
+      }
+    .header-search-select {
+      transition: width 0.2s;
+      width: 0 !important;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    &.show {
+      .header-search-select {
+        width: 190px !important;
+        margin-left: 10px;
+      }
+    }
+    .header-search-select-mobile {
+      transition: width 0.2s;
+      width: 0 !important;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    &.show{
+      .header-search-select-mobile {
+        width: 120px !important;
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/ADempiere/Dialog/index.vue b/src/components/ADempiere/Dialog/index.vue
new file mode 100644
index 00000000..476d93a8
--- /dev/null
+++ b/src/components/ADempiere/Dialog/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :title="modalMetadata.name"
+    :visible="isVisibleDialog"
+    :show-close="false"
+    :width="width + '%'"
+    top="5vh"
+    :close-on-press-escape="true"
+    :close-on-click-modal="true"
+  >
+    {{ modalMetadata.description }}
+    <main-panel
+      v-if="(modalMetadata.panelType === 'process' || modalMetadata.panelType === 'report') && !isEmptyValue(modalMetadata.uuid)"
+      :parent-uuid="parentUuid"
+      :container-uuid="modalMetadata.uuid"
+      :metadata="modalMetadata"
+      :is-view="false"
+      panel-type="process"
+    />
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">
+        {{ $t('components.dialogCancelButton') }}
+      </el-button>
+      <el-button type="primary" @click="runAction(modalMetadata)">
+        {{ $t('components.dialogConfirmButton') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import MainPanel from '@/components/ADempiere/Panel'
+import { showNotification } from '@/utils/ADempiere/notification'
+
+export default {
+  name: 'ModalProcess',
+  components: {
+    MainPanel
+  },
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      default: ''
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    reportExportType: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      processMetadata: {}
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    width() {
+      if (this.isMobile) {
+        return 80
+      }
+      return 50
+    },
+    isVisibleDialog() {
+      return this.$store.state.processControl.isVisibleDialog
+    },
+    modalMetadata() {
+      return this.$store.state.processControl.metadata
+    },
+    windowRecordSelected() {
+      return this.$store.state.window.recordSelected
+    }
+  },
+  methods: {
+    showNotification,
+    closeDialog() {
+      this.$store.dispatch('setShowDialog', {
+        type: this.modalMetadata.panelType,
+        action: undefined
+      })
+    },
+    runAction(action) {
+      if (action === undefined && this.windowRecordSelected !== undefined) {
+        this.$router.push({
+          name: this.$route.name,
+          query: {
+            action: this.windowRecordSelected.UUID,
+            ...this.$route.query
+          }
+        })
+        this.closeDialog()
+      } else if (action !== undefined) {
+        const fieldNotReady = this.$store.getters.isNotReadyForSubmit(action.uuid)
+        if (!fieldNotReady) {
+          this.closeDialog()
+          this.$store.dispatch('startProcess', {
+            action: action, // process metadata
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            panelType: this.panelType, // determinate if get table name and record id (window) or selection (browser)
+            reportFormat: this.reportExportType,
+            routeToDelete: this.$route
+          })
+            .catch(error => {
+              console.warn(error)
+            })
+        } else {
+          this.showNotification({
+            type: 'warning',
+            title: this.$t('notifications.emptyValues'),
+            name: '<b>' + fieldNotReady.name + '.</b> ',
+            message: this.$t('notifications.fieldMandatory')
+          })
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Dropdown/index.vue b/src/components/ADempiere/Dropdown/index.vue
new file mode 100644
index 00000000..8fb13649
--- /dev/null
+++ b/src/components/ADempiere/Dropdown/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <el-col v-if="items.children" :span="24">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item :title="title" name="1" class="collapse-item">
+        <el-row justify="space-around">
+          <template v-for="(item, index) in items.children">
+            <el-col :key="index" :span="isMobile">
+              <el-card
+                :key="index"
+                shadow="never"
+                class="custom-card"
+                :body-style="{ padding: '10px', height: '100px' }"
+                @click.native="redirect(item)"
+              >
+                <div class="icon-wrapper">
+                  <svg-icon :icon-class="item.meta.icon" />
+                </div>
+                <div class="text-wrapper">
+                  <b>{{ item.meta.title }}</b>
+                  <p class="three-dots">{{ item.meta.description }}</p>
+                </div>
+              </el-card>
+            </el-col>
+          </template>
+        </el-row>
+      </el-collapse-item>
+    </el-collapse>
+  </el-col>
+  <el-col v-else :span="isMobile">
+    <el-card
+      shadow="never"
+      class="custom-card"
+      :body-style="{ padding: '10px', height: '100px' }"
+      @click.native="redirect(items)"
+    >
+      <div class="icon-wrapper">
+        <svg-icon :icon-class="items.meta.icon" />
+      </div>
+      <div class="text-wrapper">
+        <b>{{ items.meta.title }}</b>
+        <p>{{ items.meta.description }}</p>
+      </div>
+    </el-card>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  props: {
+    items: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      activeNames: ['1']
+    }
+  },
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    },
+    isMobile() {
+      if (this.device === 'mobile') {
+        return 24
+      } else {
+        return 8
+      }
+    }
+  },
+  methods: {
+    redirect(item) {
+      if (item.meta && item.meta.type === 'window') {
+        this.$router.push({
+          name: item.name,
+          query: {
+            tabParent: 0
+          },
+          params: {
+            childs: item.children
+          }
+        })
+      } else {
+        this.$router.push({
+          name: item.name,
+          params: {
+            childs: item.children
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .custom-card {
+    margin: 10px;
+    cursor: pointer;
+  }
+  .icon-wrapper {
+    height: 100%;
+    width: 20%;
+    float: left;
+    font-size: 30px;
+    line-height: 65px;
+    padding: 6px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+    text-align: center;
+    color: #36a3f7;
+  }
+  .custom-card:hover {
+    .icon-wrapper {
+      color: #fff;
+      background: #36a3f7;
+    }
+  }
+  .text-wrapper {
+    margin-left: 50px;
+    padding-left: 15px;
+    vertical-align: middle;
+    height: 100%;
+    font-size: 13px;
+  }
+  .el-collapse-item__header {
+    height: 60px;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+  }
+  .three-dots{
+    margin-top: 0 !important;
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldBinary.vue b/src/components/ADempiere/Field/FieldBinary.vue
new file mode 100644
index 00000000..a64b87de
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldBinary.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-upload
+    :ref="metadata.columnName"
+    v-model="value"
+    :limit="metadata.Limit"
+    :on-remove="handleRemove"
+    :on-success="handleSuccess"
+    :on-error="handleError"
+    class="image-uploader"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    :disabled="isDisabled"
+    @change="preHandleChange"
+  >
+    <el-button size="small" type="primary">
+      {{ $t('components.binaryButton') }}
+    </el-button>
+    <div slot="tip" class="el-upload__tip">
+      {{ $t('components.binaryTip') }}
+    </div>
+  </el-upload>
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldBinary',
+  mixins: [fieldMixin],
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = value
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = value
+      }
+    }
+  },
+  methods: {
+    handleRemove(file) {
+      this.$message.success(`The previously uploaded file has been deleted.`)
+    },
+    handleError(file) {
+      this.$message.error(`The file does not meet the specifications.`)
+    },
+    handleSuccess(file) {
+      this.$message.success(`The file has been successfully loaded.`)
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Field/FieldButton.vue b/src/components/ADempiere/Field/FieldButton.vue
new file mode 100644
index 00000000..5b05be26
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldButton.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-input
+    :ref="metadata.columnName"
+    v-model="value"
+    type="hidden"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldButton',
+  mixins: [fieldMixin],
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = String(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = String(value)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Field/FieldColor.vue b/src/components/ADempiere/Field/FieldColor.vue
new file mode 100644
index 00000000..4fbe72e7
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldColor.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-color-picker
+    :ref="metadata.columnName"
+    v-model="value"
+    show-alpha
+    :disabled="isDisabled"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldColor',
+  mixins: [fieldMixin],
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = ''
+        }
+        this.value = String(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = ''
+        }
+        this.value = String(value)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Field/FieldDate.vue b/src/components/ADempiere/Field/FieldDate.vue
new file mode 100644
index 00000000..472f601b
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldDate.vue
@@ -0,0 +1,194 @@
+<template>
+  <el-date-picker
+    :ref="metadata.columnName"
+    v-model="value"
+    :format="formatView"
+    :value-format="formatSend"
+    :type="typePicker"
+    range-separator="-"
+    :placeholder="metadata.help"
+    :start-placeholder="$t('components.dateStartPlaceholder')"
+    :end-placeholder="$t('components.dateEndPlaceholder')"
+    unlink-panels
+    class="date-base"
+    :readonly="Boolean(metadata.readonly)"
+    :disabled="isDisabled"
+    :picker-options="typePicker === 'daterange' ? pickerOptionsDateRange : pickerOptionsDate"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { clientDateTime } from '@/utils/ADempiere'
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldDate',
+  mixins: [fieldMixin],
+  data() {
+    return {
+      pickerOptionsDate: {
+        shortcuts: [{
+          text: this.$t('components.date.Today'),
+          onClick(picker) {
+            picker.$emit('pick', new Date())
+          }
+        }, {
+          text: this.$t('components.date.Yesterday'),
+          onClick(picker) {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            picker.$emit('pick', date)
+          }
+        }, {
+          text: this.$t('components.date.Week'),
+          onClick(picker) {
+            const date = new Date()
+            var monthEndDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+            picker.$emit('pick', monthEndDay)
+          }
+        }]
+      },
+      pickerOptionsDateRange: {
+        shortcuts: [{
+          text: this.$t('components.date.Yesterday'),
+          onClick(picker) {
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24)
+            picker.$emit('pick', [start, start])
+          }
+        }, {
+          text: this.$t('components.date.Week'),
+          onClick(picker) {
+            var start_date, end_date, date, currenDate, first, last
+            start_date = new Date()
+            start_date.setHours(0, 0, 0, 0)
+            end_date = new Date()
+            date = null
+            currenDate = date ? new Date(date) : new Date()
+            first = currenDate.getDate() - currenDate.getDay('monday')
+            last = first - 7
+            start_date.setDate(last)
+            end_date.setDate(first - 1)
+            picker.$emit('pick', [start_date, end_date])
+          }
+        }, {
+          text: this.$t('components.date.LastMonth'),
+          onClick(picker) {
+            var date = new Date()
+            var monthEndDay = new Date(date.getFullYear(), date.getMonth(), 0)
+            var monthStartDay = new Date(date.getFullYear(), date.getMonth() - 1, 1)
+            picker.$emit('pick', [monthStartDay, monthEndDay])
+          }
+        }, {
+          text: this.$t('components.date.CurrentMonth'),
+          onClick(picker) {
+            var date = new Date()
+            var monthEndDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+            var monthStartDay = new Date(date.getFullYear(), date.getMonth(), 1)
+            picker.$emit('pick', [monthStartDay, monthEndDay])
+          }
+        }]
+      }
+    }
+  },
+  computed: {
+    typePicker() {
+      let range = ''
+      let time = ''
+      if (String(this.metadata.displayType) === String(16)) {
+        time = 'time'
+      }
+      if (this.metadata.isRange && !this.metadata.inTable) {
+        range = 'range'
+      }
+      return 'date' + time + range
+    },
+    /**
+     * Parse the date format to be compatible with element-ui
+     */
+    formatView() {
+      let format = this.metadata.VFormat
+        .replace(/[Y]/gi, 'y')
+        .replace(/[m]/gi, 'M')
+        .replace(/[D]/gi, 'd')
+
+      if (format === '') {
+        format = 'yyyy-MM-dd'
+      }
+      if (this.typePicker.replace('range', '') === 'datetime') {
+        format = format + ' hh:mm:ss A'
+      }
+      return format
+    },
+    formatSend() {
+      if (this.formatView) {
+        return this.formatView
+          .replace(/[h]/gi, 'H')
+          .replace(/[aA]/gi, '')
+      }
+      return undefined
+    }
+  },
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = this.parsedDateValue(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = this.parsedDateValue(value)
+      }
+    }
+  },
+  methods: {
+    clientDateTime,
+    parsedDateValue(value) {
+      if (typeof value === 'number') {
+        value = new Date(value).toUTCString()
+      }
+      if (this.isEmptyValue(value)) {
+        value = undefined
+      }
+
+      if (this.metadata.isRange) {
+        let valueTo = this.metadata.valueTo
+        if (typeof valueTo === 'number') {
+          valueTo = new Date(valueTo).toUTCString()
+        }
+        if (this.isEmptyValue(valueTo)) {
+          valueTo = undefined
+        }
+        value = [value, valueTo]
+      }
+      return value
+    },
+    // validate values before send values to store or server
+    preHandleChange(value) {
+      var valueFirst, valueTo
+      valueFirst = value
+
+      if ((this.metadata.isRange && !this.metadata.inTable) && Array.isArray(value)) {
+        valueFirst = value[0]
+        valueTo = value[1]
+      }
+      if (valueFirst === null) {
+        valueFirst = undefined
+        valueTo = undefined
+      }
+      if (typeof valueFirst !== 'object' && valueFirst !== undefined) {
+        valueFirst = new Date(valueFirst)
+        valueTo = new Date(valueTo)
+      }
+      this.handleChange(valueFirst, valueTo)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .date-base {
+    width: 100% !important;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldImage.vue b/src/components/ADempiere/Field/FieldImage.vue
new file mode 100644
index 00000000..be9a700c
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldImage.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-upload
+    :ref="metadata.columnName"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    :show-file-list="false"
+    :on-success="handleAvatarSuccess"
+    :before-upload="beforeAvatarUpload"
+    :disabled="isDisabled"
+    class="avatar-uploader"
+  >
+    <img v-if="value" :src="value" class="avatar">
+    <i v-else class="el-icon-plus avatar-uploader-icon" />
+  </el-upload>
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldImage',
+  mixins: [fieldMixin],
+  data() {
+    return {
+      value: ''
+    }
+  },
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = value
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = value
+      }
+    }
+  },
+  methods: {
+    handleAvatarSuccess(res, file) {
+      this.value = URL.createObjectURL(file.raw)
+      // TODO: define one method to control change value
+      this.handleChange(this.value)
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      // const isGIF = file.type === 'image/gif'
+      // const isBMP = file.type === 'image/bmp'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isLt2M) {
+        this.$message.error(this.$t('components.imageError'))
+      }
+      return isJPG + isPNG + isLt2M
+    }
+  }
+}
+</script>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldMixin.js b/src/components/ADempiere/Field/FieldMixin.js
new file mode 100644
index 00000000..a26693a8
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldMixin.js
@@ -0,0 +1,80 @@
+
+export const fieldMixin = {
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    },
+    // value received from data result
+    valueModel: {
+      type: [String, Number, Boolean, Date, Array],
+      default: null
+    }
+  },
+  data() {
+    // value render
+    let value = this.metadata.value
+    if (this.metadata.inTable) {
+      value = this.valueModel
+    }
+    return {
+      value: value
+    }
+  },
+  computed: {
+    getterValue() {
+      const field = this.$store.getters.getFieldFromColumnName(this.metadata.containerUuid, this.metadata.columnName)
+      if (field) {
+        return field.value
+      }
+      return undefined
+    },
+    isDisabled() {
+      return Boolean(this.metadata.readonly || this.metadata.disabled)
+    }
+  },
+  methods: {
+    activeFocus() {
+      if (this.metadata.isUpdateable) {
+        this.$refs[this.metadata.columnName].focus()
+      }
+    },
+    /**
+     * Overwrite component method if necessary
+     * validate values before send values to store or server
+     * @param {mixed} value
+     */
+    preHandleChange(value) {
+      this.handleChange(value)
+    },
+    handleChange(value, valueTo = undefined, label = undefined) {
+      const sendParameters = {
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        field: this.metadata,
+        panelType: this.metadata.panelType,
+        columnName: this.metadata.columnName,
+        newValue: value === 'NotSend' ? this.value : value,
+        valueTo: valueTo,
+        isAdvancedQuery: this.metadata.isAdvancedQuery,
+        isSendToServer: !(value === 'NotSend' || this.metadata.isAdvancedQuery),
+        isSendCallout: !(value === 'NotSend' || this.metadata.isAdvancedQuery)
+      }
+
+      if (this.metadata.inTable) {
+        this.$store.dispatch('notifyCellTableChange', {
+          ...sendParameters,
+          keyColumn: this.metadata.keyColumn,
+          tableIndex: this.metadata.tableIndex,
+          rowKey: this.metadata.rowKey
+        })
+      } else {
+        this.$store.dispatch('notifyFieldChange', {
+          ...sendParameters,
+          displayColumn: label,
+          isChangedOldValue: this.metadata.componentPath === 'FieldYesNo' && Boolean(value === 'NotSend')
+        })
+      }
+    }
+  }
+}
diff --git a/src/components/ADempiere/Field/FieldNumber.vue b/src/components/ADempiere/Field/FieldNumber.vue
new file mode 100644
index 00000000..ed02b62f
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldNumber.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-input-number
+    :ref="metadata.columnName"
+    v-model="value"
+    type="number"
+    :pattern="pattern"
+    :min="minValue"
+    :max="maxValue"
+    :placeholder="metadata.help"
+    :disabled="isDisabled"
+    :precision="precision"
+    controls-position="right"
+    :class="'display-type-' + cssClass"
+    @blur="validateInput"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldNumber',
+  mixins: [fieldMixin],
+  props: {
+    validateInput: {
+      type: Function,
+      default: () => undefined
+    }
+  },
+  data() {
+    return {
+      pattern: undefined,
+      showControls: true
+    }
+  },
+  computed: {
+    maxValue() {
+      if (!this.isEmptyValue(this.metadata.valueMax)) {
+        return Number(this.metadata.valueMax)
+      }
+      return Infinity
+    },
+    minValue() {
+      if (!this.isEmptyValue(this.metadata.valueMin)) {
+        return Number(this.metadata.valueMin)
+      }
+      return -Infinity
+    },
+    cssClass() {
+      return this.metadata.referenceType
+        .split(/(?=[A-Z])/)
+        .join('-').toLowerCase()
+    },
+    precision() {
+      if (['Number', 'Amount'].includes()) {
+        return 2
+      }
+      return undefined
+    }
+  },
+  watch: {
+    // enable to dataTable records
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = null
+        }
+        this.value = value
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = null
+        }
+        this.value = value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  /* if is controls width 100% in container */
+  .el-input-number, .el-input {
+    width: 100% !important; /* ADempiere Custom */
+  }
+
+  /** Amount reference **/
+  .display-type-amount {
+    text-align: right !important;
+    input, .el-input__inner {
+      text-align: right !important;
+    }
+  }
+  /* ADempiere Custom */
+  .el-input-number.is-controls-right .el-input__inner {
+    padding-left: 15px;
+    padding-right: 50px;
+    text-align: -webkit-right;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldSelect.vue b/src/components/ADempiere/Field/FieldSelect.vue
new file mode 100644
index 00000000..36d1e329
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldSelect.vue
@@ -0,0 +1,257 @@
+<template>
+  <el-select
+    :ref="metadata.columnName"
+    v-model="value"
+    :filterable="!isMobile"
+    :placeholder="metadata.help"
+    :loading="isLoading"
+    value-key="key"
+    class="select-base"
+    clearable
+    :disabled="isDisabled"
+    @change="preHandleChange"
+    @visible-change="getDataLookupList"
+    @clear="clearLookup"
+  >
+    <el-option
+      v-for="(option, key) in options"
+      :key="key"
+      :value="option.key"
+      :label="option.label"
+    />
+  </el-select>
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldSelect',
+  mixins: [fieldMixin],
+  data() {
+    return {
+      value: this.metadata.displayColumn,
+      isLoading: false,
+      baseNumber: 10,
+      options: [{
+        label: ' ',
+        key: undefined
+      }],
+      othersOptions: [],
+      blanckOption: {
+        label: ' ',
+        key: undefined
+      },
+      blancksValues: [null, -1, '', undefined]
+    }
+  },
+  computed: {
+    isPanelWindow() {
+      return this.metadata.panelType === 'window'
+    },
+    getterValueSelec() {
+      var field = this.$store.getters.getFieldFromColumnName(this.metadata.containerUuid, this.metadata.columnName)
+      if (field) {
+        return this.validateValue(field.displayColumn)
+      }
+      return undefined
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    getterLookupItem() {
+      return this.$store.getters.getLookupItem({
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        directQuery: this.metadata.reference.directQuery,
+        tableName: this.metadata.reference.tableName,
+        value: this.metadata.value
+      })
+    },
+    getterLookupList() {
+      return this.$store.getters.getLookupList({
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        query: this.metadata.reference.query,
+        tableName: this.metadata.reference.tableName
+      })
+    },
+    getterLookupAll() {
+      var allOptions = this.$store.getters.getLookupAll({
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        query: this.metadata.reference.query,
+        directQuery: this.metadata.reference.directQuery,
+        tableName: this.metadata.reference.tableName,
+        value: this.metadata.value
+      })
+      if (allOptions.length && !allOptions[0].key) {
+        allOptions.unshift(this.blanckOption)
+      }
+      return allOptions
+    }
+  },
+  watch: {
+    'metadata.optionCRUD'(value) {
+      if (value === 'create-new') {
+        this.value = this.metadata.value
+        this.getDataLookupItem()
+      } else {
+        if (this.isEmptyValue(this.metadata.displayColumn)) {
+          this.value = this.getterValueSelec
+        } else {
+          this.value = this.validateValue(this.metadata.displayColumn)
+        }
+      }
+    }
+  },
+  beforeMount() {
+    this.options = this.getterLookupAll
+    if (this.isEmptyValue(this.metadata.displayColumn)) {
+      this.value = this.getterValueSelec
+    } else {
+      this.value = this.validateValue(this.metadata.displayColumn)
+    }
+    // enable to dataTable records
+    // Evaluate values of the displayColumn with empty string or number at 0
+    if (!this.isEmptyValue(this.metadata.displayColumn)) {
+      var key = this.validateValue(this.metadata.value)
+      if (this.valueModel !== undefined && this.validateValue !== null) {
+        key = this.metadata.displayColumn
+      }
+      // verify if exists to add
+      if (!this.findLabel(key)) {
+        this.othersOptions.push({
+          key: key,
+          label: this.metadata.displayColumn
+        })
+      }
+      // join options in store with pased from props
+      // validate empty or duplicate data
+      const optionList = this.getterLookupAll.filter(lookup => {
+        if (lookup.key !== null) {
+          return lookup
+        }
+      })
+      this.options = optionList
+      this.value = key
+    } else if (!this.findLabel(this.value) && this.metadata.displayed) {
+      if (this.isPanelWindow) {
+        if (this.metadata.optionCRUD === 'create-new') {
+          this.value = this.metadata.value
+        }
+      } else {
+        this.value = this.validateValue(this.metadata.displayColumn)
+      }
+    }
+  },
+  methods: {
+    preHandleChange(value) {
+      const label = this.findLabel(this.value)
+      this.handleChange(value, undefined, label)
+    },
+    validateValue(value) {
+      if (this.isEmptyValue(value)) {
+        return undefined
+      }
+      // if (['TableDirect'].includes(this.metadata.referenceType)) {
+      //   return parseInt(value, 10)
+      // }
+      return value
+    },
+    validateBlanckOption() {
+      // TODO: Evaluate -1 when list is string key
+      if (this.options.length <= 0 || (this.options.length && this.isEmptyValue(this.options[0].key))) {
+        this.options.unshift(this.blanckOption)
+      }
+    },
+    findLabel(value) {
+      var selected = this.options.find(item => item.key === value)
+      if (selected) {
+        return selected.label
+      }
+      selected = this.othersOptions.find(item => item.key === value)
+      if (selected) {
+        return selected.label
+      }
+      return selected
+    },
+    async getDataLookupItem() {
+      this.isLoading = true
+      if (!this.isEmptyValue(this.value)) {
+        this.$store.dispatch('getLookupItemFromServer', {
+          parentUuid: this.metadata.parentUuid,
+          containerUuid: this.metadata.containerUuid,
+          tableName: this.metadata.reference.tableName,
+          directQuery: this.metadata.reference.directQuery,
+          value: this.metadata.value
+        })
+          .then(response => {
+            if (this.isPanelWindow) {
+              this.$store.dispatch('notifyFieldChangeDisplayColumn', {
+                containerUuid: this.metadata.containerUuid,
+                columnName: this.metadata.columnName,
+                displayColumn: response.label
+              })
+            }
+            this.options = this.getterLookupAll
+            if (this.options.length && !this.options[0].key) {
+              this.options.unshift(this.blanckOption)
+            }
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
+      }
+    },
+    /**
+     * @param {boolean} show triggers when the pull-down menu appears or disappears
+     */
+    getDataLookupList(showList) {
+      if (showList) {
+        if (this.getterLookupList.length === 0) {
+          this.remoteMethod()
+        }
+      }
+    },
+    remoteMethod() {
+      this.isLoading = true
+      this.$store.dispatch('getLookupListFromServer', {
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        tableName: this.metadata.reference.tableName,
+        query: this.metadata.reference.query
+      })
+        .then(response => {
+          const list = this.getterLookupAll.filter(options => {
+            if (options.key !== undefined) {
+              return options
+            }
+          })
+          this.options = list
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
+    },
+    clearLookup() {
+      this.$store.dispatch('deleteLookupList', {
+        parentUuid: this.metadata.parentUuid,
+        containerUuid: this.metadata.containerUuid,
+        tableName: this.metadata.reference.tableName,
+        query: this.metadata.reference.query,
+        directQuery: this.metadata.reference.directQuery,
+        value: this.metadata.value
+      })
+      // TODO: Evaluate if is number -1 or string '' (or default value)
+      this.value = this.blanckOption.key
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .select-base {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldText.vue b/src/components/ADempiere/Field/FieldText.vue
new file mode 100644
index 00000000..3b2a7878
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldText.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-input
+    :ref="metadata.columnName"
+    v-model="value"
+    :pattern="pattern"
+    :rows="rows"
+    :type="typeTextBox"
+    :placeholder="metadata.help"
+    :readonly="Boolean(metadata.readonly)"
+    :disabled="isDisabled"
+    :maxlength="maxLength"
+    :show-password="metadata.isEncrypted ? true : false"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldText',
+  mixins: [fieldMixin],
+  props: {
+    pattern: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      patternFileName: '[A-Za-zñÑ0-9-_]{1,}',
+      patternFilePath: '[A-Za-zñÑ0-9-_/.]{1,}'
+    }
+  },
+  computed: {
+    // Only used when input type='TextArea'
+    rows() {
+      if (this.metadata.inTable) {
+        return 1
+      }
+      return 5
+    },
+    typeTextBox() {
+      // String, Url, FileName...
+      var typeInput = 'text'
+      if (['Memo', 'Text', 'TextLong'].includes(this.metadata.referenceType)) {
+        typeInput = 'textarea'
+      }
+      if (this.metadata.isEncrypted) {
+        typeInput = 'password'
+      }
+      return typeInput
+    },
+    maxLength() {
+      if (!this.isEmptyValue(this.metadata.fieldLength) && this.metadata.fieldLength > 0) {
+        return Number(this.metadata.fieldLength)
+      }
+      return undefined
+    }
+  },
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = ''
+        }
+        this.value = String(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        if (this.isEmptyValue(value)) {
+          value = ''
+        }
+        this.value = String(value)
+      }
+    }
+  },
+  methods: {
+    validateUrl(e) {
+      // Entry pattern, in this case only accepts numbers and letters
+      var _Pattern = /^(http[s]?:\/\/(www\.)?|ftp:\/\/(www\.)?|www\.){1}([0-9A-Za-z-\.@:%_\+~#=]+)+((\.[a-zA-Z]{1,5})+)(\/(.)*)?(\?(.)*)?/g
+      var rex = RegExp(_Pattern)
+      var value = e.target.value
+      if (rex.test(value) && value.trim() !== '') {
+        console.log('url good format')
+      } else if (value.trim() === '') {
+        console.log('url empty')
+      } else {
+        // e.target.focus()
+        console.log('url wrong')
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Field/FieldTime.vue b/src/components/ADempiere/Field/FieldTime.vue
new file mode 100644
index 00000000..ef45be26
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldTime.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-time-picker
+    :ref="metadata.columnName"
+    v-model="value"
+    :picker-options="{
+      minTime: minValue,
+      maxTime: maxValue
+    }"
+    :is-range="isPickerRange"
+    range-separator="-"
+    :placeholder="$t('components.timePlaceholder')"
+    class="time-base"
+    :readonly="Boolean(metadata.readonly)"
+    :disabled="isDisabled"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldTime',
+  mixins: [fieldMixin],
+  computed: {
+    isPickerRange() {
+      if (this.metadata.isRange && !this.metadata.inTable) {
+        return true
+      }
+      return false
+    },
+    maxValue() {
+      if (!this.isEmptyValue(this.metadata.valueMax)) {
+        return Number(this.metadata.valueMax)
+      }
+      return Infinity
+    },
+    minValue() {
+      if (!this.isEmptyValue(this.metadata.valueMin)) {
+        return Number(this.metadata.valueMin)
+      }
+      return -Infinity
+    }
+  },
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = this.parsedDateValue(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = this.parsedDateValue(value)
+      }
+    }
+  },
+  methods: {
+    parsedDateValue(value) {
+      if (typeof value === 'number') {
+        value = new Date(value).toUTCString()
+      }
+      if (this.isEmptyValue(value)) {
+        value = undefined
+      }
+      return value
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .time-base {
+    width: 100% !important;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/FieldYesNo.vue b/src/components/ADempiere/Field/FieldYesNo.vue
new file mode 100644
index 00000000..aaf161e4
--- /dev/null
+++ b/src/components/ADempiere/Field/FieldYesNo.vue
@@ -0,0 +1,77 @@
+<template>
+  <el-switch
+    :ref="metadata.columnName"
+    v-model="value"
+    :inactive-text="$t('components.switchInactiveText')"
+    :active-text="$t('components.switchActiveText')"
+    true-value="true"
+    false-value="false"
+    :disabled="isDisabled"
+    @change="preHandleChange"
+  />
+</template>
+
+<script>
+import { fieldIsDisplayed } from '@/utils/ADempiere'
+import { FIELD_READ_ONLY_FORM } from '@/components/ADempiere/Field/references'
+import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+
+export default {
+  name: 'FieldYesNo',
+  mixins: [fieldMixin],
+  data() {
+    return {
+      valuesReadOnly: [
+        {
+          columnName: 'IsActive',
+          isReadOnlyValue: false
+        }
+      ]
+    }
+  },
+  watch: {
+    valueModel(value) {
+      if (this.metadata.inTable) {
+        this.value = Boolean(value)
+      }
+    },
+    'metadata.value'(value) {
+      if (!this.metadata.inTable) {
+        this.value = Boolean(value)
+      }
+    },
+    value(value, oldValue) {
+      if (typeof value !== 'boolean') {
+        this.value = Boolean(value)
+      }
+      this.preHandleChange('NotSend')
+    }
+  },
+  mounted() {
+    this.preHandleChange('NotSend') // activate logics
+  },
+  methods: {
+    preHandleChange(value) {
+      this.handleChange(value)
+      if (!this.metadata.inTable && !this.metadata.isAdvancedQuery) {
+        this.isReadOnlyForm(this.value)
+      }
+    },
+    isReadOnlyForm(value) {
+      var fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => item.columnName === this.metadata.columnName)
+      // columnName: IsActive, Processed, Processing
+      if (fieldReadOnlyForm && fieldIsDisplayed(this.metadata)) {
+        this.$store.dispatch('changeFieldAttributesBoolean', {
+          containerUuid: this.metadata.containerUuid,
+          fieldsIncludes: [],
+          attribute: 'isReadOnlyFromForm',
+          valueAttribute: Boolean(fieldReadOnlyForm.valueIsReadOnlyForm !== value),
+          // if isChangedAllForm it does not exclude anything, otherwise it excludes this columnName
+          fieldsExcludes: fieldReadOnlyForm.isChangedAllForm ? [] : [this.metadata.columnName],
+          currenValue: value
+        })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Field/fieldSize.js b/src/components/ADempiere/Field/fieldSize.js
new file mode 100644
index 00000000..291e1a12
--- /dev/null
+++ b/src/components/ADempiere/Field/fieldSize.js
@@ -0,0 +1,124 @@
+
+export const FIELD_DISPLAY_SIZES = [
+  {
+    type: 'FieldBinary',
+    size: {
+      xs: 6,
+      sm: 6,
+      md: 6,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldButton',
+    size: {
+      xs: 0,
+      sm: 0,
+      md: 0,
+      lg: 0,
+      xl: 0
+    }
+  },
+  {
+    type: 'FieldColor',
+    size: {
+      xs: 6,
+      sm: 6,
+      md: 6,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldDate',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldImage',
+    size: {
+      xs: 6,
+      sm: 6,
+      md: 6,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldNumber',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldSelect',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldText',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldTextArea',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldTime',
+    size: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 6,
+      xl: 6
+    }
+  },
+  {
+    type: 'FieldYesNo',
+    size: {
+      xs: 14,
+      sm: 8,
+      md: 8,
+      lg: 3,
+      xl: 6
+    }
+  }
+]
+
+export const DEFAULT_SIZE = {
+  type: 'FieldYesNo',
+  size: {
+    xs: 6,
+    sm: 8,
+    md: 2,
+    lg: 6,
+    xl: 6
+  }
+}
diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
new file mode 100644
index 00000000..5ba501c2
--- /dev/null
+++ b/src/components/ADempiere/Field/index.vue
@@ -0,0 +1,326 @@
+
+<template>
+  <!--
+    this v-show is to indicate that if the field is not shown,
+    therefore you should not leave the column size spacing of your
+    <el-col></el-col> container-->
+  <el-col
+    v-if="!inTable"
+    v-show="isDisplayed()"
+    :xs="sizeFieldResponsive.xs"
+    :sm="sizeFieldResponsive.sm"
+    :md="sizeFieldResponsive.md"
+    :lg="sizeFieldResponsive.lg"
+    :xl="sizeFieldResponsive.xl"
+    :class="classField"
+  >
+    <el-popover
+      v-if="field.contextInfo && field.contextInfo.isActive"
+      ref="contextOptions"
+      placement="top"
+      :title="$t('components.contextFieldTitle')"
+      width="400"
+      trigger="click"
+    >
+      <p v-html="field.contextInfo.messageText.msgText" />
+    </el-popover>
+    <el-form-item v-popover:contextOptions :label="isFieldOnly()" :required="isMandatory()">
+      <component
+        :is="componentRender"
+        :ref="field.columnName"
+        :metadata="{
+          ...field,
+          panelType: panelType,
+          inTable: inTable,
+          isAdvancedQuery: isAdvancedQuery,
+          // DOM properties
+          required: isMandatory(),
+          readonly: isReadOnly(),
+          displayed: isDisplayed(),
+          disabled: !field.isActive
+        }"
+        :value-model="recordDataFields"
+      />
+    </el-form-item>
+  </el-col>
+  <component
+    :is="componentRender"
+    v-else
+    :class="classField"
+    :metadata="{
+      ...field,
+      panelType: panelType,
+      inTable: inTable,
+      // DOM properties
+      required: isMandatory(),
+      readonly: isReadOnly(),
+      disabled: !field.isActive
+    }"
+    :value-model="recordDataFields"
+  />
+</template>
+
+<script>
+import { FIELD_ONLY } from '@/components/ADempiere/Field/references'
+import { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import { fieldIsDisplayed } from '@/utils/ADempiere'
+
+/**
+ * This is the base component for linking the components according to the
+ * reference (or type of visualization) of each field
+ */
+export default {
+  name: 'Field',
+  props: {
+    parentUuid: {
+      type: String,
+      default: ''
+    },
+    containerUuid: {
+      type: String,
+      default: ''
+    },
+    metadataUuid: {
+      type: String,
+      default: undefined
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    // receives the property that is an object with all the attributes
+    metadataField: {
+      type: Object,
+      default: () => ({})
+    },
+    recordDataFields: {
+      type: [Number, String, Boolean, Array, Object, Date],
+      default: undefined
+    },
+    inGroup: {
+      type: Boolean,
+      default: false
+    },
+    inTable: {
+      type: Boolean,
+      default: false
+    },
+    isAdvancedQuery: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      field: {}
+    }
+  },
+  computed: {
+    // load the component that is indicated in the attributes of received property
+    componentRender() {
+      return () => import(`@/components/ADempiere/Field/${this.field.componentPath}`)
+    },
+    getWidth() {
+      return this.$store.getters.getWidthLayout
+    },
+    classField() {
+      if (this.inTable) {
+        return 'in-table'
+      }
+      return ''
+    },
+    getterIsShowedRecordNavigation() {
+      if (this.panelType === 'window') {
+        return this.$store.getters.getIsShowedRecordNavigation(this.parentUuid)
+      }
+      return false
+    },
+    sizeFieldResponsive() {
+      if (!this.isDisplayed()) {
+        return DEFAULT_SIZE
+      }
+
+      const sizeField = this.field.sizeFieldFromType.size
+      var newSizes = {}
+
+      // in table set max width, used by browser result and tab children of window
+      if (this.inTable) {
+        newSizes.xs = 24
+        newSizes.sm = 24
+        newSizes.md = 24
+        newSizes.lg = 24
+        newSizes.xl = 24
+        return newSizes
+      }
+      if (this.isAdvancedQuery) {
+        newSizes.xs = 24
+        newSizes.sm = 24
+        newSizes.md = 12
+        newSizes.lg = 12
+        newSizes.xl = 12
+        return newSizes
+      }
+
+      if (this.panelType === 'window') {
+        // two columns if is mobile or desktop and show record navigation
+        if (this.getWidth <= 768 || (this.getWidth >= 768 && this.getterIsShowedRecordNavigation)) {
+          newSizes.xs = 12
+          newSizes.sm = 12
+          newSizes.md = 12
+          newSizes.lg = 12
+          newSizes.xl = 12
+          return newSizes
+        } else if (this.inGroup && this.getWidth >= 992) {
+          newSizes.xs = sizeField.xs
+          newSizes.sm = sizeField.sm * 2
+          if (this.getWidth <= 1199) {
+            newSizes.md = sizeField.md
+          } else {
+            newSizes.md = sizeField.md * 2
+          }
+          if (this.field.groupAssigned !== '') {
+            newSizes.lg = sizeField.lg * 2
+            newSizes.xl = sizeField.xl * 2
+          } else {
+            newSizes.lg = sizeField.lg
+            newSizes.xl = sizeField.xl
+          }
+          return newSizes
+        }
+        return sizeField
+      }
+      return sizeField
+    },
+    getterContextProcessing() {
+      const processing = this.$store.getters.getContextProcessing(this.parentUuid)
+      if (processing === true || processing === 'Y') {
+        return true
+      }
+      return false
+    },
+    getterContextProcessed() {
+      const processed = this.$store.getters.getContextProcessed(this.parentUuid)
+      if (processed === true || processed === 'Y') {
+        return true
+      }
+      return false
+    }
+  },
+  watch: {
+    metadataField(value) {
+      this.field = value
+    }
+  },
+  created() {
+    // assined field with prop
+    this.field = this.metadataField
+  },
+  methods: {
+    isDisplayed() {
+      if (this.isAdvancedQuery) {
+        return this.field.isShowedFromUser
+      }
+      return fieldIsDisplayed(this.field) && (this.isMandatory() || this.field.isShowedFromUser || this.inTable)
+    },
+    isReadOnly() {
+      if (this.isAdvancedQuery) {
+        return false
+      }
+      if (!this.field.isActive) {
+        return true
+      }
+
+      const isUpdateableAllFields = this.field.isReadOnly || this.field.isReadOnlyFromLogic
+
+      if (this.panelType === 'window') {
+        if (this.field.isAlwaysUpdateable) {
+          return false
+        }
+        if (this.getterContextProcessing) {
+          return true
+        }
+        if (this.getterContextProcessed) {
+          return true
+        }
+
+        // edit mode is diferent to create new
+        const editMode = (!this.inTable && this.field.optionCRUD !== 'create-new') || (this.inTable && !this.isEmptyValue(this.field.recordUuid))
+        return (!this.field.isUpdateable && editMode) || (isUpdateableAllFields || this.field.isReadOnlyFromForm)
+      }
+      if (this.panelType === 'browser') {
+        if (this.inTable) {
+          // browser result
+          return this.field.isReadOnly
+        }
+        // query criteria
+        return this.field.isReadOnlyFromLogic
+      }
+      // other type of panels (process/report)
+      return isUpdateableAllFields
+    },
+    isMandatory() {
+      if (this.isAdvancedQuery) {
+        return false
+      }
+      return this.field.isMandatory || this.field.isMandatoryFromLogic
+    },
+    isFieldOnly() {
+      if (this.inTable || this.field.isFieldOnly || this.verifyIsFieldOnly(this.field.displayType)) {
+        return undefined
+      }
+      return this.field.name
+    },
+    /**
+     * TODO: Evaluate the current field with the only fields contained in the
+     * constant FIELD_ONLY
+     * @param  {integer} id [identifier of the type of isDisplayed]
+     * @return {boolean}
+     */
+    verifyIsFieldOnly(type) {
+      const field = FIELD_ONLY.find(itemField => {
+        if (type === itemField.id) {
+          return true
+        }
+      })
+      return Boolean(field)
+    },
+    focus(columnName) {
+      if (this.isDisplayed() && this.isMandatory() && !this.isReadOnly()) {
+        this.$refs[columnName].activeFocus(columnName)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  /**
+   * Separation between elements (item) of the form
+   */
+  .el-form-item {
+    margin-bottom: 10px !important;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .in-table {
+    margin-bottom: 0px !important;
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  /* Global Styles */
+  .el-textarea__inner:not(.in-table) {
+    min-height: 36px !important;
+    /*
+    height: 36px auto !important;
+    max-height: 54.2333px !important;
+    */
+  }
+
+  /**
+   * Reduce the spacing between the form element and its label
+   */
+  .el-form--label-top .el-form-item__label {
+    padding-bottom: 0px !important;
+  }
+</style>
diff --git a/src/components/ADempiere/Field/references.js b/src/components/ADempiere/Field/references.js
new file mode 100644
index 00000000..57d319a1
--- /dev/null
+++ b/src/components/ADempiere/Field/references.js
@@ -0,0 +1,329 @@
+
+// All references
+const REFERENCES = [
+  {
+    id: 25,
+    type: 'FieldText',
+    support: false,
+    description: 'Account Element',
+    alias: ['Account']
+  },
+  {
+    id: 12,
+    type: 'FieldNumber',
+    support: true,
+    description: 'Number with 4 decimals',
+    alias: ['Amount']
+  },
+  {
+    id: 33,
+    type: 'FieldText',
+    support: false,
+    description: 'Resource Assignment',
+    alias: ['Assignment']
+  },
+  {
+    id: 23,
+    type: 'FieldBinary',
+    support: true,
+    description: 'Binary Data',
+    alias: ['Binary']
+  },
+  {
+    id: 28,
+    type: 'FieldButton',
+    support: true,
+    description: 'Command Button - starts a process',
+    alias: ['Button']
+  },
+  {
+    id: 53370,
+    type: 'FieldText',
+    support: false,
+    description: 'Chart',
+    alias: ['Chart']
+  },
+  {
+    id: 27,
+    type: 'FieldText',
+    support: false,
+    description: 'Color element',
+    alias: ['Color']
+  },
+  {
+    id: 37,
+    type: 'FieldNumber',
+    support: true,
+    description: 'Costs + Prices (minimum currency precision but if exists more)',
+    alias: ['CostsPrices', 'Costs+Prices', 'Cost Prices']
+  },
+  {
+    id: 15,
+    type: 'FieldDate',
+    support: true,
+    description: 'Date mm/dd/yyyy',
+    alias: ['Date']
+  },
+  {
+    id: 16,
+    type: 'FieldDate',
+    support: true,
+    description: 'Date with time',
+    alias: ['DateTime', 'Date Time', 'Date+Time']
+  },
+  {
+    id: 39,
+    type: 'FieldText',
+    support: true,
+    description: 'Local File',
+    alias: ['FileName', 'File Name']
+  },
+  {
+    id: 38,
+    type: 'FieldText',
+    support: true,
+    description: 'Local File Path',
+    alias: ['FilePath', 'File Path']
+  },
+  {
+    id: 53670,
+    type: 'FieldText',
+    support: true,
+    description: 'Local File Path or Name',
+    alias: ['FilePathOrName', 'File Path Or Name']
+  },
+  {
+    id: 13,
+    type: 'FieldNumber',
+    support: true,
+    description: '10 Digit Identifier',
+    alias: ['ID']
+  },
+  {
+    id: 32,
+    type: 'FieldImage',
+    support: true,
+    description: 'Binary Image Data',
+    alias: ['Image']
+  },
+  {
+    id: 11,
+    type: 'FieldNumber',
+    support: true,
+    description: '10 Digit numeric',
+    alias: ['Integer']
+  },
+  {
+    id: 17,
+    type: 'FieldSelect',
+    support: true,
+    description: 'Reference List',
+    alias: ['List']
+  },
+  {
+    id: 21,
+    type: 'FieldText',
+    support: false,
+    description: 'Location/Address',
+    alias: ['Location', 'Location (Address)', 'Location/Address']
+  },
+  {
+    id: 31,
+    type: 'FieldSelect',
+    support: true,
+    description: 'Warehouse Locator Data type',
+    alias: ['Locator', 'Locator (WH)', 'Locator/WH']
+  },
+  {
+    id: 34,
+    type: 'FieldText',
+    support: true,
+    description: 'Reference List',
+    alias: ['Memo']
+  },
+  {
+    id: 22,
+    type: 'FieldNumber',
+    support: true,
+    description: 'Float Number',
+    alias: ['Number']
+  },
+  {
+    id: 42,
+    type: 'FieldText',
+    support: true,
+    description: 'Printer Name',
+    alias: ['PrinterName', 'Printer Name']
+  },
+  {
+    id: 35,
+    type: 'FieldText',
+    support: false,
+    description: 'Product Attribute',
+    alias: ['ProductAttribute', 'Product Attribute']
+  },
+  {
+    id: 29,
+    type: 'FieldNumber',
+    support: true,
+    description: 'Quantity data type',
+    alias: ['Quantity']
+  },
+  {
+    id: 30,
+    type: 'FieldSelect',
+    support: true,
+    description: 'Search Field',
+    alias: ['Search']
+  },
+  {
+    id: 10,
+    type: 'FieldText',
+    support: true,
+    description: 'Character String',
+    alias: ['String']
+  },
+  {
+    id: 18,
+    type: 'FieldSelect',
+    support: true,
+    description: 'Table List',
+    alias: ['Table']
+  },
+  {
+    id: 19,
+    type: 'FieldSelect',
+    support: true,
+    description: 'Direct Table Access',
+    alias: ['TableDirect', 'Table Direct']
+  },
+  {
+    id: 14,
+    type: 'FieldText',
+    support: true,
+    description: 'Character String up to 2000 characters',
+    alias: ['Text']
+  },
+  {
+    id: 36,
+    type: 'FieldText',
+    support: true,
+    description: 'Text (Long) - Text > 2000 characters',
+    alias: ['TextLong', 'Text Long']
+  },
+  {
+    id: 24,
+    type: 'FieldTime',
+    support: true,
+    description: 'Time',
+    alias: ['Time']
+  },
+  {
+    id: 40,
+    type: 'FieldText',
+    support: true,
+    description: 'URL',
+    alias: ['URL', 'Url']
+  },
+  {
+    id: 20,
+    type: 'FieldYesNo',
+    support: true,
+    description: 'CheckBox',
+    alias: ['YesNo', 'Yes No', 'Yes-No']
+  }
+]
+export default REFERENCES
+
+export const FIELD_RANGE = [
+  {
+    id: 12,
+    type: 'Amount',
+    description: 'Number with 4 decimals',
+    alias: ['Amount']
+  },
+  {
+    id: 37,
+    type: 'CostsPrices',
+    description: 'Costs + Prices (minimum currency precision but if exists more)',
+    alias: ['CostsPrices', 'Costs+Prices', 'Cost Prices']
+  },
+  {
+    id: 15,
+    type: 'Date',
+    description: 'Date mm/dd/yyyy',
+    alias: ['Date']
+  },
+  {
+    id: 16,
+    type: 'DateTime',
+    description: 'Date with time',
+    alias: ['DateTime', 'Date Time', 'Date+Time']
+  },
+  {
+    id: 11,
+    type: 'Integer',
+    description: '10 Digit numeric',
+    alias: ['Integer']
+  },
+  {
+    id: 22,
+    type: 'Number',
+    description: 'Float Number',
+    alias: ['Number']
+  },
+  {
+    id: 29,
+    type: 'Quantity',
+    description: 'Quantity data type',
+    alias: ['Quantity']
+  },
+  {
+    id: 24,
+    type: 'Time',
+    description: 'Time',
+    alias: ['Time']
+  }
+]
+
+export const FIELD_ONLY = [
+  {
+    id: 28,
+    type: 'Button',
+    description: 'Command Button - starts a process',
+    alias: ['Button']
+  }
+]
+
+export const FIELD_NOT_SHOWED = [
+  {
+    id: 28,
+    type: 'Button',
+    description: 'Command Button - starts a process',
+    alias: ['Button']
+  }
+]
+
+/**
+ * Fields with this column name, changed all fields is read only
+ */
+export const FIELD_READ_ONLY_FORM = [
+  {
+    columnName: 'IsActive', // column name of field
+    defaultValue: true, // default value when loading
+    valueIsReadOnlyForm: false, // value that activates read-only form
+    isChangedAllForm: false // change the entire form to read only including this field
+  },
+  {
+    columnName: 'Processed',
+    defaultValue: false,
+    valueIsReadOnlyForm: true,
+    isChangedAllForm: true
+  },
+  {
+    columnName: 'Processing',
+    defaultValue: true,
+    valueIsReadOnlyForm: false,
+    isChangedAllForm: true
+  }
+]
diff --git a/src/components/ADempiere/IconElement/index.vue b/src/components/ADempiere/IconElement/index.vue
new file mode 100644
index 00000000..4353345f
--- /dev/null
+++ b/src/components/ADempiere/IconElement/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div :class="{'show-input-search':isShowElement}" class="search-detail">
+    <i
+      :class="icon + ' props-icon'"
+      @click.stop="click"
+      @submit.prevent.native="false"
+    />
+    <slot
+      ref="headerSearchSelect"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IconElement',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isShowElement: false // show input from search,
+    }
+  },
+  watch: {
+    isShowElement(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
+      }
+    }
+  },
+  methods: {
+    click() {
+      this.isShowElement = !this.isShowElement
+      if (this.isShowElement) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+      }
+    },
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.options = []
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .search-detail {
+    margin: 0 10px;
+    float: right;
+    color: #5a5e66;
+    height: 39px !important;
+    line-height: 39px !important;
+    .props-icon {
+      cursor: pointer;
+      font-size: 18px;
+      vertical-align: middle;
+    }
+
+    .header-search-input {
+      font-size: 18px;
+      transition: width 0.2s;
+      width: 0;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    .header-search-select {
+      font-size: 12px;
+      transition: width 0.2s;
+      width: 30px;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+      height: 28px;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    &.show-input-search {
+      .header-search-input {
+        width: 190px;
+      }
+    }
+    .header-search-input-mobile {
+      transition: width 0.2s;
+      width: 0 !important;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    .header-search-select-mobile {
+      transition: width 0.2s;
+      width: 0 !important;
+      overflow: hidden;
+      background: transparent;
+      border-radius: 0;
+      display: inline-block;
+      vertical-align: middle;
+
+      /deep/ .el-input__inner {
+        border-radius: 0;
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+        box-shadow: none !important;
+        border-bottom: 1px solid #d9d9d9;
+        vertical-align: middle;
+      }
+    }
+    &.show-input-search{
+      .header-search-select-mobile {
+        width: 120px !important;
+      }
+    }
+    &.show-input-search{
+      .header-search-input-mobile {
+        width: 120px !important;
+      }
+    }
+  }
+</style>
diff --git a/src/components/ADempiere/Panel/detail.vue b/src/components/ADempiere/Panel/detail.vue
new file mode 100644
index 00000000..54a09b29
--- /dev/null
+++ b/src/components/ADempiere/Panel/detail.vue
@@ -0,0 +1,277 @@
+<template>
+  <div v-if="showDetail">
+    <div class="container">
+      <!-- down button -->
+      <div class="show">
+        <el-button
+          v-if="!showPanel && !this.$store.state.app.sidebar.opened "
+          class="el-icon-arrow-up button-up btn"
+          :circle="true"
+          @click="handleChange()"
+        />
+        <el-button
+          v-if="!showPanel && this.$store.state.app.sidebar.opened "
+          class="el-icon-arrow-up button-up2 btn"
+          :circle="true"
+          @click="handleChange()"
+        />
+      </div>
+      <!-- panel show -->
+      <div :class="classContainer()">
+        <el-collapse-transition>
+          <div v-show="showPanel">
+            <el-button
+              class="el-icon-arrow-down button-bottom btn"
+              :circle="true"
+              @click="handleChange()"
+            />
+
+            <slot />
+
+          </div>
+        </el-collapse-transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanelDetail',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    showDetail: {
+      type: Boolean,
+      default: true
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    containerUuid: {
+      type: String,
+      default: undefined
+    },
+    isShowedDetail: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      showPanel: this.isShowedDetail
+    }
+  },
+  methods: {
+    classContainer() {
+      if (this.$store.state.app.device === 'mobile') {
+        return 'container-panel-mobile'
+      } else if (this.$store.state.app.sidebar.opened) {
+        return 'container-panel-open'
+      } else if (!this.$store.state.app.sidebar.opened) {
+        return 'container-panel-close'
+      }
+      return 'container-panel'
+    },
+    classButtom() {
+      if (this.$store.state.app.device === 'mobile') {
+        return 'container-panel-mobile'
+      } else if (this.$store.state.app.sidebar.opened) {
+        return 'el-icon-arrow-down button-bottom btn'
+      } else if (!this.$store.state.app.sidebar.opened) {
+        return 'el-icon-arrow-down button-bottom2 btn'
+      }
+    },
+    handleChange() {
+      this.showPanel = !this.showPanel
+      this.$store.dispatch('changeShowedDetail', {
+        panelType: this.panelType,
+        containerUuid: this.containerUuid,
+        isShowedDetail: this.showPanel
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
+
+  .container {
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: calc(111% - 200px);
+    transition: width 0.28s;
+    position: fixed;
+    height: 20px;
+    display: flex;
+    color: #424242;
+  }
+  .show {
+    position: absolute;
+    bottom: 0;
+    color: #FFF;
+    width: 100%;
+    height: 300px;
+    transition: all 0.5s ease-in;
+    display: flex;
+  }
+  .container-open {
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: 100%;
+    transition: width 0.28s;
+    position: fixed;
+    height: 20px;
+    display: flex;
+    color: #424242;
+  }
+  .show-open {
+    position: absolute;
+    bottom: 0;
+    color: #FFF;
+    width: 100%;
+    height: 300px;
+    transition: all 0.5s ease-in;
+    display: flex;
+  }
+  .container:hover .show {
+    height: 30px;
+  }
+  .btn {
+    animation-name: btn;
+    position: relative;
+    transition-delay: 0.6s;
+    visibility: hidden;
+    /* right: 50%; */
+  }
+  .container:hover .btn {
+    visibility: visible;
+  }
+  .el-tabs__content {
+    overflow: hidden;
+    position: relative;
+    padding-top: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+  .btn-base :hover {
+    box-shadow: 5px #5a5a5a;
+  }
+  .tab-window {
+    z-index: 9;
+  }
+  .container-panel {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: calc(100% - 54px);
+    /* height: 40%; */
+    transition: width 0.28s;
+  }
+  .container-panel-movil {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: 100%;
+    height: 60%;
+    transition: width 0.28s;
+  }
+  .container-panel-mobile {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: 100%;
+    transition: width 0.28s;
+  }
+  .container-panel-open {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+  .container-panel-close {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    width: calc(100% - 2em);
+    transition: width 0.28s;
+  }
+  .container-up {
+    right: 50%;
+  }
+  .show {
+    position: absolute;
+    bottom: 0;
+    color: #FFF;
+    width: 100%;
+    height: 0px;
+    transition: all 0.5s ease-in;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .button-bottom {
+    bottom: 50%;
+    z-index: 2;
+    position: relative;
+    margin: 0 auto;
+    left: 45%;
+  }
+  .button-bottom2 {
+    bottom: 50%;
+    z-index: 2;
+    position: relative;
+    margin: 0 auto;
+    left: 45%;
+  }
+  .button-up {
+    bottom: 0;
+    position: fixed;
+    left: 48%;
+    margin: 0 auto;
+  }
+  .button-up2 {
+    bottom: 0;
+    position: fixed;
+    left: 57%;
+    margin: 0 auto;
+  }
+  .btn-base {
+    width: 100%;
+    position: fixed;
+    background: #ffffff;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    outline: 0;
+    font-size: 14px;
+  }
+  .btn-base :hover {
+    box-shadow: 5px #5a5a5a;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+    left: 10px;
+  }
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    width: 100%;
+  }
+</style>
diff --git a/src/components/ADempiere/Panel/filterFields.vue b/src/components/ADempiere/Panel/filterFields.vue
new file mode 100644
index 00000000..398e801a
--- /dev/null
+++ b/src/components/ADempiere/Panel/filterFields.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-select
+    v-model="selectedFields"
+    :filterable="!isMobile"
+    :placeholder="$t('components.filterableItems')"
+    multiple
+    collapse-tags
+    value-key="key"
+    style="float: right;"
+    @change="addField"
+  >
+    <el-option
+      v-for="(item, key) in getterFieldListOptional"
+      :key="key"
+      :label="item.name"
+      :value="item.columnName"
+    />
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'FilterFields',
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    groupField: {
+      type: String,
+      default: ''
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    isAdvancedQuery: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedFields: [] // fields optional showed
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    getterFieldListOptional() {
+      if (this.panelType === 'table') {
+        // fields to search without taking into account the mandatory
+        return this.$store.getters.getFieldsListFromPanel(this.containerUuid, this.isAdvancedQuery)
+          .filter(fieldItem => {
+            return fieldItem.componentPath !== 'FieldButton'
+          })
+      } else if (this.panelType === 'window') {
+        // compare group fields to window
+        return this.$store.getters.getFieldsListNotMandatory(this.containerUuid)
+          .filter(fieldItem => {
+            return fieldItem.groupAssigned === this.groupField
+          })
+      }
+      // get fields not mandatory
+      return this.$store.getters.getFieldsListNotMandatory(this.containerUuid)
+    },
+    getFieldSelected() {
+      return this.getterFieldListOptional
+        .filter(fieldItem => {
+          return fieldItem.isShowedFromUser
+        })
+        .map(itemField => itemField.columnName)
+    }
+  },
+  watch: {
+    // TODO: Verify peformance with computed set (dispatch) and get (state)
+    getFieldSelected(value) {
+      this.selectedFields = value
+    }
+  },
+  created() {
+    this.selectedFields = this.getFieldSelected
+  },
+  methods: {
+    /**
+     * @param {array} selectedValues
+     */
+    addField(selectedValues) {
+      this.$store.dispatch('changeFieldShowedFromUser', {
+        containerUuid: this.containerUuid,
+        fieldsUser: selectedValues,
+        show: true,
+        groupField: this.groupField,
+        isAdvancedQuery: this.isAdvancedQuery
+      })
+    }
+  }
+}
+</script>
+
+<style>
+  .el-tag--small {
+    height: 24px;
+    padding: 0 8px;
+    line-height: 22px;
+    max-width: 65%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .el-select .el-tag__close.el-icon-close {
+    background-color: #C0C4CC;
+    right: 0px;
+    top: 0;
+    color: #FFFFFF;
+  }
+</style>
diff --git a/src/components/ADempiere/Panel/index.vue b/src/components/ADempiere/Panel/index.vue
new file mode 100644
index 00000000..71514fd8
--- /dev/null
+++ b/src/components/ADempiere/Panel/index.vue
@@ -0,0 +1,691 @@
+<template>
+  <div class="wrapper">
+    <el-form
+      v-if="isLoadPanel"
+      key="panel-loaded"
+      v-model="dataRecords"
+      label-position="top"
+      label-width="200px"
+    >
+      <template
+        v-if="firstGroup && firstGroup.groupFinal === ''"
+      >
+        <div v-show="firstGroup.activeFields" class="cards-not-group">
+          <div
+            v-if="(groupTab.groupType == 'T' && groupTab.groupName == firstGroup.groupFinal)
+              || (groupTab.groupType !== 'T' && firstGroup.typeGroup !== 'T')"
+            class="card"
+          >
+            <div class="select-filter">
+              <span>
+                {{ firstGroup.groupFinal }}
+              </span>
+              <filter-fields
+                :container-uuid="containerUuid"
+                :panel-type="panelType"
+                :group-field="firstGroup.groupFinal"
+                :is-advanced-query="isAdvancedQuery"
+              />
+            </div>
+            <el-card
+              :shadow="isMobile ? 'never' : 'hover'"
+              :body-style="{ padding: '10px' }"
+            >
+              <el-row :gutter="gutterRow">
+                <template v-for="(fieldAttributes, subKey) in firstGroup.metadataFields">
+                  <field-definition
+                    :ref="fieldAttributes.columnName"
+                    :key="subKey"
+                    :parent-uuid="parentUuid"
+                    :container-uuid="containerUuid"
+                    :metadata-field="{
+                      ...fieldAttributes,
+                      optionCRUD: optionCRUD
+                    }"
+                    :record-data-fields="isAdvancedQuery ? undefined : dataRecords[fieldAttributes.columnName]"
+                    :panel-type="panelType"
+                    :in-group="!getterIsShowedRecordNavigation"
+                    :is-advanced-query="isAdvancedQuery"
+                  />
+                </template>
+              </el-row>
+            </el-card>
+          </div>
+        </div>
+      </template>
+      <div :class="cards()">
+        <draggable
+          v-if="!isMobile"
+          :list="fieldGroups"
+          v-bind="$attrs"
+          :set-data="setData"
+        >
+          <template v-for="(item, key) in fieldGroups">
+            <el-row :key="key">
+              <el-col :key="key" :span="24">
+                <div
+                  v-if="item.groupFinal !== ''
+                    && (groupTab.groupType == 'T' && groupTab.groupName == item.groupFinal)
+                    || (groupTab.groupType !== 'T' && item.typeGroup !== 'T')"
+                  :key="key"
+                  class="card"
+                >
+                  <el-card
+                    :shadow="isMobile ? 'never' : 'hover'"
+                    :body-style="{ padding: '10px' }"
+                  >
+                    <div slot="header" class="clearfix">
+                      <span>
+                        {{ item.groupFinal }}
+                      </span>
+                      <div class="select-filter-header">
+                        <filter-fields
+                          :container-uuid="containerUuid"
+                          :panel-type="panelType"
+                          :group-field="item.groupFinal"
+                          :is-first-group="false"
+                          :is-advanced-query="isAdvancedQuery"
+                        />
+                      </div>
+                    </div>
+                    <el-row :gutter="gutterRow">
+                      <template v-for="(fieldAttributes, subKey) in item.metadataFields">
+                        <field-definition
+                          :ref="fieldAttributes.columnName"
+                          :key="subKey"
+                          :parent-uuid="parentUuid"
+                          :container-uuid="containerUuid"
+                          :metadata-field="{
+                            ...fieldAttributes,
+                            optionCRUD: optionCRUD
+                          }"
+                          :record-data-fields="isAdvancedQuery ? undefined : dataRecords[fieldAttributes.columnName]"
+                          :panel-type="panelType"
+                          :in-group="isPanelWindow && fieldGroups.length > 1"
+                          :is-advanced-query="isAdvancedQuery"
+                        />
+                      </template>
+                    </el-row>
+                  </el-card>
+                </div>
+              </el-col>
+            </el-row>
+          </template>
+        </draggable>
+        <template v-else>
+          <template v-for="(item, key) in fieldGroups">
+            <el-row :key="key">
+              <el-col :key="key" :span="24">
+                <div
+                  v-if="item.groupFinal !== ''
+                    && (groupTab.groupType == 'T' && groupTab.groupName == item.groupFinal)
+                    || (groupTab.groupType !== 'T' && item.typeGroup !== 'T')"
+                  :key="key"
+                  class="card"
+                >
+                  <el-card
+                    :shadow="isMobile ? 'never' : 'hover'"
+                    :body-style="{ padding: '10px' }"
+                  >
+                    <div slot="header" class="clearfix">
+                      <span>
+                        {{ item.groupFinal }}
+                      </span>
+                      <div v-if="!isAdvancedQuery" class="select-filter-header">
+                        <filter-fields
+                          :container-uuid="containerUuid"
+                          :panel-type="panelType"
+                          :group-field="item.groupFinal"
+                          :is-first-group="false"
+                        />
+                      </div>
+                    </div>
+                    <el-row :gutter="gutterRow">
+                      <template v-for="(fieldAttributes, subKey) in item.metadataFields">
+                        <field-definition
+                          :ref="fieldAttributes.columnName"
+                          :key="subKey"
+                          :parent-uuid="parentUuid"
+                          :container-uuid="containerUuid"
+                          :metadata-field="{
+                            ...fieldAttributes,
+                            optionCRUD: optionCRUD
+                          }"
+                          :record-data-fields="isAdvancedQuery ? undefined : dataRecords[fieldAttributes.columnName]"
+                          :panel-type="panelType"
+                          :in-group="isPanelWindow && fieldGroups.length > 1"
+                        />
+                      </template>
+                    </el-row>
+                  </el-card>
+                </div>
+              </el-col>
+            </el-row>
+          </template>
+        </template>
+      </div>
+    </el-form>
+    <div
+      v-else
+      key="panel-loading"
+      v-loading="!isLoadPanel"
+      :element-loading-text="$t('notifications.loading')"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      class="loading-panel"
+    />
+  </div>
+</template>
+
+<script>
+import FieldDefinition from '@/components/ADempiere/Field'
+import FilterFields from '@/components/ADempiere/Panel/filterFields'
+import draggable from 'vuedraggable'
+import { fieldIsDisplayed, parsedValueComponent } from '@/utils/ADempiere'
+
+export default {
+  name: 'MainPanel',
+  components: {
+    FieldDefinition,
+    FilterFields,
+    draggable
+  },
+  props: {
+    parentUuid: {
+      type: String,
+      default: ''
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    metadata: {
+      type: Object,
+      default: () => {}
+    },
+    // tab type group
+    groupTab: {
+      type: Object,
+      default: () => ({
+        groupType: '',
+        groupName: ''
+      })
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    },
+    isAdvancedQuery: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      fieldList: [],
+      dataRecords: {},
+      gutterRow: 0,
+      isLoadPanel: false,
+      isLoadRecord: false,
+      uuidRecord: this.$route.query.action,
+      fieldGroups: [],
+      firstGroup: {},
+      groupsView: 0,
+      tagTitle: {
+        base: this.$route.meta.title,
+        action: ''
+      }
+    }
+  },
+  computed: {
+    optionCRUD() {
+      return this.isEmptyValue(this.uuidRecord) ? 'create-new' : this.uuidRecord
+    },
+    isPanelWindow() {
+      return this.panelType === 'window'
+    },
+    getterIsShowedRecordNavigation() {
+      if (this.isPanelWindow) {
+        return this.$store.getters.getIsShowedRecordNavigation(this.parentUuid)
+      }
+      return false
+    },
+    getterFieldList() {
+      var panel = this.$store.getters.getPanel(this.containerUuid, this.isAdvancedQuery)
+      if (panel) {
+        return panel.fieldList
+      }
+      return panel
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    getterDataStore() {
+      if (this.isPanelWindow) {
+        return this.$store.getters.getDataRecordAndSelection(this.containerUuid)
+      }
+      return {
+        recordCount: 0,
+        isLoaded: false,
+        record: []
+      }
+    },
+    getterTotalDataRecordCount() {
+      return this.getterDataStore.recordCount
+    },
+    getterIsLoadedRecord() {
+      return this.getterDataStore.isLoaded
+    },
+    getterRowData() {
+      if (this.isPanelWindow) {
+        if (!this.isEmptyValue(this.uuidRecord) && this.uuidRecord !== 'create-new') {
+          return this.$store.getters.getRowData(this.containerUuid, this.uuidRecord)
+        }
+      }
+      return false
+    }
+  },
+  watch: {
+    // used only panel modal (process associated in browser or window)
+    containerUuid() {
+      this.generatePanel(this.metadata.fieldList)
+    },
+    // used if the first load contains a uuid
+    isLoadRecord(value) {
+      // TODO: Validate UUID value
+      if (value && this.isPanelWindow && this.uuidRecord !== 'create-new' && !this.isEmptyValue(this.uuidRecord)) {
+        this.setTagsViewTitle(this.uuidRecord)
+      }
+    },
+    '$route.query.action'(newValue, oldValue) {
+      // used in field, if uuid record or different create-new, field is read only
+      this.uuidRecord = newValue
+
+      if (newValue !== oldValue && this.isPanelWindow) {
+        this.changePanelRecord(newValue)
+      }
+    },
+    isLoadPanel(value) {
+      if (value) {
+        this.readParameters(this.$route)
+      }
+    }
+  },
+  created() {
+    // get fields with uuid
+    this.getPanel()
+  },
+  methods: {
+    cards() {
+      if (this.isMobile || this.fieldGroups.length < 2 || this.getterIsShowedRecordNavigation) {
+        return 'cards-not-group'
+      }
+      return 'cards-in-group'
+    },
+    /**
+     * Get the tab object with all its attributes as well as the fields it contains
+     */
+    getPanel() {
+      var fieldList = this.getterFieldList
+      if (fieldList && Array.isArray(fieldList)) {
+        this.generatePanel(fieldList)
+      } else {
+        this.$store.dispatch('getPanelAndFields', {
+          parentUuid: this.parentUuid,
+          containerUuid: this.containerUuid,
+          type: this.panelType,
+          isAdvancedQuery: this.isAdvancedQuery
+        }).then(() => {
+          this.generatePanel(this.getterFieldList)
+        }).catch(error => {
+          console.warn('Field Load Error ' + error.code + ': ' + error.message)
+        })
+      }
+    },
+    generatePanel(fieldList) {
+      // order and assign groups
+      this.fieldList = fieldList
+      if (fieldList.length) {
+        this.fieldGroups = this.sortAndGroup(fieldList)
+      }
+      var firstGroup
+      if (this.fieldGroups[0] && this.fieldGroups[0].groupFinal === '') {
+        firstGroup = this.fieldGroups[0]
+        this.fieldGroups.shift()
+      }
+      this.firstGroup = firstGroup
+
+      this.isLoadPanel = true
+    },
+    /**
+     * TODO: Delete route parameters after reading them
+     */
+    readParameters(route) {
+      var parameters = {
+        isLoadAllRecords: true,
+        isReference: false,
+        isNewRecord: false,
+        isWindow: true
+      }
+      if (this.isPanelWindow) {
+        // TODO: use action notifyPanelChange with isShowedField in true
+        this.getterFieldList.forEach(fieldItem => {
+          if (route.query.hasOwnProperty(fieldItem.columnName) && !fieldItem.isAdvancedQuery) {
+            fieldItem.isShowedFromUser = true
+            fieldItem.value = parsedValueComponent({
+              fieldType: fieldItem.componentPath,
+              value: route.query[fieldItem.columnName]
+            })
+            if (String(route.query.isAdvancedQuery) === String(fieldItem.isAdvancedQuery)) {
+              fieldItem.value = parsedValueComponent({
+                fieldType: fieldItem.componentPath,
+                value: route.query[fieldItem.columnName]
+              })
+              if (fieldItem.isRange && this.$route.query[fieldItem.columnName + '_To']) {
+                fieldItem.valueTo = parsedValueComponent({
+                  fieldType: fieldItem.componentPath,
+                  value: route.query[fieldItem.columnName + '_To']
+                })
+              }
+            }
+          }
+        })
+
+        if (route.query.action && route.query.action === 'reference') {
+          parameters.isLoadAllRecords = false
+          parameters.isReference = true
+          parameters.referenceUuid = route.query.referenceUuid
+          parameters.referenceWhereClause = route.query.whereClause
+        } else if (route.query.action && route.query.action === 'create-new') {
+          parameters.isNewRecord = true
+        } else if (route.query.action && route.query.action !== 'create-new' && route.query.action !== 'reference' && route.query.action !== 'advancedQuery') {
+          parameters.isLoadAllRecords = false
+          parameters.value = route.query.action
+          parameters.tableName = this.metadata.tableName
+          parameters.columnName = 'UUID'
+        }
+        // Only call get data if panel type is window
+        if (!route.params.hasOwnProperty('isReadParameters') || route.params.isReadParameters) {
+          this.getData(parameters)
+        }
+      } else {
+        if (this.panelType === 'table' && route.query.action === 'advancedQuery') {
+          // TODO: use action notifyPanelChange with isShowedField in true
+          this.fieldList.forEach(fieldItem => {
+            if (route.query.hasOwnProperty(fieldItem.columnName) && fieldItem.isAdvancedQuery) {
+              fieldItem.isShowedFromUser = true
+
+              if (route.query.action === 'advancedQuery' === fieldItem.isAdvancedQuery) {
+                fieldItem.value = parsedValueComponent({
+                  fieldType: fieldItem.componentPath,
+                  value: route.query[fieldItem.columnName]
+                })
+                if (fieldItem.isRange && route.query[fieldItem.columnName + '_To']) {
+                  fieldItem.valueTo = parsedValueComponent({
+                    fieldType: fieldItem.componentPath,
+                    value: route.query[fieldItem.columnName + '_To']
+                  })
+                }
+              }
+            }
+          })
+          parameters.isWindow = false
+        } else if (this.panelType === 'process' || this.panelType === 'browser') {
+          if (!this.isEmptyValue(route.query)) {
+            this.$store.dispatch('notifyPanelChange', {
+              containerUuid: this.containerUuid,
+              newValues: route.query,
+              isShowedField: true,
+              isSendCallout: false,
+              panelType: this.panelType
+            })
+            parameters.isWindow = false
+          } else {
+            this.$store.dispatch('resetPanelToNew', {
+              containerUuid: this.containerUuid,
+              panelType: this.panelType
+            })
+          }
+        }
+      }
+    },
+    /**
+     * @param  {object} parameters parameters to condition the data query
+     */
+    getData(parameters) {
+      if (parameters.isWindow && this.isPanelWindow && !this.getterIsLoadedRecord) {
+        this.$store.dispatch('getDataListTab', {
+          parentUuid: this.parentUuid,
+          containerUuid: this.containerUuid,
+          isLoadAllRecords: parameters.isLoadAllRecords,
+          columnName: parameters.columnName,
+          value: parameters.value
+        })
+          .then(response => {
+            if (response.length && !parameters.isNewRecord) {
+              this.dataRecords = response[0]
+              if (this.$route.query.action === 'create-new') {
+                this.$router.push({
+                  name: this.$route.name,
+                  query: {
+                    ...this.$route.query
+                  }
+                })
+              } else if (this.$route.query.action === 'reference') {
+                this.$router.push({
+                  name: this.$route.name,
+                  query: {
+                    ...this.$route.query
+                  }
+                })
+                this.$store.dispatch('notifyPanelChange', {
+                  parentUuid: this.parentUuid,
+                  containerUuid: this.containerUuid,
+                  newValues: this.dataRecords,
+                  isSendToServer: false,
+                  isSendCallout: false,
+                  fieldList: this.fieldList,
+                  panelType: this.panelType
+                })
+              } else {
+                this.$router.push({
+                  name: this.$route.name,
+                  query: {
+                    action: this.dataRecords.UUID,
+                    ...this.$route.query
+                  }
+                })
+                this.$store.dispatch('notifyPanelChange', {
+                  parentUuid: this.parentUuid,
+                  containerUuid: this.containerUuid,
+                  newValues: this.dataRecords,
+                  isSendToServer: false,
+                  isSendCallout: false,
+                  fieldList: this.fieldList,
+                  panelType: this.panelType
+                })
+              }
+              this.setTagsViewTitle(this.$route.query.action)
+              this.isLoadRecord = true
+            } else {
+              this.$router.push({
+                query: {
+                  action: 'create-new',
+                  ...this.$route.query
+                }
+              })
+            }
+            this.setFocus()
+          })
+      }
+    },
+    /**
+     * Group the arrangement into groups of columns that they contain, it must
+     * be grouped after having the order
+     * @param {array} array
+     * @return {array} res
+     */
+    sortAndGroup(arr) {
+      if (arr === undefined) {
+        return
+      }
+      var res = [{
+        groupFinal: '',
+        metadataFields: arr
+      }]
+
+      // reduce, create array with number groupAssigned element comun
+      if (this.isPanelWindow) {
+        res = arr
+          .reduce((res, currentValue) => {
+            if (!res.includes(currentValue.groupAssigned)) {
+              res.push(currentValue.groupAssigned)
+            }
+            return res
+          }, [])
+          .map(itemGroup => {
+            return {
+              groupFinal: itemGroup,
+              metadataFields: arr.filter(itemField => {
+                return itemField.groupAssigned === itemGroup
+              })
+            }
+          })
+      }
+
+      // count and add the field numbers according to your group
+      Object.keys(res).forEach(key => {
+        let count = 0
+        const typeG = res[key].metadataFields[0].typeGroupAssigned
+        res[key].numberFields = res[key].metadataFields.length
+        res[key].typeGroup = typeG
+        res[key].numberFields = res[key].metadataFields.length
+
+        res[key].metadataFields.forEach((element, index) => {
+          if (element.isDisplayed) {
+            count++
+          }
+        })
+
+        if ((this.groupTab.groupType === 'T' && this.groupTab.groupName === res[key].groupFinal) ||
+          (this.groupTab.groupType !== 'T' && res[key].typeGroup !== 'T')) {
+          this.groupsView = this.groupsView + 1
+        }
+        res[key].activeFields = count
+      })
+      return res
+    },
+    setTagsViewTitle(actionValue) {
+      if (actionValue === 'create-new' || actionValue === '') {
+        this.tagTitle.action = this.$t('tagsView.newRecord')
+      } else if (actionValue === 'advancedQuery') {
+        this.tagTitle.action = this.$t('tagsView.advancedQuery')
+      } else {
+        var field = this.fieldList.find(fieldItem => fieldItem.isIdentifier)
+        if (field) {
+          if (this.dataRecords[field.columnName]) {
+            this.tagTitle.action = this.dataRecords[field.columnName]
+          } else {
+            this.tagTitle.action = field.value
+          }
+        } else {
+          this.tagTitle.action = this.$t('tagsView.seeRecord')
+        }
+      }
+      if (this.isPanelWindow) {
+        var tempRoute = Object.assign({}, this.$route, { title: `${this.tagTitle.base} - ${this.tagTitle.action}` })
+        this.$store.dispatch('tagsView/updateVisitedView', tempRoute)
+      }
+    },
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
+    },
+    changePanelRecord(uuidRecord) {
+      if (uuidRecord !== 'create-new' && uuidRecord !== 'reference' && uuidRecord !== 'advancedQuery') {
+        var recordSelected = this.$store.getters.getDataRecordsList(this.containerUuid).find(record => record.UUID === uuidRecord)
+        if (recordSelected) {
+          this.dataRecords = recordSelected
+          this.$store.dispatch('notifyPanelChange', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            newValues: this.dataRecords,
+            isSendToServer: false,
+            isSendCallout: false,
+            fieldList: this.fieldList,
+            panelType: this.panelType
+          }).then(() => {
+            // delete records tabs children when change record uuid
+            this.$store.dispatch('deleteRecordContainer', {
+              viewUuid: this.parentUuid,
+              withOut: [this.containerUuid]
+            })
+          })
+        }
+      }
+      this.setTagsViewTitle(uuidRecord)
+      this.setFocus()
+    },
+    setFocus() {
+      var isFocusEnabled = false
+      this.getterFieldList.forEach(fieldItem => {
+        if (!isFocusEnabled) {
+          if (this.isFocusable(fieldItem) && this.$refs.hasOwnProperty(fieldItem.columnName)) {
+            this.$refs[fieldItem.columnName][0].focus(fieldItem.columnName)
+            isFocusEnabled = true
+          }
+        }
+        return
+      })
+    },
+    isFocusable(field) {
+      if (fieldIsDisplayed(field) && !field.isReadOnly && field.isUpdateable) {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .loading-panel {
+    padding: 100px;
+    height: 100%;
+  }
+
+  .cards-in-group {
+    column-count: 2;  /*numbers of columns */
+    column-gap: 1em;
+  }
+  .cards-not-group {
+    column-count: 1; /* numbers of columns */
+    column-gap: 1em;
+    margin-bottom: 5px;
+  }
+
+  .card {
+    /* padding: 10px; */
+    width: 100% !important;
+    transition: all 100ms ease-in-out;
+    display: inline-block;
+    perspective: 1000;
+    backface-visibility: hidden;
+  }
+  .el-card {
+    width: 100% !important;
+  }
+</style>
+<style>
+  .select-filter {
+    width: 280px !important;
+    float: right;
+    top: 0;
+  }
+  .select-filter-header {
+    width: 60% !important;
+    float: right;
+    top: 0px;
+  }
+</style>
diff --git a/src/components/ADempiere/RecentItems/index.vue b/src/components/ADempiere/RecentItems/index.vue
new file mode 100644
index 00000000..5775a08d
--- /dev/null
+++ b/src/components/ADempiere/RecentItems/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span> {{ $t('profile.recentItems') }} </span>
+      <el-input
+        v-model="search"
+        size="mini"
+        :placeholder="$t('table.dataTable.search')"
+        class="search_recent"
+      />
+    </div>
+    <div class="recent-items">
+      <el-table
+        :data="search.length ? filterResult(search) : recentItems"
+        @row-click="handleClick"
+      >
+        <el-table-column width="40">
+          <template slot-scope="{row}">
+            <svg-icon :icon-class="row.icon" class="icon-window" />
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('profile.recentItems')">
+          <template slot-scope="{row}">
+            <span>{{ row.displayName }}</span>
+            <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
+            <br>
+            <span class="time">{{ translateDate(row.updated) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'RecentItems',
+  data() {
+    return {
+      recentItems: [],
+      isLoaded: true,
+      search: '',
+      accentRegexp: /[\u0300-\u036f]/g
+    }
+  },
+  computed: {
+    getterRecentItems() {
+      return this.$store.getters.getRecentItems
+    },
+    cachedViews() {
+      return this.$store.getters.cachedViews
+    }
+  },
+  mounted() {
+    this.getRecentItems()
+    this.subscribeChanges()
+  },
+  methods: {
+    checkOpened(uuid) {
+      return this.cachedViews.includes(uuid)
+    },
+    getRecentItems() {
+      var items = this.getterRecentItems
+      if (items === undefined || items.length < 1) {
+        this.$store.dispatch('getRecentItemsFromServer')
+          .then(response => {
+            this.recentItems = response
+            this.isLoaded = false
+          }).catch(error => {
+            console.log(error)
+          })
+      } else {
+        this.recentItems = items
+        this.isLoaded = false
+      }
+    },
+    handleClick(row) {
+      if (!this.isEmptyValue(row.uuidRecord)) {
+        this.$router.push({ name: row.menuUuid, query: { action: row.uuidRecord, tabParent: 0 }})
+      } else {
+        this.$router.push({ name: row.menuUuid })
+      }
+    },
+    subscribeChanges() {
+      this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'setRecentItems') {
+          this.recentItems = this.getterRecentItems
+        }
+      })
+    },
+    filterResult(search) {
+      return this.recentItems.filter(item => this.ignoreAccent(item.displayName).toLowerCase().includes(this.ignoreAccent(search.toLowerCase())))
+    },
+    ignoreAccent(s) {
+      if (!s) { return '' }
+      return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    },
+    translateDate(value) {
+      return this.$d(new Date(value), 'long', this.language)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .search_recent {
+    width: 50%!important;
+    float: right;
+  }
+	.header {
+		padding-bottom: 10px;
+	}
+	.recent-items {
+		height: 455px;
+		overflow: auto;
+	}
+  .time {
+    float: left;
+    font-size: 11px;
+    color: #999;
+  }
+  .card-box {
+    cursor: pointer;
+  }
+  .card-content {
+    font-size: 15px;
+  }
+  .icon-window {
+    font-size: x-large;
+    color: #36a3f7;
+  }
+  .action-tag {
+    float: right;
+  }
+</style>
diff --git a/src/components/ADempiere/Tab/index.vue b/src/components/ADempiere/Tab/index.vue
new file mode 100644
index 00000000..df361eff
--- /dev/null
+++ b/src/components/ADempiere/Tab/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-tabs v-model="currentTab" type="border-card" :before-leave="handleBeforeLeave" @tab-click="handleClick">
+    <template v-for="(item, key) in tabsList">
+      <el-tab-pane
+        :key="key"
+        :label="item.name"
+        :windowuuid="windowUuid"
+        :tabuuid="item.uuid"
+        :position-tab="key"
+        :name="String(item.index)"
+        :lazy="true"
+        :disabled="Boolean(key > 0 && isCreateNew)"
+        :style="isShowedDetail ? { height: '100%', overflow: 'hidden' } : { height: '75vh', overflow: 'auto' }"
+      >
+        <main-panel
+          :parent-uuid="windowUuid"
+          :container-uuid="item.uuid"
+          :metadata="item"
+          :group-tab="item.tabGroup"
+          :panel-type="panelType"
+          :is-re-search="Boolean(key == 0 || (key > 0 && firstTableName != item.tableName))"
+        />
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script>
+import { tabMixin } from '@/components/ADempiere/Tab/tabMixin'
+import MainPanel from '@/components/ADempiere/Panel'
+
+export default {
+  name: 'TabParent',
+  components: {
+    MainPanel
+  },
+  mixins: [tabMixin],
+  computed: {
+    // if tabs children is showed or closed
+    isShowedDetail() {
+      const window = this.$store.getters.getWindow(this.windowUuid)
+      if (window) {
+        return window.isShowedDetail
+      }
+      return undefined
+    }
+  },
+  watch: {
+    // TODO: Remove watchers of action, and pased as props from window
+    '$route.query.action'(actionValue) {
+      if (actionValue === 'create-new') {
+        this.currentTab = '0'
+      }
+    },
+    currentTab(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            tabParent: String(newValue)
+          }
+        })
+        this.$route.meta.tabUuid = this.tabUuid
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Tab/tabChildren.vue b/src/components/ADempiere/Tab/tabChildren.vue
new file mode 100644
index 00000000..af673c79
--- /dev/null
+++ b/src/components/ADempiere/Tab/tabChildren.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-tabs v-model="currentTabChild" type="border-card" @tab-click="handleClick">
+    <template v-for="(item, key) in tabsList">
+      <!-- TODO: Add support to tabs isSortTab (sequence) -->
+      <el-tab-pane
+        :key="key"
+        :label="item.name"
+        :windowuuid="windowUuid"
+        :tabuuid="item.uuid"
+        :position-tab="key"
+        :name="String(item.index)"
+        :lazy="true"
+        :disabled="isCreateNew"
+      >
+        <el-col :span="24">
+          <data-table
+            :parent-uuid="windowUuid"
+            :container-uuid="item.uuid"
+            :panel-type="panelType"
+          />
+        </el-col>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script>
+import { tabMixin } from '@/components/ADempiere/Tab/tabMixin'
+import DataTable from '@/components/ADempiere/DataTable'
+
+export default {
+  name: 'TabChildren',
+  components: {
+    DataTable
+  },
+  mixins: [tabMixin],
+  props: {
+    firstTabUuid: {
+      type: String,
+      default: undefined
+    },
+    firstIndex: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      currentTabChild: this.$route.query.tabChild
+    }
+  },
+  computed: {
+    // data this current tab
+    getDataSelection() {
+      return this.$store.getters.getDataRecordAndSelection(this.tabUuid)
+    },
+    // data parent tab
+    getterDataParentTab() {
+      return this.$store.getters.getDataRecordAndSelection(this.firstTabUuid)
+    },
+    getterIsLoadRecordParent() {
+      return this.getterDataParentTab.isLoaded
+    },
+    getterIsLoadContextParent() {
+      return this.getterDataParentTab.isLoadedContext
+    }
+  },
+  mounted() {
+    this.setCurrentTabChild()
+  }
+}
+</script>
+
+<style>
+  .el-tabs__content {
+    overflow: hidden;
+    position: relative;
+    padding-top: 0px !important;
+    padding-right: 15px !important;
+    padding-bottom: 0px !important;
+    padding-left: 15px !important;
+  }
+</style>
diff --git a/src/components/ADempiere/Tab/tabMixin.js b/src/components/ADempiere/Tab/tabMixin.js
new file mode 100644
index 00000000..ac26147f
--- /dev/null
+++ b/src/components/ADempiere/Tab/tabMixin.js
@@ -0,0 +1,94 @@
+import { parseContext } from '@/utils/ADempiere'
+
+export const tabMixin = {
+  props: {
+    windowUuid: {
+      type: String,
+      default: ''
+    },
+    tabsList: {
+      type: [Array, Object],
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentTab: this.$route.query.tabParent,
+      tabUuid: '',
+      panelType: 'window',
+      firstTableName: this.tabsList[0].tableName
+    }
+  },
+  computed: {
+    isCreateNew() {
+      return Boolean(this.$route.query.action === 'create-new')
+    },
+    getterDataRecords() {
+      return this.$store.getters.getDataRecordsList(this.tabUuid)
+    }
+  },
+  watch: {
+    // Refrest the records of the TabChildren
+    getDataSelection(value) {
+      if (!value.isLoaded && this.getterIsLoadContextParent && this.getterIsLoadRecordParent) {
+        this.getDataTable()
+      }
+    },
+    // Current TabChildren
+    currentTabChild(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$router.push({ query: { ...this.$route.query, tabChild: String(newValue) }})
+      }
+    },
+    // Load parent tab context
+    getterIsLoadContextParent(value) {
+      if (value && !this.getDataSelection.isLoaded && this.getterIsLoadRecordParent) {
+        this.getDataTable()
+      }
+    }
+  },
+  created() {
+    this.tabUuid = this.tabsList[0].uuid
+  },
+  methods: {
+    parseContext,
+    //
+    getDataTable() {
+      this.$store.dispatch('getDataListTab', {
+        parentUuid: this.windowUuid,
+        containerUuid: this.tabUuid
+      })
+    },
+    setCurrentTab() {
+      this.$store.dispatch('setCurrentTab', {
+        parentUuid: this.windowUuid,
+        containerUuid: this.tabUuid
+      })
+      this.$route.meta.tabUuid = this.tabUuid
+    },
+    setCurrentTabChild() {
+      if (this.$route.query.tabChild === undefined && this.firstIndex) {
+        this.currentTabChild = this.firstIndex
+      }
+    },
+    /**
+     * @param {object} tabHTML DOM HTML the tab clicked
+     */
+    handleClick(tabHTML) {
+      if (this.tabUuid !== tabHTML.$attrs.tabuuid) {
+        this.tabUuid = tabHTML.$attrs.tabuuid
+        this.setCurrentTab()
+      }
+    },
+    handleBeforeLeave(activeName) {
+      var metadataTab = this.tabsList.find(tab => tab.index === parseInt(activeName))
+      if (!this.isEmptyValue(metadataTab.whereClause) && metadataTab.whereClause.includes('@')) {
+        metadataTab.whereClause = parseContext({
+          parentUuid: metadataTab.parentUuid,
+          containerUuid: metadataTab.uuid,
+          value: metadataTab.whereClause
+        }, true)
+      }
+    }
+  }
+}
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index b89d8da6..45f092e2 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,7 +1,33 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <template v-if="levelList.length > 3">
+        <el-breadcrumb-item key="0">
+          <span v-if="firstItem.redirect==='noRedirect'" class="no-redirect">
+            {{ generateTitle(firstItem.meta.title) }}
+          </span>
+          <a v-else @click.prevent="handleLink(firstItem)">
+            {{ generateTitle(firstItem.meta.title) }}
+          </a>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item key="1">
+          <el-dropdown placement="bottom" trigger="click" :hide-on-click="true" class="el-dropdown-link" @command="handleLink">
+            <i class="el-icon-more" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="(item, index) in dropdownList" :key="index" :command="item">{{ generateTitle(item.meta.title) }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item key="2">
+          <span v-if="lastItem.redirect==='noRedirect'" class="no-redirect">
+            {{ generateTitle(lastItem.meta.title) }}
+          </span>
+          <a v-else @click.prevent="handleLink(lastItem)">
+            {{ generateTitle(lastItem.meta.title) }}
+          </a>
+        </el-breadcrumb-item>
+      </template>
+      <el-breadcrumb-item v-for="(item,index) in levelList" v-else :key="item.path">
         <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{
           generateTitle(item.meta.title) }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
@@ -17,7 +43,10 @@ import pathToRegexp from 'path-to-regexp'
 export default {
   data() {
     return {
-      levelList: null
+      levelList: null,
+      dropdownList: null,
+      firstItem: null,
+      lastItem: null
     }
   },
   watch: {
@@ -36,10 +65,15 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', name: 'Dashboard', meta: { title: 'dashboard' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      if (this.levelList.length > 3) {
+        this.dropdownList = [...this.levelList]
+        this.lastItem = this.dropdownList.pop()
+        this.firstItem = this.dropdownList.shift()
+      }
     },
     isDashboard(route) {
       const name = route && route.name
@@ -55,12 +89,9 @@ export default {
       return toPath(params)
     },
     handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
+      if (this.$route.name !== item.name) {
+        this.$router.push({ name: item.name, params: { childs: item.meta.childs }})
       }
-      this.$router.push(this.pathCompile(path))
     }
   }
 }
@@ -68,7 +99,6 @@ export default {
 
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
-  display: inline-block;
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
@@ -77,5 +107,11 @@ export default {
     color: #97a8be;
     cursor: text;
   }
+  .el-dropdown-link {
+    cursor: pointer;
+    .el-icon-more {
+      transform: none;
+    }
+  }
 }
 </style>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 90eea067..e836b55a 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -8,11 +8,11 @@
       filterable
       default-first-option
       remote
-      placeholder="Search"
+      :placeholder="$t('table.dataTable.search')"
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
+      <el-option v-for="item in options" :key="item.name" :value="item" :label="item.title.join(' > ')" />
     </el-select>
   </div>
 </template>
@@ -22,7 +22,8 @@
 // make search results more in line with expectations
 import Fuse from 'fuse.js'
 import path from 'path'
-import i18n from '@/lang'
+import { generateTitle } from '@/utils/i18n'
+// import i18n from '@/lang'
 
 export default {
   name: 'HeaderSearch',
@@ -36,6 +37,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     routes() {
       return this.$store.getters.permission_routes
     },
@@ -65,6 +69,7 @@ export default {
     this.searchPool = this.generateRoutes(this.routes)
   },
   methods: {
+    generateTitle,
     click() {
       this.show = !this.show
       if (this.show) {
@@ -77,7 +82,15 @@ export default {
       this.show = false
     },
     change(val) {
-      this.$router.push(val.path)
+      if (val.name) {
+        if (val.meta && val.meta.type === 'window') {
+          this.$router.push({ name: val.name, query: { tabParent: 0 }, params: { childs: val.meta.childs }})
+        } else {
+          this.$router.push({ name: val.name, params: { childs: val.meta.childs }})
+        }
+      } else {
+        this.$router.push({ path: val.path })
+      }
       this.search = ''
       this.options = []
       this.$nextTick(() => {
@@ -108,20 +121,19 @@ export default {
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
-
+        // if (router.meta && router.meta.isIndex) { continue }
         const data = {
           path: path.resolve(basePath, router.path),
-          title: [...prefixTitle]
+          title: [...prefixTitle],
+          meta: router.meta,
+          name: router.name
         }
 
         if (router.meta && router.meta.title) {
           // generate internationalized title
-          const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
+          const i18ntitle = this.generateTitle(router.meta.title)
           data.title = [...data.title, i18ntitle]
-
-          if (router.redirect !== 'noRedirect') {
+          if (router.redirect !== 'noRedirect' && router.name !== 'Report Viewer' && !router.meta.isIndex) {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
             res.push(data)
@@ -182,7 +194,7 @@ export default {
 
   &.show {
     .header-search-select {
-      width: 210px;
+      width: 150px;
       margin-left: 10px;
     }
   }
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index 44248418..ffa090d9 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -31,6 +31,9 @@ export default {
     handleSetLanguage(lang) {
       this.$i18n.locale = lang
       this.$store.dispatch('app/setLanguage', lang)
+      if (this.$route.path !== '/login') {
+        location.reload()
+      }
       this.$message({
         message: 'Switch Language Success',
         type: 'success'
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 63408d8b..ede48961 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,12 +1,16 @@
 <template>
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
-    <div class="rightPanel-background" />
-    <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <i :class="show?'el-icon-close':'el-icon-setting'" />
-      </div>
-      <div class="rightPanel-items">
-        <slot />
+    <div class="setting">
+      <div class="showme">
+        <div class="rightPanel-background" />
+        <div class="rightPanel">
+          <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
+            <i :class="show?'el-icon-close':'el-icon-setting'" />
+          </div>
+          <div class="rightPanel-items">
+            <slot />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,6 +81,21 @@ export default {
 </script>
 
 <style>
+.setting {
+  z-index: 3;
+  width: 5%;
+  height: 10%;
+  right: 0%;
+  position: absolute;
+  top: 250px;
+}
+.showme {
+  display: none;
+}
+
+.setting:hover .showme {
+  display: block;
+}
 .showRightPanel {
   overflow: hidden;
   position: relative;
diff --git a/src/components/RightPanel/menu.vue b/src/components/RightPanel/menu.vue
new file mode 100644
index 00000000..b385edf7
--- /dev/null
+++ b/src/components/RightPanel/menu.vue
@@ -0,0 +1,173 @@
+<template>
+  <div ref="rightMenu" :class="{show:show}" class="rightMenu-container">
+    <div class="setting">
+      <div class="showme">
+        <!-- <div class="rightMenu-background" /> -->
+        <div class="rightMenu">
+          <div class="handle-button" :style="{'top':buttonTop+'%'}" @click="show=!show">
+            <i :class="show?'el-icon-close':'el-icon-more'" style="color: gray;" />
+          </div>
+          <div class="rightMenu-items">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'Menu',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 16,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showrightMenu')
+      } else {
+        removeClass(document.body, 'showrightMenu')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightMenu
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightMenu')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightMenu
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.setting {
+  z-index: 3;
+  width: 5%;
+  height: 10%;
+  right: 0%;
+  position: absolute;
+  top: 250px;
+}
+.showme {
+  display: block;
+}
+
+.setting:hover .showme {
+  display: block;
+}
+.showrightMenu {
+  overflow: visible;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightMenu-background {
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -1;
+}
+
+.rightMenu {
+  background: #fff;
+  z-index: 3000;
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  max-width: 260px;
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  z-index: 40000;
+  left: auto;
+  right: 0px;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightMenu-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightMenu {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  position: absolute;
+  border: 1px solid #d9d9d9;
+  background: white;
+  left: -34px;
+  border-radius: 6px 0 0 6px !important;
+  width: 35px;
+  height: 35px;
+  pointer-events: auto;
+  z-index: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  font-size: 0px;
+  text-align: center;
+  color: #fff;
+  line-height: 48px;
+
+  i {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+</style>
diff --git a/src/filters/ADempiere/index.js b/src/filters/ADempiere/index.js
new file mode 100644
index 00000000..cb8b12cb
--- /dev/null
+++ b/src/filters/ADempiere/index.js
@@ -0,0 +1,20 @@
+import moment from 'moment'
+
+/**
+ *
+ * @param {number} value
+ * @param {string} type, Date, DateTime, Time
+ */
+export function formatDate(value, referenceType = 'DateTime') {
+  if (typeof value === 'number') {
+    var dateTime = moment.utc(value)
+    var format = 'YYYY-MM-DD HH:mm'
+    if (referenceType === 'Time') {
+      format = 'HH:mm'
+    } else if (referenceType === 'Date') {
+      format = 'YYYY-MM-DD'
+    }
+    return dateTime.format(format)
+  }
+  return null
+}
diff --git a/src/filters/index.js b/src/filters/index.js
index f6a28488..380e90b1 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -66,3 +66,5 @@ export function toThousandFilter(num) {
 export function uppercaseFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
+
+export * from '@/filters/ADempiere/'
diff --git a/src/lang/ADempiere/en.js b/src/lang/ADempiere/en.js
new file mode 100644
index 00000000..da442a3a
--- /dev/null
+++ b/src/lang/ADempiere/en.js
@@ -0,0 +1,258 @@
+export default {
+  route: {
+    dashboard: 'Dashboard',
+    documentation: 'Documentation',
+    guide: 'Guide',
+    forgotPassword: 'Forgot Password?',
+    userEnrollment: 'Check in',
+    page401: '401',
+    page404: '404',
+    profile: 'Profile',
+    ProcessActivity: 'Process Activity',
+    Role: 'Role',
+    ReportViewer: 'Report Viewer'
+  },
+  notifications: {
+    // simplex
+    completed: 'Completed',
+    loading: 'Loading',
+    succesful: 'Successful',
+    error: 'Error',
+    opened: 'Opened',
+    // search
+    searching: 'Searching records on the server',
+    succcessSearch: 'The search has been made',
+    searchWithOutRecords: 'The search ended without results',
+    errorSearch: 'The search has not been completed',
+    // process
+    processing: 'Processing',
+    processExecuted: 'Executed, see process activity',
+    processError: 'Was not executed',
+    //
+    emptyValues: 'Parameter(s) empty value',
+    fieldMandatory: 'The field is mandatory',
+    requestError: 'Error executing the request',
+    successChangeRole: 'The role has been changed',
+    errorChangeRole: 'The role has not been changed',
+    copySuccessful: 'Copied',
+    copyUnsuccessful: 'Error, unable to copy',
+    mandatoryFieldMissing: 'Missing fill in the fields ',
+    updateFields: 'The record is updated with the field ',
+    invalidEmailFormat: 'Invalid email format'
+  },
+  navbar: {
+    badge: {
+      Notifications: 'Notifications',
+      link: 'go to ProccesActivity'
+    },
+    dashboard: 'Dashboard',
+    github: 'Github',
+    logOut: 'Log Out',
+    profile: 'Profile',
+    theme: 'Theme',
+    size: 'Global Size'
+  },
+  login: {
+    noValidUser: 'Please enter the correct user name',
+    noValidPassword: 'The password can not be empty',
+    invalidLogin: 'User Id or Password invalid',
+    unexpectedError: 'An unexpected error has occurred, try again',
+    capsLock: 'Caps lock is On',
+    title: 'Login Form',
+    submit: 'Submit',
+    logIn: 'Login',
+    name: 'Name',
+    lastName: 'Last name',
+    eMail: 'Email',
+    userName: 'User name',
+    userNameOrEmail: 'User name or Email',
+    userEnrollment: 'Enrollment user',
+    userEnrollmentSuccessful: 'Successful user enrollment, check your email',
+    passwordResetSendLink: 'The link to reset the password was sent to the email ',
+    password: 'Password',
+    passwordNew: 'New password',
+    passwordConfirm: 'Password confirm',
+    passwordConfirmNew: 'New password confirm',
+    any: 'any',
+    thirdparty: 'Or connect with',
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation.',
+    invalidToken: 'The token used is invalid.',
+    passwordReset: 'Password Reset',
+    createPassword: 'Create password',
+    passwordResetSuccessful: 'Password reset was successful',
+    passwordAndConfirmNotMatch: 'The new password and your confirmation do not match.'
+  },
+  documentation: {
+    documentation: 'Documentation',
+    github: 'Github Repository'
+  },
+  permission: {
+    addRole: 'New Role',
+    editPermission: 'Edit',
+    roles: 'Your roles',
+    switchRoles: 'Switch roles',
+    tips: 'In some cases, using v-permission will have no effect. For example: Element-UI  el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide'
+  },
+  components: {
+    date: {
+      Today: 'Today',
+      Yesterday: 'Yesterday',
+      Week: 'Last week',
+      LastMonth: 'Last month',
+      CurrentMonth: 'The current month'
+    },
+    documentation: 'Documentation',
+    binaryButton: 'Upload file',
+    binaryTip: 'Only files with a size smaller than 500kb',
+    imageError: 'The image exceeds 2MB and does not comply with the valid formats!',
+    contextMenuRelations: 'Relations',
+    contextMenuActions: 'Actions',
+    contextMenuReferences: 'References',
+    RunProcess: 'Run',
+    ChangeParameters: 'Change Parameters',
+    RunProcessAs: 'Run As',
+    ExportTo: 'Export to',
+    contextMenuDownload: 'Download',
+    contextMenuShareLink: 'Share Link',
+    contextMenuRefresh: 'Refresh',
+    contextMennuExport: 'Export Smart Browser',
+    contextMennuWindowReport: 'Window Report ',
+    dateStartPlaceholder: 'Start date',
+    dateEndPlaceholder: 'End date',
+    timePlaceholder: 'Select time',
+    dialogCancelButton: 'Cancel',
+    dialogConfirmButton: 'Confirm',
+    filterableItems: 'Optional Columns',
+    fixedleItems: 'Fixed Columns',
+    resetAllFilters: 'Reset all filters',
+    switchActiveText: 'Yes',
+    switchInactiveText: 'Not',
+    contextFieldTitle: 'Context Information'
+  },
+  views: {
+    SmartBrowser: 'Smart Browser',
+    Process: 'Process',
+    Window: 'Window',
+    Report: 'Report',
+    Workflow: 'Workflow',
+    Task: 'Task',
+    Form: 'Form',
+    noProcess: 'Not process running',
+    logs: 'Summary',
+    log: 'Summary',
+    seeReport: 'See Report',
+    summary: 'Summary',
+    viewsHelp: 'Help',
+    searchCriteria: 'Search Criteria',
+    unsupportedSorry: 'Sorry',
+    unsupportedHeadline: 'This view is currently unavailable',
+    unsupportedInfo: 'Please check that the view is supported in this version, or click the button below to return to the homepage.',
+    unsupportedButton: 'Back to dashboard'
+  },
+  table: {
+    ProcessActivity: {
+      name: 'Name',
+      zoomIn: 'Zoom in',
+      description: 'Description',
+      actions: 'Action',
+      status: 'Status',
+      Logs: 'Summary',
+      summary: 'Summary',
+      Help: 'Help',
+      FileName: 'FileName',
+      Output: 'Output'
+    },
+    dataTable: {
+      search: 'Search',
+      records: 'Records',
+      selected: 'Selected',
+      deleteSelection: 'Delete Selected Records',
+      advancedQuery: 'Advanced Query',
+      showOnlyMandatoryColumns: 'Show Only Mandatory Columns',
+      showAllAvailableColumns: 'Show All Available Columns'
+    },
+    recentItems: {
+      search: 'Filter by name, description or date',
+      date: 'Date',
+      name: 'Name',
+      description: 'Description'
+    }
+  },
+  example: {
+    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction'
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export Selected Items',
+    placeholder: 'Please enter the file name (default excel-list)'
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name (default file)'
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading PDF.'
+  },
+  theme: {
+    change: 'Change Theme',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
+  },
+  tagsView: {
+    refresh: 'Refresh',
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All',
+    newRecord: 'New Record',
+    seeRecord: 'See Record',
+    advancedQuery: 'Advanced Query'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
+  },
+  profile: {
+    aboutMe: 'About Me',
+    recentItems: 'Recent Items',
+    recentItemsName: 'Name Recent Items',
+    role: 'Role',
+    availableRoles: 'Available roles',
+    currentRole: 'Current role',
+    clientName: 'Client name',
+    description: 'Description',
+    changeRole: 'Change role',
+    changeLanguage: 'Change language',
+    changeLanguagePlaceholder: 'Choose a language'
+  },
+  window: {
+    newRecord: 'New Record',
+    deleteRecord: 'Delete Record',
+    undoNew: 'Undo New Record'
+  },
+  data: {
+    emtpyTableName: 'Error: Table Name is not defined',
+    errorGetData: 'Error getting data records',
+    createRecordSuccessful: 'New record created successfully',
+    createNewRecord: 'Mode New record',
+    createRecordError: 'Error creating new record',
+    deleteRecordSuccessful: 'Record deleted successfully',
+    deleteRecordError: 'Error deleting record',
+    selectionRequired: 'You must select a record',
+    undo: 'Undo'
+  }
+}
diff --git a/src/lang/ADempiere/es.js b/src/lang/ADempiere/es.js
new file mode 100644
index 00000000..4785c6a0
--- /dev/null
+++ b/src/lang/ADempiere/es.js
@@ -0,0 +1,233 @@
+export default {
+  route: {
+    dashboard: 'Panel de control',
+    documentation: 'Documentación',
+    forgotPassword: '¿Olvidó su Contraseña?',
+    userEnrollment: 'Registrarse',
+    guide: 'Guía',
+    page401: '401',
+    page404: '404',
+    profile: 'Perfil',
+    ProcessActivity: 'Actividad de Procesos',
+    Role: 'Rol',
+    ReportViewer: 'Visor de Reportes'
+  },
+  notifications: {
+    // simplex
+    completed: 'Completado',
+    loading: 'Cargando',
+    succesful: 'Exitoso',
+    error: 'Error',
+    opened: 'Abierto',
+    // search
+    searching: 'Buscando registros en el servidor',
+    succcessSearch: 'La búsqueda se ha realizado',
+    searchWithOutRecords: 'La búsqueda finalizo sin resultados',
+    errorSearch: 'La búsqueda no se ha completado.',
+    // process
+    processing: 'Procesando',
+    processExecuted: 'Ejecutado, ver actividad de proceso',
+    processError: 'No fue ejecutado',
+    //
+    emptyValues: 'Parametro(s) con valores vacios',
+    fieldMandatory: 'El campo es obligatorio',
+    requestError: 'Error al ejecutar la petición',
+    successChangeRole: 'El rol se ha cambiado',
+    errorChangeRole: 'El rol no se ha cambiado',
+    copySuccessful: 'Copiado',
+    copyUnsuccessful: 'Error, no se puede copiar',
+    mandatoryFieldMissing: 'Falta completar los campos ',
+    updateFields: 'Se actualiza el registro con el campo ',
+    invalidEmailFormat: 'Formato de correo electronico invalido'
+  },
+  navbar: {
+    badge: {
+      Notifications: 'Notificaciones',
+      link: 'ir a actividad de proceso'
+    },
+    logOut: 'Salir',
+    dashboard: 'Panel de control',
+    github: 'Github',
+    theme: 'Tema',
+    size: 'Tamaño global',
+    profile: 'Perfil'
+  },
+  login: {
+    noValidUser: 'Por favor ingrese el nombre de usuario correcto',
+    noValidPassword: 'La contraseña no puede estar vacía',
+    invalidLogin: 'ID de usuario o contraseña no válida',
+    unexpectedError: 'Se ha producido un error inesperado, intente nuevamente',
+    capsLock: 'Bloqueo de mayúsculas activado',
+    title: 'Formulario de acceso',
+    submit: 'Enviar',
+    logIn: 'Acceso',
+    name: 'Nombre',
+    lastName: 'Apellido',
+    eMail: 'Correo electronico',
+    userName: 'Usuario',
+    userNameOrEmail: 'Usuario o Correo',
+    userEnrollment: 'Registrar usuario',
+    userEnrollmentSuccessful: 'Registro de usuario exitoso, verifique su correo electronico',
+    passwordResetSendLink: 'El enlace para reiniciar la contraseña se envio al correo ',
+    password: 'Contraseña',
+    passwordNew: 'Nueva contraseña',
+    passwordConfirm: 'Confirmar contraseña',
+    passwordConfirmNew: 'Confirmación de nueva contraseña',
+    any: 'nada',
+    thirdparty: 'Conectar con',
+    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios.',
+    invalidToken: 'El token utilizado es inválido.',
+    passwordReset: 'Reiniciar contraseña',
+    createPassword: 'Crear contraseña',
+    passwordResetSuccessful: 'El reinicio de contraseña se realizo correctamente',
+    passwordAndConfirmNotMatch: 'La contraseña nueva y su confirmación no coinciden.'
+  },
+  documentation: {
+    documentation: 'Documentación',
+    github: 'Repositorio Github'
+  },
+  permission: {
+    addRole: 'Nuevo rol',
+    editPermission: 'Permiso de edición',
+    roles: 'Tus permisos',
+    switchRoles: 'Cambiar permisos',
+    tips: 'En algunos casos, no es adecuado usar v-permission, como el componente Element Tab o el-table-column y otros casos de dom de representación asíncrona que solo se pueden lograr configurando manualmente v-if.',
+    delete: 'Borrar',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
+  },
+  guide: {
+    description: 'La página de guía es útil para algunas personas que ingresaron al proyecto por primera vez. Puede introducir brevemente las características del proyecto. Demo se basa en ',
+    button: 'Ver guía'
+  },
+  components: {
+    date: {
+      Today: 'Hoy',
+      Yesterday: 'Ayer',
+      Week: 'La semana pasada',
+      LastMonth: 'El mes pasado',
+      CurrentMonth: 'El mes actual'
+    },
+    documentation: 'Documentación',
+    binaryButton: 'Subir archivo',
+    binaryTip: 'Solo archivos con un tamaño menor a 500kb',
+    imageError: 'La imagen excede los 2MB y no cumple con los formato validos!',
+    contextMenuRelations: 'Relaciones',
+    contextMenuActions: 'Acciones',
+    contextMenuReferences: 'Referencias',
+    contextMenuDownload: 'Descargar',
+    contextMenuShareLink: 'Compartir Link',
+    contextMenuRefresh: 'Actualizar',
+    contextMennuExport: 'Exportar Smart Browser',
+    contextMennuWindowReport: 'Informe de Ventana',
+    RunProcess: 'Ejecutar',
+    ChangeParameters: 'Cambiar Parametros',
+    RunProcessAs: 'Ejecutar como',
+    ExportTo: 'Exportar a',
+    dateStartPlaceholder: 'Fecha inicial',
+    dateEndPlaceholder: 'Fecha final',
+    timePlaceholder: 'Seleccione tiempo',
+    dialogCancelButton: 'Cancelar',
+    dialogConfirmButton: 'Confirmar',
+    filterableItems: 'Columnas Opcionales',
+    fixedleItems: 'Columnas Fijas',
+    resetAllFilters: 'Reiniciar todos los filtros',
+    switchActiveText: 'Si',
+    switchInactiveText: 'No',
+    contextFieldTitle: 'Información de Contexto'
+  },
+  views: {
+    SmartBrowser: 'Consulta Inteligente',
+    Process: 'Proceso',
+    Window: 'Ventana',
+    Report: 'Reporte',
+    Workflow: 'Flujo de Trabajo',
+    Task: 'Tarea',
+    Form: 'Formulario',
+    noProcess: 'No hay procesos en ejecución',
+    logs: 'Resumen',
+    log: 'Bitacora',
+    seeReport: 'Ver Reporte',
+    summary: 'Resumen',
+    viewsHelp: 'Ayuda',
+    searchCriteria: 'Criterio de Búsqueda',
+    unsupportedSorry: 'Lo sentimos',
+    unsupportedHeadline: 'Esta vista no está disponible actualmente',
+    unsupportedInfo: 'Verifique que la vista sea compatible con esta versión, o haga clic en el botón a continuación para volver a la página de inicio.',
+    unsupportedButton: 'Volver al Panel de control'
+  },
+  table: {
+    ProcessActivity: {
+      Name: 'Nombre',
+      zoomIn: 'Acercar',
+      Description: 'Descripción',
+      FileName: 'Nombre de Archivo',
+      Output: 'Salida',
+      Action: 'Acción',
+      Status: 'Estado',
+      Logs: 'Resumen',
+      Summary: 'Resumen',
+      Help: 'Ayuda'
+    },
+    dataTable: {
+      search: 'Buscar',
+      records: 'Registros',
+      selected: 'Seleccionados',
+      deleteSelection: 'Eliminar Registros Seleccionados',
+      advancedQuery: 'Consulta Avanzada',
+      showOnlyMandatoryColumns: 'Mostrar Solo Columnas Obligatorias',
+      showAllAvailableColumns: 'Mostrar Todas Columnas Disponibles'
+    },
+    recentItems: {
+      search: 'Filtrar por nombre, descripción o fecha',
+      date: 'Fecha',
+      name: 'Nombre',
+      description: 'Descripción'
+    }
+  },
+  tagsView: {
+    refresh: 'Actualizar',
+    close: 'Cerrar',
+    closeOthers: 'Cerrar otros',
+    closeAll: 'Cerrar todos',
+    newRecord: 'Nuevo Registro',
+    seeRecord: 'Ver Registro',
+    advancedQuery: 'Consulta Avanzada'
+  },
+  settings: {
+    title: 'Configuración de estilo de página',
+    theme: 'Color del tema',
+    tagsView: 'Habilitar Tags-View',
+    fixedHeader: 'Encabezado fijo',
+    sidebarLogo: 'Logotipo de la barra lateral'
+  },
+  profile: {
+    aboutMe: 'Sobre Mi',
+    recentItems: 'Artículos Recientes',
+    recentItemsName: 'Nombre Ítems Recientes',
+    role: 'Rol',
+    availableRoles: 'Roles disponibles',
+    currentRole: 'Rol actual',
+    clientName: 'Nombre del cliente',
+    description: 'Descripción',
+    changeRole: 'Cambiar rol',
+    changeLanguage: 'Cambiar idioma',
+    changeLanguagePlaceholder: 'Elija un idioma'
+  },
+  window: {
+    newRecord: 'Nuevo Registro',
+    deleteRecord: 'Eliminar Registro',
+    undoNew: 'Descartar Nuevo Registro'
+  },
+  data: {
+    emtpyTableName: 'Error: El nombre de la tabla no esta definida',
+    errorGetData: 'Error obteniendo los datos de registro',
+    createRecordSuccessful: 'Nuevo registro creado con exito',
+    createNewRecord: 'Modo nuevo registro',
+    createRecordError: 'Error al crear nuevo registro',
+    deleteRecordSuccessful: 'Registro eliminado exitosamente',
+    deleteRecordError: 'Error al eliminar el regitro',
+    selectionRequired: 'Debe seleccionar un registro',
+    undo: 'Deshacer'
+  }
+}
diff --git a/src/lang/index.js b/src/lang/index.js
index 1799ae7f..dc50fb48 100644
--- a/src/lang/index.js
+++ b/src/lang/index.js
@@ -9,13 +9,43 @@ import enLocale from './en'
 import zhLocale from './zh'
 import esLocale from './es'
 import jaLocale from './ja'
+import esADempiere from './ADempiere/es'
+import enADempiere from './ADempiere/en'
 
 Vue.use(VueI18n)
 
+const dateTimeFormats = {
+  'en': {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit',
+      weekday: 'long',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false
+    }
+  },
+  'es': {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit',
+      weekday: 'long',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true
+    }
+  }
+}
+
 const messages = {
   en: {
     ...enLocale,
-    ...elementEnLocale
+    ...elementEnLocale,
+    ...enADempiere
   },
   zh: {
     ...zhLocale,
@@ -23,7 +53,8 @@ const messages = {
   },
   es: {
     ...esLocale,
-    ...elementEsLocale
+    ...elementEsLocale,
+    ...esADempiere
   },
   ja: {
     ...jaLocale,
@@ -48,8 +79,10 @@ const i18n = new VueI18n({
   // set locale
   // options: en | zh | es
   locale: getLanguage(),
+  fallbackLocale: 'en',
   // set locale messages
-  messages
+  messages,
+  dateTimeFormats
 })
 
 export default i18n
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 92ca2c88..20eda0b0 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section id="appMain" class="app-main">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />
@@ -16,7 +16,7 @@ export default {
       return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.fullPath
+      return this.$route.path
     }
   }
 }
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 9d5c6658..8e701db8 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,26 +1,12 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
-    <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-
-        <error-log class="errLog-container right-menu-item hover-effect" />
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <lang-select class="right-menu-item hover-effect" />
-
-      </template>
-
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+    <el-button v-if="isMenuMobile && isMobile" type="text" icon="el-icon-close" style="padding-top: 13px; color: #000000;font-size: 121%;font-weight: 615!important;" @click="isMenuOption()" />
+    <breadcrumb v-show="!isMenuMobile || device!=='mobile'" id="breadcrumb-container" class="breadcrumb-container" :style="isMobile ? { width: '40%'} : { width: 'auto'} " />
+    <div v-show="isMenuMobile && isMobile" style="display: inline-flex; float: right;">
+      <search id="header-search" class="right-menu-item" style="padding-top: 10px;" />
+      <badge style="padding-top: 6px;" />
+      <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
           <i class="el-icon-caret-bottom" />
@@ -48,12 +34,42 @@
             <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
-      </el-dropdown>
+      </el-dropdown> -->
+    </div>
+    <div class="right-menu">
+      <template v-if="device!=='mobile'">
+        <search id="header-search" class="right-menu-item" />
+        <badge />
+        <error-log class="errLog-container right-menu-item hover-effect" />
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <lang-select class="right-menu-item hover-effect" />
+
+      </template>
+      <el-button v-show="!isMenuMobile && isMobile" type="text" icon="el-icon-more" @click="isMenuOption()" />
+      <el-popover
+        placement="bottom"
+        width="245"
+        trigger="click"
+      >
+        <div>
+          <user-card :user="user" />
+          <el-button type="text" style="float: left;" @click="handleClick">{{ $t('navbar.profile') }}</el-button>
+          <el-button type="text" style="float: right;" @click="logout">{{ $t('navbar.logOut') }}</el-button>
+        </div>
+        <el-button slot="reference" type="text" style="padding-top: 0px;"><img :src="avatar+'?imageView2/1/w/40/h/40'" class="user-avatar"></el-button>
+      </el-popover>
     </div>
   </div>
 </template>
 
 <script>
+import UserCard from '@/views/profile/components/Profile'
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
@@ -62,18 +78,30 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import LangSelect from '@/components/LangSelect'
 import Search from '@/components/HeaderSearch'
+import Badge from '@/components/ADempiere/Badge'
 
 export default {
   components: {
     Breadcrumb,
+    Badge,
     Hamburger,
     ErrorLog,
     Screenfull,
     SizeSelect,
     LangSelect,
+    UserCard,
     Search
   },
+  data() {
+    return {
+      user: {},
+      isMenuMobile: false
+    }
+  },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     ...mapGetters([
       'sidebar',
       'avatar',
@@ -81,18 +109,37 @@ export default {
     ])
   },
   methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    isMenuOption() {
+      this.isMenuMobile = !this.isMenuMobile
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    handleClick() {
+      this.$router.push({ name: 'Profile' })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.el-dropdown {
+  display: inline-block;
+  position: relative;
+  color: #606266;
+  font-size: 14px;
+  width: 50px;
+}
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -124,6 +171,7 @@ export default {
 
   .right-menu {
     float: right;
+    display: flex;
     height: 100%;
     line-height: 50px;
 
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index eb4dd107..bef9ac14 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -12,23 +12,23 @@ import { isExternal } from '@/utils/validate'
 export default {
   props: {
     to: {
-      type: String,
+      type: Object,
       required: true
     }
   },
   methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
+    linkProps(route) {
+      if (isExternal(route.path)) {
         return {
           is: 'a',
-          href: url,
+          href: route.path,
           target: '_blank',
           rel: 'noopener'
         }
       }
       return {
         is: 'router-link',
-        to: url
+        to: { name: route.name }
       }
     }
   }
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index ac0c8d8f..3b884113 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link sidebar-logo-link-close" to="/">
+        <el-tooltip placement="right">
+          <div slot="content">{{ getRol.name }} | {{ getRol.clientName }}</div>
+          <img v-if="logo" :src="logo" class="sidebar-logo">
+          <h1 v-else class="sidebar-title">{{ title }} </h1>
+        </el-tooltip>
       </router-link>
+      <div v-else key="expand" class="sidebar-logo-link">
+        <img v-if="logo" :src="logo" class="sidebar-logo" @click="dashboard()">
+        <h1 class="sidebar-title" @click="dashboard()">{{ title }}</h1><br>
+        <el-tooltip placement="right">
+          <div slot="content">{{ getRol.name }} | {{ getRol.clientName }}</div>
+          <p class="sidebar-sub-title" @click="profile()">
+            {{ getRol.name }} | {{ getRol.clientName }}
+          </p>
+        </el-tooltip>
+      </div>
     </transition>
   </div>
 </template>
@@ -24,8 +33,23 @@ export default {
   },
   data() {
     return {
-      title: 'Vue Element Admin',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      // title: 'Vue Element Admin',
+      title: 'ADempiere Vue',
+      // logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4?imageView2/1/w/80/h/80'
+    }
+  },
+  computed: {
+    getRol() {
+      return this.$store.getters['user/getRol']
+    }
+  },
+  methods: {
+    profile() {
+      this.$router.push({ path: '/profile/index?' })
+    },
+    dashboard() {
+      this.$router.push({ path: '/' })
     }
   }
 }
@@ -45,7 +69,7 @@ export default {
   position: relative;
   width: 100%;
   height: 50px;
-  line-height: 50px;
+  // line-height: 50px;
   background: #2b2f3a;
   text-align: center;
   overflow: hidden;
@@ -59,18 +83,36 @@ export default {
       height: 32px;
       vertical-align: middle;
       margin-right: 12px;
+      cursor: pointer;
     }
 
     & .sidebar-title {
       display: inline-block;
+      cursor: pointer;
       margin: 0;
       color: #fff;
       font-weight: 600;
-      line-height: 50px;
+      // line-height: 50px;
       font-size: 14px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }
+
+    & .sidebar-sub-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      // display: inline-block;
+      cursor: pointer;
+      margin: 0;
+      color: #fff;
+      font-size: 12px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+  & .sidebar-logo-link-close {
+    line-height: 50px;
   }
 
   &.collapse {
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index b4422cf8..0efe4464 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+      <app-link v-if="onlyOneChild.meta" :to="onlyOneChild">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
         </el-menu-item>
@@ -31,6 +31,7 @@ import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'SidebarItem',
@@ -57,6 +58,17 @@ export default {
     this.onlyOneChild = null
     return {}
   },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    isCollapse() {
+      if (this.sidebar.opened) {
+        return 'right'
+      }
+      return 'top'
+    }
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 19d3083f..1a75d9fa 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,20 +1,44 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
+      <draggable
+        v-if="!isMobile"
+        :list="visitedViews"
+        v-bind="$attrs"
+        :set-data="setData"
+        style="display: flex;"
       >
-        {{ generateTitle(tag.title) }}
-        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
+        <router-link
+          v-for="tag in visitedViews"
+          ref="tag"
+          :key="tag.path"
+          :class="isActive(tag)?'active':''"
+          :to="{ name: tag.name, path: tag.path, query: tag.query, fullPath: tag.fullPath, params: tag.params }"
+          tag="span"
+          class="tags-view-item"
+          @click.middle.native="closeSelectedTag(tag)"
+          @contextmenu.prevent.native="openMenu(tag,$event)"
+        >
+          <div class="tag-title">{{ generateTitle(tag.title) }}</div>
+          <div v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        </router-link>
+      </draggable>
+      <template v-else>
+        <router-link
+          v-for="tag in visitedViews"
+          ref="tag"
+          :key="tag.path"
+          :class="isActive(tag)?'active':''"
+          :to="{ name: tag.name, path: tag.path, query: tag.query, fullPath: tag.fullPath, params: tag.params }"
+          tag="span"
+          class="tags-view-item"
+          @click.middle.native="closeSelectedTag(tag)"
+          @contextmenu.prevent.native="openMenu(tag,$event)"
+        >
+          <div class="tag-title">{{ generateTitle(tag.title) }}</div>
+          <div v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        </router-link>
+      </template>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">
@@ -38,9 +62,10 @@
 import ScrollPane from './ScrollPane'
 import { generateTitle } from '@/utils/i18n'
 import path from 'path'
+import draggable from 'vuedraggable'
 
 export default {
-  components: { ScrollPane },
+  components: { ScrollPane, draggable },
   data() {
     return {
       visible: false,
@@ -51,6 +76,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
     },
@@ -78,7 +106,15 @@ export default {
   methods: {
     generateTitle, // generateTitle by vue-i18n
     isActive(route) {
-      return route.path === this.$route.path
+      if (route.name === 'Report Viewer') {
+        if (route.params.processId === this.$route.params.processId) {
+          return route.params.processId === this.$route.params.processId
+        } else {
+          return route.path === this.$route.path
+        }
+      } else {
+        return route.name === this.$route.name
+      }
     },
     filterAffixTags(routes, basePath = '/') {
       let tags = []
@@ -121,7 +157,15 @@ export default {
       const tags = this.$refs.tag
       this.$nextTick(() => {
         for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
+          if (this.$route.name === 'Report Viewer') {
+            if (this.$route.params && tag.to.params && tag.to.params.processId === this.$route.params.processId) {
+              this.$refs.scrollPane.moveToTarget(tag)
+            }
+          }
+          if (tag.to.name === this.$route.name) {
+            if (tag.to.query && tag.to.query.action && tag.to.query.action === this.$route.query.action) {
+              tag.to.params.isReadParameters = false
+            }
             this.$refs.scrollPane.moveToTarget(tag)
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
@@ -143,6 +187,22 @@ export default {
       })
     },
     closeSelectedTag(view) {
+      if (view.meta && view.meta.uuid && view.meta.type) {
+        this.$store.dispatch('resetPanelToNew', {
+          parentUuid: view.meta.type !== 'window' ? undefined : view.meta.uuid,
+          containerUuid: view.meta.type === 'window' ? view.meta.tabUuid : view.meta.uuid,
+          panelType: view.meta.type,
+          isNewRecord: false
+        })
+        if (view.meta.type === 'window' || view.meta.type === 'browser') {
+          this.$store.dispatch('deleteRecordContainer', {
+            viewUuid: view.meta.uuid
+          })
+          if (view.meta.type === 'window') {
+            this.$store.dispatch('setWindowOldRoute')
+          }
+        }
+      }
       this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
           this.toLastView(visitedViews, view)
@@ -197,6 +257,11 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
     }
   }
 }
@@ -210,33 +275,41 @@ export default {
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
+    width: 100%;
     .tags-view-item {
-      display: inline-block;
-      position: relative;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      flex:none;
+      max-width: 32%;
       cursor: pointer;
       height: 26px;
       line-height: 26px;
       border: 1px solid #d8dce5;
       color: #495060;
       background: #fff;
-      padding: 0 8px;
+      padding: 0 7px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      div.tag-title{
+        width: -webkit-fill-available;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       &:first-of-type {
         margin-left: 15px;
       }
-      &:last-of-type {
-        margin-right: 15px;
-      }
       &.active {
         background-color: #42b983;
         color: #fff;
         border-color: #42b983;
         &::before {
           content: '';
+          align-self: center;
           background: #fff;
           display: inline-block;
+          min-width: 8px;
           width: 8px;
           height: 8px;
           border-radius: 50%;
@@ -275,6 +348,8 @@ export default {
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {
+      align-self: center;
+      min-width: 16px;
       width: 16px;
       height: 16px;
       vertical-align: 2px;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 965bcd1b..a5f9a854 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -17,7 +17,7 @@
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import { AppMain, Navbar, Sidebar, Settings, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 
diff --git a/src/main.js b/src/main.js
index e218bd83..6d772e34 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
 import Element from 'element-ui'
 import './styles/element-variables.scss'
+import VueSplit from 'vue-split-panel'
 
 import '@/styles/index.scss' // global css
 
@@ -19,6 +20,7 @@ import './permission' // permission control
 import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
+import * as globalMethods from '@/utils/ADempiere/globalMethods' // global methods
 
 /**
  * If you don't want to use mock-server
@@ -32,7 +34,7 @@ import { mockXHR } from '../mock'
 if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
-
+Vue.use(VueSplit)
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
@@ -43,6 +45,11 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+// register global utility methods
+Object.keys(globalMethods).forEach(key => {
+  Vue.prototype[key] = globalMethods[key]
+})
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/permission.js b/src/permission.js
index 750aeab6..80a51c24 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+const whiteList = ['/login', '/userEnrollment', '/createPassword', '/forgotPassword', '/passwordReset', '/auth-redirect'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -27,17 +27,18 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done()
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {
+      // const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      // indicate if session active
+      if (store.getters['user/getIsSession']) {
         next()
       } else {
         try {
-          // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
+          // get user info from server
+          await store.dispatch('user/getInfo')
 
           // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          const accessRoutes = await store.dispatch('permission/generateRoutes')
 
           // dynamically add accessible routes
           router.addRoutes(accessRoutes)
@@ -56,8 +57,7 @@ router.beforeEach(async(to, from, next) => {
     }
   } else {
     /* has no token*/
-
-    if (whiteList.indexOf(to.path) !== -1) {
+    if (whiteList.includes(to.path)) {
       // in the free login whitelist, go directly
       next()
     } else {
diff --git a/src/router/index.js b/src/router/index.js
index 6a60eedc..a5a26b09 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,28 +70,53 @@ export const constantRoutes = [
     component: () => import('@/views/error-page/401'),
     hidden: true
   },
+  {
+    path: '/userEnrollment',
+    component: () => import('@/views/login/userEnrollment'),
+    hidden: true
+  },
+  {
+    path: '/forgotPassword',
+    component: () => import('@/views/login/forgotPassword'),
+    hidden: true
+  },
+  {
+    path: '/passwordReset',
+    name: 'passwordReset',
+    component: () => import('@/views/login/setPassword'),
+    hidden: true
+  },
+  {
+    path: '/createPassword',
+    name: 'createPassword',
+    component: () => import('@/views/login/setPassword'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
     redirect: 'dashboard',
+    meta: { title: 'dashboard', icon: 'dashboard', affix: true, breadcrumb: false },
     children: [
       {
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+        meta: { title: 'dashboard', icon: 'dashboard', affix: true, breadcrumb: false, isIndex: true }
       }
     ]
   },
   {
     path: '/documentation',
     component: Layout,
+    redirect: '/documentation/index',
+    meta: { title: 'documentation', icon: 'documentation', affix: true, breadcrumb: false },
     children: [
       {
         path: 'index',
         component: () => import('@/views/documentation/index'),
         name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+        meta: { title: 'documentation', icon: 'documentation', affix: true, isIndex: true }
       }
     ]
   },
@@ -99,12 +124,13 @@ export const constantRoutes = [
     path: '/guide',
     component: Layout,
     redirect: '/guide/index',
+    meta: { title: 'guide', icon: 'guide', noCache: true, breadcrumb: false },
     children: [
       {
         path: 'index',
         component: () => import('@/views/guide/index'),
         name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+        meta: { title: 'guide', icon: 'guide', noCache: true, isIndex: true }
       }
     ]
   },
diff --git a/src/router/modules/ADempiere/menu.js b/src/router/modules/ADempiere/menu.js
new file mode 100644
index 00000000..d9ebc0fd
--- /dev/null
+++ b/src/router/modules/ADempiere/menu.js
@@ -0,0 +1,206 @@
+import { getMenu } from '@/api/user'
+import { getToken } from '@/utils/auth'
+
+/* Layout  */
+import Layout from '@/layout'
+
+// Get Menu from server
+export function loadMainMenu() {
+  return getMenu(getToken()).then(menu => {
+    const asyncRouterMap = [
+      {
+        path: '*',
+        redirect: '/404',
+        hidden: true
+      },
+      {
+        path: '/ProcessActivity',
+        component: Layout,
+        meta: { title: 'ProcessActivity', icon: 'tree-table', noCache: true, breadcrumb: false },
+        redirect: '/ProcessActivity/index',
+        children: [
+          {
+            path: 'index',
+            component: () => import('@/views/ADempiere/ProcessActivity'),
+            name: 'ProcessActivity',
+            meta: { title: 'ProcessActivity', icon: 'tree-table', noCache: true, isIndex: true }
+          }
+        ]
+      },
+      {
+        path: '/report-viewer',
+        component: Layout,
+        hidden: true,
+        redirect: 'report-viewer/:processId/:instanceUuid/:fileName',
+        children: [
+          {
+            path: ':processId/:instanceUuid/:fileName',
+            component: () => import('@/views/ADempiere/ReportViewer'),
+            name: 'Report Viewer',
+            meta: {
+              title: 'ReportViewer'
+            }
+          }
+        ]
+      }
+    ]
+    menu.getChildsList().forEach(menu => {
+      const optionMenu = getRouteFromMenuItem(menu)
+      if (menu.getIssummary()) {
+        menu.getChildsList().forEach((menu, index) => {
+          optionMenu.children.push(getChildFromAction(menu, index = 0))
+          optionMenu.children[0].meta.childs.push(getChildFromAction(menu, index = 0))
+          optionMenu.meta.childs.push(getChildFromAction(menu, index = 0))
+        })
+      } else {
+        optionMenu.children.push(getChildFromAction(menu))
+        optionMenu.meta.childs.push(getChildFromAction(menu))
+      }
+      asyncRouterMap.push(optionMenu)
+    })
+    return asyncRouterMap
+  }).catch(error => {
+    console.log('Error with Login: ' + error)
+  })
+}
+
+// Get Only Child
+function getChildFromAction(menu, index) {
+  const action = menu.getAction()
+  var actionAttributes = convertAction(action)
+  var routeIdentifier = actionAttributes.name + '/' + menu.getId()
+  let selectedComponent
+  if (action === 'W') {
+    selectedComponent = () => import('@/views/ADempiere/Window')
+    routeIdentifier = actionAttributes.name + '/' + menu.getId()
+  } else if (action === 'S') {
+    selectedComponent = () => import('@/views/ADempiere/Browser')
+  } else if (action === 'P' || action === 'R') {
+    selectedComponent = () => import('@/views/ADempiere/Process')
+  } else if (action === 'B' || action === 'F' || action === 'T' || action === 'X') {
+    selectedComponent = () => import('@/views/ADempiere/Unsupported')
+  } else {
+    selectedComponent = () => import('@/views/ADempiere/Summary')
+    routeIdentifier = '/' + menu.getId()
+  }
+  var option = {
+    path: routeIdentifier,
+    component: selectedComponent,
+    name: menu.getUuid(),
+    hidden: index > 0,
+    meta: {
+      isIndex: actionAttributes.isIndex,
+      title: menu.getName(),
+      description: menu.getDescription(),
+      uuid: menu.getReferenceuuid(),
+      tabUuid: '',
+      type: actionAttributes.name,
+      parentUuid: menu.getParentuuid(),
+      icon: actionAttributes.icon,
+      alwaysShow: true,
+      noCache: false,
+      childs: []
+    }
+  }
+  if (option.meta.type === 'summary') {
+    option['children'] = []
+    menu.getChildsList().forEach((child, index) => {
+      option.children.push(getChildFromAction(child, index = 1))
+      option.meta.childs.push(getChildFromAction(child, index = 1))
+    })
+  }
+  return option
+}
+
+// Convert menu item from server to Route
+function getRouteFromMenuItem(menu) {
+  const action = menu.getAction()
+  var actionAttributes = convertAction(action)
+  var optionMenu = []
+  optionMenu = {
+    path: '/' + menu.getId(),
+    redirect: '/' + menu.getId() + '/index',
+    component: Layout,
+    name: menu.getUuid(),
+    meta: {
+      title: menu.getName(),
+      description: menu.getDescription(),
+      type: actionAttributes.name,
+      icon: actionAttributes.icon,
+      noCache: true,
+      childs: []
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/ADempiere/Summary'),
+        name: menu.getUuid() + '-index',
+        hidden: true,
+        meta: {
+          isIndex: actionAttributes.isIndex,
+          parentUuid: menu.getUuid(),
+          title: menu.getName(),
+          description: menu.getDescription(),
+          type: actionAttributes.name,
+          icon: actionAttributes.icon,
+          noCache: true,
+          breadcrumb: false,
+          childs: []
+        }
+      }
+    ]
+  }
+  return optionMenu
+}
+
+// Convert action to action name for route
+function convertAction(action) {
+  var actionAttributes = {
+    name: '',
+    icon: '',
+    hidden: false,
+    isIndex: false
+  }
+  switch (action) {
+    case 'B':
+      actionAttributes.name = 'workbech'
+      actionAttributes.icon = 'peoples'
+      break
+    case 'F':
+      actionAttributes.name = 'workflow'
+      actionAttributes.icon = 'example'
+      break
+    case 'P':
+      actionAttributes.name = 'process'
+      actionAttributes.icon = 'component'
+      break
+    case 'R':
+      actionAttributes.name = 'report'
+      actionAttributes.icon = 'skill'
+      break
+    case 'S':
+      actionAttributes.name = 'browser'
+      actionAttributes.icon = 'search'
+      break
+    case 'T':
+      actionAttributes.name = 'task'
+      actionAttributes.icon = 'size'
+      break
+    case 'W':
+      actionAttributes.name = 'window'
+      actionAttributes.icon = 'tab'
+      break
+    case 'X':
+      actionAttributes.name = 'form'
+      actionAttributes.icon = 'form'
+
+      break
+    default:
+      actionAttributes.name = 'summary'
+      actionAttributes.icon = 'nested'
+      // actionAttributes.hidden = true
+      actionAttributes.isIndex = true
+      break
+  }
+  return actionAttributes
+}
diff --git a/src/settings.js b/src/settings.js
index 1ebc7f29..28dc5e39 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Vue Element Admin',
+  title: 'Adempiere Vue',
 
   /**
    * @type {boolean} true | false
@@ -23,7 +23,7 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false,
+  sidebarLogo: true,
 
   /**
    * @type {string | array} 'production' | ['production', 'development']
diff --git a/src/store/getters.js b/src/store/getters.js
index 313210a0..2a0207be 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -2,6 +2,7 @@ const getters = {
   sidebar: state => state.app.sidebar,
   language: state => state.app.language,
   size: state => state.app.size,
+  toggleSideBar: state => state.app.sidebar.opened,
   device: state => state.app.device,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
@@ -9,6 +10,7 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
+  currentRole: state => state.user.currentRole,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs
diff --git a/src/store/index.js b/src/store/index.js
index 70736d3a..fb9790a5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,13 +5,14 @@ import getters from './getters'
 Vue.use(Vuex)
 
 // https://webpack.js.org/guides/dependency-management/#requirecontext
-const modulesFiles = require.context('./modules', false, /\.js$/)
+const modulesFiles = require.context('./modules', true, /\.js$/)
 
 // you do not need `import app from './modules/app'`
 // it will auto require all vuex module from modules file
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   // set './app.js' => 'app'
-  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  var moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  moduleName = moduleName.substring(moduleName.indexOf('/') + 1)
   const value = modulesFiles(modulePath)
   modules[moduleName] = value.default
   return modules
diff --git a/src/store/modules/ADempiere/browser.js b/src/store/modules/ADempiere/browser.js
new file mode 100644
index 00000000..b2766ab1
--- /dev/null
+++ b/src/store/modules/ADempiere/browser.js
@@ -0,0 +1,182 @@
+import { getBrowser as getBrowserMetadata } from '@/api/ADempiere/dictionary'
+import { convertField, isEmptyValue, showMessage } from '@/utils/ADempiere'
+import router from '@/router'
+import language from '@/lang'
+const browser = {
+  state: {
+    browser: []
+  },
+  mutations: {
+    addBrowser(state, payload) {
+      state.browser.push(payload)
+    },
+    dictionaryResetCacheBrowser(state) {
+      state.browser = []
+    },
+    changeShowedCriteriaBrowser(state, payload) {
+      payload.browser.isShowedCriteria = payload.isShowedCriteria
+    }
+  },
+  actions: {
+    getBrowserFromServer: ({ commit, dispatch }, parameters) => {
+      return new Promise((resolve, reject) => {
+        var browserUuid = parameters.containerUuid
+        getBrowserMetadata(browserUuid)
+          .then(response => {
+            const panelType = 'browser'
+            var fieldsList = response.getFieldsList()
+            const query = response.getQuery()
+            const whereClause = response.getWhereclause()
+            const additionalAttributes = {
+              browserUuid: response.getUuid(),
+              browserId: response.getId(),
+              containerUuid: response.getUuid(),
+              panelType: panelType
+            }
+
+            //  Convert from gRPC
+            var fieldsRangeList = []
+            var isMandatoryParams = false
+            fieldsList = fieldsList.map((fieldItem, index) => {
+              const someAttributes = {
+                ...additionalAttributes,
+                fieldListIndex: index
+              }
+              var field = convertField(fieldItem, someAttributes)
+              // Add new field if is range number
+              if (field.isRange && field.componentPath === 'NumberBase') {
+                var fieldRange = convertField(fieldItem, someAttributes, true)
+                if (!isEmptyValue(fieldRange.value)) {
+                  fieldRange.isShowedFromUser = true
+                }
+                fieldsRangeList.push(fieldRange)
+              }
+
+              if ((query.includes(`@${field.columnName}@`) ||
+                query.includes(`@${field.columnName}_To@`) ||
+                whereClause.includes(`@${field.columnName}@`) ||
+                whereClause.includes(`@${field.columnName}_To@`)) &&
+                field.isQueryCriteria) {
+                field.isMandatory = true
+                field.isMandatoryFromLogic = true
+                field.isShowedFromUser = true
+              }
+
+              // Only isQueryCriteria fields, displayed in main panel
+              if (field.isQueryCriteria && !isEmptyValue(field.value) && String(field.value) !== '-1') {
+                field.isShowedFromUser = true
+              }
+
+              // TODO: Evaluate if not change when iterate
+              isMandatoryParams = field.isMandatory
+              return field
+            })
+            fieldsList = fieldsList.concat(fieldsRangeList)
+
+            //  Get dependent fields
+            fieldsList
+              .filter(field => field.parentFieldsList && field.isActive)
+              .forEach((field, index, list) => {
+                field.parentFieldsList.forEach(parentColumnName => {
+                  var parentField = list.find(parentField => {
+                    return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
+                  })
+                  if (parentField) {
+                    parentField.dependentFieldsList.push(field.columnName)
+                  }
+                })
+              })
+
+            //  Panel for save on store
+            const newBrowser = {
+              id: response.getId(),
+              uuid: response.getUuid(),
+              containerUuid: response.getUuid(),
+              value: response.getValue(),
+              name: response.getName(),
+              description: response.getDescription(),
+              help: response.getHelp(),
+              // sql query
+              query: query,
+              whereClause: whereClause,
+              orderByClause: response.getOrderbyclause(),
+              //
+              isUpdateable: response.getIsupdateable(),
+              isDeleteable: response.getIsdeleteable(),
+              isSelectedByDefault: response.getIsselectedbydefault(),
+              isCollapsibleByDefault: response.getIscollapsiblebydefault(),
+              isExecutedQueryByDefault: response.getIsexecutedquerybydefault(),
+              isShowTotal: response.getIsshowtotal(),
+              isActive: response.getIsactive(),
+              viewUuid: response.getViewuuid(),
+              fieldList: fieldsList,
+              panelType: panelType,
+              // app attributes
+              isMandatoryParams: isMandatoryParams,
+              isShowedCriteria: Boolean(fieldsList.length && isMandatoryParams)
+            }
+            //  Convert from gRPC process list
+            const process = response.getProcess()
+            var actions = []
+            if (process) {
+              actions.push({
+                name: process.getName(),
+                type: 'process',
+                uuid: process.getUuid(),
+                description: process.getDescription(),
+                help: process.getHelp(),
+                isReport: process.getIsreport(),
+                accessLevel: process.getAccesslevel(),
+                showHelp: process.getShowhelp(),
+                isDirectPrint: process.getIsdirectprint()
+              })
+
+              // TODO: convert gRPC attributes from response.getProcess() to object
+              // Add process asociate in store
+              // var processStore = rootGetters.getProcess(process.getUuid())
+              // if (processStore === undefined) {
+              //   dispatch('getProcessFromServer', process.getUuid())
+              // }
+            }
+
+            dispatch('addPanel', newBrowser)
+            commit('addBrowser', newBrowser)
+
+            //  Add process menu
+            dispatch('setContextMenu', {
+              containerUuid: response.getUuid(),
+              relations: [],
+              actions: actions,
+              references: []
+            })
+            resolve(newBrowser)
+          })
+          .catch(error => {
+            router.push({ path: '/dashboard' })
+            dispatch('tagsView/delView', parameters.routeToDelete)
+            showMessage({
+              message: language.t('login.unexpectedError'),
+              type: 'error'
+            })
+            console.warn('Dictionary Browser - Error ' + error.code + ': ' + error.message)
+            reject(error)
+          })
+      })
+    },
+    changeShowedCriteriaBrowser: ({ commit, getters }, { containerUuid, isShowedCriteria }) => {
+      commit('changeShowedCriteriaBrowser', {
+        browser: getters.getBrowser(containerUuid),
+        isShowedCriteria: isShowedCriteria
+      })
+    }
+  },
+  getters: {
+    getBrowser: (state) => (browserUuid) => {
+      return state.browser.find(
+        item => item.uuid === browserUuid
+      )
+    }
+  }
+}
+
+export default browser
diff --git a/src/store/modules/ADempiere/browserControl.js b/src/store/modules/ADempiere/browserControl.js
new file mode 100644
index 00000000..d283adc4
--- /dev/null
+++ b/src/store/modules/ADempiere/browserControl.js
@@ -0,0 +1,120 @@
+import { getBrowserSearch } from '@/api/ADempiere/data'
+import { convertValuesMapToObject, isEmptyValue, parseContext, showMessage } from '@/utils/ADempiere'
+import language from '@/lang'
+
+const browserControl = {
+  actions: {
+    /**
+     * Search with query criteria
+     * @param {string}  containerUuid, browser to search record data
+     * @param {boolean} isClearSelection, clear selection after search
+     */
+    getBrowserSearch({ dispatch, rootGetters }, parameters) {
+      const { containerUuid, isClearSelection = false } = parameters
+      showMessage({
+        title: language.t('notifications.loading'),
+        message: language.t('notifications.searching'),
+        type: 'info'
+      })
+      const allData = rootGetters.getDataRecordAndSelection(containerUuid)
+      // deletes the data from the container to replace it and to report the searches in the table
+      dispatch('deleteRecordContainer', {
+        viewUuid: containerUuid
+      })
+
+      const browser = rootGetters.getBrowser(containerUuid)
+      // parameters isQueryCriteria
+      const finalParameters = rootGetters.getParametersToServer({
+        containerUuid: containerUuid,
+        fieldList: browser.fieldList
+      })
+
+      var parsedQuery = browser.query
+      if (!isEmptyValue(parsedQuery) && parsedQuery.includes('@')) {
+        parsedQuery = parseContext({
+          containerUuid: containerUuid,
+          value: parsedQuery
+        }, true)
+      }
+
+      var parsedWhereClause = browser.whereClause
+      if (!isEmptyValue(parsedWhereClause) && parsedWhereClause.includes('@')) {
+        parsedWhereClause = parseContext({
+          containerUuid: containerUuid,
+          value: parsedWhereClause
+        }, true)
+      }
+
+      var nextPageToken
+      if (!isEmptyValue(allData.nextPageToken)) {
+        nextPageToken = allData.nextPageToken + '-' + allData.pageNumber
+      }
+
+      // Add validation compare browserSearchQueryParameters
+      return getBrowserSearch({
+        uuid: containerUuid,
+        query: parsedQuery,
+        whereClause: parsedWhereClause,
+        orderByClause: browser.orderByClause,
+        parameters: finalParameters,
+        nextPageToken: nextPageToken
+      })
+        .then(response => {
+          const recordList = response.getRecordsList()
+          const record = recordList.map(itemRecord => {
+            var values = convertValuesMapToObject(itemRecord.getValuesMap())
+
+            // datatables attribute
+            values.isNew = false
+            values.isEdit = false
+            values.isSelected = false
+            values.isReadOnlyFromRow = false
+            return values
+          })
+
+          var selection = allData.selection
+          if (isClearSelection) {
+            selection = []
+          }
+
+          var token = response.getNextPageToken()
+          if (token !== undefined) {
+            token = token.slice(0, -2)
+          }
+
+          dispatch('setRecordSelection', {
+            containerUuid: containerUuid,
+            record: record,
+            pageNumber: rootGetters.getPageNumber(containerUuid),
+            selection: selection,
+            recordCount: response.getRecordcount(),
+            nextPageToken: token
+          })
+          showMessage({
+            title: language.t('notifications.succesful'),
+            message: language.t('notifications.succcessSearch'),
+            type: 'success'
+          })
+          return record
+        })
+        .catch(error => {
+          // Set default registry values so that the table does not say loading,
+          // there was already a response from the server
+          dispatch('setRecordSelection', {
+            containerUuid: containerUuid,
+            panelType: 'browser'
+          })
+
+          showMessage({
+            title: language.t('notifications.error'),
+            message: language.t('notifications.errorSearch'),
+            summary: error.message,
+            type: 'error'
+          })
+          console.warn('Error getting browser search: ' + error.message + '. Code: ' + error.code)
+        })
+    }
+  }
+}
+
+export default browserControl
diff --git a/src/store/modules/ADempiere/calloutControl.js b/src/store/modules/ADempiere/calloutControl.js
new file mode 100644
index 00000000..0d8559c3
--- /dev/null
+++ b/src/store/modules/ADempiere/calloutControl.js
@@ -0,0 +1,65 @@
+import { runCallOutRequest } from '@/api/ADempiere/data'
+import { convertValuesMapToObject, showMessage } from '@/utils/ADempiere'
+
+const callOutControl = {
+  actions: {
+    getCallout({ rootGetters, dispatch }, parameters) {
+      const window = rootGetters.getWindow(parameters.parentUuid)
+      var finalParameters = []
+      if (parameters.inTable) {
+        finalParameters = rootGetters.getParametersToServer({
+          containerUuid: parameters.containerUuid,
+          row: parameters.row
+        })
+      } else {
+        finalParameters = rootGetters.getParametersToServer({
+          containerUuid: parameters.containerUuid
+        })
+      }
+
+      return runCallOutRequest({
+        windowUuid: parameters.parentUuid,
+        tabUuid: parameters.containerUuid,
+        tableName: parameters.tableName,
+        columnName: parameters.columnName,
+        value: parameters.value,
+        oldValue: parameters.oldValue,
+        callout: parameters.callout,
+        attributesList: finalParameters,
+        windowNo: window.windowIndex
+      })
+        .then(response => {
+          const values = convertValuesMapToObject(
+            response.getValuesMap()
+          )
+          if (parameters.inTable) {
+            dispatch('notifyRowTableChange', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid,
+              row: values,
+              isEdit: true
+            })
+          } else {
+            dispatch('notifyPanelChange', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid,
+              panelType: 'window',
+              newValues: values,
+              isSendToServer: false,
+              withOutColumnNames: parameters.withOutColumnNames,
+              isSendCallout: false
+            })
+          }
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+          console.warn(`Field ${parameters.name} error callout`, error.message)
+        })
+    }
+  }
+}
+
+export default callOutControl
diff --git a/src/store/modules/ADempiere/context.js b/src/store/modules/ADempiere/context.js
new file mode 100644
index 00000000..7c4296b8
--- /dev/null
+++ b/src/store/modules/ADempiere/context.js
@@ -0,0 +1,97 @@
+import Vue from 'vue'
+// Delete when get global context and account context
+import { isEmptyValue } from '@/utils/ADempiere/valueUtil.js'
+
+const context = {
+  state: {
+    context: {}
+  },
+  mutations: {
+    setContext(state, payload) {
+      var key = ''
+      if (payload.parentUuid && !isEmptyValue(payload.value)) {
+        key += payload.parentUuid + '|'
+
+        // set context for window
+        const keyParent = key + payload.columnName
+        Vue.set(state.context, keyParent, payload.value)
+      }
+      if (payload.containerUuid) {
+        key += payload.containerUuid + '|'
+      }
+      key += payload.columnName
+      // set property to object
+      Vue.set(state.context, key, payload.value)
+    },
+    setInitialContext(state, objectContext) {
+      Object.keys(objectContext).forEach(key => {
+        Vue.set(state.context, key, objectContext[key])
+      })
+    },
+    dictionaryResetCacheContext(state) {
+      state.context = {}
+    }
+  },
+  actions: {
+    setContext: ({ commit }, objectValue) => {
+      commit('setContext', objectValue)
+    },
+    setMultipleContext: ({ commit }, valuesToSetter) => {
+      valuesToSetter.forEach(itemToSetter => {
+        commit('setContext', itemToSetter)
+      })
+    },
+    setInitialContext: ({ commit }, otherContext = {}) => {
+      commit('setInitialContext', otherContext)
+    }
+  },
+  getters: {
+    /**
+     * @param  {object} findedContext
+     *  - parentUuid
+     *  - containerUuid
+     *  - columnName
+     */
+    getContext: (state) => ({ parentUuid, containerUuid, columnName }) => {
+      var key = ''
+
+      if (parentUuid) {
+        key += parentUuid + '|'
+
+        // context for window
+        const keyParent = key + columnName
+        const valueParent = state.context[keyParent]
+        if (!isEmptyValue(valueParent)) {
+          return valueParent
+        }
+      }
+      if (containerUuid) {
+        key += containerUuid + '|'
+      }
+      key += columnName
+
+      return state.context[key]
+    },
+    getContextAll: (state) => {
+      state.context
+    },
+    getContextClientId: (state) => {
+      return state.context['#AD_Client_ID']
+    },
+    getContextOrgId: (state) => {
+      return state.context['#AD_Org_ID']
+    },
+    // Using to read only in data tables
+    getContextIsActive: (state) => (parentUuid) => {
+      return state.context[`${parentUuid}|IsActive`]
+    },
+    getContextProcessing: (state) => (parentUuid) => {
+      return state.context[`${parentUuid}|Processing`]
+    },
+    getContextProcessed: (state) => (parentUuid) => {
+      return state.context[`${parentUuid}|Processed`]
+    }
+  }
+}
+
+export default context
diff --git a/src/store/modules/ADempiere/contextMenu.js b/src/store/modules/ADempiere/contextMenu.js
new file mode 100644
index 00000000..5dc2da40
--- /dev/null
+++ b/src/store/modules/ADempiere/contextMenu.js
@@ -0,0 +1,62 @@
+// Store used for set all related to context menu
+// for Window, Process, Smart Browser andother customized component
+// See structure:
+// menu: [
+//   {
+//     containerUuid: '',
+//     relations: [],
+//     actions: [],
+//     references: []
+//     defaultAction: {},
+//     lastAction: {}
+//   }
+// ]
+const contextMenu = {
+  state: {
+    contextMenu: []
+  },
+  mutations: {
+    setContextMenu(state, payload) {
+      state.contextMenu.push(payload)
+    },
+    dictionaryResetCacheContextMenu(state) {
+      state.contextMenu = []
+    }
+  },
+  actions: {
+    setContextMenu({ commit }, payload) {
+      commit('setContextMenu', payload)
+    }
+  },
+  getters: {
+    getContextMenu: (state) => (containerUuid) => {
+      return state.contextMenu.find(item => item.containerUuid === containerUuid)
+    },
+    getRelations: (state, getters, rootState) => (containerUuid) => {
+      var menuRelations
+      rootState.permission.addRoutes.forEach(route => {
+        if (route.name === containerUuid) {
+          menuRelations = route.children
+        } else if (route.name !== containerUuid && route.children) {
+          route.children.forEach(child => {
+            if (child.name === containerUuid) {
+              menuRelations = route.children
+            }
+          })
+        }
+      })
+      return menuRelations
+    },
+    getActions: (state) => (containerUuid) => {
+      var menu = state.contextMenu.find(
+        item => item.containerUuid === containerUuid
+      )
+      if (menu === undefined) {
+        return menu
+      }
+      return menu.actions
+    }
+  }
+}
+
+export default contextMenu
diff --git a/src/store/modules/ADempiere/data.js b/src/store/modules/ADempiere/data.js
new file mode 100644
index 00000000..8485c965
--- /dev/null
+++ b/src/store/modules/ADempiere/data.js
@@ -0,0 +1,894 @@
+import Vue from 'vue'
+import {
+  getObject,
+  getObjectListFromCriteria,
+  getRecentItems,
+  getDefaultValueFromServer,
+  convertValueFromGRPC,
+  getContextInfoValueFromServer
+} from '@/api/ADempiere'
+import { convertValuesMapToObject, isEmptyValue, showMessage, convertAction } from '@/utils/ADempiere'
+import language from '@/lang'
+
+const data = {
+  state: {
+    recordSelection: [], // record data and selection
+    recordDetail: [],
+    recentItems: [],
+    inGetting: [],
+    contextInfoField: []
+  },
+  mutations: {
+    addInGetting(state, payload) {
+      state.inGetting.push(payload)
+    },
+    deleteInGetting(state, payload) {
+      state.inGetting = state.inGetting.filter(item => item.containerUuid !== payload.containerUuid)
+    },
+    setRecordSelection(state, payload) {
+      if (payload.index > -1 && payload.index !== undefined) {
+        state.recordSelection.splice(payload.index, 1, payload)
+      } else {
+        state.recordSelection.push(payload)
+      }
+    },
+    setSelection(state, payload) {
+      payload.data.selection = payload.newSelection
+    },
+    deleteRecordContainer(state, payload) {
+      state.recordSelection = payload
+    },
+    notifyCellTableChange: (state, payload) => {
+      payload.row[payload.columnName] = payload.value
+      if (payload.displayColumn !== undefined) {
+        const key = 'DisplayColumn_' + payload.columnName
+        payload.row[key] = payload.displayColumn
+      }
+    },
+    notifyCellSelectionChange: (state, payload) => {
+      if (payload.row !== undefined) {
+        payload.row[payload.columnName] = payload.value
+        if (payload.displayColumn !== undefined) {
+          const key = 'DisplayColumn_' + payload.columnName
+          payload.row[key] = payload.displayColumn
+        }
+      }
+    },
+    notifyRowTableChange: (state, payload) => {
+      Object.assign(payload.row, payload.newRow)
+    },
+    setRecentItems(state, payload) {
+      state.recentItems = payload
+    },
+    setPageNumber(state, payload) {
+      payload.data.pageNumber = payload.pageNumber
+    },
+    setIsloadContext(state, payload) {
+      payload.data.isLoadedContext = payload.isLoadedContext
+    },
+    setRecordDetail(state, payload) {
+      var isFinded = false
+      state.recordDetail = state.recordDetail.map(itemData => {
+        if (itemData.uuid === payload.uuid) {
+          isFinded = true
+          var newValues = Object.assign(itemData.data, payload.data)
+          payload.data = newValues
+          return payload
+        }
+        return itemData
+      })
+      if (!isFinded) {
+        state.recordDetail.push(payload)
+      }
+    },
+    addNewRow(state, payload) {
+      payload.data = payload.data.unshift(payload.values)
+    },
+    addDisplayColumn(state, payload) {
+      Vue.set(payload.row, payload.columnName, payload.displayColumn)
+    },
+    setContextInfoField(state, payload) {
+      state.contextInfoField.push(payload)
+    }
+  },
+  actions: {
+    /**
+     * Set page number of pagination list
+     * @param {string}  parameters.parentUuid
+     * @param {string}  parameters.containerUuid
+     * @param {integer} parameters.panelType
+     * @param {string}  parameters.pageNumber
+     */
+    setPageNumber({ commit, state, dispatch, rootGetters }, parameters) {
+      const data = state.recordSelection.find(recordItem => {
+        return recordItem.containerUuid === parameters.containerUuid
+      })
+      commit('setPageNumber', {
+        data: data,
+        pageNumber: parameters.pageNumber
+      })
+
+      // refresh list table with data from server
+      if (parameters.panelType === 'window') {
+        dispatch('getDataListTab', {
+          parentUuid: parameters.parentUuid,
+          containerUuid: parameters.containerUuid
+        })
+      } else if (parameters.panelType === 'browser') {
+        if (!rootGetters.isNotReadyForSubmit(parameters.containerUuid)) {
+          dispatch('getBrowserSearch', {
+            containerUuid: parameters.containerUuid,
+            isClearSelection: true
+          })
+        }
+      }
+    },
+    /**
+     * Insert new row bottom list table, used only from window
+     * @param {string}  parentUuid
+     * @param {string}  containerUuid
+     * @param {boolean} isPanelValues, define if used values form panel
+     * @param {boolean} isEdit, define if used values form panel
+     */
+    addNewRow({ commit, getters, rootGetters, dispatch }, parameters) {
+      const { parentUuid, containerUuid, isPanelValues = false, isEdit = true, isNew = true } = parameters
+      var { fieldList = [] } = parameters
+
+      const tabPanel = rootGetters.getPanel(containerUuid)
+
+      if (!fieldList.length) {
+        fieldList = tabPanel.fieldList
+      }
+
+      var values = {}
+      // add row with default values to create new record
+      if (isPanelValues) {
+        // add row with values used from record in panel
+        values = rootGetters.getColumnNamesAndValues({
+          containerUuid: containerUuid,
+          propertyName: 'value',
+          isObjectReturn: true,
+          isAddDisplayColumn: true,
+          fieldList: fieldList
+        })
+      } else {
+        values = rootGetters.getParsedDefaultValues({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          fieldList: fieldList
+        })
+      }
+      values.isNew = isNew
+      values.isEdit = isEdit
+      values.isSendServer = false
+
+      // get the link column name from the tab
+      var linkColumnName = tabPanel.linkColumnName
+      if (isEmptyValue(linkColumnName)) {
+        // get the link column name from field list
+        linkColumnName = tabPanel.fieldLinkColumnName
+      }
+
+      var valueLink
+      // get context value if link column exists and does not exist in row
+      if (!isEmptyValue(linkColumnName)) {
+        valueLink = rootGetters.getContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          columnName: linkColumnName
+        })
+      }
+      if (!isEmptyValue(valueLink)) {
+        valueLink = parseInt(valueLink, 10)
+      }
+
+      // get display column
+      if (fieldList.length) {
+        fieldList
+          // TODO: Evaluate if is field is read only and FieldSelect
+          .filter(itemField => itemField.componentPath === 'FieldSelect' || String(values[itemField.columnName]) === '[object Object]')
+          .forEach(itemField => {
+            var valueGetDisplayColumn = values[itemField.columnName]
+            if (String(values[itemField.columnName]) === '[object Object]' && itemField.componentPath === 'FieldSelect') {
+              values[itemField.columnName] = ' '
+              values['DisplayColumn_' + itemField.columnName] = ' '
+            } else if (String(values[itemField.columnName]) === '[object Object]' && itemField.componentPath === 'FieldNumber') {
+              values[itemField.columnName] = 0
+            }
+            // overwrite value with column link
+            if (!isEmptyValue(linkColumnName) && linkColumnName === itemField.columnName) {
+              valueGetDisplayColumn = valueLink
+            }
+
+            // break this itineration if is empty
+            if (isEmptyValue(valueGetDisplayColumn)) {
+              return
+            }
+            // always the values for these types of fields are integers
+            if (['TableDirect'].includes(itemField.referenceType)) {
+              valueGetDisplayColumn = parseInt(valueGetDisplayColumn, 10)
+            } else {
+              if (!isNaN(valueGetDisplayColumn)) {
+                valueGetDisplayColumn = parseInt(valueGetDisplayColumn, 10)
+              }
+            }
+            if (!isEmptyValue(valueGetDisplayColumn) && String(valueGetDisplayColumn) === '[object Object]') {
+              // get value from direct Query
+              dispatch('getRecordBySQL', { query: valueGetDisplayColumn.query, field: itemField })
+                .then(defaultValue => {
+                  if (itemField.componentPath === 'FieldSelect') {
+                    values[itemField.columnName] = defaultValue.key
+                    values['DisplayColumn_' + itemField.columnName] = defaultValue.label
+                  } else {
+                    values[itemField.columnName] = defaultValue.key
+                    dispatch('notifyRowTableChange', {
+                      parentUuid: parentUuid,
+                      containerUuid: containerUuid,
+                      isNew: isNew,
+                      isEdit: isEdit,
+                      values: values
+                    })
+                  }
+                })
+              return
+            }
+            // get label (DisplayColumn) from vuex store
+            const options = rootGetters.getLookupAll({
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              tableName: itemField.reference.tableName,
+              query: itemField.reference.query,
+              directQuery: itemField.reference.directQuery,
+              value: valueGetDisplayColumn
+            })
+
+            const option = options.find(itemOption => itemOption.key === valueGetDisplayColumn)
+            // if there is a lookup option, assign the display column with the label
+            if (option) {
+              values['DisplayColumn_' + itemField.columnName] = option.label
+              return
+            }
+            if (linkColumnName === itemField.columnName) {
+              // get context value if link column exists and does not exist in row
+              const nameParent = rootGetters.getContext({
+                parentUuid: parentUuid,
+                containerUuid: containerUuid,
+                columnName: 'Name'
+              })
+              if (nameParent) {
+                values['DisplayColumn_' + itemField.columnName] = nameParent
+                return
+              }
+            }
+            // get from server
+            dispatch('getLookupItemFromServer', {
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              tableName: itemField.reference.tableName,
+              directQuery: itemField.reference.directQuery,
+              value: valueGetDisplayColumn
+            })
+              .then(responseLookup => {
+                dispatch('addDisplayColumn', {
+                  containerUuid: containerUuid,
+                  columnName: itemField.columnName,
+                  displayColumn: responseLookup.label
+                })
+              })
+          })
+      }
+
+      // overwrite value with column link
+      if (isEmptyValue(values[linkColumnName])) {
+        values[linkColumnName] = valueLink
+      }
+
+      const dataStore = getters.getDataRecordsList(containerUuid)
+      commit('addNewRow', {
+        values: values,
+        data: dataStore
+      })
+    },
+    addDisplayColumn({ commit, getters }, parameters) {
+      const { containerUuid, columnName, displayColumn } = parameters
+      const dataStore = getters.getDataRecordsList(containerUuid)
+      const rowRecord = dataStore.find(itemData => itemData.isNew)
+
+      commit('addDisplayColumn', {
+        row: rowRecord,
+        displayColumn: displayColumn,
+        columnName: 'DisplayColumn_' + columnName
+      })
+    },
+    /**
+     * Is load context in true when panel is set context
+     * @param {string}  parameters.containerUuid
+     */
+    setIsloadContext({ commit, state }, parameters) {
+      const { containerUuid } = parameters
+      const data = state.recordSelection.find(recordItem => {
+        return recordItem.containerUuid === containerUuid
+      })
+      if (data) {
+        commit('setIsloadContext', {
+          data: data,
+          isLoadedContext: true
+        })
+      }
+    },
+    /**
+     * Set record, selection, page number, token, and record count, with container uuid
+     * TODO: Refactor and optimize the mutation of state
+     * @param {string}  parameters.containerUuid
+     * @param {array}   parameters.record
+     * @param {array}   parameters.selection
+     * @param {integer} parameters.pageNumber
+     * @param {integer} parameters.recordCount
+     * @param {string}  parameters.nextPageToken
+     * @param {string}  parameters.panelType
+     */
+    setRecordSelection({ commit, state }, parameters) {
+      const { parentUuid, containerUuid, record = [], selection = [], pageNumber = 1, recordCount = 0, nextPageToken, panelType = 'window' } = parameters
+      var index = state.recordSelection.findIndex(recordItem => {
+        return recordItem.containerUuid === containerUuid
+      })
+      commit('setRecordSelection', {
+        parentUuid: parentUuid,
+        containerUuid: containerUuid,
+        record: record,
+        selection: selection,
+        pageNumber: pageNumber,
+        recordCount: recordCount,
+        nextPageToken: nextPageToken,
+        panelType: panelType,
+        isLoaded: true,
+        isLoadedContext: false,
+        index: index
+      })
+    },
+    /**
+     * Set selection in data list associated in container
+     * @param {string} parameters.containerUuid
+     * @param {string} parameters.selection
+     */
+    setSelection({ commit, getters }, parameters) {
+      const recordSelection = getters.getDataRecordAndSelection(parameters.containerUuid)
+      commit('setSelection', {
+        newSelection: parameters.selection,
+        data: recordSelection
+      })
+    },
+    /**
+     * Delete record result in container
+     * @param {string} viewUuid // As parentUuid in window
+     * @param {array} withOut
+     */
+    deleteRecordContainer({ commit, state, dispatch }, parameters) {
+      const { viewUuid, withOut = [], isNew = false } = parameters
+      var setNews = []
+      const record = state.recordSelection.filter(itemRecord => {
+        // ignore this uuid
+        if (withOut.includes(itemRecord.containerUuid)) {
+          return true
+        }
+        // remove window and tabs data
+        if (itemRecord.parentUuid) {
+          if (isNew) {
+            setNews.push(itemRecord.containerUuid)
+          }
+          return itemRecord.parentUuid !== viewUuid
+        }
+        // remove browser data
+        return itemRecord.containerUuid !== viewUuid
+      })
+      commit('deleteRecordContainer', record)
+
+      if (setNews.length) {
+        setNews.forEach(uuid => {
+          dispatch('setRecordSelection', {
+            parentUuid: viewUuid,
+            containerUuid: uuid
+          })
+        })
+      }
+    },
+    /**
+     * @param {string} tableName
+     * @param {string} recordUuid
+     */
+    getEntity({ commit }, parameters) {
+      return new Promise((resolve, reject) => {
+        getObject(parameters.tableName, parameters.recordUuid)
+          .then(response => {
+            var map = response.getValuesMap()
+            var newValues = convertValuesMapToObject(map)
+            const responseConvert = {
+              data: newValues,
+              id: response.getId(),
+              uuid: response.getUuid(),
+              tableName: parameters.tableName
+            }
+
+            commit('setRecordDetail', responseConvert)
+            resolve(newValues)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    /**
+     * Request list to view in table
+     * TODO: Join with getDataListTab action
+     * @param {string} parentUuid, uuid from window
+     * @param {string} containerUuid, uuid from tab
+     * @param {string} tableName, table name to search record data
+     * @param {string} query, criteria to search record data
+     * @param {string} whereClause, criteria to search record data
+     * @param {string} orderByClause, criteria to search record data
+     * @param {array}  conditions, conditions to criteria
+     */
+    getObjectListFromCriteria({ commit, dispatch, getters, rootGetters }, parameters) {
+      const { parentUuid, containerUuid, tableName, query, whereClause, orderByClause, conditions = [], isShowNotification = true, isParentTab = true } = parameters
+      if (isShowNotification) {
+        showMessage({
+          title: language.t('notifications.loading'),
+          message: language.t('notifications.searching'),
+          type: 'info'
+        })
+      }
+      const dataStore = getters.getDataRecordAndSelection(containerUuid)
+
+      var nextPageToken
+      if (!isEmptyValue(dataStore.nextPageToken)) {
+        nextPageToken = dataStore.nextPageToken + '-' + dataStore.pageNumber
+      }
+
+      var inEdited = []
+      if (!isParentTab) {
+        // TODO: Evaluate peformance to evaluate records to edit
+        inEdited = dataStore.record.filter(itemRecord => {
+          return itemRecord.isEdit && !itemRecord.isNew
+        })
+      }
+
+      commit('addInGetting', {
+        containerUuid: containerUuid,
+        tableName: tableName,
+        conditions: conditions
+      })
+
+      // gets the default value of the fields (including whether it is empty or undefined)
+      const defaultValues = rootGetters.getParsedDefaultValues({
+        parentUuid: parentUuid,
+        containerUuid: containerUuid,
+        isGetServer: false
+      })
+      return getObjectListFromCriteria({
+        tableName: tableName,
+        query: query,
+        whereClause: whereClause,
+        conditions: conditions,
+        orderByClause: orderByClause,
+        nextPageToken: nextPageToken
+      })
+        .then(response => {
+          const recordList = response.getRecordsList()
+          const record = recordList.map(itemRecord => {
+            var values = convertValuesMapToObject(
+              itemRecord.getValuesMap()
+            )
+
+            // datatables attribute
+            values.isNew = false
+            values.isEdit = false
+            values.isSelected = false
+            values.isReadOnlyFromRow = false
+
+            if (inEdited.find(itemEdit => itemEdit.UUID === values.UUID)) {
+              values.isEdit = true
+            }
+
+            // overwrite default values and sets the values obtained from the
+            // server (empty fields are not brought from the server)
+            return {
+              ...defaultValues,
+              ...values
+            }
+          })
+
+          var token = response.getNextPageToken()
+          if (!isEmptyValue(token)) {
+            token = token.slice(0, -2)
+            if (token.substr(-1, 1) === '-') {
+              token = token.slice(0, -1)
+            }
+          } else {
+            token = dataStore.nextPageToken
+          }
+          if (isShowNotification) {
+            let searchMessage = 'searchWithOutRecords'
+            if (record.length) {
+              searchMessage = 'succcessSearch'
+            }
+            showMessage({
+              title: language.t('notifications.succesful'),
+              message: language.t(`notifications.${searchMessage}`),
+              type: 'success'
+            })
+          }
+          dispatch('setRecordSelection', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid,
+            record: record,
+            selection: dataStore.selection,
+            recordCount: response.getRecordcount(),
+            nextPageToken: token,
+            pageNumber: dataStore.pageNumber
+          })
+          return record
+        })
+        .catch(error => {
+          // Set default registry values so that the table does not say loading,
+          // there was already a response from the server
+          dispatch('setRecordSelection', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid
+          })
+
+          if (isShowNotification) {
+            showMessage({
+              title: language.t('notifications.error'),
+              message: error.message,
+              type: 'error'
+            })
+          }
+          console.warn('Error Get Object List ' + error.message + '. Code: ' + error.code)
+        })
+        .finally(() => {
+          commit('deleteInGetting', {
+            containerUuid: containerUuid,
+            tableName: tableName
+          })
+        })
+    },
+    getRecordBySQL({ dispatch }, parameters) {
+      const { query, field } = parameters
+      return new Promise((resolve, reject) => {
+        getDefaultValueFromServer(query)
+          .then(response => {
+            var valueToReturn = {}
+            valueToReturn['key'] = convertValueFromGRPC(response)
+            // add display Column for table
+            if (field.componentPath === 'FieldSelect') {
+              dispatch('getLookupItemFromServer', {
+                parentUuid: field.parentUuid,
+                containerUuid: field.containerUuid,
+                tableName: field.reference.tableName,
+                directQuery: field.reference.directQuery,
+                value: valueToReturn.key
+              })
+                .then(responseLookup => {
+                  valueToReturn['label'] = responseLookup.label
+                  dispatch('addDisplayColumn', {
+                    containerUuid: field.containerUuid,
+                    columnName: field.columnName,
+                    displayColumn: responseLookup.label
+                  })
+                })
+            }
+            resolve(valueToReturn)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    getRecentItemsFromServer({ commit }) {
+      return new Promise((resolve, reject) => {
+        getRecentItems()
+          .then(response => {
+            const recentItems = response.getRecentitemsList().map(item => {
+              return {
+                action: convertAction(item.getAction()).name,
+                icon: convertAction(item.getAction()).icon,
+                displayName: item.getDisplayname(),
+                menuUuid: item.getMenuuuid(),
+                menuName: item.getMenuname(),
+                windowUuid: item.getWindowuuid(),
+                tableId: item.getTableid(),
+                recordId: item.getRecordid(),
+                uuidRecord: item.getRecorduuid(),
+                tabUuid: item.getTabuuid(),
+                updated: new Date(item.getUpdated()),
+                description: item.getMenudescription()
+              }
+            })
+            commit('setRecentItems', recentItems)
+            resolve(recentItems)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    /**
+     * TODO: Add support to tab children
+     * @param {object} objectParams
+     * @param {string} objectParams.containerUuid
+     * @param {objec}  objectParams.row, new data to change
+     * @param {objec}  objectParams.isEdit, if the row displayed to edit mode
+     * @param {objec}  objectParams.isNew, if insert data to new row
+     */
+    notifyRowTableChange({ commit, state, getters, rootGetters }, objectParams) {
+      const { parentUuid, containerUuid, isEdit = true } = objectParams
+      var currentValues = {}
+      if (objectParams.hasOwnProperty('values')) {
+        currentValues = objectParams.values
+      } else {
+        currentValues = rootGetters.getColumnNamesAndValues({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          propertyName: 'value',
+          isObjectReturn: true,
+          isAddDisplayColumn: true
+        })
+      }
+
+      var row = getters.getRowData(objectParams.containerUuid, currentValues.UUID)
+
+      var newRow = {
+        ...currentValues,
+        // ...objectParams.row,
+        isEdit: isEdit
+      }
+
+      commit('notifyRowTableChange', {
+        isNew: objectParams.isNew,
+        newRow: newRow,
+        row: row
+      })
+    },
+    notifyCellTableChange({ commit, state, dispatch, rootGetters }, parameters) {
+      const {
+        parentUuid, containerUuid, field, panelType = 'window',
+        isSendToServer = true, columnName, rowKey, keyColumn, newValue,
+        displayColumn, withOutColumnNames = [], isSendCallout = true
+      } = parameters
+
+      const recordSelection = state.recordSelection.find(recordItem => {
+        return recordItem.containerUuid === containerUuid
+      })
+      const row = recordSelection.record.find(itemRecord => {
+        return itemRecord[keyColumn] === rowKey
+      })
+
+      // the field has not changed, then the action is broken
+      if (row[columnName] === newValue) {
+        return
+      }
+
+      const rowSelection = recordSelection.selection.find(itemRecord => {
+        return itemRecord[keyColumn] === rowKey
+      })
+      commit('notifyCellTableChange', {
+        row: row,
+        value: newValue,
+        columnName: columnName,
+        displayColumn: displayColumn
+      })
+
+      if (panelType === 'browser') {
+        commit('notifyCellSelectionChange', {
+          row: rowSelection,
+          value: newValue,
+          columnName: columnName,
+          displayColumn: displayColumn
+        })
+      } else if (panelType === 'window') {
+        // request callouts
+        if (isSendCallout && !withOutColumnNames.includes(field.columnName) &&
+          !isEmptyValue(newValue) && !isEmptyValue(field.callout)) {
+          withOutColumnNames.push(field.columnName)
+          dispatch('getCallout', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid,
+            tableName: field.tableName,
+            columnName: field.columnName,
+            callout: field.callout,
+            value: newValue,
+            withOutColumnNames: withOutColumnNames,
+            row: row,
+            inTable: true
+          })
+        }
+
+        if (isSendToServer) {
+          const fieldNotReady = rootGetters.isNotReadyForSubmit(containerUuid, row)
+          if (!fieldNotReady) {
+            if (!isEmptyValue(row.UUID)) {
+              dispatch('updateCurrentEntityFromTable', {
+                parentUuid: parentUuid,
+                containerUuid: containerUuid,
+                row: row
+              })
+            } else {
+              dispatch('createEntityFromTable', {
+                parentUuid: parentUuid,
+                containerUuid: containerUuid,
+                row: row
+              })
+                .then(() => {
+                  // refresh record list
+                  dispatch('getDataListTab', {
+                    parentUuid: parentUuid,
+                    containerUuid: containerUuid
+                  })
+                })
+            }
+          } else {
+            const fieldsEmpty = rootGetters.getFieldListEmptyMandatory({
+              containerUuid: containerUuid,
+              row: row
+            })
+            showMessage({
+              message: language.t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+              type: 'info'
+            })
+          }
+        }
+      }
+    },
+    getContextInfoValueFromServer({ commit, getters }, parameters) {
+      var { sqlStatement, contextInfoUuid } = parameters
+      var contextInforField = getters.getContextInfoField(contextInfoUuid, sqlStatement)
+      if (contextInforField) {
+        return contextInforField
+      }
+      return getContextInfoValueFromServer({ uuid: contextInfoUuid, query: sqlStatement })
+        .then(response => {
+          const contextInfo = {
+            messageText: response.getMessagetext(),
+            messageTip: response.getMessagetip()
+          }
+          commit('setContextInfoField', {
+            contextInfoUuid: contextInfoUuid,
+            sqlStatement: sqlStatement,
+            messageText: contextInfo.messageText,
+            messageTip: contextInfo.messageTip
+          })
+          return contextInfo
+        })
+        .catch(error => {
+          console.warn(`Error ${error.code} getting context info value for field ${error.message}`)
+        })
+    }
+  },
+  getters: {
+    getInGetting: (state) => (containerUuid) => {
+      return state.inGetting.find(item => item.containerUuid === containerUuid)
+    },
+    /**
+     * Used by datatables in tab children, record navigation in window, result in browser
+     * @param {string} containerUuid
+     */
+    getDataRecordAndSelection: (state, getters) => (containerUuid) => {
+      return state.recordSelection.find(itemRecord => {
+        return itemRecord.containerUuid === containerUuid
+      }) || {
+        containerUuid: containerUuid,
+        record: [],
+        recordCount: 0,
+        selection: [],
+        pageNumber: 1,
+        nextPageToken: undefined,
+        isLoadedContext: false,
+        isLoaded: false // Boolean(false || getters.getInGetting(containerUuid))
+      }
+    },
+    getDataRecordsList: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).record
+    },
+    getDataRecordCount: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).recordCount
+    },
+    getPageNextToken: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).nextPageToken
+    },
+    getDataRecordSelection: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).selection
+    },
+    getPageNumber: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).pageNumber
+    },
+    getRowData: (state, getters) => (containerUuid, recordUuid) => {
+      return getters.getDataRecordsList(containerUuid).find(itemData => {
+        if (itemData.UUID === recordUuid) {
+          return true
+        }
+      })
+    },
+    /**
+     * @returns {object}
+     */
+    getRecordDetail: (state) => (parameters) => {
+      return state.recordDetail.find(itemData => {
+        if (itemData.uuid === parameters.recordUuid) {
+          return true
+        }
+      }) || {}
+    },
+    /**
+     * Getter converter selection data record in format
+     * @param {string} containerUuid
+     * [
+     *  {
+     *    selectionId: keyColumn Value,
+     *    selectionValues: [
+     *      { columname, value },
+     *      { columname, value },
+     *      { columname, value }
+     *    ]
+     *  },
+     *  {
+     *    selectionId: keyColumn Value,
+     *    selectionValues: [
+     *      { columname, value },
+     *      { columname, value }
+     *    ]
+     *  }
+     * ]
+     */
+    getSelectionToServer: (state, getters, rootState, rootGetters) => (parameters) => {
+      var { containerUuid, selection = [] } = parameters
+      var selectionToServer = []
+      const withOut = ['isEdit', 'isSelected', 'isSendToServer']
+
+      if (selection.length <= 0) {
+        selection = getters.getDataRecordSelection(containerUuid)
+      }
+      if (selection.length) {
+        const panel = rootGetters.getPanel(containerUuid)
+
+        selection.forEach(itemRow => {
+          var records = []
+
+          Object.keys(itemRow).forEach(key => {
+            if (!key.includes('DisplayColumn') && !withOut.includes(key)) {
+              // evaluate metadata attributes before to convert
+              const field = panel.fieldList.find(itemField => itemField.columnName === key)
+              if (field && (field.isIdentifier || field.isUpdateable)) {
+                records.push({
+                  columnName: key,
+                  value: itemRow[key]
+                })
+              }
+            }
+          })
+
+          selectionToServer.push({
+            selectionId: itemRow[panel.keyColumn],
+            selectionValues: records
+          })
+        })
+      }
+      return selectionToServer
+    },
+    getRecentItems: (state) => {
+      return state.recentItems
+    },
+    getLanguageList: (state) => (roleUuid) => {
+      return state.recordSelection.find(
+        record => record.containerUuid === roleUuid
+      ) || []
+    },
+    getContextInfoField: (state) => (contextInfoUuid, sqlStatement) => {
+      return state.contextInfoField.find(info =>
+        info.contextInfoUuid === contextInfoUuid &&
+        info.sqlStatement === sqlStatement
+      )
+    }
+  }
+}
+
+export default data
diff --git a/src/store/modules/ADempiere/enrollment.js b/src/store/modules/ADempiere/enrollment.js
new file mode 100644
index 00000000..e2815294
--- /dev/null
+++ b/src/store/modules/ADempiere/enrollment.js
@@ -0,0 +1,128 @@
+import { enrollmentUser, forgotPassword, resetPasswordFromToken } from '@/api/ADempiere/enrollment'
+import { showMessage } from '@/utils/ADempiere'
+import language from '@/lang'
+import router from '@/router'
+
+const enrollment = {
+  actions: {
+    /**
+     * Enroll user
+     * @param {string} userData.name
+     * @param {string} userData.userName
+     * @param {string} userData.password
+     */
+    enrollmentUser({ commit }, userData) {
+      return enrollmentUser(userData)
+        .then(response => {
+          showMessage({
+            message: language.t('login.userEnrollmentSuccessful'),
+            type: 'success'
+          })
+          router.push({
+            path: 'login'
+          })
+        })
+        .catch(error => {
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Enrollment User - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    /**
+     * @param {string} eMailOrUserName
+     */
+    forgotPassword({ commit }, eMailOrUserName) {
+      return forgotPassword(eMailOrUserName)
+        .then(response => {
+          if (response.getResponsetype() === 0) {
+            showMessage({
+              message: language.t('login.passwordResetSendLink') + eMailOrUserName,
+              type: 'success'
+            })
+            router.push({
+              path: 'login'
+            })
+          } else {
+            showMessage({
+              message: language.t('login.unexpectedError'),
+              type: 'error'
+            })
+          }
+          return response
+        })
+        .catch(error => {
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Forgot Password - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    /**
+     * TODO: Add support gRPC service createPassword
+     * Create password to new user from token
+     * @param {string} parameters.token
+     * @param {string} parameters.password
+     */
+    createPasswordFromToken({ commit }, parameters) {
+      return resetPasswordFromToken(parameters.token, parameters.password)
+        .then(response => {
+          if (response.getResponsetype() === 0) {
+            showMessage({
+              message: language.t('login.createPasswordSuccessful'),
+              type: 'success'
+            })
+          } else {
+            showMessage({
+              message: language.t('login.unexpectedError'),
+              type: 'error'
+            })
+          }
+          router.push({
+            path: 'login'
+          })
+        })
+        .catch(error => {
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Create Password - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    /**
+     * @param {string} parameters.token
+     * @param {string} parameters.password
+     */
+    resetPasswordFromToken({ commit }, parameters) {
+      return resetPasswordFromToken(parameters.token, parameters.password)
+        .then(response => {
+          if (response.getResponsetype() === 0) {
+            showMessage({
+              message: language.t('login.passwordResetSuccessful'),
+              type: 'success'
+            })
+          } else {
+            showMessage({
+              message: language.t('login.unexpectedError'),
+              type: 'error'
+            })
+          }
+          router.push({
+            path: 'login'
+          })
+        })
+        .catch(error => {
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Reset Password - Error ' + error.code + ': ' + error.message)
+        })
+    }
+  }
+}
+
+export default enrollment
diff --git a/src/store/modules/ADempiere/lookup.js b/src/store/modules/ADempiere/lookup.js
new file mode 100644
index 00000000..27455f2b
--- /dev/null
+++ b/src/store/modules/ADempiere/lookup.js
@@ -0,0 +1,204 @@
+import { getLookup, getLookupList, convertValueFromGRPC } from '@/api/ADempiere/data'
+import { isEmptyValue, getCurrentRole, parseContext } from '@/utils/ADempiere'
+
+const lookup = {
+  state: {
+    lookupItem: [],
+    lookupList: []
+  },
+  mutations: {
+    addLoockupItem(state, payload) {
+      state.lookupItem.push(payload)
+    },
+    addLoockupList(state, payload) {
+      state.lookupList.push(payload)
+    },
+    deleteLookupList(state, payload) {
+      state.lookupItem = payload.lookupItem
+      state.lookupList = payload.lookupList
+    }
+  },
+  actions: {
+    getLookupItemFromServer({ commit, rootGetters }, parameters) {
+      const { parentUuid, containerUuid, value, tableName, directQuery } = parameters
+      var parsedDirectQuery = directQuery
+      if (parsedDirectQuery.includes('@')) {
+        parsedDirectQuery = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: directQuery
+        }, true)
+      }
+
+      return getLookup({
+        tableName: tableName,
+        directQuery: parsedDirectQuery,
+        value: value
+      })
+        .then(response => {
+          const map = response.getValuesMap()
+          const label = convertValueFromGRPC(map.get('DisplayColumn'))
+          var option = {
+            label: isEmptyValue(label) ? ' ' : label,
+            // key: convertValueFromGRPC(map.get('KeyColumn'))
+            key: value
+          }
+
+          commit('addLoockupItem', {
+            option: option,
+            value: value, // isNaN(objectParams.value) ? objectParams.value : parseInt(objectParams.value, 10),
+            parsedDirectQuery: directQuery,
+            tableName: tableName,
+            roleUuid: getCurrentRole(),
+            clientId: parseInt(rootGetters.getContextClientId)
+          })
+          return option
+        })
+        .catch(error => {
+          console.warn('Get Lookup, Select Base - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    /**
+     * tableName,
+     * query
+     */
+    getLookupListFromServer({ commit, rootGetters }, parameters) {
+      const { parentUuid, containerUuid, tableName, query } = parameters
+      var parsedQuery = query
+      if (parsedQuery.includes('@')) {
+        parsedQuery = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: query
+        }, true)
+      }
+
+      return getLookupList({
+        tableName: tableName,
+        query: parsedQuery
+      })
+        .then(response => {
+          const recordList = response.getRecordsList()
+          var options = []
+          recordList.forEach(element => {
+            const map = element.getValuesMap()
+            const name = convertValueFromGRPC(map.get('DisplayColumn'))
+            const key = convertValueFromGRPC(map.get('KeyColumn'))
+            options.push({
+              label: isEmptyValue(name) ? ' ' : name,
+              key: isEmptyValue(key) ? -1 : isNaN(key) ? key : parseInt(key)
+            })
+          })
+
+          commit('addLoockupList', {
+            list: options,
+            tableName: tableName,
+            parsedQuery: parsedQuery,
+            roleUuid: getCurrentRole(),
+            clientId: parseInt(rootGetters.getContextClientId)
+          })
+          return options
+        })
+        .catch(error => {
+          console.warn('Get Lookup List, Select Base - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    deleteLookupList({ commit, state }, params) {
+      const { parentUuid, containerUuid, tableName, query, directQuery, value } = params
+
+      var parsedDirectQuery = directQuery
+      if (parsedDirectQuery.includes('@')) {
+        parsedDirectQuery = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: parsedDirectQuery
+        }, true)
+      }
+      const lookupItem = state.lookupItem.filter(itemLookup => {
+        return itemLookup.parsedDirectQuery !== params.parsedDirectQuery &&
+        itemLookup.tableName !== tableName &&
+        itemLookup.value !== value &&
+        itemLookup.roleUuid !== getCurrentRole()
+      })
+
+      var parsedQuery = query
+      if (parsedQuery.includes('@')) {
+        parsedQuery = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: parsedQuery
+        }, true)
+      }
+      const lookupList = state.lookupList.filter(itemLookup => {
+        return itemLookup.parsedQuery !== parsedQuery &&
+        itemLookup.tableName !== tableName &&
+        itemLookup.roleUuid !== getCurrentRole()
+      })
+      commit('deleteLookupList', {
+        lookupItem: lookupItem,
+        lookupList: lookupList
+      })
+    }
+  },
+  getters: {
+    getLookupItem: (state, getters, rootState, rootGetters) => (params) => {
+      var parsedDirectQuery = params.directQuery
+      if (parsedDirectQuery.includes('@')) {
+        parsedDirectQuery = parseContext({
+          parentUuid: params.parentUuid,
+          containerUuid: params.containerUuid,
+          value: parsedDirectQuery
+        }, true)
+      }
+      const lookupItem = state.lookupItem.find(itemLookup => {
+        return itemLookup.parsedDirectQuery === parsedDirectQuery &&
+          itemLookup.tableName === params.tableName &&
+          itemLookup.roleUuid === getCurrentRole() &&
+          itemLookup.clientId === parseInt(rootGetters.getContextClientId) &&
+          itemLookup.value === params.value
+      })
+      if (lookupItem) {
+        return lookupItem.option
+      }
+      return undefined
+    },
+    getLookupList: (state, getters, rootState, rootGetters) => (params) => {
+      var parsedQuery = params.query
+      if (parsedQuery.includes('@')) {
+        parsedQuery = parseContext({
+          parentUuid: params.parentUuid,
+          containerUuid: params.containerUuid,
+          value: parsedQuery
+        }, true)
+      }
+      const lookupList = state.lookupList.find(itemLookup => {
+        return itemLookup.parsedQuery === parsedQuery &&
+          itemLookup.tableName === params.tableName &&
+          itemLookup.roleUuid === getCurrentRole() &&
+          itemLookup.clientId === parseInt(rootGetters.getContextClientId)
+      })
+      if (lookupList) {
+        const resultLookup = lookupList.list.filter(lookup => {
+          if (lookup.key !== undefined) {
+            return lookup
+          }
+        })
+        return resultLookup
+      }
+      return []
+    },
+    /**
+     *
+     */
+    getLookupAll: (state, getters, rootState, rootGetters) => (parameters) => {
+      const item = getters.getLookupItem(parameters)
+      var list = getters.getLookupList(parameters)
+      if (item && !list.find(itemLookup => itemLookup.key === item.key)) {
+        list.push(item)
+      }
+      return list
+    }
+  }
+}
+
+export default lookup
diff --git a/src/store/modules/ADempiere/panel.js b/src/store/modules/ADempiere/panel.js
new file mode 100644
index 00000000..0b351b50
--- /dev/null
+++ b/src/store/modules/ADempiere/panel.js
@@ -0,0 +1,1196 @@
+// Vuex file for store all related to panel and fields
+// Use it for handle events for changes and put context, also can be
+// used for hadle isDisplayed logic, read only logic and mandatory logic
+// The scope is use panel as storage of:
+// - Window: Just need storage tab and fields
+// - Process & Report: Always save a panel and parameters
+// - Smart Browser: Can have a search panel, table panel and process panel
+import evaluator, { assignedGroup, fieldIsDisplayed, isEmptyValue, parseContext, parsedValueComponent, showMessage } from '@/utils/ADempiere'
+import router from '@/router'
+import language from '@/lang'
+
+const panel = {
+  state: {
+    panel: []
+  },
+  mutations: {
+    addPanel(state, payload) {
+      state.panel.push(payload)
+    },
+    changeFieldLogic(state, payload) {
+      if (payload.isDisplayedFromLogic !== undefined) {
+        payload.field.isDisplayedFromLogic = payload.isDisplayedFromLogic
+      }
+      if (payload.isMandatoryFromLogic !== undefined) {
+        payload.field.isMandatoryFromLogic = payload.isMandatoryFromLogic
+      }
+      if (payload.isReportFromLogic !== undefined) {
+        payload.field.isReportFromLogic = payload.isReportFromLogic
+      }
+    },
+    dictionaryResetCache(state) {
+      state.panel = []
+    },
+    changePanel(state, payload) {
+      state = state.panel.map(item => {
+        if (payload.containerUuid === item.containerUuid) {
+          return payload.newPanel
+        }
+        return item
+      })
+    },
+    changeFieldList(state, payload) {
+      payload.fieldList = payload.newFieldList
+    },
+    changeFieldValue(state, payload) {
+      payload.field.value = payload.newValue
+      payload.field.oldValue = payload.field.value
+      if (payload.isChangedOldValue) {
+        payload.field.oldValue = payload.newValue
+      }
+
+      payload.field.valueTo = payload.valueTo
+      payload.field.displayColumn = payload.displayColumn
+    },
+    changeFieldValueToNull(state, payload) {
+      payload.field.oldValue = payload.value
+      payload.field.value = payload.value
+      payload.field.valueTo = payload.value
+      payload.field.displayColumn = payload.value
+    }
+  },
+  actions: {
+    addPanel({ commit, dispatch }, params) {
+      var keyColumn = ''
+      var selectionColumn = []
+      var count = 0
+      params.fieldList.forEach(itemField => {
+        if (itemField.isKey) {
+          keyColumn = itemField.columnName
+        }
+        if (itemField.isSelectionColumn) {
+          selectionColumn.push(itemField.columnName)
+        }
+
+        if (params.panelType === 'table' || params.isAdvancedQuery) {
+          itemField.isShowedFromUser = false
+          if (count < 2 && itemField.isSelectionColumn && itemField.sequence >= 10) {
+            itemField.isShowedFromUser = true
+            count++
+          }
+        } else {
+          if (params.isParentTab) {
+            dispatch('setContext', {
+              parentUuid: params.parentUuid,
+              containerUuid: params.uuid,
+              columnName: itemField.columnName,
+              value: itemField.value
+            })
+          }
+        }
+      })
+
+      params.keyColumn = keyColumn
+      params.selectionColumn = selectionColumn
+      params.recordUuid = null
+      params.fieldList = assignedGroup(params.fieldList)
+
+      commit('addPanel', params)
+    },
+    /**
+     * Used by components/fields/filterFields
+     */
+    changeFieldShowedFromUser({ commit, dispatch, getters }, params) {
+      var panel = getters.getPanel(params.containerUuid, params.isAdvancedQuery)
+      var showsFieldsWithValue = false
+      var hiddenFieldsWithValue = false
+      var newFields = panel.fieldList.map(itemField => {
+        const isMandatory = itemField.isMandatory || itemField.isMandatoryFromLogic
+        if (!isMandatory && fieldIsDisplayed(itemField)) {
+          if (itemField.groupAssigned === params.groupField) {
+            if (params.fieldsUser.length && params.fieldsUser.includes(itemField.columnName)) {
+              // if it isShowedFromUser it is false, and it has some value, it means
+              // that it is going to show, therefore the SmartBrowser must be searched
+              if (!isEmptyValue(itemField.value) && !itemField.isShowedFromUser) {
+                showsFieldsWithValue = true
+              }
+              if (params.isAdvancedQuery) {
+                itemField.isShowedFromUser = false
+              }
+              itemField.isShowedFromUser = true
+              return itemField
+            }
+            // if it isShowedFromUser it is true, and it has some value, it means
+            // that it is going to hidden, therefore the SmartBrowser must be searched
+            if (!isEmptyValue(itemField.value) && itemField.isShowedFromUser) {
+              hiddenFieldsWithValue = true
+            }
+            if (params.isAdvancedQuery) {
+              itemField.isShowedFromUser = false
+            }
+            itemField.isShowedFromUser = false
+          }
+        } else {
+          if (itemField.groupAssigned === params.groupField) {
+            if (params.fieldsUser.length && params.fieldsUser.includes(itemField.columnName)) {
+              // if it isShowedFromUser it is false, and it has some value, it means
+              // that it is going to show, therefore the SmartBrowser must be searched
+              if (!isEmptyValue(itemField.value) && !itemField.isShowedFromUser) {
+                showsFieldsWithValue = true
+              }
+              if (params.isAdvancedQuery) {
+                itemField.isShowedFromUser = false
+              }
+              itemField.isShowedFromUser = true
+              return itemField
+            }
+            if (!isEmptyValue(itemField.value) && itemField.isShowedFromUser) {
+              hiddenFieldsWithValue = true
+            }
+            if (params.isAdvancedQuery) {
+              itemField.isShowedFromUser = false
+            }
+            itemField.isShowedFromUser = false
+          }
+        }
+        return itemField
+      })
+      panel.fieldList = newFields
+      commit('changePanel', {
+        containerUuid: params.containerUuid,
+        newPanel: panel
+      })
+      if (showsFieldsWithValue || hiddenFieldsWithValue) {
+        // Updated record result
+        if (panel.panelType === 'browser') {
+          dispatch('getBrowserSearch', {
+            containerUuid: panel.uuid,
+            isClearSelection: true
+          })
+        } else if (panel.panelType === 'table' && panel.isAdvancedQuery) {
+          dispatch('getObjectListFromCriteria', {
+            parentUuid: panel.parentUuid,
+            containerUuid: panel.uuid,
+            tableName: panel.tableName,
+            query: panel.query,
+            whereClause: panel.whereClause,
+            conditions: getters.getParametersToServer({
+              containerUuid: params.containerUuid,
+              isAdvancedQuery: true,
+              isEvaluateMandatory: false
+            })
+          })
+            .catch(error => {
+              console.warn('Error getting Advanced Query (changeFieldShowedFromUser):', error.message + '. Code: ', error.code)
+            })
+        }
+      }
+    },
+    /**
+     * Change some attribute boolean from fields in panel
+     * @param {string}  containerUuid
+     * @param {string}  fieldList
+     * @param {string}  attribute
+     * @param {boolean} valueAttribute
+     * @param {array}   fieldsIncludes fields to set valueAttribute
+     * @param {array}   fieldsExcludes fields to dont change
+     */
+    changeFieldAttributesBoolean({ commit, getters }, parameters) {
+      const { containerUuid, attribute, valueAttribute, fieldsIncludes, fieldsExcludes } = parameters
+      var { fieldList = [] } = parameters
+      if (fieldList.length <= 0) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid)
+      }
+
+      var newFields = fieldList.map(itemField => {
+        // not change exlude field
+        if (fieldsExcludes && fieldsExcludes.length && fieldsExcludes.includes(itemField.columnName)) {
+          return itemField
+        }
+        // if it field is included to change value
+        if (fieldsIncludes && fieldsIncludes.length && fieldsIncludes.includes(itemField.columnName)) {
+          itemField[attribute] = valueAttribute
+          return itemField
+        }
+        // changed current value by opposite set value
+        itemField[attribute] = !valueAttribute
+        return itemField
+      })
+      commit('changeFieldList', {
+        fieldList: fieldList,
+        newFieldList: newFields
+      })
+    },
+    /**
+     * @param {string}  containerUuid
+     * @param {array}   fieldList
+     */
+    showOnlyMandatoryColumns({ dispatch, getters }, parameters) {
+      const { containerUuid } = parameters
+      var { fieldList = [] } = parameters
+      if (fieldList.length <= 0) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid)
+      }
+      const fieldsExcludes = fieldList.filter(fieldItem => {
+        const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
+        if (isMandatory) {
+          return true
+        }
+      }).map(fieldItem => {
+        return fieldItem.columnName
+      })
+
+      dispatch('changeFieldAttributesBoolean', {
+        containerUuid: containerUuid,
+        fieldsIncludes: fieldsExcludes,
+        attribute: 'isShowedTableFromUser',
+        valueAttribute: true
+      })
+    },
+    /**
+     * @param {string}  containerUuid
+     * @param {array}   fieldList
+     */
+    showAllAvailableColumns({ dispatch, getters }, parameters) {
+      const { containerUuid } = parameters
+      var { fieldList = [] } = parameters
+      if (fieldList.length <= 0) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid)
+      }
+      const fieldsExcludes = fieldList.filter(fieldItem => {
+        const isDisplayed = fieldItem.isDisplayed && fieldItem.isDisplayedFromLogic && !fieldItem.isKey
+        //  Verify for displayed and is active
+        return fieldItem.isActive && isDisplayed
+      }).map(fieldItem => {
+        return fieldItem.columnName
+      })
+
+      dispatch('changeFieldAttributesBoolean', {
+        containerUuid: containerUuid,
+        fieldsIncludes: fieldsExcludes,
+        attribute: 'isShowedTableFromUser',
+        valueAttribute: true
+      })
+    },
+    /**
+     * Set default values to panel
+     * @param {string} containerUuid
+     * @param {string} panelType
+     * TODO: Evaluate if it is necessary to parse the default values
+     */
+    resetPanelToNew({ commit, dispatch, getters }, parameters) {
+      const { parentUuid, containerUuid, panelType = 'window', isNewRecord = false } = parameters
+      var { fieldList = [] } = parameters
+
+      const defaultAttributes = getters.getParsedDefaultValues({
+        parentUuid: parentUuid,
+        containerUuid: containerUuid
+      })
+      if (panelType === 'window' && isNewRecord) {
+        // redirect to create new record
+        const oldRoute = router.app._route
+        router.push({
+          name: oldRoute.name,
+          query: {
+            ...oldRoute.query,
+            action: 'create-new'
+          }
+        })
+        showMessage({
+          message: language.t('data.createNewRecord'),
+          type: 'info'
+        })
+
+        if (!fieldList.length) {
+          fieldList = getters.getFieldsListFromPanel(containerUuid)
+        }
+        fieldList.forEach(fieldToBlanck => {
+          commit('changeFieldValueToNull', {
+            field: fieldToBlanck,
+            value: undefined
+          })
+        })
+
+        // delete records tabs children when change record uuid
+        dispatch('deleteRecordContainer', {
+          viewUuid: parentUuid,
+          withOut: [containerUuid],
+          isNew: true
+        })
+      }
+      dispatch('notifyPanelChange', {
+        parentUuid: parentUuid,
+        containerUuid: containerUuid,
+        panelType: panelType,
+        newValues: defaultAttributes,
+        isSendToServer: false,
+        // if isNewRecord active callouts, if window is closed no send callout
+        isSendCallout: isNewRecord
+      })
+    },
+    /**
+     * Changed panel when receive or reset panel to new record
+     * @param {string} parentUuid
+     * @param {string} containerUuid
+     * @param {object} fieldList, field list of panel
+     * @param {object} newValues, values to set in panel
+     * @param {boolean} isSendToServer, indicate if changes send to server
+     */
+    notifyPanelChange({ dispatch, getters }, parameters) {
+      const {
+        parentUuid,
+        containerUuid,
+        newValues = {},
+        isSendToServer = true,
+        isShowedField = false,
+        panelType = 'window',
+        withOutColumnNames = [],
+        isSendCallout = true,
+        isAdvancedQuery = false
+      } = parameters
+      var { fieldList = [] } = parameters
+
+      if (!fieldList.length) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid, isAdvancedQuery)
+      }
+      var fieldsShowed = []
+      fieldList.forEach(actionField => {
+        if (actionField.isShowedFromUser) {
+          fieldsShowed.push(actionField.columnName)
+        }
+
+        // Evaluate with hasOwnProperty if exits this value
+        if (!newValues.hasOwnProperty(actionField.columnName)) {
+          return
+        }
+        dispatch('notifyFieldChange', {
+          isSendToServer: isSendToServer,
+          isSendCallout: isSendCallout,
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          columnName: actionField.columnName,
+          displayColumn: newValues['DisplayColumn_' + actionField.columnName],
+          newValue: newValues[actionField.columnName],
+          valueTo: newValues[actionField.columnName + '_To'],
+          fieldList: fieldList,
+          field: actionField,
+          withOutColumnNames: withOutColumnNames,
+          isChangedOldValue: true // defines if set oldValue with newValue instead of current value
+        })
+      })
+      if (isShowedField && Object.keys(newValues).length) {
+        // join column names without duplicating it
+        fieldsShowed = Array.from(new Set([
+          ...fieldsShowed,
+          ...Object.keys(newValues)
+        ]))
+
+        dispatch('changeFieldAttributesBoolean', {
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          attribute: 'isShowedFromUser',
+          valueAttribute: true,
+          fieldsIncludes: fieldsShowed
+        })
+      }
+      if (panelType === 'window') {
+        dispatch('setIsloadContext', {
+          containerUuid: containerUuid
+        })
+      }
+    },
+    /**
+     * TODO: Add fieldAttributes
+     * @param {string} params.parentUuid
+     * @param {string} params.containerUuid
+     * @param {string} params.columnName
+     * @param {string} params.newValue
+     * @param {string} displayColumn, only used for lookup
+     * @param {string} params.panelType
+     * @param {string} params.isSendToServer
+     * @param {string} params.isAdvancedQuery
+     */
+    notifyFieldChange({ commit, dispatch, getters }, params) {
+      const {
+        parentUuid, containerUuid, columnName, displayColumn, isSendToServer = true,
+        isAdvancedQuery = false, panelType = 'window', withOutColumnNames = [],
+        isSendCallout = true
+      } = params
+      const panel = getters.getPanel(containerUuid, isAdvancedQuery)
+      var fieldList = panel.fieldList
+      // get field
+      var field = fieldList.find(fieldItem => fieldItem.columnName === columnName)
+
+      params.newValue = parsedValueComponent({
+        fieldType: field.componentPath,
+        referenceType: field.referenceType,
+        value: params.newValue
+      })
+
+      if (field.isRange) {
+        params.valueTo = parsedValueComponent({
+          fieldType: field.componentPath,
+          referenceType: field.referenceType,
+          value: params.valueTo
+        })
+      }
+
+      if (!(panelType === 'table' || isAdvancedQuery)) {
+        //  Call context management
+        dispatch('setContext', {
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          columnName: columnName,
+          value: params.newValue
+        })
+
+        // request context info field
+        if (!isEmptyValue(field.value) && !isEmptyValue(field.contextInfo) && !isEmptyValue(field.contextInfo.sqlStatement)) {
+          var isSQL = false
+          var sqlStatement = field.contextInfo.sqlStatement
+          if (sqlStatement.includes('@')) {
+            if (sqlStatement.includes('@SQL=')) {
+              isSQL = true
+            }
+            sqlStatement = parseContext({
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              columnName: columnName,
+              value: sqlStatement,
+              isSQL: isSQL
+            })
+            if (isSQL && String(sqlStatement) === '[object Object]') {
+              sqlStatement = sqlStatement.query
+            }
+          }
+          dispatch('getContextInfoValueFromServer', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid,
+            contextInfoUuid: field.contextInfo.uuid,
+            columnName: columnName,
+            sqlStatement: sqlStatement
+          })
+            .then(response => {
+              if (!isEmptyValue(response) && !isEmptyValue(response.messageText)) {
+                field.contextInfo.isActive = true
+                field.contextInfo.messageText.msgText = response.messageText
+                field.contextInfo.messageText.msgTip = response.messageTip
+              }
+            })
+        }
+      }
+
+      // the field has not changed, then the action is broken
+      if (params.newValue === field.value) {
+        return
+      }
+      commit('changeFieldValue', {
+        field: field,
+        newValue: params.newValue,
+        valueTo: params.valueTo,
+        displayColumn: displayColumn,
+        isChangedOldValue: params.isChangedOldValue
+      })
+      //  Change Dependents
+      var dependents = fieldList.filter(fieldItem => {
+        return field.dependentFieldsList.includes(fieldItem.columnName)
+      })
+      //  Iterate for change logic
+      dependents.forEach(dependent => {
+        //  isDisplayed Logic
+        var isDisplayedFromLogic = false
+        var isMandatoryFromLogic = false
+        var isReadOnlyFromLogic = false
+        if (dependent.displayLogic.trim() !== '') {
+          isDisplayedFromLogic = evaluator.evaluateLogic({
+            context: getters,
+            parentUuid: params.parentUuid,
+            containerUuid: params.containerUuid,
+            logic: dependent.displayLogic,
+            type: 'displayed'
+          })
+        } else {
+          isDisplayedFromLogic = undefined
+        }
+        //  Mandatory Logic
+        if (dependent.mandatoryLogic.trim() !== '') {
+          isMandatoryFromLogic = evaluator.evaluateLogic({
+            context: getters,
+            parentUuid: params.parentUuid,
+            containerUuid: params.containerUuid,
+            logic: dependent.mandatoryLogic
+          })
+        } else {
+          isReadOnlyFromLogic = undefined
+        }
+        //  Read Only Logic
+        if (dependent.readOnlyLogic.trim() !== '') {
+          isReadOnlyFromLogic = evaluator.evaluateLogic({
+            context: getters,
+            parentUuid: params.parentUuid,
+            containerUuid: params.containerUuid,
+            logic: dependent.readOnlyLogic
+          })
+        } else {
+          isReadOnlyFromLogic = undefined
+        }
+        commit('changeFieldLogic', {
+          field: dependent,
+          isDisplayedFromLogic: isDisplayedFromLogic,
+          isMandatoryFromLogic: isMandatoryFromLogic,
+          isReadOnlyFromLogic: isReadOnlyFromLogic
+        })
+      })
+
+      // request callouts
+      if (field.panelType === 'window' && isSendCallout) {
+        if (!withOutColumnNames.includes(field.columnName) && !isEmptyValue(params.newValue) && !isEmptyValue(field.callout)) {
+          withOutColumnNames.push(field.columnName)
+          dispatch('getCallout', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid,
+            tableName: panel.tableName,
+            columnName: field.columnName,
+            callout: field.callout,
+            value: params.newValue,
+            oldValue: field.oldValue,
+            withOutColumnNames: withOutColumnNames
+          })
+        }
+      }
+
+      if (isSendToServer) {
+        // TODO: refactory for it and change for a standard method
+        if (!getters.isNotReadyForSubmit(containerUuid)) {
+          if (field.panelType === 'browser' && fieldIsDisplayed(field)) {
+            dispatch('getBrowserSearch', {
+              containerUuid: containerUuid,
+              isClearSelection: true
+            })
+          }
+          if (field.panelType === 'window' && fieldIsDisplayed(field)) {
+            var uuid = getters.getUuid(containerUuid)
+            if (isEmptyValue(uuid)) {
+              dispatch('createNewEntity', {
+                parentUuid: parentUuid,
+                containerUuid: containerUuid
+              })
+                .then(response => {
+                  // change old value so that it is not send in the next update
+                  commit('changeFieldValue', {
+                    field: field,
+                    newValue: params.newValue,
+                    valueTo: params.valueTo,
+                    displayColumn: params.displayColumn,
+                    isChangedOldValue: true
+                  })
+
+                  var oldRoute = router.app._route
+                  router.push({
+                    name: oldRoute.name,
+                    query: {
+                      ...oldRoute.query,
+                      action: response.recordUuid
+                    }
+                  })
+                  dispatch('tagsView/delView', oldRoute, true)
+                })
+                .catch(error => {
+                  showMessage({
+                    message: error.message,
+                    type: 'error'
+                  })
+                  console.warn('Create Entity Error ' + error.code + ': ' + error.message)
+                })
+            } else {
+              dispatch('updateCurrentEntity', {
+                containerUuid: containerUuid,
+                recordUuid: uuid
+              })
+                .then(response => {
+                  // change old value so that it is not send in the next update
+                  showMessage({
+                    message: language.t('notifications.updateFields') + field.name,
+                    type: 'success'
+                  })
+                  commit('changeFieldValue', {
+                    field: field,
+                    newValue: params.newValue,
+                    valueTo: params.valueTo,
+                    displayColumn: params.displayColumn,
+                    isChangedOldValue: true
+                  })
+
+                  // change value in table
+                  dispatch('notifyRowTableChange', {
+                    containerUuid: containerUuid,
+                    row: response,
+                    isEdit: false,
+                    isParent: true
+                  })
+                })
+            }
+          }
+        } else {
+          const fieldsEmpty = getters.getFieldListEmptyMandatory({
+            containerUuid: containerUuid
+          })
+          showMessage({
+            message: language.t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+            type: 'info'
+          })
+        }
+      } else if (!params.isDontSendToQuery) {
+        if (panelType === 'table' || isAdvancedQuery) {
+          if (fieldIsDisplayed(field) && field.isShowedFromUser) {
+            // change action to advanced query on field value is changed in this panel
+            if (router.currentRoute.query.action !== 'advancedQuery') {
+              router.push({
+                query: {
+                  ...router.currentRoute.query,
+                  action: 'advancedQuery'
+                }
+              })
+            }
+            dispatch('getObjectListFromCriteria', {
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              tableName: panel.tableName,
+              query: panel.query,
+              whereClause: panel.whereClause,
+              conditions: getters.getParametersToServer({
+                containerUuid: containerUuid,
+                isAdvancedQuery: true,
+                isEvaluateMandatory: false
+              })
+            })
+              .catch(error => {
+                console.warn('Error getting Advanced Query (notifyFieldChange):', error.message + '. Code: ', error.code)
+              })
+          }
+        }
+      }
+    },
+    notifyFieldChangeDisplayColumn({ commit, getters }, parameters) {
+      var field = getters.getFieldFromColumnName(parameters.containerUuid, parameters.columnName)
+      var newField = {
+        field: field,
+        newValue: field.value,
+        valueTo: field.valueTo,
+        displayColumn: parameters.displayColumn
+      }
+      commit('changeFieldValue', newField)
+    },
+    getPanelAndFields({ dispatch }, parameters) {
+      if (parameters.type === 'process' || parameters.type === 'report') {
+        return dispatch('getProcessFromServer', parameters)
+          .then(response => {
+            return response
+          })
+          .catch(error => {
+            return {
+              ...error,
+              moreInfo: `Dictionary getPanelAndFields ${parameters.type} (State Panel)`,
+              parameters: parameters
+            }
+          })
+      } else if (parameters.type === 'browser') {
+        return dispatch('getBrowserFromServer', parameters)
+          .then(response => {
+            return response
+          })
+          .catch(error => {
+            return {
+              ...error,
+              moreInfo: 'Dictionary getPanelAndFields browser (State Panel)',
+              parameters: parameters
+            }
+          })
+      } else if (parameters.type === 'window' || parameters.type === 'table') {
+        return dispatch('getTabAndFieldFromServer', {
+          parentUuid: parameters.parentUuid,
+          containerUuid: parameters.containerUuid,
+          isAdvancedQuery: parameters.isAdvancedQuery,
+          panelType: parameters.type
+        }).then(response => {
+          return response
+        }).catch(error => {
+          return {
+            ...error,
+            moreInfo: 'Dictionary getPanelAndFields Window (State Panel)',
+            parameters: parameters
+          }
+        })
+      }
+    },
+    dictionaryResetCache({ commit }) {
+      commit('dictionaryResetCache')
+      commit('dictionaryResetCacheContext')
+      commit('dictionaryResetCacheContextMenu')
+      commit('dictionaryResetCacheWindow')
+      commit('dictionaryResetCacheProcess')
+      commit('dictionaryResetCacheBrowser')
+    }
+  },
+  getters: {
+    getPanel: (state) => (containerUuid, isAdvancedQuery = false) => {
+      return state.panel.find(item => {
+        return item.uuid === containerUuid && (!isAdvancedQuery || (isAdvancedQuery && item.isAdvancedQuery))
+      })
+    },
+    getFieldsListFromPanel: (state, getters) => (containerUuid, isAdvancedQuery = false) => {
+      const panel = getters.getPanel(containerUuid, isAdvancedQuery)
+      if (panel === undefined) {
+        return []
+      }
+      return panel.fieldList
+    },
+    getFieldFromColumnName: (state, getters) => (containerUuid, columnName) => {
+      return getters.getFieldsListFromPanel(containerUuid).find(itemField => itemField.columnName === columnName)
+    },
+    /**
+     * Determinate if panel is ready fron send, all fiedls mandatory and displayed with values
+     * @param {string}  containerUuid
+     * @param {object}  row, data to compare if is table
+     * @returns {object}
+     */
+    isNotReadyForSubmit: (state, getters) => (containerUuid, row) => {
+      const field = getters.getFieldsListFromPanel(containerUuid).find(fieldItem => {
+        const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
+        var value = fieldItem.value
+        // used when evaluate data in table
+        if (row) {
+          value = row[fieldItem.columnName]
+        }
+        if (fieldIsDisplayed(fieldItem) && isMandatory && isEmptyValue(value)) {
+          return true
+        }
+      })
+
+      return field
+    },
+    getEmptyMandatory: (state, getters) => (containerUuid) => {
+      return getters.getFieldsListFromPanel(containerUuid).find(itemField => {
+        if ((itemField.isMandatory || itemField.isMandatoryFromLogic) && isEmptyValue(itemField.value)) {
+          return true
+        }
+      })
+    },
+    // Obtain empty obligatory fields
+    getFieldListEmptyMandatory: (state, getters) => (parameters) => {
+      const { containerUuid, evaluateShowed = true, row } = parameters
+      // all optionals (not mandatory) fields
+      var fieldList = getters.getFieldsListFromPanel(containerUuid).filter(fieldItem => {
+        const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
+        if (isMandatory) {
+          const isDisplayed = fieldIsDisplayed(fieldItem)
+          if (evaluateShowed) {
+            return isDisplayed
+          }
+          return isMandatory
+        }
+      })
+      fieldList = fieldList.filter(fieldItem => {
+        var value = fieldItem.value
+        // used when evaluate data in table
+        if (row) {
+          value = row[fieldItem.columnName]
+        }
+        if (isEmptyValue(value)) {
+          return true
+        }
+      })
+      return fieldList.map(fieldItem => {
+        return fieldItem.name
+      })
+    },
+    // all available fields not mandatory to show, used in components panel/filterFields.vue
+    getFieldsListNotMandatory: (state, getters) => (containerUuid, evaluateShowed = true) => {
+      // all optionals (not mandatory) fields
+      return getters.getFieldsListFromPanel(containerUuid).filter(fieldItem => {
+        const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
+        if (!isMandatory) {
+          const isDisplayed = fieldIsDisplayed(fieldItem)
+          if (evaluateShowed) {
+            return isDisplayed
+          }
+          return !isMandatory
+        }
+      })
+    },
+    getUuid: (state, getters) => (containerUuid) => {
+      const fieldUuid = getters.getColumnNamesAndValues({
+        containerUuid: containerUuid,
+        isObjectReturn: true,
+        isAddDisplayColumn: true
+      })
+
+      if (fieldUuid) {
+        return fieldUuid.UUID
+      }
+      return undefined
+    },
+    /**
+     * @param {string}  containerUuid, unique identifier of the panel to search your list of fields
+     * @param {string}  propertyName, property name to return its value (value, oldValue)
+     * @param {boolean} isObjectReturn, define if is an object to return, else arraylist return
+     * @param {boolean} isEvaluateValues, define if evaluate emty values
+     * @param {boolean} isAddDisplayColumn, define if return display columns
+     * @param {boolean} isAddRangeColumn, define if return rangue columns_To
+     * @param {array} withOut, define if return display columns
+     * @param {array} isEvaluatedChangedValue, define if return only fields with values changes
+     * @returns {array|object}
+     */
+    getColumnNamesAndValues: (state, getters) => ({
+      containerUuid,
+      propertyName = 'value',
+      isObjectReturn = false,
+      isEvaluateValues = false,
+      isAddDisplayColumn = false,
+      isAddRangeColumn = false,
+      withOut = [],
+      isEvaluatedChangedValue = false,
+      fieldList = []
+    }) => {
+      if (!fieldList.length) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid)
+      }
+
+      var attributesList = fieldList
+      var attributesObject = {}
+      var displayColumnsList = []
+      var rangeColumnsList = []
+      if (withOut.length || isEvaluatedChangedValue) {
+        attributesList = attributesList.filter(fieldItem => {
+          // columns to exclude
+          if (withOut.includes(fieldItem.columnName)) {
+            return false
+          }
+          if (isEvaluatedChangedValue && fieldItem.value === fieldItem.oldValue) {
+            return false
+          }
+          return true
+        })
+      }
+
+      // TODO: Evaluate valueTo
+      if (isEvaluateValues) {
+        attributesList = attributesList
+          .filter(fieldItem => {
+            if (!isEmptyValue(fieldItem.value)) {
+              return true
+            }
+            return false
+          })
+      }
+      attributesList = attributesList
+        .map(fieldItem => {
+          const valueToReturn = fieldItem[propertyName]
+          attributesObject[fieldItem.columnName] = valueToReturn
+
+          // Add display columns if field has value
+          if (fieldItem[propertyName] && fieldItem.displayColumn) {
+            attributesObject['DisplayColumn_' + fieldItem.columnName] = fieldItem.displayColumn
+            displayColumnsList.push({
+              columnName: 'DisplayColumn_' + fieldItem.columnName,
+              value: fieldItem.displayColumn
+            })
+          }
+
+          // add range columns
+          if (isAddRangeColumn && fieldItem.isRange) {
+            attributesObject[fieldItem.columnName + '_To'] = fieldItem.valueTo
+            rangeColumnsList.push({
+              columnName: fieldItem.columnName + '_To',
+              value: fieldItem.valueTo
+            })
+          }
+
+          return {
+            columnName: fieldItem.columnName,
+            value: valueToReturn
+          }
+        })
+
+      if (isAddDisplayColumn) {
+        attributesList = attributesList.concat(displayColumnsList, rangeColumnsList)
+      }
+
+      if (isObjectReturn) {
+        return attributesObject
+      }
+      return attributesList
+    },
+    getParsedDefaultValues: (state, getters) => ({
+      parentUuid,
+      containerUuid,
+      isGetServer = true,
+      fieldList = []
+    }) => {
+      if (!fieldList.length) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid)
+      }
+      var attributesObject = {}
+
+      fieldList
+        .map(fieldItem => {
+          let isSQL = false
+          let valueToReturn = fieldItem.parsedDefaultValue
+          if (String(fieldItem.defaultValue).includes('@')) {
+            if (String(fieldItem.defaultValue).includes('@SQL=') && isGetServer) {
+              isSQL = true
+            }
+            valueToReturn = parseContext({
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              columnName: fieldItem.columnName,
+              value: fieldItem.defaultValue,
+              isSQL: isSQL
+            })
+          }
+
+          valueToReturn = parsedValueComponent({
+            fieldType: fieldItem.componentPath,
+            referenceType: fieldItem.referenceType,
+            isMandatory: fieldItem.isMandatory,
+            value: valueToReturn
+          })
+          attributesObject[fieldItem.columnName] = valueToReturn
+
+          // add display column to default
+          if (fieldItem.componentPath === 'FieldSelect' && fieldItem.value === valueToReturn) {
+            attributesObject['DisplayColumn_' + fieldItem.columnName] = fieldItem.displayColumn
+          }
+
+          return {
+            columnName: fieldItem.columnName,
+            value: valueToReturn,
+            isSQL: isSQL
+          }
+        })
+      return attributesObject
+    },
+    getFieldsIsDisplayed: (state, getters) => (containerUuid) => {
+      const fieldList = getters.getFieldsListFromPanel(containerUuid)
+      var fieldsIsDisplayed = []
+      var fieldsNotDisplayed = []
+      if (fieldList.length) {
+        fieldsIsDisplayed = fieldList.filter(itemField => {
+          const isMandatory = itemField.isMandatory && itemField.isMandatoryFromLogic
+          if (fieldIsDisplayed(itemField) && (isMandatory || itemField.isShowedFromUser)) {
+            return true
+          }
+          fieldsNotDisplayed.push(itemField)
+        })
+      }
+      return {
+        fieldIsDisplayed: fieldsIsDisplayed,
+        fieldsNotDisplayed: fieldsNotDisplayed,
+        totalField: fieldList.length,
+        isDisplayed: Boolean(fieldsIsDisplayed.length)
+      }
+    },
+    getParametersToShare: (state, getters) => ({
+      containerUuid,
+      withOut = [],
+      isOnlyDisplayed = false,
+      isAdvancedQuery = false
+    }) => {
+      var fieldList = getters.getFieldsListFromPanel(containerUuid, isAdvancedQuery)
+      var attributesListLink = ''
+      if (withOut.length) {
+        fieldList = fieldList.filter(fieldItem => {
+          // columns to exclude
+          if (withOut.includes(fieldItem.columnName)) {
+            return false
+          }
+          return true
+        })
+      }
+
+      if (isOnlyDisplayed) {
+        fieldList = fieldList.filter(fieldItem => {
+          const isMandatory = Boolean(fieldItem.isMandatory || fieldItem.isMandatoryFromLogic) && !isAdvancedQuery
+          const isDisplayed = fieldIsDisplayed(fieldItem) && (fieldItem.isShowedFromUser || isMandatory)
+          if (isDisplayed) {
+            return true
+          }
+          return false
+        })
+      }
+
+      fieldList.map(fieldItem => {
+        // assign values
+        var value = fieldItem.value
+        var valueTo = fieldItem.valueTo
+
+        if (!isEmptyValue(value)) {
+          if (['FieldDate', 'FieldTime'].includes(fieldItem.componentPath)) {
+            value = value.getTime()
+          }
+          attributesListLink += `${fieldItem.columnName}=${encodeURIComponent(value)}&`
+        }
+
+        if (fieldItem.isRange && !isEmptyValue(valueTo)) {
+          if (['FieldDate', 'FieldTime'].includes(fieldItem.componentPath)) {
+            valueTo = valueTo.getTime()
+          }
+          attributesListLink += `${fieldItem.columnName}_To=${encodeURIComponent(valueTo)}&`
+        }
+      })
+
+      return attributesListLink.slice(0, -1)
+    },
+    /**
+     * get field list visible and with values
+     * TODO: Deprecated, change by getColumnNamesAndValues
+     */
+    getPanelParameters: (state, getters) => (containerUuid, isEvaluateEmptyDisplayed = false, withOut = [], isAdvancedQuery) => {
+      if (isAdvancedQuery) {
+        var panel = getters.getPanel(containerUuid, isAdvancedQuery)
+      } else {
+        panel = getters.getPanel(containerUuid)
+      }
+      const fieldList = panel.fieldList
+      const fields = fieldList.length
+      var params = []
+      var fieldsMandatory = []
+      var isEmptyFieldDisplayed = false // indicate if exists a field displayed and empty value
+
+      if (fields > 0) {
+        params = fieldList.filter(fieldItem => {
+          // columns to exclude
+          if (withOut.find(subItem => subItem === fieldItem.columnName)) {
+            return false
+          }
+
+          const isMandatory = Boolean(fieldItem.isMandatory || fieldItem.isMandatoryFromLogic)
+          const isDisplayed = fieldIsDisplayed(fieldItem) && (fieldItem.isShowedFromUser || isMandatory)
+
+          // mandatory fields
+          if (isMandatory) {
+            fieldsMandatory.push(fieldItem)
+          }
+          if (!isEmptyValue(fieldItem.value) && isDisplayed) {
+            return true
+          }
+          // empty value
+          if (isMandatory && isEvaluateEmptyDisplayed) {
+            isEmptyFieldDisplayed = true
+          }
+          return false
+        })
+
+        if (isEvaluateEmptyDisplayed && isEmptyFieldDisplayed) {
+          return {
+            fields: fields,
+            params: [],
+            fieldsMandatory: fieldsMandatory
+          }
+        }
+      }
+      return {
+        fields: fields,
+        params: params,
+        fieldsMandatory: fieldsMandatory
+      }
+    },
+    /**
+     * Getter converter selection params with value format
+     * [{ columname: name key, value: value to send }]
+     */
+    getParametersToServer: (state, getters) => ({
+      containerUuid,
+      row,
+      fieldList = [],
+      withOutColumnNames = [],
+      isEvaluateDisplayed = true,
+      isEvaluateMandatory = true,
+      isConvertedDateToTimestamp = false,
+      isAdvancedQuery = false
+    }) => {
+      if (fieldList.length <= 0) {
+        fieldList = getters.getFieldsListFromPanel(containerUuid, isAdvancedQuery)
+      }
+      var parametersRange = []
+
+      // filter fields
+      var parametersList = fieldList
+        .filter(fieldItem => {
+          // columns to exclude
+          if (withOutColumnNames.includes(fieldItem.columnName)) {
+            return false
+          }
+
+          // exclude key column if is new
+          if (row && row.isNew && fieldItem.isKey) {
+            return false
+          }
+
+          const isMandatory = Boolean(fieldItem.isMandatory || fieldItem.isMandatoryFromLogic)
+          // mandatory fields
+          if (isEvaluateMandatory && fieldItem.panelType !== 'browser') {
+            if (isMandatory && !isAdvancedQuery) {
+              return true
+            }
+          }
+
+          // evaluate displayed fields
+          if (isEvaluateDisplayed) {
+            var isDisplayed = fieldIsDisplayed(fieldItem) && (fieldItem.isShowedFromUser || isMandatory)
+            if (isAdvancedQuery) {
+              isDisplayed = fieldItem.isShowedFromUser
+            }
+
+            if (isDisplayed) {
+              if (row) {
+                if (!isEmptyValue(row[fieldItem.columnName])) {
+                  return true
+                }
+              } else {
+                if (!isEmptyValue(fieldItem.value)) {
+                  return true
+                }
+              }
+            }
+          }
+
+          return false
+        })
+
+      // conever parameters
+      parametersList = parametersList
+        .map(parameterItem => {
+          var value = row ? row[parameterItem.columnName] : parameterItem.value
+          var valueTo = row ? row[`${parameterItem.columnName}_To`] : parameterItem.valueTo
+
+          if (isConvertedDateToTimestamp) {
+            if (['FieldDate', 'FieldTime'].includes(parameterItem.componentPath) &&
+              Object.prototype.toString.call(value) === '[object Date]') {
+              value = value.getTime()
+              if (valueTo) {
+                valueTo = valueTo.getTime()
+              }
+            }
+          }
+          // TODO: Evaluate if is only to fields type Time Date, DateTime
+          if (parameterItem.isRange) {
+            parametersRange.push({
+              columnName: parameterItem.columnName + '_To',
+              value: valueTo
+            })
+          }
+
+          return {
+            columnName: parameterItem.columnName,
+            value: value
+          }
+        })
+
+      parametersList = parametersList.concat(parametersRange)
+      return parametersList
+    }
+  }
+}
+
+export default panel
diff --git a/src/store/modules/ADempiere/process.js b/src/store/modules/ADempiere/process.js
new file mode 100644
index 00000000..9cc694ac
--- /dev/null
+++ b/src/store/modules/ADempiere/process.js
@@ -0,0 +1,206 @@
+import { getProcess as getProcessMetadata } from '@/api/ADempiere'
+import { convertField, isEmptyValue, showMessage } from '@/utils/ADempiere'
+import language from '@/lang'
+import router from '@/router'
+
+const process = {
+  state: {
+    process: []
+  },
+  mutations: {
+    addProcess(state, payload) {
+      state.process.push(payload)
+    },
+    dictionaryResetCacheProcess(state) {
+      state.process = []
+    }
+  },
+  actions: {
+    getProcessFromServer: ({ commit, dispatch }, parameters) => {
+      return new Promise((resolve, reject) => {
+        var processUuid = parameters.containerUuid
+        getProcessMetadata(processUuid)
+          .then(response => {
+            var panelType = 'process'
+            if (response.getIsreport()) {
+              panelType = 'report'
+            }
+
+            const additionalAttributes = {
+              processUuid: response.getUuid(),
+              processId: response.getId(),
+              containerUuid: response.getUuid(),
+              panelType: panelType
+            }
+
+            //  Convert from gRPC
+            var fieldsRangeList = []
+            var fieldDefinitionList = response.getParametersList().map((fieldItem, index) => {
+              var someAttributes = {
+                ...additionalAttributes,
+                fieldListIndex: index
+              }
+              var field = convertField(fieldItem, someAttributes)
+              // Add new field if is range number
+              if (field.isRange && field.componentPath === 'NumberBase') {
+                var fieldRange = convertField(fieldItem, someAttributes, true)
+                if (!isEmptyValue(fieldRange.value)) {
+                  fieldRange.isShowedFromUser = true
+                }
+                fieldsRangeList.push(fieldRange)
+              }
+
+              // if field with value displayed in main panel
+              if (!isEmptyValue(field.value)) {
+                field.isShowedFromUser = true
+              }
+
+              return field
+            })
+            fieldDefinitionList = fieldDefinitionList.concat(fieldsRangeList)
+
+            //  Get dependent fields
+            fieldDefinitionList
+              .filter(field => field.parentFieldsList && field.isActive)
+              .forEach((field, index, list) => {
+                field.parentFieldsList.forEach(parentColumnName => {
+                  var parentField = list.find(parentField => {
+                    return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
+                  })
+                  if (parentField) {
+                    parentField.dependentFieldsList.push(field.columnName)
+                  }
+                })
+              })
+
+            //  Get export list
+            var reportExportTypeList = response.getReportexporttypesList().map(reportType => {
+              return {
+                name: reportType.getName(),
+                description: reportType.getDescription(),
+                reportExportType: reportType.getType()
+              }
+            })
+            //  Default Action
+            var actions = []
+            actions.push({
+              name: language.t('components.RunProcess'),
+              processName: response.getName(),
+              type: 'action',
+              action: 'startProcess',
+              uuid: response.getUuid(),
+              id: response.getId(),
+              description: response.getDescription(),
+              help: response.getHelp(),
+              isReport: response.getIsreport(),
+              accessLevel: response.getAccesslevel(),
+              showHelp: response.getShowhelp(),
+              isDirectPrint: response.getIsdirectprint(),
+              reportExportType: undefined
+            }, {
+              name: language.t('components.ChangeParameters'),
+              processName: response.getName(),
+              type: 'process',
+              action: 'changeParameters',
+              uuid: response.getUuid(),
+              id: response.getId(),
+              description: response.description,
+              help: response.getHelp(),
+              isReport: response.getIsreport(),
+              accessLevel: response.getAccesslevel(),
+              showHelp: response.getShowhelp(),
+              isDirectPrint: response.getIsdirectprint()
+            })
+
+            var summaryAction = {
+              name: language.t('components.RunProcessAs'),
+              processName: response.getName(),
+              type: 'summary',
+              action: '',
+              childs: [],
+              uuid: response.getUuid(),
+              id: response.getId(),
+              description: response.getDescription(),
+              help: response.getHelp(),
+              isReport: response.getIsreport(),
+              accessLevel: response.getAccesslevel(),
+              showHelp: response.getShowhelp(),
+              isDirectPrint: response.getIsdirectprint()
+            }
+            reportExportTypeList.forEach(actionValue => {
+              //  Push values
+              summaryAction.childs.push({
+                name: language.t('components.ExportTo') + ' (' + actionValue.name + ')',
+                processName: response.getName(),
+                type: 'action',
+                action: 'startProcess',
+                uuid: response.getUuid(),
+                id: response.getId(),
+                description: actionValue.description,
+                help: response.getHelp(),
+                isReport: response.getIsreport(),
+                accessLevel: response.getAccesslevel(),
+                showHelp: response.getShowhelp(),
+                isDirectPrint: response.getIsdirectprint(),
+                reportExportType: actionValue.reportExportType
+              })
+            })
+            //  Add summary Actions
+            actions.push(summaryAction)
+
+            var processDefinition = {
+              id: response.getId(),
+              uuid: response.getUuid(),
+              name: response.getName(),
+              description: response.getDescription(),
+              help: response.getHelp(),
+              isReport: response.getIsreport(),
+              accessLevel: response.getAccesslevel(),
+              showHelp: response.getShowhelp(),
+              isDirectPrint: response.getIsdirectprint(),
+              reportExportTypeList: reportExportTypeList,
+              value: response.getValue(),
+              panelType: panelType,
+              fieldList: fieldDefinitionList
+            }
+
+            dispatch('addPanel', processDefinition)
+            commit('addProcess', processDefinition)
+
+            //  Add process menu
+            dispatch('setContextMenu', {
+              containerUuid: response.getUuid(),
+              relations: [],
+              actions: actions,
+              references: []
+            })
+            resolve(processDefinition)
+          })
+          .catch(error => {
+            router.push({ path: '/dashboard' })
+            dispatch('tagsView/delView', parameters.routeToDelete)
+            showMessage({
+              message: language.t('login.unexpectedError'),
+              type: 'error'
+            })
+            console.warn('Dictionary Process (State) - Error ' + error)
+            reject(error)
+          })
+      })
+    }
+  },
+  getters: {
+    getProcess: (state) => (processUuid) => {
+      return state.process.find(
+        item => item.uuid === processUuid
+      )
+    },
+    getProcessById: (state) => (processId) => {
+      return state.process.find(
+        item => item.id === parseInt(processId)
+      )
+    }
+  }
+}
+
+export default process
diff --git a/src/store/modules/ADempiere/processControl.js b/src/store/modules/ADempiere/processControl.js
new file mode 100644
index 00000000..da3ff5a1
--- /dev/null
+++ b/src/store/modules/ADempiere/processControl.js
@@ -0,0 +1,474 @@
+import { runProcess, requestProcessActivity } from '@/api/ADempiere'
+import { showNotification } from '@/utils/ADempiere/notification'
+import { isEmptyValue, convertMapToArrayPairs } from '@/utils/ADempiere'
+import language from '@/lang'
+import router from '@/router'
+
+const processControl = {
+  state: {
+    inExecution: [], // process not response from server
+    isVisibleDialog: false,
+    reportObject: {},
+    reportList: [],
+    metadata: {},
+    process: [], // process to run finish
+    sessionProcess: [],
+    notificationProcess: [],
+    inRequestMetadata: []
+  },
+  mutations: {
+    // Add process in execution
+    addInExecution(state, payload) {
+      state.inExecution.push(payload)
+    },
+    // Add process in notifation
+    addNotificationProcess(state, payload) {
+      state.notificationProcess.push(payload)
+    },
+    // Delete process in execution afther some response from server
+    deleteInExecution(state, payload) {
+      state.inExecution = state.inExecution.filter(item => item.containerUuid !== payload.containerUuid)
+    },
+    // Add process in request metadata from server
+    addInRequestMetadata(state, payload) {
+      state.inRequestMetadata.push(payload)
+    },
+    // Delete process in request metadata
+    deleteInRequestMetadata(state, payload) {
+      state.inRequestMetadata = state.inRequestMetadata.filter(item => item !== payload)
+    },
+    addStartedProcess(state, payload) {
+      state.process.push(payload)
+    },
+    dataResetCacheProcess(state, payload) {
+      state.process = payload
+    },
+    /**
+     *
+     * @param {object} state
+     * @param {boolean} payload, true or false value to change displayed dialog
+     */
+    setShowDialog(state, payload) {
+      state.isVisibleDialog = payload
+    },
+    setMetadata(state, payload) {
+      state.metadata = payload
+    },
+    setReportValues(state, payload) {
+      state.reportObject = payload
+      state.reportList.push(payload)
+    },
+    setSessionProcess(state, payload) {
+      state.sessionProcess = payload.processList
+    },
+    changeFormatReport(state, payload) {
+      state.reportFormat = payload
+    },
+    clearProcessControl(state) {
+      state.inExecution = [] // process not response from server
+      state.reportObject = {}
+      state.reportList = []
+      state.metadata = {}
+      state.process = [] // process to run finish
+      state.sessionProcess = []
+      state.notificationProcess = []
+      state.inRequestMetadata = []
+    }
+  },
+  actions: {
+    // Supported Actions for it
+    startProcess({ commit, dispatch, getters, rootGetters }, params) {
+      return new Promise((resolve, reject) => {
+        // TODO: Add support to evaluate params to send
+        const samePocessInExecution = getters.getInExecution(params.containerUuid)
+        // exists some call to executed process with container uuid
+        if (samePocessInExecution) {
+          return reject({
+            error: 0,
+            message: `In this process (${samePocessInExecution.name}) there is already an execution in progress.`
+          })
+        }
+
+        // additional attributes to send server, selection to browser, or table name and record id to window
+        var selection = []
+        var allData = {}
+        var tab, tableName, recordId
+        if (params.panelType) {
+          if (params.panelType === 'browser') {
+            allData = getters.getDataRecordAndSelection(params.containerUuid)
+            selection = rootGetters.getSelectionToServer({
+              containerUuid: params.containerUuid,
+              selection: allData.selection
+            })
+            if (selection.length < 1) {
+              showNotification({
+                title: language.t('data.selectionRequired'),
+                type: 'warning'
+              })
+              return reject({
+                error: 0,
+                message: `Required selection data record to run this process (${params.action.name})`
+              })
+            }
+          }
+          if (params.panelType === 'window') {
+            tab = rootGetters.getTab(params.parentUuid, params.containerUuid)
+            tableName = tab.tableName
+            const field = rootGetters.getFieldFromColumnName(params.containerUuid, tableName + '_ID')
+            recordId = field.value
+          }
+        }
+
+        // get info metadata process
+        const processDefinition = rootGetters.getProcess(params.action.uuid)
+        var reportType = params.reportFormat
+        const finalParameters = rootGetters.getParametersToServer({ containerUuid: processDefinition.uuid })
+
+        showNotification({
+          title: language.t('notifications.processing'),
+          message: processDefinition.name,
+          summary: processDefinition.description,
+          type: 'info'
+        })
+        const timeInitialized = (new Date()).getTime()
+        // Run process on server and wait for it for notify
+        var processResult = {
+          // panel attributes from where it was executed
+          parentUuid: params.parentUuid,
+          containerUuid: params.containerUuid,
+          panelType: params.panelType,
+          menuParentUuid: params.menuParentUuid,
+          processIdPath: params.routeToDelete.path,
+          // process attributes
+          lastRun: timeInitialized,
+          action: processDefinition.name,
+          name: processDefinition.name,
+          description: processDefinition.description,
+          instanceUuid: '',
+          processUuid: processDefinition.uuid,
+          processId: processDefinition.id,
+          processName: processDefinition.processName,
+          parameters: finalParameters,
+          isError: false,
+          isProcessing: true,
+          isReport: processDefinition.isReport,
+          summary: '',
+          resultTableName: '',
+          logs: [],
+          output: {
+            uuid: '',
+            name: '',
+            description: '',
+            fileName: '',
+            output: '',
+            outputStream: '',
+            reportType: ''
+          }
+        }
+        commit('addInExecution', processResult)
+        if (params.panelType === 'window') {
+          reportType = 'pdf'
+        } else if (params.panelType === 'browser') {
+          if (allData.record.length <= 100) {
+            // close view if is browser.
+            router.push({ path: '/dashboard' })
+            dispatch('tagsView/delView', params.routeToDelete)
+            // delete data associate to browser
+            dispatch('deleteRecordContainer', {
+              viewUuid: params.containerUuid
+            })
+          }
+        } else {
+          // close view if is process, report.
+          router.push({ path: '/dashboard' })
+          dispatch('tagsView/delView', params.routeToDelete)
+        }
+
+        runProcess({
+          uuid: processDefinition.uuid,
+          id: processDefinition.id,
+          reportType: reportType,
+          parameters: finalParameters,
+          selection: selection,
+          tableName: tableName,
+          recordId: recordId
+        })
+          .then(response => {
+            var output = {
+              uuid: '',
+              name: '',
+              description: '',
+              fileName: '',
+              mimeType: '',
+              output: '',
+              outputStream: '',
+              reportType: ''
+            }
+            if (response.getOutput()) {
+              const responseOutput = response.getOutput()
+              output = {
+                uuid: responseOutput.getUuid(),
+                name: responseOutput.getName(),
+                description: responseOutput.getDescription(),
+                fileName: responseOutput.getFilename(),
+                mimeType: responseOutput.getMimetype(),
+                output: responseOutput.getOutput(),
+                outputStream: responseOutput.getOutputstream(),
+                reportType: responseOutput.getReporttype()
+              }
+            }
+            var logList = []
+            if (response.getLogsList()) {
+              logList = response.getLogsList().map(itemLog => {
+                return {
+                  log: itemLog.getLog(),
+                  recordId: itemLog.getRecordid()
+                }
+              })
+            }
+
+            var link = {
+              href: undefined,
+              download: undefined
+            }
+            if (processDefinition.isReport) {
+              const blob = new Blob([output.outputStream], { type: output.mimeType })
+              link = document.createElement('a')
+              link.href = window.URL.createObjectURL(blob)
+              link.download = output.fileName
+              if (reportType !== 'pdf' && reportType !== 'html') {
+                link.click()
+              }
+            }
+            // assign new attributes
+            Object.assign(processResult, {
+              instanceUuid: response.getInstanceuuid(),
+              url: link.href,
+              download: link.download,
+              isError: response.getIserror(),
+              isProcessing: response.getIsprocessing(),
+              summary: response.getSummary(),
+              ResultTableName: response.getResulttablename(),
+              lastRun: response.getLastrun(),
+              logs: logList,
+              output: output
+            })
+            dispatch('setReportTypeToShareLink', processResult.output.reportType)
+            resolve(processResult)
+          })
+          .catch(error => {
+            Object.assign(processResult, {
+              isError: true,
+              message: error.message,
+              isProcessing: false
+            })
+            console.log('Error running the process', error)
+            reject(error)
+          })
+          .finally(() => {
+            if (!processResult.isError) {
+              if (params.panelType === 'window') {
+                // TODO: Add conditional to indicate when update record
+                dispatch('updateRecordAfterRunProcess', {
+                  parentUuid: params.parentUuid,
+                  containerUuid: params.containerUuid,
+                  tab: tab
+                })
+              } else if (params.panelType === 'browser') {
+                if (allData.record.length >= 100) {
+                  dispatch('getBrowserSearch', {
+                    containerUuid: params.containerUuid
+                  })
+                }
+              }
+            }
+
+            commit('addNotificationProcess', processResult)
+            dispatch('finishProcess', { processOutput: processResult, routeToDelete: params.routeToDelete })
+
+            commit('deleteInExecution', {
+              containerUuid: params.containerUuid
+            })
+          })
+      })
+    },
+    /**
+     * TODO: Add date time in which the process/report was executed
+     */
+    getSessionProcessFromServer({ commit, dispatch, getters, rootGetters }) {
+      // process Activity
+      return requestProcessActivity()
+        .then(response => {
+          var responseList = response.getResponsesList().map(responseItem => {
+            var uuid = responseItem.getUuid()
+            var responseOutput = responseItem.getOutput()
+            var output
+            if (responseOutput !== undefined) {
+              output = {
+                uuid: uuid,
+                name: responseOutput.getName(),
+                description: responseOutput.getDescription(),
+                fileName: responseOutput.getFilename(),
+                mimeType: responseOutput.getMimetype(),
+                output: responseOutput.getOutput(),
+                outputStream: responseOutput.getOutputstream(),
+                outputStream_asB64: responseOutput.getOutputstream_asB64(),
+                outputStream_asU8: responseOutput.getOutputstream_asU8(),
+                reportType: responseOutput.getReporttype()
+              }
+            }
+            var logList = responseItem.getLogsList().map(log => {
+              return {
+                recordId: log.getRecordid(),
+                log: log.getLog()
+              }
+            })
+            var processMetadata = rootGetters.getProcess(uuid)
+            // if no exists metadata process in store and no request progess
+            if (processMetadata === undefined && getters.getInRequestMetadata(uuid) === undefined) {
+              commit('addInRequestMetadata', uuid)
+              dispatch('getProcessFromServer', { containerUuid: uuid })
+                .finally(() => {
+                  commit('deleteInRequestMetadata', uuid)
+                })
+            }
+
+            var process = {
+              processUuid: responseItem.getUuid(),
+              instanceUuid: responseItem.getInstanceuuid(),
+              isError: responseItem.getIserror(),
+              isProcessing: responseItem.getIsprocessing(),
+              logs: logList,
+              output: output,
+              lastRun: responseItem.getLastrun(),
+              parametersMap: responseItem.getParametersMap(),
+              parameters: convertMapToArrayPairs(
+                responseItem.getParametersMap()
+              ),
+              ResultTableName: responseItem.getResulttablename(),
+              summary: responseItem.getSummary()
+            }
+            return process
+          })
+
+          var processResponseList = {
+            recordCount: response.getRecordcount(),
+            processList: responseList,
+            nextPageToken: response.getNextPageToken()
+          }
+          commit('setSessionProcess', processResponseList)
+          return processResponseList
+        })
+        .catch(error => {
+          showNotification({
+            title: language.t('notifications.error'),
+            message: error.message,
+            type: 'error'
+          })
+          console.warn('Error getting process activity:' + error.message + '. Code: ' + error.code)
+        })
+    },
+    /**
+     *
+     * @param {object} params
+     */
+    setShowDialog({ commit }, params) {
+      if (params.type === 'process' || params.type === 'report' || params.type === 'window') {
+        if (params.action) {
+          commit('setMetadata', params.action)
+          commit('setShowDialog', true)
+        } else {
+          commit('setShowDialog', false)
+        }
+      }
+    },
+    finishProcess({ commit }, parameters) {
+      var processMessage = {
+        name: parameters.processOutput.processName,
+        title: language.t('notifications.succesful'),
+        message: language.t('notifications.processExecuted'),
+        type: 'success',
+        logs: parameters.processOutput.logs,
+        summary: parameters.processOutput.summary
+      }
+      var errorMessage = !isEmptyValue(parameters.processOutput.message) ? parameters.processOutput.message : language.t('login.unexpectedError')
+      // TODO: Add isReport to type always 'success'
+      if (parameters.processOutput.isError || isEmptyValue(parameters.processOutput.processId) || isEmptyValue(parameters.processOutput.instanceUuid)) {
+        processMessage.title = language.t('notifications.error')
+        processMessage.message = errorMessage
+        processMessage.type = 'error'
+        parameters.processOutput.isError = true
+      }
+      if (parameters.processOutput.isReport && !parameters.processOutput.isError) {
+        // open report viewer with report response
+        router.push({
+          name: 'Report Viewer',
+          params: {
+            processId: parameters.processOutput.processId,
+            instanceUuid: parameters.processOutput.instanceUuid,
+            fileName: parameters.processOutput.output.fileName,
+            menuParentUuid: parameters.processOutput.menuParentUuid
+          }
+        })
+      }
+
+      showNotification(processMessage)
+      commit('addStartedProcess', parameters.processOutput)
+      commit('setReportValues', parameters.processOutput)
+    },
+    changeFormatReport({ commit }, reportFormat) {
+      if (reportFormat !== undefined) {
+        commit('changeFormatReport', reportFormat)
+      }
+    },
+    clearProcessControl({ commit }) {
+      commit('clearProcessControl')
+    }
+  },
+  getters: {
+    /**
+     * Running processes that have not received a response from the server
+     * @param {string} containerUuid
+     */
+    getInExecution: (state) => (containerUuid) => {
+      return state.inExecution.find(item => item.containerUuid === containerUuid)
+    },
+    /**
+     * Process for send to server, or send without response
+     */
+    getAllInExecution: (state) => {
+      return state.inExecution
+    },
+    /**
+     * Process send to server, with response from server
+     */
+    getAllFinishProcess: (state) => {
+      return state.process
+    },
+    getNotificationProcess: (state) => {
+      return state.notificationProcess
+    },
+    /**
+     * Process receibed from server associated whith this session
+     */
+    getAllSessionProcess: (state) => {
+      return state.sessionProcess
+    },
+    /**
+     * Process request metadata from server filter form uuid process
+     */
+    getInRequestMetadata: (state) => (containerUuid) => {
+      return state.inRequestMetadata.find(item => item === containerUuid)
+    },
+    getProcessResult: (state) => {
+      return state.reportObject
+    },
+    getCachedReport: (state) => (instanceUuid) => {
+      return state.reportList.find(
+        item => item.instanceUuid === instanceUuid
+      )
+    }
+  }
+}
+
+export default processControl
diff --git a/src/store/modules/ADempiere/utils.js b/src/store/modules/ADempiere/utils.js
new file mode 100644
index 00000000..6d53d1d3
--- /dev/null
+++ b/src/store/modules/ADempiere/utils.js
@@ -0,0 +1,111 @@
+
+const utils = {
+  state: {
+    width: 0,
+    height: 0,
+    splitHeight: 50,
+    splitHeightTop: 0,
+    widthLayout: 0,
+    tempShareLink: '',
+    oldAction: undefined,
+    reportType: ''
+  },
+  mutations: {
+    setWidth(state, width) {
+      state.width = width
+    },
+    setWidthLayout(state, width) {
+      state.widthLayout = width
+    },
+    setHeigth(state, height) {
+      state.height = height
+    },
+    setSplitHeight(state, splitHeight) {
+      state.splitHeight = splitHeight
+    },
+    setSplitHeightTop(state, splitHeightTop) {
+      state.splitHeightTop = splitHeightTop
+    },
+    setTempShareLink(state, payload) {
+      state.tempShareLink = payload
+    },
+    setOldAction(state, payload) {
+      state.oldAction = payload
+    },
+    setReportTypeToShareLink(state, payload) {
+      state.reportType = payload
+    }
+  },
+  actions: {
+    setWidth({ commit }, width) {
+      commit('setWidth', width)
+    },
+    setWidthLayout({ commit }, width) {
+      commit('setWidthLayout', width)
+    },
+    setHeight({ commit }, height) {
+      commit('setHeigth', height)
+    },
+    setSplitHeight({ commit }, splitHeight) {
+      commit('setSplitHeight', splitHeight)
+    },
+    setSplitHeightTop({ commit }, splitHeightTop) {
+      commit('setSplitHeightTop', splitHeightTop)
+    },
+    changeShowedDetail({ dispatch }, params) {
+      if (params.panelType === 'window') {
+        dispatch('changeShowedDetailWindow', params)
+      } else if (params.panelType === 'browser') {
+        dispatch('changeShowedCriteriaBrowser', params)
+      }
+    },
+    setTempShareLink({ commit }, parameters) {
+      if (!parameters.href.includes(String(parameters.processId))) {
+        commit('setTempShareLink', parameters.href)
+      }
+    },
+    setOldAction({ commit }, value) {
+      commit('setOldAction', value)
+    },
+    setReportTypeToShareLink({ commit }, value) {
+      commit('setReportTypeToShareLink', value)
+    }
+  },
+  getters: {
+    getWidth: (state) => {
+      return state.width
+    },
+    getWidthLayout: (state, rootGetters) => {
+      if (rootGetters.toggleSideBar) {
+        return state.width - 250
+      }
+      return state.width - 54
+    },
+    getHeigth: (state) => {
+      return state.height
+    },
+    getSplitHeightTop: (state) => {
+      return state.getSplitHeightTop
+    },
+    getSplitHeight: (state) => {
+      const split = state.splitHeight
+      var panelHeight = 0
+      if (split !== 50) {
+        panelHeight = split.splitHeight
+      } else {
+        panelHeight = 50
+      }
+      return panelHeight
+    },
+    getTempShareLink: (state) => {
+      return state.tempShareLink
+    },
+    getOldAction: (state) => {
+      return state.oldAction
+    },
+    getReportType: (state) => {
+      return state.reportType
+    }
+  }
+}
+export default utils
diff --git a/src/store/modules/ADempiere/window.js b/src/store/modules/ADempiere/window.js
new file mode 100644
index 00000000..9bf61890
--- /dev/null
+++ b/src/store/modules/ADempiere/window.js
@@ -0,0 +1,377 @@
+import {
+  getWindow as getWindowMetadata,
+  getTab as getTabMetadata
+} from '@/api/ADempiere/dictionary'
+import { convertContextInfoFromGRPC, convertField, getFieldTemplate, showMessage } from '@/utils/ADempiere'
+import language from '@/lang'
+import router from '@/router'
+
+const window = {
+  state: {
+    window: [],
+    windowIndex: 0
+  },
+  mutations: {
+    addWindow(state, payload) {
+      state.window.push(payload)
+      state.windowIndex++
+    },
+    dictionaryResetCacheWindow(state) {
+      state.window = []
+      state.windowIndex = 0
+    },
+    changeShowedDetailWindow(state, payload) {
+      payload.window.isShowedDetail = payload.changeShowedDetail
+    },
+    changeShowedRecordWindow(state, payload) {
+      payload.window.isShowedRecordNavigation = payload.isShowedRecordNavigation
+    },
+    setCurrentTab(state, payload) {
+      payload.window.currentTabUuid = payload.tabUuid
+    },
+    setTabIsLoadField(state, payload) {
+      payload.tab.isLoadFieldList = payload.isLoadFieldList
+    }
+  },
+  actions: {
+    getWindowFromServer({ commit, state, dispatch }, params) {
+      return getWindowMetadata(params.windowUuid)
+        .then(response => {
+          var newWindow = {
+            id: response.getId(),
+            uuid: params.windowUuid,
+            name: response.getName(),
+            contextInfo: convertContextInfoFromGRPC(response.getContextinfo()),
+            windowType: response.getWindowtype(),
+            isShowedRecordNavigation: undefined,
+            firstTabUuid: response.getTabsList()[0].getUuid()
+          }
+          var tabs = response.getTabsList()
+          const firstTab = tabs[0].getTablename()
+          var childrenTabs = []
+          var parentTabs = []
+
+          tabs = tabs.map((tabItem, index) => {
+            var group = {
+              groupName: '',
+              groupType: ''
+            }
+            if (tabItem.getFieldgroup()) {
+              group.groupName = tabItem.getFieldgroup().getName()
+              group.groupType = tabItem.getFieldgroup().getFieldgrouptype()
+            }
+
+            var tab = {
+              id: tabItem.getId(),
+              uuid: tabItem.getUuid(),
+              containerUuid: tabItem.getUuid(),
+              parentUuid: params.windowUuid,
+              windowUuid: params.windowUuid,
+              name: tabItem.getName(),
+              tabGroup: group,
+              firstTabUuid: newWindow.firstTabUuid,
+              //
+              displayLogic: tabItem.getDisplaylogic(),
+              isView: tabItem.getIsview(),
+              isDocument: tabItem.getIsdocument(),
+              isInsertRecord: tabItem.getIsinsertrecord(),
+              isSortTab: tabItem.getIssorttab(), // Tab type Order Tab
+              // relations
+              isParentTab: Boolean(firstTab === tabItem.getTablename()),
+              sequence: tabItem.getSequence(),
+              tabLevel: tabItem.getTablevel(),
+              parentTabUuid: tabItem.getParenttabuuid(),
+              linkColumnName: tabItem.getLinkcolumnname(),
+              parentColumnName: tabItem.getParentcolumnname(),
+              //
+              contextInfo: convertContextInfoFromGRPC(tabItem.getContextinfo()),
+              isAdvancedTab: tabItem.getIsadvancedtab(),
+              isHasTree: tabItem.getIshastree(),
+              isInfoTab: tabItem.getIsinfotab(),
+              isTranslationTab: tabItem.getIstranslationtab(),
+              isReadOnly: tabItem.getIsreadonly(),
+              isDeleteable: tabItem.getIsdeleteable(),
+              accessLevel: tabItem.getAccesslevel(),
+              isSingleRow: tabItem.getIssinglerow(),
+              // conditionals
+              commitWarning: tabItem.getCommitwarning(),
+              // query db
+              tableName: tabItem.getTablename(),
+              query: tabItem.getQuery(),
+              whereClause: tabItem.getWhereclause(),
+              orderByClause: tabItem.getOrderbyclause(),
+              isChangeLog: tabItem.getIschangelog(),
+              // app properties
+              isShowedRecordNavigation: !(tabItem.getIssinglerow()),
+              isLoadFieldList: false,
+              index: index
+            }
+
+            // Convert from gRPC process list
+            // action is dispatch used in vuex
+            var actions = []
+            actions.push({
+              // action to set default values and enable fields not isUpdateable
+              name: language.t('window.newRecord'),
+              processName: language.t('window.newRecord'),
+              type: 'dataAction',
+              action: 'resetPanelToNew',
+              uuidParent: newWindow.uuid,
+              disabled: !tab.isInsertRecord || tab.isReadOnly
+            }, {
+              // action to delete record selected
+              name: language.t('window.deleteRecord'),
+              processName: language.t('window.deleteRecord'),
+              type: 'dataAction',
+              action: 'deleteEntity',
+              uuidParent: newWindow.uuid,
+              disabled: tab.isReadOnly
+            }, {
+              // action to undo create, update, delete record
+              name: language.t('data.undo'),
+              processName: language.t('data.undo'),
+              type: 'dataAction',
+              action: 'undoModifyData',
+              uuidParent: newWindow.uuid,
+              disabled: false
+            })
+            const processList = tabItem.getProcessesList().map(processItem => {
+              return {
+                name: processItem.getName(),
+                type: 'process',
+                uuid: processItem.getUuid(),
+                description: processItem.getDescription(),
+                help: processItem.getHelp(),
+                isReport: processItem.getIsreport(),
+                accessLevel: processItem.getAccesslevel(),
+                showHelp: processItem.getShowhelp(),
+                isDirectPrint: processItem.getIsdirectprint()
+              }
+            })
+            actions = actions.concat(processList)
+
+            //  Add process menu
+            dispatch('setContextMenu', {
+              containerUuid: tab.uuid,
+              relations: [],
+              actions: actions,
+              references: []
+            })
+
+            // TODO: Add support to isSortTab and isTranslationTab
+            if (!(tab.isSortTab || tab.isTranslationTab)) {
+              if (tab.isParentTab) {
+                parentTabs.push(tab)
+              } else {
+                childrenTabs.push(tab)
+              }
+            }
+            return tab
+          }).filter(itemTab => {
+            return !(itemTab.isSortTab || itemTab.isTranslationTab)
+          })
+
+          var tabProperties = {
+            tabsList: tabs,
+            currentTab: parentTabs[0],
+            tabsListParent: parentTabs,
+            tabsListChildren: childrenTabs,
+            // app attributes
+            isShowedDetail: Boolean(childrenTabs.length),
+            currentTabUuid: parentTabs[0].uuid
+          }
+
+          newWindow = {
+            ...newWindow,
+            ...tabProperties,
+            windowIndex: state.windowIndex + 1
+          }
+          commit('addWindow', newWindow)
+          return newWindow
+        })
+        .catch(error => {
+          router.push({ path: '/dashboard' })
+          dispatch('tagsView/delView', params.routeToDelete)
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Dictionary Window (State Window) - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    getTabAndFieldFromServer({ dispatch, getters }, {
+      parentUuid,
+      containerUuid,
+      panelType = 'window',
+      isAdvancedQuery = false
+    }) {
+      return getTabMetadata(containerUuid)
+        .then(response => {
+          var fieldsList = response.getFieldsList()
+          const additionalAttributes = {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid,
+            isShowedFromUser: true,
+            panelType: panelType,
+            tableName: response.getTablename(),
+            //
+            isReadOnlyFromForm: false,
+            isAdvancedQuery: isAdvancedQuery
+          }
+
+          var fieldUuidsequence = 0
+          var fieldLinkColumnName
+          //  Convert from gRPC
+          fieldsList = fieldsList.map((item, index) => {
+            item = convertField(item, {
+              ...additionalAttributes,
+              fieldListIndex: index
+            })
+            if (item.sequence > fieldUuidsequence) {
+              fieldUuidsequence = item.sequence
+            }
+
+            if (item.isParent) {
+              fieldLinkColumnName = item.columnName
+            }
+
+            return item
+          })
+
+          //  Get dependent fields
+          fieldsList
+            .filter(field => field.parentFieldsList && field.isActive)
+            .forEach((field, index, list) => {
+              field.parentFieldsList.forEach(parentColumnName => {
+                var parentField = list.find(parentField => {
+                  return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
+                })
+                if (parentField) {
+                  parentField.dependentFieldsList.push(field.columnName)
+                }
+              })
+            })
+
+          if (!fieldsList.find(field => field.columnName === 'UUID')) {
+            var attributesOverwrite = {
+              panelType: panelType,
+              sequence: (fieldUuidsequence + 10),
+              name: 'UUID',
+              columnName: 'UUID',
+              isAdvancedQuery: isAdvancedQuery,
+              componentPath: 'FieldText'
+            }
+            var field = getFieldTemplate(attributesOverwrite)
+            fieldsList.push(field)
+          }
+
+          //  Panel for save on store
+          const panel = {
+            ...getters.getTab(parentUuid, containerUuid),
+            isAdvancedQuery: isAdvancedQuery,
+            fieldLinkColumnName: fieldLinkColumnName,
+            fieldList: fieldsList,
+            panelType: panelType
+          }
+
+          dispatch('addPanel', panel)
+          dispatch('setTabIsLoadField', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid
+          })
+          return panel
+        })
+        .catch(error => {
+          showMessage({
+            message: language.t('login.unexpectedError'),
+            type: 'error'
+          })
+          console.warn('Dictionary Tab (State Window) - Error ' + error.code + ': ' + error.message)
+        })
+    },
+    changeShowedDetailWindow: ({ commit, state }, params) => {
+      var window = state.window.find(itemWindow => {
+        return itemWindow.uuid === params.containerUuid
+      })
+      commit('changeShowedDetailWindow', {
+        window: window,
+        changeShowedDetail: params.isShowedDetail
+      })
+    },
+    changeShowedRecordWindow: ({ commit, state }, params) => {
+      var window = state.window.find(itemWindow => {
+        return itemWindow.uuid === params.parentUuid
+      })
+      commit('changeShowedRecordWindow', {
+        window: window,
+        isShowedRecordNavigation: params.isShowedRecordNavigation
+      })
+    },
+    /**
+     * @param {string} parameters.parentUuid
+     * @param {string} parameters.containerUuid
+     */
+    setCurrentTab: ({ commit, getters }, parameters) => {
+      commit('setCurrentTab', {
+        window: getters.getWindow(parameters.parentUuid),
+        tabUuid: parameters.containerUuid
+      })
+    },
+    setTabIsLoadField: ({ commit, getters }, { parentUuid, containerUuid }) => {
+      const tab = getters.getTab(parentUuid, containerUuid)
+      commit('setTabIsLoadField', {
+        tab: tab,
+        isLoadFieldList: true
+      })
+    }
+  },
+  getters: {
+    getWindow: (state) => (windowUuid) => {
+      return state.window.find(
+        item => item.uuid === windowUuid
+      )
+    },
+    getIndexWindow: (state) => {
+      return state.windowIndex
+    },
+    getIsShowedRecordNavigation: (state, getters) => (windowUuid) => {
+      const window = getters.getWindow(windowUuid)
+      if (window) {
+        return window.isShowedRecordNavigation
+      }
+      return window
+    },
+    getTab: (state, getters) => (windowUuid, tabUuid) => {
+      const window = getters.getWindow(windowUuid)
+      if (window) {
+        return window.tabsList.find(tabItem => {
+          return tabItem.uuid === tabUuid
+        })
+      }
+      return window
+    },
+    getCurrentTab: (state, getters) => (windowUuid) => {
+      const window = getters.getWindow(windowUuid)
+      if (window) {
+        return window.tabsList.find(tabItem => {
+          return tabItem.uuid === window.currentTabUuid
+        })
+      }
+      return {
+        isInsertRecord: false
+      }
+    },
+    getTabIsLoadField: (state, getters) => (windowUuid, tabUuid) => {
+      const tab = getters.getTab(windowUuid, tabUuid)
+      if (tab) {
+        return tab.isLoadFieldList
+      }
+      return tab
+    },
+    getTableNameFromTab: (state, getters) => (windowUuid, tabUuid) => {
+      return getters.getTab(windowUuid, tabUuid).tableName
+    }
+  }
+}
+
+export default window
diff --git a/src/store/modules/ADempiere/windowControl.js b/src/store/modules/ADempiere/windowControl.js
new file mode 100644
index 00000000..694fc312
--- /dev/null
+++ b/src/store/modules/ADempiere/windowControl.js
@@ -0,0 +1,662 @@
+import { createEntity, updateEntity, deleteEntity, getReferencesList, rollbackEntity } from '@/api/ADempiere/data'
+import { convertObjectToArrayPairs, convertValuesMapToObject, isEmptyValue, parseContext, showMessage } from '@/utils/ADempiere'
+import language from '@/lang'
+import router from '@/router'
+
+const windowControl = {
+  state: {
+    inCreate: [],
+    references: [],
+    windowRoute: {},
+    windowOldRoute: {
+      path: '',
+      fullPath: '',
+      query: {}
+    },
+    dataLog: {} // { containerUuid, recordId, tableName, eventType }
+  },
+  mutations: {
+    addInCreate(state, payload) {
+      state.inCreate.push(payload)
+    },
+    deleteInCreate(state, payload) {
+      state.inCreate = state.inCreate.filter(item => item.containerUuid !== payload.containerUuid)
+    },
+    addReferencesList(state, payload) {
+      state.references.push(payload)
+    },
+    deleteReference(state, payload) {
+      state.references = state.references.filter(itemReference => {
+        if (itemReference.parentUuid === payload.windowUuid &&
+          itemReference.recordUuid === payload.recordUuid) {
+          return false
+        }
+        return true
+      })
+    },
+    addWindowRoute(state, payload) {
+      state.windowRoute = payload
+    },
+    setDataLog(state, payload) {
+      state.dataLog = payload
+    },
+    setWindowOldRoute(state, payload) {
+      state.windowOldRoute = payload
+    }
+  },
+  actions: {
+    undoPanelToNew({ dispatch, rootGetters }, parameters) {
+      const oldAttributes = rootGetters.getColumnNamesAndValues({
+        containerUuid: parameters.containerUuid,
+        propertyName: 'oldValue',
+        isObjectReturn: true,
+        isAddDisplayColumn: true
+      })
+      dispatch('notifyPanelChange', {
+        containerUuid: parameters.containerUuid,
+        newValues: oldAttributes
+      })
+    },
+    createNewEntity({ commit, dispatch, getters, rootGetters }, parameters) {
+      return new Promise((resolve, reject) => {
+        // exists some call to create new record with container uuid
+        if (getters.getInCreate(parameters.containerUuid)) {
+          return reject({
+            error: 0,
+            message: `In this panel (${parameters.containerUuid}) is a create new record in progress`
+          })
+        }
+
+        const panel = rootGetters.getPanel(parameters.containerUuid)
+        // delete key from attributes
+        const finalAttributes = rootGetters.getColumnNamesAndValues({
+          containerUuid: parameters.containerUuid,
+          propertyName: 'value',
+          isEvaluateValues: true,
+          isAddDisplayColumn: true
+        })
+
+        commit('addInCreate', {
+          containerUuid: parameters.containerUuid,
+          tableName: panel.tableName,
+          attributesList: finalAttributes
+        })
+        createEntity({
+          tableName: panel.tableName,
+          attributesList: finalAttributes
+        })
+          .then(response => {
+            var newValues = convertValuesMapToObject(response.getValuesMap())
+            finalAttributes.forEach(element => {
+              if (element.columnName.includes('DisplayColumn')) {
+                newValues[element.columnName] = element.value
+              }
+            })
+
+            showMessage({
+              message: language.t('data.createRecordSuccessful'),
+              type: 'success'
+            })
+
+            // update fields with new values
+            dispatch('notifyPanelChange', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid,
+              newValues: newValues,
+              isSendToServer: false
+            })
+            dispatch('addNewRow', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid,
+              isPanelValues: true,
+              isEdit: false
+            })
+
+            // set data log to undo action
+            const fieldId = panel.fieldList.find(itemField => itemField.isKey)
+            dispatch('setDataLog', {
+              containerUuid: parameters.containerUuid,
+              tableName: panel.tableName,
+              recordId: fieldId.value, // TODO: Verify performance with tableName_ID
+              recordUuid: newValues.UUID,
+              eventType: 'INSERT'
+            })
+
+            resolve({
+              data: newValues,
+              recordUuid: response.getUuid(),
+              recordId: response.getId(),
+              tableName: response.getTablename()
+            })
+          })
+          .catch(error => {
+            showMessage({
+              message: error.message,
+              type: 'error'
+            })
+            console.warn('Create Entity error: ' + error.message)
+            reject(error)
+          })
+          .finally(() => {
+            commit('deleteInCreate', {
+              containerUuid: parameters.containerUuid,
+              tableName: panel.tableName,
+              attributesList: finalAttributes
+            })
+          })
+      })
+    },
+    createEntityFromTable({ commit, getters, rootGetters }, parameters) {
+      const { containerUuid, row } = parameters
+      // exists some call to create new record with container uuid
+      if (getters.getInCreate(containerUuid)) {
+        return {
+          error: 0,
+          message: `In this panel (${containerUuid}) is a create new record in progress.`
+        }
+      }
+      const panel = rootGetters.getPanel(containerUuid)
+
+      // TODO: Add support to Binary columns (BinaryData)
+      const columnsToDontSend = ['BinaryData', 'isSendServer', 'isEdit']
+
+      // attributes or fields
+      var finalAttributes = convertObjectToArrayPairs(row)
+      finalAttributes = finalAttributes.filter(itemAttribute => {
+        if (isEmptyValue(itemAttribute.value)) {
+          return false
+        }
+        if (columnsToDontSend.includes(itemAttribute.columnName) || itemAttribute.columnName.includes('DisplayColumn')) {
+          return false
+        }
+        return true
+      })
+
+      commit('addInCreate', {
+        containerUuid: parameters.containerUuid,
+        tableName: panel.tableName,
+        attributesList: finalAttributes
+      })
+      return createEntity({
+        tableName: panel.tableName,
+        attributesList: finalAttributes
+      })
+        .then(response => {
+          const newValues = convertValuesMapToObject(response.getValuesMap())
+
+          const result = {
+            data: newValues,
+            recordUuid: response.getUuid(),
+            recordId: response.getId(),
+            tableName: response.getTablename()
+          }
+          showMessage({
+            message: language.t('data.createRecordSuccessful'),
+            type: 'success'
+          })
+          if (panel.isParentTab) {
+            // redirect to create new record
+            const oldRoute = router.app._route
+            router.push({
+              name: oldRoute.name,
+              query: {
+                ...oldRoute.query,
+                action: result.recordUuid
+              }
+            })
+          }
+          return result
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+          console.warn('Create Entity Table Error ' + error.code + ': ' + error.message)
+        })
+        .finally(() => {
+          commit('deleteInCreate', {
+            containerUuid: containerUuid,
+            tableName: panel.tableName,
+            attributesList: finalAttributes
+          })
+        })
+    },
+    updateCurrentEntity({ commit, dispatch, rootGetters }, {
+      containerUuid,
+      recordUuid = null
+    }) {
+      const panel = rootGetters.getPanel(containerUuid)
+      if (!recordUuid) {
+        recordUuid = rootGetters.getUuid(containerUuid)
+      }
+
+      // TODO: Add support to Binary columns (BinaryData)
+      const columnsToDontSend = ['Account_Acct']
+
+      // attributes or fields
+      var finalAttributes = rootGetters.getColumnNamesAndValues({
+        containerUuid: containerUuid,
+        isEvaluatedChangedValue: true
+      })
+
+      finalAttributes = finalAttributes.filter(itemAttribute => {
+        if (columnsToDontSend.includes(itemAttribute.columnName) || itemAttribute.columnName.includes('DisplayColumn')) {
+          return false
+        }
+        const field = panel.fieldList.find(itemField => itemField.columnName === itemAttribute.columnName)
+        if (!field || !field.isUpdateable || !field.isDisplayed) {
+          return false
+        }
+        return true
+      })
+
+      return updateEntity({
+        tableName: panel.tableName,
+        recordUuid: recordUuid,
+        attributesList: finalAttributes
+      })
+        .then(response => {
+          const newValues = convertValuesMapToObject(response.getValuesMap())
+          const responseConvert = {
+            data: newValues,
+            id: response.getId(),
+            uuid: recordUuid,
+            tableName: panel.tableName
+          }
+
+          // set data log to undo action
+          const fieldId = panel.fieldList.find(itemField => itemField.isKey)
+          dispatch('setDataLog', {
+            containerUuid: containerUuid,
+            tableName: panel.tableName,
+            recordId: fieldId.value, // TODO: Verify performance with tableName_ID
+            recordUuid: newValues.UUID,
+            eventType: 'UPDATE'
+          })
+
+          commit('setRecordDetail', responseConvert)
+          return newValues
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+          console.warn('Update Entity Error ' + error.code + ': ' + error.message)
+        })
+    },
+    updateCurrentEntityFromTable({ rootGetters }, parameters) {
+      const panel = rootGetters.getPanel(parameters.containerUuid)
+
+      // TODO: Add support to Binary columns (BinaryData)
+      const columnsToDontSend = ['BinaryData', 'isSendServer', 'isEdit']
+
+      // attributes or fields
+      var finalAttributes = convertObjectToArrayPairs(parameters.row)
+      finalAttributes = finalAttributes.filter(itemAttribute => {
+        if (columnsToDontSend.includes(itemAttribute.columnName) || itemAttribute.columnName.includes('DisplayColumn')) {
+          return false
+        }
+        const field = panel.fieldList.find(itemField => itemField.columnName === itemAttribute.columnName)
+        if (!field || !field.isUpdateable || !field.isDisplayed) {
+          return false
+        }
+        return true
+      })
+
+      return updateEntity({
+        tableName: panel.tableName,
+        recordUuid: parameters.row.UUID,
+        attributesList: finalAttributes
+      })
+        .then(response => {
+          return response
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+          console.warn('Update Entity Table Error ' + error.code + ': ' + error.message)
+        })
+    },
+    /**
+     * Update record after run process associated with window
+     * @param {object} parameters
+     * @param {string} parameters.parentUuid
+     * @param {string} parameters.containerUuid
+     * @param {object} parameters.tab
+     */
+    updateRecordAfterRunProcess({ dispatch, rootGetters }, parameters) {
+      const recordUuid = rootGetters.getUuid(parameters.containerUuid)
+      // get new values
+      dispatch('getEntity', {
+        parentUuid: parameters.parentUuid,
+        containerUuid: parameters.containerUuid,
+        tableName: parameters.tab.tableName,
+        recordUuid: recordUuid
+      })
+        .then(response => {
+          // update panel
+          if (parameters.tab.isParentTab) {
+            dispatch('notifyPanelChange', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid,
+              newValues: response,
+              isSendToServer: false
+            })
+          }
+          // update row in table
+          dispatch('notifyRowTableChange', {
+            parentUuid: parameters.parentUuid,
+            containerUuid: parameters.containerUuid,
+            row: response,
+            isEdit: false
+          })
+        })
+    },
+    deleteEntity({ dispatch, rootGetters }, parameters) {
+      return new Promise((resolve, reject) => {
+        const panel = rootGetters.getPanel(parameters.containerUuid)
+        const recordUuid = rootGetters.getUuid(parameters.containerUuid)
+
+        deleteEntity({
+          tableName: panel.tableName,
+          recordUuid: recordUuid
+        })
+          .then(response => {
+            const oldRoute = router.app._route
+
+            // refresh record list
+            dispatch('getDataListTab', {
+              parentUuid: parameters.parentUuid,
+              containerUuid: parameters.containerUuid
+            })
+              .then(response => {
+                // if response is void, go to new record
+                if (response.length <= 0) {
+                  dispatch('resetPanelToNew', {
+                    parentUuid: parameters.parentUuid,
+                    containerUuid: parameters.containerUuid,
+                    panelType: 'window',
+                    isNewRecord: true
+                  })
+                } else {
+                  // else display first record of table in panel
+                  router.push({
+                    name: oldRoute.name,
+                    query: {
+                      ...oldRoute.query,
+                      action: response[0].UUID
+                    }
+                  })
+                }
+              })
+            showMessage({
+              message: language.t('data.deleteRecordSuccessful'),
+              type: 'success'
+            })
+
+            // set data log to undo action
+            const fieldId = panel.fieldList.find(itemField => itemField.isKey)
+            dispatch('setDataLog', {
+              containerUuid: parameters.containerUuid,
+              tableName: panel.tableName,
+              recordId: fieldId.value, // TODO: Verify performance with tableName_ID
+              recordUuid: parameters.recordUuid,
+              eventType: 'DELETE'
+            })
+
+            resolve(response)
+          })
+          .catch(error => {
+            showMessage({
+              message: language.t('data.deleteRecordError'),
+              type: 'error'
+            })
+            console.warn('Delete Entity - Error ', error.message, ', Code:', error.code)
+            reject(error)
+          })
+      })
+    },
+    /**
+     * Delete selection records in table
+     * @param {string} containerUuid
+     * @param {string} parentUuid
+     */
+    deleteSelectionDataList({ dispatch, rootGetters }, parameters) {
+      const { parentUuid, containerUuid } = parameters
+      const tab = rootGetters.getTab(parentUuid, containerUuid)
+      var allData = rootGetters.getDataRecordAndSelection(containerUuid)
+      var selectionLength = allData.selection.length
+
+      allData.selection.forEach((record, index) => {
+        // validate if the registry row has no uuid before sending to the server
+        if (isEmptyValue(record.UUID)) {
+          selectionLength = selectionLength - 1
+          console.warn(`This row does not contain a record with UUID`, record)
+          // refresh record list
+          dispatch('getDataListTab', {
+            parentUuid: parentUuid,
+            containerUuid: containerUuid
+          })
+          return
+        }
+        deleteEntity({
+          tableName: tab.tableName,
+          recordUuid: record.UUID
+        })
+          .then(() => {
+            if (tab.isParentTab) {
+              // redirect to create new record
+              const oldRoute = router.app._route
+              if (record.UUID === oldRoute.query.action) {
+                router.push({
+                  name: oldRoute.name,
+                  query: {
+                    ...oldRoute.query,
+                    action: 'create-new'
+                  }
+                })
+                // clear fields with default values
+                dispatch('resetPanelToNew', {
+                  parentUuid: parentUuid,
+                  containerUuid: containerUuid
+                })
+                // delete view with uuid record delete
+                dispatch('tagsView/delView', oldRoute, true)
+              }
+            }
+
+            if ((index + 1) >= selectionLength) {
+              // refresh record list
+              dispatch('getDataListTab', {
+                parentUuid: parentUuid,
+                containerUuid: containerUuid
+              })
+              showMessage({
+                message: language.t('data.deleteRecordSuccessful'),
+                type: 'success'
+              })
+            }
+          })
+      })
+    },
+    undoModifyData({ getters }, parameters) {
+      const { containerUuid, recordUuid } = parameters
+      return rollbackEntity(getters.getDataLog(containerUuid, recordUuid))
+        .then(response => {
+          console.log('rollback successfull', response)
+          return response
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+          console.warn('Rollback Entity error: ' + error.message)
+        })
+    },
+    setDataLog({ commit }, parameters) {
+      commit('setDataLog', {
+        containerUuid: parameters.containerUuid,
+        tableName: parameters.tableName,
+        recordId: parameters.recordId,
+        recordUuid: parameters.recordUuid,
+        eventType: parameters.eventType
+      })
+    },
+    /**
+     * Get data to table in tab
+     * @param {string}  parentUuid, window to search record data
+     * @param {string}  containerUuid, tab to search record data
+     * @param {string}  recordUuid, uuid to search
+     * @param {boolean} isRefreshPanel, if main panel is updated with new response data
+     * @param {boolean} isLoadAllRecords, if main panel is updated with new response data
+     */
+    getDataListTab({ dispatch, rootGetters }, parameters) {
+      const { parentUuid, containerUuid, recordUuid, isRefreshPanel = false, isLoadAllRecords = false, columnName, value } = parameters
+      const tab = rootGetters.getTab(parentUuid, containerUuid)
+
+      var parsedQuery = tab.query
+      if (!isEmptyValue(parsedQuery) && parsedQuery.includes('@')) {
+        parsedQuery = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: tab.query
+        }, true)
+      }
+
+      var parsedWhereClause = tab.whereClause
+      if (!isEmptyValue(parsedWhereClause) && parsedWhereClause.includes('@')) {
+        parsedWhereClause = parseContext({
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          value: tab.whereClause
+        }, true)
+      }
+      var conditions = []
+      if (tab.isParentTab && !isEmptyValue(tab.tableName) && !isEmptyValue(value)) {
+        conditions.push({
+          columnName: columnName,
+          value: value
+        })
+      }
+      return dispatch('getObjectListFromCriteria', {
+        parentUuid: tab.parentUuid,
+        containerUuid: containerUuid,
+        tableName: tab.tableName,
+        query: parsedQuery,
+        whereClause: parsedWhereClause,
+        orderByClause: tab.orderByClause,
+        // TODO: evaluate if overwrite values to conditions
+        conditions: isLoadAllRecords ? [] : conditions,
+        isParentTab: tab.isParentTab
+      })
+        .then(response => {
+          if (isRefreshPanel && !isEmptyValue(recordUuid) && recordUuid !== 'create-new') {
+            const newValues = response.find(itemData => itemData.UUID === recordUuid)
+            if (newValues) {
+              // update fields with values obtained from the server
+              dispatch('notifyPanelChange', {
+                parentUuid: tab.parentUuid,
+                containerUuid: containerUuid,
+                newValues: newValues,
+                isSendToServer: false
+              })
+            } else {
+              // this record is missing (Deleted or the query does not include it)
+              dispatch('resetPanelToNew', {
+                parentUuid: tab.parentUuid,
+                containerUuid: containerUuid
+              })
+            }
+          }
+          return response
+        })
+        .catch(error => {
+          return error
+        })
+    },
+    /**
+     * Get references asociate to record
+     * @param {string} parameters.parentUuid
+     * @param {string} parameters.containerUuid
+     * @param {string} parameters.recordUuid
+     */
+    getReferencesListFromServer({ commit, rootGetters }, parameters) {
+      // TODO: check if you get better performance search only the window and get the current tab
+      const tab = rootGetters.getTab(parameters.parentUuid, parameters.containerUuid)
+      return new Promise((resolve, reject) => {
+        getReferencesList({
+          windowUuid: parameters.parentUuid,
+          tableName: tab.tableName,
+          recordUuid: parameters.recordUuid
+        })
+          .then(response => {
+            const referencesList = response.getReferencesList().map(item => {
+              return {
+                uuid: item.getUuid(),
+                windowUuid: item.getWindowuuid(),
+                displayName: item.getDisplayname(),
+                tableName: item.getTablename(),
+                whereClause: item.getWhereclause(),
+                recordCount: item.getRecordcount(),
+                recordUuid: parameters.recordUuid,
+                type: 'reference'
+              }
+            })
+            const references = {
+              windowUuid: parameters.parentUuid,
+              recordUuid: parameters.recordUuid,
+              recordCount: response.getRecordcount(),
+              referencesList: referencesList,
+              nextPageToken: response.getNextPageToken()
+            }
+            commit('addReferencesList', references)
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    getWindowByUuid({ dispatch, commit }, parameters) {
+      parameters.routes.forEach((routeItem) => {
+        if (routeItem.meta && routeItem.meta.uuid === parameters.windowUuid) {
+          commit('addWindowRoute', routeItem)
+        } else if (routeItem.meta && routeItem.meta.childs && routeItem.meta.childs.length > 0) {
+          dispatch('getWindowByUuid', { routes: routeItem.meta.childs, windowUuid: parameters.windowUuid })
+        }
+      })
+    },
+    setWindowOldRoute({ commit }, oldPath = { path: '', fullPath: '', query: {}}) {
+      commit('setWindowOldRoute', oldPath)
+    }
+  },
+  getters: {
+    getInCreate: (state) => (containerUuid) => {
+      return state.inCreate.find(item => item.containerUuid === containerUuid)
+    },
+    getReferencesList: (state) => (windowUuid, recordUuid) => {
+      return (state.references.find(item => item.windowUuid === windowUuid && item.recordUuid === recordUuid))
+    },
+    getWindowRoute: (state) => (windowUuid) => {
+      if (state.windowRoute && state.windowRoute.meta && state.windowRoute.meta.uuid === windowUuid) {
+        return state.windowRoute
+      }
+    },
+    getDataLog: (state) => (containerUuid, recordUuid) => {
+      const current = state.dataLog
+      if (current.containerUuid === containerUuid &&
+        ((current.recordUuid === recordUuid) ||
+        (current.eventType === 'DELETE' && recordUuid === 'create-new'))) {
+        return current
+      }
+      return undefined
+    }
+  }
+}
+
+export default windowControl
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index aeb5ee53..5999a43c 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,38 +1,5 @@
-import { asyncRoutes, constantRoutes } from '@/router'
-
-/**
- * Use meta.role to determine if the current user has permission
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
-  } else {
-    return true
-  }
-}
-
-/**
- * Filter asynchronous routing tables by recursion
- * @param routes asyncRoutes
- * @param roles
- */
-export function filterAsyncRoutes(routes, roles) {
-  const res = []
-
-  routes.forEach(route => {
-    const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
-      if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
-      }
-      res.push(tmp)
-    }
-  })
-
-  return res
-}
+import { constantRoutes } from '@/router'
+import { loadMainMenu } from '@/router/modules/ADempiere/menu'
 
 const state = {
   routes: [],
@@ -47,16 +14,12 @@ const mutations = {
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
+  generateRoutes({ commit }) {
     return new Promise(resolve => {
-      let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
-      } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
-      commit('SET_ROUTES', accessedRoutes)
-      resolve(accessedRoutes)
+      return loadMainMenu().then(menu => {
+        commit('SET_ROUTES', menu)
+        resolve(menu)
+      }).catch(err => console.log(err))
     })
   }
 }
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 3e2c1703..13ba43ec 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -5,12 +5,21 @@ const state = {
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
-    state.visitedViews.push(
-      Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
-      })
-    )
+    if (view.name === 'Report Viewer') {
+      if (state.visitedViews.some(v => v.params && v.params.processId === view.params.processId)) return
+      state.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
+    } else {
+      if (state.visitedViews.some(v => v.name === view.name)) return
+      state.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta.title || 'no-name'
+        })
+      )
+    }
   },
   ADD_CACHED_VIEW: (state, view) => {
     if (state.cachedViews.includes(view.name)) return
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index d2b2e67a..8165888b 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,13 +1,19 @@
-import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { login, logout, getInfo, getSessionInfo, changeRole } from '@/api/user'
+import { convertRoleFromGRPC } from '@/utils/ADempiere'
+import { getToken, setToken, removeToken, getCurrentRole, setCurrentRole, removeCurrentRole } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
+import { showMessage, convertMapToArrayPairs } from '@/utils/ADempiere'
 
 const state = {
   token: getToken(),
   name: '',
   avatar: '',
   introduction: '',
-  roles: []
+  rol: {}, // info current rol
+  rolesList: [],
+  roles: [],
+  isSession: false,
+  sessionInfo: {}
 }
 
 const mutations = {
@@ -25,60 +31,143 @@ const mutations = {
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_ROLES_LIST: (state, payload) => {
+    state.rolesList = payload
+  },
+  SET_ROL: (state, rol) => {
+    state.rol = rol
+  },
+  setIsSession(state, payload) {
+    state.isSession = payload
+  },
+  setSessionInfo(state, payload) {
+    state.sessionInfo = payload
   }
 }
 
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { userName, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
+      login({ userName: userName.trim(), password: password })
+        .then(response => {
+          var data = {
+            id: response.getId(),
+            token: response.getUuid(),
+            name: response.getUserinfo().getName(),
+            avatar: 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4',
+            currentRole: convertRoleFromGRPC(response.getRole()),
+            isProcessed: response.getProcessed()
+          }
+
+          commit('SET_TOKEN', data.token)
+          commit('SET_ROL', data.currentRole)
+
+          setToken(data.token)
+          setCurrentRole(data.currentRole.uuid)
+          resolve(data)
+        }).catch(error => {
+          reject(error)
+        })
     })
   },
+  // session info
+  getInfo({ commit, dispatch }, sessionUuid = null) {
+    if (!sessionUuid) {
+      sessionUuid = getToken()
+    }
+    return getSessionInfo(sessionUuid)
+      .then(response => {
+        commit('setIsSession', true)
+        commit('setSessionInfo', {
+          id: response.getId(),
+          uuid: response.getUuid(),
+          name: response.getName(),
+          isProcessed: response.getProcessed()
+        })
 
+        const userInfo = response.getUserinfo()
+        commit('SET_NAME', userInfo.getName())
+        commit('SET_INTRODUCTION', userInfo.getDescription())
+
+        var defaultContext = convertMapToArrayPairs({
+          toConvert: response.getDefaultcontextMap()
+        })
+        // TODO: return request #Date as long data type Date (5)
+        // join column names without duplicating it
+        defaultContext = Array.from(new Set([
+          ...defaultContext,
+          ...[{
+            columnName: '#Date',
+            value: new Date()
+          }]
+        ]))
+        // set multiple context
+        dispatch('setMultipleContext', defaultContext, {
+          root: true
+        })
+
+        const sessionResponse = {
+          name: response.getName(),
+          defaultContext: defaultContext
+        }
+        return sessionResponse
+      })
+      .catch(error => {
+        console.warn('Error gettin context', error.message)
+      })
+      .finally(() => {
+        dispatch('getUserInfoValue', sessionUuid)
+      })
+  },
   // get user info
-  getInfo({ commit, state }) {
+  getUserInfoValue({ commit }, sessionUuid = null) {
+    if (!sessionUuid) {
+      sessionUuid = getToken()
+    }
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
-
-        if (!data) {
+      getInfo(sessionUuid).then(response => {
+        if (!response) {
           reject('Verification failed, please Login again.')
         }
-
-        const { roles, name, avatar, introduction } = data
-
         // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
+        if (!response.rolesList || response.rolesList.length <= 0) {
           reject('getInfo: roles must be a non-null array!')
         }
 
-        commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        commit('SET_INTRODUCTION', introduction)
-        resolve(data)
+        var rol = response.rolesList.find(itemRol => {
+          return itemRol.uuid === getCurrentRole()
+        })
+
+        commit('SET_ROLES_LIST', response.rolesList)
+        commit('SET_ROLES', response.roles)
+        commit('SET_ROL', rol)
+        commit('SET_AVATAR', response.avatar)
+        resolve(response)
       }).catch(error => {
         reject(error)
       })
     })
   },
-
   // user logout
-  logout({ commit, state }) {
+  logout({ commit, state, dispatch }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
+        commit('setIsSession', false)
+        dispatch('clearProcessControl', null, {
+          root: true
+        })
+        dispatch('dictionaryResetCache', null, {
+          root: true
+        })
+
+        // dispatch('tagsView/delAllViews', null, {root:true})
         removeToken()
+        removeCurrentRole()
         resetRouter()
         resolve()
       }).catch(error => {
@@ -86,7 +175,6 @@ const actions = {
       })
     })
   },
-
   // remove token
   resetToken({ commit }) {
     return new Promise(resolve => {
@@ -96,27 +184,89 @@ const actions = {
       resolve()
     })
   },
-
   // dynamically modify permissions
-  changeRoles({ commit, dispatch }, role) {
-    return new Promise(async resolve => {
-      const token = role + '-token'
-
-      commit('SET_TOKEN', token)
-      setToken(token)
-
-      const { roles } = await dispatch('getInfo')
-
-      resetRouter()
-
-      // generate accessible routes map based on roles
-      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
-
-      // dynamically add accessible routes
-      router.addRoutes(accessRoutes)
-
-      resolve()
+  changeRoles({ commit, state, dispatch }, roleUuid) {
+    /**
+     * @param {string} attributes.sessionUuid
+     * @param {string} attributes.roleUuid
+     * @param {string} attributes.organizationUuid
+     * @param {string} attributes.warehouseUuid
+     */
+    return changeRole({
+      sessionUuid: getToken(),
+      roleUuid: roleUuid,
+      organizationUuid: null,
+      warehouseUuid: null
     })
+      .then(response => {
+        var rol = convertRoleFromGRPC(response.getRole())
+        commit('SET_ROL', rol)
+        setCurrentRole(rol.uuid)
+        commit('SET_TOKEN', response.getUuid())
+        setToken(response.getUuid())
+
+        // Update user info and context associated with session
+        dispatch('getInfo', response.getUuid())
+          .then(() => {
+            var route = router.app._route
+            var selectedTag = {
+              fullPath: route.fullPath,
+              hash: route.hash,
+              matched: route.matched,
+              meta: route.meta,
+              name: route.name,
+              params: route.params,
+              path: route.path,
+              query: route.query,
+              title: route.meta.title
+            }
+            dispatch('tagsView/delOthersViews', selectedTag, { root: true })
+          })
+        dispatch('clearProcessControl', null, {
+          root: true
+        })
+        dispatch('dictionaryResetCache', null, {
+          root: true
+        })
+
+        return {
+          ...rol,
+          sessionUuid: response.getUuid()
+        }
+      })
+      .catch(error => {
+        showMessage({
+          message: error.message,
+          type: 'error'
+        })
+        console.warn('Error change role:' + error.message + '. Code: ' + error.code)
+      })
+    //  return new Promise(async resolve => {
+    //  const token = role
+    //  commit('SET_TOKEN', token)
+    //  commit('SET_CURRENTROLE',)
+    //  setToken(token)
+    //  const { roles } = await dispatch('getInfo')
+
+    //  generate accessible routes map based on   roles
+    //  const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+
+    //  dynamically add accessible routes
+    //  router.addRoutes(accessRoutes)
+    // })
+  }
+}
+
+const getters = {
+  getRoles: (state) => {
+    return state.rolesList
+  },
+  // current rol info
+  getRol: (state) => {
+    return state.rol
+  },
+  getIsSession: (state) => {
+    return state.isSession
   }
 }
 
@@ -124,5 +274,6 @@ export default {
   namespaced: true,
   state,
   mutations,
-  actions
+  actions,
+  getters
 }
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3dad4c39..5ad6c04e 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -2,13 +2,13 @@
 
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left .1s;
     margin-left: $sideBarWidth;
     position: relative;
   }
 
   .sidebar-container {
-    transition: width 0.28s;
+    transition: width 0.1s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
     height: 100%;
@@ -66,6 +66,8 @@
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
+      overflow: hidden;
+      text-overflow: ellipsis;
       &:hover {
         background-color: $menuHover !important;
       }
@@ -77,6 +79,8 @@
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
+      overflow: hidden;
+      text-overflow: ellipsis;
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 
@@ -150,14 +154,14 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform .1s;
       width: $sideBarWidth !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
-        transition-duration: 0.3s;
+        transition-duration: 0.1s;
         transform: translate3d(-$sideBarWidth, 0, 0);
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19c27c1..c49bec4f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -19,7 +19,7 @@ $menuHover:#263445;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/src/utils/ADempiere/auth.js b/src/utils/ADempiere/auth.js
new file mode 100644
index 00000000..55fdcb17
--- /dev/null
+++ b/src/utils/ADempiere/auth.js
@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const roleKey = 'roleUuid'
+
+export function setCurrentRole(currentRole) {
+  return Cookies.set(roleKey, currentRole)
+}
+
+export function getCurrentRole() {
+  return Cookies.get(roleKey)
+}
+
+export function removeCurrentRole() {
+  return Cookies.remove(roleKey)
+}
diff --git a/src/utils/ADempiere/evaluator.js b/src/utils/ADempiere/evaluator.js
new file mode 100644
index 00000000..fd86d8c6
--- /dev/null
+++ b/src/utils/ADempiere/evaluator.js
@@ -0,0 +1,246 @@
+// This class is used for evaluate a conditional
+// format := {expression} [{logic} {expression}]<br>
+// expression := @{context}@{operand}{value} or @{context}@{operand}{value}<br>
+// logic := {|}|{&}<br>
+// context := any global or window context <br>
+// value := strings or numbers<br>
+// logic operators	:= AND or OR with the previous result from left to right <br>
+// operand := eq{=}, gt{&gt;}, le{&lt;}, not{~^!} <br>
+// Examples: <br>
+// @AD_Table_ID@=14 | @Language@!GERGER <br>
+// @PriceLimit@>10 | @PriceList@>@PriceActual@<br>
+// @Name@>J<br>
+// Strings may be in single quotes (optional)
+class evaluator {
+  /**
+   * Evaluate logic's
+   * @param {string} parentUuid Parent (Window / Process / Smart Browser)
+   */
+  static evaluateLogic(objectToEvaluate) {
+    var defaultUndefined = false
+    if (objectToEvaluate.type === 'displayed') {
+      defaultUndefined = true
+    }
+    // empty logic
+    if (objectToEvaluate.logic === undefined ||
+      objectToEvaluate.logic === null ||
+      objectToEvaluate.logic.trim() === '') {
+      return defaultUndefined
+    }
+    var st = objectToEvaluate.logic.trim().replace('\n', '')
+    st = st.replace('|', '~')
+    var expr = /(~|&)/
+    var stList = st.split(expr)
+    var it = stList.length
+
+    if (((it / 2) - ((it + 1) / 2)) === 0) {
+      console.info(
+        'Logic does not comply with format "<expression> [<logic> <expression>]"' +
+        '  -->  ' + objectToEvaluate.logic
+      )
+      return defaultUndefined
+    }
+
+    var retValue = null
+    var logOp = ''
+    stList.forEach(function(element) {
+      if (element === '~' || element === '&') {
+        logOp = element
+      } else if (retValue === null) {
+        retValue = evaluator.evaluateLogicTuples({
+          ...objectToEvaluate,
+          conditional: element
+        })
+      } else {
+        if (logOp === '&' && logOp !== '') {
+          retValue = retValue & evaluator.evaluateLogicTuples({
+            ...objectToEvaluate,
+            conditional: element
+          })
+        } else if (logOp === '~' && logOp !== '') {
+          retValue = retValue | evaluator.evaluateLogicTuples({
+            ...objectToEvaluate,
+            conditional: element
+          })
+        } else {
+          console.info("Logic operant '|' or '&' expected  -->  " + objectToEvaluate.logic)
+          return defaultUndefined
+        }
+      }
+    })
+    return Boolean(retValue)
+  } //  evaluateLogic
+
+  /**
+   * Evaluate Logic Tuples
+   * @param {object} objectToEvaluate Complete object
+   * @param {string} logic If is displayed or not (mandatory and readonly)
+   * @return {boolean}
+   */
+  static evaluateLogicTuples(objectToEvaluate) {
+    var _defaultUndefined = false
+    if (objectToEvaluate.type === 'displayed') {
+      _defaultUndefined = true
+    }
+    var logic = objectToEvaluate.conditional
+    // not context info, not logic
+    if (logic === undefined) {
+      return _defaultUndefined
+    }
+    var expr = /^(['"@#$a-zA-Z0-9\-_\s]){0,}((!*={1})|(!{1})|(<{1})|(>{1}))([\s"'@#$a-zA-Z0-9\-_]){0,}$/i
+    var st = expr.test(logic)
+
+    if (!st) {
+      console.info(
+        ".Logic tuple does not comply with format '@context@=value' where operand" +
+        " could be one of '=!^><'  -->  " + logic
+      )
+      return _defaultUndefined
+    }
+    expr = /(!{1}|={1})/
+    st = logic.split(expr)
+    if (st.length === 1) {
+      expr = /(<{1})/
+      st = logic.split(expr)
+    }
+    if (st.length === 1) {
+      expr = /(>)/
+      st = logic.split(expr)
+    }
+    // First Part (or column name)
+    var first = st[0].trim()
+    var firstEval = first
+    expr = /@/
+    if (expr.test(first)) {
+      first = first.replace(/@/g, '').trim()
+      var isGlobal = first.startsWith('#')
+      var isCountable = first.startsWith('$')
+      var value = objectToEvaluate.context.getContext({
+        parentUuid: (isGlobal || isCountable) ? '' : objectToEvaluate.parentUuid,
+        containerUuid: (isGlobal || isCountable) ? '' : objectToEvaluate.containerUuid,
+        columnName: first
+      })
+      // in context exists this column name
+      if (value === null || value === undefined) {
+        console.info(
+          '.The column ' + first + ' not exists in context.'
+        )
+        return _defaultUndefined
+      }
+      firstEval = value	// replace with it's value
+    }
+
+    if (firstEval === null || firstEval === undefined) {
+      return _defaultUndefined
+    }
+    if (typeof firstEval === 'string') {
+      firstEval = firstEval.replace(/['"]/g, '').trim()	// strip ' and "
+    }
+
+    //	Operator
+    var operand = st[1]
+    //	Second Part
+    var second = st[2].trim()
+    var secondEval = second.trim()
+    if (expr.test(second)) {
+      second = second.replace(/@/g, ' ').trim() // strip tag
+      secondEval = objectToEvaluate.context.getContext({
+        parentUuid: (isGlobal || isCountable) ? null : objectToEvaluate.parentUuid,
+        containerUuid: (isGlobal || isCountable) ? null : objectToEvaluate.containerUuid,
+        columnName: first
+      })	//	replace with it's value
+    }
+    if (typeof secondEval === 'string') {
+      secondEval = secondEval.replace(/['"]/g, '').trim()	//	strip ' and " for string values
+    }
+
+    //	Handling of ID compare (null => 0)
+    if (first.includes('_ID') && firstEval.length === 0) {
+      firstEval = '0'
+    }
+    if (second.includes('_ID') && secondEval.length === 0) {
+      secondEval = '0'
+    }
+
+    //	Logical Comparison
+    var result = this.evaluateLogicTuple(firstEval, operand, secondEval)
+
+    return result
+  }
+
+  /**
+   * Evuale logic Tuple
+   * @param {string|number} value1 Value in Context
+   * @param {string} operand Comparison
+   * @param {string|number} value2 Value in Logic
+   * @return {boolean}
+   */
+  static evaluateLogicTuple(value1, operand, value2) {
+    // Convert value 1 string value to boolean value
+    if (value1 === 'Y') {
+      value1 = true
+    } else if (value1 === 'N') {
+      value1 = false
+    }
+
+    // Convert value 2 string value to boolean value
+    if (value2 === 'Y') {
+      value2 = true
+    } else if (value2 === 'N') {
+      value2 = false
+    }
+
+    if (value1 == null || operand == null || value2 == null) {
+      return false
+    }
+    if (operand === '=') {
+      return value1 === value2
+    } else if (operand === '<') {
+      return value1 < value2
+    } else if (operand === '>') {
+      return value1 > value2
+    } else {
+      //	interpreted as not
+      return value1 !== value2
+    }
+  }
+
+  /**
+   * Parse Depends or relations
+   * @param {string} parseString
+   * @return {array}
+   */
+  static parseDepends(parseString) {
+    var listFields = []
+    if (parseString === null || parseString === undefined) {
+      // return array empty
+      return listFields
+    }
+
+    let string = parseString.replace('@SQL=', '')
+    //  while we have variables
+
+    while (string.includes('@')) {
+      let pos = string.indexOf('@')
+      // remove first @: @ExampleColumn@ = ExampleColumn@
+      string = string.substring(pos + 1)
+
+      pos = string.indexOf('@')
+      if (pos === -1) {
+        continue
+      }	//	error number of @@ not correct
+
+      // remove second @: ExampleColumn@ = ExampleColumn
+      const value = string.substring(0, pos)
+
+      // delete secodn columnName and @
+      string = string.substring(pos + 1)
+
+      // add column name in array
+      listFields.push(value)
+    }
+    return listFields
+  }
+}
+
+export default evaluator
diff --git a/src/utils/ADempiere/globalMethods.js b/src/utils/ADempiere/globalMethods.js
new file mode 100644
index 00000000..876fc9fe
--- /dev/null
+++ b/src/utils/ADempiere/globalMethods.js
@@ -0,0 +1,2 @@
+
+export { isEmptyValue, zeroPad } from '@/utils/ADempiere/valueUtil.js'
diff --git a/src/utils/ADempiere/index.js b/src/utils/ADempiere/index.js
new file mode 100644
index 00000000..c8ee2898
--- /dev/null
+++ b/src/utils/ADempiere/index.js
@@ -0,0 +1,720 @@
+import REFERENCES, { FIELD_NOT_SHOWED } from '@/components/ADempiere/Field/references'
+import { FIELD_DISPLAY_SIZES, DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import evaluator from '@/utils/ADempiere/evaluator.js'
+import * as valueUtil from '@/utils/ADempiere/valueUtil.js'
+
+/**
+ * Determinate if field is displayed
+ * @param {boolean} field.isActive
+ * @param {boolean} field.isDisplayed
+ * @param {boolean} field.isDisplayedFromLogic
+ * @param {boolean} field.isQueryCriteria
+ * @param {string}  field.panelType
+ * @returns {boolean}
+ */
+export function fieldIsDisplayed(field) {
+  // if is Advanced Query
+  if (field.panelType === 'table') {
+    return field.isDisplayed && field.isDisplayedFromLogic
+  }
+  const isBrowserDisplayed = field.isQueryCriteria // browser query criteria
+  const isWindowDisplayed = field.isDisplayed && field.isDisplayedFromLogic // window, process and report, browser result
+  const isDisplayedView = (field.panelType === 'browser' && isBrowserDisplayed) || (field.panelType !== 'browser' && isWindowDisplayed)
+
+  //  Verify for displayed and is active
+  return field.isActive && isDisplayedView
+}
+
+/**
+ * Converted gRPC attributes to object
+ * @param {object}  fieldGRPC
+ * @param {object}  moreAttributes, additional attributes
+ * @param {boolean} typeRange, indicate if this field is a range used as _To
+ */
+export function convertField(fieldGRPC, moreAttributes = {}, typeRange = false) {
+  var group = {}
+  var isShowedFromUser = false
+  // verify if it no overwrite value with ...moreAttributes
+  if (moreAttributes.isShowedFromUser) {
+    isShowedFromUser = moreAttributes.isShowedFromUser
+  }
+
+  try {
+    group = {
+      name: fieldGRPC.getFieldgroup().getName(),
+      fieldGroupType: fieldGRPC.getFieldgroup().getFieldgrouptype()
+    }
+  } catch (e) {
+    group = {
+      name: '',
+      fieldGroupType: ''
+    }
+  }
+
+  var reference = fieldGRPC.getReference()
+  var zoomWindowList = []
+  var referenceValue = {
+    tableName: '',
+    keyColumnName: '',
+    displayColumnName: '',
+    query: '',
+    parsedQuery: '',
+    directQuery: '',
+    parsedDirectQuery: '',
+    validationCode: '',
+    zoomWindowList: zoomWindowList
+  }
+  if (reference) {
+    if (reference.getWindowsList()) {
+      zoomWindowList = reference.getWindowsList().map(zoomWindow => {
+        return {
+          id: zoomWindow.getId(),
+          uuid: zoomWindow.getUuid(),
+          name: zoomWindow.getName(),
+          description: zoomWindow.getDescription(),
+          isSOTrx: zoomWindow.getIssotrx(),
+          isActive: zoomWindow.getIsactive()
+        }
+      })
+    }
+    referenceValue = {
+      tableName: reference.getTablename(),
+      keyColumnName: reference.getKeycolumnname(),
+      displayColumnName: reference.getDisplaycolumnname(),
+      query: reference.getQuery(),
+      parsedQuery: reference.getQuery(),
+      directQuery: reference.getDirectquery(),
+      parsedDirectQuery: reference.getDirectquery(),
+      validationCode: reference.getValidationcode(),
+      zoomWindowList: zoomWindowList
+    }
+  }
+
+  var componentReference = evalutateTypeField(fieldGRPC.getDisplaytype(), true)
+
+  var parsedDefaultValue = fieldGRPC.getDefaultvalue()
+  if (String(parsedDefaultValue).includes('@')) {
+    if (String(parsedDefaultValue).includes('@SQL=')) {
+      parsedDefaultValue.replace('@SQL=', '')
+    }
+    parsedDefaultValue = parseContext({
+      ...moreAttributes,
+      columnName: fieldGRPC.getColumnname(),
+      value: parsedDefaultValue
+    })
+  }
+  parsedDefaultValue = parsedValueComponent({
+    fieldType: componentReference.type,
+    value: parsedDefaultValue,
+    referenceType: componentReference.alias[0],
+    isMandatory: fieldGRPC.getIsmandatory()
+  })
+
+  var parsedDefaultValueTo = fieldGRPC.getDefaultvalueto()
+  if (String(parsedDefaultValueTo).includes('@')) {
+    parsedDefaultValueTo = parseContext({
+      ...moreAttributes,
+      columnName: fieldGRPC.getColumnname(),
+      value: fieldGRPC.getDefaultvalueto()
+    })
+  }
+  parsedDefaultValueTo = parsedValueComponent({
+    fieldType: componentReference.type,
+    value: parsedDefaultValueTo,
+    referenceType: componentReference.alias[0],
+    isMandatory: fieldGRPC.getIsmandatory()
+  })
+
+  var field = {
+    ...moreAttributes,
+    // base attributes
+    id: fieldGRPC.getId(),
+    uuid: fieldGRPC.getUuid(),
+    name: fieldGRPC.getName(),
+    description: fieldGRPC.getDescription(),
+    help: fieldGRPC.getHelp(),
+    columnName: fieldGRPC.getColumnname(),
+    isActive: fieldGRPC.getIsactive(),
+    // displayed attributes
+    fieldGroup: group,
+    displayType: fieldGRPC.getDisplaytype(),
+    componentPath: componentReference.type,
+    isSupport: componentReference.support,
+    referenceType: componentReference.alias[0],
+    isFieldOnly: fieldGRPC.getIsfieldonly(),
+    isRange: fieldGRPC.getIsrange(),
+    isSameLine: fieldGRPC.getIssameline(),
+    isEncrypted: fieldGRPC.getIsencrypted(), // passswords fields
+    sequence: fieldGRPC.getSequence(),
+    seqNoGrid: fieldGRPC.getSeqnogrid(),
+    displayColumn: undefined, // link to value from selects and table
+    // value attributes
+    formatPattern: fieldGRPC.getFormatpattern(),
+    VFormat: fieldGRPC.getVformat(),
+    value: String(parsedDefaultValue).trim() === '' ? undefined : parsedDefaultValue,
+    defaultValue: fieldGRPC.getDefaultvalue(),
+    oldValue: parsedDefaultValue,
+    valueTo: parsedDefaultValueTo,
+    parsedDefaultValue: parsedDefaultValue,
+    defaultValueTo: fieldGRPC.getDefaultvalueto(),
+    parsedDefaultValueTo: parsedDefaultValueTo,
+    fieldLength: fieldGRPC.getFieldlength(),
+    valueMin: fieldGRPC.getValuemin(),
+    valueMax: fieldGRPC.getValuemax(),
+    //
+    isIdentifier: fieldGRPC.getIsidentifier(),
+    isParent: fieldGRPC.getIsparent(),
+    isKey: fieldGRPC.getIskey(),
+    isSelectionColumn: fieldGRPC.getIsselectioncolumn(),
+    isUpdateable: fieldGRPC.getIsupdateable(),
+    isAlwaysUpdateable: fieldGRPC.getIsalwaysupdateable(),
+    //
+    isDisplayed: fieldGRPC.getIsdisplayed(),
+    isMandatory: fieldGRPC.getIsmandatory(),
+    isReadOnly: fieldGRPC.getIsreadonly(),
+    isDisplayedFromLogic: fieldGRPC.getIsdisplayed(),
+    isReadOnlyFromLogic: undefined,
+    isMandatoryFromLogic: undefined,
+    // browser attributes
+    isQueryCriteria: fieldGRPC.getIsquerycriteria(),
+    isInfoOnly: fieldGRPC.getIsinfoonly(),
+    //
+    callout: fieldGRPC.getCallout(),
+    displayLogic: fieldGRPC.getDisplaylogic(),
+    mandatoryLogic: fieldGRPC.getMandatorylogic(),
+    readOnlyLogic: fieldGRPC.getReadonlylogic(),
+    parentFieldsList: getParentFields(fieldGRPC),
+    dependentFieldsList: [],
+    reference: referenceValue,
+    contextInfo: convertContextInfoFromGRPC(
+      fieldGRPC.getContextinfo()
+    ),
+    // TODO: Add support on server
+    // app attributes
+    isShowedFromUser: isShowedFromUser,
+    isFixedTableColumn: false
+  }
+  field.isShowedTableFromUser = field.isDisplayed && field.isDisplayedFromLogic
+
+  // evaluate simple logics without context
+  if (field.displayLogic.trim() !== '' && !field.displayLogic.includes('@')) {
+    field.isDisplayedFromLogic = evaluator.evaluateLogic({
+      type: 'displayed',
+      logic: field.displayLogic
+    })
+  }
+  if (field.mandatoryLogic.trim() !== '' && !field.mandatoryLogic.includes('@')) {
+    field.isMandatoryFromLogic = evaluator.evaluateLogic({
+      logic: field.mandatoryLogic
+    })
+  }
+  if (field.readOnlyLogic.trim() !== '' && !field.readOnlyLogic.includes('@')) {
+    field.isReadOnlyFromLogic = evaluator.evaluateLogic({
+      logic: field.readOnlyLogic
+    })
+  }
+
+  // Sizes from panel and groups
+  field.sizeFieldFromType = FIELD_DISPLAY_SIZES.find(item => {
+    return item.type === field.componentPath
+  })
+  if (field.sizeFieldFromType === undefined) {
+    console.warn('Field size no found:', field.name, 'type:', field.componentPath)
+    field.sizeFieldFromType = {
+      type: field.componentPath,
+      size: DEFAULT_SIZE
+    }
+  }
+
+  // Overwrite some values
+  if (typeRange) {
+    field.uuid = field.uuid + '_To'
+    field.columnName = field.columnName + '_To'
+    field.name = field.name + ' To'
+    field.value = parsedDefaultValueTo
+    field.defaultValue = field.defaultValueTo
+    field.parsedDefaultValue = field.parsedDefaultValueTo
+  }
+  // field.value = field.value === undefined ? null : field.value
+
+  // hidden field type button
+  const notShowedField = FIELD_NOT_SHOWED.find(itemField => {
+    if (field.displayType === itemField.id) {
+      return true
+    }
+  })
+  if (notShowedField) {
+    field.isDisplayedFromLogic = false
+    field.isDisplayed = false
+  }
+
+  return field
+}
+
+// Default template for injected fields
+export function getFieldTemplate(attributesOverwrite) {
+  var group = {
+    name: '',
+    fieldGroupType: ''
+  }
+  var zoomWindowList = []
+  var referenceValue = {
+    tableName: '',
+    keyColumnName: '',
+    displayColumnName: '',
+    query: '',
+    parsedQuery: '',
+    directQuery: '',
+    parsedDirectQuery: '',
+    validationCode: '',
+    zoomWindowList: zoomWindowList
+  }
+  var newField = {
+    id: 0,
+    uuid: '',
+    name: '',
+    description: '',
+    help: '',
+    columnName: '',
+    fieldGroup: group,
+    displayType: 10,
+    componentPath: 'FieldButton',
+    referenceType: 'Button',
+    isFieldOnly: false,
+    isRange: false,
+    isSameLine: false,
+    sequence: 0,
+    seqNoGrid: 0,
+    isIdentifier: 0,
+    isKey: false,
+    isSelectionColumn: false,
+    isUpdateable: true,
+    formatPattern: undefined,
+    VFormat: undefined,
+    value: undefined,
+    valueTo: undefined,
+    defaultValue: undefined,
+    parsedDefaultValue: undefined,
+    defaultValueTo: undefined,
+    parsedDefaultValueTo: undefined,
+    valueMin: undefined,
+    valueMax: undefined,
+    //
+    isDisplayed: false,
+    isActive: true,
+    isMandatory: false,
+    isReadOnly: false,
+    isDisplayedFromLogic: false,
+    isReadOnlyFromLogic: false,
+    isMandatoryFromLogic: false,
+    // browser attributes
+    callout: undefined,
+    isQueryCriteria: false,
+    displayLogic: undefined,
+    mandatoryLogic: undefined,
+    readOnlyLogic: undefined,
+    parentFieldsList: undefined,
+    dependentFieldsList: [],
+    reference: referenceValue,
+    contextInfo: undefined,
+    isShowedFromUser: false,
+    isFixedTableColumn: false,
+    sizeFieldFromType: {
+      type: 'Button',
+      size: DEFAULT_SIZE
+    }
+  }
+  return Object.assign(newField, attributesOverwrite)
+}
+
+/**
+ * Evaluate by the ID and name of the reference to call the component type
+ * @param {integer} displayTypeId, received from data
+ * @param {boolean} isAllInfo
+ * @return string type, assigned value to folder after evaluating the parameter
+ */
+export function evalutateTypeField(displayTypeId, isAllInfo = false) {
+  var component = REFERENCES.find(reference => displayTypeId === reference.id)
+  if (isAllInfo) {
+    return component
+  }
+  return component.type
+}
+
+export function getParentFields(fieldGRPC) {
+  var parentFields = []
+  //  For Display logic
+  if (fieldGRPC.getDisplaylogic()) {
+    parentFields = Array.from(new Set([
+      ...parentFields,
+      ...evaluator.parseDepends(fieldGRPC.getDisplaylogic())
+    ]))
+  }
+  //  For Mandatory Logic
+  if (fieldGRPC.getMandatorylogic()) {
+    parentFields = Array.from(new Set([
+      ...parentFields,
+      ...evaluator.parseDepends(fieldGRPC.getMandatorylogic())
+    ]))
+  }
+  //  For Read Only Logic
+  if (fieldGRPC.getReadonlylogic()) {
+    parentFields = Array.from(new Set([
+      ...parentFields,
+      ...evaluator.parseDepends(fieldGRPC.getReadonlylogic())
+    ]))
+  }
+  //  For Default Value
+  if (fieldGRPC.getDefaultvalue()) {
+    parentFields = Array.from(new Set([
+      ...parentFields,
+      ...evaluator.parseDepends(fieldGRPC.getDefaultvalue())
+    ]))
+  }
+  return parentFields
+}
+
+/**
+ * Parse Context String
+ * @param {object} context
+ *  - value: (REQUIRED) String to parsing
+ *  - parentUuid: (REQUIRED from Window) UUID Window
+ *  - containerUuid: (REQUIRED) UUID Tab, Process, SmartBrowser, Report and Form
+ *  - columnName: (Optional if exists in value) Column name to search in context
+ * @param {boolean} isBoolToString, convert boolean values to string
+ */
+export function parseContext(context, isBoolToString = false) {
+  const store = require('@/store')
+  var value = String(context.value)
+  var valueSQL = {}
+  if (valueUtil.isEmptyValue(value)) { return '' }
+  if (value.includes('@SQL=')) {
+    value = value.replace('@SQL=', '')
+  }
+  // var instances = value.length - value.replace('@', '').length
+  // if ((instances > 0) && (instances % 2) !== 0) { // could be an email address
+  //   return value
+  // }
+
+  var token
+  var inStr = value
+  var outStr = ''
+
+  var i = inStr.indexOf('@')
+
+  while (i !== -1) {
+    outStr = outStr + inStr.substring(0, i) // up to @
+    inStr = inStr.substring(i + 1, inStr.length)	// from first @
+    var j = inStr.indexOf('@') // next @
+    if (j < 0) {
+      console.log('No second tag: ' + inStr)
+      return ''	//	no second tag
+    }
+
+    token = inStr.substring(0, j)
+    context.columnName = token
+
+    var ctxInfo = store.default.getters.getContext(context)	// get context
+    if (isBoolToString && typeof ctxInfo === 'boolean') {
+      if (ctxInfo) {
+        ctxInfo = 'Y'
+      } else {
+        ctxInfo = 'N'
+      }
+    }
+
+    if ((ctxInfo === undefined || ctxInfo.length === 0) && (token.startsWith('#') || token.startsWith('$'))) {
+      context.parentUuid = undefined
+      context.containerUuid = undefined
+      ctxInfo = store.default.getters.getContext(context)	// get global context
+    }
+    if (ctxInfo === undefined || ctxInfo.length === 0) {
+      console.info('No Context for: ' + token)
+    } else {
+      if (typeof ctxInfo === 'object') {
+        outStr = ctxInfo
+      } else {
+        outStr = outStr + ctxInfo // replace context with Context
+      }
+    }
+
+    inStr = inStr.substring(j + 1, inStr.length)	// from second @
+    i = inStr.indexOf('@')
+  }
+  if (typeof ctxInfo !== 'object') {
+    outStr = outStr + inStr	// add the rest of the string
+  }
+  if (context.isSQL) {
+    valueSQL['query'] = outStr
+    valueSQL['value'] = ctxInfo
+    return valueSQL
+  }
+  return outStr
+}	//	parseContext
+
+export function convertRoleFromGRPC(roleGRPC) {
+  return {
+    id: roleGRPC.getId(),
+    uuid: roleGRPC.getUuid(),
+    name: roleGRPC.getName(),
+    desctiption: roleGRPC.getDescription(),
+    clientId: roleGRPC.getClientid(),
+    clientName: roleGRPC.getClientname(),
+    organizationsList: roleGRPC.getOrganizationsList()
+  }
+}
+
+export function convertContextInfoFromGRPC(contextInfoGRPC) {
+  var contextInfo = {
+    id: '',
+    uuid: '',
+    name: '',
+    description: '',
+    sqlStatement: '',
+    isActive: false,
+    messageText: convertMessageTextFromGRPC(undefined)
+  }
+  if (contextInfoGRPC !== undefined) {
+    contextInfo = {
+      id: contextInfoGRPC.getId(),
+      uuid: contextInfoGRPC.getUuid(),
+      name: contextInfoGRPC.getName(),
+      description: contextInfoGRPC.getDescription(),
+      sqlStatement: contextInfoGRPC.getSqlstatement(),
+      isActive: contextInfoGRPC.getIsactive(),
+      messageText: convertMessageTextFromGRPC(
+        contextInfoGRPC.getMessagetext()
+      )
+    }
+  }
+  return contextInfo
+}
+
+export function convertMessageTextFromGRPC(messageTextGRPC) {
+  var messageText = {
+    id: '',
+    uuid: '',
+    value: '',
+    msgType: '',
+    msgText: '',
+    msgTip: '',
+    isActive: false
+  }
+  if (messageTextGRPC !== undefined) {
+    messageText = {
+      id: messageTextGRPC.getId(),
+      // uuid: messageText.getUuid(),
+      value: messageTextGRPC.getValue(),
+      msgType: messageTextGRPC.getMsgtype(),
+      msgText: messageTextGRPC.getMsgtext(),
+      msgTip: messageTextGRPC.getMsgtip(),
+      isActive: messageTextGRPC.getIsactive()
+    }
+  }
+  return messageText
+}
+
+/**
+ * [assignedGroup]
+ * @param  {array} fieldList Field of List with
+ * @return {array} fieldList
+ */
+export function assignedGroup(fieldList, assignedGroup) {
+  if (fieldList === undefined || fieldList.length <= 0) {
+    return fieldList
+  }
+  fieldList = sortFields(fieldList, 'sequence', 'asc', fieldList[0].panelType)
+
+  let firstChangeGroup = false
+  let currentGroup = ''
+  let typeGroup = ''
+
+  fieldList.forEach(fieldElement => {
+    if (fieldElement.panelType !== 'window') {
+      fieldElement.groupAssigned = ''
+      fieldElement.typeGroupAssigned = ''
+      return
+    }
+
+    // change the first field group, change the band
+    if (!firstChangeGroup) {
+      if (!valueUtil.isEmptyValue(fieldElement.fieldGroup.name) &&
+        currentGroup !== fieldElement.fieldGroup.name &&
+        fieldElement.isDisplayed) {
+        firstChangeGroup = true
+      }
+    }
+    //  if you change the field group for the first time and it is different
+    //  from 0, updates the field group, since it is another field group and
+    //  assigns the following field items to the current field group whose
+    //  field group is '' or null
+    if (firstChangeGroup) {
+      if (!valueUtil.isEmptyValue(fieldElement.fieldGroup.name)) {
+        currentGroup = fieldElement.fieldGroup.name
+        typeGroup = fieldElement.fieldGroup.fieldGroupType
+      }
+    }
+
+    fieldElement.groupAssigned = currentGroup
+    fieldElement.typeGroupAssigned = typeGroup
+
+    if (assignedGroup !== undefined) {
+      fieldElement.groupAssigned = assignedGroup
+    }
+  })
+
+  return fieldList
+}
+
+/**
+ * Order the fields, then assign the groups to each field, and finally group
+ * in an array according to each field group to show in panel (or table).
+ * @param {array} arr
+ * @param {string} orderBy
+ * @param {string} type
+ * @param {string} panelType
+ * @returns {array}
+ */
+export function sortFields(arr, orderBy = 'sequence', type = 'asc', panelType = 'window') {
+  if (panelType === 'browser') {
+    orderBy = 'seqNoGrid'
+  }
+  arr.sort((itemA, itemB) => {
+    return itemA[orderBy] - itemB[orderBy]
+    // return itemA[orderBy] > itemB[orderBy]
+  })
+  if (type.toLowerCase() === 'desc') {
+    return arr.reverse()
+  }
+  return arr
+}
+
+export function parsedValueComponent({ fieldType, value, referenceType, isMandatory = false }) {
+  if (value === undefined || value === null) {
+    return undefined
+  }
+  var returnValue
+
+  switch (fieldType) {
+    // data type Number
+    case 'FieldNumber':
+      if (String(value).trim() === '') {
+        returnValue = undefined
+        if (isMandatory) {
+          returnValue = 0
+        }
+      } else if (typeof value === 'object' && value.hasOwnProperty('query')) {
+        returnValue = value
+      } else {
+        returnValue = Number(value)
+      }
+      break
+
+    // data type Boolean
+    case 'FieldYesNo':
+      if (value === 'false' || value === 'N') {
+        value = false
+      } else if (typeof value === 'object' && value.hasOwnProperty('query')) {
+        returnValue = value
+      }
+      returnValue = Boolean(value)
+      break
+
+    // data type String
+    case 'FieldText':
+    case 'FieldTextArea':
+      if (typeof value === 'object' && value.hasOwnProperty('query')) {
+        returnValue = value
+      }
+      returnValue = String(value)
+      break
+
+    // data type Date
+    case 'FieldDate':
+    case 'FieldTime ':
+      if (String(value).trim() === '') {
+        value = undefined
+      }
+      if (!isNaN(value)) {
+        value = Number(value)
+      }
+      if (typeof value === 'number') {
+        value = new Date(value)
+      }
+      if (typeof value === 'object' && value.hasOwnProperty('query')) {
+        returnValue = value
+      }
+      returnValue = value
+      break
+
+    case 'FieldSelect':
+      if (String(value).trim() === '') {
+        value = undefined
+      }
+      if (referenceType === 'TableDirect') {
+        if (value !== '' && value !== null && value !== undefined) {
+          value = Number(value)
+        }
+      } // Search or List
+      returnValue = value
+      break
+
+    default:
+      returnValue = value
+      break
+  }
+  return returnValue
+}
+export function convertAction(action) {
+  var actionAttributes = {
+    name: '',
+    icon: '',
+    hidden: false,
+    isIndex: false
+  }
+  switch (action) {
+    case 'B':
+      actionAttributes.name = 'Workbench'
+      actionAttributes.icon = 'peoples'
+      break
+    case 'F':
+      actionAttributes.name = 'Workflow'
+      actionAttributes.icon = 'example'
+      break
+    case 'P':
+      actionAttributes.name = 'Process'
+      actionAttributes.icon = 'component'
+      break
+    case 'R':
+      actionAttributes.name = 'Report'
+      actionAttributes.icon = 'skill'
+      break
+    case 'S':
+      actionAttributes.name = 'SmartBrowser'
+      actionAttributes.icon = 'search'
+      break
+    case 'T':
+      actionAttributes.name = 'Task'
+      actionAttributes.icon = 'size'
+      break
+    case 'W':
+      actionAttributes.name = 'Window'
+      actionAttributes.icon = 'tab'
+      break
+    case 'X':
+      actionAttributes.name = 'Form'
+      actionAttributes.icon = 'form'
+
+      break
+    default:
+      actionAttributes.name = 'summary'
+      actionAttributes.icon = 'nested'
+      actionAttributes.isIndex = true
+      break
+  }
+  return actionAttributes
+}
+export default evaluator // from '@/utils/ADempiere/evaluator.js'
+export * from '@/utils/ADempiere/auth.js'
+export * from '@/utils/ADempiere/notification.js'
+export * from '@/utils/ADempiere/valueUtil.js'
diff --git a/src/utils/ADempiere/notification.js b/src/utils/ADempiere/notification.js
new file mode 100644
index 00000000..00c2403e
--- /dev/null
+++ b/src/utils/ADempiere/notification.js
@@ -0,0 +1,75 @@
+import { Message, Notification } from 'element-ui'
+import language from '@/lang'
+import router from '@/router'
+
+export function hasTranslation(text) {
+  const hasKey = language.te('notifications.' + text)
+  if (hasKey) {
+    const translatedText = language.t('notifications.' + text)
+
+    return translatedText
+  }
+  return text
+}
+
+/**
+ *
+ * @param {object} parameters
+ * @param {object} parameters.type, required
+ * @param {object} parameters.title, required
+ * @param {object} parameters.message, required
+ * @param {object} parameters.summary, required
+ * @param {object} parameters.name, required
+ */
+export function showNotification(parameters) {
+  var title = hasTranslation(parameters.title)
+  var message = ''
+  if (parameters.message) {
+    message = hasTranslation(parameters.message)
+  }
+  //  For summary
+  if (parameters.summary) {
+    if (message) {
+      message = message + '<br>' + parameters.summary
+    } else {
+      message = parameters.summary
+    }
+  }
+  //  For logs
+  if (parameters.logs) {
+    parameters.logs.forEach(logResult => {
+      if (logResult) {
+        message = message + '<br>' + logResult.log
+      }
+    })
+  }
+  if (parameters.name) {
+    message = parameters.name + message
+  }
+  Notification({
+    title: title,
+    message: `<div style="max-height: 100px; overflow-y: auto;">` + message + `</div>`,
+    type: parameters.type,
+    position: 'bottom-right',
+    dangerouslyUseHTMLString: true,
+    onClick() {
+      router.push({ name: 'ProcessActivity' })
+    }
+  })
+}
+
+export function showMessage(parameters) {
+  var delay = 3000
+  if (parameters.type === 'info') {
+    delay = 2000
+  }
+  if (parameters.duration) {
+    delay = parameters.duration
+  }
+  Message({
+    message: parameters.message,
+    type: parameters.type,
+    showClose: true,
+    duration: delay
+  })
+}
diff --git a/src/utils/ADempiere/valueUtil.js b/src/utils/ADempiere/valueUtil.js
new file mode 100644
index 00000000..886057a4
--- /dev/null
+++ b/src/utils/ADempiere/valueUtil.js
@@ -0,0 +1,209 @@
+import { convertValueFromGRPC } from '@/api/ADempiere/data'
+
+// Decode a HTML text
+export function decodeHtml(text) {
+  var processMetadata = document.createElement('div')
+  processMetadata.innerHTML = text
+  return processMetadata.childNodes[0].nodeValue
+}
+
+/**
+ * Checks if value is empty. Deep-checks arrays and objects
+ * Note: isEmpty([]) == true, isEmpty({}) == true, isEmpty([{0:false},"",0]) == true, isEmpty({0:1}) == false
+ * @param   {boolean|array|object|number|string} value
+ * @returns {boolean}
+ */
+export function isEmptyValue(value) {
+  if (value === undefined || value == null) {
+    return true
+  } else if (value === -1 || value === '-1') {
+    return true
+  } else if (typeof value === 'string') {
+    return Boolean(!value.trim().length)
+  } else if (typeof value === 'function' || typeof value === 'number' || typeof value === 'boolean' || Object.prototype.toString.call(value) === '[object Date]') {
+    return false
+  } else if (Array.isArray(value)) {
+    return Boolean(!value.length)
+  } else if (typeof value === 'object') {
+    return Boolean(!Object.keys(value).length)
+  }
+
+  return true
+}
+
+export function typeValue(value) {
+  if (typeof value === 'undefined' || value == null) {
+    return value
+  } else if (typeof value === 'string') {
+    return 'STRING'
+  } else if (typeof value === 'function') {
+    return 'FUNCTION'
+  } else if (typeof value === 'number') {
+    if (value.isInteger()) {
+      return 'INTEGER'
+    } else {
+      return 'NUMBER'
+    }
+  } else if (typeof value === 'boolean') {
+    return 'BOOLEAN'
+  } else if (Object.prototype.toString.call(value) === '[object Date]') {
+    return 'DATE'
+  } else if (Array.isArray(value)) {
+    return 'ARRAY'
+  } else if (typeof value === 'object') {
+    return 'OBJECT'
+  }
+  return value
+}
+
+/**
+ * zero pad
+ * @param {number} number
+ * @param {number} pad
+ * @returns {string}
+ */
+export function zeroPad(number, pad = 2) {
+  var zero = Number(pad) - number.toString().length + 1
+  return Array(+(zero > 0 && zero)).join('0') + number
+}
+
+/**
+ * Get date and time from client in a object value
+ * @param {string} type Type value of return
+ * @returns {object|string}
+ */
+export function clientDateTime(date = null, type = '') {
+  if (date == null || date === undefined || (typeof date === 'string' && date.trim() === '')) {
+    // instance the objet Data with current date from client
+    date = new Date()
+  } else {
+    // instance the objet Data with date or time send
+    date = new Date(date)
+  }
+
+  const currentDate = date.getFullYear() +
+    '-' + zeroPad(date.getMonth() + 1) +
+    '-' + zeroPad(date.getDate())
+
+  const currentTime = date.getHours() +
+    ':' + date.getMinutes() +
+    ':' + date.getSeconds()
+
+  const currentDateTime = {
+    date: currentDate,
+    time: currentTime
+  }
+
+  if (type.toLowerCase() === 't') {
+    // time format HH:II:SS
+    return currentDateTime.time
+  } else if (type.toLowerCase() === 'd') {
+    // date format YYYY-MM-DD
+    return currentDateTime.date
+  } else if (type.toLocaleLowerCase() === 'o') {
+    // object format
+    return currentDateTime
+  }
+  return currentDateTime.date + ' ' + currentDateTime.time
+}
+
+/**
+ * Convert a object to array pairs
+ * @param {object} objectToConvert, object to convert
+ * @param {string} nameKey, name from key in pairs
+ * @param {string} nameValue, name from value in pairs
+ * @returns {array} [ { nameKe: key, nameValue: value } ]
+ */
+export function convertObjectToArrayPairs(objectToConvert, nameKey = 'columnName', nameValue = 'value') {
+  var result = Object.keys(objectToConvert).map(key => {
+    var returnPairs = {}
+    returnPairs[nameKey] = key
+    returnPairs[nameValue] = objectToConvert[key]
+    return returnPairs
+  })
+
+  return result
+}
+
+/**
+ * Convert array pairs of object to simple object { key:value }
+ * @param {object} objectToConvert, object to convert
+ * @param {string} nameKey, name from key in pairs
+ * @param {string} nameValue, name from value in pairs
+ */
+export function convertArrayPairsToObject(arrayToConver, nameKey = 'columnName', nameValue = 'value') {
+  var result = {}
+  arrayToConver.forEach(element => {
+    result[element[nameKey]] = element[nameValue]
+  })
+
+  return result
+}
+
+export function convertValuesMapToObject(map) {
+  var objectConverted = {}
+  map.forEach((value, key) => {
+    var valueResult = map.get(key)
+    var tempValue
+    if (valueResult) {
+      tempValue = convertValueFromGRPC(value)
+    }
+    objectConverted[key] = tempValue
+  })
+  return objectConverted
+}
+
+export function convertMapToArrayPairs({
+  toConvert,
+  nameKey = 'columnName',
+  nameValue = 'value',
+  isGRPC = true
+}) {
+  const result = []
+  if (toConvert) {
+    toConvert.forEach((value, key) => {
+      const element = {}
+      element[nameKey] = key
+      element[nameValue] = value
+      if (isGRPC) {
+        element[nameValue] = convertValueFromGRPC(value)
+      }
+
+      result.push(element)
+    })
+  }
+  return result
+}
+
+export function convertHasMapToObject(hasMapToConvert) {
+  var result = {}
+  hasMapToConvert.forEach((value, key) => {
+    result[key] = value
+  })
+  return result
+}
+
+export function convertFieldListToShareLink(fieldList) {
+  var attributesListLink = ''
+  fieldList.map(fieldItem => {
+    // assign values
+    var value = fieldItem.value
+    var valueTo = fieldItem.valueTo
+
+    if (!isEmptyValue(value)) {
+      if (['FieldDate', 'FieldTime'].includes(fieldItem.componentPath) || typeof value === 'object') {
+        value = value.getTime()
+      }
+      attributesListLink += `${fieldItem.columnName}=${encodeURIComponent(value)}&`
+    }
+
+    if (fieldItem.isRange && !isEmptyValue(valueTo)) {
+      if (['FieldDate', 'FieldTime'].includes(fieldItem.componentPath) || typeof value === 'object') {
+        valueTo = valueTo.getTime()
+      }
+      attributesListLink += `${fieldItem.columnName}_To=${encodeURIComponent(valueTo)}&`
+    }
+  })
+
+  return attributesListLink.slice(0, -1)
+}
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 08a43d6e..47141f10 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'Admin-Token'
+const TokenKey = 'sessionuuid'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -13,3 +13,5 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+export * from '@/utils/ADempiere/auth'
diff --git a/src/views/ADempiere/Browser/index.vue b/src/views/ADempiere/Browser/index.vue
new file mode 100644
index 00000000..d9d135a3
--- /dev/null
+++ b/src/views/ADempiere/Browser/index.vue
@@ -0,0 +1,291 @@
+<template>
+  <el-container v-if="isLoaded" key="browser-loaded" class="view-base" style="height: 86vh;">
+    <modal-dialog
+      :container-uuid="browserUuid"
+      :panel-type="panelType"
+    />
+    <el-header>
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="browserUuid"
+        :panel-type="panelType"
+      />
+      <div class="w-33">
+        <div class="center">
+          <el-button
+            v-if="isEmptyValue(browserMetadata.help)"
+            slot="reference"
+            type="text"
+            :class="cssClassTitle + ' warn-content text-center'"
+          >
+            {{ browserMetadata.name }}
+          </el-button>
+        </div>
+      </div>
+      <el-popover
+        v-if="!isEmptyValue(browserMetadata.name)"
+        placement="top-start"
+        :title="browserMetadata.name"
+        :class="cssClassHelp"
+        trigger="hover"
+      >
+        <div v-html="browserMetadata.help" />
+        <div class="w-33">
+          <div class="center">
+            <el-button
+              v-if="isEmptyValue(browserMetadata.help)"
+              slot="reference"
+              type="text"
+              :class="cssClassTitle + 'warn-content text-center'"
+            >
+              {{ browserMetadata.name }}
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+    </el-header>
+    <el-main>
+      <el-collapse v-model="activeSearch" class="container-collasep-open" @change="handleChange">
+        <el-collapse-item :title="$t('views.searchCriteria')" name="opened-criteria">
+          <main-panel
+            :container-uuid="browserUuid"
+            :metadata="browserMetadata"
+            :panel-type="panelType"
+          />
+        </el-collapse-item>
+      </el-collapse>
+      <data-table
+        v-if="isLoaded"
+        :container-uuid="browserUuid"
+        :panel-type="panelType"
+        :metadata="browserMetadata"
+      />
+    </el-main>
+  </el-container>
+  <div
+    v-else
+    key="browser-loading"
+    v-loading="!isLoaded"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="loading-browser"
+  />
+</template>
+
+<script>
+// When supporting the processes, smart browser and reports,
+// the ContextMenu and sticky must be placed in the layout
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import MainPanel from '@/components/ADempiere/Panel'
+import DataTable from '@/components/ADempiere/DataTable'
+import ModalDialog from '@/components/ADempiere/Dialog'
+
+export default {
+  name: 'BrowserView',
+  components: {
+    MainPanel,
+    DataTable,
+    ContextMenu,
+    ModalDialog
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      browserMetadata: {},
+      browserUuid: this.$route.meta.uuid,
+      activeSearch: [],
+      isLoaded: false,
+      panelType: 'browser'
+    }
+  },
+  computed: {
+    getterBrowser() {
+      return this.$store.getters.getBrowser(this.browserUuid)
+    },
+    getDataRecords() {
+      return this.$store.getters.getDataRecordsList(this.browserUuid)
+    },
+    getContainerIsReadyForSubmit() {
+      return !this.$store.getters.isNotReadyForSubmit(this.browserUuid)
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    cssClassTitle() {
+      if (this.isMobile) {
+        return 'title-mobile'
+      }
+      return 'title'
+    },
+    cssClassHelp() {
+      if (this.isMobile) {
+        return 'content-help-mobile'
+      }
+      return 'content-help'
+    }
+  },
+  created() {
+    this.getBrowser()
+  },
+  methods: {
+    handleChange(value) {
+      var showCriteria = false
+      if (this.activeSearch.length) {
+        showCriteria = true
+      }
+      this.$store.dispatch('changeShowedCriteriaBrowser', {
+        panelType: this.panelType,
+        containerUuid: this.browserUuid,
+        isShowedCriteria: showCriteria
+      })
+    },
+    getBrowser() {
+      if (this.getterBrowser) {
+        this.browserMetadata = this.getterBrowser
+        this.isLoaded = true
+        this.defaultSearch()
+      } else {
+        this.$store.dispatch('getPanelAndFields', {
+          containerUuid: this.browserUuid,
+          type: this.panelType,
+          routeToDelete: this.$route
+        })
+          .then(() => {
+            this.browserMetadata = this.getterBrowser
+            this.defaultSearch()
+          })
+          .finally(() => {
+            this.isLoaded = true
+          })
+          .catch(error => {
+            console.warn('Dictionary Browser - Error ' + error.code + ': ' + error.message)
+          })
+      }
+    },
+    defaultSearch() {
+      // open or closed show criteria
+      this.activeSearch = []
+      if (this.browserMetadata.isShowedCriteria) {
+        this.activeSearch = ['opened-criteria']
+      }
+
+      if (this.getDataRecords.length <= 0) {
+        if (this.getContainerIsReadyForSubmit) {
+          this.$store.dispatch('getBrowserSearch', {
+            containerUuid: this.browserUuid
+          })
+        } else {
+          this.$store.dispatch('setRecordSelection', {
+            containerUuid: this.browserUuid,
+            panelType: this.panelType
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .el-collapse-item__header:hover {
+    background-color: #fcfcfc;
+  }
+</style>
+<style scoped>
+  .view-base {
+    height: 100%;
+    min-height: calc(100vh - 84px);
+  }
+
+  .loading-browser {
+    padding: 100px 100px;
+    height: 100%;
+  }
+
+  .el-main {
+    display: block;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+    overflow: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-bottom: 0px;
+    padding-right: 20px;
+    padding-top: 0px;
+    padding-left: 20px;
+  }
+  .el-header {
+    height: 50px;
+  }
+  .containert {
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 50%;
+  }
+  .menu {
+    height: 40px;
+  }
+  .title {
+    color: #000000;
+    text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605!important;
+    /* left: 50%; */
+  }
+  .title-mobile {
+    text-align: center;
+    color: #000000;
+    text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605!important;
+    /* left: 50%; */
+  }
+  .content-help {
+    width: 100%;
+    height: 200%;
+    padding-left: 15px !important;
+  }
+  .content-help-mobile {
+    width: 50%;
+    height: 50%;
+    padding-left: 15px !important;
+  }
+  .center{
+    text-align: center;
+  }
+  .w-33 {
+    width: 100%;
+    background-color: transparent;
+  }
+  .container-panel {
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    transition: width 0.28s;
+    border: 1px solid #e5e9f2;
+  }
+  .container-panel-open {
+    bottom: 0;
+    right: 0;
+    border: 1px solid #e5e9f2;
+    height: -webkit-fill-available;
+    height:-webkit-calc(100% - 100px);
+    z-index: 0;
+    transition: width 0.28s;
+  }
+  .container-collasep-open {
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    transition: width 0.28s;
+  }
+</style>
diff --git a/src/views/ADempiere/Process/index.vue b/src/views/ADempiere/Process/index.vue
new file mode 100644
index 00000000..17331d3d
--- /dev/null
+++ b/src/views/ADempiere/Process/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <el-container v-if="isLoadedMetadata" key="process-loaded" class="view-base" style="height: 84vh;">
+    <el-header style="height: 39px;">
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="processUuid"
+        :panel-type="panelType"
+        :is-report="processMetadata.isReport"
+      />
+    </el-header>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card class="content-collapse">
+            <h3 v-show="!isEmptyValue(processMetadata.name)" class="warn-content text-center">
+              <el-popover
+                v-if="!isEmptyValue(processMetadata.help)"
+                placement="top-start"
+                :title="processMetadata.name"
+                width="400"
+                trigger="hover"
+              >
+                <div v-html="processMetadata.help" />
+                <el-button slot="reference" type="text" class="title">
+                  {{ processMetadata.name }}
+                </el-button>
+              </el-popover>
+              <el-button v-if="isEmptyValue(processMetadata.help)" slot="reference" type="text" class="title text-center">
+                {{ processMetadata.name }}
+              </el-button>
+            </h3>
+            <main-panel
+              :position-tab="processMetadata.accesLevel"
+              :container-uuid="processUuid"
+              :metadata="processMetadata"
+              :is-edit="isEdit"
+              :panel-type="panelType"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+  <div
+    v-else
+    key="process-loading"
+    v-loading="!isLoadedMetadata"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="loading-process"
+  />
+</template>
+
+<script>
+// When supporting the processes, smart browser and reports,
+// the ContextMenu and sticky must be placed in the layout
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import MainPanel from '@/components/ADempiere/Panel'
+
+export default {
+  name: 'ProcessView',
+  components: {
+    MainPanel,
+    ContextMenu
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      processMetadata: {},
+      processUuid: this.$route.meta.uuid,
+      isLoadedMetadata: false,
+      panelType: 'process'
+    }
+  },
+  computed: {
+    getterProcess() {
+      return this.$store.getters.getPanel(this.processUuid)
+    }
+  },
+  created() {
+    this.getProcess()
+  },
+  methods: {
+    getProcess() {
+      if (this.getterProcess) {
+        this.processMetadata = this.getterProcess
+        this.isLoadedMetadata = true
+      } else {
+        this.$store.dispatch('getPanelAndFields', {
+          containerUuid: this.processUuid,
+          type: this.panelType,
+          routeToDelete: this.$route
+        }).then(() => {
+          this.processMetadata = this.getterProcess
+        }).catch(error => {
+          console.log('Dictionary Process - Error ' + error.code + ': ' + error.message)
+        }).finally(() => {
+          this.isLoadedMetadata = true
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+  }
+</style>
+<style scoped >
+  .view-base {
+    height: 100%;
+    min-height: calc(100vh - 84px);
+  }
+
+  .loading-process {
+    padding: 100px 100px;
+    height: 100%;
+  }
+
+  .title {
+    color: #000000;
+    text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605!important;
+  }
+  .warn-content {
+    margin: 0px 0px !important;
+    padding-top: 0px !important;
+  }
+  .content-help {
+    width: 100%;
+    height: 200%;
+    padding-left: 39px !important;
+  }
+  .el-card {
+    width: 100% !important;
+    height: 200% !important;
+  }
+  .sticky-submenu {
+    position: absolute !important;
+    right: 0;
+    top: 0;
+  }
+  .content-collapse {
+    padding-left: 20 px !important;
+    padding-top: 50 px !important;
+  }
+</style>
diff --git a/src/views/ADempiere/ProcessActivity/index.vue b/src/views/ADempiere/ProcessActivity/index.vue
new file mode 100644
index 00000000..05f9c64c
--- /dev/null
+++ b/src/views/ADempiere/ProcessActivity/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <div v-if="getRunProcessAll.length" class="app-container">
+    <el-timeline>
+      <el-timeline-item
+        v-for="(activity, index) in getRunProcessAll"
+        :key="index"
+        :timestamp="translateDate(activity.lastRun)"
+        placement="top"
+        type="primary"
+        size="large"
+        :color="checkStatus(activity.isError, activity.isProcessing, activity.isReport).color"
+      >
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span><b>{{ activity.name }}</b></span>
+            <div class="actions">
+              <el-dropdown @command="handleCommand">
+                <span class="el-dropdown-link">
+                  {{ $t('components.contextMenuActions') }}<i class="el-icon-arrow-down el-icon--right" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-if="activity.isReport" :command="{ ...activity, command: 'seeReport' }">
+                    {{ $t('views.seeReport') }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="{ ...activity, command: 'zoomIn' }">
+                    {{ $t('table.ProcessActivity.zoomIn') }}
+                  </el-dropdown-item>
+                  <!-- TODO: add more actions -->
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+          </div>
+          <el-form label-position="top">
+            <el-form-item v-if="activity.description" :label="generateTitle('Description')">
+              <span><b>{{ activity.description }}</b></span>
+              <span v-if="activity.isReport">{{ activity.output.description }}</span>
+            </el-form-item>
+            <el-form-item :label="generateTitle('Status')">
+              <!-- show only when it is error -->
+              <el-popover
+                v-if="activity.isError && !activity.summary && !activity.isReport"
+                placement="right"
+                width="700"
+                trigger="hover"
+              >
+                <div>
+                  {{ activity.message }}
+                </div>
+                <el-tag slot="reference" :type="checkStatus(activity.isError, activity.isProcessing, activity.isReport).type">
+                  {{ checkStatus(activity.isError, activity.isProcessing, activity.isReport).text }}
+                </el-tag>
+              </el-popover>
+              <!-- show only when bring logs -->
+              <el-popover
+                v-else-if="activity.logs.length > 0"
+                placement="right"
+                width="500"
+                trigger="hover"
+              >
+                <b>{{ $t('table.ProcessActivity.Logs') }}</b><br>
+                <ul>
+                  <li @click="zoomIn(activity)"> {{ activity.summary }} </li>
+                  <el-scrollbar wrap-class="popover-scroll">
+                    <li v-for="(item, key) in activity.logs" :key="key" @click="zoomIn(activity)">
+                      {{ item.log }}
+                    </li>
+                  </el-scrollbar>
+                </ul>
+                <el-tag slot="reference" :type="checkStatus(activity.isError, activity.isProcessing, activity.isReport).type">
+                  {{ checkStatus(activity.isError, activity.isProcessing, activity.isReport).text }}
+                </el-tag>
+              </el-popover>
+              <!-- show only when bring output -->
+              <el-popover
+                v-else-if="activity.isReport"
+                placement="right"
+                width="700"
+                trigger="hover"
+              >
+                <div>
+                  <span> {{ $t('table.ProcessActivity.Output') }} </span><br>
+                  <span>{{ $t('table.ProcessActivity.Name') }}: {{ activity.output.name }}</span><br>
+                  <span>{{ $t('table.ProcessActivity.Description') }}: {{ activity.output.description }}</span><br>
+                  <span>{{ $t('table.ProcessActivity.FileName') }}: {{ activity.output.fileName }}</span><br>
+                  <a type="text" :href="activity.url" :download="activity.download">
+                    {{ $t('components.contextMenuDownload') }} <i class="el-icon-download" />
+                  </a>
+                </div>
+                <el-tag slot="reference" :type="checkStatus(activity.isError, activity.isProcessing, activity.isReport).type">
+                  {{ checkStatus(activity.isError, activity.isProcessing, activity.isReport).text }}
+                </el-tag>
+              </el-popover>
+              <el-tag v-else :type="checkStatus(activity.isError, activity.isProcessing, activity.isReport).type">
+                {{ checkStatus(activity.isError, activity.isProcessing, activity.isReport).text }}
+              </el-tag>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+  <div v-else>
+    <h1 class="text-center">{{ $t('views.noProcess') }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProcessActivity',
+  data() {
+    return {
+      processActivity: [],
+      recordCount: 0
+    }
+  },
+  computed: {
+    // process local not sent
+    getterAllInExecution() {
+      return this.$store.getters.getAllInExecution
+    },
+    // process local and send with response
+    getterAllFinishProcess() {
+      return this.$store.getters.getAllFinishProcess
+    },
+    // session process from server
+    getterAllSessionProcess() {
+      return this.$store.getters.getAllSessionProcess
+    },
+    // all process
+    getRunProcessAll() {
+      var processAll = this.getterAllInExecution.concat(this.getterAllFinishProcess, this.getterAllSessionProcess)
+      var processAllReturned = []
+
+      processAll.forEach(element => {
+        var processMetadataReturned = {}
+        var infoMetadata = this.getProcessMetadata(element.processUuid)
+        if (!infoMetadata) {
+          infoMetadata = {}
+        }
+        Object.assign(processMetadataReturned, element, infoMetadata)
+
+        var indexRepeat = processAllReturned.findIndex(item => item.instanceUuid === element.instanceUuid && !this.isEmptyValue(element.instanceUuid))
+        if (indexRepeat > -1) {
+          // update attributes in exists process to return
+          // Object.assign(processAllReturned[indexRepeat], processMetadataReturned)
+          var other = Object.assign(processMetadataReturned, processAllReturned[indexRepeat])
+          processAllReturned[indexRepeat] = other
+          return
+        }
+
+        // add new process to show
+        processAllReturned.push(processMetadataReturned)
+      })
+      return processAllReturned.sort((a, b) => {
+        // sort by date and reverse string to order by most recently
+        return new Date(a.lastRun) - new Date(b.lastRun)
+      }).reverse()
+    },
+    language() {
+      return this.$store.getters.language
+    }
+  },
+  beforeMount() {
+    this.$store.dispatch('getSessionProcessFromServer')
+  },
+  methods: {
+    zoomIn(activity) {
+      this.$router.push({ path: activity.processIdPath })
+    },
+    getProcessMetadata(uuid) {
+      return this.$store.getters.getProcess(uuid)
+    },
+    handleCommand(activity) {
+      if (activity.command === 'seeReport') {
+        this.$router.push({
+          name: 'Report Viewer',
+          params: {
+            processId: activity.processId,
+            instanceUuid: activity.instanceUuid,
+            fileName: activity.output.fileName
+          }
+        })
+      } else {
+        if (activity.parameters && activity.parameters.length) {
+          activity.parameters.forEach(param => {
+            this.$route.query[param.columnName] = param.value
+          })
+        }
+        this.$router.push({
+          path: activity.processIdPath,
+          query: {
+            ...this.$route.query
+          }
+        })
+      }
+    },
+    checkStatus(isError, isProcessing, isReport) {
+      var status = {
+        text: this.$t('notifications.completed'),
+        type: 'success',
+        color: '#67C23A'
+      }
+      if (isReport) {
+        return status
+      }
+      // is executing
+      if (isProcessing) {
+        status.text = this.$t('notifications.processing')
+        status.type = 'info'
+        status.color = '#909399'
+        return status
+      }
+      if (isError) {
+        status.text = this.$t('notifications.error')
+        status.type = 'danger'
+        status.color = '#F56C6C'
+        return status
+      }
+      // is completed
+      return status
+    },
+    generateTitle(title) {
+      const hasKey = this.$te('table.ProcessActivity.' + title)
+      if (hasKey) {
+        // $t :this method from vue-i18n, inject in @/lang/index.js
+        const translatedTitle = this.$t('table.ProcessActivity.' + title)
+        return translatedTitle
+      }
+      return title
+    },
+    translateDate(value) {
+      return this.$d(new Date(value), 'long', this.language)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  a, a:focus, a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+    color: #409EFF;
+  }
+  .el-popover {
+    position: absolute;
+    background: #FFFFFF;
+    overflow: auto;
+    min-width: 84px;
+    border-radius: 4px;
+    border: 1px solid #e6ebf5;
+    padding: 12px;
+    max-height: 174px;
+    z-index: 2000;
+    color: #606266;
+    line-height: 1.4;
+    text-align: justify;
+    max-width: 600px;
+    font-size: 14px;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    word-break: break-all;
+  }
+  .loading-div {
+    padding: 100px 100px;
+    height: 100%;
+  }
+  .actions {
+    float: right
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+</style>
+<style>
+  .popover-scroll {
+    max-height: 200px !important;
+  }
+</style>
diff --git a/src/views/ADempiere/ReportViewer/index.vue b/src/views/ADempiere/ReportViewer/index.vue
new file mode 100644
index 00000000..b549cc5e
--- /dev/null
+++ b/src/views/ADempiere/ReportViewer/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <div v-if="isLoading" key="report-viewer-loaded" style="min-height: inherit;">
+    <context-menu
+      :container-uuid="reportResult.processUuid"
+      :panel-type="panelType"
+      :is-report="true"
+      :last-parameter="reportResult.processUuid"
+      :report-format="reportFormat"
+    />
+    <el-row type="flex" style="min-height: inherit;">
+      <el-col :span="24">
+        <div class="content">
+          <h3 class="text-center">
+            <el-popover
+              v-if="!isEmptyValue(processMetadata.help)"
+              placement="top-start"
+              :title="processMetadata.name"
+              width="400"
+              trigger="hover"
+            >
+              <div v-html="processMetadata.help" />
+              <el-button slot="reference" type="text" class="title">{{ processMetadata.name }}</el-button>
+            </el-popover>
+          </h3>
+          <iframe v-if="reportFormat === 'pdf'" key="report-content-pdf" class="content-api" :src="url" width="100%" height="100%" />
+          <div v-else-if="collectionReportFormat.includes(reportFormat)" key="report-content-all" class="content-api" :src="url" />
+          <div v-else-if="reportFormat === 'html'" key="report-content-html" class="content-txt">
+            <el-container class="sub-content-html">
+              <el-main style="padding: 0;">
+                <div
+                  class="el-table--striped el-table--border el-table--scrollable-y el-table--scrollable-x"
+                  v-html="reportContent"
+                />
+              </el-main>
+            </el-container>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <modal-dialog
+      :metadata="processMetadata"
+      :parent-uuid="reportResult.processUuid"
+      :report-export-type="reportFormat"
+      :panel-type="panelType"
+    />
+  </div>
+  <div
+    v-else
+    key="report-viewer-loading"
+    v-loading="!isLoading"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="loading-report-viewer"
+  />
+</template>
+
+<script>
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import ModalDialog from '@/components/ADempiere/Dialog'
+import { showNotification } from '@/utils/ADempiere/notification'
+
+export default {
+  name: 'ReportViewer',
+  components: {
+    ContextMenu,
+    ModalDialog
+  },
+  data() {
+    return {
+      panelType: 'process',
+      url: this.$store.getters.getProcessResult.url,
+      name: [],
+      reportFormat: '',
+      collectionReportFormat: [
+        'ps',
+        'xml',
+        'pdf',
+        'txt',
+        'ssv',
+        'csv',
+        'xls',
+        'xlsx',
+        'arxml'
+      ],
+      reportContent: '',
+      reportHeader: '',
+      isLoading: false,
+      reportResult: {}
+    }
+  },
+  computed: {
+    // TODO: Add get metadata from server to open report view from link
+    processMetadata() {
+      return this.$store.getters.getProcessById(this.$route.params.processId)
+    },
+    getterCachedReport() {
+      return this.$store.getters.getCachedReport(this.$route.params.instanceUuid)
+    }
+  },
+  mounted() {
+    this.getCachedReport()
+  },
+  methods: {
+    showNotification,
+    displayReport(reportResult) {
+      if (!reportResult.isError) {
+        this.reportFormat = reportResult.output.reportType
+        this.reportContent = reportResult.output.output
+        this.reportHeader = reportResult.output.name
+        this.name = reportResult.output.fileName
+        this.isLoading = true
+      }
+    },
+    getCachedReport() {
+      this.reportResult = this.getterCachedReport
+      if (this.reportResult === undefined) {
+        this.$store.dispatch('getSessionProcessFromServer')
+          .then(response => {
+            this.reportResult = this.getterCachedReport
+            if (this.reportResult === undefined) {
+              this.showNotification({
+                type: 'error',
+                title: 'error',
+                message: 'requestError'
+              })
+
+              this.$store.dispatch('tagsView/delView', this.$route)
+                .then(({ visitedViews }) => {
+                  this.$router.push('/')
+                })
+              return
+            }
+            this.displayReport(this.reportResult)
+          })
+      } else {
+        this.displayReport(this.reportResult)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .loading-report-viewer {
+    padding: 100px 100px;
+    height: 100%;
+  }
+
+  .title {
+    color: #000000;
+    text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605!important;
+  }
+	.content {
+    width: 100%;
+    height: 100%;
+    padding: 20px 0px;
+    position: absolute;
+    top: 0%;
+  }
+	.content-html {
+		width: 100%;
+    height: 100%;
+    padding: 10px;
+	}
+  .content-api {
+		width: 100%;
+    height: 90%;
+    padding-right: 10px;
+	}
+  .content-txt {
+		width: 100%;
+		height: inherit;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 0px;
+    padding-bottom: 20px;
+
+    .sub-content-html {
+      min-height: inherit;
+      height: inherit;
+      height: -webkit-fill-available;
+      max-height: -webkit-max-content;
+      max-height: -moz-max-content;
+      max-height: max-content;
+      width: 100%;
+      padding-bottom: 4%;
+    }
+	}
+  .content-excel {
+    width: 100%;
+    margin-top:20px;
+  }
+  .container {
+    width: 200%;
+    /* left: 50%; */
+  }
+  .container-report {
+    width: 100%;
+  }
+  .scroll {
+    max-height: -webkit-fill-available;
+  }
+</style>
diff --git a/src/views/ADempiere/Summary/index.vue b/src/views/ADempiere/Summary/index.vue
new file mode 100644
index 00000000..9b5d326c
--- /dev/null
+++ b/src/views/ADempiere/Summary/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div v-if="isIndex" key="sumary" class="app-container">
+    <el-popover
+      v-if="!isEmptyValue($route.meta.description)"
+      ref="routeDescription"
+      placement="top"
+      width="400"
+      trigger="hover"
+      :content="$route.meta.description"
+    />
+    <h3 v-popover:routeDescription class="description">{{ $route.meta.title }}</h3>
+    <el-row :gutter="10">
+      <template v-if="optionList.children">
+        <template v-for="(item, key) in optionList.children">
+          <dropdown v-if="$route.name !== item.name" :key="key" :items="item" :title="item.meta.title" />
+        </template>
+      </template>
+      <template v-else>
+        <template v-for="(item, key) in optionList">
+          <dropdown v-if="$route.name !== item.name" :key="key" :items="item" :title="item.meta.title" />
+        </template>
+      </template>
+    </el-row>
+  </div>
+  <div v-else key="view">
+    <router-view />
+  </div>
+</template>
+
+<script>
+import Dropdown from '@/components/ADempiere/Dropdown'
+
+export default {
+  name: 'Summary',
+  components: {
+    Dropdown
+  },
+  data() {
+    return {
+      routes: this.$store.state.permission.addRoutes,
+      parentUuid: this.$route.meta.parentUuid,
+      optionList: []
+    }
+  },
+  computed: {
+    isIndex() {
+      return this.$route.meta.isIndex
+    }
+  },
+  beforeMount() {
+    this.generateRoutesPool()
+  },
+  methods: {
+    generateRoutesPool() {
+      if (this.$route.meta && this.$route.meta.childs.length) {
+        this.optionList = this.$route.meta.childs
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .description {
+    text-align: center;
+    cursor: default;
+  }
+</style>
diff --git a/src/views/ADempiere/Unsupported/index.vue b/src/views/ADempiere/Unsupported/index.vue
new file mode 100644
index 00000000..aaa50f81
--- /dev/null
+++ b/src/views/ADempiere/Unsupported/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="unsupported">
+      <div class="unsupported__oops">{{ $t('views.unsupportedSorry') }}</div>
+      <div class="unsupported__headline">{{ $t('views.unsupportedHeadline') }}</div>
+      <div class="unsupported__info">{{ $t('views.unsupportedInfo') }}</div>
+      <el-button type="primary" round @click="redirect">{{ $t('views.unsupportedButton') }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnsupportedView',
+  methods: {
+    redirect() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+        .then(({ visitedViews }) => {
+          this.$router.push('/dashboard')
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .wscn-http404-container {
+    transform: translate(-50%,-50%);
+    position: absolute;
+    top: 40%;
+    left: 50%;
+  }
+  .unsupported {
+    position: relative;
+    float: left;
+    width: 100%;
+    padding: 30px 30px;
+    overflow: hidden;
+    &__oops {
+      font-size: 72px;
+      font-weight: bold;
+      line-height: 70px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(0);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/ADempiere/Window/index.vue b/src/views/ADempiere/Window/index.vue
new file mode 100644
index 00000000..5b6c2f8c
--- /dev/null
+++ b/src/views/ADempiere/Window/index.vue
@@ -0,0 +1,572 @@
+<template>
+  <div
+    v-if="isLoaded"
+    key="window-loaded"
+  >
+    <el-container style="height: 86vh;">
+      <el-main>
+        <split-pane :min-percent="10" :default-percent="defaultPorcentSplitPane" split="vertical">
+          <template>
+            <!-- this slot is 'paneL' (with 'L' in uppercase) do not change -->
+            <div slot="paneL" class="left-container">
+              <el-aside v-show="isShowedRecordNavigation" width="100%">
+                <div class="small-4 columns">
+                  <div class="w">
+                    <div class="open-left" />
+                    <div class="open-datatable-aside">
+                      <el-button
+                        v-show="!isPanel"
+                        :icon="iconIsShowedRecordNavigation"
+                        circle
+                        style="margin-left: 10px;"
+                        @click="handleChangeShowedRecordNavigation()"
+                      />
+                      <el-button
+                        v-show="!isPanel"
+                        :icon="iconIsShowedAside"
+                        circle
+                        @click="handleChangeShowedPanel()"
+                      />
+                    </div>
+                    <data-table
+                      :parent-uuid="windowUuid"
+                      :container-uuid="windowMetadata.currentTab.uuid"
+                      :table-name="windowMetadata.currentTab.tableName"
+                      :is-showed-panel-record="true"
+                      :is-parent="true"
+                    />
+                    <div class="close-datatable">
+                      <el-button
+                        v-show="isPanel"
+                        icon="el-icon-caret-left"
+                        circle
+                        @click="handleChangeShowedPanel()"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <i
+                  v-if="isMobile"
+                  class="el-icon-close"
+                  style="position: fixed;padding-top: 15px; color: #000000;font-size: 121%;font-weight: 615!important;padding-left: 9px;"
+                  @click="handleChangeShowedRecordNavigation()"
+                />
+              </el-aside>
+            </div>
+          </template>
+          <template slot="paneR">
+            <el-container style="height: 86vh;">
+              <Split direction="vertical" @onDrag="onDrag">
+                <SplitArea :size="sizeAreaStyle" :style="splitAreaStyle">
+                  <el-header style="height: 39px;">
+                    <context-menu
+                      v-show="!isShowedRecordPanel"
+                      :menu-parent-uuid="$route.meta.parentUuid"
+                      :parent-uuid="windowUuid"
+                      :container-uuid="windowMetadata.currentTabUuid"
+                      :panel-type="panelType"
+                      :is-insert-record="getterIsInsertRecord"
+                      :modal-metadata="windowMetadata"
+                    />
+                  </el-header>
+                  <!-- das -->
+                  <el-main :style="styleMainIsShowedTabChildren">
+                    <tab-parent
+                      :window-uuid="windowUuid"
+                      :tabs-list="windowMetadata.tabsListParent"
+                      class="tab-window"
+                    />
+                    <div class="small-4 columns">
+                      <div class="wrapper">
+                        <div
+                          v-show="windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
+                          class="open-detail"
+                        />
+                        <el-button
+                          v-if="windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length &&
+                            (isMobile && !isShowedRecordNavigation || !isMobile)"
+                          v-show="!isShowedTabChildren"
+                          icon="el-icon-caret-top"
+                          :class="classIsMObile"
+                          circle
+                          @click="handleChangeShowedTabChildren()"
+                        />
+                      </div>
+                    </div>
+                    <modal-dialog
+                      :parent-uuid="windowUuid"
+                      :container-uuid="windowMetadata.currentTabUuid"
+                    />
+                    <div class="small-4 columns">
+                      <div class="w">
+                        <div class="open-left" />
+                        <el-button
+                          v-show="!isShowedRecordNavigation"
+                          :icon="iconIsShowedRecordNavigation"
+                          class="open-navegation"
+                          circle
+                          @click="handleChangeShowedRecordNavigation()"
+                        />
+                      </div>
+                    </div>
+                  </el-main>
+                </SplitArea>
+                <SplitArea v-show="isShowedTabChildren" :size="50">
+                  <el-header
+                    v-if="isShowedTabChildren && windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
+                    style="height: auto; padding-right: 35px !important;padding-bottom: 33px;"
+                  >
+                    <div class="w-33">
+                      <div class="center">
+                        <el-button
+                          icon="el-icon-caret-bottom"
+                          circle
+                          @click="handleChangeShowedTabChildren()"
+                        />
+                      </div>
+                    </div>
+                    <tab-children
+                      :window-uuid="windowUuid"
+                      :tabs-list="windowMetadata.tabsListChildren"
+                      :first-tab-uuid="windowMetadata.firstTabUuid"
+                      :first-index="String(windowMetadata.tabsListChildren[0].index)"
+                      :style="{ 'height': getHeightPanelBottom + 'vh' }"
+                    />
+                  </el-header>
+                </SplitArea>
+              </Split>
+            </el-container>
+          </template>
+        </split-pane>
+      </el-main>
+    </el-container>
+  </div>
+  <div
+    v-else
+    key="window-loading"
+    v-loading="!isLoaded"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="loading-window"
+  />
+</template>
+
+<script>
+import TabParent from '@/components/ADempiere/Tab'
+import TabChildren from '@/components/ADempiere/Tab/tabChildren'
+// When supporting the processes, smart browser and reports,
+// the submenu and sticky must be placed in the layout
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import ModalDialog from '@/components/ADempiere/Dialog'
+import DataTable from '@/components/ADempiere/DataTable'
+import splitPane from 'vue-splitpane'
+
+export default {
+  name: 'WindowView',
+  components: {
+    TabParent,
+    TabChildren,
+    ContextMenu,
+    DataTable,
+    splitPane,
+    ModalDialog
+  },
+  data() {
+    return {
+      windowMetadata: {},
+      windowUuid: this.$route.meta.uuid,
+      panelType: 'window',
+      isLoaded: false,
+      isPanel: false,
+      isLoadingFromServer: false,
+      listRecordNavigation: 0,
+      isShowedTabChildren: true,
+      isShowedRecordPanel: false,
+      isShowedRecordNavigation: this.$route.query.action === 'advancedQuery'
+    }
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.$store.dispatch('setWindowOldRoute', {
+      path: from.path,
+      fullPath: from.fullPath,
+      query: {
+        ...from.query
+      }
+    })
+    next()
+  },
+  computed: {
+    defaultPorcentSplitPane() {
+      // isShowedRecordPanel ? (isShowedRecordNavigation ? 100 : 50) : (isShowedRecordNavigation ? 50 : -1)
+      if (this.isShowedRecordPanel) {
+        if (this.isShowedRecordNavigation) {
+          return 100
+        }
+        return 50
+      }
+      if (this.isShowedRecordNavigation) {
+        return 50
+      }
+      return -1
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    // convert ternary operator into computed property
+    classIsMObile() {
+      if (this.isMobile) {
+        return 'open-table-detail-mobile'
+      } else {
+        return 'open-table-detail'
+      }
+    },
+    getterIsShowedRecordNavigation() {
+      return this.$store.getters.getIsShowedRecordNavigation(this.windowUuid)
+    },
+    iconIsShowedRecordNavigation() {
+      if (this.isShowedRecordNavigation) {
+        return 'el-icon-caret-left'
+      } else {
+        return 'el-icon-caret-right'
+      }
+    },
+    iconIsShowedAside() {
+      if (this.isShowedRecordPanel) {
+        return 'el-icon-caret-left'
+      } else {
+        return 'el-icon-caret-right'
+      }
+    },
+    styleMainIsShowedTabChildren() {
+      if (this.isShowedTabChildren) {
+        return { height: 'initial', overflow: 'auto' }
+      } else {
+        return { height: 'initial', overflow: 'hidden' }
+      }
+    },
+    splitAreaStyle() {
+      if (this.isShowedTabChildren) {
+        return { overflow: 'auto' }
+      } else {
+        return { overflow: 'hidden' }
+      }
+    },
+    sizeAreaStyle() {
+      if (this.isShowedTabChildren) {
+        return 50
+      } else {
+        return 100
+      }
+    },
+    //
+    getterWindow() {
+      return this.$store.getters.getWindow(this.windowUuid)
+    },
+    getHeightPanelTop() {
+      return this.$store.getters.getSplitHeightTop
+    },
+    getHeightPanelBottom() {
+      return this.$store.getters.getSplitHeight - 11
+    },
+    getterRecordList() {
+      return this.$store.getters.getDataRecordsList(this.windowMetadata.currentTabUuid).length
+    },
+    getterIsInsertRecord() {
+      const tab = this.$store.getters.getCurrentTab(this.windowUuid)
+      if (tab) {
+        return tab.isInsertRecord
+      }
+      return false
+    }
+  },
+  created() {
+    this.getWindow()
+  },
+  methods: {
+    // callback new size
+    onDrag(size) {
+      var bottomPanel = size[1]
+      var topPanel = size[0]
+      this.$store.dispatch('setSplitHeightTop', {
+        splitHeightTop: topPanel
+      })
+      this.$store.dispatch('setSplitHeight', {
+        splitHeight: bottomPanel
+      })
+    },
+    // get window from vuex store or server
+    getWindow() {
+      if (this.getterWindow) {
+        this.generateWindow()
+        this.isLoadingFromServer = true
+      } else {
+        this.$store.dispatch('getWindowFromServer', {
+          windowUuid: this.windowUuid,
+          routeToDelete: this.$route
+        })
+          .then(response => {
+            this.generateWindow()
+            this.isLoadingFromServer = true
+          })
+          .finally(() => {
+            this.isLoaded = true
+          })
+      }
+    },
+    generateWindow() {
+      this.windowMetadata = this.getterWindow
+      if (this.getterIsShowedRecordNavigation === undefined) {
+        this.listRecordNavigation = this.getterRecordList
+        if (this.windowMetadata.windowType === 'Q' || this.windowMetadata.windowType === 'M' && this.listRecordNavigation >= 10) {
+          this.isShowedRecordNavigation = true
+        } else if (this.windowMetadata.windowType === 'T') {
+          this.isShowedRecordNavigation = false
+        }
+      } else {
+        this.isShowedRecordNavigation = this.getterIsShowedRecordNavigation
+      }
+
+      this.isShowedTabChildren = this.windowMetadata.isShowedDetail
+      this.isLoaded = true
+      this.changeShowedRecordNavigation()
+    },
+    handleChangeShowedRecordNavigation(value) {
+      this.isShowedRecordNavigation = !this.isShowedRecordNavigation
+      this.changeShowedRecordNavigation()
+    },
+    handleChangeShowedPanel(value) {
+      this.isPanel = !this.isPanel
+      this.isShowedRecordPanel = !this.isShowedRecordPanel
+    },
+    changeShowedRecordNavigation() {
+      this.$store.dispatch('changeShowedRecordWindow', {
+        parentUuid: this.windowUuid,
+        containerUuid: this.windowMetadata.currentTab.uuid, // act as parentUuid
+        isShowedRecordNavigation: this.isShowedRecordNavigation
+      })
+    },
+    handleChangeShowedTabChildren() {
+      this.isShowedTabChildren = !this.isShowedTabChildren
+      this.$store.dispatch('changeShowedDetail', {
+        panelType: this.panelType,
+        containerUuid: this.windowUuid, // act as parentUuid
+        isShowedDetail: this.isShowedTabChildren
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tabs__content {
+    overflow: hidden;
+    position: relative;
+    padding-top: 0px !important;
+    padding-right: 15px !important;
+    padding-bottom: 0px !important;
+    padding-left: 15px !important;
+  }
+  .el-header {
+    background-color: #fff;
+    color: #333;
+    line-height: 21px;
+  }
+
+  .el-aside {
+    height: 100%;
+    color: #333;
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+  aside {
+    background: #fff;
+    padding: 0px;
+    margin-bottom: 0px;
+    border-radius: 2px;
+    display: block;
+    line-height: 32px;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    color: #2c3e50;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .el-main {
+    display: block;
+    -webkit-box-flex: 1;
+    flex: 1;
+    flex-basis: auto;
+    overflow: hidden;
+    height: 90vh;
+    box-sizing: border-box;
+    padding-top: 0px !important;
+    padding-right: 0px !important;
+    padding-bottom: 0px !important;
+    padding-left: 0px !important;
+  }
+  .center{
+    text-align: center;
+  }
+  .close{
+    text-align: right;
+  }
+  .w-33 {
+    width: 100%;
+    background-color: transparent;
+  }
+  .open-table-detail-mobile {
+    position: absolute;
+    right: 50%;
+    bottom: 4%;
+  }
+  .open-table-detail {
+    position: absolute;
+    right: 50%;
+    bottom: 4%;
+    display: none;
+  }
+  .open-navegation {
+    position: fixed;
+    top: 50%;
+    display: none;
+    z-index: 5;
+  }
+  .open-datatable-aside {
+    position: absolute;
+    top: 41%;
+    display: none;
+    z-index: 5;
+    right: 1%!important;
+  }
+  .close-datatable {
+    position: absolute;
+    top: 45%;
+    display: none;
+    z-index: 5;
+    right: 0%!important;
+  }
+  .button {
+    display: none;
+  }
+  .wrapper:hover .open-table-detail {
+    display: inline-block;
+  }
+  .w:hover .open-navegation {
+    display: inline-block;
+  }
+  .w:hover .open-datatable-aside {
+    display: grid;
+  }
+  .w:hover .close-datatable {
+    display: inline-block;
+  }
+  .open-detail {
+    width: 100%;
+    height: 20px;
+    position: absolute;
+    bottom: 5%;
+  }
+  .open-left {
+    width: 5%;
+    height: 97%;
+    position: absolute;
+    top: 2%;
+    left: 1%;
+  }
+  .el-button {
+    cursor: pointer;
+    background: #FFFFFF;
+    border: 1px solid #DCDFE6;
+    border-color: #DCDFE6;
+    color: white;
+    background: #008fd3;
+  }
+.vertical-panes {
+  width: 100%;
+  height: 85vh;
+  border: 1px solid #ccc;
+}
+.vertical-panes > .pane {
+  text-align: left;
+  padding: 15px;
+  overflow: hidden;
+  background: #fff;
+}
+.vertical-panes > .pane ~ .pane {
+  border-left: 1px solid #ccc;
+}
+.loading-window {
+  padding: 100px 100px;
+  height: 100%;
+}
+</style>
+<style>
+  .el-card__header {
+    background: rgba(245, 247, 250, 0.75);
+    padding: 18px 20px;
+    border-bottom: 1px solid #f5f7fa;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .split {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    height: 102%;
+    width: 100%;
+  }
+  .components-container {
+    position: relative;
+    height: 100vh;
+  }
+
+  .left-container {
+    background-color: #ffffff;
+    height: 100%;
+  }
+
+  .right-container {
+    background-color: #ffffff;
+    height: 200px;
+  }
+
+  .top-container {
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+  }
+
+  .bottom-container {
+    width: 100%;
+    background-color: #95E1D3;
+    height: 100%;
+  }
+  .splitter-pane-resizer.vertical {
+    width: 9px !important;
+    height: 100%;
+    margin-left: -10px;
+    border-left: 5px solid hsla(0,0%,100%,0);
+    border-right: 5px solid hsla(0,0%,100%,0);
+    cursor: col-resize;
+}
+.splitter-pane.vertical.splitter-paneR {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    padding-left: 10px;
+}
+</style>
+<style>
+.splitter-pane-resizer.vertical {
+    width: 11px;
+    height: 100%;
+    background: gray!important;
+    margin-left: -5px;
+    border-left: 5px solid hsla(0,0%,100%,0);
+    border-right: 5px solid hsla(0,0%,100%,0);
+    cursor: col-resize;
+  }
+</style>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index a766f04a..36787f74 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -28,7 +28,7 @@
 
     <el-row :gutter="8">
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
+        <recent-items />
       </el-col>
       <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <todo-list />
@@ -47,9 +47,10 @@ import LineChart from './components/LineChart'
 import RaddarChart from './components/RaddarChart'
 import PieChart from './components/PieChart'
 import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
+// import TransactionTable from './components/TransactionTable'
 import TodoList from './components/TodoList'
 import BoxCard from './components/BoxCard'
+import RecentItems from '@/components/ADempiere/RecentItems'
 
 const lineChartData = {
   newVisitis: {
@@ -79,9 +80,10 @@ export default {
     RaddarChart,
     PieChart,
     BarChart,
-    TransactionTable,
+    // TransactionTable,
     TodoList,
-    BoxCard
+    BoxCard,
+    RecentItems
   },
   data() {
     return {
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 9723bcce..d760a87e 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -3,11 +3,11 @@
     <div class=" clearfix">
       <pan-thumb :image="avatar" style="float: left">
         Your roles:
-        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
+        <span class="pan-info-roles">{{ currentRole }}</span>
       </pan-thumb>
       <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
       <div class="info-container">
-        <span class="display_name">{{ name }}</span>
+        <span class="display_name">{{ currentRole }}</span>
         <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
       </div>
     </div>
@@ -31,10 +31,14 @@ export default {
     }
   },
   computed: {
+    currentRole() {
+      return this.$store.getters.currentRole
+    },
     ...mapGetters([
       'name',
       'avatar',
-      'roles'
+      'roles',
+      'currentRole'
     ])
   }
 }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1720ea8f..86a53137 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -21,11 +21,6 @@ export default {
     ...mapGetters([
       'roles'
     ])
-  },
-  created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
-    }
   }
 }
 </script>
diff --git a/src/views/login/forgotPassword.vue b/src/views/login/forgotPassword.vue
new file mode 100644
index 00000000..ca0ccf5c
--- /dev/null
+++ b/src/views/login/forgotPassword.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="login-container">
+    <el-form ref="forgotForm" :model="forgotForm" class="login-form" auto-complete="off" label-position="left">
+      <el-row>
+        <el-col :span="3">
+          <img src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="image">
+        </el-col>
+        <el-col :span="20">
+          <div class="title-container">
+            <h3 class="title">
+              {{ $t('route.forgotPassword') }}
+            </h3>
+            <lang-select class="set-language" />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-form-item prop="userName">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="userName"
+          v-model="forgotForm.userName"
+          :placeholder="$t('login.userNameOrEmail')"
+          type="text"
+          tabindex="1"
+          auto-complete="off"
+          @keyup.enter.native="handleSubmit"
+        />
+      </el-form-item>
+
+      <el-button
+        :disabled="isEmptyValue(forgotForm.userName)"
+        :loading="loading"
+        type="primary"
+        style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleSubmit"
+      >
+        {{ $t('login.submit') }}
+      </el-button>
+
+      <el-button type="text" style="float: left" @click.native.prevent="$router.push({ path: 'login' })">
+        {{ $t('login.title') }}
+      </el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import LangSelect from '@/components/LangSelect'
+
+export default {
+  name: 'ForgotPassword',
+  components: { LangSelect },
+  data() {
+    return {
+      forgotForm: {
+        userName: ''
+      },
+      forgotRules: {
+        userName: [{ required: true, trigger: 'blur' }]
+      },
+      loading: false
+    }
+  },
+  methods: {
+    showPwd() {
+      this.$nextTick(() => {
+        this.$refs.userName.focus()
+      })
+    },
+    handleSubmit() {
+      if (!this.isEmptyValue(this.forgotForm.userName)) {
+        this.loading = true
+        this.$store.dispatch('forgotPassword', this.forgotForm.userName)
+          .finally(() => {
+            this.loading = false
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 10px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .set-language {
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      font-size: 18px;
+      right: 0px;
+      cursor: pointer;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 27f11ef5..362641aa 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,30 +1,36 @@
 <template>
   <div class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+      <el-row>
+        <el-col :span="3">
+          <img src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="image">
+        </el-col>
+        <el-col :span="20">
+          <div class="title-container">
+            <h3 class="title">
+              {{ $t('login.title') }}
+            </h3>
+            <lang-select class="set-language" />
+          </div>
+        </el-col>
+      </el-row>
 
-      <div class="title-container">
-        <h3 class="title">
-          {{ $t('login.title') }}
-        </h3>
-        <lang-select class="set-language" />
-      </div>
-
-      <el-form-item prop="username">
+      <el-form-item prop="userName">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
         <el-input
-          ref="username"
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="username"
+          ref="userName"
+          v-model="loginForm.userName"
+          :placeholder="$t('login.userName')"
+          name="userName"
           type="text"
           tabindex="1"
           auto-complete="on"
         />
       </el-form-item>
 
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+      <el-tooltip v-model="capsTooltip" :content="$t('login.capsLock')" placement="right" manual>
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
@@ -47,26 +53,33 @@
           </span>
         </el-form-item>
       </el-tooltip>
-
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
+      <el-button :loading="loading" type="primary" style="width:100%" @click.native.prevent="handleLogin">
         {{ $t('login.logIn') }}
       </el-button>
+      <el-button
+        type="text"
+        style="float: left"
+        @click.native.prevent="$router.push({ path: 'forgotPassword' })"
+      >
+        {{ $t('route.forgotPassword') }}
+      </el-button>
+      <el-button
+        type="text"
+        style="float: right"
+        @click.native.prevent="$router.push({ path: 'userEnrollment' })"
+      >
+        {{ $t('route.userEnrollment') }}
+      </el-button>
 
-      <div style="position:relative">
+      <div>
         <div class="tips">
-          <span>{{ $t('login.username') }} : admin</span>
-          <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+          <span />
+          <span />
         </div>
         <div class="tips">
-          <span style="margin-right:18px;">
-            {{ $t('login.username') }} : editor
-          </span>
-          <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+          <span />
+          <span />
         </div>
-
-        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
-          {{ $t('login.thirdparty') }}
-        </el-button>
       </div>
     </el-form>
 
@@ -81,7 +94,6 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
 import SocialSign from './components/SocialSignin'
 
@@ -90,26 +102,26 @@ export default {
   components: { LangSelect, SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+      if ((value.trim()).length < 1) {
+        callback(new Error(this.$t('login.noValidUser')))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+      if (value.length < 1) {
+        callback(new Error(this.$t('login.noValidPassword')))
       } else {
         callback()
       }
     }
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        userName: '',
+        password: ''
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       passwordType: 'password',
@@ -131,8 +143,8 @@ export default {
     // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
+    if (this.loginForm.userName === '') {
+      this.$refs.userName.focus()
     } else if (this.loginForm.password === '') {
       this.$refs.password.focus()
     }
@@ -170,9 +182,14 @@ export default {
           this.$store.dispatch('user/login', this.loginForm)
             .then(() => {
               this.$router.push({ path: this.redirect || '/' })
-              this.loading = false
+              // this.loading = false
             })
-            .catch(() => {
+            .catch(error => {
+              if (error.code === 13) {
+                this.$message.error(this.$t('login.invalidLogin'))
+              } else {
+                this.$message.error(this.$t('login.unexpectedError'))
+              }
               this.loading = false
             })
         } else {
@@ -181,24 +198,6 @@ export default {
         }
       })
     }
-    // afterQRScan() {
-    //   if (e.key === 'x-admin-oauth-code') {
-    //     const code = getQueryObject(e.newValue)
-    //     const codeMap = {
-    //       wechat: 'code',
-    //       tencent: 'code'
-    //     }
-    //     const type = codeMap[this.auth_type]
-    //     const codeName = code[type]
-    //     if (codeName) {
-    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-    //         this.$router.push({ path: this.redirect || '/' })
-    //       })
-    //     } else {
-    //       alert('第三方登录失败')
-    //     }
-    //   }
-    // }
   }
 }
 </script>
@@ -296,7 +295,7 @@ $light_gray:#eee;
     .title {
       font-size: 26px;
       color: $light_gray;
-      margin: 0px auto 40px auto;
+      margin: 10px auto 40px auto;
       text-align: center;
       font-weight: bold;
     }
diff --git a/src/views/login/setPassword.vue b/src/views/login/setPassword.vue
new file mode 100644
index 00000000..d05242d1
--- /dev/null
+++ b/src/views/login/setPassword.vue
@@ -0,0 +1,325 @@
+<template>
+  <div v-if="verifyToken()" class="login-container">
+    <el-form ref="changePasswordForm" :rules="passwordResetRules" :model="changePasswordForm" class="login-form" auto-complete="off" label-position="left">
+      <el-row>
+        <el-col :span="3">
+          <img src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="image">
+        </el-col>
+        <el-col :span="20">
+          <div class="title-container">
+            <h3 class="title">
+              {{ $t(`login.${formName}`) }}
+            </h3>
+            <lang-select class="set-language" />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-tooltip v-model="capsTooltip" :content="$t('login.capsLock')" placement="right" auto-complete="off" manual>
+        <el-form-item prop="password">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="changePasswordForm.password"
+            :type="passwordType"
+            :placeholder="$t('login.passwordNew')"
+            tabindex="1"
+            auto-complete="off"
+            @keyup.native="checkCapslock"
+            @blur="capsTooltip = false"
+          />
+          <span class="show-pwd" @click="showPassword">
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
+
+      <el-tooltip v-model="capsTooltipNew" :content="$t('login.capsLock')" placement="right" manual>
+        <el-form-item prop="passwordConfirm">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordConfirmType + 'New'"
+            ref="passwordConfirm"
+            v-model="changePasswordForm.passwordConfirm"
+            :type="passwordConfirmType"
+            :placeholder="$t('login.passwordConfirmNew')"
+            tabindex="2"
+            auto-complete="off"
+            @keyup.native="checkCapslockNew"
+            @blur="capsTooltipNew = false"
+            @keyup.enter.native="handleSubmit"
+          />
+          <span class="show-pwd" @click="showPasswordConfirm">
+            <svg-icon :icon-class="passwordConfirmType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
+
+      <el-button
+        :disabled="isEmptyValue(changePasswordForm.password) || changePasswordForm.password !== changePasswordForm.passwordConfirm"
+        :loading="loading"
+        type="primary"
+        style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleSubmit"
+      >
+        {{ $t('login.submit') }}
+      </el-button>
+
+      <el-button type="text" style="float: left" @click.native.prevent="$router.push({ path: 'login' })">
+        {{ $t('login.title') }}
+      </el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import LangSelect from '@/components/LangSelect'
+
+export default {
+  name: 'ChangePassword',
+  components: { LangSelect },
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (this.isEmptyValue(value)) {
+        callback(new Error(this.$t('notifications.fieldMandatory')))
+      } else {
+        callback()
+      }
+    }
+    const validateNewPass = (rule, value, callback) => {
+      if (this.isEmptyValue(value)) {
+        callback(new Error(this.$t('notifications.fieldMandatory')))
+      } else if (value !== this.changePasswordForm.password) {
+        callback(new Error(this.$t('login.passwordAndConfirmNotMatch')))
+      } else {
+        callback()
+      }
+    }
+    return {
+      changePasswordForm: {
+        password: '',
+        passwordConfirm: ''
+      },
+      passwordResetRules: {
+        password: [{ validator: validatePass, trigger: 'blur' }],
+        passwordConfirm: [{ validator: validateNewPass, trigger: 'blur' }]
+      },
+      loading: false,
+      passwordType: 'password',
+      passwordConfirmType: 'password',
+      capsTooltip: false,
+      capsTooltipNew: false
+    }
+  },
+  computed: {
+    formName() {
+      return this.$route.name
+    }
+  },
+  methods: {
+    checkCapslock({ shiftKey, key } = {}, isNew = false) {
+      let capsLock = false
+      if (key && key.length === 1) {
+        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
+          capsLock = true
+        } else {
+          capsLock = false
+        }
+      }
+      if (key === 'CapsLock' && capsLock === true) {
+        capsLock = false
+      }
+      if (isNew) {
+        this.capsTooltipNew = capsLock
+      } else {
+        this.capsTooltip = capsLock
+      }
+    },
+    checkCapslockNew({ shiftKey, key } = {}, isNew = true) {
+      this.checkCapslock({ shiftKey: shiftKey, key: key }, true)
+    },
+    showPassword() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    showPasswordConfirm() {
+      if (this.passwordConfirmType === 'password') {
+        this.passwordConfirmType = ''
+      } else {
+        this.passwordConfirmType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.passwordConfirm.focus()
+      })
+    },
+    handleSubmit() {
+      if (!this.isEmptyValue(this.changePasswordForm.password) && !this.isEmptyValue(this.changePasswordForm.passwordConfirm)) {
+        this.loading = true
+        let actionType = 'resetPasswordFromToken'
+        if (this.formName === 'createPassword') {
+          actionType = 'createPasswordFromToken'
+        }
+        this.$store.dispatch(actionType, {
+          token: this.$route.query.token,
+          password: this.changePasswordForm.password
+        })
+          .finally(() => {
+            this.loading = false
+          })
+      }
+    },
+    verifyToken() {
+      if (this.$route.query && this.$route.query.token && !this.isEmptyValue(this.$route.query.token)) {
+        return true
+      }
+      this.$message.error(this.$t('login.invalidToken'))
+      this.$router.push({
+        path: 'login'
+      })
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 10px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .set-language {
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      font-size: 18px;
+      right: 0px;
+      cursor: pointer;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/userEnrollment.vue b/src/views/login/userEnrollment.vue
new file mode 100644
index 00000000..97651d5b
--- /dev/null
+++ b/src/views/login/userEnrollment.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="login-container">
+    <el-form ref="enrollmentUserForm" :rules="passwordResetRules" :model="enrollmentUserForm" class="login-form" auto-complete="off" label-position="left">
+      <el-row>
+        <el-col :span="3">
+          <img src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="image">
+        </el-col>
+        <el-col :span="20">
+          <div class="title-container">
+            <h3 class="title">
+              {{ $t('login.userEnrollment') }}
+            </h3>
+            <lang-select class="set-language" />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-form-item prop="name">
+        <el-input
+          ref="name"
+          v-model="enrollmentUserForm.name"
+          :placeholder="$t('login.name')"
+          type="text"
+          tabindex="1"
+          auto-complete="off"
+          @keyup.enter.native="handleSubmit"
+        />
+      </el-form-item>
+      <el-form-item prop="userName">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="userName"
+          v-model="enrollmentUserForm.userName"
+          :placeholder="$t('login.userName')"
+          type="text"
+          tabindex="1"
+          auto-complete="off"
+          @keyup.enter.native="handleSubmit"
+        />
+      </el-form-item>
+      <el-form-item prop="eMail">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="eMail"
+          v-model="enrollmentUserForm.eMail"
+          :placeholder="$t('login.eMail')"
+          type="text"
+          tabindex="1"
+          auto-complete="off"
+          @keyup.enter.native="handleSubmit"
+        />
+      </el-form-item>
+
+      <el-tooltip v-show="isShowPassword" v-model="capsTooltip" :content="$t('login.capsLock')" placement="right" auto-complete="off" manual>
+        <el-form-item prop="password">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="enrollmentUserForm.password"
+            :type="passwordType"
+            :placeholder="$t('login.passwordNew')"
+            tabindex="1"
+            auto-complete="off"
+            @keyup.native="checkCapslock"
+            @blur="capsTooltip = false"
+          />
+          <span class="show-pwd" @click="showPassword">
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
+
+      <el-tooltip v-show="isShowPassword" v-model="capsTooltipNew" :content="$t('login.capsLock')" placement="right" manual>
+        <el-form-item prop="passwordConfirm">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordConfirmType + 'New'"
+            ref="passwordConfirm"
+            v-model="enrollmentUserForm.passwordConfirm"
+            :type="passwordConfirmType"
+            :placeholder="$t('login.passwordConfirmNew')"
+            tabindex="2"
+            auto-complete="off"
+            @keyup.native="checkCapslockNew"
+            @blur="capsTooltipNew = false"
+            @keyup.enter.native="handleSubmit"
+          />
+          <span class="show-pwd" @click="showPasswordConfirm">
+            <svg-icon :icon-class="passwordConfirmType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
+
+      <el-button
+        :disabled="!isReadyFormSubmit"
+        :loading="loading"
+        type="primary"
+        style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleSubmit"
+      >
+        {{ $t('login.submit') }}
+      </el-button>
+
+      <el-button type="text" style="float: left" @click.native.prevent="$router.push({ path: 'login' })">
+        {{ $t('login.title') }}
+      </el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import LangSelect from '@/components/LangSelect'
+
+export default {
+  name: 'UserEnrollment',
+  components: { LangSelect },
+  data() {
+    const validateField = (rule, value, callback) => {
+      if (this.isEmptyValue(value)) {
+        callback(new Error(this.$t('notifications.fieldMandatory')))
+      } else {
+        callback()
+      }
+    }
+    const validatePass = (rule, value, callback) => {
+      if (this.isEmptyValue(value) && this.isShowPassword) {
+        callback(new Error(this.$t('notifications.fieldMandatory')))
+      } else {
+        callback()
+      }
+    }
+    const validateNewPass = (rule, value, callback) => {
+      if (this.isEmptyValue(value) && this.isShowPassword) {
+        callback(new Error(this.$t('notifications.fieldMandatory')))
+      } else if (value !== this.enrollmentUserForm.password) {
+        callback(new Error(this.$t('login.passwordAndConfirmNotMatch')))
+      } else {
+        callback()
+      }
+    }
+
+    /**
+     * eMail pattern by:
+     * https://github.com/EdwinBetanc0urt/validateInput/
+     */
+    const eMailPattern = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{1,})$/i
+    const validateEmail = (rule, value, callback) => {
+      if (!this.eMailPattern.test(value)) {
+        callback(new Error(this.$t('notifications.invalidEmailFormat')))
+      } else {
+        callback()
+      }
+    }
+    return {
+      eMailPattern: eMailPattern,
+      enrollmentUserForm: {
+        name: '',
+        userName: '',
+        eMail: '',
+        password: '',
+        passwordConfirm: ''
+      },
+      isShowPassword: false,
+      passwordResetRules: {
+        name: [{ validator: validateField, trigger: 'blur' }],
+        userName: [{ validator: validateField, trigger: 'blur' }],
+        eMail: [
+          { validator: validateField, trigger: 'blur' },
+          { validator: validateEmail, trigger: 'blur' }
+        ],
+        password: [{ validator: validatePass, trigger: 'blur' }],
+        passwordConfirm: [{ validator: validateNewPass, trigger: 'blur' }]
+      },
+      loading: false,
+      passwordType: 'password',
+      passwordConfirmType: 'password',
+      capsTooltip: false,
+      capsTooltipNew: false
+    }
+  },
+  computed: {
+    isReadyFormSubmit() {
+      if (this.isEmptyValue(this.enrollmentUserForm.name)) {
+        return false
+      }
+      if (this.isEmptyValue(this.enrollmentUserForm.userName)) {
+        return false
+      }
+      if (this.isEmptyValue(this.enrollmentUserForm.eMail) || !this.eMailPattern.test(this.enrollmentUserForm.eMail)) {
+        return false
+      }
+      if (this.isShowPassword) {
+        if (this.isEmptyValue(this.enrollmentUserForm.password)) {
+          return false
+        }
+        if (this.enrollmentUserForm.password !== this.enrollmentUserForm.passwordConfirm) {
+          return false
+        }
+      }
+      return true
+    }
+  },
+  methods: {
+    checkCapslock({ shiftKey, key } = {}, isNew = false) {
+      let capsLock = false
+      if (key && key.length === 1) {
+        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
+          capsLock = true
+        } else {
+          capsLock = false
+        }
+      }
+      if (key === 'CapsLock' && capsLock === true) {
+        capsLock = false
+      }
+      if (isNew) {
+        this.capsTooltipNew = capsLock
+      } else {
+        this.capsTooltip = capsLock
+      }
+    },
+    checkCapslockNew({ shiftKey, key } = {}, isNew = true) {
+      this.checkCapslock({ shiftKey: shiftKey, key: key }, true)
+    },
+    showPassword() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    showPasswordConfirm() {
+      if (this.passwordConfirmType === 'password') {
+        this.passwordConfirmType = ''
+      } else {
+        this.passwordConfirmType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.passwordConfirm.focus()
+      })
+    },
+    handleSubmit() {
+      if (this.isReadyFormSubmit) {
+        this.loading = true
+        var dataToSubmit = {
+          name: this.enrollmentUserForm.name,
+          userName: this.enrollmentUserForm.userName,
+          eMail: this.enrollmentUserForm.eMail
+        }
+        if (this.isShowPassword) {
+          dataToSubmit.password = this.enrollmentUserForm.password
+        }
+        this.$store.dispatch('enrollmentUser', dataToSubmit)
+          .finally(() => {
+            this.loading = false
+          })
+      } else {
+        console.log('error submit!!')
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 10px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .set-language {
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      font-size: 18px;
+      right: 0px;
+      cursor: pointer;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index b3ef8c37..acab818f 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -94,7 +94,7 @@ export default {
   /deep/ .permission-alert {
     width: 320px;
     margin-top: 15px;
-    background-color: #f0f9eb;
+    background-color: #ffffff;
     color: #67c23a;
     padding: 8px 16px;
     border-radius: 4px;
@@ -108,4 +108,3 @@ export default {
   }
 }
 </style>
-
diff --git a/src/views/profile/components/Profile.vue b/src/views/profile/components/Profile.vue
new file mode 100644
index 00000000..68079743
--- /dev/null
+++ b/src/views/profile/components/Profile.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="user-profi">
+    <router-link to="/profile/index">
+      <img v-if="logo" :src="logo" class="sidebar-logo">
+      <p style="float: right;max-width: 150px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ getRol.clientName }}</p>
+    </router-link>
+    <roles-navbar />
+  </div>
+</template>
+
+<script>
+import RolesNavbar from '@/views/profile/components/RolesNavbar'
+export default {
+  components: { RolesNavbar },
+  props: {
+    user: {
+      type: Object,
+      default: () => {
+        return {
+          name: '',
+          email: '',
+          avatar: '',
+          roles: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      logo: 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4?imageView2/1/w/80/h/80'
+    }
+  },
+  computed: {
+    getRol() {
+      return this.$store.getters['user/getRol']
+    },
+    getRoles() {
+      return this.$store.getters['user/getRoles']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ .box-center {
+   margin: 0 auto;
+   display: table;
+ }
+
+ .text-muted {
+   color: #777;
+ }
+
+ .user-profile {
+   .user-name {
+     font-weight: bold;
+   }
+
+   .box-center {
+     padding-top: 10px;
+   }
+
+   .user-role {
+     padding-top: 10px;
+     font-weight: 400;
+     font-size: 14px;
+   }
+
+   .box-social {
+     padding-top: 30px;
+
+     .el-table {
+       border-top: 1px solid #dfe6ec;
+     }
+   }
+
+   .user-follow {
+     padding-top: 20px;
+   }
+ }
+
+ .user-bio {
+   margin-top: 20px;
+   color: #606266;
+
+   span {
+     padding-left: 4px;
+   }
+
+   .user-bio-section {
+     font-size: 14px;
+     padding: 15px 0;
+
+     .user-bio-section-header {
+       border-bottom: 1px solid #dfe6ec;
+       padding-bottom: 10px;
+       margin-bottom: 10px;
+       font-weight: bold;
+     }
+   }
+ }
+</style>
diff --git a/src/views/profile/components/RolesNavbar.vue b/src/views/profile/components/RolesNavbar.vue
new file mode 100644
index 00000000..df207b5d
--- /dev/null
+++ b/src/views/profile/components/RolesNavbar.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-form>
+    <el-select
+      v-model="value"
+      :filterable="!isMobile"
+      value-key="key"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="(rol, key) in getRolesList"
+        :key="key"
+        :label="rol.name"
+        :value="rol.uuid"
+        :disabled="isEmptyValue(rol.uuid)"
+      />
+    </el-select>
+  </el-form>
+</template>
+
+<script>
+import { getLanguage } from '@/lang'
+import { showMessage } from '@/utils/ADempiere/notification'
+import { resetRouter } from '@/router'
+
+export default {
+  name: 'RolesNavbar',
+  data() {
+    return {
+      value: '',
+      options: [],
+      languageList: [],
+      language: ''
+    }
+  },
+  computed: {
+    getRol() {
+      return this.$store.getters['user/getRol']
+    },
+    getRolesList() {
+      return this.$store.getters['user/getRoles']
+    },
+    languageCookie() {
+      return getLanguage()
+    },
+    getterLanguageList() {
+      return this.$store.getters.getLanguageList(this.getRol.uuid)
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    permissionRoutes() {
+      return this.$store.getters.permission_routes
+    }
+  },
+  watch: {
+    'getRol.uuid'(uuidRol) {
+      this.value = uuidRol
+    }
+  },
+  created() {
+    this.value = this.getRol.uuid
+    this.getLanguageData()
+  },
+  methods: {
+    showMessage,
+    resetRouter,
+    handleChange(valueSelected) {
+      this.$message({
+        message: this.$t('notifications.loading'),
+        iconClass: 'el-icon-loading'
+      })
+      this.$store.dispatch('user/changeRoles', valueSelected)
+        .then(response => {
+          this.showMessage({
+            message: this.$t('notifications.successChangeRole'),
+            type: 'success'
+          })
+          this.$store.dispatch('permission/generateRoutes')
+            .then(response => {
+              this.resetRouter()
+              response.forEach((element) => {
+                this.$router.resolve(element)
+              })
+              this.$router.addRoutes(response)
+            })
+          this.$store.dispatch('getRecentItemsFromServer')
+        })
+      this.$router.push({ path: '/' })
+    },
+    changeLanguage(languageValue) {
+      this.language = languageValue
+    },
+    getLanguageList(open) {
+      if (open) {
+        if (this.getterLanguageList.length) {
+          this.languageList = this.getterLanguageList
+        } else {
+          this.getLanguageData()
+        }
+      }
+    },
+    getLanguageData() {
+      var tableLanguage = 'AD_Language'
+      this.$store.dispatch('getObjectListFromCriteria', {
+        containerUuid: this.getRol.uuid,
+        tableName: tableLanguage,
+        conditions: [{
+          columnName: 'LanguageIso',
+          value: this.languageCookie
+        }],
+        isShowNotification: false
+      })
+        .then(response => {
+          this.languageList = response.map(language => {
+            return {
+              value: language.AD_Language,
+              label: language.Name
+            }
+          })
+        })
+        .catch(error => {
+          console.warn('Error getting language list:', error.message + '. Code: ', error.code)
+        })
+    }
+  }
+}
+</script>
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index c2ce1aa8..270c4694 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@@ -1,19 +1,24 @@
 <template>
   <el-card style="margin-bottom:20px;">
     <div slot="header" class="clearfix">
-      <span>About me</span>
+      <span>{{ $t('profile.aboutMe') }}</span>
     </div>
 
     <div class="user-profile">
       <div class="box-center">
         <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
           <div>Hello</div>
-          {{ user.role }}
+          {{ getRol.name }}
         </pan-thumb>
       </div>
       <div class="box-center">
-        <div class="user-name text-center">{{ user.name }}</div>
-        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
+        <div class="user-name text-center">{{ getRol.name }}</div>
+        <div class="user-role text-muted">
+          {{ $t('profile.availableRoles') }}
+          <li v-for="(item, key) in getRoles" :key="key">
+            {{ item.name | uppercaseFirst }}
+          </li>
+        </div>
       </div>
     </div>
 
@@ -69,6 +74,14 @@ export default {
         }
       }
     }
+  },
+  computed: {
+    getRol() {
+      return this.$store.getters['user/getRol']
+    },
+    getRoles() {
+      return this.$store.getters['user/getRoles']
+    }
   }
 }
 </script>
diff --git a/src/views/profile/components/recentItems.vue b/src/views/profile/components/recentItems.vue
new file mode 100644
index 00000000..a13cafa8
--- /dev/null
+++ b/src/views/profile/components/recentItems.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item
+        v-for="(item, index) of recentItems"
+        :key="index"
+        placement="top"
+        type="primary"
+        size="large"
+        :timestamp="translateDate(item.updated)"
+      >
+        <el-card @click.native="redirect(item)">
+          <h4>
+            {{ item.displayName }}
+            <el-tag v-show="checkOpened(item.menuUuid)">{{ $t('notifications.opened') }}</el-tag>
+          </h4>
+          <p>{{ item.description }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecentItems',
+  data() {
+    return {
+      recentItems: []
+    }
+  },
+  computed: {
+    getterRecentItems() {
+      return this.$store.getters.getRecentItems
+    },
+    cachedViews() {
+      return this.$store.getters.cachedViews
+    }
+  },
+  mounted() {
+    this.getRecentItems()
+    this.subscribeChanges()
+  },
+  methods: {
+    checkOpened(uuid) {
+      return this.cachedViews.includes(uuid)
+    },
+    redirect(item) {
+      if (!this.isEmptyValue(item.uuidRecord)) {
+        this.$router.push({ name: item.menuUuid, query: { action: item.uuidRecord, tabParent: 0 }})
+      } else {
+        this.$router.push({ name: item.menuUuid })
+      }
+    },
+    getRecentItems() {
+      var items = this.getterRecentItems
+      if (items === undefined || items.length < 1) {
+        this.$store.dispatch('getRecentItemsFromServer')
+          .then(response => {
+            this.recentItems = response
+          }).catch(error => {
+            console.log(error)
+          })
+      } else {
+        this.recentItems = items
+      }
+    },
+    subscribeChanges() {
+      this.$store.subscribe((mutation, state) => {
+        // The mutation comes in the format of `{ type, payload }`.
+        if (mutation.type === 'setRecentItems') {
+          this.recentItems = this.getterRecentItems
+        }
+      })
+    },
+    translateDate(value) {
+      return this.$d(new Date(value), 'long', this.language)
+    }
+  }
+}
+</script>
diff --git a/src/views/profile/components/role.vue b/src/views/profile/components/role.vue
new file mode 100644
index 00000000..7e199626
--- /dev/null
+++ b/src/views/profile/components/role.vue
@@ -0,0 +1,155 @@
+<template>
+  <el-form>
+    <el-form-item :label="$t('profile.currentRole')">
+      {{ getRol.name }}
+    </el-form-item>
+
+    <el-form-item :label="$t('profile.clientName')">
+      {{ getRol.clientName }}
+    </el-form-item>
+
+    <el-form-item :label="$t('profile.description')">
+      {{ getRol.description }}
+    </el-form-item>
+
+    <el-form-item :label="$t('profile.changeRole')">
+      <el-select
+        v-model="valueRol"
+        :filterable="!isMobile"
+        value-key="key"
+        @change="handleChange"
+      >
+        <el-option
+          v-for="(rol, key) in getRolesList"
+          :key="key"
+          :label="rol.name"
+          :value="rol.uuid"
+          :disabled="isEmptyValue(rol.uuid)"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item :label="$t('profile.changeLanguage')">
+      <el-select
+        v-model="language"
+        :filterable="true"
+        value-key="key"
+        :placeholder="$t('profile.changeLanguagePlaceholder')"
+        @visible-change="getLanguageList"
+        @change="changeLanguage"
+      >
+        <el-option
+          v-for="item in languageList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { getLanguage } from '@/lang'
+import { showMessage } from '@/utils/ADempiere'
+import { resetRouter } from '@/router'
+
+export default {
+  name: 'ProfileRole',
+  data() {
+    return {
+      valueRol: '',
+      options: [],
+      languageList: [],
+      language: ''
+    }
+  },
+  computed: {
+    getRol() {
+      return this.$store.getters['user/getRol']
+    },
+    getRolesList() {
+      return this.$store.getters['user/getRoles']
+    },
+    languageCookie() {
+      return getLanguage()
+    },
+    getterLanguageList() {
+      return this.$store.getters.getLanguageList(this.getRol.uuid)
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    permissionRoutes() {
+      return this.$store.getters.permission_routes
+    }
+  },
+  watch: {
+    'getRol.uuid'(uuidRol) {
+      this.valueRol = uuidRol
+    }
+  },
+  created() {
+    this.valueRol = this.getRol.uuid
+    this.getLanguageData()
+  },
+  methods: {
+    showMessage,
+    resetRouter,
+    handleChange(valueSelected) {
+      this.$message({
+        message: this.$t('notifications.loading'),
+        iconClass: 'el-icon-loading'
+      })
+      this.$store.dispatch('user/changeRoles', valueSelected)
+        .then(response => {
+          this.showMessage({
+            message: this.$t('notifications.successChangeRole'),
+            type: 'success'
+          })
+          this.$store.dispatch('permission/generateRoutes')
+            .then(response => {
+              this.resetRouter()
+              response.forEach(element => {
+                this.$router.resolve(element)
+              })
+              this.$router.addRoutes(response)
+            })
+          this.$store.dispatch('getRecentItemsFromServer')
+        })
+    },
+    changeLanguage(languageValue) {
+      this.language = languageValue
+    },
+    getLanguageList(open) {
+      if (open) {
+        if (this.getterLanguageList.length) {
+          this.languageList = this.getterLanguageList
+        } else {
+          this.getLanguageData()
+        }
+      }
+    },
+    getLanguageData() {
+      var tableLanguage = 'AD_Language'
+      this.$store.dispatch('getObjectListFromCriteria', {
+        containerUuid: this.getRol.uuid,
+        tableName: tableLanguage,
+        query: `SELECT * FROM ${tableLanguage}`,
+        whereClause: `LanguageIso = '${this.languageCookie}' AND IsActive = 'Y'`,
+        isShowNotification: false
+      })
+        .then(response => {
+          this.languageList = response.map(language => {
+            return {
+              value: language.AD_Language,
+              label: language.Name
+            }
+          })
+        })
+        .catch(error => {
+          console.warn('Error getting language list:', error.message + '. Code: ', error.code)
+        })
+    }
+  }
+}
+</script>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 87e4f94f..1e901d23 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -10,14 +10,11 @@
         <el-col :span="18" :xs="24">
           <el-card>
             <el-tabs v-model="activeTab">
-              <el-tab-pane label="Activity" name="activity">
-                <activity />
+              <el-tab-pane :label="$t('profile.role')" name="role">
+                <role />
               </el-tab-pane>
-              <el-tab-pane label="Timeline" name="timeline">
-                <timeline />
-              </el-tab-pane>
-              <el-tab-pane label="Account" name="account">
-                <account :user="user" />
+              <el-tab-pane :label="$t('profile.recentItems')" name="recentItems">
+                <recent-items />
               </el-tab-pane>
             </el-tabs>
           </el-card>
@@ -31,17 +28,16 @@
 <script>
 import { mapGetters } from 'vuex'
 import UserCard from './components/UserCard'
-import Activity from './components/Activity'
-import Timeline from './components/Timeline'
-import Account from './components/Account'
+import RecentItems from '@/views/profile/components/recentItems'
+import Role from '@/views/profile/components/role'
 
 export default {
   name: 'Profile',
-  components: { UserCard, Activity, Timeline, Account },
+  components: { UserCard, Role, RecentItems },
   data() {
     return {
       user: {},
-      activeTab: 'activity'
+      activeTab: 'role'
     }
   },
   computed: {
diff --git a/vue.config.js b/vue.config.js
index 41a7f600..265ba32b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'vue Element Admin' // page title
+const name = defaultSettings.title || 'Adempiere Vue' // page title
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run