Jan 22 : [ADD] Initial Commit 'pos_theme_sapphire'

pos_theme_sapphire/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+POS THEME SAPPHIRE
+==================
+POS Theme Sapphire is a modern point of sale (POS) app theme designed to help businesses streamline their sales operations.
+
+Configuration
+=============
+* No additional configurations needed
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+* Developers: (V17) ASWIN A K
+              (V16) Dilshad A
+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_theme_sapphire/__init__.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: ASWIN A K (odoo@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/>.
+#
+################################################################################

pos_theme_sapphire/__manifest__.py

@@ -0,0 +1,52 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: ASWIN A K (odoo@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 Theme Sapphire',
+    'version': '17.0.1.0.0',
+    'category': 'Themes/Backend',
+    'summary': 'The POS Theme Sapphire Is A Responsive And Ultimate '
+               'Theme For Your Odoo V17.This Theme Will Give You '
+               'A New Experience With Odoo.',
+    'description': '''Minimalist and elegant backend POS theme for Odoo 17''',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['point_of_sale'],
+    'assets': {
+        'point_of_sale._assets_pos': [
+            'pos_theme_sapphire/static/src/js/ProductsWidget.js',
+            'pos_theme_sapphire/static/src/js/ProducScreen.js',
+            'pos_theme_sapphire/static/src/xml/**/*.xml',
+            'pos_theme_sapphire/static/src/css/custom.css',
+        ],
+    },
+    'images': [
+        'static/description/icon.png',
+        'static/description/banner.jpg',
+        'static/description/theme_screenshot.jpg',
+    ],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

pos_theme_sapphire/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <pos_theme_sapphire>
+#### 12.01.2024
+#### Version 17.0.1.0.0
+#### ADD
+
+- Initial commit POS Theme Sapphire

pos_theme_sapphire/static/description/assets/icons/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g id="Layer_2" data-name="Layer 2"><path d="m12 1a11 11 0 1 0 11 11 11.013 11.013 0 0 0 -11-11zm5.707 9.707-5 5a1 1 0 0 1 -1.414 0l-5-5a1 1 0 0 1 1.414-1.414l4.293 4.293 4.293-4.293a1 1 0 0 1 1.414 1.414z" fill="#781d96" data-original="#000000" class=""></path></g></g></svg>

pos_theme_sapphire/static/description/index.html

@@ -0,0 +1,551 @@
+<!-- HERO -->
+<div class="container shadow"  style="margin-left:calc(-42vw + 50%); width:84vw;">
+<div class="row"
+     style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+    <div class="col-lg-12 d-flex flex-column align-items-center">
+        <h1 class="text-center text-uppercase"
+            style="font-family: Montserrat, 'sans-serif' !important; font-size: 67px !important; color: #791d97; font-weight: 900 !important;">
+            <span style="color:#5154a5;">POS THEME </span> SAPPHIRE
+        </h1>
+        <p class="my-1 text-center text-uppercase"
+           style="letter-spacing: 4px !important; color: #74788D !important;">
+            Minimalist and elegant POS theme for Odoo 17.</p>
+    </div>
+
+
+    <div class="col-lg-12 d-flex flex-column justify-content-center">
+        <p class="my-1 text-center"
+           style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
+            POS Theme Sapphire is a modern point of sale (POS) app theme designed to help businesses streamline their
+            sales operations. The app enables a user-friendly theme for Odoo 17 POS community and enterprise editions.
+        </p>
+    </div>
+
+
+    <div class="col-lg-12 d-flex justify-content-center align-items-center"
+         style="margin: 2rem 0;">
+        <img src="./assets/cybro-odoo.png" width="100%" height="auto" style="width:50%;"
+             class="img-responsive">
+    </div>
+
+
+    <div class="col-md-12 text-center ">
+        <a href="mailto:odoo@cybrosys.com" target="_blank"
+           style="background-color:#5154a5; border-radius:35px; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #5154a5"
+           class="mx-1 mb-2 deep-1 deep_hover">
+            <img class="img" style="width:30px" src="assets/icons/support.png">
+            <span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">Email Us</span>
+        </a>
+        <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+           style="background-color:#7f289b; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #7f289b; border-radius:35px"
+           class="mx-1 mb-2 deep-1 deep_hover">
+            <img class="img" style="width:27px" src="assets/icons/whatsapp.png">
+            <span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">What's App</span>
+        </a>
+    </div>
+
+
+</div>
+</div>
+<!-- END OF HERO -->
+
+<!-- Start OF slide -->
+
+
+<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+    <img src="assets/screenshots/pos_theme_sapphire-V17_banner.jpg" width="100%" height="auto" class="img-responsive">
+</div>
+
+
+<!-- END OF slide -->
+
+<section class="oe_container pb-5">
+    <div class="mt64 mb64">
+
+        <h2 class="text-center text-uppercase"
+            style="font-family: Montserrat, 'sans-serif' !important; font-size: 50px !important; color: #791d97; font-weight: 900 !important;">
+            <span style="color:#5154a5;">KEY </span> <b>Highlights</b>
+        </h2>
+
+
+        <div class="row">
+            <div class="col-md-6 col-sm-12 mt32">
+                <div class="container shadow" style="border-radius: 5px;padding: 33px 0px;">
+                    <div class="col-md-3" style="float:left">
+                        <img class="img img-responsive" src="assets/icons/test-2.png">
+                    </div>
+                    <div class="col-md-9" style="padding-left:0; float:left; width:70%">
+                        <h3 class="mt16 mb0"
+                            style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">Fully responsive </h3>
+                        <p class=" mt8" style="font-family:Roboto ; color: #280135;">Theme design are now fully responsive enabling you to view and manage everything from the comfort of your mobile device.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 col-sm-12 mt32">
+                <div class="container shadow" style="border-radius: 5px;padding: 33px 0px;">
+                    <div class="col-md-3" style="float:left">
+                        <img class="img img-responsive" src="assets/icons/test-2.png">
+                    </div>
+                    <div class="col-md-9" style="padding-left:0; float:left; width:70%">
+                        <h3 class="mt16 mb0"
+                            style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">Modern design</h3>
+                        <p class=" mt8" style="font-family:Roboto ; color: #280135;">The theme has modern design of a new user experience</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- New section -->
+
+<div class="container shadow"  style=" margin-left:calc(-42vw + 50%); width:84vw">
+<div class="row"
+     style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+    <div class="col-md-12 shadow">
+        <ul role="tablist" class="nav nav-tabs justify-content-center d-flex justify-content-center" data-tabs="tabs"
+            style="border:none; background-color:unset; margin:0 auto">
+            <li class="nav-item"
+                style="border-top-right-radius:10px; border-top-left-radius:10px; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
+                <a href="#screenshot-1" data-toggle="tab" aria-expanded="true" class="show active"
+                   style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
+                    <img src="assets/icons/screenshot.png" style="width: 100%; width: 25px; margin-right: 10px;">screenshot
+                </a>
+                <span class="border-left-0"
+                      style="float:left; margin-top:-4px; margin-left:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 5px 0"></span>
+                <span class="border-right-0"
+                      style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
+            </li>
+        </ul>
+    </div>
+
+
+    <div class="col-md-12  tab-content ui-front shadow"
+         style="border-top-right-radius:15px;border-bottom-right-radius:15px;background-color:#fffafa;height:auto;">
+        <div class="tab-pane fade active show" id="screenshot-1" role="tabpanel" aria-labelledby="screenshot-1">
+            <div class="row" style="padding:4rem 2.5rem 0 !important; background-color:#fff !important">
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h1 class="text-center text-uppercase"
+                        style="font-family:Montserrat, 'sans-serif' !important; font-size:40px !important; color:#791d97; font-weight:900 !important">
+                        <span style="color:#5154a5">Screenshots </span> <sup>
+                    </sup></h1>
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        Order Screen</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center"
+                     style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
+                    <img src="assets/screenshots/Desktop view 1.png?6ef7fd7"
+                         class="img img-responsive center-block">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        Payment Screen</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center"
+                     style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
+                    <img src="assets/screenshots/Desktop view 3.png?6ef7fd7"
+                         class="img img-responsive center-block">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        Customer List Screen</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center"
+                     style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
+                    <img src="assets/screenshots/Desktop view 2.png?6ef7fd7"
+                         class="img img-responsive center-block">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        Orders</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center"
+                     style="margin:2rem 0 ; border-top: 5px solid #781d96 !important;">
+                    <img src="assets/screenshots/Desktop view 4.png?6ef7fd7"
+                         class="img img-responsive center-block">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+</div>
+</div>
+
+
+<!-- New section -->
+
+
+<section style="margin-top:50px;">
+
+    <div class="row">
+        <div class="col-sm-12 col-md-12-col-lg-2">
+            <h2 style="font-weight:bold; color:#3D3D4E">Related Modules</h2>
+            <p style="color:#777783">Explore our related modules</p>
+            <hr>
+        </div>
+        <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/themes/17.0/code_backend_theme/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/code_backend_theme.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/themes/17.0/vista_backend_theme/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/vista.jpg">
+                                </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/themes/17.0/jazzy_backend_theme/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/jazzy.jpg">
+                                </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/themes/17.0/hue_backend_theme/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/hue.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/themes/17.0/theme_boec/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/boec.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/themes/17.0/theme_college/" target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block" style="border-radius:0px"
+                                         src="./assets/modules/college.jpg">
+                                </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>
+
+</section>
+
+<section>
+
+    <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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/misc/star.png?aedef96">
+        </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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/cogs.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/wrench.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/lifebuoy.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/user.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/puzzle.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/update.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/consultation.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/training.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/license.png?aedef96"
+                         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>
+
+
+</section>
+
+
+<section class="container" style="margin-top:6rem !important">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <h2 style="color:#212529 !important">Our Industries</h2>
+            <hr style="border:3px solid #714B67 !important; background-color:#714B67 !important; width:80px !important; margin-bottom:2rem !important">
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color:#f6f8f9 !important; border-radius:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/trading-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/pos-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/education-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/manufacturing-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/ecom-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/service-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/restaurant-black.png?2d98612"
+                     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:10px; padding:2rem !important; height:250px !important">
+                <img src="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/hotel-black.png?2d98612"
+                     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>
+</section>
+
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-12-col-lg-2">
+            <h2 style="font-weight:bold; color:#3D3D4E">Support</h2>
+            <p style="color:#777783">Need help? Get in touch.
+            </p>
+            <hr>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color:#714B67; height:70px; width:70px">
+                    <img src="assets/icons/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 class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color:#2AC44D; height:70px; width:70px">
+                    <img src="assets/icons/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>
+                    <span href="https://api.whatsapp.com/send?phone=918606827707">
+                <p style="font-weight:400; font-size:28px; line-height:80%; color:#714B67">+91
+                  86068
+                  27707</p>
+              </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+<!-- Footer -->
+<section class="oe_container"
+         style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
+    <div class="row"
+         style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+        <!-- Logo -->
+        <div class="col-lg-12 d-flex justify-content-center align-items-center"
+             style="margin-top: 3rem;">
+            <img src="https://www.cybrosys.com/images/logo.png"
+                 width="200px" height="auto"/>
+        </div>
+        <!-- End of Logo -->
+    </div>
+</section>
+<!-- END OF FOOTER -->
+</div>

pos_theme_sapphire/static/src/css/custom.css

@@ -0,0 +1,505 @@
+.main-app {
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
+}
+
+.main-app .sidebar {
+    width: 80px;
+    height: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: #fff;
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
+}
+
+@media (max-width: 768px) {
+    .main-app .sidebar {
+        width: 60px;
+    }
+}
+
+.main-app .main-menu {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.main-app .menu-item {
+    list-style: none;
+    position: relative;
+    width: 85px;
+    height: 65px;
+}
+
+.main-app .menu-txt {
+    opacity: 0;
+    width: 0px;
+    min-width: 0px;
+    overflow: hidden;
+    transition: 300ms linear;
+    transition-delay: 250ms;
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.main-app .menu-a {
+    padding: 35px 33.5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.main-app .menu-icon {
+    display: block;
+    font-size: 1.5rem;
+    color: #fefefe;
+    position: relative;
+    z-index: 100;
+    transition: 400ms;
+}
+
+@media (min-width: 768px) {
+    .main-app .menu-item:hover .menu-txt {
+        opacity: 1;
+        width: 100%;
+        min-width: 40px;
+        padding: 0px 10px;
+        transition-delay: 0s;
+        color: #4c4c4c;
+        font-size: 15px;
+        font-weight: 600;
+        align-self: center;
+    }
+    .main-app .menu-item:hover .menu-icon {
+        color: #0f0f0f;
+    }
+}
+
+.main-app .menu-txt-hld {
+    position: absolute;
+    z-index: 99;
+    background: rgba(255, 255, 255, 0);
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 10px;
+    font-size: .94rem;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0);
+    padding: 9.5px 8px;
+    transition: 250ms linear;
+    display: flex;
+    align-items: center;
+    transition-delay: 300ms;
+    left: 22px;
+}
+
+@media (min-width: 768px) {
+    .main-app .menu-item:hover .menu-txt-hld {
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.07);
+        background: rgb(255, 255, 255);
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        transition-delay: 0ms;
+        left: 5px;
+    }
+}
+
+.main-app .active .menu-icon {
+    color: #223b6e;
+}
+
+.custom-header .card {
+    margin-left: 20px;
+}
+.custom-header .top-container{
+	display: flex;
+	align-items: center;
+}
+.custom-header .profile-image{
+	border-radius: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.custom-header .name{
+	font-size: 15px;
+	font-weight: bold;
+	color: #251F1F;
+	position: relative;
+	top: 0px;
+}
+.custom-header .mail{
+	font-size: 14px !important;
+	color: #251F1F;
+	position: relative;
+	top: -15px;
+}
+
+.product-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 150px;
+    max-width: 185px;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+    transition: all 0.3s ease;
+    margin: 2px;
+    background-color: white;
+}
+
+.product-card .title {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin: 10px;
+}
+
+.product-card .price {
+  color: #888;
+  margin: 5px;
+}
+
+.pos .product-list {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
+}
+
+.pos .product-img {
+    width: 85%;
+}
+
+.pos .product-img img {
+    width: 100%;
+    height: 130px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+
+.pos .products-widget .products-widget-control {
+    box-shadow: unset !important;
+    padding: 5px;
+
+}
+
+.pos .rightpane {
+    background: #ededed !important;
+}
+
+.box{
+    position: relative;
+    margin-left: auto;
+    right: 10px;
+}
+@media (max-width: 768px) {
+    .box{
+        position: absolute;
+    }
+}
+
+[badge]:after {
+    background: #a8a8a8;
+    border-radius: 10rem;
+    color: #fff;
+    content: attr(badge);
+    font-size: small;
+    min-width: 18px;
+    padding: 2px;
+    position: absolute;
+    text-align: center;
+    left: 1.7em;
+    bottom: 1.7em;
+    z-index: 999;
+}
+
+@media (min-width: 768px) {
+    .pos .leftpane {
+        max-width: 500px;
+        height: calc(100% - 30px);
+        margin: 15px;
+        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 47%);
+        border: unset;
+    }
+}
+
+.pos .order-container {
+    border-radius: 10px 10px 0px 0px;
+}
+
+.pos *::-webkit-scrollbar {
+    width: 0 !important;
+}
+
+.pos .screen {
+    background: #ededed !important;
+}
+
+.pos .mode-button.selected-mode {
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
+}
+
+.pos .button.validation {
+     background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
+}
+
+.pos .button.validation:hover {
+    background: linear-gradient(to right bottom, rgb(61 72 142), rgb(63 54 128)) !important;
+}
+
+.pos .order .orderline.selected {
+    background: rgb(70 71 166 / 33%) !important;
+}
+
+.pos .oe_status {
+    cursor: default;
+}
+
+.pos .oe_status .d-inline-block{
+    display: inline-block;
+}
+
+.pos .mode-button.selected-mode:hover {
+    background: linear-gradient(to right bottom, rgb(74 82 131), rgb(58, 46, 141)) !important;
+}
+
+.pos .category-button {
+    display: inline-flex;
+    margin: 5px !important;
+    width: 160px;
+    height: 60px;
+    background: #fff;
+    border: 1px solid #d7d7d7;
+    border-radius: 10px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+}
+
+.pos .category-button .category-img {
+    position: relative;
+    width: 55px;
+    text-align: center;
+    cursor: pointer;
+    object-fit: contain;
+    padding: 5px;
+    height: calc(100% - 10px);
+}
+
+.pos .category-button .category-img img {
+    object-fit: cover;
+    width: 100%;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 5px;
+}
+
+.pos .category-button .category-name {
+    display: inline-grid;
+    position: relative;
+    width: unset;
+    align-content: center;
+    padding-top: unset;
+    font-size: 14px;
+    font-family: 'Roboto', sans-serif;
+    color: #251F1F;
+}
+
+.pos .category-list {
+    background: none;
+}
+
+.pos .categories {
+    border-bottom: none;
+}
+
+.pos .category-list-scroller {
+    max-height: 85px;
+}
+
+.pos .breadcrumb-button {
+    color: #251F1F;
+}
+
+.pos .breadcrumb-arrow {
+    width: 10px;
+}
+
+.pos a.button {
+    color: #fff;
+}
+
+.ticket-screen .controls button.highlight {
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141));
+    border-color: #494cab;
+}
+
+.pos .orders .order-row:hover, .pos .orders .order-row.highlight {
+    background-color: #4544a2d9;
+}
+
+.pos .control-button.highlight, .pos .button.highlight {
+    color:#fff !important;
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
+    border-color: #494cab !important;
+}
+
+.pos .popup .button {
+    color: #111;
+    border: 1px solid #484aa8;
+}
+
+.screen .top-content .button {
+    border: 1px solid #484aa8;
+}
+
+.pos .partnerlist-screen tr.partner-line:hover {
+       color:#fff;
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
+}
+
+
+.pos textarea:focus {
+    box-shadow: 0px 0px 0px 3px #484aa8;
+}
+
+.pos .category-simple-button:active {
+    color: #484aa8;
+}
+
+.pos .switchpane .btn-switchpane.secondary {
+    color: #fff;
+}
+
+.payment-screen .paymentlines-empty .total {
+    color: #484aa8;
+}
+
+.pos .rightpane-header {
+    flex-direction: unset;
+    border-radius: 5px;
+}
+
+.pos .partner-list tr.partner-line.highlight {
+    color:#fff;
+    background: linear-gradient(to right bottom, rgb(85, 100, 194), rgb(58, 46, 141)) !important;
+}
+
+.menu-item .oe_status i {
+    font-size: 22px;
+}
+
+.category-simple-button{
+    font-weight:bold;
+    margin-left:10px;
+    padding:5px;
+    transition: all 0.8s ease;
+    }
+.category-simple-button:hover{
+    background: grey;
+    border-radius:5px;
+    color:#fff;
+}
+
+.btn.cashier-name{
+    background:none !important;
+}
+.bg-100, .text-bg-100 {
+    --background-color: RGBA(248, 249, 250, var(--bg-opacity, 1));
+    background-color: rgb(234 236 237) !important;
+}
+.search-products .h-100{
+    height:30px !important;
+}
+
+.products-widget-control-category{
+    border-radius:7px;
+    margin-right: 7px;
+    margin-left: 9px;
+    margin-bottom:5px;
+}
+
+#search-products .input-container {
+  position: relative;
+}
+
+#search-products .input-container input {
+  opacity: 0; /* Hide input visually */
+  width: 0; /* Collapse input width */
+  min-width: 0 !important;
+  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out; /* Add transition for smooth animation */
+}
+
+#search-products .input-container:hover input {
+  opacity: 1; /* Show input on hover */
+  width: 300px; /* Expand input width on hover */ /* Adjust width as needed */
+}
+
+/* Optional animation for icon */
+#search-products .input-container:hover i {
+  animation: search-icon-expand 0.8s ease-in-out;
+}
+
+@keyframes search-icon-expand {
+  from { transform: scale(1); }
+  to { transform: scale(1.6); } /* Adjust scale as desired */
+}
+#search-products .input-group{
+    width:34px;
+    border-radius:25px;
+    background:none !important;
+    transition: opacity 2s ease-in-out, width 0.5s ease-in-out;
+}
+#search-products .input-group:hover{
+    width:300px;
+    border-radius:20px;
+    background:#fff !important;
+}
+.home-category-button{
+    padding:10px;
+    margin:15px;
+}
+
+#search-products .input-group > .form-control {
+    border: solid 1px;
+    border-radius: 20px;
+}
+.menu-a.SyncNotification .btn-light{
+    border:none !important;
+    background-color:transparent !important;
+}
+
+.menu-item .menu-txt-hld .px-4{
+    padding-left:5px !important;
+    color:#fff;
+}
+.btn-light.active{
+    color: #fff;
+    background-color: #71639e;
+    border-color: #71639e;
+}
+
+@media (max-width: 768px) {
+    .products-widget-control .search-products .lg-screen, .products-widget-control .search-products .lg-screen-cat {
+        display: none !important;
+    }
+}
+
+@media (min-width: 769px) {
+    .products-widget-control .sm-screen, .products-widget-control .sm-screen-cat {
+        display: none !important;
+    }
+}
+
+.products-widget-control .sm-screen .input-group.h-100{
+    height: 65% !important;
+}
+
+/*. lg-screen .input-group .form-control input{
+    min-width:0px !important;
+}*/
+
+

