Jul 12 : [ADD] Initial Commit 'website_portal_events'

website_portal_events/README.rst

@@ -0,0 +1,46 @@
+.. 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
+
+Website Portal Events
+================
+This module helps to show event tickets in the portal in odoo16.
+
+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
+-------
+* Developer: (V16): Sruthi MK@cybrosys
+
+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>`__

website_portal_events/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sruthi MK (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/>.
+#
+###############################################################################
+from . import controllers

website_portal_events/__manifest__.py

@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sruthi MK (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': 'Website Portal Events',
+    'version': '16.0.1.0.0',
+    'category': 'Website',
+    'summary': 'Show event tickets in customer portal',
+    'description': """Which will helps to show all events in the customer
+                      portal. Also there is an option to search, filter,
+                      sort the events to get it easily and we can download
+                      the events""",
+    'author': 'Cybrosys Techno solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['website_event', 'portal'],
+    'data': [
+        'views/event_portal_templates.xml'
+    ],
+    'images': ['static/description/banner.jpg'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

website_portal_events/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sruthi MK (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/>.
+#
+###############################################################################
+from . import website_portal_events

website_portal_events/controllers/website_portal_events.py

@@ -0,0 +1,284 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sruthi MK (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/>.
+#
+###############################################################################
+from collections import OrderedDict
+from datetime import date, timedelta
+from odoo import fields, http, _
+from odoo.http import request
+from odoo.exceptions import AccessError, MissingError
+from odoo.osv import expression
+from odoo.osv.expression import OR, AND
+from odoo.addons.portal.controllers.portal import CustomerPortal, \
+    pager as portal_pager
+
+
+class PortalEvent(CustomerPortal):
+    """PortalEvent helps to show the information of all events in the
+     customer portal"""
+
+    def _prepare_home_portal_values(self, counters):
+        """Which will set all portal values. And return total events count"""
+        values = super()._prepare_home_portal_values(counters)
+        if 'event_count' in counters:
+            event_count = request.env['event.registration'].search_count(
+                self._get_events_domain()) \
+                if request.env['event.registration'].check_access_rights('read',
+                                                                         raise_exception=False) else 0
+            values['event_count'] = event_count
+        return values
+
+    def _get_events_domain(self):
+        """Returns the events that are in stage 'cancel' and 'draft'"""
+        return [('state', 'not in', ('cancel', 'draft'))]
+
+    @http.route(['/my/events', '/my/events/page/<int:page>'], type='http',
+                auth="user", website=True)
+    def portal_my_events(self, page=1, date_begin=None, date_end=None,
+                         sortby=None, filterby=None, search=None,
+                         search_in='content', **kw):
+        """Returns the corresponding event datas and pager information.
+         Which will render a newtemplate to show the events"""
+        values = self._prepare_my_event_values(page, date_begin, date_end,
+                                               sortby, filterby,
+                                               search, search_in)
+        # Pager
+        pager = portal_pager(**values['pager'])
+        # Content according to pager and archive selected
+        events = values['events'](pager['offset'])
+        request.session['my_events_history'] = events.ids[:100]
+        values.update({
+            'events': events,
+            'pager': pager,
+        })
+        return request.render("website_portal_events.portal_my_events", values)
+
+    @http.route(['/my/event_data/<int:event>'],
+                type='http', auth="public",
+                website=True)
+    def portal_my_helpdesk(self, event=None, access_token=None, **kw):
+        """Helps to show the portal event datas. Which will redirected
+         to the portal form"""
+        try:
+            event_sudo = self._document_check_access('event.registration',
+                                                     event,
+                                                     access_token)
+        except (AccessError, MissingError):
+            return request.redirect('/my')
+        values = self._get_event_page_view_values(event_sudo, access_token,
+                                                  **kw)
+        return request.render("website_portal_events.event_portal_form",
+                              values)
+
+    @http.route(['/download/event_data/<int:event>'],
+                type='http', auth="public",
+                website=True)
+    def portal_my_event_download(self, event=None, access_token=None, **kw):
+        """Helps to download event ticket from the portal"""
+        if event:
+            pdf, _ = request.env['ir.actions.report'].sudo()._render_qweb_pdf(
+                'event.action_report_event_registration_full_page_ticket',
+                [event])
+            pdfhttpheaders = [('Content-Type', 'application/pdf'),
+                              ('Content-Length', str(len(pdf))),
+                              ('Content-Disposition',
+                               'attachment; filename=report.pdf')]
+            response = request.make_response(pdf, headers=pdfhttpheaders)
+            response.mimetype = 'application/pdf'
+            return response
+        else:
+            return request.redirect('/my/event_data')
+
+    def _get_event_page_view_values(self, event, access_token, **kwargs):
+        """Get the page view values"""
+        values = {
+            'event': event,
+            'page_name': 'event',
+        }
+        return self._get_page_view_values(event, access_token, values,
+                                          'my_events_history', False, **kwargs)
+
+    def _get_event_searchbar_sortings(self):
+        """Sort the events based on the date and name"""
+        return {
+            'date': {'label': _('Date'), 'order': 'create_date desc'},
+            'name': {'label': _('Name'), 'order': 'name asc'},
+        }
+
+    def _get_event_searchbar_filters(self):
+        """Filter the events by All, Last month, This Month, Last Week,
+         This Week, Last Year, This Year, Today and This Quarter"""
+        # today = date.today()
+        today = fields.Date.today()
+        this_month_start = today.replace(day=1)
+        this_quarter_start = today.replace(day=1, month=((
+                                                                 today.month - 1) // 3) * 3 + 1)
+        this_week_start = today - timedelta(days=today.weekday())
+        this_year_start = today.replace(month=1, day=1)
+        return {
+            'all': {'label': _('All'), 'domain': []},
+            'last_month': {
+                'label': _('Last Month'),
+                'domain': [('create_date', '>=',
+                            (this_month_start - timedelta(days=30)).strftime(
+                                '%Y-%m-%d')),
+                           ('create_date', '<=',
+                            (this_month_start - timedelta(days=1)).strftime(
+                                '%Y-%m-%d'))]
+            },
+            'this_month': {
+                'label': _('This Month'),
+                'domain': [
+                    (
+                        'create_date', '>=',
+                        this_month_start.strftime('%Y-%m-%d')),
+                    ('create_date', '<=', today.strftime('%Y-%m-%d'))]
+            },
+            'last_week': {
+                'label': _('Last Week'),
+                'domain': [('create_date', '>=',
+                            (this_week_start - timedelta(days=7)).strftime(
+                                '%Y-%m-%d')),
+                           ('create_date', '<=',
+                            (this_week_start - timedelta(days=1)).strftime(
+                                '%Y-%m-%d'))]
+            },
+            'this_week': {
+                'label': _('This Week'),
+                'domain': [
+                    ('create_date', '>=', this_week_start.strftime('%Y-%m-%d')),
+                    ('create_date', '<=', today.strftime('%Y-%m-%d'))]
+            },
+            'last_year': {
+                'label': _('Last Year'),
+                'domain': [('create_date', '>=',
+                            (this_year_start - timedelta(days=365)).strftime(
+                                '%Y-%m-%d')),
+                           ('create_date', '<=',
+                            (this_year_start - timedelta(days=1)).strftime(
+                                '%Y-%m-%d'))]
+            },
+            'this_year': {
+                'label': _('This Year'),
+                'domain': [
+                    ('create_date', '>=', this_year_start.strftime('%Y-%m-%d')),
+                    ('create_date', '<=', today.strftime('%Y-%m-%d'))]
+            },
+            'today': {
+                'label': _('Today'),
+                'domain': [('create_date', '=', today.strftime('%Y-%m-%d'))]
+            },
+            'this_quarter': {
+                'label': _('This Quarter'),
+                'domain': [
+                    ('create_date', '>=',
+                     this_quarter_start.strftime('%Y-%m-%d')),
+                    ('create_date', '<=', today.strftime('%Y-%m-%d'))]
+            }
+        }
+
+    def _get_event_search_domain(self, search_in, search):
+        """Returns the events for the given search(If we have not entered
+         the full name which will also gives the output"""
+        search_domain = []
+        if search_in == 'all':
+            search_domain.append([('name', 'ilike',
+                                   f'{search}%')])
+            search_domain.append([('email', 'ilike',
+                                   f'{search}%')])
+            search_domain.append([('phone', 'ilike',
+                                   f'{search}%')])
+        if search_in in ('event', 'all'):
+            search_domain.append([('event_id', 'ilike',
+                                   f'{search}%')])
+        return OR(search_domain)
+
+    def _get_event_searchbar_inputs(self):
+        """Which will returns a dictionary of values by the search contents
+         as Search in All, in Content, Search in Stages, Search in Event"""
+        values = {
+            'all': {'input': 'all', 'label': _('Search in All'), 'order': 1},
+            'event': {'input': 'event', 'label': _('Search in Event'),
+                      'order': 2},
+        }
+        return dict(sorted(values.items(), key=lambda item: item[1]["order"]))
+
+    def _prepare_my_event_values(self, page, date_begin, date_end, sortby,
+                                 filterby, search, search_in,
+                                 domain=None, url="/my/events"):
+        """Add all event values to the portal. Which will return the
+         values event, page, pager, filter, sort, and search"""
+        values = self._prepare_portal_layout_values()
+        Events = request.env['event.registration']
+        domain = expression.AND([
+            domain or [],
+            self._get_events_domain(),
+        ])
+        searchbar_sortings = self._get_event_searchbar_sortings()
+        # default sort by order
+        if not sortby:
+            sortby = 'date'
+        order = searchbar_sortings[sortby]['order']
+        searchbar_filters = self._get_event_searchbar_filters()
+        # default filter by value
+        if not filterby:
+            filterby = 'all'
+        domain += searchbar_filters[filterby]['domain']
+        searchbar_inputs = self._get_event_searchbar_inputs()
+        if search and search_in:
+            domain += self._get_event_search_domain(search_in, search)
+        if date_begin and date_end:
+            domain += [('create_date', '>', date_begin),
+                       ('create_date', '<=', date_end)]
+        values.update({
+            'date': date_begin,
+            # content according to pager and archive selected
+            # lambda function to get the invoices recordset when the pager
+            # will be defined in the main method of a route
+            'events': lambda pager_offset: self._get_grouped_events(Events,
+                                                                    domain,
+                                                                    order,
+                                                                    pager_offset),
+            'page_name': 'event',
+            'pager': {
+                "url": url,
+                "url_args": {'date_begin': date_begin, 'date_end': date_end,
+                             'sortby': sortby, 'search_in': search_in,
+                             'search': search},
+                "total": Events.search_count(domain),
+                "page": page,
+                "step": self._items_per_page,
+            },
+            'default_url': url,
+            'searchbar_sortings': searchbar_sortings,
+            'sortby': sortby,
+            'searchbar_filters': OrderedDict(sorted(searchbar_filters.items())),
+            'filterby': filterby,
+            'searchbar_inputs': searchbar_inputs,
+            'search_in': search_in,
+            'search': search,
+        })
+        return values
+
+    def _get_grouped_events(self, Events, domain, order, pager_offset, ):
+        """Returns the grouped evnts for a given domain"""
+        events = Events.search(domain, order=order, limit=self._items_per_page,
+                               offset=pager_offset)
+        return events

website_portal_events/doc/RELEASE_NOTES.md

@@ -0,0 +1,5 @@
+## Module <website_portal_events>
+#### 12.07.2023
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for Website Portal Events

website_portal_events/static/description/index.html

@@ -0,0 +1,717 @@
+<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>Enterprise
+            </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: #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>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;">
+                    Website Portal Events</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    This module is helps to show all events in customer portal</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 helps to show events tickets in portal. The sort, filter, search options are available in the portal to get the details easily. Also there is an option to download the ticket from the portal.
+    </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;">View event tickets in portal.</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;">An option to sort, filter, search the events to get it easily.</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;">An option to download the events ticket.</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;">
+                Open My Account from website
+            </h3>
+            <img src="assets/screenshots/eve1.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                We can see the Events document in portal.
+            </h3>
+            <img src="assets/screenshots/eve2.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Show all events corresponding to the logged in user.
+            </h3>
+            <img src="assets/screenshots/eve3.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Here we can sort th records by Date and Name
+            </h3>
+            <img src="assets/screenshots/eve4.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                The events which are sort by Date
+            </h3>
+            <img src="assets/screenshots/eve5.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                The events which are sort by Name
+            </h3>
+            <img src="assets/screenshots/eve6.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                We can Filter the records by All, Today, Week, Month, Quarter, Year
+            </h3>
+            <img src="assets/screenshots/eve7.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+               Filter the records by All
+            </h3>
+            <img src="assets/screenshots/eve8.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Filter the records by Last Month
+            </h3>
+            <img src="assets/screenshots/eve9.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Filter the records by Last Week
+            </h3>
+            <img src="assets/screenshots/eve10.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Filter the records by Last Year
+            </h3>
+            <img src="assets/screenshots/eve11.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                We can Search the records by Search in All and Search in Event
+            </h3>
+            <img src="assets/screenshots/eve12.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Search the records based on Search in All case.
+            </h3>
+            <img src="assets/screenshots/eve13.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Output of Search in All case.
+            </h3>
+            <img src="assets/screenshots/eve14.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Search the records based on Search in Event case.
+            </h3>
+            <img src="assets/screenshots/eve15.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Output of Search in Event case.
+            </h3>
+            <img src="assets/screenshots/eve17.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                An option to download ticket from the portal
+            </h3>
+            <img src="assets/screenshots/eve20.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                The downloaded ticket view
+            </h3>
+            <img src="assets/screenshots/eve21.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Form view of the ticket in portal
+            </h3>
+            <img src="assets/screenshots/eve22.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                We can download ticket from the form view also.
+            </h3>
+            <img src="assets/screenshots/eve25.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                We can send messages and attachments. Which will be visible in the backend
+            </h3>
+            <img src="assets/screenshots/eve23.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Backend view of the events
+            </h3>
+            <img src="assets/screenshots/eve24.png" class="img-thumbnail">
+        </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/hide_menu_user/"
+                           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/sales_credit_limit/"
+                           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 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/inventory_barcode_scanning/"
+                           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/sale_discount_total/"
+                           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/hr_payroll_community/"
+                           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/ohrms_core/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.gif">
+                            </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 86068
+                            27707</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 -->

website_portal_events/views/event_portal_templates.xml

@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--    Template for showing all corresponding events in the portal-->
+    <template id="portal_my_home_menu_event"
+              name="Portal layout : event menu entries"
+              inherit_id="portal.portal_breadcrumbs" priority="30">
+        <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
+            <li t-if="page_name == 'event'"
+                t-attf-class="breadcrumb-item #{'active ' if not event else ''}">
+                <a t-if="event" t-attf-href="/my/events?{{ keep_query() }}">
+                    Events
+                </a>
+                <t t-else="">Events</t>
+            </li>
+            <li t-if="event" class="breadcrumb-item active">
+                <t t-esc="event.name" t-if="event.name != '/'"/>
+                <t t-else="">
+                    <em>Draft</em>
+                </t>
+            </li>
+        </xpath>
+    </template>
+    <template id="portal_my_home_events" name="Show Events"
+              inherit_id="portal.portal_my_home" customize_show="True"
+              priority="30">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+            <t t-call="portal.portal_docs_entry">
+                <t t-set="title">Events</t>
+                <t t-set="url" t-value="'/my/events'"/>
+                <t t-set="placeholder_count" t-value="'event_count'"/>
+            </t>
+        </xpath>
+    </template>
+
+    <template id="portal_my_events" name="My Events">
+        <t t-call="portal.portal_layout">
+            <t t-set="breadcrumbs_searchbar" t-value="True"/>
+            <t t-call="portal.portal_searchbar">
+                <t t-set="title">Events</t>
+            </t>
+            <t t-if="not events">
+                <p>There are currently no events for your
+                    account.
+                </p>
+            </t>
+            <t t-if="events" t-call="portal.portal_table">
+                <thead>
+                    <tr class="active">
+                        <th>Attendee</th>
+                        <th>Registration Date</th>
+                        <th>Phone</th>
+                        <th class='d-none d-md-table-cell'>Email</th>
+                        <th class="text-center">Event</th>
+                        <th class="text-center">Status</th>
+                        <th class="text-center">Download Ticket</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <t t-foreach="events" t-as="event">
+                        <tr>
+                            <td>
+                                <a t-attf-href="/my/event_data/#{event.id}?{{ keep_query() }}">
+                                    <span t-field="event.name"/>
+                                </a>
+                            </td>
+                            <td>
+                                <span t-field="event.create_date"/>
+                            </td>
+                            <td class='d-none d-md-table-cell'>
+                                <span t-field="event.phone"/>
+                            </td>
+                            <td class='d-none d-md-table-cell'>
+                                <span t-field="event.email"/>
+                            </td>
+                            <td class='d-none d-md-table-cell'>
+                                <span t-field="event.event_id"/>
+                            </td>
+                            <td class='d-none d-md-table-cell text-center'>
+                                <t t-set="stages" t-value="event.state"/>
+                                <t t-if="stages == 'draft'">
+                                    <span class="badge rounded-pill text-bg-info">
+                                        <i aria-label="Unconfirmed" title="Unconfirmed"
+                                           role="img"/>
+                                        <span class="d-none d-md-inline">Unconfirmed
+                                        </span>
+                                    </span>
+                                </t>
+                                <t t-elif="stages == 'cancel'">
+                                    <span class="badge rounded-pill text-bg-info">
+                                        <i aria-label="Cancelled" title="Cancelled"
+                                           role="img"/>
+                                        <span class="d-none d-md-inline">Cancelled
+                                        </span>
+                                    </span>
+                                </t>
+                                <t t-elif="stages == 'open'">
+                                    <span class="badge rounded-pill text-bg-info">
+                                        <i aria-label="Confirmed" title="Confirmed"
+                                           role="img"/>
+                                        <span class="d-none d-md-inline">Confirmed
+                                        </span>
+                                    </span>
+                                </t>
+                                <t t-elif="stages == 'done'">
+                                    <span class="badge rounded-pill text-bg-info">
+                                        <i aria-label="Attended" title="Attended"
+                                           role="img"/>
+                                        <span class="d-none d-md-inline">Attended
+                                        </span>
+                                    </span>
+                                </t>
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group  flex-grow-1 me-1 mb-1">
+                                    <a class="btn btn-secondary btn-block o_download_btn"
+                                       t-attf-href="/download/event_data/#{event.id}?{{ keep_query() }}"
+                                       title="Download">
+                                        <i class="fa fa-download"/>
+                                        Download
+                                    </a>
+                                </div>
+                            </td>
+                        </tr>
+                    </t>
+                </tbody>
+            </t>
+        </t>
+    </template>
+
+    <template id="event_portal_form" name="Event Portal Template"
+              inherit_id="portal.portal_sidebar" primary="True">
+        <xpath expr="//div[hasclass('o_portal_sidebar')]" position="inside">
+            <div class="row mt16 o_portal_event_sidebar">
+                <!-- Sidebar -->
+                <t t-call="portal.portal_record_sidebar">
+                    <t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
+                    <t t-set="title">
+                    </t>
+                    <t t-set="entries">
+                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
+                            <li class="list-group-item flex-grow-1">
+                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
+                                    <div class="btn-group  flex-grow-1 me-1 mb-1">
+                                        <a class="btn btn-secondary btn-block o_download_btn"
+                                           t-attf-href="/download/event_data/#{event.id}?{{ keep_query() }}"
+                                           title="Download">
+                                            <i class="fa fa-download"/>
+                                            Download
+                                        </a>
+                                    </div>
+                                </div>
+                            </li>
+                            <li
+                                    class="list-group-item flex-grow-1">
+                                <div class="small mb-1">
+                                    <strong class="text-muted">
+                                        Salesperson
+                                    </strong>
+                                </div>
+                                <div class="row">
+                                    <div class="col flex-grow-0 pe-2">
+                                        <img class="rounded-circle mt-1 o_portal_contact_img"
+                                             t-att-src="image_data_uri(event.partner_id.image_1920)"
+                                             alt="Contact"/>
+                                    </div>
+                                    <div class="col ps-0">
+                                        <span t-field="event.partner_id"
+                                              t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
+                                        <a href="#discussion" class="small">
+                                            <i class="fa fa-fw fa-comments"/>
+                                            <b>Send message</b>
+                                        </a>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </t>
+                </t>
+                <!-- Page Content -->
+                <div id="event_content" class="col-12 col-lg">
+                    <div class="o_portal_html_view shadow p-3">
+                        <table class="o_portal_event"
+                               style="width: 100%; table-layout: fixed; padding: 10px;">
+                            <tr>
+                                <td style="text-align: left;padding-bottom: 15px;">
+                                    <span>
+                                        <b>Contact:</b>
+                                    </span>
+                                    <br/>
+                                    <span t-field="event.partner_id"/>
+                                </td>
+                                <td style="text-align: left;">
+                                    <span>
+                                        <b>Registration Date:</b>
+                                    </span>
+                                    <span t-field="event.create_date"/>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: left;padding-bottom: 15px;">
+                                    <span>
+                                        <b>Event:</b>
+                                    </span>
+                                    <span t-field="event.event_id"/>
+                                </td>
+                                <td style="text-align: left">
+                                    <span>
+                                        <b>Attendee Name:</b>
+                                    </span>
+                                    <span t-field="event.name"/>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: left;padding-bottom: 15px;">
+                                    <span>
+                                        <b>Phone:</b>
+                                    </span>
+                                    <span t-field="event.phone"/>
+                                </td>
+                                <td style="text-align: left">
+                                    <span>
+                                        <b>Email:</b>
+                                    </span>
+                                    <span t-field="event.email"/>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: left;padding-bottom: 15px;">
+                                    <span>
+                                        <b>Attended Date:</b>
+                                    </span>
+                                    <span t-field="event.date_closed"/>
+                                </td>
+                                <td style="text-align: left">
+                                    <span>
+                                        <b>Event ticket:</b>
+                                    </span>
+                                    <span t-field="event.event_ticket_id"/>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <!-- chatter -->
+                    <div id="event_communication" class="mt-4">
+                        <h2>History</h2>
+                        <t t-call="portal.message_thread"/>
+                    </div>
+                </div>
+            </div>
+        </xpath>
+    </template>
+</odoo>