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.
272 lines
15 KiB
272 lines
15 KiB
<?xml version="1.0" encoding="utf-8" ?>
|
|
<!--This template defines a custom dashboard for Packers and Movers Management.
|
|
The dashboard displays various statistics and graphs related to truck bookings,
|
|
distances, revenue, and customer analysis. It also includes tables showing
|
|
upcoming events, top customers, and top trucks.-->
|
|
<template>
|
|
<t t-name="CustomDashBoard">
|
|
<!-- This template defines a custom dashboard. -->
|
|
<div class="oh_dashboards" style="margin-top: 20px;">
|
|
<div class="container-fluid o_pj_dashboard">
|
|
<!-- Your template implementation here -->
|
|
<t t-call="DashboardVenueBooking"/>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
<t t-name="DashboardVenueBooking">
|
|
<div class="scrollbar" id="style-1">
|
|
<div class="col-xs-12">
|
|
<div class="row" style="margin:0px;">
|
|
<h2 class="section-header"
|
|
style="font-size: 2em; color: #7d7eaf;">Venue Booking
|
|
Management
|
|
Dashboard
|
|
</h2>
|
|
<div class="select" id="top_product_button"
|
|
style="margin-bottom: 1%;">
|
|
<select name="filter" id="stock_selection" style="width: 283px; height: 30px;
|
|
border-color:#7d7eaf; background-color: #fff; border-radius: 10px;"
|
|
t-on-change="(e) => this.on_change_booking_values(e)">
|
|
<option id="day" value="day">Day</option>
|
|
<option id="month" value="month" selected="">Month
|
|
</option>
|
|
<option id="week" value="week">Week</option>
|
|
<option id="year" value="year">Year</option>
|
|
</select>
|
|
</div>
|
|
<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>
|
|
<div class="total">
|
|
<t t-esc="props.booking_count"/>
|
|
</div>
|
|
<span>
|
|
<div id="booking_this_year"/>
|
|
<div id="booking_this_day"/>
|
|
<div id="booking_this_month"/>
|
|
<div id="booking_this_week"/>
|
|
</span>
|
|
</h3>
|
|
<h4>Total Booking</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-map-marker text-mauve"/>
|
|
</div>
|
|
<div class="dashboard-card__details">
|
|
<h3>
|
|
<div class="total">
|
|
<t t-esc="props.total_venue"/>
|
|
</div>
|
|
<span>
|
|
<div id="venue_this_year"/>
|
|
<div id="venue_this_day"/>
|
|
<div id="venue_this_month"/>
|
|
<div id="venue_this_week"/>
|
|
</span>
|
|
</h3>
|
|
<h4>Total Venue</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>
|
|
<div class="total">
|
|
<t t-esc="props.total_amount"/>
|
|
</div>
|
|
<span>
|
|
<div id="amount_this_year"/>
|
|
<div id="amount_this_day"/>
|
|
<div id="amount_this_month"/>
|
|
<div id="amount_this_week"/>
|
|
</span>
|
|
</h3>
|
|
<h4>Total Amount</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>
|
|
<div class="total">
|
|
<t t-esc="props.total_invoice"/>
|
|
</div>
|
|
<span>
|
|
<div id="invoice_this_year"/>
|
|
<div id="invoice_this_day"/>
|
|
<div id="invoice_this_month"/>
|
|
<div id="invoice_this_week"/>
|
|
</span>
|
|
</h3>
|
|
<h4>Invoiced Amount</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-6">
|
|
<div class="oh-card text-color graph">
|
|
<div class="oh-card-body pb-0">
|
|
<h4 class="head">
|
|
Customer Analysis By Invoice
|
|
</h4>
|
|
<hr/>
|
|
</div>
|
|
<canvas id="booking" width="300" height="200"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-6 head">
|
|
<div class="oh-card text-color graph"
|
|
style="width: 68%;">
|
|
<div class="oh-card-body pb-0">
|
|
<h4 class="head">
|
|
Venue Analysis By Invoice
|
|
</h4>
|
|
</div>
|
|
<hr/>
|
|
<canvas id="venue" width="300" height="200"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 col-lg-4">
|
|
<div class="customer">
|
|
<div class="customer_head">
|
|
Upcoming
|
|
</div>
|
|
<div class="col-sm-12 col-lg-12"
|
|
style="padding:0;">
|
|
<div class="text-color">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="14">Seq.No
|
|
</th>
|
|
<th rowspan="14">Customer Name
|
|
</th>
|
|
<th rowspan="14">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<t t-foreach="props.upcoming"
|
|
t-as="upcoming"
|
|
t-key="upcoming_index">
|
|
<tr>
|
|
<td>
|
|
<t t-esc="upcoming['ref']"/>
|
|
</td>
|
|
<td>
|
|
<t t-esc="upcoming['name']"/>
|
|
</td>
|
|
<td>
|
|
<t t-esc="upcoming['date']"/>
|
|
</td>
|
|
</tr>
|
|
</t>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-4">
|
|
<div class="customer">
|
|
<div class="customer_head">
|
|
Top 10 Customers
|
|
</div>
|
|
<div class="col-sm-12 col-lg-12"
|
|
style="padding:0;">
|
|
<div class="text-color">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="14"
|
|
style="text-align:center;">
|
|
S.NO
|
|
</th>
|
|
<th rowspan="14">Customer Name
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<t t-foreach="props.customer"
|
|
t-as="customer"
|
|
t-key="customer_index">
|
|
<tr>
|
|
<td>
|
|
<div class="circle">
|
|
<t t-esc="customer_index + 1"/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<t t-esc="customer['name']"/>
|
|
</td>
|
|
</tr>
|
|
</t>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-4">
|
|
<div class="customer">
|
|
<div class="customer_head">
|
|
Top 10 Venues
|
|
</div>
|
|
<div class="col-sm-12 col-lg-12"
|
|
style="padding:0;">
|
|
<div class="text-color">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="14"
|
|
style="text-align:center;">
|
|
count
|
|
</th>
|
|
<th rowspan="14">Venue Name
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<t t-foreach="props.venue"
|
|
t-as="venue" t-key="venue_index">
|
|
<tr>
|
|
<td>
|
|
<div class="circle">
|
|
<t t-esc="venue_index + 1"/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<t t-esc="venue['name']"/>
|
|
</td>
|
|
</tr>
|
|
</t>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|