pos_theme_sapphire/static/src/js/ProducScreen.js

@@ -0,0 +1,66 @@
+/** @odoo-module **/
+
+import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
+import { useService } from "@web/core/utils/hooks";
+import { _t } from "@web/core/l10n/translation";
+
+import { patch } from "@web/core/utils/patch";
+import { ProxyStatus } from "@point_of_sale/app/navbar/proxy_status/proxy_status";
+import { SyncNotification } from "@point_of_sale/app/navbar/sync_notification/sync_notification";
+import { ClosePosPopup } from "@point_of_sale/app/navbar/closing_popup/closing_popup";
+import { SaleDetailsButton } from "@point_of_sale/app/navbar/sale_details_button/sale_details_button";
+import { CashMovePopup } from "@point_of_sale/app/navbar/cash_move_popup/cash_move_popup";
+import { TicketScreen } from "@point_of_sale/app/screens/ticket_screen/ticket_screen";
+import { BackButton } from "@point_of_sale/app/navbar/back_button/back_button";
+
+ProductScreen.components = {
+    ...ProductScreen.components,
+    ProxyStatus,
+    SyncNotification,
+    SaleDetailsButton,
+    BackButton,
+}
+patch(ProductScreen.prototype, {
+    setup() {
+        super.setup(...arguments);
+        this.hardwareProxy = useService("hardware_proxy");
+    },
+     async closeSession() {
+        const info = await this.pos.getClosePosInfo();
+        this.popup.add(ClosePosPopup, { ...info, keepBehind: true });
+    },
+    onCashMoveButtonClick() {
+        this.hardwareProxy.openCashbox(_t("Cash in / out"));
+        this.popup.add(CashMovePopup);
+    },
+    get orderCount() {
+        return this.pos.get_order_list().length;
+    },
+    async onTicketButtonClick() {
+        if (this.isTicketScreenShown) {
+            this.pos.closeScreen();
+        } else {
+            if (this._shouldLoadOrders()) {
+                try {
+                    this.pos.setLoadingOrderState(true);
+                    const message = await this.pos._syncAllOrdersFromServer();
+                    if (message) {
+                        this.notification.add(message, 5000);
+                    }
+                } finally {
+                    this.pos.setLoadingOrderState(false);
+                    this.pos.showScreen("TicketScreen");
+                }
+            } else {
+                this.pos.showScreen("TicketScreen");
+            }
+        }
+    },
+
+    _shouldLoadOrders() {
+        return this.pos.config.trusted_config_ids.length > 0;
+    },
+    showBackButton() {
+        return this.pos.showBackButton() && this.ui.isSmall;
+    },
+});

