Oct 18 : [ADD] Initial Commit 'dropbox_integration'

dropbox_integration/README.rst

@@ -0,0 +1,57 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Dropbox Integration
+===================
+The Dropbox Integration provides seamless integration between Odoo instance and
+Dropbox. With this module, you can access and manage your Dropbox files
+directly from within Odoo.
+
+Configuration
+=============
+The user should create Dropbox client id, Dropbox secret from Dropbox Developer
+page with appropriate scopes. Folder Id is the Name of folder in Dropbox.
+Generate the auth code from Configuration settings and save the credentials.
+Should install the python package dropbox by pip install dropbox
+
+Installation
+============
+- www.odoo.com/documentation/15.0/setup/install.html
+- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developers: (V15) Aslam A K, Contact : odoo@cybrosys.com,
+              (V16) Aslam A K, Contact : odoo@cybrosys.com
+* 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 https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

dropbox_integration/__init__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import models
+from . import wizard
+from .hooks import uninstall_hook

dropbox_integration/__manifest__.py

@@ -0,0 +1,57 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+{
+    'name': "Dropbox Integration",
+    'version': "15.0.1.0.0",
+    'category': "Document Management",
+    'summary': """Upload and Download Dropbox Files from Odoo""",
+    'description': """This module was developed to upload files to Dropbox
+    storage as well as access files from Dropbox Storage in Odoo""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['base_setup'],
+    'data': [
+        'security/ir.model.access.csv',
+        'wizard/authentication_code_views.xml',
+        'wizard/dropbox_upload_views.xml',
+        'views/res_config_settings_views.xml',
+        'views/dropbox_dashboard_views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            '/dropbox_integration/static/src/js/dropbox.js',
+            '/dropbox_integration/static/src/scss/dropbox.scss'
+        ],
+        'web.assets_qweb': [
+            '/dropbox_integration/static/src/xml/dropbox_dashboard_templates.xml'
+        ],
+    },
+    'external_dependencies': {'python': ['dropbox']},
+    'images': ['static/description/banner.jpg'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': True,
+    'uninstall_hook': 'uninstall_hook',
+}

dropbox_integration/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <dropbox_integration>
+
+#### 29.09.2023
+#### Version 15.0.1.0.0
+#### ADD
+- Initial commit for Dropbox Integration

dropbox_integration/hooks.py

@@ -0,0 +1,37 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import api, SUPERUSER_ID
+
+
+def uninstall_hook(cr, registry):
+    """
+    Deletes System Parameters
+    """
+    env = api.Environment(cr, SUPERUSER_ID, {})
+    env['ir.config_parameter'].sudo().search(
+        [('key', '=', 'dropbox_integration.client_id')]).unlink()
+    env['ir.config_parameter'].sudo().search(
+        [('key', '=', 'dropbox_integration.client_secret')]).unlink()
+    env['ir.config_parameter'].sudo().search(
+        [('key', '=', 'dropbox_integration.folder_id')]).unlink()
+    env['ir.config_parameter'].sudo().search(
+        [('key', '=', 'dropbox_integration.is_dropbox_integration')]).unlink()

dropbox_integration/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: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import dropbox_dashboard
+from . import res_config_settings

dropbox_integration/models/dropbox_dashboard.py

@@ -0,0 +1,67 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+import dropbox
+from odoo import fields, models
+
+
+class DropboxDashboard(models.Model):
+    """ Dropbox dashboard model to connect with dropbox files."""
+    _name = 'dropbox.dashboard'
+    _description = 'Dropbox Dashboard'
+
+    dropbox_client = fields.Char(string='Dropbox Client ID',
+                                 help="Dropbox Client ID from dropbox api"
+                                      " credentials")
+    dropbox_client_secret = fields.Char(string='Dropbox Client Secret',
+                                        help="Dropbox Client Secret from"
+                                             " dropbox api credentials")
+    dropbox_refresh_token = fields.Char(string='Dropbox Refresh Token',
+                                        help="Dropbox Access Token generated "
+                                             "by dropbox api credentials")
+    dropbox_access_token = fields.Char(string='Dropbox Access Token',
+                                       help="Dropbox Refresh Token generated "
+                                            "by dropbox api credentials")
+    dropbox_expire_date = fields.Datetime(string='Dropbox Expiry Date',
+                                          help="Dropbox Access Token expiry"
+                                               "date")
+
+    def action_import_files(self):
+        """ Import all files from dropbox folder """
+        try:
+            access = self.env['dropbox.dashboard'].search([], order='id desc',
+                                                          limit=1)
+            if not access:
+                return False
+            dbx = dropbox.Dropbox(app_key=access.dropbox_client,
+                                  app_secret=access.dropbox_client_secret,
+                                  oauth2_refresh_token=
+                                  access.dropbox_refresh_token)
+            path = self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.folder_id')
+            response = dbx.files_list_folder(path=path)
+            data = {}
+            for files in response.entries:
+                file = dbx.files_get_temporary_link(path=files.path_lower)
+                data[file.metadata.name] = file.link
+            return data
+        except Exception as error:
+            return ['error', error]

dropbox_integration/models/res_config_settings.py

@@ -0,0 +1,112 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+import dropbox
+from odoo import fields, models, _
+from odoo.exceptions import ValidationError
+
+
+class ResConfigSettings(models.TransientModel):
+    """ Model to configure the Dropbox api credentials."""
+    _inherit = 'res.config.settings'
+
+    dropbox_client = fields.Char(string='Dropbox Client ID', copy=False,
+                                 config_parameter='dropbox_integration.'
+                                                  'client_id',
+                                 help="Dropbox Client ID from dropbox api "
+                                      "credentials",
+                                 required=True)
+    dropbox_client_secret = fields.Char(string='Dropbox Client Secret',
+                                        copy=False,
+                                        config_parameter='dropbox_integration.'
+                                                         'client_secret',
+                                        help="Dropbox Client Secret from "
+                                             "dropbox api credentials",
+                                        required=True)
+    dropbox_access_token = fields.Char(string='Dropbox Access Token',
+                                       help="Dropbox Access Token generated by"
+                                            " dropbox api credentials")
+    dropbox_refresh_token = fields.Char(string='Dropbox Refresh Token',
+                                        help="Dropbox Refresh Token by dropbox"
+                                             " api credentials")
+    dropbox_token_validity = fields.Datetime(string='Dropbox Token Validity',
+                                             help="Dropbox Token expiry date")
+    dropbox_folder_id = fields.Char(string='Folder ID',
+                                    config_parameter='dropbox_integration.'
+                                                     'folder_id',
+                                    help="Dropbox Folder ID from where the "
+                                         "files to be imported and uploaded")
+    is_dropbox_integration = fields.Boolean(string='Dropbox Cloud Storage',
+                                            config_parameter=
+                                            'dropbox_integration.'
+                                            'is_dropbox_integration',
+                                            default=False,
+                                            help="Dropbox Integration "
+                                                 "button to set "
+                                                 "credentials")
+
+    def action_get_dropbox_auth_code(self):
+        """
+        Function to open a wizard to set up dropbox Authorization code
+        """
+        return {
+            'type': 'ir.actions.act_window',
+            'name': 'Dropbox Authorization Code',
+            'res_model': 'authentication.code',
+            'view_mode': 'form',
+            'target': 'new',
+            'context': {'dropbox_auth': True}
+        }
+
+    def get_dropbox_auth_url(self):
+        """
+        Return dropbox authorization url.
+        """
+        dbx_auth = dropbox.oauth.DropboxOAuth2FlowNoRedirect(
+            self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.client_id'),
+            self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.client_secret'),
+            token_access_type='offline')
+        return dbx_auth.start()
+
+    def set_dropbox_refresh_token(self, auth_code):
+        """
+        Generate and set the dropbox refresh token from authorization code.
+        """
+        try:
+            client_id = self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.client_id')
+            client_secret = self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.client_secret')
+            dbx_auth = dropbox.oauth.DropboxOAuth2FlowNoRedirect(
+                client_id, client_secret,
+                token_access_type='offline')
+            outh_result = dbx_auth.finish(auth_code)
+            self.env['dropbox.dashboard'].create({
+                'dropbox_client': client_id,
+                'dropbox_client_secret': client_secret,
+                'dropbox_refresh_token': outh_result.refresh_token,
+                'dropbox_access_token': outh_result.access_token,
+            })
+        except Exception as error:
+            raise ValidationError(
+                _(f"Failed to Connect with Dropbox ( {error}.)'"))

dropbox_integration/security/ir.model.access.csv

@@ -0,0 +1,4 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_authentication_code_user,access.authentication.code.user,model_authentication_code,base.group_user,1,1,1,1
+access_dropbox_upload_user,access.dropbox.upload,model_dropbox_upload,base.group_user,1,1,1,1
+access_dropbox_dashboard_user,access.dropbox.dashboard.user,model_dropbox_dashboard,base.group_user,1,1,1,1

dropbox_integration/static/description/index.html

@@ -0,0 +1,722 @@
+<div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    Dropbox Integration</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    Dropbox Integration Allows to Upload and Download the Files
+                    in Dropbox.
+                </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">
+        Dropbox is a file hosting service operated by the American company
+        Dropbox, Inc. Integrating Dropbox with Odoo can provide users with a
+        more convenient way to store and access their files within the Odoo
+        platform.
+    </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;">Easy File Management</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;">Displays all  files from Dropbox</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;">Upload files to Dropbox</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;">Dynamic Search Bar</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;">
+                Dropbox API Creation
+            </h3>
+            <p
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Register the app on Dropbox Developers page</p>
+            <img src="assets/screenshots/1.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;">
+                API Key and Secret
+            </h3>
+            <p
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Redirect URIs as return web address </p>
+            <img src="assets/screenshots/2.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;">
+                Dropbox Scopes
+            </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Read Write Scopes to access files.</p>
+            <img src="assets/screenshots/3.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;">
+                Token Setup
+            </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Fill up the credentials and set up the dropbox connection with
+                auth code.
+                Goto --> Settngs--> Integrations
+                Provide dropbox folder name as FolderId </p>
+            <img src="assets/screenshots/4.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;">
+            </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Click the get auth code to generate auth code</p>
+            <img src="assets/screenshots/5.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;">
+            </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Copy the Auth code</p>
+            <img src="assets/screenshots/6.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;">
+            </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Paste the auth code generated from get auth code</p>
+            <img src="assets/screenshots/7.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;">
+                Dropbox Integration Dashboard view</h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+            </p>
+            <img src="assets/screenshots/8.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;">
+                Upload Files</h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Upload any files to Dropbox from here</p>
+            <img src="assets/screenshots/9.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Search Console Example </h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+            </p>
+            <img src="assets/screenshots/10.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Search Console Example</h3>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+            </p>
+            <img src="assets/screenshots/11.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/auto_database_backup/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.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/15.0/whatsapp_redirect/"
+                           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/hr_zk_attendance/"
+                           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/whatsapp_mail_messaging/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/4.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/15.0/shopify_odoo_connector/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/sendinblue_connector/"
+                           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"
+                     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"
+                     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 -->

dropbox_integration/static/src/js/dropbox.js

@@ -0,0 +1,76 @@
+odoo.define('dropbox_integration.dashboard', function (require) {
+    'use strict';
+    var AbstractAction = require('web.AbstractAction');
+    var core = require('web.core');
+    var rpc = require('web.rpc');
+    var DropboxDashboard = AbstractAction.extend({
+     template: 'DropboxDashboard',
+        events: {
+        'click #upload' : 'upload',
+        'keyup .header-search-input' : 'search_file'
+        },
+        /*  Appends files retrieved by function(import_files) to div files */
+       init() {
+          this._super(...arguments);
+            var self = this;
+            rpc.query({
+                    model: 'dropbox.dashboard',
+                    method: 'action_import_files',
+                    args:['']
+                 }).then(function (result) {
+                    if(result[0]=='error')
+                       {
+                        self.do_action({
+                            'type': 'ir.actions.client',
+                            'tag': 'display_notification',
+                            'params': {
+                                    'message': 'Failed to Load Files [ '+result[1]+' ]',
+                                    'type': 'warning',
+                                    'sticky': false,
+                                    }
+                            })
+                       }
+                    else if(!result){
+                        self.do_action({
+                            'type': 'ir.actions.client',
+                            'tag': 'display_notification',
+                            'params': {
+                                    'message': 'Please setup Access Token',
+                                    'type': 'warning',
+                                    'sticky': false,
+                                    }
+                            })
+                        }
+                     else{
+                     self.$('#files').empty();
+                     var alt_src = "'dropbox_integration/static/src/img/file.png'"
+                     $.each(Object.keys(result),function(index, name){
+                     self.$('#files').append('<div class="col-sm-6 card dropbox_card" align="center"><a class="card-image-text dropbox_text" href="'+result[name]+'"><img class="card-img-top drop_box_image" align="center" src="'+result[name]+'" onerror="this.src='+alt_src+';"/<br/><br/>'+name+'</a></div>');
+                      });
+                      }
+                });
+       },
+       /* Calls upload function on click of upload */
+       upload: function (ev) {
+           this.do_action({
+              name: "Upload to Dropbox",
+              type: 'ir.actions.act_window',
+              res_model: 'dropbox.upload',
+              view_mode: 'form',
+              view_type: 'form',
+              views: [[false, 'form']],
+              target: 'new',
+          });
+       },
+      /* Search console function */
+      search_file: function (ev) {
+        var value = this.$('.header-search-input').val().toLowerCase()
+        var cards = this.$('.card');
+        Array.from(cards).forEach(function (card) {
+            card.style.display = card.textContent.toLowerCase().indexOf(value) > -1 ? 'block' : 'none';
+        });
+      },
+      });
+    core.action_registry.add("dropbox_dashboard", DropboxDashboard);
+    return DropboxDashboard;
+});

dropbox_integration/static/src/scss/dropbox.scss

@@ -0,0 +1,50 @@
+.drop_box_image{
+    width: 180px;
+    height: 180px;
+    margin-top: 15px;
+}
+.dropbox_upload{
+    background-color: #006ce5;
+    color: white;
+    border-radius: 5px;
+    width: 100px;
+    margin-left: 10px;
+}
+.dropbox_card{
+    margin-left: 20px;
+    background: linear-gradient(295deg, rgba(24,125,223,0.3897934173669467) 0%, rgba(47,145,217,0) 100%);
+    max-width:15%;
+    height:23rem;
+    border-radius: 1.25rem;
+    margin:15px;
+}
+.dropbox_card:hover {
+   box-shadow: 0 4px 16px 0 rgba(0,0,0,1);
+}
+.dropbox_text{
+    color:black;
+}
+.content{
+    margin-left: 3px;
+    overflow-y: scroll;
+    height: 85vh;
+    width: 100vw;
+    background-color: #ffffff;
+    }
+.file-icon{
+    width: 65px;
+}
+.dropbox_section{
+background: rgb(0,128,255);
+background: radial-gradient(circle, rgba(0,128,255,1) 0%, rgba(0,82,255,0) 100%);
+}
+.header-search-input{
+    border-radius: 0.5rem;
+      height: 30px;
+      width: 400px;
+      outline: none;
+      border: none;
+      font-size: 15px;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+      margin-left: 380px;
+}

dropbox_integration/static/src/xml/dropbox_dashboard_templates.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Dashboard template -->
+<template id="dropbox">
+    <!-- Dropbox Dashboard template -->
+    <t t-name="DropboxDashboard">
+        <section class="dashboard_main_section dropbox_section"
+                 id="main_section_manager">
+            <img src="/dropbox_integration/static/src/img/dropbox_icon.png"
+                 style="width:200px; margin: 20px;"/>
+            <input class="btn dropbox_upload" type="button" value="Upload"
+                   id="upload"/>
+            <input type="search" class="header-search-input"
+                   placeholder="Search Files"/>
+            <div class="col row content" id="files"/>
+        </section>
+    </t>
+</template>

dropbox_integration/views/dropbox_dashboard_views.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Define the action for the Dropbox Dashboard -->
+    <record id="dropbox_dashboard_action" model="ir.actions.client">
+        <field name="name">Dropbox Dashboard</field>
+        <field name="tag">dropbox_dashboard</field>
+        <field name="target">current</field>
+    </record>
+    <!-- Define the menu item for the Dropbox Dashboard -->
+    <menuitem id="dropbox_dashboard_menu_root"
+              name="Dropbox"
+              web_icon="dropbox_integration,static/description/icon.png"
+              action="dropbox_dashboard_action"/>
+</odoo>

dropbox_integration/views/res_config_settings_views.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--    SetupToken view on settings    -->
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">
+            res.config.settings.view.form.inherit.dropbox.integration
+        </field>
+        <field name="model">res.config.settings</field>
+        <field name="inherit_id" ref="base.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@name='integration']" position="inside">
+                <!-- Add Dropbox integration settings -->
+                <div class="col-12 col-lg-6 o_setting_box" id="dropbox">
+                    <div class="o_setting_left_pane">
+                        <field name="is_dropbox_integration"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="is_dropbox_integration"/>
+                        <div class="text-muted">
+                            Synchronize with dropbox
+                        </div>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <span attrs="{'invisible': [('is_dropbox_integration', '=', False)]}">
+                            Client ID:
+                            <field name="dropbox_client"
+                                   attrs="{'invisible': [('is_dropbox_integration', '=', False)]}"/>
+                        </span>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <span attrs="{'invisible': [('is_dropbox_integration', '=', False)]}">
+                            Client Secret:
+                            <field name="dropbox_client_secret" password="True"
+                                   attrs="{'invisible': [('is_dropbox_integration', '=', False)]}"/>
+                        </span>
+                    </div>
+                    <button class="o_setting_right_pane btn btn-link"
+                            name="action_get_dropbox_auth_code" type="object"
+                            attrs="{'invisible': [('is_dropbox_integration', '=', False)]}">
+                        <i class="fa fa-arrow-right"/>
+                        Setup Token
+                    </button>
+                    <div class="o_setting_right_pane">
+                        <span attrs="{'invisible': [('is_dropbox_integration', '=', False)]}">
+                            Folder ID:
+                            <field name="dropbox_folder_id"
+                                   attrs="{'invisible': [('is_dropbox_integration', '=', False)]}"/>
+                        </span>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

dropbox_integration/wizard/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import authentication_code
+from . import dropbox_upload

dropbox_integration/wizard/authentication_code.py

@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import api, fields, models
+
+
+class AuthenticationCode(models.TransientModel):
+    """
+    Model to generate authentication code
+    """
+    _name = 'authentication.code'
+    _description = 'Authentication Code'
+
+    dropbox_authorization_code = fields.Char(
+        string='Dropbox Authorization Code',
+        help='Authorization code received from Dropbox during authentication '
+             'process')
+    dropbox_auth_url = fields.Char(string='Dropbox Authentication URL',
+                                   compute='_compute_dropbox_auth_url',
+                                   help='URL for initiating the Dropbox '
+                                        'authentication process')
+
+    @api.depends('dropbox_authorization_code')
+    def _compute_dropbox_auth_url(self):
+        """
+        Function to compute dropbox authentication URL
+        """
+        dbx_config = self.env['res.config.settings'].browse(
+            self.env.context.get('active_id'))
+        for rec in self:
+            rec.dropbox_auth_url = dbx_config.get_dropbox_auth_url()
+
+    def action_setup_dropbox_token(self):
+        """
+        Function to setup new dropbox refresh token.
+        """
+        dbx_config = self.env['res.config.settings'].browse(
+            self.env.context.get('active_id'))
+        dbx_config.set_dropbox_refresh_token(
+            self.dropbox_authorization_code)

dropbox_integration/wizard/authentication_code_views.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Authorization Wizard View -->
+<odoo>
+    <record id="authentication_wizard_view_form" model="ir.ui.view">
+        <field name="name">authentication.code.view.form</field>
+        <field name="model">authentication.code</field>
+        <field name="arch" type="xml">
+            <form>
+                <!-- Group for obtaining authorization code -->
+                <group invisible="not context.get('dropbox_auth')">
+                    <span>Get an authorization code and set it in the field
+                        below.
+                    </span>
+                    <field name="dropbox_auth_url"
+                           class="fa fa-arrow-right"
+                           widget="url"
+                           text="Get Authorization Code"
+                           nolabel="1"/>
+                </group>
+                <!-- Group for entering authorization code -->
+                <group>
+                    <field name="dropbox_authorization_code"
+                           required="context.get('dropbox_auth')"
+                           invisible="not context.get('dropbox_auth')"/>
+                </group>
+                <footer>
+                    <!-- Confirm button for setting up Dropbox token -->
+                    <button string="Confirm" type="object"
+                            name="action_setup_dropbox_token"
+                            class="btn-primary"
+                            invisible="not context.get('dropbox_auth')"/>
+                    <!-- Cancel button -->
+                    <button string="Cancel" class="btn-secondary"
+                            special="cancel"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+</odoo>

dropbox_integration/wizard/dropbox_upload.py

@@ -0,0 +1,76 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#   Cybrosys Technologies Pvt. Ltd.
+#
+#   Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#   Author: Aslam A K( odoo@cybrosys.com )
+#
+#   You can modify it under the terms of the GNU AFFERO
+#   GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#   You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#   (AGPL v3) along with this program.
+#   If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+import dropbox
+from odoo import fields, models
+
+
+class DropboxUpload(models.TransientModel):
+    """
+    Model to upload files to Dropbox
+    """
+    _name = "dropbox.upload"
+    _description = "Dropbox Upload"
+
+    file = fields.Binary(string="Attachment", help="Select a file to upload")
+    file_name = fields.Char(string="File Name",
+                            help="Name of the uploaded file")
+
+    def action_upload_file(self):
+        """
+        Function to upload attachments to dropbox
+        """
+        try:
+            access = self.env['dropbox.dashboard'].search([], order='id desc',
+                                                          limit=1)
+            dbx = dropbox.Dropbox(app_key=access.dropbox_client,
+                                  app_secret=access.dropbox_client_secret,
+                                  oauth2_refresh_token=access.dropbox_refresh_token)
+            attachment = self.env["ir.attachment"].search(
+                ['|', ('res_field', '!=', False), ('res_field', '=', False),
+                 ('res_id', '=', self.id),
+                 ('res_model', '=', 'dropbox.upload')])
+            path = self.env['ir.config_parameter'].get_param(
+                'dropbox_integration.folder_id')
+            dropbox_destination = path + '/' + self.file_name
+            file = open(attachment._full_path(attachment.store_fname), 'rb')
+            dbx.files_upload(file.read(), dropbox_destination)
+            file.close()
+            return {
+                'type': 'ir.actions.client',
+                'tag': 'display_notification',
+                'params': {
+                    'type': 'success',
+                    'message': 'File uploaded successfully. '
+                               'Please refresh the page.',
+                    'next': {'type': 'ir.actions.act_window_close'},
+                }
+            }
+        except Exception as error:
+            return {
+                'type': 'ir.actions.client',
+                'tag': 'display_notification',
+                'params': {
+                    'type': 'warning',
+                    'message': 'Failed to upload: %s' % error,
+                    'next': {'type': 'ir.actions.act_window_close'},
+                }
+            }

dropbox_integration/wizard/dropbox_upload_views.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Upload file wizard view -->
+    <record id="dropbox_upload_view_form" model="ir.ui.view">
+        <field name="name">dropbox.upload.view.form</field>
+        <field name="model">dropbox.upload</field>
+        <field name="arch" type="xml">
+            <form string="upload file wizard">
+                <!-- Group for file selection -->
+                <group class="oe_title">
+                    <field name="file" filename="file_name"/>
+                    <field name="file_name" invisible="1"/>
+                </group>
+                <footer>
+                    <!-- Upload button -->
+                    <button string="Upload" name="action_upload_file"
+                            type="object"
+                            class="oe_highlight" data-hotkey="q"
+                            help="Confirm Upload"/>
+                    <!-- Cancel button -->
+                    <button string="Cancel" class="btn btn-secondary"
+                            special="cancel" help="Cancel Upload"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+</odoo>