317 lines
18 KiB
HTML
317 lines
18 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load django_ledger %}
|
|
|
|
{% block content %}
|
|
<style id="apexcharts-css">
|
|
|
|
</style>
|
|
<div class="pb-6">
|
|
<div class="row align-items-center justify-content-between g-3 mb-6">
|
|
<div class="col-12 col-md-auto">
|
|
<h2 class="mb-0"></h2>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 mb-6">
|
|
<div class="row justify-content-between">
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 "><i class="fa-solid fa-landmark-dome fs-5 lh-1 text-primary"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Assets") }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0"><i class="fa-solid fa-weight-hanging fs-5 lh-1 text-primary"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Liabilities") }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0"><i class="fa-solid fa-scale-balanced fs-5 lh-1 text-primary"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Equity") }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0"><i class="fa-solid fs-5 lh-1 text-success fa-money-bill"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.role_balance.ASSET_CA_CASH | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Cash") }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<h2 class="mb-0"></h2>
|
|
</div>
|
|
|
|
<div class="px-3 mb-6">
|
|
<div class="row justify-content-between">
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 "><i class="fa-solid fa-coins fs-5 lh-1 text-primary"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Revenue") }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0"><i class="fa-solid fa-hand-holding-dollar fs-5 lh-1 text-danger"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sign | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Expenses") }}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0"><i class="fa-solid fa-sack-dollar fs-5 lh-1 text-primary"></i>
|
|
<h1 class="fs-5 pt-3"><span class="currency">{% currency_symbol %}</span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}</h1>
|
|
<p class="fs-9 mb-0">{{ _("Earnings (Loss)")}}</p>
|
|
</div>
|
|
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis pt-6 pb-3 border-y">
|
|
<div class="row gx-6">
|
|
<div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-5 mb-md-3 mb-lg-5 mb-xl-2 mb-xxl-3">
|
|
<div class="scrollbar">
|
|
<h3>{{ _("Net Receivables")}}</h3>
|
|
<p class="text-body-tertiary">{{ _("According to the sales data")}}.</p>
|
|
<div id="net_receivable_chart" class="echart-doughnut-rounded-chart-example" style="min-height:320px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-1 mb-sm-0">
|
|
|
|
<div class="row g-3 align-items-center">
|
|
|
|
<div class="col-sm-4 col-md-12 col-lg-8 col-xl-12 col-xxl-12 d-flex justify-content-end-xxl mt-0">
|
|
<div class="d-flex flex-1 justify-content-center d-sm-block d-md-flex d-lg-block d-xl-flex d-xxl-block gap-3">
|
|
|
|
<div class="mb-4 me-6 me-sm-0 me-md-6 me-lg-0 me-xl-6 me-xxl-0">
|
|
<h3 class="">{{ _("Financial Analysis")}}</h3>
|
|
<h4>{{ _("Solvency") }}:</h4>
|
|
<h5 class="progress-bar">{{ _("Current Ratio")}}: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
|
|
value="{{ tx_digest.ratios.current_ratio }}"
|
|
max="{% fin_ratio_max_value ratio='current_ratio' %}">
|
|
{{ tx_digest.ratios.current_ratio }}</progress></div>
|
|
<h5 class="progress-bar">{{ _("Quick Ratio")}}: {{ tx_digest.ratios.quick_ratio | currency_format }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
|
|
value="{{ tx_digest.ratios.quick_ratio }}"
|
|
max="{% fin_ratio_max_value ratio='quick_ratio' %}">
|
|
{{ tx_digest.ratios.current_ratio }}</progress></div>
|
|
|
|
<h4>{{ _("Leverage") }}:</h4>
|
|
<h5 class="progress-bar">{{ _("Debt to Equity")}}: {{ tx_digest.ratios.debt_to_equity | currency_format }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
|
|
value="{{ tx_digest.ratios.debt_to_equity }}"
|
|
max="{% fin_ratio_max_value ratio='debt_to_equity' %}">
|
|
{{ tx_digest.ratios.debt_to_equity }}</progress></div>
|
|
|
|
|
|
<h4>{{ _("Profitability") }}:</h4>
|
|
<h5 class="progress-bar">{{ _("Return on Equity")}}: {{ tx_digest.ratios.return_on_equity | percentage }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
|
|
value="{{ tx_digest.ratios.return_on_equity }}"
|
|
max="{% fin_ratio_max_value ratio='return_on_equity' %}">
|
|
{{ tx_digest.ratios.return_on_equity }}</progress></div>
|
|
|
|
<h5 class="progress-bar">{{ _("Return on Assets")}}: {{ tx_digest.ratios.return_on_assets | percentage }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
|
|
value="{{ tx_digest.ratios.return_on_assets }}"
|
|
max="{% fin_ratio_max_value ratio='return_on_assets' %}">{{ tx_digest.ratios.return_on_assets }}</progress></div>
|
|
|
|
<h5 class="progress-bar">{{ _("Net Profit Margin")}}: {{ tx_digest.ratios.net_profit_margin | percentage }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
|
|
value="{{ tx_digest.ratios.net_profit_margin }}"
|
|
max="{% fin_ratio_max_value ratio='net_profit_margin' %}">{{ tx_digest.ratios.net_profit_margin }}</progress></div>
|
|
|
|
<h5 class="progress-bar">{{ _("Gross Profit Margin")}}: {{ tx_digest.ratios.gross_profit_margin | percentage }} </h5>
|
|
<div class="progress" style="height:12px">
|
|
<progress
|
|
class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
|
|
value="{{ tx_digest.ratios.gross_profit_margin }}"
|
|
max="{% fin_ratio_max_value ratio='gross_profit_margin' %}">{{ tx_digest.ratios.gross_profit_margin }}</progress></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-6 gy-7 gx-6">
|
|
<div class="col-12 col-md-12">
|
|
<div class="row justify-content-between mb-4">
|
|
<div class="col-12">
|
|
<h3 id="dataContainer"></h3>
|
|
<div class="col-6 col-md-3">
|
|
<div class="">
|
|
<label class="form-label" for="datepicker">{{ _("Start Date")}}</label>
|
|
<input id="startDate" class="form-control datetimepicker flatpickr-input" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" type="date" placeholder="dd/mm/yyyy" data-options="{'disableMobile':true,'dateFormat';:'Y-m-d'}" readonly="readonly">
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="datepicker">{{ _("End Date")}}</label>
|
|
<input id="endDate" class="form-control datetimepicker flatpickr-input" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" type="date" placeholder="dd/mm/yyyy" data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}" readonly="readonly">
|
|
</div>
|
|
<button id="apply_filter" class="btn btn-primary mt-3" type="submit">{{ _("Apply") }}</button>
|
|
</div>
|
|
|
|
<div id="net_receivable_chart1" class="echart-doughnut-rounded-chart-example col-12" style="min-height:450px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script type="text/javascript">
|
|
let myChart;
|
|
let myChart1;
|
|
|
|
function use_chart(type, chart_id, title, labels, values, update = false) {
|
|
if (chart_id === 'net_receivable_chart') {
|
|
if (!myChart) {
|
|
myChart = echarts.init(document.getElementById(chart_id));
|
|
}
|
|
const { getColor, getData } = window.phoenix.utils;
|
|
var option = {
|
|
title: {
|
|
text: title
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data: ['Net Receivables']
|
|
},
|
|
xAxis: {
|
|
data: labels
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
type: type,
|
|
radius: ['40%', '70%'],
|
|
center: window.innerWidth < 530 ? ['65%', '55%'] : ['50%', '55%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: getColor('body-highlight-bg'),
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: values
|
|
}
|
|
]
|
|
};
|
|
if (update) {
|
|
myChart.setOption(option);
|
|
} else {
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
}
|
|
} else if (chart_id === 'net_receivable_chart1') {
|
|
if (!myChart1) {
|
|
myChart1 = echarts.init(document.getElementById(chart_id));
|
|
}
|
|
const { getColor, getData } = window.phoenix.utils;
|
|
var option = {
|
|
title: {
|
|
text: title
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data: ['Net Receivables']
|
|
},
|
|
xAxis: {
|
|
data: labels
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
type: type,
|
|
data: values
|
|
}
|
|
]
|
|
};
|
|
if (update) {
|
|
myChart1.setOption(option);
|
|
} else {
|
|
myChart.clear();
|
|
myChart1.setOption(option);
|
|
}
|
|
}
|
|
}
|
|
|
|
let data = []
|
|
const apply_filter = document.getElementById('apply_filter');
|
|
|
|
async function get_data(){
|
|
console.log('{{ request.user }}');
|
|
const response = await fetch("{% url 'entity-json-net-receivables' request.user.dealer.entity.slug %}");
|
|
data = await response.json();
|
|
console.log(data);
|
|
const keys = Object.keys(data.results.net_receivable_data);
|
|
const labels = keys;
|
|
const values = keys.map(key => data.results.net_receivable_data[key]);
|
|
use_chart('pie','net_receivable_chart','Net Receivables',labels,values)
|
|
}
|
|
|
|
async function fetchData() {
|
|
const start_date = document.getElementById('startDate').value;
|
|
const end_date = document.getElementById('endDate').value;
|
|
let url = ''
|
|
if(!start_date || !end_date){
|
|
url = "{% url 'entity-json-pnl' request.user.dealer.entity.slug %}";
|
|
}else{
|
|
url = `{% url 'entity-json-pnl' request.user.dealer.entity.slug %}?fromDate=${start_date}&toDate=${end_date}`;
|
|
}
|
|
try {
|
|
const response = await fetch(url);
|
|
|
|
const data = await response.json();
|
|
const months = Object.keys(data.results.pnl_data);
|
|
const labels = Object.keys(data.results.pnl_data[months[0]]);
|
|
const values = labels.map(label => data.results.pnl_data[months[0]][label]);
|
|
|
|
use_chart('bar','net_receivable_chart1','Net Receivables',labels,values,true);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
dataContainer.innerHTML = "<p>Error fetching data.</p>";
|
|
|
|
}
|
|
}
|
|
apply_filter.addEventListener('click', () => {
|
|
fetchData();
|
|
});
|
|
|
|
get_data()
|
|
fetchData()
|
|
|
|
|
|
|
|
var options = {
|
|
chart: {
|
|
type: 'line'
|
|
},
|
|
series: [{
|
|
name: 'sales',
|
|
data: [30,40,35,50,49,60,70,91,125]
|
|
}],
|
|
xaxis: {
|
|
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
|
|
}
|
|
}
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
|
|
chart.render();
|
|
</script>
|
|
{% endblock %} |