pos_theme_sapphire/static/src/js/ProductsWidget.js

@@ -0,0 +1,9 @@
+/** @odoo-module **/
+
+import { ProductsWidget } from "@point_of_sale/app/screens/product_screen/product_list/product_list";
+import { CashierName } from "@point_of_sale/app/navbar/cashier_name/cashier_name";
+
+ProductsWidget.components = {
+    ...ProductsWidget.components,
+    CashierName,
+}

pos_theme_sapphire/static/src/xml/Chrome.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Replace Navbar from pos -->
+    <t t-inherit="point_of_sale.Chrome" t-inherit-mode="extension">
+        <xpath expr="//Navbar" position="replace"/>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/ChromeWidgets/CashierName.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+     <!-- Current cashier details -->
+    <t t-name="CashierName" t-inherit="point_of_sale.CashierName" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('btn-light')]//img[hasclass('avatar')]" position="attributes">
+            <attribute name="class" remove="avatar" add="img-fluid profile-image avatar cashier-name" separator=" "/>
+            <attribute name="width">70</attribute>
+        </xpath>
+        <xpath expr="//div[hasclass('btn-light')]" position="attributes">
+            <attribute name="class" remove="avatar" add="cashier-name" separator=" "/>
+        </xpath>
+        <xpath expr="//div[hasclass('btn-light')]//span[hasclass('username')]" position="replace"/>
+        <xpath expr="//div[hasclass('btn-light')]//img[hasclass('avatar')]" position="after">
+            <div style="margin-left: 20px" class="d-inline-block">
+                <h5 class="name username"><t t-esc="username"/></h5>
+                <p class="mail">clark@zmail.com</p>
+            </div>
+        </xpath>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/screens/PaymentScreen/PaymentScreen.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Add a back button before the existing switchpane button -->
+    <t t-inherit="point_of_sale.PaymentScreenValidate" t-inherit-mode="extension">
+        <xpath expr="//div[@class='switchpane d-flex h-12']/button" position="before">
+            <!-- New button to go back to the ProductScreen -->
+            <button t-if="ui.isSmall" class="btn-switchpane btn btn-lg btn-light"
+                    t-on-click="() => pos.showScreen('ProductScreen')">
+                <span class="search-icon">
+                    <i class="fa fa-angle-double-left"/>
+                </span>
+                Back
+            </button>
+        </xpath>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductCard.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+    <!-- Product card section -->
+    <t t-name="ProductCard" t-inherit="point_of_sale.ProductCard"
+       t-inherit-mode="extension">
+        <xpath expr="//article" position="replace">
+            <div tabindex="0"
+                 class="product-card"
+                 t-on-keypress="(event) => event.code === 'Space' ? props.onClick(event) : ()=>{}"
+                 t-on-click="props.onClick"
+                 t-att-data-product-id="props.productId"
+                 t-attf-aria-labelledby="article_product_{{props.productId}}">
+                <div t-if="props.imageUrl" class="product-img">
+                    <img class="w-100" t-att-src="props.imageUrl"
+                         t-att-alt="props.name"/>
+                </div>
+                <div class="product-content d-flex flex-column justify-content-between h-100 mx-2 py-1">
+                    <div class="overflow-hidden lh-sm fw-bolder product-name"
+                         t-att-class="{'no-image': !props.imageUrl}"
+                         t-attf-id="article_product_{{props.productId}}"
+                         t-esc="props.name"/>
+                    <span t-if="props.price"
+                          class="price-tag text-primary py-1 fw-bolder"
+                          t-esc="props.price"/>
+                </div>
+            </div>
+        </xpath>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductScreen.xml

