You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
642 lines
33 KiB
642 lines
33 KiB
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<templates id="template" xml:space="preserve">
|
|
<!-- This is a comment describing the CRM Dashboard section -->
|
|
<t t-name="CRMdashboard">
|
|
<div class="oh_dashboards"
|
|
style="margin-top: 20px; overflow-y: scroll;vertical-align: middle;overflow-x: clip;max-height: -webkit-fill-available;">
|
|
<div class="container-fluid my-5 o_hr_dashboard">
|
|
<t t-call="LoginUser"/>
|
|
<t t-call="Managercrm"/>
|
|
<t t-call="Admincrm"/>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
<!-- This is a comment describing the LoginUser section -->
|
|
<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"
|
|
t-on-change="(e) => this.on_change_income_expense_values(e)"
|
|
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>
|
|
<!-- Manager CRM Section -->
|
|
<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"
|
|
t-on-click="(e) => this.my_lead(e)">
|
|
<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"
|
|
t-on-click="(e) => this.opportunity(e)">
|
|
<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"
|
|
t-on-click="(e) => this.exp_revenue(e)">
|
|
<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"
|
|
t-on-click="(e) => this.revenue_card(e)">
|
|
<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"
|
|
t-on-click="(e) => this.unassigned_leads(e)">
|
|
<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="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 :
|
|
<div
|
|
id="target"/>
|
|
</h5>
|
|
<h5 class="sub_title d-flex">YtD Target :
|
|
<div
|
|
id="ytd_target"/>
|
|
</h5>
|
|
<h5 class="sub_title d-flex">Achieved Won :
|
|
<div
|
|
id="won"/>
|
|
</h5>
|
|
<h5 class="sub_title d-flex">Difference :
|
|
<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" style="max-height:530px;">
|
|
<div class="items-table">
|
|
<div class="item-container">
|
|
<t t-foreach="upcoming_events"
|
|
t-as="activity" t-key="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="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>
|
|
<br/>
|
|
<div class="graph_canvas">
|
|
<canvas class="revenue_count_pie_canvas"
|
|
width="200" height="120"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</t>
|
|
<!-- Admin CRM Section -->
|
|
<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="top_deals" t-as="activity"
|
|
t-key="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]"/>
|
|
,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="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="monthly_goals[2]"/>
|
|
<t t-esc="monthly_goals[0]"/>
|
|
</b>
|
|
</span>
|
|
<span class="gauge__label--spacer"/>
|
|
<span class="gauge__label--high">
|
|
<b>
|
|
<t t-esc="monthly_goals[2]"/>
|
|
<t t-esc="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="top_sp_revenue"
|
|
t-as="activity" t-key="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="top_country_revenue"
|
|
t-as="activity" t-key="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="top_country_count"
|
|
t-as="activity" t-key="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="recent_activities"
|
|
t-as="activity" t-key="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="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">
|
|
</div>
|
|
<form class="form-group col-6">
|
|
<select id="total_loosed_crm"
|
|
t-on-change="(e) => this.change_total_loosed_crm(e)"
|
|
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>
|
|
<t t-if="top_sp_by_invoice.length">
|
|
<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="top_sp_by_invoice"
|
|
t-as="activity" t-key="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]"/>
|
|
</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>
|
|
</t>
|
|
</div>
|
|
</section>
|
|
</t>
|
|
</templates>
|
|
|