app/templates/base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title if title else "Comparison Software" }}</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/lcepl.png') }}">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" >

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@1.1.2/dist/css/bootstrap-multiselect.min.css">
</head>

<body class="bg-light">

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm fixed-top">

        <div class="container-fluid">

            <!-- Brand -->
            <a class="navbar-brand fw-bold" href="/">
                <i class="bi bi-buildings me-1"></i> LCEPL
            </a>

            <!-- Mobile toggle -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Menu -->
            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav ms-auto align-items-lg-center">

                    <!-- Dashboard -->
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="bi bi-speedometer2 me-1"></i> Dashboard
                        </a>
                    </li>

                    <!-- Subcontractor Model -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                            <i class="bi bi-people-fill me-1"></i> Subcontractor List
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li>
                                <a class="dropdown-item" href="/subcontractor/add">
                                    <i class="bi bi-plus-circle me-2"></i> New Add
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/subcontractor/list">
                                    <i class="bi bi-list-ul me-2"></i> List
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Subcontractor File System -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                            <i class="bi bi-folder-fill me-1"></i>Subcontractor RA Bills
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li>
                                <a class="dropdown-item" href="/dashboard/subcontractor_dashboard">
                                    <i class="bi bi-speedometer2 me-2"></i> Subcontractor Dashboard
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item" href="/file/import_Subcontractor">
                                    <i class="bi bi-upload me-2"></i> Import File
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/file/Subcontractor_report">
                                    <i class="bi bi-arrow-left-right me-2"></i> Show Reports
                                </a>
                            </li>

                        </ul>
                    </li>

                    <!-- Client System -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                            <i class="bi bi-building me-1"></i> Client RA Bills
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li>
                                <a class="dropdown-item" href="/file/import_client">
                                    <i class="bi bi-upload me-2"></i> Import Client File
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item" href="/file/client_report">
                                    <i class="bi bi-arrow-left-right me-2"></i> Show Report
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Reports -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                            <i class="bi bi-building me-1"></i> Comparison Report
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">

                            <li>
                                <a class="dropdown-item" href="/report/comparison_report">
                                    <i class="bi bi-arrow-left-right me-2"></i> Client vs Subcontractor
                                </a>
                            </li>
                            
                        </ul>
                    </li>

                    <!-- Masters -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="/engi">
                            <i class="bi bi-gear me-2"></i> Masters
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <!-- Client Standard Rates -->
                            <li class="nav-item">
                                <a class="nav-link" href="/engi/subcontractor-rate">
                                    <i class="bi bi-file-earmark-text me-1"></i> Rate Master
                                </a>
                            </li>

                            <!-- Client Standard Rates -->
                            <li class="nav-item">
                                <a class="nav-link" href="/engi/client-rate">
                                    <i class="bi bi-file-earmark-text me-1"></i> Client Standard Rates
                                </a>
                            </li>

                            <!-- Formats -->
                            <li class="nav-item">
                                <a class="nav-link" href="/file_format">
                                    <i class="bi bi-file-earmark-text me-1"></i> Formats
                                </a>
                            </li>
                            
                        </ul>
                    </li>


                    <!-- USER DROPDOWN -->   
                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle d-flex align-items-center text-white"
                            href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                            <i class="bi bi-person-circle fs-4"></i>
                            <span class="ms-2 fw-semibold">
                                {{ session.get("user_name") }}
                            </span>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark border-0 shadow-lg bg-dark p-0"
                            style="width:320px;">

                            <!-- Profile Header -->
                            <li class="text-center py-4 border-bottom border-secondary">
                                <i class="bi bi-person-circle text-light" style="font-size:60px;"></i>
                                <h5 class="mt-2 mb-0 fw-bold">
                                    {{ session.get("user_name") }}
                                </h5>
                                <small class="text-secondary">
                                    {{ session.get("email") }}
                                </small>
                            </li>

                            <!-- Dashboard -->
                            <li>
                                <a class="dropdown-item text-light py-2" href="{{ url_for('dashboard.dashboard') }}">
                                    <i class="bi bi-speedometer2 me-2"></i> Dashboard
                                </a>
                            </li>

                            <!-- Activity Log page -->
                            <li>
                                <a class="dropdown-item text-light py-2" href="{{ url_for('activity.activity') }}">
                                    <i class="bi bi-clock-history me-2"></i> Activity Log
                                </a>
                            </li>

                            <!--  Manage Account -->
                            <li>
                                <a class="dropdown-item py-2" href="#">
                                    <i class="bi bi-gear me-2"></i> Manage Account
                                </a>
                            </li>
                            
                            <li><hr class="dropdown-divider border-secondary m-0"></li>

                            <!--  Logout Account -->
                            <li>
                                <a class="dropdown-item text-warning py-2" href="{{ url_for('auth.logout') }}">
                                    <i class="bi bi-box-arrow-right me-2"></i>
                                    Logout
                                </a>
                            </li>

                            <!-- Footer -->
                            <li class="text-center py-3 bg-secondary bg-opacity-10 border-top border-secondary">
                                <small class="text-light">
                                    <i class="bi bi-shield-check text-success"></i>
                                    Secured by <strong>LCEPL</strong>
                                </small>
                            </li>

                        </ul>

                    </li>

                </ul>
            </div>
        </div>
    </nav>


    <!-- PAGE CONTENT -->
    <div class="container-fluid vh-100 pt-5 overflow-hidden">
        <!-- FLASH MESSAGES -->
        <div class="position-fixed top-0 end-0 p-2 p-md-3 mt-5" style="z-index:1080; width:min(95vw,500px);">

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}

            <div class="alert alert-{{ category }} alert-dismissible fade show shadow notification-alert mb-2"
                role="alert">

                <div class="d-flex align-items-start flex-wrap">

                    {% if category == 'success' %}
                        <i class="bi bi-check-circle-fill me-2 fs-5 flex-shrink-0"></i>
                    {% elif category == 'danger' %}
                        <i class="bi bi-x-circle-fill me-2 fs-5 flex-shrink-0"></i>
                    {% elif category == 'warning' %}
                        <i class="bi bi-exclamation-triangle-fill me-2 fs-5 flex-shrink-0"></i>
                    {% elif category == 'info' %}
                        <i class="bi bi-info-circle-fill me-2 fs-5 flex-shrink-0"></i>
                    {% endif %}

                    <div class="flex-grow-1">

                        <div class="fw-semibold">
                            {% if category == 'success' %}
                                Success
                            {% elif category == 'danger' %}
                                Error
                            {% elif category == 'warning' %}
                                Warning
                            {% elif category == 'info' %}
                                Information
                            {% endif %}
                        </div>

                        <div>
                            {{ message }}
                        </div>

                        <!-- Timeline -->
                        <div class="progress mt-2" style="height:5px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated timer-bar" role="progressbar" style="width:100%">
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="alert">
                </button>

            </div>

            {% endfor %}
            {% endif %}
            {% endwith %}

        </div>

        <div class="overflow-auto h-100">
            <div class="container mt-4">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- Global Loading Overlay -->
    <div id="globalLoader"
        class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 d-none"
        style="z-index:9999;">

        <div class="d-flex justify-content-center align-items-center h-100">
            <div class="card shadow-lg border-0 rounded-4" style="width:430px;">
                <div class="card-body text-center p-5">

                    <div class="spinner-border text-primary" style="width:70px;height:70px;"role="status">
                    </div>
                    <h4 class="fw-bold mt-4 mb-2">Please Wait...</h4>
                    <p id="loaderMessage" class="text-muted mb-4">Processing your request...</p>

                    <div class="progress" style="height:8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                            style="width:100%">
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@1.1.2/dist/js/bootstrap-multiselect.min.js"></script>

    <script>
        // show  alert msg
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".notification-alert").forEach(function(alert){
                const progressBar = alert.querySelector(".timer-bar");
                let width = 100;
                const interval = setInterval(function() {
                    width -= 2;
                    progressBar.style.width = width + "%";
                    if(width <= 0){
                        clearInterval(interval);
                        const bsAlert = bootstrap.Alert.getOrCreateInstance(alert);
                        bsAlert.close();
                    }
                }, 100);
            });
        });

        // show  msg Processing your request
        function showLoader(message = "Processing your request...") {
            document.getElementById("loaderMessage").innerHTML = message;
            document.getElementById("globalLoader").classList.remove("d-none");
        }

        // Automatically hide
        function hideLoader(){
            document.getElementById("globalLoader").classList.add("d-none");
        }

        // Automatically apply to all forms having class="loading-form"
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".loading-form").forEach(function(form){
                form.addEventListener("submit", function(){
                    if(!this.checkValidity())
                        return;

                    showLoader();
                    const btn = this.querySelector("button[type='submit']");

                    if(btn){
                        btn.disabled = true;
                        btn.innerHTML = `
                            <span class="spinner-border spinner-border-sm me-2"></span>
                            Processing...
                        `;
                    }

                });
            });
        });

    </script>


</body>

</html>