Oct 17 [ADD]: Initial Commit

crm_dashboard/README.rst

@@ -0,0 +1,40 @@
+CRM Dashboard
+==================
+* CRM Dashboard module for Odoo 16.
+
+Installation
+============
+	- www.odoo.com/documentation/16.0/setup/install.html
+	- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/16.0/legal/licenses/licenses.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Credits
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Contacts
+--------
+* Mail Contact : odoo@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
+==========
+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>`__
+

crm_dashboard/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

crm_dashboard/__manifest__.py

@@ -0,0 +1,62 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': "CRM Dashboard",
+    'description': """CRM Dashboard""",
+    'summary': """CRM dashboard module brings a multipurpose graphical dashboard"""
+               """ for CRM module and making the relationship management better and easier""",
+    'category': 'Sales',
+    'version': '16.0.1.0.0',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['base', 'crm', 'sale_management'],
+    'data': [
+        'views/dashboard_view.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'crm_dashboard/static/src/css/dashboard.css',
+            'crm_dashboard/static/src/css/style.scss',
+            'crm_dashboard/static/src/css/material-gauge.css',
+            'crm_dashboard/static/src/js/dashboard_view.js',
+            'crm_dashboard/static/src/js/custom.js',
+            'crm_dashboard/static/src/js/lib/highcharts.js',
+            'crm_dashboard/static/src/js/lib/Chart.bundle.js',
+            'crm_dashboard/static/src/js/lib/funnel.js',
+            'crm_dashboard/static/src/js/lib/d3.min.js',
+            'crm_dashboard/static/src/js/lib/material-gauge.js',
+            'crm_dashboard/static/src/js/lib/columnHeatmap.min.js',
+            'crm_dashboard/static/src/js/lib/columnHeatmap.js',
+            'crm_dashboard/static/src/xml/dashboard_view.xml',
+
+        ],
+    },
+    'images': [
+        'static/description/banner.png',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': True,
+    'auto_install': False,
+}

crm_dashboard/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <crm_dashboard>
+
+#### 30.07.2022
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for CRM Dashboard Module

crm_dashboard/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2022-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import crm_dashboard

crm_dashboard/static/description/index.html

@@ -0,0 +1,648 @@
+<div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div
+        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 -->
+
+    <!-- APP HERO -->
+    <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">CRM Dashboard</h1>
+    <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;"> Detailed Dashboard View for CRM.</p>
+    <!-- END OF APP HERO -->
+    <img src="assets/screenshots/hero.gif"
+        style="width: 75%; height: auto; position: absolute; margin-left: auto; margin-right: auto; top: 45%; left: 12%; right: auto;" />
+
+</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">
+        The CRM Dashboard module helps you to see the Overview of the CRM module
+                and its functioning. The Odoo CRM module will provide a complete
+                over of the entire functional aspects of the Customer Relationship Management
+                operations which are conducted with Odoo CRM. Moreover, you will attain a clear
+                insight into the Leads, Opportunities, Expected, and Total Revenue.
+                The Dashboard can be viewed in two different formats one for the Admin and
+                another for the User. In the case of the Admin, the CRM Dashboard will provide
+                a complete insight on the operations of the CRM providing a complete insight
+                into the operations. Whereas in the case of the user they will only obtain
+                certain of the details which they have been providing authorization.
+                The user authorization differs based on their job role. For example,
+                a Sales person will not have the same dashboard as that of a Sales Manager.
+                <br />
+                Furthermore, we can view the different types of reports in the form of graphs
+                according to the values and operations of CRM providing the viewer with complete
+                insight into the real-time operations of the CRM operations of the company.
+    </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;">Dedicated Views for Users and Admins.</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;">The users will have different authorization based on
+                            the employment level.</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;">Activity monitoring.</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;">Insight on Upcoming and Recent activities.</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;">Year to Date bar graphTarget Field in User Settings.</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;">Opportunity Lost reason 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;">Top deals and Monthly revenue goals.</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;">Clickable Dashboard Cards.</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;">Clickable Dashboard Cards</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;"> You can click on the respective Cards which will direct the users to the respective information
+                    and aspects of the CRM operations with Odoo. Moreover, these Clickable Cards will act as a
+                    navigation
+                    icon within the CRM dashboard for the easiness of operations. Furthermore, these Clickable Cards
+                    will
+                    ensure that the configuration and the operations of the CRM dashboard are the way you need them.</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;">Target, Lead and Activity analysis</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;"> A dedicated Funnel Chart provides you with complete insight into the Leads which are in operation.
+                    The leads will be depicted as New, Qualified, Proposition, and Won. Moreover, the Year date target
+                    will provide an insight into the goals which are achieved. The Donut graph based on the monthly
+                    Lead operation will provide a clear picture of the monthly Lead operations. Additionally, the
+                    Activity Donut graph will describe the activity analysis on the leads.</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;">Set up Individual user targets</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">With the CRM Dashboard configuration, you will be able to set the individual target amount for
+                    the Leads to be acquired by a user for a period of time, which can be set as Date, Month or Year.
+                    The Targets can be set under the Settings tab > User Settings > Below the access right tab.</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;">A dedicated Listing of Top Deals and the Monthly Goal Gauge motivates users</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">The Top Deals on the products and services will be listed out in a dedicated menu which helps
+                    the users and the Salesperson to deal with the Leads and Opportunities with respect to it.
+                    Moreover, this will be a useful tool in promoting the various deals instantly to the Leads
+                    and the Opportunities.<br />
+                    The Monthly Goal Gauges that are available will serve as a motivation booster for the Sales
+                    team as well as the users to pursue on more leads to achieve the target. Additionally,
+                    the Lead Groping analysis with the help of the graph in the form of Donut providing analysis
+                    on Lead Groups by Medium, Campaign, and Source will be helpful for the business.</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;">Upcoming Activities and Total Revenue</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;"> Activity management is vital for CRM operations and the CRM Dashboard will provide a dedicated
+                    tab defining the upcoming activities. These tabs will be different for each user based on their
+                    operations in the company. Moreover, the Admin will have a separate view of their own activities
+                    having clearer insight into the operations.<br />
+                    Furthermore, the Total Revenue of the respective Salesperson will be depicted in the form of
+                    a graph providing the complete insight into the Revenue from the Leads which are being generated.</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;">An informative Heat Map</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;"> In the CRM Dashboard, you will obtain an informative heat map on the aspects of the Revenue
+                    obtained based on the CRM operations. Here the Top Salesperson, as well as Top Country Revenues,
+                    will be depicted with a color-coordinated Heat map providing clear insight on the financial
+                    values of revenue which is being generated. Moreover, a detailed tab will provide the information
+                    on the country-vise count on the opportunities which are being attained. The Country-wise count
+                    is also depicted on a heat map.</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;">Lost Analysis, Recent Activities, and Top Salesperson.</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;"> You will get an insight on the lost opportunities and Leads from the Lost Analysis Graph providing
+                    a clearer insight based on year or month. The Recent Activities description tab will provide
+                    a complete insight on the Activities which have been scheduled and conducted recently in regard to
+                    the Customer Relationship management operations on the pursuing of Leads and Opportunities.</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;">Dashboard View of the User</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">As mentioned earlier there are dedicated views for the Admin as well as the User who has access
+                    to the CRM Dashboard. The Following screenshot depicts the User view of the CRM Dashboard.
+                    Here the information relating to the respective user and their operations will be only depicted
+                    and the ones which the respective User has authorization to can be modified..</p>
+            <img src="assets/screenshots/8.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <img src="assets/screenshots/9.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/dynamic_accounts_report/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/custom_gantt_view/" 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/project_custom_gantt/" 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/account_reports_xlsx/" 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/base_accounting_kit/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/5.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_payroll_community/" 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 -->

crm_dashboard/static/src/css/dashboard.css

@@ -0,0 +1,34 @@
+p, span, a, ul, li, button {
+    font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+}
+
+strong {
+	font-weight: 600;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.5em;
+	font-weight: 300;	
+}
+
+strong {
+  font-weight: 400;
+}
+
+.sub_title {
+	font-size: 14px;
+}
+
+.sub_title div span {
+	font-weight: 600;
+}
+
+.chart #canvas_graph {
+	height: 400px !important;
+}
+
+.highcharts-background {
+	fill: none;
+}

crm_dashboard/static/src/css/material-gauge.css

@@ -0,0 +1,194 @@
+/*
+ * #### Gauge Component
+ *
+ * The standard markup for the component is:
+ *
+ *      <div class="gauge">
+ *          <div class="gauge__container">
+ *              <div class="gauge__marker"></div>
+ *              <div class="gauge__background"></div>
+ *              <div class="gauge__center"></div>
+ *              <div class="gauge__data"></div>
+ *              <div class="gauge__needle"></div>
+ *          </div>
+ *          <div class="gauge__labels">
+ *              <span class="gauge__label--low">No</span>
+ *              <span class="gauge__label--spacer"></span>
+ *              <span class="gauge__label--high">Yes</span>
+ *          </div>
+ *      </div>
+ */
+
+/*
+ * First define all of the relevant rules that aren't dependent
+ * on the size of the gauge. We want to collect the size-depenent
+ * rules in one place to make it easier to adjust the size.
+ */
+
+.gauge {
+    position: relative;
+}
+
+.gauge__container {
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	left: 50%;
+	overflow: hidden;
+	text-align: center;
+	-webkit-transform: translateX(-50%);
+	   -moz-transform: translateX(-50%);
+	    -ms-transform: translateX(-50%);
+	     -o-transform: translateX(-50%);
+	        transform: translateX(-50%);
+}
+
+.gauge__background {
+	z-index: 0;
+	position: absolute;
+	background-color: #d8f0de;
+	top: 0;
+	border-radius: 300px 300px 0 0;
+}
+
+.gauge__data {
+	z-index: 1;
+	position: absolute;
+	background-color: #00c29d;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 300px 300px 0 0;
+    -webkit-transform-origin: center bottom;
+       -moz-transform-origin: center bottom;
+        -ms-transform-origin: center bottom;
+         -o-transform-origin: center bottom;
+            transform-origin: center bottom;
+}
+
+.gauge__center {
+	z-index: 2;
+	position: absolute;
+	background-color: #f9f9f9;
+	margin-right: auto;
+	border-radius: 300px 300px 0 0;
+}
+
+.gauge__marker {
+    z-index: 3;
+    background-color: #fff;
+    position: absolute;
+    width: 1px;
+}
+
+.gauge__needle {
+    z-index: 4;
+    background-color: #21242c;
+    height: 3px;
+    position: absolute;
+    -webkit-transform-origin: left center;
+       -moz-transform-origin: left center;
+        -ms-transform-origin: left center;
+         -o-transform-origin: left center;
+            transform-origin: left center;
+}
+
+.gauge__labels {
+    display: table;
+    margin: 0 auto;
+    position: relative;
+}
+
+.gauge__label--low {
+    display: table-cell;
+    text-align: center;
+    color: #00c29d;
+}
+
+.gauge__label--spacer {
+    display: table-cell;
+}
+
+.gauge__label--high {
+    display: table-cell;
+    text-align: center;
+    color: #979f99;
+}
+
+/*
+ * Now define the rules that depend on the size of
+ * the gauge. We start with sizing for a small mobile
+ * device.
+ */
+
+.gauge { height: calc(120px + 3em); }
+.gauge__container { width: 240px; height: 120px; }
+.gauge__marker { height: 120px; left: 119.5px; }
+.gauge__background { width: 240px; height: 120px; }
+.gauge__center { width: 144px; height: 72px; top: 48px; margin-left: 48px; }
+.gauge__data { width: 240px; height: 120px; }
+.gauge__needle { left: 120px; top: 117px; width: 120px; }
+.gauge__labels { top: 120px; width: 240px; }
+.gauge__label--low { width: 48px; }
+.gauge__label--spacer { width: 144px; }
+.gauge__label--high { width: 48px; }
+
+/*
+ * Increase the gauge size slightly on larger viewports.
+ */
+
+ @media only screen and (min-width: 400px) {
+    .gauge { height: calc(150px + 3em); }
+    .gauge__container { width: 300px; height: 150px; }
+    .gauge__marker { height: 150px; left: 149.5px; }
+    .gauge__background { width: 300px; height: 150px; }
+    .gauge__center { width: 180px; height: 90px; top: 60px; margin-left: 60px; }
+    .gauge__data { width: 300px; height: 150px; }
+    .gauge__needle { left: 150px; top: 147px; width: 150px; }
+    .gauge__labels { top: 160px; width: 300px; font-size: 20px;}
+    .gauge__label--low { width: 60px; }
+    .gauge__label--spacer { width: 180px; }
+    .gauge__label--high { width: 60px; }
+}
+
+/*
+ * As an option, the `gauge--liveupdate` class can be added
+ * to the main gauge element. When this class is present,
+ * we add a transition that animates any changes to the gauge
+ * value. Currently, the app does not use this option because
+ * all the inputs that can change gauge values are present
+ * on tab panels that are different from the gauge itself.
+ * Therefore, users won't be able to see any gauge changes
+ * when they make input changes. The code is available, though,
+ * should this change.
+ */
+
+.gauge--liveupdate .gauge__data,
+.gauge--liveupdate .gauge__needle {
+    -webkit-transition: all 1s ease-in-out;
+       -moz-transition: all 1s ease-in-out;
+        -ms-transition: all 1s ease-in-out;
+         -o-transition: all 1s ease-in-out;
+            transition: all 1s ease-in-out;
+}
+
+/*
+ * For a given gauge value, x, ranging from 0.0 to 1.0, set
+ * the `transform: rotate()` property according to the
+ * following equation: `-0.5 + 0.5x turns` The default
+ * properties below represent an x value of 0.
+ */
+
+.gauge__data {
+    -webkit-transform: rotate(-.50turn);
+       -moz-transform: rotate(-.50turn);
+        -ms-transform: rotate(-.50turn);
+         -o-transform: rotate(-.50turn);
+            transform: rotate(-.50turn);
+}
+.gauge__needle {
+    -webkit-transform: rotate(-.50turn);
+       -moz-transform: rotate(-.50turn);
+        -ms-transform: rotate(-.50turn);
+         -o-transform: rotate(-.50turn);
+            transform: rotate(-.50turn);
+}

crm_dashboard/static/src/css/style.scss

@@ -0,0 +1,237 @@
+:root {
+    /* Primary */
+    --mauve: #7D7EAF;
+    --pink-dark: #BD85BA;
+    --pink: #F78EAD;
+    --peach: #FFA48E;
+    --orange: #FFCA71;
+    --gold: #CEA716;
+    --green: #1EC198;
+    --grey: #a0a0a0;
+    /* Light */
+    --mauve-light: #e5e5ef;
+    --pink-dark-light: #f2e7f1;
+    --pink-light: #fde8ef;
+    --peach-light: #ffede8;
+    --orange-light: #fff4e3;
+    --gold-light: #faf6e8;
+    --green-light: #e9f9f5;
+    --grey-light: #e0e0e0;
+
+    /*Lighter*/
+    --grey-lighter: #fafafa;
+    --grey-dark-lighter: #f3f3f3;
+}
+
+/* Background */
+.bg-mauve-light {
+    background-color: var(--mauve-light);
+}
+
+.bg-pink-dark-light {
+    background-color: var(--pink-dark-light);
+}
+
+.bg-pink-light {
+    background-color: var(--pink-light);
+}
+
+.bg-peach-light {
+    background-color: var(--peach-light);
+}
+
+.bg-orange-light {
+    background-color: var(--orange-light);
+}
+
+.bg-gold-light {
+    background-color: var(--gold-light);
+}
+
+.bg-green-light {
+    background-color: var(--green-light);
+}
+
+/* Text */
+.text-mauve {
+    color: var(--mauve);
+}
+
+.text-pink-dark {
+    color: var(--pink-dark);
+}
+
+.text-pink {
+    color: var(--pink);
+}
+
+.text-peach {
+    color: var(--peach);
+}
+
+.text-orange {
+    color: var(--orange);
+}
+
+.text-gold {
+    color: var(--gold);
+}
+
+.text-green {
+    color: var(--green);
+}
+
+/* Cards */
+
+.dashboard-card {
+    border-radius: 0.3rem;
+    display: flex;
+    justify-content: center;
+    padding: 1.7rem 1.5rem 1.5rem 1.5rem;
+    margin: 1rem auto;
+    height: 90px;
+}
+
+.dashboard-card__icon-container {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+}
+
+.dashboard-card__icon-container i {
+	font-size: 20px;
+}
+
+.dashboard-card__details {
+    margin-left: 1rem;
+    max-width: 120px;
+}
+
+.dashboard-card__details h3 {
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+.dashboard-card__details h4 {
+    font-weight: 700;
+    font-size: 0.7rem;
+    color: var(--grey);
+    margin-top: -5px;
+}
+
+h2.section-header {
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+.chart-container {
+    border-radius: 0.3rem;
+    padding: 1rem;
+    margin: 1rem auto;
+}
+
+.chart-container.card-shadow {
+    height: 100%;
+}
+
+.half_chart.chart-container.card-shadow {
+	height: 49%;
+}
+
+.chart-container h2 {
+    font-weight: 700;
+    font-size: 1.125rem;
+}
+
+.item-container {
+    background-color: var(--grey-lighter);
+    border-radius: 0.3rem;
+    padding: 1.2rem 1rem;
+    margin: 1rem auto;
+}
+
+.item-container:hover {
+    background-color: var(--grey-dark-lighter);
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+}
+
+.count-container {
+    font-weight: 700;
+    font-size: 1.7rem;
+    background-color: var(--mauve-light);
+    color: var(--mauve);
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-header {
+    display: flex;
+    align-items: flex-start;
+}
+
+.item-title h3 {
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+.item-content ul {
+    list-style: none;
+    padding-left: 0px;
+}
+
+.item-content ul>li {
+    font-size: 0.9rem;
+    color: var(--grey);
+    font-weight: 700;
+}
+
+/* Misc */
+.card-shadow {
+    -webkit-box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1);
+    -moz-box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1);
+    box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1);
+}
+
+/* Table */
+thead {
+    background-color: #e9ecf0;
+    border-bottom: none;
+}
+
+.table thead th {
+    border-bottom: none;
+}
+
+.table td,
+.table th {
+    border-top: 1px solid #eceff2;
+}
+
+.crm_scroll_table {
+	max-height: 395px;
+	overflow-y: auto;
+}
+.recent_activity_div .crm_scroll_table {
+	max-height: 435px;
+}
+
+.crm_scroll_table thead {
+    position: sticky;
+    top: 0;
+}
+
+.crm_scroll_table .count-container {
+    height: 45px;
+    width: 130px;
+    border-radius: 50px;
+    margin-right: 10px;
+}
+
+.crm_scroll_table .item-content ul > li {
+	font-size: 1.1rem;
+}

crm_dashboard/static/src/js/custom.js

@@ -0,0 +1,41 @@
+odoo.define('crm_dashboard.custom', function (require) {
+    'use strict';
+
+    var rpc = require('web.rpc');
+    var manager = false;
+    rpc.query({
+        model: "crm.lead",
+        method: "check_user_group",
+    })
+    .then(function (res) {
+        manager = res;
+    });
+
+    $(document).on("mouseenter", ".dashboard_main_section", function(event){
+        if (manager) {
+            var percentage_crm = $('#percentage_crm').val();
+            var gauge = new Gauge(document.getElementById("gauge"));
+            gauge.value(percentage_crm);
+            $('#country_revenue_table').columnHeatmap({
+                columns: [1],
+                inverse:true,
+            });
+            $('#country_count_table').columnHeatmap({
+                columns: [1],
+                inverse:true,
+            });
+            $('#salesperson_revenue_table').columnHeatmap({
+                columns: [1],
+                inverse:true,
+            });
+        }
+    });
+//    $(document).on("click", "#view_lost_dashboard", function(event){
+//        $(".dashboard_main_section").css({'display':'none'});
+//        $("#dashboard_sub_section").css({'display':'block'});
+//    });
+//    function BreadcrumbSubDash(){
+//        $(".dashboard_main_section").css({'display':'block'});
+//        $("#dashboard_sub_section").css({'display':'none'});
+//    };
+});

crm_dashboard/static/src/xml/dashboard_view.xml

@@ -0,0 +1,558 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+    <t t-name="CRMdashboard">
+         <div class="oh_dashboards">
+            <div class="container-fluid my-5 o_hr_dashboard"/>
+        </div>
+    </t>
+    <t t-name="LoginUser">
+        <section class="dashboard_main_section" id="main_section_login">
+            <div class="row">
+                <div class="col-sm-12 mb-4">
+                    <div class="row">
+                        <div class="col-12 col-sm-12 col-md-8">
+                            <h2 class="section-header">CRM Dashboard</h2>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-4">
+                            <form class="form-group">
+                                <select id="income_expense_values" class="form-control">
+                                    <option id="this_year"
+                                            value="this_year">This Year</option>
+                                    <option id="this_quarter"
+                                            value="this_quarter">This Quarter</option>
+                                    <option id="this_month" value="this_month"
+                                            selected="">This Month</option>
+                                    <option id="this_week"
+                                            value="this_week">This Week</option>
+                                </select>
+                            </form>
+                        </div>
+                    </div>
+                    <hr/>
+                </div>
+            </div>
+        </section>
+    </t>
+    <t t-name="Managercrm">
+        <section class="dashboard_main_section" id="main_section_manager">
+            <div class="crm_dash_cards row">
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow my_lead">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-line-chart text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="leads_this_year"/>
+                                    <div id="leads_this_quarter"/>
+                                    <div id="leads_this_month"/>
+                                    <div id="leads_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>My Leads</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow opportunity">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-trophy text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="opp_this_year"/>
+                                    <div id="opp_this_quarter"/>
+                                    <div id="opp_this_month"/>
+                                    <div id="opp_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>My Opportunities</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow exp_revenue">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-usd text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="exp_rev_this_year"/>
+                                    <div id="exp_rev_this_quarter"/>
+                                    <div id="exp_rev_this_month"/>
+                                    <div id="exp_rev_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>Expected Revenue</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow revenue_card revenue_card">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-usd text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="rev_this_year"/>
+                                    <div id="rev_this_quarter"/>
+                                    <div id="rev_this_month"/>
+                                    <div id="rev_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>Revenue</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow win_ratio">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-percent text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="ratio_this_year"/>
+                                    <div id="ratio_this_quarter"/>
+                                    <div id="ratio_this_month"/>
+                                    <div id="ratio_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>Win Ratio</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow avg_close_time">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-clock-o text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="avg_time_this_year"/>
+                                    <div id="avg_time_this_quarter"/>
+                                    <div id="avg_time_this_month"/>
+                                    <div id="avg_time_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>Average Closing Time</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow opportunity_ratio">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-percent text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <div id="total_revenue_this_year"/>
+                                    <div id="total_revenue_this_quarter"/>
+                                    <div id="total_revenue_this_month"/>
+                                    <div id="total_revenue_this_week"/>
+                                </span>
+                            </h3>
+                            <h4>Opportunity Win Loss Ratio</h4>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-3">
+                    <div class="dashboard-card card-shadow unassigned_leads">
+                        <div
+                                class="dashboard-card__icon-container bg-mauve-light d-flex justify-content-center align-items-center">
+                            <i class="fa fa-user-times text-mauve"/>
+                        </div>
+                        <div class="dashboard-card__details">
+                            <h3>
+                                <span>
+                                    <t t-esc="widget.get_count_unassigned"/>
+                                </span>
+                            </h3>
+                            <h4>Unassigned Leads Count</h4>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="funnel_chart_div col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h2>Funnel Chart</h2>
+                        <hr/>
+                        <div class="funnel">
+                            <div id="container" class="mt-4" width="100%" height="auto"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="year_to_date_graph_div col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h2>Year to Date</h2>
+                        <hr/>
+                        <div class="graph_canvas" style="margin-top: 30px;">
+                            <canvas class="annual_target" width="340px" height="400px"/>
+                        </div>
+                        <div style="margin-top: 30px;margin-left: 20px;">
+                            <h5 class="sub_title d-flex">Annual Target :&amp;nbsp <div id="target"/></h5>
+                            <h5 class="sub_title d-flex">YtD Target :&amp;nbsp <div id="ytd_target"/></h5>
+                            <h5 class="sub_title d-flex">Achieved Won :&amp;nbsp <div id="won"/></h5>
+                            <h5 class="sub_title d-flex">Difference :&amp;nbsp <div id="difference"/></h5>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-4">
+                    <div class="leads_month_pie_div half_chart chart-container card-shadow">
+                        <h2>Leads by Month</h2>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="lead_month" width="200" height="120"/>
+                        </div>
+                    </div>
+                    <div class="sales_activity_pie_div half_chart chart-container card-shadow">
+                        <h2>CRM Activity</h2>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="sales_activity" width="200" height="120"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="upcoming_activities_div col-12 col-sm-12 col-md-6">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Upcoming Activities</h3>
+                        <hr/>
+                        <div class="crm_scroll_table">
+                            <div class="items-table">
+                                <div class="item-container">
+                                    <t t-foreach="widget.upcoming_events" t-as="activity">
+                                    <div class="item-header">
+                                        <div class="count-container">
+                                            <t t-esc="activity[1]"/>
+                                        </div>
+                                        <div class="item-title pl-3">
+                                            <div class="item-content">
+                                                <ul>
+                                                    <li>
+                                                        <t t-set="lang_cu" t-value="widget.current_lang"/>
+                                                        <t t-if="lang_cu in activity[4]">
+                                                        Activity:
+                                                        <span style="font-size: 16px;color: #4c4c4c;">
+                                                            <t t-esc="activity[4][lang_cu]"/>
+                                                        </span>
+                                                        </t>
+                                                    </li>
+                                                    <li>
+                                                        Name:
+                                                        <span style="font-size: 15px;color: #4c4c4c;">
+                                                            <t t-esc="activity[3]"/>
+                                                        </span>
+                                                    </li>
+                                                    <li t-if="activity[2]">Summary:
+                                                        <span style="font-size: 13px;color: #4c4c4c;">
+                                                            <t t-esc="activity[2]"/>
+                                                        </span>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </t>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="revenue_count_pie_div col-12 col-sm-12 col-md-6">
+                     <div class="chart-container card-shadow">
+                        <h3 class="h5">Total Revenue by Salesperson</h3>
+                         <hr/>
+                         <div class="graph_canvas">
+                            <canvas class="revenue_count_pie_canvas" width="200" height="120"/>
+                         </div>
+                     </div>
+                 </div>
+            </div>
+        </section>
+    </t>
+
+    <t t-name="Admincrm">
+        <section class="dashboard_main_section" id="main_section_admin">
+            <div class="row mt-5">
+                <div class="col-sm-12 col-md-4">
+                    <div class="top_deals_div chart-container card-shadow">
+                        <h2>Top Deals</h2>
+                        <hr/>
+                        <div class="items-table">
+                            <div class="item-container">
+                                <t t-foreach="widget.top_deals" t-as="activity">
+                                <div class="item-header">
+                                    <div class="count-container">
+                                        <t t-esc="activity[7]"/>
+                                    </div>
+                                    <div class="item-title pl-3">
+                                        <h3><t t-esc="activity[3]"/>. <t t-esc="activity[6]"/><t t-esc="activity[2]"/></h3>
+                                        <div class="item-content">
+                                            <ul>
+                                                <li>
+                                                    Sales Person: <t t-esc="activity[0]"/>,&amp;nbsp
+                                                    Team: <t t-esc="activity[5]"/>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="monthly_goal_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Monthly Goal</h3>
+                        <hr/>
+                        <input type="hidden" id="percentage_crm" name="percentage_crm" t-att-value="widget.monthly_goals[3]"/>
+                        <div class="gauge gauge--liveupdate" id="gauge" style="padding-top: 50px;">
+                            <div class="gauge__container">
+                                <div class="gauge__background"/>
+                                <div class="gauge__center"/>
+                                <div class="gauge__data"/>
+                                <div class="gauge__needle"/>
+                            </div>
+                            <div class="gauge__labels mdl-typography__headline">
+                                <span class="gauge__label--low">
+                                    <b><t t-esc="widget.monthly_goals[2]"/><t t-esc="widget.monthly_goals[0]"/></b>
+                                </span>
+                                <span class="gauge__label--spacer"/>
+                                <span class="gauge__label--high">
+                                    <b><t t-esc="widget.monthly_goals[2]"/><t t-esc="widget.monthly_goals[1]"/></b>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="leads_campaign_pie_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Leads group by Campaign</h3>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="campaign_source" width="200" height="120"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="leads_medium_pie_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Leads group by Medium</h3>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="medium_leads" width="200" height="120"/>
+                        </div>
+                    </div>
+                    <div class="leads_source_pie_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Leads group by Source</h3>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="source_lead" width="200" height="120"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="top_sp_revenue_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Top Salesperson Revenue</h3>
+                        <hr/>
+                        <table class="table table-hover" id="salesperson_revenue_table">
+                            <thead>
+                                <tr>
+                                    <th>Opportunity</th>
+                                    <th>Revenue</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_sp_revenue" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[3]"/></td>
+                                        <td><t t-esc="activity[5]"/><t t-esc="activity[2]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="top_country_revenue_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Top Country Wise Revenue</h3>
+                        <hr/>
+                        <table class="table table-hover" id="country_revenue_table">
+                            <thead>
+                                <tr>
+                                    <th>Country</th>
+                                    <th>Revenue</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_country_revenue" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[2]"/><t t-esc="activity[1]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="top_country_count_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Top Country Wise Count</h3>
+                        <hr/>
+                        <table class="table table-hover" id="country_count_table">
+                            <thead>
+                                <tr>
+                                    <th>Country</th>
+                                    <th>Count</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_country_count" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[1]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="recent_activity_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Recent Activities</h3>
+                        <hr/>
+                        <div class="crm_scroll_table">
+                            <div class="items-table">
+                                <div class="item-container">
+                                    <t t-foreach="widget.recent_activities" t-as="activity">
+                                    <div class="item-header">
+                                        <div class="count-container">
+                                            <t t-esc="activity[1]"/>
+                                        </div>
+                                        <div class="item-title pl-3">
+                                            <div class="item-content">
+                                                <ul>
+                                                    <li>
+                                                        <t t-set="lang_cu" t-value="widget.current_lang"/>
+                                                        <t t-if="lang_cu in activity[4]">
+                                                        Activity:
+                                                        <span style="font-size: 15px;color: #4c4c4c;">
+                                                            <t t-esc="activity[4][lang_cu]"/>
+                                                        </span>
+                                                        </t>
+                                                    </li>
+                                                    <li>Name:
+                                                        <span style="font-size: 13px;color: #4c4c4c;">
+                                                            <t t-esc="activity[3]"/>
+                                                        </span>
+                                                    </li>
+                                                    <li t-if="activity[2]">Summary:
+                                                        <span style="font-size: 13px;color: #4c4c4c;">
+                                                            <t t-esc="activity[2]"/>
+                                                        </span>
+                                                    </li>
+                                                    <li>
+                                                        Sales Rep.: <t t-esc="activity[5]"/>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </t>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="lost_opp_lead_graph_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Lost Opportunity/Lead Graph</h3>
+                        <hr/>
+                        <div class="row">
+                            <div class="col-6">
+                                <!--<button id="view_lost_dashboard" name="view_lost_dashboard"-->
+                                <!--         class="btn btn-primary" style="padding: 4px;">-->
+                                <!--    <i class="fa fa-dashboard fa-lg"/> &amp;nbsp Lost Reason Analysis-->
+                                <!--</button>-->
+                            </div>
+                            <form class="form-group col-6">
+                                <select id="total_loosed_crm" class="form-control">
+                                    <option id="lost_last_12months" value="lost_last_12months">Last 12 Months</option>
+                                    <option id="lost_last_6months" value="lost_last_6months">Last 6 Months</option>
+                                    <option id="lost_last_month" value="lost_last_month">Last Month</option>
+                                </select>
+                            </form>
+                        </div>
+                        <div class="chart">
+                            <canvas id="canvas" width="400" height="400"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="top_sp_invoice_div col-12 col-sm-12 col-md-4">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Top Sales Person by Invoice</h3>
+                        <hr/>
+                        <div class="items-table">
+                            <div class="item-container">
+                                <t t-foreach="widget.top_sp_by_invoice" t-as="activity">
+                                    <div class="item-header">
+                                        <div class="count-container" style="height: 30px;width: 30px;font-size: 1.4rem;">
+                                            <t t-esc="activity[3]"/>
+                                        </div>
+                                        <div class="item-title pl-4 row">
+                                            <h3><t t-esc="activity[0]"/>&amp;nbsp</h3>
+                                            <div class="item-content">
+                                                <ul>
+                                                    <li><h3>
+                                                        <t t-esc="activity[2]"/><t t-esc="activity[1]"/>
+                                                    </h3></li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </t>
+</templates>

crm_dashboard/static/src/xml/sub_dashboard.xml

@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+    <t t-name="SubDashboard">
+        <section class="dashboard_sub_section" id="dashboard_sub_section" style="display: none;">
+            <div class="crm_sub_dash_breadcrumb">
+                <ol role="navigation" class="breadcrumb" style="background: none;font-size: 16px;margin-top: 10px;">
+                    <li class="breadcrumb-item">
+                        <a id="breadcrumb_button_sub" href="#" onclick="BreadcrumbSubDash(); return false;">
+                            Dashboard
+                        </a>
+                    </li>
+                    <li class="breadcrumb-item active">Lost Reason Analysis</li>
+                </ol>
+                <hr/>
+            </div>
+
+            <div class="row mt-5">
+                <div class="col-12 col-sm-12 col-md-3">
+                    <div class="top_lost_reason_count_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Top Lost Reason and Count</h3>
+                        <hr/>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Lost reason</th>
+                                    <th>Count</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_reason_count" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[1]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="top_ratio_country_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Top Won vs Lost Ratio based on Country</h3>
+                        <hr/>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Country</th>
+                                    <th>Ratio</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_country_wise_ratio" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[3]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="top_ratio_sp_div col-12 col-sm-12 col-md-3">
+                    <div class="top_ratio_sp_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Top Won vs Lost Ratio based on Sales Person</h3>
+                        <hr/>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Sales Person</th>
+                                    <th>Ratio</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_salesperson_wise_ratio" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[3]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="top_ratio_team_div half_chart chart-container card-shadow">
+                        <h3 class="h5">Top Won vs Lost Ratio based on Sales Team</h3>
+                        <hr/>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Sales Team</th>
+                                    <th>Ratio</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="widget.top_sales_team_wise_ratio" t-as="activity">
+                                    <tr>
+                                        <td><t t-esc="activity[0]"/></td>
+                                        <td><t t-esc="activity[3]"/></td>
+                                    </tr>
+                                </t>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-6">
+                    <div class="lost_reason_pie_div chart-container card-shadow">
+                        <h3 class="h5">Lost Leads by Lost Reason</h3>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="lost_leads_graph" width="200" height="120"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="col-12 col-sm-12 col-md-6">
+                    <div class="lost_stage_pie_div chart-container card-shadow">
+                        <h3 class="h5">Lost Leads by Stage</h3>
+                        <hr/>
+                        <div class="graph_canvas">
+                            <canvas class="lost_leads_by_stage_graph" width="200" height="120"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="lost_lead_opp_graph_div col-12 col-sm-12 col-md-6">
+                    <div class="chart-container card-shadow">
+                        <h3 class="h5">Lost Opportunity/Lead Graph</h3>
+                        <hr/>
+                        <div class="row">
+                            <div class="col-8"/>
+                            <form class="form-group col-4">
+                                <select id="total_loosed_crm_sub" class="form-control">
+                                    <option id="sub_lost_last_12months" value="sub_lost_last_12months">Last 12 Months</option>
+                                    <option id="sub_lost_last_6months" value="sub_lost_last_6months">Last 6 Months</option>
+                                    <option id="sub_lost_last_month" value="sub_lost_last_month">Last Month</option>
+                                </select>
+                            </form>
+                        </div>
+                        <div class="chart">
+                            <canvas id="canvas_graph" width="400" height="400"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </t>
+</templates>

crm_dashboard/views/dashboard_view.xml

@@ -0,0 +1,61 @@
+<odoo>
+    <data>
+        <record id="crm_manager_view" model="ir.ui.view">
+            <field name="name">crm.manager.select</field>
+            <field name="model">crm.lead</field>
+            <field name="inherit_id" ref="crm.crm_lead_view_form"/>
+            <field name="arch" type="xml">
+                <xpath expr="//field[@name='company_id']"
+                       position="after">
+                    <field name="crm_manager_id"/>
+                </xpath>
+            </field>
+        </record>
+
+        <record model="ir.ui.view" id="sales_team_inherit">
+            <field name="name">sales.team.inherit.view</field>
+            <field name="model">crm.team</field>
+            <field name="inherit_id" ref="sales_team.crm_team_view_form"/>
+            <field name="arch" type="xml">
+                <field name="alias_contact" position="after">
+                    <field name="crm_lead_state_id"/>
+                </field>
+            </field>
+        </record>
+
+        <record id="view_users_form_inherit" model="ir.ui.view">
+            <field name="name">res.users.form.inherit</field>
+            <field name="model">res.users</field>
+            <field name="inherit_id" ref="base.view_users_form"/>
+            <field name="arch" type="xml">
+                <xpath expr="//page[@name='access_rights']//group" position="after">
+                    <group string="CRM dashboard" >
+                        <field name="sales"  widget="monetary" options="{'no_create': True}"/>
+                    </group>
+                </xpath>
+            </field>
+        </record>
+
+        <record id="action_crm_lead_all_dashboard" model="ir.actions.client">
+            <field name="name">CRM</field>
+            <field name="tag">crm_dashboard</field>
+        </record>
+
+        <record id="campaign_smart_button" model="ir.ui.view">
+            <field name="name">Campaign Win Lose Smart Button</field>
+            <field name="model">utm.campaign</field>
+            <field name="inherit_id" ref="utm.utm_campaign_view_form"/>
+            <field name="arch" type="xml">
+                <div name="button_box" position="inside">
+                    <button class="oe_stat_button" type="object" name="get_ratio" icon="fa-percent">
+                        <field string="Ratio" name="total_ratio" widget="statinfo"/>
+                    </button>
+                </div>
+            </field>
+        </record>
+
+        <menuitem name="Dashboard" id="menu_crm_dashboard_new" parent="crm.crm_menu_root"
+                  sequence="0" action="action_crm_lead_all_dashboard"/>
+        <menuitem id="crm.crm_menu_root" action="action_crm_lead_all_dashboard"/>
+    </data>
+</odoo>

crm_kit/README.rst

@@ -0,0 +1,39 @@
+CRM Kit
+=======
+* CRM Kit module for Odoo 16.
+
+Installation
+============
+	- www.odoo.com/documentation/15.0/setup/install.html
+	- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/15.0/legal/licenses/licenses.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Credits
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Contacts
+--------
+* Mail Contact : odoo@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
+==========
+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>`__

