525 lines
32 KiB
HTML
525 lines
32 KiB
HTML
{% extends 'base.html' %}
|
||
{% load i18n %}
|
||
{% load static %}
|
||
{% load django_ledger %}
|
||
|
||
{% block content %}
|
||
<main class="main" id="top">
|
||
<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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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></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>
|
||
<footer class="footer position-absolute">
|
||
<div class="row g-0 justify-content-between align-items-center h-100">
|
||
<div class="col-12 col-sm-auto text-center">
|
||
<p class="mb-0 mt-2 mt-sm-0 text-body">Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 ©<a class="mx-1" href="https://themewagon.com">Themewagon</a></p>
|
||
</div>
|
||
<div class="col-12 col-sm-auto text-center">
|
||
<p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div class="modal fade" id="searchBoxModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true" data-phoenix-modal="data-phoenix-modal" style="--phoenix-backdrop-opacity: 1;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content mt-15 rounded-pill">
|
||
<div class="modal-body p-0">
|
||
<div class="search-box navbar-top-search-box" data-list='{"valueNames":["title"]}' style="width: auto;">
|
||
<form class="position-relative" data-bs-toggle="search" data-bs-display="static">
|
||
<input class="form-control search-input fuzzy-search rounded-pill form-control-lg" type="search" placeholder="Search..." aria-label="Search" />
|
||
<span class="fas fa-search search-box-icon"></span>
|
||
|
||
</form>
|
||
<div class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none" data-bs-dismiss="search">
|
||
<button class="btn btn-link p-0" aria-label="Close"></button>
|
||
</div>
|
||
<div class="dropdown-menu border start-0 py-0 overflow-hidden w-100">
|
||
<div class="scrollbar-overlay" style="max-height: 30rem;">
|
||
<div class="list pb-3">
|
||
<h6 class="dropdown-header text-body-highlight fs-10 py-2">24 <span class="text-body-quaternary">results</span></h6>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Recently Searched </h6>
|
||
<div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"><span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> Store Macbook</div>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> MacBook Air - 13″</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Products</h6>
|
||
<div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="file-thumbnail me-2"><img class="h-100 w-100 object-fit-cover rounded-3" src="../../assets/img/products/60x60/3.png" alt="" /></div>
|
||
<div class="flex-1">
|
||
<h6 class="mb-0 text-body-highlight title">MacBook Air - 13″</h6>
|
||
<p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">8GB Memory - 1.6GHz - 128GB Storage</span></p>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="file-thumbnail me-2"><img class="img-fluid" src="../../assets/img/products/60x60/3.png" alt="" /></div>
|
||
<div class="flex-1">
|
||
<h6 class="mb-0 text-body-highlight title">MacBook Pro - 13″</h6>
|
||
<p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">30 Sep at 12:30 PM</span></p>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Quick Links</h6>
|
||
<div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"><span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Support MacBook House</div>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Files</h6>
|
||
<div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"><span class="fa-solid fa-file-zipper text-body" data-fa-transform="shrink-2"></span> Library MacBook folder.rar</div>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-file-lines text-body" data-fa-transform="shrink-2"></span> Feature MacBook extensions.txt</div>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-image text-body" data-fa-transform="shrink-2"></span> MacBook Pro_13.jpg</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Members</h6>
|
||
<div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
|
||
<div class="avatar avatar-l status-online me-2 text-body">
|
||
<img class="rounded-circle " src="../../assets/img/team/40x40/10.webp" alt="" />
|
||
|
||
</div>
|
||
<div class="flex-1">
|
||
<h6 class="mb-0 text-body-highlight title">Carry Anna</h6>
|
||
<p class="fs-10 mb-0 d-flex text-body-tertiary">anna@technext.it</p>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
|
||
<div class="avatar avatar-l me-2 text-body">
|
||
<img class="rounded-circle " src="../../assets/img/team/40x40/12.webp" alt="" />
|
||
|
||
</div>
|
||
<div class="flex-1">
|
||
<h6 class="mb-0 text-body-highlight title">John Smith</h6>
|
||
<p class="fs-10 mb-0 d-flex text-body-tertiary">smith@technext.it</p>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
<hr class="my-0" />
|
||
<h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Related Searches</h6>
|
||
<div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"><span class="fa-brands fa-firefox-browser text-body" data-fa-transform="shrink-2"></span> Search in the Web MacBook</div>
|
||
</div>
|
||
</a>
|
||
<a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
|
||
<div class="d-flex align-items-center">
|
||
|
||
<div class="fw-normal text-body-highlight title"> <span class="fa-brands fa-chrome text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="fallback fw-bold fs-7 d-none">No Result Found.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
|
||
var navbarTop = document.querySelector('.navbar-top');
|
||
if (navbarTopStyle === 'darker') {
|
||
navbarTop.setAttribute('data-navbar-appearance', 'darker');
|
||
}
|
||
|
||
var navbarVerticalStyle = window.config.config.phoenixNavbarVerticalStyle;
|
||
var navbarVertical = document.querySelector('.navbar-vertical');
|
||
if (navbarVertical && navbarVerticalStyle === 'darker') {
|
||
navbarVertical.setAttribute('data-navbar-appearance', 'darker');
|
||
}
|
||
</script>
|
||
<div class="support-chat-container">
|
||
<div class="container-fluid support-chat">
|
||
<div class="card bg-body-emphasis">
|
||
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
|
||
<h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
|
||
<div class="btn-reveal-trigger">
|
||
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
|
||
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body chat p-0">
|
||
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
|
||
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a>
|
||
</div>
|
||
<div class="text-center mt-auto">
|
||
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../assets/img/team/30.webp" alt="" /></div>
|
||
<h5 class="mt-2 mb-3">Eric</h5>
|
||
<p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
|
||
<div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
|
||
<input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
|
||
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
|
||
<input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
|
||
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
|
||
<input class="d-none" type="file" id="supportChatAttachment" />
|
||
</div>
|
||
<button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
|
||
</main>
|
||
{% endblock %}
|
||
|
||
{% block customJS %}
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js" integrity="sha512-XSmbX3mhrD2ix5fXPTRQb2FwK22sRMVQTpBP2ac8hX7Dh/605hA2QDegVWiAvZPiXIxOV0CbkmUjGionDpbCmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<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(){
|
||
const response = await fetch("{% url 'entity-json-net-receivables' request.user.dealer.entity.slug %}");
|
||
data = await response.json();
|
||
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 %} |