July 20: [ADD] Initial commit 'chatter_attachments_manager'

chatter_attachments_manager/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/licence-OPL--1-red.svg
+    :target: https://www.odoo.com/documentation/16.0/legal/licenses.html#odoo-apps
+    :alt: License: OPL-1
+
+Chatter Attachment Manager
+==========================
+This module helps to manage attachments in chatter and in discuss
+
+Configuration
+=============
+* No Additional configuration is needed.
+
+License
+-------
+Odoo Proprietary License v1.0 (OPL-1)
+(https://www.odoo.com/documentation/16.0/legal/licenses.html#odoo-apps)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer: (V16) Anagha S, Contact: odoo@cybrosys.com
+* Developer: (V15) Nihala KP, 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,22 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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,66 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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': '15.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'],
+    '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/'
+            'attachment_control_panel.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/attachment_card/'
+            'attachment_card.js',
+        ],
+        'web.assets_qweb': [
+            "chatter_attachments_manager/static/src/attachment_control_panel/"
+            "attachment_control_panel_templates.xml",
+            'chatter_attachments_manager/static/src/attachment_image/'
+            'attachment_image_templates.xml',
+            'chatter_attachments_manager/static/src/attachment_card/'
+            'attachment_card_templates.xml',
+        ],
+    },
+    'external_dependancy': ['pandas', 'qrcode', 'docx'],
+    'images': ['static/description/banner.jpg'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False
+}

chatter_attachments_manager/controllers/__init__.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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,61 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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>
+
+#### 17.07.2024
+#### Version 15.0.1.0.0
+#### ADD
+- Initial commit for Chatter Attachment Manager

chatter_attachments_manager/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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,112 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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/>.
+################################################################################
+import binascii
+from io import BytesIO
+import pandas as pd
+from odoo import api, fields, models
+import base64
+import qrcode
+from docx import Document as DocxDocument
+
+
+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)
+        if not attachment or not attachment.datas:
+            return "Attachment not found or has no data"
+        try:
+            if doc_type == 'xlsx':
+                data = binascii.a2b_base64(attachment.datas)
+                content = pd.read_excel(BytesIO(data),
+                                        engine='openpyxl',
+                                        converters={'A': str})
+                html_table = content.to_html(index=False)
+                return html_table
+            elif doc_type == 'docx':
+                data = binascii.a2b_base64(attachment.datas)
+                if DocxDocument is None:
+                    return "Docx processing library not available"
+                doc = DocxDocument(BytesIO(data))
+                paragraphs = [p.text for p in doc.paragraphs]
+                return paragraphs
+            else:
+                raise ValueError("Unsupported file format")
+            html_table = content.to_html(index=False)
+            return html_table
+        except TypeError:
+            return ("<p style='padding-top:8px;color:red;'>"
+                    "No preview available</p>")
+            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 that 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:
+            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()).decode('utf-8')
+            data.update({'image': qr_image, 'company': self.env.company.name})
+        return data

chatter_attachments_manager/models/ir_attachment_tag.py

