This commit is contained in:
Marwan Alwali 2025-02-02 18:23:00 +03:00
parent e3122a4a29
commit 6c328953e8
10 changed files with 69 additions and 271 deletions

View File

@ -75,10 +75,6 @@ from django.urls import reverse, reverse_lazy
from django.contrib import messages from django.contrib import messages
from django.db.models import Sum, F, Count from django.db.models import Sum, F, Count
from django.db import transaction from django.db import transaction
from two_factor.utils import default_device
from two_factor.views import OTPRequiredMixin
from .forms import VendorForm from .forms import VendorForm
from .services import ( from .services import (
decodevin, decodevin,

38
static/js/apexcharts.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,6 @@
data-bs-theme="" data-bs-theme=""
data-navigation-type="default" data-navigation-type="default"
data-navbar-horizontal-shape="default"> data-navbar-horizontal-shape="default">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -26,7 +25,7 @@
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}"> <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}"> <meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="{% static 'js/apexcharts.js' %}"></script>
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script> <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script> <script src="{% static 'js/config.js' %}"></script>
@ -60,19 +59,11 @@
<body> <body>
<main class="main" id="top"> <main class="main" id="top">
{% include 'header.html' %} {% include 'header.html' %}
<<<<<<< HEAD
<div class="content">
{% block period_navigation %}{% endblock period_navigation %}
{% block content %}{% endblock content%}
{% block body %}{% endblock body%}
{% include 'footer.html' %}
</div>
=======
<div class="content"> <div class="content">
{% block period_navigation %} {% block period_navigation %}{% endblock period_navigation %}
{% endblock period_navigation %}
{% block content %} {% block content %}
{% endblock content%} {% endblock content%}
@ -82,26 +73,11 @@
{% include 'footer.html' %} {% include 'footer.html' %}
</div> </div>
>>>>>>> a4433631fb8ac35fdea38581ddea53fbba7115e4
</main> </main>
{% block customJS %} {% block customJS %}
<script src="{% static 'django_ledger/bundle/djetler.bundle.js' %}"></script> <script src="{% static 'django_ledger/bundle/djetler.bundle.js' %}"></script>
<script>
{% if entity_slug %}
let entitySlug = "{{ view.kwargs.entity_slug }}"
{% endif %}
{% if from_date and to_date %}
let fromDate = "{{ from_date | date:'Y-m-d' }}";
let toDate = "{{ to_date | date:'Y-m-d' }}";
{% endif %}
{% if date_navigation_url %}
let dateNavigationUrl = "{{ date_navigation_url }}"
let datePickers = document.querySelectorAll("[id^='djl-datepicker']")
datePickers.forEach(dp => djLedger.getCalendar(dp.attributes.id.value, dateNavigationUrl))
{% endif %}
</script>
{% endblock %} {% endblock %}

View File

@ -4,7 +4,7 @@
{% load django_ledger %} {% load django_ledger %}
{% block content %} {% block content %}
<main class="main" id="top">
<div class="pb-6"> <div class="pb-6">
<div class="row align-items-center justify-content-between g-3 mb-6"> <div class="row align-items-center justify-content-between g-3 mb-6">
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
@ -15,19 +15,19 @@
<div class="row justify-content-between"> <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> <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> <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> <p class="fs-9 mb-0">{{ _("Assets") }}</p>
</div> </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> <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> <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> <p class="fs-9 mb-0">{{ _("Liabilities") }}</p>
</div> </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> <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> <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> <p class="fs-9 mb-0">{{ _("Equity") }}</p>
</div> </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> <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> <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> <p class="fs-9 mb-0">{{ _("Cash") }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -39,15 +39,15 @@
<div class="row justify-content-between"> <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> <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> <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> <p class="fs-9 mb-0">{{ _("Revenue") }}</p>
</div> </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> <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> <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> <p class="fs-9 mb-0">{{ _("Expenses") }}</p>
</div> </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> <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> <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> <p class="fs-9 mb-0">{{ _("Earnings (Loss)")}}</p>
</div> </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 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>
@ -56,8 +56,8 @@
<div class="row gx-6"> <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="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"> <div class="scrollbar">
<h3>Net Receivables</h3> <h3>{{ _("Net Receivables")}}</h3>
<p class="text-body-tertiary">According to the sales data.</p> <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 id="net_receivable_chart" class="echart-doughnut-rounded-chart-example" style="min-height:320px"></div>
</div> </div>
</div> </div>
@ -69,18 +69,16 @@
<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="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"> <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> <h3 class="">{{ _("Financial Analysis")}}</h3>
<h4>Solvency:</h4> <h4>{{ _("Solvency") }}:</h4>
<h5 class="progress-bar">Current <h5 class="progress-bar">{{ _("Current Ratio")}}: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
Ratio: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}" class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
value="{{ tx_digest.ratios.current_ratio }}" value="{{ tx_digest.ratios.current_ratio }}"
max="{% fin_ratio_max_value ratio='current_ratio' %}"> max="{% fin_ratio_max_value ratio='current_ratio' %}">
{{ tx_digest.ratios.current_ratio }}</progress></div> {{ tx_digest.ratios.current_ratio }}</progress></div>
<h5 class="progress-bar">Quick <h5 class="progress-bar">{{ _("Quick Ratio")}}: {{ tx_digest.ratios.quick_ratio | currency_format }} </h5>
Ratio: {{ tx_digest.ratios.quick_ratio | currency_format }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}" class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
@ -88,9 +86,8 @@
max="{% fin_ratio_max_value ratio='quick_ratio' %}"> max="{% fin_ratio_max_value ratio='quick_ratio' %}">
{{ tx_digest.ratios.current_ratio }}</progress></div> {{ tx_digest.ratios.current_ratio }}</progress></div>
<h4>Leverage:</h4> <h4>{{ _("Leverage") }}:</h4>
<h5 class="progress-bar">Debt to <h5 class="progress-bar">{{ _("Debt to Equity")}}: {{ tx_digest.ratios.debt_to_equity | currency_format }} </h5>
Equity: {{ tx_digest.ratios.debt_to_equity | currency_format }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}" class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
@ -99,9 +96,8 @@
{{ tx_digest.ratios.debt_to_equity }}</progress></div> {{ tx_digest.ratios.debt_to_equity }}</progress></div>
<h4>Profitability:</h4> <h4>{{ _("Profitability") }}:</h4>
<h5 class="progress-bar">Return on <h5 class="progress-bar">{{ _("Return on Equity")}}: {{ tx_digest.ratios.return_on_equity | percentage }} </h5>
Equity: {{ tx_digest.ratios.return_on_equity | percentage }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}" class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
@ -109,24 +105,21 @@
max="{% fin_ratio_max_value ratio='return_on_equity' %}"> max="{% fin_ratio_max_value ratio='return_on_equity' %}">
{{ tx_digest.ratios.return_on_equity }}</progress></div> {{ tx_digest.ratios.return_on_equity }}</progress></div>
<h5 class="progress-bar">Return on <h5 class="progress-bar">{{ _("Return on Assets")}}: {{ tx_digest.ratios.return_on_assets | percentage }} </h5>
Assets: {{ tx_digest.ratios.return_on_assets | percentage }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}" class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
value="{{ tx_digest.ratios.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> max="{% fin_ratio_max_value ratio='return_on_assets' %}">{{ tx_digest.ratios.return_on_assets }}</progress></div>
<h5 class="progress-bar">Net Profit <h5 class="progress-bar">{{ _("Net Profit Margin")}}: {{ tx_digest.ratios.net_profit_margin | percentage }} </h5>
Margin: {{ tx_digest.ratios.net_profit_margin | percentage }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}" class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
value="{{ tx_digest.ratios.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> max="{% fin_ratio_max_value ratio='net_profit_margin' %}">{{ tx_digest.ratios.net_profit_margin }}</progress></div>
<h5 class="progress-bar">Gross Profit <h5 class="progress-bar">{{ _("Gross Profit Margin")}}: {{ tx_digest.ratios.gross_profit_margin | percentage }} </h5>
Margin: {{ tx_digest.ratios.gross_profit_margin | percentage }} </h5>
<div class="progress" style="height:12px"> <div class="progress" style="height:12px">
<progress <progress
class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}" class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
@ -146,14 +139,14 @@
<h3></h3> <h3></h3>
<div class="col-6 col-md-3"> <div class="col-6 col-md-3">
<div class=""> <div class="">
<label class="form-label" for="datepicker">Start Date</label> <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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" readonly="readonly"> <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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" readonly="readonly">
</div> </div>
<div> <div>
<label class="form-label" for="datepicker">End Date</label> <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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" readonly="readonly"> <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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" readonly="readonly">
</div> </div>
<button id="apply_filter" class="btn btn-primary mt-3" type="submit">Apply</button> <button id="apply_filter" class="btn btn-primary mt-3" type="submit">{{ _("Apply") }}</button>
</div> </div>
<div id="net_receivable_chart1" class="echart-doughnut-rounded-chart-example col-12" style="min-height:450px"></div> <div id="net_receivable_chart1" class="echart-doughnut-rounded-chart-example col-12" style="min-height:450px"></div>
@ -165,219 +158,14 @@
</div> </div>
</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 &copy;<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>
<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 cant 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 well 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 %} {% endblock %}
{% block customJS %} {% 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">
<script type="text/javascript">
let myChart; let myChart;
let myChart1; let myChart1;