@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Point of sale order session page -->
+    <t t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension">
+        <xpath expr="//div[@class='product-screen d-flex h-100 bg-100']" position="replace">
+                    <div class="product-screen d-flex h-100 bg-100" t-att-class="{ 'd-none': !props.isShown }">
+                        <div class="main-app">
+                        <div class="sidebar">
+                            <nav class="main-nav" style="height: 100%">
+                                <ul class="main-menu" style="height: 100%">
+                                    <li class="menu-item" t-if="showBackButton()">
+                                        <a href="#" class="menu-a" target="_blank">
+                                            <div class="menu-txt-hld" t-on-click="">
+                                                <span class="menu-txt">Back</span>
+                                                <BackButton t-if="showBackButton()"/>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li class="menu-item">
+                                        <a href="#" class="menu-a" target="_blank">
+                                             <div class="ticket-button menu-txt-hld with-badge" t-on-click="onTicketButtonClick" t-att-badge="orderCount">
+                                                <i class="fa fa-ticket menu-icon"/>
+                                                <span class="menu-txt">Orders</span>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li class="menu-item">
+                                        <a href="#" class="menu-a" target="_blank">
+                                            <div class="cash-move-button menu-txt-hld" t-on-click="onCashMoveButtonClick">
+                                                <i class="fa fa-money menu-icon"/>
+                                                <span class="menu-txt">Cash In/Out</span>
+                                            </div>
+                                        </a>
+                                    </li>
+
+                                    <li class="menu-item">
+                                        <SaleDetailsButton t-if="hardwareProxy.printer" isHeaderButton="true"/>
+                                    </li>
+                                    <li class="menu-item">
+                                         <ProxyStatus t-if="pos.config.use_proxy" />
+                                    </li>
+                                    <li class="menu-item" style="position: absolute; bottom: 130px;">
+                                        <a href="#" class="menu-a SyncNotification" target="_blank">
+                                            <SyncNotification />
+                                        </a>
+                                    </li>
+                                     <li class="menu-item" style="position: absolute; bottom: 60px;">
+                                         <a href="#" class="menu-a" target="_blank">
+                                            <div class="header-button menu-txt-hld" t-on-click="() => pos.closePos()">
+                                                <i class="fa fa-pause menu-icon"/>
+                                                <span class="menu-txt">Backend</span>
+                                            </div>
+                                         </a>
+                                    </li>
+                                    <li class="menu-item" style="position: absolute; bottom: 5px;">
+                                        <a href="#" class="menu-a" target="_blank">
+                                            <div class="header-button menu-txt-hld" t-on-click="closeSession">
+                                                <i class="fa fa-sign-out menu-icon"/>
+                                                <span class="menu-txt">Logout</span>
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                        <div class="rightpane overflow-auto d-flex flex-grow-1 flex-column w-60" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
+                        <ProductsWidget />
+                        <t t-if="ui.isSmall">
+                            <div class="product-reminder d-flex justify-content-center align-items-center py-1 text-bg-warning bg-opacity-50 fw-bolder" t-if="state.showProductReminder" t-key="animationKey" >
+                                <span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/> <t t-esc="selectedOrderlineTotal"/></span>
+                            </div>
+                            <div class="switchpane d-flex h-12">
+                                <button class="btn-switchpane pay-button btn w-50 rounded-0 fw-bolder" t-attf-class="{{ primaryPayButton ? 'btn-primary' : 'btn-secondary' }}" t-on-click="() => currentOrder.pay()">
+                                    <span class="fs-1 d-block">Pay</span>
+                                    <span><t t-esc="total" /></span>
+                                </button>
+                                <button class="btn-switchpane btn w-50 btn-secondary rounded-0 fw-bolder review-button" t-on-click="switchPane">
+                                    <span class="fs-1 d-block">Review</span>
+                                    <span><t t-esc="items"/> items</span>
+                                </button>
+                            </div>
+                        </t>
+                    </div>
+                    <div t-if="!ui.isSmall || pos.mobile_pane === 'left'"
+                        t-att-class="{'flex-grow-1': ui.isSmall}"
+                        class="leftpane order-screen d-flex flex-column border-end" >
+                        <OrderWidget lines="currentOrder.orderlines" t-slot-scope="scope"
+                            total="env.utils.formatCurrency(currentOrder.get_total_with_tax())"
+                            tax="!env.utils.floatIsZero(currentOrder.get_total_tax()) and env.utils.formatCurrency(currentOrder.get_total_tax()) or ''">
+                            <t t-set="line" t-value="scope.line" />
+                            <Orderline line="line.getDisplayData()"
+                                t-on-click="() => this.selectLine(line)"
+                                class="{ ...line.getDisplayClasses(), 'selected' : line.selected }">
+                                <t t-set-slot="product-name">
+                                    <i  t-if="line.get_product().isTracked()"
+                                        t-on-click.stop="() => line.editPackLotLines()" role="img"
+                                        t-attf-class="{{ line.has_valid_product_lot() ? 'text-success' : 'text-danger'}} fa fa-list line-lot-icon ms-1"
+                                        t-attf-title="{{ line.has_valid_product_lot() ? 'Valid product lot' : 'Invalid product lot'}}" />
+                                </t>
+                                <ul t-if="line.pack_lot_lines">
+                                    <li t-foreach="line.get_lot_lines()" t-as="lot" t-key="lot.cid">
+                                        SN <t t-esc="lot.lot_name"/>
+                                    </li>
+                                </ul>
+                            </Orderline>
+                            <t t-set-slot="details" />
+                        </OrderWidget>
+                        <div class="pads border-top">
+                            <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden bg-300"
+                                t-if="!ui.isSmall">
+                                <t t-foreach="controlButtons" t-as="cb" t-key="cb.name">
+                                    <t t-component="cb.component" t-key="cb.name"/>
+                                </t>
+                            </div>
+                            <div class="subpads d-flex">
+                                <ActionpadWidget
+                                    partner="partner"
+                                    actionName="constructor.numpadActionName"
+                                    actionType="'payment'"
+                                    onClickMore.bind="displayAllControlPopup" />
+                                <Numpad buttons="getNumpadButtons()" onClick.bind="onNumpadClick" class="'w-100'"/>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+        </xpath>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/screens/ProductScreen/ProductsWidget.xml