@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Nihala KP (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,647 @@
+<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: #115A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    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/v15-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 the Attachment lists</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/1.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/3.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/4.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/5.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/6.png" class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can see the captured photo in chatter
+            </p>
+            <img src="assets/screenshots/7.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/8.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/9.png" class="img-thumbnail">
+            <img src="assets/screenshots/10.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/11.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/12.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 'Image Editor' to edit the image.
+            </p>
+            <img src="assets/screenshots/13.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+               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.
+
+                Click 'Save' to update the changes.
+            </p>
+            <img src="assets/screenshots/14.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can see the edited image in the chatter
+            </p>
+            <img src="assets/screenshots/15.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/16.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/17.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/18.png"
+                 class="img-thumbnail">
+            <img src="assets/screenshots/19.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/15.0/mail_push_notification"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.jpg">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/whatsapp_chat_layout"
+                           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/15.0/activity_reminder"
+                           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/15.0/auto_daily_weekly_report"
+                           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/15.0/voice_note_in_chatter"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.jpg">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/email_id_validation"
+                           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,128 @@
+/** @odoo-module */
+import { AttachmentCard } from '@mail/components/attachment_card/attachment_card';
+import { isEventHandled, markEventHandled } from '@mail/utils/utils';
+import { patch } from 'web.utils';
+var rpc = require('web.rpc');
+var core = require('web.core');
+var _t = core._t;
+var QWeb = core.qweb;
+const { useRef, useState, onMounted, onWillUnmount } = owl.hooks;
+patch(AttachmentCard.prototype, 'chatter_attachments_manager/static/src/attachment_card/attachment_card.js', {
+    setup() {
+        this.preview = useRef('preview_modal')
+        this._super.apply(this, arguments);
+        this.control_menu = useRef('card_menu_dropdown');
+        this._onClickGlobal = this._onClickGlobal.bind(this)
+        this.state = useState({
+            isDropdownOpen: false,
+        });
+        onMounted(() => {
+        document.addEventListener('click', this._onClickGlobal)
+        })
+        onWillUnmount(() => {
+        document.removeEventListener('click', this._onClickGlobal)
+        })
+     },
+    _onClickGlobal(ev){
+    //----To close the dropdown on outside click
+        if(this.state?.isDropdownOpen && !this.control_menu.el.contains(ev.target)){
+            this.state.isDropdownOpen = false
+        }
+    },
+    onClickCard(){
+    //---show the dropdown
+        this.state.isDropdownOpen = !this.state.isDropdownOpen
+    },
+
+    async onClickPreviewOffline(ev){
+    //----Offline Preview of file type 'docx', 'xlsx' and 'pdf'
+        ev.stopPropagation();
+        ev.preventDefault();
+        var self = this;
+        var type = $(ev.currentTarget).data("type")
+        var fileHeadElement = this.preview.el.querySelector('#FileHead');
+        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.attachmentCard.onClickImage()
+        }
+    },
+
+    stopPreviewButton(ev){
+    //----Close preview window
+        this.preview.el.style.display= "none";
+        this.preview.el.querySelector('.MyDocs').textContent = " ";
+        $('#MyTable').remove();
+        this.preview.el.querySelector('#FileHead').textContent = " ";
+    },
+
+    async onClickEditRecord(ev) {
+    //----Records can be edited by altering the file name and adding tags.
+        ev.preventDefault();
+        markEventHandled(ev, 'AttachmentCard.onClickEditRecord');
+        var attachment_id = parseInt(ev.target.id);
+        const action = {
+            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',
+        };
+        return this.env.bus.trigger('do-action', {
+            action,
+            options: {},
+        });
+    },
+
+    _onClickQrCode(ev){
+    //----For generating Qr Code contain download link of attachment.
+        var self = this;
+        rpc.query({
+             model: 'ir.attachment',
+             method: 'generate_qr_code',
+             args: [parseInt(ev.target.id)],
+        }).then(function (data){
+            const action = {
+                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,
+        };
+        return self.env.bus.trigger('do-action', {
+            action,
+            options: {
+                on_close: async () => {
+                    await location.reload();
+                },
+            },
+        });
+        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,
+            });
+        });
+    },
+});

chatter_attachments_manager/static/src/attachment_card/attachment_card_templates.xml

@@ -0,0 +1,56 @@
+<?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;" t-ref="card_menu_dropdown">
+                    <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-on-click="onClickCard"
+                            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-style="state.isDropdownOpen ? 'display:block' : 'display:none'"
+                         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>
+            <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>
+      </xpath>
+   </t>
+</templates>

chatter_attachments_manager/static/src/attachment_control_panel/attachment_control_panel.js

