portfel_results.html

{% extends "base.html" %}
{% load static %}
{% load humanize %}
{% load currency_filters %} 

{% block extra_css %}
<link href="{% static 'css/dashboard.css' %}" rel = "stylesheet">
{% endblock extra_css %}
{% block content %}

{% if user.is_authenticated %}
<main class="px-2 py-3"> 
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row g-4 mb-4">
            
                <div class="d-flex flex-row gap-2">
                    
                    <a href="{% url 'home-all' %}" class="btn btn-outline-secondary btn-alfa">Все</a>
                    <a href="{% url 'home-kk' %}" class="btn btn-outline-secondary btn-alfa">Корпоративный</a>
                    <a href="{% url 'home-rk' %}" class="btn btn-outline-secondary btn-alfa">Розничный</a>
                    <a href="{% url 'home-mk' %}" class="btn btn-outline-secondary btn-alfa">Малый</a>
                    <a href="{% url 'download-excel-summary' %}" class="btn btn-warning  btn-download ms-3" data-bs-toggle="tooltip" 
                    data-bs-placement="top" 
                    title="Скачать сводную таблицу в формате excel.">
                        <i class="fa-solid fa-file-arrow-down"></i> Скачать
                    </a>
                </div>
                <h1 class="page-header">Кредитный портфель за {{ df_name }}</h1>
            </div>
        
        

        <!-- Total Value Card -->
        <div class="row g-4 mb-4">
           
            <div class="col-xl-2 col-md-6">
                <a href="#" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body-1 gradient-total position-relative">
                        <div class="stat-label fw-bold text-uppercase">КП ⇛ Женщина</div>
                        <div class="stat-value mt-2 fw-bold">
                            {{ female_lp|format_currency }}
                        </div>
                        <div class="overdue-info-1 mt-3 d-flex align-items-center flex-wrap" style="max-width: 97%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;" >
                                {{female_npl|format_currency}}➜{{ female_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-person-dress fa text-warning"></i>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            
            <div class="col-xl-2 col-md-6">
                <a href="#" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body-1 gradient-total position-relative">
                        <div class="stat-label fw-bold text-uppercase">КП ⇛ Мужчина</div>
                        <div class="stat-value mt-2 fw-bold">
                            {{ male_lp|format_currency }}
                        </div>
                        <div class="overdue-info-1 mt-3 d-flex align-items-center flex-wrap" style="max-width: 97%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{male_npl|format_currency}}➜{{ male_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-person fa text-warning"></i>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            <div class="col-xl-4 col-md-6">
                <a href="{% url 'home-all' %}" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body-1 gradient-total position-relative">
                        <div class="stat-label-1 fw-bold text-uppercase">Кредитный Портфель (Все)</div>
                        <div class="stat-value mt-2 fw-bold">
                            Портфель: {{ lp_total|format_currency }}
                        </div>
                        <div class="overdue-info mt-3 d-flex align-items-center flex-wrap" style="max-width: 97%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{npl_total|format_currency}}➜{{ npl_total_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-landmark fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            <div class="col-xl-2 col-md-6">
                <a href="{% url 'currency_home' currency='local' dept='all' %}" class="text-decoration-none d-block">
                
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body-1 gradient-total position-relative">
                        <div class="stat-label fw-bold text-uppercase">КП ⇛ Нац. Валюта</div>
                        <div class="stat-value mt-2 fw-bold">
                            {{ national_lp|format_currency }}
                            <span class="value-percentage fw-bold" style="font-size: 0.6em; color: #f8d7a1; margin-left: 5px;"
                      data-bs-toggle="tooltip" 
                      data-bs-placement="top" 
                      title="Средняя процентная ставка по кредитам, выданным в узбекских сумах.">
                    {{ local_interest_rate|floatformat:1 }}%
                </span>
                        </div>
                        <div class="overdue-info-1 mt-3 d-flex align-items-center flex-wrap" style="max-width: 97%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{national_npl|format_currency}}➜ {{ national_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            
                            <i class="fas fa-coins fa text-warning"></i>
                            
                        </div>
                    </div>
                </div>
            </a>
            </div>
            <div class="col-xl-2 col-md-6">
                <a href="{% url 'currency_home' currency='global' dept='all' %}" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body-1 gradient-total position-relative">
                        <div class="stat-label fw-bold text-uppercase">КП ⇛ Иноц. Валюта</div>
                        <div class="stat-value mt-2 fw-bold">
                            {{ foreign_lp|format_currency }}
                            <span class="value-percentage fw-bold" style="font-size: 0.6em; color: #f8d7a1; margin-left: 5px;"
                      data-bs-toggle="tooltip" 
                      data-bs-placement="top" 
                      title="Средняя процентная ставка по кредитам, выданным в иностранной валюте.">
                    {{ global_interest_rate|floatformat:0 }}%
                </span>
                        </div>
                        <div class="overdue-info-1 mt-3 d-flex align-items-center flex-wrap" style="max-width: 97%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{foreign_npl|format_currency}}➜{{ foreign_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-dollar-sign fa text-warning"></i>
                            
                        </div>
                    </div>
                </div>
            </a>
            </div>
        </div>
<hr>
<h3 class="page-header">Кредитный Портфель по Департаментам</h3>
        <!-- Stats Cards Row -->
        <div class="row g-4 mb-4">
            <!-- Corporate Department Card -->
            <div class="col-xl-4 col-md-6">
                <a href="{% url 'home-kk' %}" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body gradient-corporate position-relative">
                        <div class="stat-label fw-bold text-uppercase">Корпоративное Кредитование</div>
                        <div class="stat-value mt-2 fw-bold">
                            Портфель: {{ lp_kk|format_currency }}
                        </div>
                        <div class="overdue-info mt-3 d-flex align-items-center flex-wrap" style="max-width: 92%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{npl_kk|format_currency}}➜{{ lp_kk_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-briefcase fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </a>

            </div>
            <div class="col-xl-4 col-md-6">
                <a href="{% url 'home-rk' %}" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body gradient-medium position-relative">
                        <div class="stat-label fw-bold text-uppercase">Розничное Кредитование</div>
                        <div class="stat-value mt-2 fw-bold">
                            Портфель: {{ lp_rk|format_currency }}
                        </div>
                        <div class="overdue-info mt-3 d-flex align-items-center flex-wrap" style="max-width: 92%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{npl_rk|format_currency}}➜{{ lp_rk_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-credit-card fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            <div class="col-xl-4 col-md-6">
                <a href="{% url 'home-mk' %}" class="text-decoration-none d-block">
                <div class="card stat-card h-100 shadow-sm">
                    <div class="card-body gradient-small position-relative">
                        <div class="stat-label fw-bold text-uppercase">Малое Кредитование</div>
                        <div class="stat-value mt-2 fw-bold">
                            Портфель: {{ lp_mk|format_currency }}
                        </div>
                        <div class="overdue-info mt-3 d-flex align-items-center flex-wrap" style="max-width: 92%;">
                            <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                            <span class="fw-medium">NPL: </span>
                            <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                                {{npl_mk|format_currency}}➜{{ lp_mk_percent|floatformat:1 }}%
                            </span>
                        </div>
                        <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                            <i class="fas fa-store fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
                </a>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="row g-4 mb-4">
            <!-- KK Chart -->
            <div class="col-xl-4">
                <div class="card chart-card h-100">
                    <div class="card-header">
                        <i class="fas fa-chart-bar me-2 text-primary"></i>
                        Корпоративные кредиты по филиалам
                    </div>
                    <div class="chart-container">
                        {{ chart_kk|safe }}
                    </div>
                </div>
            </div>

            <!-- RK Chart -->
            <div class="col-xl-4">
                <div class="card chart-card h-100">
                    <div class="card-header">
                        <i class="fas fa-chart-bar me-2 text-primary"></i>
                        Розничные кредиты по филиалам
                    </div>
                    <div class="chart-container">
                        {{ chart_rk|safe }}
                    </div>
                </div>
            </div>

            <!-- MK Chart -->
            <div class="col-xl-4">
                <div class="card chart-card h-100">
                    <div class="card-header">
                        <i class="fas fa-chart-bar me-2 text-primary"></i>
                        Малые кредиты по филиалам
                    </div>
                    <div class="chart-container">
                        {{ chart_mk|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% else %}
<main class="bg-light d-flex align-items-center justify-content-center vh-100">
    <div class="card text-center shadow-lg p-4 border-0" style="max-width: 400px;">
        <div class="card-body">
            <i class="fas fa-lock fa-4x text-danger mb-3"></i>
            <h3 class="card-title">Доступ ограничен</h3>
            <p class="card-text text-muted">Чтобы выполнить это действие, необходимо войти в систему.</p>
            <a href="{% url 'login' %}" class="btn btn-warning">
                <i class="fas fa-sign-in-alt"></i> Войти
            </a>
        </div>
    </div>
</main>
{% endif %}
<script>
    // Initialize all tooltips on the page
document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
        new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock content %}