crm_kit/__init__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models
+from . import wizard
+from . import controllers

crm_kit/__manifest__.py

@@ -0,0 +1,50 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    "name": "Odoo15 CRM Kit",
+    'description': """Complete CRM Kit for odoo15, CRM, CRM dashboard, crm commission, commission plan, crm features""",
+    'summary': """Complete CRM Kit for odoo15""",
+    "category": 'Sales',
+    "version": '16.0.1.0.0',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ['base', 'sale_management', 'crm', 'crm_dashboard'],
+    "data": [
+        'security/ir.model.access.csv',
+        'views/commission.xml',
+        'wizard/commission_report.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'crm_kit/static/src/js/action_manager.js',
+        ],
+    },
+    'images': [
+        'static/description/banner.png',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

crm_kit/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import main

crm_kit/controllers/main.py

@@ -0,0 +1,56 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Midilaj (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+import json
+from odoo import http
+from odoo.http import content_disposition, request
+from odoo.tools import html_escape
+
+
+class XLSXReportController(http.Controller):
+
+    @http.route('/xlsx_reports', type='http', auth='user', methods=['POST'], csrf=False)
+    def get_report_xlsx(self, model, options, output_format, report_name, **kw):
+        uid = request.session.uid
+        report_obj = request.env[model].with_user(uid)
+        options = json.loads(options)
+        token = 'dummy-because-api-expects-one'
+        try:
+            if output_format == 'xlsx':
+                response = request.make_response(
+                    None,
+                    headers=[
+                        ('Content-Type', 'application/vnd.ms-excel'),
+                        ('Content-Disposition', content_disposition(report_name + '.xlsx'))
+                    ]
+                )
+                report_obj.get_xlsx_report(options, response)
+            response.set_cookie('fileToken', token)
+            return response
+        except Exception as e:
+            se = http.serialize_exception(e)
+            error = {
+                'code': 200,
+                'message': 'Odoo Server Error',
+                'data': se
+            }
+            return request.make_response(html_escape(json.dumps(error)))

crm_kit/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <crm_kit>
+
+#### 30.09.2022
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for CRM Kit Module

crm_kit/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import commission

crm_kit/models/commission.py

@@ -0,0 +1,126 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import exceptions
+from odoo import fields, models, api, _
+
+
+class CommissionPlan(models.Model):
+    _name = 'crm.commission'
+    _description = 'Commission Plan'
+    _rec_name = "name"
+    _inherit = ['mail.thread', 'mail.activity.mixin']
+
+    name = fields.Char('Name', required=True)
+    active = fields.Boolean('Active', default=True)
+    date_from = fields.Date(string="From Date", required=True)
+    date_to = fields.Date(string="To Date", required=True)
+    type = fields.Selection(
+        [('product', 'Product wise'),
+         ('revenue', 'Revenue wise')], string="Type",
+        default="product")
+    team_id = fields.Many2one('crm.team', string='Sales Team')
+    user_id = fields.Many2one('res.users', string='Salesperson')
+    product_comm_ids = fields.One2many('commission.product', 'commission_id',
+                                       string="Product Wise")
+    straight_commission_rate = fields.Float(string='Commission rate (%)')
+    revenue_grd_comm_ids = fields.One2many(
+        'commission.graduated',
+        'commission_id',
+        string="Revenue Graduated Wise")
+
+    revenue_type = fields.Selection(
+        [('straight', 'Straight Commission'),
+         ('graduated', 'Graduated Commission')],
+        string="Revenue Type")
+
+    @api.constrains("date_from", "date_to")
+    def _check_date(self):
+        for rec in self:
+            if rec.date_to < rec.date_from:
+                raise exceptions.ValidationError(
+                    _("The From date cannot be earlier than To date.")
+                )
+
+    @api.onchange('type')
+    def onchange_type(self):
+        if self.type == 'revenue':
+            self.product_comm_ids = [(5, 0, 0)]
+        elif self.type == 'product':
+            self.revenue_type = False
+            self.straight_commission_rate = False
+            self.revenue_grd_comm_ids = [(5, 0, 0)]
+
+
+class CommissionProduct(models.Model):
+    _name = 'commission.product'
+    _description = 'Commission Product Wise'
+
+    user_id = fields.Many2one('res.users')
+    category_id = fields.Many2one('product.category', string='Product Category')
+    product_id = fields.Many2one('product.product', string='Product',
+                                 domain="[('categ_id', '=', category_id)]")
+    percentage = fields.Float(string='Rate in Percentage (%)')
+    amount = fields.Monetary('Maximum Commission Amount', default=0.0)
+    currency_id = fields.Many2one("res.currency", string="Currency",
+                                  default=lambda self:
+                                  self.env.user.company_id.currency_id.id)
+    commission_id = fields.Many2one("crm.commission")
+
+
+class CommissionRevenueGraduated(models.Model):
+    _name = 'commission.graduated'
+    _description = 'Commission Revenue Graduated Wise'
+
+    graduated_commission_rate = fields.Float(string='Commission rate (%)')
+    amount_from = fields.Float(string="From Amount")
+    amount_to = fields.Float(string="To Amount")
+    commission_id = fields.Many2one("crm.commission")
+    sequence = fields.Integer(string='Sequence', compute='_compute_sequence',
+                              store=True)
+
+    @api.depends('commission_id')
+    def _compute_sequence(self):
+        number = 1
+        seq = self.mapped('commission_id')
+        for rule in seq.revenue_grd_comm_ids:
+            rule.sequence = number
+            number += 1
+
+    @api.constrains("amount_from", "amount_to")
+    def _check_amounts(self):
+        for rec in self:
+            if rec.amount_to < rec.amount_from:
+                raise exceptions.ValidationError(
+                    _("The From Amount limit cannot be greater than To Amount.")
+                )
+
+
+class CrmTeam(models.Model):
+    _inherit = 'crm.team'
+
+    commission_id = fields.Many2one('crm.commission', string='Commission Plan')
+
+
+class CrmSalespersons(models.Model):
+    _inherit = 'res.users'
+
+    commission_id = fields.Many2one('crm.commission', string='Commission Plan')

crm_kit/security/ir.model.access.csv

@@ -0,0 +1,5 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_commission_plan,crm.commission,model_crm_commission,base.group_user,1,1,1,1
+access_commission_product,commission.product,model_commission_product,base.group_user,1,1,1,1
+access_commission_wizard,commission.wizard,model_commission_wizard,base.group_user,1,1,1,1
+access_commission_graduated,commission.graduated,model_commission_graduated,base.group_user,1,1,1,1