Feb 20 : [ADD] Initial Commit 'chatter_attachments_manager'

chatter_attachments_manager/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
+
+Chatter Attachment Manager
+==========================
+This module helps to manage attachments in chatter and in discuss
+
+Configuration
+=============
+* No Additional configuration is needed.
+
+License
+-------
+Affero General Public License v3.0 (AGPL v3)
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer: (V16) Anagha S, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

chatter_attachments_manager/__init__.py

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

chatter_attachments_manager/__manifest__.py

@@ -0,0 +1,71 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Anagha S (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': 'Chatter Attachment Manager',
+    'version': '16.0.1.0.0',
+    'category': 'Discuss, Document Management',
+    'summary': 'This module help to manage attachments',
+    'description': """This module helps to enhance the attachment management 
+    capabilities within Odoo.Can easily edit,read, save, preview your documents 
+    inside odoo. Module works in discuss, chat and chatter of any record""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['mail', 'base', 'web', 'documents'],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/ir_attachment_views.xml',
+        'views/ir_attachment_tag_views.xml',
+        'report/chatter_attachments_manager_report_templates.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'chatter_attachments_manager/static/src/attachment_control_panel/'
+            'chatter_camera.js',
+            'chatter_attachments_manager/static/src/attachment_control_panel/'
+            'attachment_control_panel.js',
+            'chatter_attachments_manager/static/src/attachment_card/'
+            'attachment_card.js',
+            'chatter_attachments_manager/static/src/attachment_image/'
+            'attachment_image.js',
+            'chatter_attachments_manager/static/src/css/'
+            'chatter_attachment_manager.css',
+            'chatter_attachments_manager/static/src/chatter_topbar/'
+            'chatter_topbar_templates.xml',
+            'chatter_attachments_manager/static/src/attachment_control_panel/'
+            'attachment_control_panel_templates.xml',
+            "chatter_attachments_manager/static/src/attachment_card/"
+            "attachment_card_templates.xml",
+            'chatter_attachments_manager/static/src/attachment_image/'
+            'attachment_image_templates.xml',
+        ],
+    },
+    'external_dependancy': ['pandas', 'qrcode', 'docx'],
+    'images': [
+        'static/description/banner.jpg',
+    ],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False
+}

chatter_attachments_manager/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: Anagha S (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 chatter_attachment_manager

chatter_attachments_manager/controllers/chatter_attachment_manager.py

@@ -0,0 +1,62 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Anagha S (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 datetime import datetime
+try:
+    from BytesIO import BytesIO
+except ImportError:
+    from io import BytesIO
+import zipfile
+from odoo import http
+from odoo.http import request, content_disposition
+
+
+class Binary(http.Controller):
+    """Attachment downloading binary class."""
+
+    @http.route('/web/binary/download_document', type='http',
+                auth='public')
+    def download_zip(self, **kwargs):
+        """This method used to download all chatter attachments inside a record
+        as a zip file."""
+        model = kwargs.get('param1', 0)
+        tab_id = int(kwargs.get('param2', 0))
+        attachment_ids = request.env['ir.attachment'].search(
+            [('res_model', '=', model), ('res_id', '=', tab_id)])
+        file_dict = {}
+        for attachment_id in attachment_ids:
+            file_store = attachment_id.store_fname
+            if file_store:
+                file_name = attachment_id.name
+                file_path = attachment_id._full_path(file_store)
+                file_dict[f"{file_store}:{file_name}"] = {
+                    'path': file_path, 'name': file_name}
+        zip_filename = datetime.now()
+        zip_filename = f"{zip_filename}.zip"
+        bit_io = BytesIO()
+        with zipfile.ZipFile(bit_io, "w",
+                             zipfile.ZIP_DEFLATED) as zip_file:
+            for file_info in file_dict.values():
+                zip_file.write(file_info["path"], file_info["name"])
+            zip_file.close()
+            return request.make_response(bit_io.getvalue(), headers=[
+                ('Content-Type', 'application/x-zip-compressed'),
+                ('Content-Disposition', content_disposition(zip_filename))])

chatter_attachments_manager/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <chatter_attachments_manager>
+
+#### 16.10.2023
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for Chatter Attachment Manager

chatter_attachments_manager/models/__init__.py

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

chatter_attachments_manager/models/ir_attachment.py

@@ -0,0 +1,107 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Anagha S (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 io import BytesIO
+import pandas as pd
+from odoo import api, fields, models
+try:
+    import qrcode
+    import base64
+    import io
+    from docx import Document as DocxDocument
+except ImportError:
+    io = None
+    qrcode = None
+    base64 = None
+    DocxDocument = None
+
+
+class IrAttachment(models.Model):
+    """Extended Attachment Model (Inherited from 'ir.attachment')
+
+    This class represents an extension of the original 'ir.attachment' model in
+    Odoo. The 'ir.attachment' model is a built-in Odoo model that handles file
+    attachments to various records, such as documents, emails, or notes.
+
+    In this custom model, we extend the functionality of 'ir.attachment' to add
+    new fields and custom methods to cater to specific requirements of our
+    application.
+    """
+    _inherit = 'ir.attachment'
+
+    tags_ids = fields.Many2many(comodel_name='ir.attachment.tag',
+                                string='Tags', help="Tags for attachments")
+
+    @api.model
+    def decode_content(self, attach_id, doc_type):
+        """Decode XLSX or DOC File Data.
+        This method takes a binary file data from an attachment and decodes
+        the content of the file for XLSX and DOC file formats.
+        :param int attach_id: id of attachment.
+        :param str doc_type: the type of the given attachment either 'xlsx' or
+        'doc'
+        :return: return the decoded data."""
+        attachment = self.sudo().browse(attach_id)
+        xlsx_data = base64.b64decode(attachment.datas)
+        if doc_type == 'xlsx':
+            content = pd.read_excel(BytesIO(xlsx_data), engine='openpyxl',
+                                    converters={'A': str})
+            html_table = content.to_html(index=False)
+            return html_table
+        if doc_type == 'docx':
+            doc = DocxDocument(io.BytesIO(xlsx_data))
+            paragraphs = [p.text for p in doc.paragraphs]
+            return paragraphs
+        text = "Cant Preview"
+        return text
+
+    @api.model
+    def save_edited_image(self, attach_id, image):
+        """The image is replaced by image from Toast image editor
+        :param int attach_id: id of attachment.
+        :param str image: new image data
+        :return file containing image
+        """
+        file = self.sudo().browse(attach_id)
+        file.write({'datas': image.strip('data:image/png;base64')})
+        return file
+
+    @api.model
+    def generate_qr_code(self, attach_id):
+        """Generate qr code for attachment tha allow anyone to download it."""
+        base_url = self.env['ir.config_parameter'].sudo().get_param(
+            'web.base.url')
+        data = {}
+        download_url = f"mail/channel/1/attachment/{attach_id}?download=true"
+        if qrcode and base64:
+            attach_qr = qrcode.QRCode(
+                version=3,
+                error_correction=qrcode.constants.ERROR_CORRECT_L,
+                box_size=4, border=4)
+            attach_qr.add_data(base_url + download_url)
+            attach_qr.make(fit=True)
+            img = attach_qr.make_image()
+            temp = BytesIO()
+            img.save(temp, format="PNG")
+            qr_image = base64.b64encode(temp.getvalue())
+            data.update({'image': qr_image,
+                         'company': self.env.company.name})
+        return data

chatter_attachments_manager/models/ir_attachment_tag.py

@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Anagha S (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 random import randint
+from odoo import fields, models
+
+
+class AttachmentTag(models.Model):
+    """Attachment tag model."""
+    _name = "ir.attachment.tag"
+    _description = "Attachment Tag"
+
+    def _get_default_color(self):
+        """To get default color for tags."""
+        return randint(1, 11)
+
+    name = fields.Char(string='Tag Name', required=True, translate=True,
+                       help='Name of tags.')
+    color = fields.Integer(string='Color', default=_get_default_color,
+                           help="Tag color.")
+    _sql_constraints = [
+        ('name_uniq', 'unique (name)', "Tag name already exists !"),]

chatter_attachments_manager/report/chatter_attachments_manager_report_templates.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    Attachment report contain qrcode-->
+    <record id="attachment_qr_code" model="ir.actions.report">
+        <field name="name">Attachment QR Code</field>
+        <field name="model">ir.attachment</field>
+        <field name="report_type">qweb-pdf</field>
+        <field name="report_name">chatter_attachments_manager.attachment_qr_report_template</field>
+        <field name="report_file">chatter_attachments_manager.attachment_qr_report_template</field>
+    </record>
+    <!--    Attachment QR code report-->
+    <template id="attachment_qr_report_template">
+        <t t-call="web.basic_layout">
+            <div class="page container">
+                <div class="text-center">
+                    <h2>Attachment Qrcode
+                    </h2>
+                    <br/>
+                    <img class="qr-code-img" style="width:420px;height:420px;"
+                         t-attf-src="data:image/png;base64,{{image}}"/>
+                    <br/>
+                    You can scan the qr code and download the file.
+                </div>
+            </div>
+        </t>
+    </template>
+</odoo>

chatter_attachments_manager/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_ir_attachment_tag_user,access.ir.attachment.tag.user,model_ir_attachment_tag,base.group_user,1,1,1,1

chatter_attachments_manager/static/description/index.html

@@ -0,0 +1,670 @@
+<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: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    Chatter Attachment Manager</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    This module helps to manage Attachments in Chatter, Chat and in Discuss</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 enhance the Attachment Management
+    capabilities within Odoo.Can easily Edit, Read, Preview your Documents
+    inside Odoo. Module works in Discuss, Chat and Chatter of any record
+    </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: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Support front camera and screen recorder.Upload image to Chatter from these.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Can edit the record by renaming, adding Tags etc.</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;">
+        Offline preview is available for Xlsx, Docx, Pdf And Image files from chatter itself</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;">
+               Image Professional Editor support.This app provides a professional image editor,
+                allowing you to edit and enhance images directly within your App.</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;">
+                Tag for Attachments: Any attachment can have many tags.</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;">
+            Download all Attachments attached to a record can be downloaded as a Zip file.</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;">
+            QRcode support: QR can be sent to any employee who can download and open the file.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+            Can View all attachments from Document Module and filter the Attachments by Tags</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;">Upload Attachments.
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can upload from your device, front camera, screencast.You
+                are able to download all attachments and manage it.
+                Can upload multiple files at a time.<br/>
+                Attachments can be posted by clicking the '+' icon in the
+                chatter.
+            </p>
+            <img src="assets/screenshots/Screenshot2.png" class="img-thumbnail">
+             <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                 You can upload file from your device by clicking on 'My device'.
+             </p>
+            <img src="assets/screenshots/Screenshot3.png" class="img-thumbnail">
+             <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                 Can select files from device and posted on attachments.
+             </p>
+            <img src="assets/screenshots/Screenshot4.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Can upload file from 'Front Cam'.
+            </p>
+            <img src="assets/screenshots/Screenshot5.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                It will open a window to take picture.Click on 'Capture' to capture the photo or cancel it.
+            </p>
+            <img src="assets/screenshots/Screenshot6.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                The "Record Screen" button allows you to upload recorded screens.
+            </p>
+            <img src="assets/screenshots/Screenshot7.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                On click on 'Share' button, the screen is recorded.
+            </p>
+            <img src="assets/screenshots/Screenshot8.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Screen Recorder can be stopped on clicking 'Stop sharing'. Recorder video will be saved there.
+            </p>
+            <img src="assets/screenshots/Screenshot9.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                All uploaded attachments can be viewed.
+            </p>
+            <img src="assets/screenshots/Screenshot10.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;">Edit Attachments.
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Click on 'cog' icon, it will list some items.Click on 'Edit record' to edit the record.
+            </p>
+            <img src="assets/screenshots/screenshot11.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Records can be edited by altering the file name and adding tags
+                etc.
+            </p>
+            <img src="assets/screenshots/Screenshot12.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Click 'Save' to update the changes.
+            </p>
+            <img src="assets/screenshots/Screenshot13.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Can see updated name.</p>
+            <img src="assets/screenshots/screenshot14.png"
+                 class="img-thumbnail">
+        </div>
+        <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+            A professional Image Editor is Provided to alter the image, such as
+            cropping, Resizing, applying a color filter etc.Can load another image and
+            replace existing one.
+        </h3>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Click on 'Image Editor'</p>
+            <img src="assets/screenshots/Screenshot15.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">The selected picture will be shown in the TOAST UI Image Editor window.</p>
+            <img src="assets/screenshots/Screenshot16.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Can edit the image by resizing, adding icons, also able to replace the image.</p>
+            <img src="assets/screenshots/Screenshot17.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/Screenshot18.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Edited image will be saved on saving.</p>
+            <img src="assets/screenshots/Screenshot19.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;">
+                Offline preview of xlsx, docx and pdf files.
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Click on 'Preview Offline' to preview the attachments.Offline preview for only 'docx', 'XLSX', 'webm', 'pdf' is available.</p>
+            <img src="assets/screenshots/Screenshot20.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/Screenshot21.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Can view all Attachments from Document Module and filter The
+                Attachments by Tags
+            </p>
+            <img src="assets/screenshots/Screenshot22.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/Screenshot23.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Can view, edit and create attachment tags from 'Attachment Tags' menu from Document module.
+            </p>
+            <img src="assets/screenshots/Screenshot24.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/advanced_chatter_view/"
+                           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/activity_reminder/"
+                           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/chatter_camera/"
+                           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/customer_product_qrcode/"
+                           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/base_accounting_kit/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.gif">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/multi_barcodes_pos/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </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 -->

chatter_attachments_manager/static/src/attachment_card/attachment_card.js

@@ -0,0 +1,104 @@
+/** @odoo-module */
+import { AttachmentCard } from '@mail/components/attachment_card/attachment_card';
+import { useService } from "@web/core/utils/hooks";
+import { patch } from '@web/core/utils/patch';
+import rpc from 'web.rpc';
+var core = require('web.core');
+var _t = core._t;
+var QWeb = core.qweb;
+const { useRef } = owl;
+
+patch(AttachmentCard.prototype, 'chatter_attachments_manager_attachment_card', {
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+    /**
+     * @override
+     */
+     setup() {
+       this.orm = useService("orm");
+       this.preview = useRef('preview_modal')
+       this._super.apply(this, arguments);
+    },
+    /**
+     * Offline Preview of file type 'docx', 'xlsx' and 'pdf'
+     */
+    async onClickPreviewOffline(ev){
+        ev.stopPropagation();
+        ev.preventDefault();
+        var self = this;
+        var type = $(ev.currentTarget).data("type")
+        this.preview.el.querySelector('#FileHead').textContent = ev.target.name
+        if(type === 'xlsx' || type === 'docx'){
+        this.preview.el.style.display = "block";
+        var preview = rpc.query({
+                    model: 'ir.attachment',
+                    method: 'decode_content',
+                    args: [parseInt(ev.target.id),type],
+                }).then(function (data) {
+                    if (type === 'xlsx'){
+                    $('.XlsxTable').append(data)
+                    var frame = $(".dataframe").attr('id', 'MyTable');
+                    }
+                    else if(type === 'docx'){
+                     for (let para = 0; para < data.length; para++) {
+                        self.preview.el.querySelector('.MyDocs').append(data[para])
+                      };
+                    }
+                });
+        }
+       else{
+         this.props.record.onClickImage()
+       }
+    },
+    /**
+     Close preview window
+   **/
+    stopPreviewButton(ev){
+        this.preview.el.style.display= "none";
+        this.preview.el.querySelector('.MyDocs').textContent = " ";
+        $('#MyTable').remove();
+        this.preview.el.querySelector('#FileHead').textContent = " ";
+    },
+     /**
+     * Records can be edited by altering the file name and adding tags.
+     */
+    async onClickEditRecord(ev){
+     ev.preventDefault();
+     var attachment_id = parseInt(ev.target.id);
+     await this.env.services.action.doAction({
+                name: this.env._t("Attachment"),
+                type: 'ir.actions.act_window',
+                view_mode: 'form',
+                views: [[false, 'form']],
+                target: 'new',
+                res_id: attachment_id,
+                res_model: 'ir.attachment',
+                context: { create: false },
+        }, {
+            onClose: async () => {
+               await location.reload();
+            },
+        });
+        },
+     /**
+     * For generating Qr Code contain download link of attachment.
+     */
+    _onClickQrCode(ev){
+    var self = this;
+    rpc.query({
+         model: 'ir.attachment',
+         method: 'generate_qr_code',
+         args: [parseInt(ev.target.id)],
+            }).then(function (data){
+            var act = self.env.services.action.doAction({
+                type: 'ir.actions.report',
+                report_type: 'qweb-pdf',
+                report_name: 'chatter_attachments_manager.attachment_qr_report_template',
+                report_file: 'chatter_attachments_manager.attachment_qr_report_template',
+                data: data,
+                });
+                console.log(act,'act')
+            });
+    },
+});

chatter_attachments_manager/static/src/attachment_card/attachment_card_templates.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <!--    Adding new icon on attachment card that have some functionalities-->
+   <t t-name="AttachmentCard" t-inherit="mail.AttachmentCard"
+      t-inherit-mode="extension" owl="1">
+     <xpath expr="//*[hasclass('o_AttachmentCard_aside')]/t[1]"
+            position="before">
+          <t t-if="!attachmentCard.attachmentList.composerViewOwner and !attachmentCard.attachment.isUploading">
+              <div class="dropdown" style="position:relative;">
+                  <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemOptions
+                  btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0"
+                          t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute
+                           btn-primary transition-base' : 'bg-300' }}"
+                          data-bs-toggle="collapse"
+                          t-att-data-bs-target="'#settingsMenu' + attachmentCard.attachment.id"
+                          aria-expanded="true"
+                          t-att-aria-controls="'settingsMenu' + attachmentCard.attachment.id">
+                    <i class="fa fa-cog" role="img" aria-label="Options"/>
+                </button>
+                  <div class="context_menu_dropdown"
+                       t-att-id="'settingsMenu' + attachmentCard.attachment.id">
+                      <a class="dropdown-item context-menu-icon--fa fa fa-edit"
+                         t-on-click="onClickEditRecord"
+                         t-att-id="attachmentCard.attachment.id">Edit record</a>
+                      <t t-if="attachmentCard.attachment.extension != 'zip'">
+                      <a class="dropdown-item context-menu-icon--fa fa fa-eye"
+                         t-on-click="onClickPreviewOffline"
+                         t-att-name="attachmentCard.attachment.name"
+                         t-att-data-type="attachmentCard.attachment.extension"
+                         t-att-id="attachmentCard.attachment.id">Preview Offline</a>
+                      </t>
+                      <a class="dropdown-item context-menu-icon--fa fa fa-download"
+                         t-on-click="attachmentCard.attachment.onClickDownload">Download</a>
+                      <a class="dropdown-item context-menu-icon--fa fa fa-qrcode"
+                         t-on-click="_onClickQrCode"
+                         t-att-id="attachmentCard.attachment.id">Qr Code</a>
+                  </div>
+              </div>
+          </t>
+         <!--For preview xlsx,docx and pdf files-->
+         <center>
+                <div id="xlsx_preview" class="modal" t-ref="preview_modal">
+                <div class="modal-content" id="MyPreview_content">
+                    <span class="close" id="stop-preview-button"
+                          t-on-click="stopPreviewButton">X</span>
+                    <h1 id="FileHead"/>
+                    <div class="XlsxTable" t-ref="xlsx_table" >
+                    </div>
+                    <p class="MyDocs" t-ref="MyDocs"/>
+                </div>
+                </div>
+            </center>
+         <script src="https://code.jquery.com/jquery-3.6.0.min.js">
+         </script>
+      </xpath>
+   </t>
+</templates>

chatter_attachments_manager/static/src/attachment_control_panel/attachment_control_panel.js

@@ -0,0 +1,66 @@
+/** @odoo-module **/
+import { AttachmentBox } from '@mail/components/attachment_box/attachment_box';
+import { patch } from 'web.utils';
+import Dialog from 'web.Dialog';
+import view_dialogs from 'web.view_dialogs';
+import core from 'web.core';
+import rpc from 'web.rpc';
+const { useRef } = owl;
+const _t = core._t;
+
+patch(AttachmentBox.prototype, 'chatter_attachments_manager_attachment_box', {
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+    setup() {
+   this._super.apply(this, arguments);
+   this.MyModal = useRef('myModal')
+   this.control_menu = useRef('control_menu_dropdown')
+   },
+   /**
+        Open a dropdown on click upload icon
+   **/
+   onClickUpload(ev){
+    if (this.control_menu.el.style.display === "none") {
+        this.control_menu.el.style.display = "block";
+      }
+    else {
+        this.control_menu.el.style.display = "none";
+      }
+   },
+   /**
+      Open camera to capture
+   **/
+    onClickCamera(ev) {
+    var self = this;
+    this.MyModal.el.style.display = "table";
+    let All_mediaDevices = navigator.mediaDevices
+    All_mediaDevices.getUserMedia({
+        audio: false,
+        video: true
+    })
+    .then(function(vidStream) {
+        var video = document.getElementById('videoCam');
+        if ("srcObject" in video) {
+            video.srcObject = vidStream;
+        } else {
+            video.src = window.URL.createObjectURL(vidStream);
+        }
+        video.onloadedmetadata = function(e) {
+            video.play();
+        };
+        var stopButton = document.getElementById('stop-camera-button');
+        stopButton.addEventListener('click', function() {
+            vidStream.getTracks().forEach(function(track) {
+                track.stop();
+                self.MyModal.el.style.display = "none";
+                canvas.toDataURL();
+            });
+                  location.reload();
+        });
+    })
+    .catch(function(e) {
+        console.log(e.name + ": " + e.message);
+    });
+    }
+});

chatter_attachments_manager/static/src/attachment_control_panel/attachment_control_panel_templates.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <!--Attachment control panel inside attachment in chatter to manage attachments-->
+    <t t-name="mail.AttachmentControlPanel" t-inherit="mail.AttachmentBox"
+       t-inherit-mode="extension" owl="1">
+        <xpath expr="//*[hasclass('o_AttachmentBox_title')]"
+               position="before">
+            <div class="o_control_panel">
+                <div class="o_cp_left">
+                    <div class="o_cp_buttons">
+                        <div class="o_list_buttons">
+                            <button title="Download All" type="button"
+                                    class="btn btn-primary btn-sm am-control-btn-left"
+                                    t-on-click="attachmentBoxView.onClickDownloadAll">
+                                <i class="fa fa-download"></i></button>
+                            <button title="Upload new files(file)" type="button"
+                                    class="btn btn-primary btn-sm am-control-btn-left oe_button_control_new"
+                                    t-on-click="onClickUpload">
+                                <i class="fa fa-plus"></i>
+                            </button>
+                            <div class="control_menu_dropdown"
+                                 style="display:none;" t-ref="control_menu_dropdown">
+                              <a class="dropdown-item context-menu-icon--fa fa fa-folder-open-o"
+                                 t-on-click="attachmentBoxView.onClickAddAttachment"> My device</a>
+                                <a class="dropdown-item context-menu-icon--fa fa fa-camera-retro"
+                                   t-on-click="onClickCamera"> Front Cam
+                                </a>
+                                <a class="dropdown-item context-menu-icon--fa fa fa-video-camera"
+                                   t-on-click="attachmentBoxView.onClickScreenRec"> Record Screen
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Modal for front camera and screen recorder-->
+           <center>
+                <div id="myModal" class="modal" t-ref="myModal">
+                <div class="modal-content" id="video_content">
+                <header>
+                <video id="videoCam" t-ref="videoCamera"/>
+                </header>
+                     <div id="screen_recording_container" style="display:none">
+                    <button id="start_record_button">Start Recording</button>
+                    <button id="stop_record_button">Stop Recording</button>
+                     <video id="recorded_video" style="width: 55%;"  controls="">
+                            <source src="" type="video/mp4"/>
+                     </video>
+                    </div>
+                    <footer>
+                    <center>
+                         <div id="capture">
+                        <button class="btn btn-primary" id="click_photo"
+                        t-on-click="attachmentBoxView.ImageCapture">Capture</button>
+                        <button class="btn btn-primary" id="stop-camera-button">Cancel</button>
+                        </div>
+                    </center>
+                </footer>
+                    <span hidden="hidden">
+                <canvas id="canvas" width="150" height="100"/>
+                </span>
+                </div>
+                </div>
+            </center>
+        </xpath>
+    </t>
+</templates>

chatter_attachments_manager/static/src/attachment_control_panel/chatter_camera.js

@@ -0,0 +1,111 @@
+/** @odoo-module **/
+import { registerPatch } from '@mail/model/model_core';
+
+registerPatch({
+    name: 'AttachmentBoxView',
+    recordMethods: {
+         /**
+        Capture the image
+        **/
+         ImageCapture: function(){
+            let canvas =  document.querySelector("#canvas");
+            let video = document.querySelector("#videoCam");
+             canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+             let image_data_url = canvas.toDataURL('image/jpeg');
+             var fl = [];
+             var arr = image_data_url.split(','),
+                mime = arr[0].match(/:(.*?);/)[1],
+                bstr = atob(arr[1]),
+                n = bstr.length,
+                u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            var f = new File([u8arr], 'image.jpeg', {
+                type: mime
+            });
+            fl.push(f);
+            this.fileUploader.uploadFiles(fl)
+        },
+         /**
+        Record the screen.
+        **/
+    async onClickScreenRec(ev){
+         try {
+       let stream = await navigator.mediaDevices.getDisplayMedia({
+            video: true
+        })
+        const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
+                 ? "video/webm; codecs=vp9"
+                 : "video/webm"
+        let mediaRecorder = new MediaRecorder(stream, {
+            mimeType: mime
+        })
+        var self = this;
+        let chunks = []
+        mediaRecorder.addEventListener('dataavailable', function(e) {
+            chunks.push(e.data)
+        })
+        mediaRecorder.addEventListener('stop', function(){
+            let blob = new Blob(chunks, {
+                type: chunks[0].type
+            })
+             const blobToBase64 = blob => {
+              const reader = new FileReader();
+              reader.readAsDataURL(blob);
+              return new Promise(resolve => {
+                reader.onloadend = () => {
+                  resolve(reader.result);
+                };
+              });
+            };
+            blobToBase64(blob).then(res => {
+            var fl = [];
+               var arr = res.split(','),
+                mime = arr[0].match(/:(.*?);/)[1],
+                bstr = atob(arr[1]),
+                n = bstr.length,
+                u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            var f = new File([u8arr], 'example.webm', {
+                type: mime
+            });
+            fl.push(f);
+            self.fileUploader.uploadFiles(fl)
+            });
+        })
+        mediaRecorder.start()
+        } catch(e){}
+   },
+        /**
+        Download all attachments attached to the record.
+        **/
+    onClickDownloadAll(ev) {
+      var apiUrl = '/web/binary/download_document'; // URL of Odoo controller
+      var modelName = this.chatter.thread.model;
+      var tabId = this.chatter.thread.id;
+      fetch(apiUrl + '?param1=' + modelName + '&param2=' + tabId, {
+        method: 'GET',
+        responseType: 'blob'
+      })
+      .then(response => response.blob())
+      .then(blob => {
+        var url = window.URL.createObjectURL(blob);
+        var a = $('<a>', {
+          style: 'display: none',
+          href: url,
+          download: modelName + '.zip'
+        });
+        $('body').append(a);
+        a[0].click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+      })
+      .catch(error => {
+        console.error('Error downloading zip:', error);
+      });
+    },
+    }
+});

chatter_attachments_manager/static/src/attachment_image/attachment_image.js

@@ -0,0 +1,92 @@
+/** @odoo-module **/
+import { registerPatch } from '@mail/model/model_core';
+import { isEventHandled, markEventHandled } from '@mail/utils/utils';
+import rpc from 'web.rpc';
+
+registerPatch({
+    name: 'AttachmentImage',
+    recordMethods: {
+    /**
+    on click image event
+   **/
+    onClickImage(ev) {
+             if (isEventHandled(ev, 'AttachmentImage.onClickEditImgRecord')) {
+                return;
+            }
+            if (isEventHandled(ev, 'AttachmentImage.onClickImageEdit')) {
+                return;
+            }
+        this._super.apply(this, arguments);
+    },
+    /**
+     Open window to edit image record
+   **/
+    async onClickEditImgRecord(ev){
+        ev.preventDefault();
+        markEventHandled(ev, 'AttachmentImage.onClickEditImgRecord');
+        var attachment_id = parseInt(ev.target.id);
+        await this.env.services.action.doAction({
+                name: this.env._t("Attachment"),
+                type: 'ir.actions.act_window',
+                view_mode: 'form',
+                views: [[false, 'form']],
+                target: 'new',
+                res_id: attachment_id,
+                res_model: 'ir.attachment',
+                context: { create: false },
+        }, {
+            onClose: async () => {
+               await location.reload();
+            },
+        });
+        },
+    /**
+    Open a window to edit image
+   **/
+    async onClickImageEdit(ev){
+        markEventHandled(ev, 'AttachmentImage.onClickImageEdit');
+        var attachment_id = parseInt(ev.target.id)
+        var imageEditor = new tui.ImageEditor('.tui-image-editor-container', {
+             includeUI: {
+                 loadImage: {
+                     path: "/web/image/ir.attachment/"+attachment_id+"/datas",
+                     name: 'SampleImage'
+                 },
+                 imageSize: {
+                      oldWidth: "0",
+                      oldHeight: "0",
+                      newWidth: "300",
+                      newHeight: "90"
+                    },
+                 initMenu: 'filter',
+                 menuBarPosition: 'bottom'
+             },
+             cssMaxWidth: 500,
+             cssMaxHeight: 590,
+             usageStatistics: false
+        });
+         $('#imageEditor').css("display","block");
+         $('.tui-image-editor-header-buttons .tui-image-editor-download-btn').
+            replaceWith('<button class="tui-image-editor-save-btn" >Save</button>')
+         $('.tui-image-editor-header-buttons').append(`<div class="tui-image-editor-close-btn"
+             style="background-color: #fff;border: 1px solid #ddd;color: #222;
+             "font-family: sans-serif;font-size:= 12px">Close</div>`)
+         $('.tui-image-editor-header-buttons .tui-image-editor-close-btn').
+         on('click', this.CloseImageEditor)
+         $('.tui-image-editor-header-buttons .tui-image-editor-save-btn').on('click', () => {
+         const myImage = imageEditor.toDataURL();
+         rpc.query({
+             model: 'ir.attachment',
+             method: 'save_edited_image',
+             args: [attachment_id,myImage],
+                }).then(function (data){
+            location.reload();
+            });
+        });
+        },
+    CloseImageEditor: function(){
+    var edit = jQuery.noConflict();
+    edit('#imageEditor').css("display","none");
+    },
+    }
+});

chatter_attachments_manager/static/src/attachment_image/attachment_image_templates.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <!--    settings menu for attachment image-->
+    <t t-name="AttachmentImageTools" t-inherit="mail.AttachmentImage"
+       t-inherit-mode="extension" owl="1">
+    <xpath expr="//div[hasclass('o_AttachmentImage_imageOverlay')]/div"
+           position="replace">
+        <div class="dropdown">
+        <div class="o_AttachmentImage_action o_AttachmentImage_actionSettings btn btn-sm btn-dark rounded opacity-75 opacity-100-hover mt-auto"
+             title="settings"> <i class="fa fa-cog"/>
+        </div>
+            <div class="context_menu_dropdown">
+            <a class="dropdown-item context-menu-icon--fa fa fa-edit"
+               t-on-click="attachmentImage.onClickEditImgRecord"
+               t-att-id="attachmentImage.attachment.id">Edit record</a>
+                <a class="dropdown-item context-menu-icon--fa fa fa-magic"
+                   t-on-click="attachmentImage.onClickImageEdit"
+                   t-att-id="attachmentImage.attachment.id">Image Editor</a>
+                <a class="dropdown-item context-menu-icon--fa fa fa-close"
+                   t-on-click="attachmentImage.onClickUnlink">Delete</a>
+         </div>
+    </div>
+    </xpath>
+        <!--    TUI image editor for edit attachment images.-->
+        <xpath expr="//div[hasclass('o_AttachmentImage')]"
+               position="after">
+        <center>
+                <div id="imageEditor" class="modal"
+                     style=" width:35%; height:58%;">
+                <div class="modal-content">
+                <header>
+                <div class="tui-image-editor-container"
+                     id="tui-image-editor-container">
+                </div>
+                </header>
+                </div>
+                </div>
+            </center>
+            <link rel="stylesheet"
+                  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"/>
+            <script type="text/javascript"
+                    src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js">
+        </script>
+            <script type="text/javascript"
+                    src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js">
+        </script>
+            <script type="text/javascript"
+                    src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js">
+        </script>
+            <script type="text/javascript"
+                    src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js">
+        </script>
+            <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js">
+        </script>
+    </xpath>
+   </t>
+</templates>

chatter_attachments_manager/static/src/chatter_topbar/chatter_topbar_templates.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <!--Chatter Top bar view-->
+    <t t-inherit="mail.ChatterTopbar" t-inherit-mode="extension" owl="1">
+     <xpath expr="//button[hasclass('o_ChatterTopbar_buttonAddAttachments')]"
+            position="replace">
+         <button t-if="chatterTopbar.chatter.thread.allAttachments.length === 0"
+                 class="o_ChatterTopbar_button o_ChatterTopbar_buttonAddAttachments btn btn-light btn-primary"
+                 type="button"
+                 t-att-disabled="!chatterTopbar.chatter.isTemporary and !chatterTopbar.chatter.hasWriteAccess"
+                 t-on-click="chatterTopbar.chatter.onClickButtonToggleAttachments">
+             <i class="fa fa-paperclip fa-lg me-1" role="img"
+                aria-label="Attachments"/>
+             <t t-if="chatterTopbar.chatter.isShowingAttachmentsLoading">
+                 <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin"
+                    aria-label="Attachment counter loading..."/>
+             </t>
+         </button>
+     </xpath>
+   </t>
+</templates>

chatter_attachments_manager/static/src/css/chatter_attachment_manager.css

@@ -0,0 +1,126 @@
+/* Dropdown on attachment card for tools*/
+.dropdown {
+        position: relative;
+      }
+      .o_AttachmentCard_aside{
+        overflow:visible !important;
+      }
+      .context_menu_dropdown {
+        display: none;
+        position: absolute;
+        background-color: white;
+        min-width: 120px;
+        box-sizing: border-box;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1;
+        right: 0;
+        padding-bottom: 6px;
+        padding-top: 6px;
+      }
+      .context_menu_dropdown a{
+        color: black;
+        text-decoration: none;
+      }
+
+      .context_menu_dropdown a:hover {
+        background-color: #f1f1f1;
+      }
+
+      .dropdown:hover .context_menu_dropdown{
+        display: block;
+      }
+/* Image editor container */
+#tui-image-editor-container{
+        width: 981px;
+        height: 500px;
+        top: 0px;
+        position: fixed; /* Stay in place */
+        z-index: 10; /* Sit on top by 10px*/
+        padding: 1px; /* location of box */
+        left: 10px;
+        }
+#xlsx_preview{
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+#video_content{
+        background-color: rgba(0, 0, 0, -5.3);
+}
+#MyTable{
+   font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+#MyTable th{
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04AA6D;
+  color: white;
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+#MyTable td{
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.XlsxTable{
+    overflow: overlay;
+}
+#MyPreview_content {
+  background-color: #fefefe;
+  overflow: hidden;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+#stop-preview-button {
+  color: #aaaaaa;
+  text-align: end;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+#stop-preview-button :hover,
+#stop-preview-button :focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.MyDocs{
+    overflow: auto;
+    text-align: justify;
+    padding: 30px;
+}
+
+.o_AttachmentCard_tags span{
+ border: 2px solid yellow;
+  border-radius: 25px;
+  background:yellow;
+
+}
+.o_AttachmentImage {
+       width: 250px;
+       height: 200px;
+}
+.control_menu_dropdown{
+    position: absolute;
+    background-color: white;
+    min-width: 112px;
+    box-sizing: border-box;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    left: 40px;
+}

chatter_attachments_manager/views/ir_attachment_tag_views.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--    Attachment tag tree view-->
+    <record id="ir_attachment_tag_view_tree" model="ir.ui.view">
+        <field name="name">ir.attachment.tag.view.tree</field>
+        <field name="model">ir.attachment.tag</field>
+        <field name="arch" type="xml">
+            <tree string="Tags" editable="bottom" sample="1">
+                <field name="name"/>
+                <field name="color" widget="color_picker"/>
+            </tree>
+        </field>
+    </record>
+    <!-- Action for attachment tags menu-->
+    <record id="attachment_tag_action" model="ir.actions.act_window">
+        <field name="name">Tags</field>
+        <field name="res_model">ir.attachment.tag</field>
+        <field name="view_mode">tree</field>
+        <field name="help" type="html">
+            <p class="o_view_nocontent_smiling_face">
+                Create Attachment Tags</p>
+            <p>Use Tags to manage and track your Attachments</p>
+        </field>
+    </record>
+    <!-- Menu item for attachment tag   -->
+    <menuitem name="Attachment Tags" id="documents.attachments_tag"
+              parent="documents.Attachment" action="attachment_tag_action"
+              groups="base.group_system" sequence="1"/>
+</odoo>

chatter_attachments_manager/views/ir_attachment_views.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--Attachment Form View-->
+    <record id="view_attachment_form" model="ir.ui.view" >
+        <field name="name">ir.attachment.view.form.inherit.chatter.attachments.manager
+        </field>
+        <field name="model">ir.attachment</field>
+        <field name="inherit_id" ref="base.view_attachment_form"/>
+        <field name="priority" eval="25"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='type']" position="after">
+                <field name="tags_ids" string="Tag" widget="many2many_tags"
+                       options="{'color_field': 'color', 'no_create_edit': True}"/>
+                <field name="local_url" string="Loc_url"/>
+            </xpath>
+        </field>
+    </record>
+    <!--    Search view-->
+    <record id="view_attachment_search" model="ir.ui.view">
+        <field name="name">ir.attachment.view.search.inherit.chatter.attachments.manager</field>
+        <field name="model">ir.attachment</field>
+        <field name="inherit_id" ref="base.view_attachment_search"/>
+        <field name="arch" type="xml">
+            <xpath expr="//filter[@name='creation_month']" position="after">
+                <filter string="Tags" name="attach_tags" domain="[]" context="{'group_by':'tags_ids'}"/>
+            </xpath>
+            <xpath expr="//field[@name='type']" position="after">
+                <field name="tags_ids"/>
+            </xpath>
+        </field>
+    </record>
+    <!--Action for Attachment Menu item-->
+    <record id="ir_attachment_action" model="ir.actions.act_window">
+        <field name="name">Attachments</field>
+        <field name="res_model">ir.attachment</field>
+        <field name="view_mode">kanban,tree,form</field>
+        <field name="domain">[('res_model','!=',('ir.ui.view',
+            'ir.module.module',''))]
+        </field>
+    </record>
+    <!--Attachment Menu item-->
+    <menuitem name="Attachments" id="documents.Attachment"
+              parent="documents.menu_root"
+              groups="documents.group_documents_manager" sequence="0"/>
+    <menuitem name="Chatter Attachments" id="documents.chatter_attachments"
+              parent="documents.Attachment" action="ir_attachment_action"
+              groups="base.group_system" sequence="0"/>
+</odoo>