@@ -0,0 +1,197 @@
+/** @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,onWillUnmount,onMounted , useState} = owl.hooks;
+const _t = core._t;
+
+patch(AttachmentBox.prototype, 'chatter_attachments_manager_attachment_box', {
+    setup() {
+        this._super.apply(this, arguments);
+        this.MyModal = useRef('myModal');
+        this.control_menu = useRef('control_menu_dropdown');
+        this._onClickGlobal = this._onClickGlobal.bind(this)
+        this.state = useState({
+            isDropdownOpen: false,
+        });
+        onMounted(() => {
+            document.addEventListener('click', this._onClickGlobal)
+        })
+        onWillUnmount(() => {
+            document.removeEventListener('click', this._onClickGlobal)
+        })
+    },
+
+    _onClickGlobal(ev){
+    //----To close the dropdown on outside click
+        if(this.state?.isDropdownOpen && !this.control_menu.el.contains(ev.target)){
+            this.state.isDropdownOpen = false
+        }
+    },
+
+    onClickUpload(){
+    //----Open a dropdown on click upload icon
+        this.state.isDropdownOpen = !this.state.isDropdownOpen
+    },
+
+    onClickCamera(ev) {
+    //----Open camera to capture
+        if (this.control_menu.el.style.display === "none") {
+            this.control_menu.el.style.display = "block";
+        }
+        else {
+            this.control_menu.el.style.display = "none";
+        }
+        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);
+        });
+    },
+
+    ImageCapture: function(){
+    //----Capture the image
+        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._fileUploaderRef.comp.uploadFiles(fl)
+    },
+
+    async onClickScreenRec(ev){
+    //----Capturing Screen recording
+    if (this.control_menu.el.style.display === "none") {
+            this.control_menu.el.style.display = "block";
+        }
+        else {
+            this.control_menu.el.style.display = "none";
+        }
+        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._fileUploaderRef.comp.uploadFiles(fl)
+                });
+            })
+            mediaRecorder.start()
+        }
+        catch(e){}
+    },
+
+    _onClickAddAttachment() {
+    //----On clicking add Attachments
+    if (this.control_menu.el.style.display === "none") {
+            this.control_menu.el.style.display = "block";
+        }
+        else {
+            this.control_menu.el.style.display = "none";
+        }
+        this._fileUploaderRef.comp.openBrowserFileUploader();
+    },
+
+    onClickDownloadAll(ev) {
+    //----On clicking Download All button
+        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_control_panel/attachment_control_panel_templates.xml

@@ -0,0 +1,72 @@
+<?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"
+                             t-ref="control_menu_dropdown">
+                            <button title="Download All" type="button"
+                                    class="btn btn-primary btn-sm am-control-btn-left"
+                                    t-on-click="onClickDownloadAll">
+                                <i class="fa fa-download"/></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"/>
+                            </button>
+                            <div class="control_menu_dropdown"
+                                 t-att-style="state.isDropdownOpen ? 'display:block' : 'display:none'"
+                            >
+                                <a class="dropdown-item context-menu-icon--fa fa fa-folder-open-o"
+                                   t-on-click="_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="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="ImageCapture">Capture</button>
+                                    <button class="btn btn-primary"
+                                            id="stop-camera-button">Close</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_image/attachment_image.js

@@ -0,0 +1,112 @@
+/** @odoo-module **/
+import { AttachmentImage } from '@mail/components/attachment_image/attachment_image';
+import { patch } from 'web.utils';
+import { isEventHandled, markEventHandled } from '@mail/utils/utils';
+import rpc from 'web.rpc';
+const { useRef,onWillUnmount,onMounted , useState} = owl.hooks;
+const core = require('web.core');
+const _t = core._t;
+var dialogs = require('web.view_dialogs');
+
+patch(AttachmentImage.prototype, 'chatter_attachments_manager/static/src/attachment_image/attachment_image.js', {
+    setup() {
+        this._super.apply(...arguments);
+        this.image_menu = useRef('image_menu_dropdown');
+        this._onClickGlobal = this._onClickGlobal.bind(this)
+        this.state = useState({
+            isDropdownOpen: false,
+        });
+        onMounted(() => {
+            document.addEventListener('click', this._onClickGlobal)
+        })
+        onWillUnmount(() => {
+            document.removeEventListener('click', this._onClickGlobal)
+        })
+    },
+
+    _onClickGlobal(ev){
+    //------To close the dropdown on outside click
+        if(this.state?.isDropdownOpen && !this.image_menu.el.contains(ev.target)){
+            this.state.isDropdownOpen = false
+        }
+    },
+
+    onClickImage(ev) {
+    //----Handle click event on the settings button.Show or hide the context menu dropdown.
+        ev.preventDefault();
+        this.state.isDropdownOpen = !this.state.isDropdownOpen
+        },
+
+    onClickEditImgRecord(ev) {
+    //----Open window to edit image record
+        ev.preventDefault();
+        markEventHandled(ev, 'AttachmentImage.onClickEditImgRecord');
+        const attachment_id = parseInt(ev.target.id);
+        const action = {
+            type: 'ir.actions.act_window',
+            name: this.env._t("Edit Record"),
+            res_model: 'ir.attachment',
+            view_mode: 'form',
+            views: [[false, 'form']],
+            target: 'new',
+            res_id: attachment_id,
+        };
+        return this.env.bus.trigger('do-action', {
+            action,
+            options: {
+                on_close: () => {},
+            },
+        });
+    },
+
+    async onClickImageEdit(ev) {
+    //----Open a window to edit image
+        ev.preventDefault();
+        markEventHandled(ev, 'AttachmentImage.onClickImageEdit');
+        const attachment_id = parseInt(ev.target.id);
+        const 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', () => {
+                $('#imageEditor').css("display", "none");
+            });
+
+        $('.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(() => {
+                location.reload();
+            });
+        });
+    },
+});

