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.
414 lines
25 KiB
414 lines
25 KiB
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<templates xml:space="preserve">
|
|
<t t-name="AccountDashboard" owl="1">
|
|
<div class="accounts-dashboard-wrap" style="margin-top:20px;">
|
|
<div style="overflow-y: scroll;height: 100vh;">
|
|
<!-- Tiles -->
|
|
<div class="wrapper"
|
|
style="display:flex;justify-content: space-around;">
|
|
<div>
|
|
<div class="shadow-sm border m-2 text-center"
|
|
style="background-image: radial-gradient( circle 311px at 8.6% 27.9%, rgba(62,147,252,0.57) 12.9%, rgba(239,183,192,0.44) 91.2% );
|
|
border-radius: 10px;width:350px;">
|
|
<div class="h1 fw-bold text-dark"
|
|
style="font-size: 48px">
|
|
<t t-esc="state.data.open_invoice"/></div>
|
|
<div class="h3">Open Invoice</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="shadow-sm border m-2 text-center"
|
|
style="background-image: linear-gradient( 184.1deg, rgba(249,255,182,1) 44.7%, rgba(226,255,172,1) 67.2% );
|
|
border-radius: 10px;width:350px;">
|
|
<div class="h1 fw-bold text-dark"
|
|
style="font-size: 48px">
|
|
<t t-esc="state.data.paid_invoice"/></div>
|
|
<div class="h3">Paid Invoice</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="shadow-sm border m-2 text-center"
|
|
style="background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(176,229,208,1) 42%, rgba(92,202,238,0.41) 93.6% );
|
|
border-radius: 10px;width:350px;">
|
|
<div class="h1 fw-bold text-dark"
|
|
style="font-size: 48px">
|
|
<t t-esc="state.data.currency_symbol"/>
|
|
<t t-esc="state.data.income"/></div>
|
|
<div class="h3">Total Income</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="shadow-sm border m-2 text-center"
|
|
style="background-image: linear-gradient( 111.4deg, rgba(238,113,113,1) 1%, rgba(246,215,148,1) 58% ); border-radius: 10px;width:350px;">
|
|
<div class="h1 fw-bold text-dark"
|
|
style="font-size: 48px">
|
|
<t t-esc="state.data.unreconcile_items"/></div>
|
|
<div class="h3">UnReconciled Items</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
|
<!-- Income/Expense/Profit -->
|
|
<div class="row" style="margin:0px">
|
|
<div class="col-md-4" id="col-graph">
|
|
<div class="card" style="margin-top:20px;">
|
|
<!--card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center;border-radius: 10px 10px 0px 0px; ">
|
|
<div class="card-title">
|
|
<b>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.IncomeExpense == 'income' ">INCOME CHART</h3>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.IncomeExpense == 'expense' ">EXPENSE CHART</h3>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.IncomeExpense == 'profit' ">PROFIT CHART</h3>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.IncomeExpense == 'all' ">ALL IN ONE</h3>
|
|
</b>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:auto;">
|
|
<select class="form-select"
|
|
style="color: #000000;"
|
|
t-model="state.IncomeExpense"
|
|
t-on-change="onPeriodChange">
|
|
<option value="income">Income </option>
|
|
<option value="expense">Expense </option>
|
|
<option value="profit">Profit </option>
|
|
<option value="all">All In One</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:5px;">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.income"
|
|
t-on-change="onPeriodChange">
|
|
<option value="income_this_year">This Year</option>
|
|
<option value="income_this_month">This Month</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="chart">
|
|
<canvas id="canvas"
|
|
t-ref="All"
|
|
width="300" height="200"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PAYMENT LIST -->
|
|
<div class="col-md-4">
|
|
<div class="card" style="margin-top:20px;">
|
|
<!-- card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center;border-radius: 10px 10px 0px 0px; ">
|
|
<div class="card-title">
|
|
<b>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.payment_list_filter == 'customer_payment' ">CUSTOMER PAYMENT LIST</h3>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.payment_list_filter == 'vendor_payment' ">VENDOR PAYMENT LIST</h3>
|
|
</b>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:auto;">
|
|
<select class="form-select"
|
|
style="color: #000000;"
|
|
t-model="state.payment_list_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option value="customer_payment">Customer List</option>
|
|
<option value="vendor_payment">Vendor List</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:5px;">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.payment_data_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option value="this_month">This Month</option>
|
|
<option value="this_year">This Year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body"
|
|
style="height:400px;overflow: overlay;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="chart">
|
|
<table class="table table-striped"
|
|
t-if="state.payment_data.length != 0">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Amount</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr t-foreach="state.payment_data"
|
|
t-as="payment"
|
|
t-key="payment.id">
|
|
<td><t t-esc="payment.partner"/> </td>
|
|
<td><t t-esc="payment.amount"/> </td>
|
|
<td><t t-esc="payment.date"/> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div t-else="">
|
|
<h2>NO DATA AVAILABLE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- TOP SALE REVENUE CUSTOMER-->
|
|
<div class="col-md-4" id="col-graph">
|
|
<div class="card" style="margin-top:20px;">
|
|
<!--card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center;border-radius: 10px 10px 0px 0px; ">
|
|
<div class="card-title">
|
|
<b>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;">TOP SALE REVENUE CUSTOMER</h3>
|
|
</b>
|
|
</div>
|
|
<div class="card-tools">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.top_sale_cust_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option value="this_month">This Month</option>
|
|
<option value="this_year">This Year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body"
|
|
style="height:400px;overflow: overlay;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="chart">
|
|
<table class="table table-striped"
|
|
t-if="state.top_sale_cust.length != 0">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr t-foreach="state.top_sale_cust"
|
|
t-as="revenue"
|
|
t-key="revenue.customer_id">
|
|
<td><t t-esc="revenue.customer"/> </td>
|
|
<td><t t-esc="revenue.total_amount"/> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div t-else="">
|
|
<h2>NO DATA AVAILABLE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- BANK AND CASH BALANCE -->
|
|
<div class="col-md-4">
|
|
<div class="card" style="margin-top:20px;height:521px;">
|
|
<!--card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center;border-radius: 10px 10px 0px 0px; ">
|
|
<div class="card-title">
|
|
<b>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;">BANK AND CASH BALANCE</h3>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body" style="overflow: overlay;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<table class="table table-striped"
|
|
t-if="state.balance">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr t-foreach="state.balance"
|
|
t-as="balance"
|
|
t-key="balance.id">
|
|
<td><t t-esc="balance.name.en_US"/> </td>
|
|
<td><t t-esc="balance.balance"/> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div t-else="">
|
|
<h2>NO DATA AVAILABLE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- AGED RECEIVABLE/PAYABLE -->
|
|
<div class="col-md-4">
|
|
<div class="card" style="margin-top:20px;">
|
|
<!--card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center; border-radius: 10px 10px 0px 0px; ">
|
|
<div class="card-title">
|
|
<b>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.aged_filter =='aged_receive'">AGED RECEIVABLE</h3>
|
|
<h3 class="custom-h3"
|
|
style="color:aqua;"
|
|
t-if="state.aged_filter =='aged_payable'">AGED PAYABLE</h3>
|
|
</b>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:auto;">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.aged_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option value="aged_receive">Aged Receivable</option>
|
|
<option value="aged_payable">Aged Payable</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-tools"
|
|
style="margin-left:5px;">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.aged_payable_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option value="this_month">This Month</option>
|
|
<option value="this_year">This Year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body" style="overflow: overlay;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="chart">
|
|
<canvas t-ref="AgedRecords"
|
|
width="400" height="303"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- TOP CUSTOMERS / VENDORS -->
|
|
<div class="col-md-4" style="margin-bottom:115px;">
|
|
<div class="card" style="margin-top:20px;height:521px;">
|
|
<!--card-header-->
|
|
<div class="card-header"
|
|
style=" padding: 17px 1.5rem !important;
|
|
background:linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
|
|
display: flex !IMPORTANT; justify-content: space-between;
|
|
align-items: center; border-radius: 10px 10px 0px 0px; ">
|
|
<h3 class="custom-h3 card-title"
|
|
style="color:aqua;">
|
|
TOP CUSTOMERS/VENDORS
|
|
</h3>
|
|
<div class="card-tools">
|
|
<select class="form-select"
|
|
style="color:#000000;"
|
|
t-model="state.top_filter"
|
|
t-on-change="onPeriodChange">
|
|
<option id="top_10_customer_this_month"
|
|
value="this_month">This Month</option>
|
|
<option value="this_year">This Year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!--card-body-->
|
|
<div class="card-body"
|
|
style="overflow: overlay;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="chart">
|
|
<h2>Customers </h2>
|
|
<table class="table table-striped" t-if="state.top.top_customers">
|
|
<tbody>
|
|
<tr t-foreach="state.top.top_customers"
|
|
t-as="customer"
|
|
t-key="customer.id">
|
|
<td><t t-esc="customer.name"/> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div t-else="">
|
|
<h2>NO DATA AVAILABLE</h2>
|
|
</div>
|
|
<h2>Vendors</h2>
|
|
<table class="table table-striped" t-if="state.top.top_vendors">
|
|
<tbody>
|
|
<tr t-foreach="state.top.top_vendors"
|
|
t-as="vendor"
|
|
t-key="vendor.id">
|
|
<td><t t-esc="vendor.name"/> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div t-else="">
|
|
<h2>NO DATA AVAILABLE</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</templates>
|
|
|