portfel_templates

{% extends 'base.html' %}
{% block content %}

<div class="container mt-5 py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="text-center mb-5">
                <h1 class="page-header">Главная страница</h2>
                <p class="lead text-muted">
                    Выберите дату для просмотра подробного отчета. Нажмите кнопку ниже, чтобы продолжить.
                </p>
            </div>

            <!-- Explanation Placeholder -->
            <div class="bg-light p-4 rounded-3 shadow-sm mb-5">
                <h4 class="fw-semibold text-dark mb-3">О сервисе</h4>
                <p class="text-muted">
                    Эта страница поможет вам проанализировать концентрацию кредитного портфеля по различным видам.
                </p>
            </div>

            <!-- Form Section -->
            <div class="card border-0 shadow-lg p-4 rounded-4">
                <div class="card-body">
                    <h4 class="fw-semibold text-center text-dark mb-4">Выбор даты отчета</h4>
                    <form action="" method="post" class="p-3">
                        {% csrf_token %}
                        <div class="mb-4">
                            {{ form.as_p }}
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5 py-2 fw-medium">
                                Просмотреть отчет
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Table Section -->
            {% if table %}
            <div class="mt-5">
                <h4 class="fw-semibold text-dark mb-4 text-center">Результаты отчета</h4>
                <div class="table-responsive">
                    {{ table|safe }}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Optional Custom CSS for Enhanced Styling -->
<style>
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    }
    .btn-primary {
        background-color: #0057D8;
        border-color: #0057D8;
        transition: background-color 0.3s ease;
    }
    .btn-primary:hover {
        background-color: #0041A3;
        border-color: #0041A3;
    }
    .form-control:focus {
        border-color: #0057D8;
        box-shadow: 0 0 0 0.2rem rgba(0, 87, 216, 0.25);
    }
</style>

{% endblock content %}

get

{% extends 'base.html' %}
{% block content %}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2 class="mb-4 text-primary text-center">This is Get Data Page</h2>
            <h1>This page will help you get the data for selected date. 
                Please wait!
            </h1>
        </div>
    </div>
</div>

{% endblock content %}

process

{% extends 'base.html' %}
{% block content %}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <h2 class="mb-4 text-primary">This is Process Page</h2>
            <p class="lead mb-4 text-muted">
                The data for {{ date_str }} has been processed. Would you like to see the results?
                {{ date_str }}
                Select a date to view the detailed report. Click the button below to proceed.
            </p>
            <li>
                <div>
            <a href="{% url 'portfel-get' %}" class="btn btn-primary btn-lg">
                Choose Date for Report
            </a>
        </div>

        </li>
        
            
        
        </div>
        <div>
            {% if table %}
            <p>{{ table|safe }}</p>
            {% endif %}
        </div>

    </div>
</div>

{% endblock content %}

result:

{% 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 %}
<a href="{% url 'portfel-home' %}" class="btn btn-primary">Home</a>
<main class="px-2 py-3"> 
    <div class="container-fluid">
        <!-- Header Section -->
        

        <!-- 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_branch|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_department|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_passport|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 %}