@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+    <!-- Product listing section -->
+    <t t-name="ProductsWidget" t-inherit="point_of_sale.ProductsWidget"
+       t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('products-widget')]" position="replace">
+            <div class="products-widget d-flex flex-column flex-grow-1 overflow-auto"
+                 t-ref="products-widget">
+                <t t-set="showCategoryImages"
+                   t-value="getShowCategoryImages()"/>
+                <div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between">
+                        <CashierName/>
+                    <div class="d-flex search-products" id="search-products">
+                                <Input tModel="[pos, 'searchProductWord']"
+                                       class="'p-2 lg-screen'"
+                                       isSmall="ui.isSmall"
+                                       placeholder="'Search products...'"
+                                       icon="{type: 'fa', value: 'fa-search'}"
+                                       debounceMillis="100"/>
+                        <div class="home-category-button lg-screen-cat">
+                                 <span class="breadcrumb-button breadcrumb-home"
+                                       t-on-click="() => this.pos.setSelectedCategoryId(0)">
+                                    <i class="fa fa-home" role="img"
+                                       aria-label="Home" title="Home"
+                                       style="font-size: 30px;"/>
+                                </span>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+                <div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between">
+                        <Input tModel="[pos, 'searchProductWord']"
+                               class="'p-2 sm-screen'"
+                               isSmall="ui.isSmall"
+                               placeholder="'Search products...'"
+                               icon="{type: 'fa', value: 'fa-search'}"
+                               debounceMillis="100"/>
+
+                    <div class="home-category-button sm-screen-cat">
+                                 <span class="breadcrumb-button breadcrumb-home"
+                                       t-on-click="() => this.pos.setSelectedCategoryId(0)">
+                                    <i class="fa fa-home" role="img"
+                                       aria-label="Home" title="Home"
+                                       style="font-size: 30px;"/>
+                                </span>
+
+                            </div>
+                    </div>
+                <t t-set="categories" t-value="getCategories()"/>
+                <div t-if="categories.length > 2"
+                     class="products-widget-control bg-white products-widget-control-category d-flex shadow-sm">
+                    <div class="rightpane-header">
+                                <div class="categories-header">
+                                    <div class="category-list simple"
+                                         style="border-radius: 5px; padding: 10px;">
+                                        <t t-foreach="getCategories()"
+                                           t-as="category" t-key="category.id">
+                                            <span t-if="category.id != 0"
+                                                  class="category-simple-button"
+                                                  t-on-click="() => this.pos.setSelectedCategoryId(category.id)">
+                                                <t t-esc="category.name"/>
+                                            </span>
+                                        </t>
+                                    </div>
+                                </div>
+                        </div>
+                </div>
+
+                <div class="product-list-container flex-grow-1 overflow-y-auto">
+                    <div t-if="productsToDisplay.length != 0 and pos.posHasValidProduct()"
+                         t-attf-class="product-list {{this.pos.productListViewMode}} p-1">
+                        <t t-foreach="productsToDisplay" t-as="product"
+                           t-key="product.id">
+                            <ProductCard
+                                    class="pos.productViewMode"
+                                    name="product.display_name"
+                                    productId="product.id"
+                                    price="product.getFormattedUnitPrice()"
+                                    imageUrl="product.getImageUrl()"
+                                    onClick="() =>this.pos.addProductToCurrentOrder(product)"
+                                    productInfo="true"
+                                    onProductInfoClick="() => this.onProductInfoClick(product)"
+                            />
+                        </t>
+                    </div>
+                    <div t-else=""
+                         class="product-list-empty no-results-message text-center mt-5">
+                        <t t-if="searchWord">
+                            <p>No products found for <b>"<t t-esc="searchWord"/>
+                                "</b>
+                                in this category.</p>
+                        </t>
+                        <t t-else="">
+                            <t t-if="pos.posHasValidProduct()">
+                                <p>There are no products in this category.</p>
+                            </t>
+                            <t t-else="">
+                                <div t-if="!state.loadingDemo">
+                                    <p class="text-large">No products available. Explore
+                                        <a role="button"
+                                           class="button-no-demo fw-bolder"
+                                           t-on-click="loadDemoDataProducts">demo data</a>
+                                        or <a
+                                                role="button"
+                                                class="button-no-demo fw-bolder"
+                                                t-on-click="createNewProducts">create your own</a>.</p>
+                                </div>
+                                <div t-else=""
+                                     class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-100 z-1000">
+                                    <div class="d-flex h-100 w-100 text-white flex-row align-items-center justify-content-center">
+                                        <div class="o_spinner d-flex flex-column mb-4">
+                                            <img src="/web/static/img/spin.svg"
+                                                 alt="Loading..."/>
+                                            Loading...
+                                        </div>
+                                    </div>
+                                </div>
+                            </t>
+                        </t>
+                    </div>
+                    <div t-if="searchWord"
+                         class="search-more-button d-flex justify-content-center">
+                        <button class="btn btn-primary btn-lg"
+                                t-on-click="onPressEnterKey">Search more</button>
+                    </div>
+                    <div class="portal search-database-button no-results-message"
+                         t-att-class="{ 'd-none':  !shouldShowButton }"/>
+                </div>
+            </div>
+        </xpath>
+    </t>
+</templates>

pos_theme_sapphire/static/src/xml/screens/TicketScreen/TicketScreen.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Add a back button before the existing switchpane button -->
+    <t t-inherit="point_of_sale.TicketScreen" t-inherit-mode="extension">
+        <xpath expr="//div[@class='switchpane d-flex w-100']/button[@class='btn-switchpane load-order-button primary btn btn-primary rounded-0 w-50 fw-bolder py-3']"
+               position="before">
+            <button t-if="ui.isSmall" class="btn-switchpane btn btn-lg btn-light"
+                    t-on-click="() => this.closeTicketScreen()">
+                <span class="search-icon">
+                    <i class="fa fa-angle-double-left"/>
+                </span>
+                Back
+            </button>
+        </xpath>
+    </t>
+</templates>