Jun 12: [FIX] Bug Fixed 'pos_restaurant_web_menu'

pos_restaurant_web_menu/README.rst

@@ -0,0 +1,50 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+   :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+   :alt: License: AGPL-3
+
+POS Restaurant Web Menu
+=======================
+This module help to create Pos Order from POS Restaurant Web Menu.From menu
+item 'Mobile Menu' in POS dash board can redirect to POS Restaurant Web Menu
+page and add items to cart and place the order.
+
+Configuration
+=============
+* Enable pos web menu from configuration.
+* User can view pos restaurant web menu and create orders.
+
+License
+-------
+Affero General Public License v3.0 (AGPL v3)
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+Developer : (V16) Developer Anagha S,
+Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

pos_restaurant_web_menu/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import controllers
+from . import models

pos_restaurant_web_menu/__manifest__.py

@@ -0,0 +1,55 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'POS Restaurant Web Menu',
+    'version': '16.0.1.0.0',
+    'category': 'Point of Sale',
+    'summary': 'This module help to view Pos Restaurant Website Menu',
+    'description': """This module create pos restaurant website menu for 
+     Restaurant and create new order from web and generate Qr code of POS App 
+     that allows customers to view the menu on their smartphone.""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['pos_restaurant'],
+    'data': [
+        'report/pos_restaurant_web_menu_reports.xml',
+        'report/pos_restaurant_web_menu_report_templates.xml',
+        'views/pos_restaurant_web_menu_templates.xml',
+        'views/res_config_settings_views.xml',
+        'views/pos_config_views.xml',
+    ],
+    'assets': {
+        'web.assets_frontend': [
+            'pos_restaurant_web_menu/static/src/css/pos_restaurant_web_menu.css',
+            'pos_restaurant_web_menu/static/src/js/pos_restaurant_web_menu.js',
+        ],
+    },
+    'images': [
+        'static/description/banner.jpg',
+    ],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

pos_restaurant_web_menu/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import pos_restaurant_web_menu

pos_restaurant_web_menu/controllers/pos_restaurant_web_menu.py

@@ -0,0 +1,76 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+import base64
+from odoo import http, modules
+from odoo.http import request
+from odoo.tools import file_open
+
+
+class PosRestaurantWebMenu(http.Controller):
+    """ This is the controller for the POS Web Menu App
+        There is one main route that the user will use to access the
+        POS Web menu: /menu"""
+
+    @http.route("/menu/<config_id>", auth="public", website=True, sitemap=True)
+    def pos_web_menu_start(self, config_id=None):
+        """This route will render the LANDING PAGE of the POS Web App
+        And it will pass the needed data to the template: the list of products
+        by category, pos_config_id, table_id, session info...
+        After that the user will be able to navigate to products and cart
+        pages to the server, using client side routing."""
+        pos_config_sudo = request.env["pos.config"].sudo().browse(
+            int(config_id))
+        current_session = pos_config_sudo.current_session_id
+        pos_floor = pos_config_sudo.mapped('floor_ids')
+        table = {}
+        for floor in pos_floor:
+            table[floor.name] = request.env['restaurant.table'].sudo().search(
+                [('floor_id', '=', floor.id)])
+        image_path = modules.get_module_resource(
+            "pos_restaurant_web_menu", "static/src/img",
+            "default_background.jpg")
+        bg_image = base64.b64encode(file_open(image_path, "rb").read())
+        products = request.env["product.product"].sudo().search(
+            [('available_in_pos', '=', 'True')])
+        customers = request.env["res.partner"].search([])
+        pos_category = products.mapped('pos_categ_id.name')
+        pos_category.sort()
+        currency = request.env.company.currency_id.symbol
+        data = {category: products.filtered(
+            lambda pos: pos.pos_categ_id.name == category) for category in
+            pos_category}
+        return request.render(
+            'pos_restaurant_web_menu.pos_restaurant_menu_index',
+            {'page_background': bg_image, 'table': table, 'data': data,
+             'config_id': config_id, 'session_info': current_session,
+             'customers': customers, 'currency': currency})
+
+    @http.route("/product/pos_cart", type='json', auth='public')
+    def pos_web_cart(self, product_id):
+        """ Get information about the product for pos web cart.
+        :param int product_id: The ID of the product.
+        :return dict: A dictionary containing product information."""
+        product = request.env['product.product'].sudo().browse(
+            int(product_id))
+        currency = request.env.company.currency_id.symbol
+        return {'id': product_id, 'display_name': product.display_name,
+                'lst_price': product.lst_price, 'currency': currency}

pos_restaurant_web_menu/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <pos_restaurant_web_menu>
+
+#### 11.06.2024
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for POS Restaurant Web Menu

pos_restaurant_web_menu/models/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import pos_config
+from . import res_config_settings

pos_restaurant_web_menu/models/pos_config.py

@@ -0,0 +1,112 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from typing import Optional
+from odoo import Command, fields, models, _
+from odoo.exceptions import UserError
+
+
+class PosConfig(models.Model):
+    """Inherit pos configuration and add new fields."""
+    _inherit = 'pos.config'
+
+    web_menu_view_mode = fields.Boolean(
+        string="POS web Menu",
+        help="Allow customers to view the menu on their phones.")
+    web_qr_code = fields.Binary(
+        string='QRcode',
+        help='Qr code of POS App that allows customers to view the menu on '
+             'their smartphone.')
+
+    def _get_web_menu_route(self, table_id: Optional[int] = None) -> str:
+        """Return url for pos web menu with pos config_id and table_id."""
+        self.ensure_one()
+        base_route = f"/menu/{self.id}"
+        table_route = ""
+        table = self.env["restaurant.table"].search(
+            [("active", "=", True), ("id", "=", table_id)], limit=1)
+        if table:
+            table_route = f"&table_identifier={table.identifier}"
+        return f"{base_route}?{table_route}"
+
+    def preview_pos_web_menu_url(self):
+        """Return Url action for the pos web menu on clicking the menu item on
+        dashboard."""
+        self.ensure_one()
+        # Raise user error if session not opened yet
+        if not self.current_session_id:
+            raise UserError(
+                _('The restaurant is closed. You cannot browse the menu'))
+        return {"type": "ir.actions.act_url",
+                "url": self._get_web_menu_route(),
+                "target": "new"}
+
+    def _generate_unique_id(self, pos_session_id: int, table_id: int,
+                            item_number: int) -> str:
+        """A unique pos reference will be generated."""
+        first_part = f"{int(pos_session_id):05d}"
+        second_part = f"{int(table_id):03d}"
+        third_part = f"{int(item_number):04d}"
+        return f"Web-Order {first_part}-{second_part}-{third_part}"
+
+    def create_order_from_web(self, cart_item, table, customer):
+        """Pos order created
+        :param dict cart_item: items added to pos web cart;
+        :param int table: id of selected table from pos cart;
+        :param int customer: id of selected customer;
+        """
+        session_id = self.current_session_id
+        pos_order = self.env['pos.order'].sudo().search(
+            [('user_id', '=', self.env.user.id), ('state', '=', 'draft'),
+             ('table_id', '=', int(table))], limit=1)
+        total = sum(item['lst_price'] for item in cart_item)
+        unique_id = self._generate_unique_id(session_id.id, table,
+                                             len(cart_item))
+        # if there is no existing order in draft stage of pos order new
+        # order will be created. Otherwise, product will be added to existing order.
+        if not pos_order:
+            order_item = {
+                'session_id': session_id.id,
+                'pos_reference': unique_id,
+                'table_id': int(table),
+                'partner_id': int(customer),
+                'amount_total': total,
+                'amount_tax': 0.0,
+                'amount_paid': 0.0,
+                'amount_return': 0.0}
+            pos_order = self.env['pos.order'].create(order_item)
+        for item in cart_item:
+            if pos_order.partner_id.id != int(customer):
+                return "False"
+            line_product = pos_order.lines.filtered(
+                lambda p: p.full_product_name == item['display_name'])
+            if not line_product:
+                total += item['lst_price']
+                pos_lines = {'full_product_name': item['display_name'],
+                             'product_id': int(item['id']),
+                             'customer_note': item['cust_note'],
+                             'price_unit': item['lst_price'],
+                             'price_subtotal': item['lst_price'],
+                             'price_subtotal_incl': item['lst_price'],
+                             'total_cost': 50}
+                pos_order.write({'lines': [Command.create(pos_lines), ]})
+            quantity = line_product.qty
+            line_product.write({'qty': quantity + 1})

pos_restaurant_web_menu/models/res_config_settings.py

@@ -0,0 +1,77 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    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 AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from io import BytesIO
+from odoo import fields, models, _
+from odoo.exceptions import UserError
+try:
+    import qrcode
+except ImportError:
+    qrcode = None
+try:
+    import base64
+except ImportError:
+    base64 = None
+
+
+class ResConfigSettings(models.TransientModel):
+    """Add new fields to configuration settings for viewing web menu for
+    pos restaurant."""
+    _inherit = 'res.config.settings'
+
+    pos_restaurant_web_menu_view_mode = fields.Boolean(
+        string="Pos Web Menu",
+        help="Allow customers to view the menu on their phones.",
+        related='pos_config_id.web_menu_view_mode', readonly=False)
+    pos_web_qr_code = fields.Binary(
+        string='QR code', related='pos_config_id.web_qr_code', readonly=False,
+        help='Qr code of POS App that allows customers to view the menu on '
+             'their smartphone.')
+
+    def generate_table_qr_code(self):
+        """Generate qr code on pos order having details of order in
+        current session"""
+        base_url = self.env['ir.config_parameter'].sudo().get_param(
+            'web.base.url')
+        session_id = self.pos_config_id.current_session_id.id
+        if qrcode and base64 and session_id:
+            qr = qrcode.QRCode(
+                version=3,
+                error_correction=qrcode.constants.ERROR_CORRECT_L,
+                box_size=4,
+                border=4, )
+            qr.add_data(base_url + self.pos_config_id._get_web_menu_route())
+            qr.make(fit=True)
+            img = qr.make_image()
+            temp = BytesIO()
+            img.save(temp, format="PNG")
+            qr_image = base64.b64encode(temp.getvalue())
+            self.write({'pos_web_qr_code': qr_image})
+        else:
+            raise UserError(
+                _('Necessary Requirements To Run This Operation Is Not '
+                  'Satisfied.Please open new session.'))
+        data = {'image': self.pos_web_qr_code,
+                'company': self.env.company.name}
+        report_action = self.env.ref(
+            'pos_restaurant_web_menu.'
+            'pos_restaurant_web_menu_qr_code').report_action(self, data=data)
+        return report_action

pos_restaurant_web_menu/report/pos_restaurant_web_menu_report_templates.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    POS web menu QR code report-->
+    <template id="pos_restaurant_web_menu_qr_report_template">
+        <t t-call="web.basic_layout">
+            <div class="page">
+                <div class="text-center">
+                    <h2>QR Code</h2>
+                    <br/>
+                    <img class="qr-code-img" style="width:420px;height:420px;"
+                         t-attf-src="data:image/png;base64,{{image}}"/>
+                    <br/>
+                    <span class="text-center">
+                        <t t-esc="company"/>
+                    </span>
+                </div>
+            </div>
+        </t>
+    </template>
+</odoo>

pos_restaurant_web_menu/report/pos_restaurant_web_menu_reports.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    POS report contain qrcode of pos web for customers-->
+    <record id="pos_restaurant_web_menu_qr_code" model="ir.actions.report">
+        <field name="name">qr.codes</field>
+        <field name="model">pos.config</field>
+        <field name="report_type">qweb-pdf</field>
+        <field name="report_name">pos_restaurant_web_menu.pos_restaurant_web_menu_qr_report_template</field>
+        <field name="report_file">pos_restaurant_web_menu.pos_restaurant_web_menu_qr_report_template</field>
+        <field name="print_report_name">"QR codes"</field>
+        <field name="binding_model_id" ref="model_pos_config"/>
+        <field name="binding_type">report</field>
+    </record>
+</odoo>

pos_restaurant_web_menu/static/description/index.html

@@ -0,0 +1,664 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    Pos Restaurant Web Menu</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    This Module Create Pos Restaurant Website Menu For
+                    Restaurant And Create New Order From Website And Generate Qr Code Of
+                    POS App That Allows Customers To View The Menu On Their
+                    Smartphone</p>
+                <!-- END OF APP HERO -->
+                <img src="assets/screenshots/hero.gif" class="img-responsive"
+                     style="width: 100%; margin-left: auto; margin-right: auto;"/>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom:2px solid #714B67; padding:15px 0px; margin-top:300px">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color:#F5F5F5; border-radius:0px; width:40px; height:40px">
+        <img src="assets/misc/compass.png">
+    </div>
+    <h2 class="mt-2"
+        style="font-family:'Montserrat', sans-serif; font-size:24px; font-weight:bold">
+        Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+            more about this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            features of this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            screenshots for this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        This Module Create Pos Web Menu for Restaurant And
+        Create New Order From Web
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Features
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Configure the menu from pos dashboard for restaurant.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Show Prices And Image Of Menu Products.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Can Add Products To Pos Cart And View them. From The Cart Can Place The Order by Selecting Table.</span>
+        </div>
+    </div>
+    <div class="d-flex align-items-center"
+         style="margin-top: 30px; margin-bottom: 30px">
+        <img src="assets/misc/check-box.png" class="mr-2"/>
+        <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">If a Table Already has an Order, the Product Will be Added to the Existing Order.</span>
+    </div>
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Available in Odoo 16.0 Community and Enterprise Edition.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Can Generate QR code that Allow Customer to View the Menu on their Phone.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Pos Configuration settings
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Go to Point of sale -> configuration(bar/Restaurant)
+                -> Enable Pos Web Menu
+                Then back to POS Dashboard Can see new Menu item 'Mobile
+                Menu'.</p>
+            <img src="assets/screenshots/pos_web_menu1.png"
+                 class="img-thumbnail"><br/>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                On click 'Mobile Menu' will Redirect to
+                New Page Pos Restaurant Web Menu.</p>
+            <img src="assets/screenshots/pos_web_menu2.png"
+                 class="img-thumbnail" width="1470px;">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Pos Restaurant Web Menu
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                From the New Page Able to See all Category wise Products
+                Available in POS with Sale Price.
+                From the Cart we can Select the Table and Place the Order for
+                the Product. Corresponding Order will be Created.<br/>
+            </p>
+            <img src="assets/screenshots/pos_web_menu3.png"
+                 class="img-thumbnail" width="1470px;">
+            <img src="assets/screenshots/pos_web_menu4.png"
+                 class="img-thumbnail" width="1470px;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Mobile View for pos Restaurant Web Menu is Available.</p>
+            <img src="assets/screenshots/pos_web_menu5.png"
+                 class="img-thumbnail" width="1470px;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Can Add Needed Product to Cart
+                and View the Cart. Choose Table and Customer. Click 'Order'.</p>
+            <img src="assets/screenshots/pos_web_menu6.png"
+                 class="img-thumbnail" width="1470px;">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Order Will Be Created.
+            </h3>
+            <img src="assets/screenshots/pos_web_menu7.png"
+                 class="img-thumbnail" width="1470px;"><br/>
+            <img src="assets/screenshots/pos_web_menu8.png"
+                 class="img-thumbnail" width="1470px;">
+            <img src="assets/screenshots/pos_web_menu9.png"
+                 class="img-thumbnail" width="1470px;">
+            <img src="assets/screenshots/pos_web_menu10.png"
+                 class="img-thumbnail" width="1470px;">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Generate QR Code For Orders
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Go to Point of Sale -> Configuration(bar/Restaurant)
+                -> Click Button Generate Qr code.<br/>Qr code will be Generated
+                And on Scanning Customer Can View Menu on Their Phone.
+            </p>
+            <img src="assets/screenshots/pos_web_menu11.png"
+                 class="img-thumbnail" width="1470px;"><br/>
+        </div>
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/dashboard_pos/#"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/multi_branch_pos/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/dynamic_product_fields/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/pos_access_right_hr/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/pos_credit_limit/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/point_of_sale_logo/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+            <span class="carousel-control-next-icon"><i
+                    class="fa fa-chevron-right"
+                    style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Support</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire Odoo Developer</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Integration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Migration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Licensing Consultancy</h6>
+        </div>
+    </div>
+</div>
+<!-- END OF OUR SERVICES -->
+<!-- OUR INDUSTRIES -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48"
+                         style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help?
+                        Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52"
+                         style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            +91 8606827707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

pos_restaurant_web_menu/static/src/css/pos_restaurant_web_menu.css

@@ -0,0 +1,34 @@
+#pos_product_card {
+    cursor: pointer;
+    gap:10px;
+    padding:10px;
+    display:flex;
+    width: 250px;
+    margin-left: 50px;
+    margin-top: 25px;
+    background-color: darkgray;
+}
+.add_to_cart_pos{
+   position: absolute;
+    right: 0;
+    bottom: 5px;
+    left: 160px;
+}
+#order_details{
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+#tables_id{
+    margin-left: 26px;
+    margin-bottom: 10px;
+}
+@media screen and (max-width: 600px) {
+  #pos_product_card {
+    width: 100%;
+    display: block;
+    margin-bottom: 20px;
+  }

pos_restaurant_web_menu/static/src/js/pos_restaurant_web_menu.js

@@ -0,0 +1,90 @@
+odoo.define('pos_restaurant_web_menu.web_menu', function (require) {
+"use strict";
+    /**
+        * The purpose of this module is to add the PosRestaurantWebMenu in the public
+        widget registries.
+    */
+    var PublicWidget = require('web.public.widget');
+    var rpc = require('web.rpc');
+    var core = require('web.core');
+    var qweb = core.qweb;
+    var count=0;
+    var cart_item = [];
+    var PosWebMenu = PublicWidget.Widget.extend({
+        selector:'.pos_web_menu_container',
+        events: {
+            'click .view_product_list': '_view_product_page',
+            'click .add_to_cart_pos': '_onClick',
+            'click .o_pos_web_menu_button': '_view_cart',
+            'click .pos_web_order': '_make_an_order',
+            'click .button_back': 'back'
+        },
+        //   Back button for pos web menu
+        back: function(ev){
+            this.$el.find('.pos_web_main').show()
+            this.$el.find('.pos_web_cart').show()
+        },
+        //    Clicked Product will be added to the cart as table
+        _onClick: function (ev) {
+            var id = this.$(ev.currentTarget).attr("data-value");
+            var self = this;
+            var product_id = parseInt(id)
+            var amount = 0
+            rpc.query({
+                route: '/product/pos_cart',
+                params: {
+                    product_id: parseInt(product_id)
+                },
+            }).then(function (data) {
+                amount = data['lst_price']
+                cart_item.push(data)
+                self.$el.find("tbody").append("<tr id='demo'><td><span>"+data['display_name']+"</span></td><td><span>"+data['currency']+ amount+"</span></td><td><input type='text' width='30%' class='form-control' placeholder='Add internal note..' /></td><tr>");
+            });
+            self.$el.find(".cart_products").text((cart_item.length+1));
+        },
+        //  view cart for POS
+        _view_cart: function (ev){
+            this.$el.find(".pos_web_main").hide()
+            this.$el.find(".pos_web_cart").show()
+        },
+        // Create an order or add product to existing order in drafted state if exists
+        _make_an_order: function (ev) {
+            var inputs, index, note=[];
+            var self = this;
+            var config_id = this.$('.o_pos_web_menu_button').attr("data-value")
+            var table = this.$('#tables_id').val()
+            var customer = this.$('#customer_id').val()
+            inputs = document.getElementsByTagName('input');
+            for (index = 0; index < inputs.length; ++index) {
+            // deal with inputs[index] element.
+                note.push(inputs[index].value)
+            }
+            // Internal note  added to cart_item array
+            $.each(cart_item, function(index, obj) {
+                obj.cust_note = note[index];
+            });
+            // Call a method in pos_config to create order
+            rpc.query({
+                model: 'pos.config',
+                method: 'create_order_from_web',
+                args:[parseInt(config_id),cart_item,parseInt(table),parseInt(customer)]
+            }).then(function(data){
+                if(data === "False") {
+                    self.$el.find("#alert").show()
+                    self.$el.find("#alert").text("Order already exists for this table. Please select a different table or try again later.")
+                }
+                else{
+                    location.reload();
+                }
+            });
+        },
+        //    To view Product list on clicking view menu on landing page of pos web menu
+        _view_product_page: function(ev){
+            this.$el.find(".pos_web_front_page").hide();
+            this.$el.find(".pos_web_product_page").show();
+        },
+    });
+    PublicWidget.registry.PosWebMenu = PosWebMenu;
+    return PosWebMenu;
+});
+

pos_restaurant_web_menu/views/pos_config_views.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<odoo>
+    <!--  Add new Menu to point of sale  Dashboard view for Restaurant-->
+    <record id="view_pos_config_kanban" model="ir.ui.view">
+        <field name="name">pos.config.view.kanban.inherit.pos.web.menu</field>
+        <field name="model">pos.config</field>
+        <field name="inherit_id" ref="point_of_sale.view_pos_config_kanban"/>
+        <!--  It will show the title on dashboard of POS if Mobile menu is enabled-->
+        <field name="arch" type="xml">
+            <xpath expr="//div[hasclass('o_kanban_card_header_title')]"
+                   position="after">
+                <div class="badge text-bg-info o_kanban_inline_block me-2"
+                     attrs="{'invisible': [('web_menu_view_mode','=',False)]}">
+                    Mobile Menu Enabled
+                </div>
+            </xpath>
+            <!--  New menu to redirect to pos web page-->
+            <xpath expr="//div[hasclass('dropdown-menu')]/div/div[hasclass('o_kanban_manage_view')]"
+                   position="inside">
+                <field name='web_menu_view_mode' invisible="1"/>
+                <div role="menuitem" class="col-12"
+                     style="border-left: none;"
+                     attrs="{'invisible': [('web_menu_view_mode', '=', False)]}">
+                    <a name='preview_pos_web_menu_url' type="object">Mobile Menu
+                    </a>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

pos_restaurant_web_menu/views/pos_restaurant_web_menu_templates.xml

@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    Template for POS Restaurant web menu-->
+    <template id="pos_restaurant_menu_index" name="POS Restaurant Web Menu">
+        <html>
+            <head>
+                <title>Pos Web Menu</title>
+                <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+                <meta http-equiv="content-type"
+                      content="text/html, charset=utf-8"/>
+                <meta name="viewport"
+                      content="width=device-width, initial-scale=1, user-scalable=no"/>
+                <meta name="apple-mobile-web-app-capable" content="yes"/>
+                <meta name="mobile-web-app-capable" content="yes"/>
+                <t t-call-assets="web.assets_frontend"/>
+            </head>
+            <body style="margin:0px;">
+                <!--   Landing page   -->
+                <div class="pos_web_menu_container">
+                    <div class="pos_web_front_page">
+                        <img t-attf-src="data:image/png;base64,{{page_background}}"
+                             width="100%" height="100%"/>
+                        <button class="view_product_list btn-warning" style="position: absolute;top: 50%; left: 50%;
+                                transform: translate(-50%, -50%);
+                                color: black;font-size: 22px;padding: 12px 24px;
+                                 border: none;cursor: pointer;border-radius: 5px;">
+                            View Menu
+                        </button>
+                    </div>
+                    <!--    End of landing page    -->
+                    <!--    Navbar  -->
+                    <div class="pos_web_product_page">
+                        <header class="bg-white shadow-sm">
+                            <nav class="o_self_order_navbar d-flex align-items-center p-2 border-bottom">
+                                <div class="button_back btn btn-primary w-30 px-2 py-3 mt-2 rounded">
+                                    Back
+                                </div>
+                                <div class="mx-auto overflow-hidden">
+                                    <h3 class="m-0 text-primary text-truncate"
+                                        style="text-align: center;">
+                                        <t t-esc="request.env.company.name"/>
+                                    </h3>
+                                </div>
+                                <span class="me-4">
+                                </span>
+                                <button class="o_pos_web_menu_button btn btn-primary w-35 px-2 py-3 mt-2 rounded"
+                                        t-att-data-value="config_id">
+                                    <div class="o_pos_cart_value d-flex align-items-center justify-content-between mx-2"
+                                         style="height: 20px;">
+                                        <i class="fa fa-shopping-cart pe-2"
+                                           aria-hidden="true"/>
+                                        <p class="cart_products"/>
+                                        <br/>
+                                    </div>
+                                </button>
+                            </nav>
+                        </header>
+                        <!--    Navbar-->
+                        <!--    Product list Page    -->
+                        <main class="pos_web_main"
+                              style="height: calc(-50px + 100vh); padding-bottom: 100px; overflow: auto;">
+                            <div class="d-flex flex-row flex-wrap"
+                                 id="pos_web_product_list">
+                                <t t-foreach="data" t-as="v">
+                                    <section class="w-100 d-flex flex-wrap">
+                                        <h3 class="w-100 m-0 mt-n1 ms-n1 pb-3 pt-4 px-3 bg-light">
+                                            <t t-esc="v"/>
+                                        </h3>
+                                        <t t-foreach="v_value" t-as="b">
+                                            <div class="card"
+                                                 id="pos_product_card"
+                                                 style="">
+                                                <div class="product-item">
+                                                    <img class="card-img-top"
+                                                         t-if="b.image_1920"
+                                                         t-attf-src="data:image/png;base64,{{b.image_1920}}"
+                                                         style="border-radius: 4px;
+                                                                padding: 10px; width: 100px; margin: 1px; height: 70px;"/>
+                                                    <img class="card-img-top"
+                                                         t-else=""
+                                                         t-attf-src="/web/static/img/placeholder.png"
+                                                         style="border-radius: 4px;
+                                                                padding: 10px; width: 100px; margin: 1px; height: 70px;"/>
+                                                    <h5>
+                                                        <t t-esc="b.display_name"
+                                                           class="productname"
+                                                           style="text-align: center;"/>
+                                                        <p class="m-0 card-text small">
+                                                            <t t-esc="currency"/>
+                                                            <t t-esc="b.lst_price"/>
+                                                        </p>
+                                                    </h5>
+                                                </div>
+                                                <div>
+                                                    <button class="add_to_cart_pos btn btn-primary"
+                                                            style="width:75px;"
+                                                            t-att-data-value="b.id">
+                                                        Add
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </t>
+                                    </section>
+                                </t>
+                            </div>
+                        </main>
+                        <!--     End of Product list Page    -->
+                        <!--     Pos Cart                   -->
+                        <main class="pos_web_cart" style="display:none;">
+                            <div style="overflow-x:auto;padding:40px;">
+                                <div style="text-align:centre;">
+                                    <h2>Pos Cart</h2>
+                                    <hr/>
+                                </div>
+                                <table class="table-striped table">
+                                    <thead style="font-size: 13px;">
+                                        <tr>
+                                            <th>product</th>
+                                            <th>Price</th>
+                                            <th>Note</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <span id="pos_web_cart_total"
+                                              style="align-item:left">
+                                        </span>
+                                    </tbody>
+                                </table>
+                                <div class="order_details"
+                                     style="margin-left: 20px;display:flex;">
+                                    <label for="tables_id"
+                                           style="margin-right: 10px;">Choose a
+                                        table:
+                                    </label>
+                                    <select name="tables_id"
+                                            id="tables_id"
+                                            class="form-select"
+                                            style="width:inherit;">
+                                        <t t-foreach="table" t-as="f">
+                                            <optgroup t-att-label="f">
+                                                <t t-foreach='f_value' t-as="t">
+                                                    <option t-esc='t.name'
+                                                            t-att-value="t.id"/>
+                                                </t>
+                                            </optgroup>
+                                        </t>
+                                    </select>
+                                </div>
+                                <div class="order_details"
+                                     style="margin-left: 20px;display:flex;">
+                                    <label for="customers"
+                                           style="margin-right: 10px;">Choose Customers:
+                                    </label>
+                                    <select name="customer_id" id="customer_id"
+                                            class="form-select"
+                                            style="width:inherit;">
+                                        <t t-foreach="customers" t-as="c">
+                                            <option t-esc='c.name'
+                                                    t-att-value="c.id"/>
+                                        </t>
+                                    </select>
+                                    <button class="btn btn-primary pos_web_order"
+                                            style="margin-left: 20px;">
+                                        Order
+                                    </button>
+                                    <br/>
+                                    <div id="alert" class="alert alert-warning" style="display:none" role="alert"/>
+                                </div>
+                            </div>
+                        </main>
+                        <!-- End of Cart-->
+                    </div>
+                </div>
+            </body>
+        </html>
+    </template>
+</odoo>

pos_restaurant_web_menu/views/res_config_settings_views.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Add new binary field in res_config_settings view of point of sale-->
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.pos.web.menu</field>
+        <field name="model">res.config.settings</field>
+        <field name="inherit_id"
+               ref="point_of_sale.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='is_table_management']" position="after">
+                <div class="col-12 col-lg-6 o_setting_box pos_web_menu"
+                     title="POS web menu" id="pos_restaurant_web_menu">
+                    <div class="o_setting_left_pane">
+                        <field name="pos_restaurant_web_menu_view_mode"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="pos_restaurant_web_menu_view_mode"
+                               string="POS web menu"/>
+                        <div class="text-muted">
+                            Allow user to see the menu from their phone.
+                        </div>
+                        <div class="content-group d-flex gap-5"
+                             attrs="{'invisible': [('pos_restaurant_web_menu_view_mode','=',False)]}">
+                            <div class="d-flex flex-column align-items-start w-50">
+                                <button class="btn-link p-0"
+                                        icon="fa-arrow-right"
+                                        name="generate_table_qr_code"
+                                        type="object"
+                                        string="Generate QR code"/>
+                                <div class="text-muted">
+                                    It will generate Qr code of POS App that
+                                    allows customers to view the menu on their
+                                    smartphone.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>