chatter_attachments_manager/static/src/attachment_image/attachment_image_templates.xml

@@ -0,0 +1,63 @@
+<?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')]" position="inside">
+            <div class="image_settings" title="settings"
+                 t-on-click.stop.prevent="onClickImage">
+            <i class="fa fa-cog"
+               style="margin-top:21px;margin-left:-23px;position:absolute;font-size:20px"/>
+            </div>
+            <div class="dropdown" style="margin-top:43px;margin-left:-4px;"
+                 t-ref="image_menu_dropdown">
+                <div class="context_menu_dropdown"
+                     t-att-style="state.isDropdownOpen ? 'display:block' : 'display:none'">
+                    <a class="dropdown-item context-menu-icon--fa fa fa-edit"
+                       t-on-click.stop.prevent="onClickEditImgRecord"
+                       t-att-id="attachmentImage.attachment.id">Edit record</a>
+                    <a class="dropdown-item context-menu-icon--fa fa fa-magic"
+                       t-on-click.stop.prevent="onClickImageEdit"
+                       t-att-id="attachmentImage.attachment.id">Image Editor</a>
+                    <a class="dropdown-item context-menu-icon--fa fa fa-close"
+                       t-on-click.stop.prevent="attachmentImage.onClickUnlink">Delete</a>
+                </div>
+            </div>
+        </xpath>
+        <xpath expr="//div[hasclass('o_AttachmentImage_imageOverlay')]/div"
+               position="replace">
+        </xpath>
+        <!-- TUI image editor for editing 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/css/chatter_attachment_manager.css

@@ -0,0 +1,121 @@
+/* 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;
+        color: black;
+      }
+      .context_menu_dropdown a{
+        color: black;
+        text-decoration: none;
+      }
+
+
+/* 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,14 @@
+<?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>
+</odoo>

chatter_attachments_manager/views/ir_attachment_views.xml

@@ -0,0 +1,36 @@
+<?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>
+</odoo>