feat: melhorias na interface e estrutura do frontend

app.py

@@ -48,6 +48,7 @@ from werkzeug.security import generate_password_hash, check_password_hash
 from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
 import random
 import string
+from sqlalchemy.sql import func
 
 load_dotenv()
 
@@ -235,44 +236,48 @@ def logout():
 @app.route("/home")
 @require_login
 def home():
-    """Página inicial"""
+    """Página inicial do sistema com dashboard"""
-    links = []
+    try:
-    
+        # Buscar totais
-    # Links básicos para todos os usuários
+        total_militantes = db_session.query(Militante).count()
-    links.append({
+        total_cotas = db_session.query(func.sum(CotaMensal.valor_novo)).scalar() or 0
-        'text': 'Alterar Senha',
+        total_materiais = db_session.query(MaterialVendido).count()
-        'url': url_for('alterar_senha')
+        total_assinaturas = db_session.query(AssinaturaAnual).filter(
-    })
+            AssinaturaAnual.data_fim >= datetime.now()
-    
+        ).count()
-    # Links específicos baseados em permissões
+        
-    if current_user.has_permission('view_cell_data'):
+        # Buscar últimos militantes cadastrados
-        links.append({
+        ultimos_militantes = db_session.query(Militante)\
-            'text': 'Militantes',
+            .order_by(Militante.id.desc())\
-            'url': url_for('listar_militantes')
+            .limit(5)\
-        })
+            .all()
-    
+            
-    if current_user.has_permission('view_cell_reports'):
+        # Buscar últimos pagamentos
-        links.append({
+        ultimos_pagamentos = db_session.query(Pagamento)\
-            'text': 'Pagamentos',
+            .join(Militante)\
-            'url': url_for('listar_pagamentos')
+            .order_by(Pagamento.data_pagamento.desc())\
-        })
+            .limit(5)\
-        links.append({
+            .all()
-            'text': 'Materiais',
+        
-            'url': url_for('listar_materiais')
+        return render_template('home.html',
-        })
+                             total_militantes=total_militantes,
-        links.append({
+                             total_cotas="{:.2f}".format(total_cotas),
-            'text': 'Vendas',
+                             total_materiais=total_materiais,
-            'url': url_for('listar_relatorios_vendas')
+                             total_assinaturas=total_assinaturas,
-        })
+                             ultimos_militantes=ultimos_militantes,
-    
+                             ultimos_pagamentos=ultimos_pagamentos)
-    # Links para admin
+    except Exception as e:
-    if current_user.is_admin:
+        print(f"Erro na página inicial: {e}")
-        links.append({
+        import traceback
-            'text': 'Dashboard Admin',
+        traceback.print_exc()
-            'url': url_for('dashboard_admin')
+        flash('Erro ao carregar a página inicial', 'error')
-        })
+        return render_template('home.html',
-    
+                             total_militantes=0,
-    return render_template('home.html', links=links)
+                             total_cotas="0.00",
+                             total_materiais=0,
+                             total_assinaturas=0,
+                             ultimos_militantes=[],
+                             ultimos_pagamentos=[])
 
 # Rota para criar um novo militante
 @app.route('/militantes/criar', methods=['GET', 'POST'])
@@ -354,36 +359,44 @@ def criar_militante():
 @require_login
 @require_permission(Permission.VIEW_CELL_DATA)
 def listar_militantes():
-    """Lista todos os militantes"""
-    db = get_db_connection()
     try:
-        # Adicionar opção de filtro por estado
+        militantes = db_session.query(Militante).order_by(Militante.nome).all()
-        estado = request.args.get('estado', 'todos')
+        return render_template("listar_militantes.html", militantes=militantes)
+    except Exception as e:
+        print(f"Erro ao listar militantes: {e}")
+        flash('Erro ao carregar a lista de militantes', 'error')
+        return render_template("listar_militantes.html", militantes=[])
+
+@app.route("/militantes/excluir/<int:id>", methods=["POST"])
+@login_required
+@session_timeout
+def excluir_militante(id):
+    try:
+        militante = db_session.query(Militante).get(id)
+        if not militante:
+            flash('Militante não encontrado.', 'error')
+            return redirect(url_for('listar_militantes'))
         
-        query = db.query(Militante)
+        # Verificar se existem registros relacionados
-        if estado != 'todos':
+        tem_cotas = db_session.query(CotaMensal).filter_by(militante_id=id).first() is not None
-            query = query.filter(Militante.estado == estado)
+        tem_pagamentos = db_session.query(Pagamento).filter_by(militante_id=id).first() is not None
+        tem_materiais = db_session.query(MaterialVendido).filter_by(militante_id=id).first() is not None
+        tem_vendas = db_session.query(VendaJornalAvulso).filter_by(militante_id=id).first() is not None
+        tem_assinaturas = db_session.query(AssinaturaAnual).filter_by(militante_id=id).first() is not None
         
-        militantes = query.all()
+        if any([tem_cotas, tem_pagamentos, tem_materiais, tem_vendas, tem_assinaturas]):
+            flash('Não é possível excluir o militante pois existem registros relacionados.', 'error')
+            return redirect(url_for('listar_militantes'))
         
-        # Precomputar todas as responsabilidades antes de renderizar
+        db_session.delete(militante)
-        for militante in militantes:
+        db_session.commit()
-            militante.is_responsavel_financas = bool(militante.responsabilidades & Militante.RESPONSAVEL_FINANCAS)
+        flash('Militante excluído com sucesso!', 'success')
-            militante.is_responsavel_imprensa = bool(militante.responsabilidades & Militante.RESPONSAVEL_IMPRENSA)
+    except Exception as e:
-            militante.is_quadro_orientador = bool(militante.responsabilidades & Militante.QUADRO_ORIENTADOR)
+        print(f"Erro ao excluir militante: {e}")
-        
+        db_session.rollback()
-        return render_template(
+        flash('Erro ao excluir militante.', 'error')
-            "listar_militantes.html",
+    
-            militantes=militantes,
+    return redirect(url_for('listar_militantes'))
-            estado_atual=estado,
-            estados=[
-                ('todos', 'Todos'),
-                (EstadoMilitante.ATIVO.value, 'Ativos'),
-                (EstadoMilitante.DESLIGADO.value, 'Desligados')
-            ]
-        )
-    finally:
-        db.close()
 
 # Rota para criar uma nova cota mensal
 @app.route("/cotas/novo", methods=["GET", "POST"])

static/css/style.css

@@ -0,0 +1,113 @@
+:root {
+    --primary-color: #1a237e;
+    --secondary-color: #0d47a1;
+    --accent-color: #2962ff;
+    --background-color: #f5f5f5;
+    --text-color: #212121;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.navbar {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.navbar-brand {
+    font-weight: 600;
+    font-size: 1.4rem;
+}
+
+.nav-link {
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.nav-link:hover {
+    color: #fff !important;
+    transform: translateY(-2px);
+}
+
+.card {
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    transition: transform 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+}
+
+.btn-primary {
+    background-color: var(--accent-color);
+    border: none;
+    padding: 0.5rem 1.5rem;
+    border-radius: 5px;
+    font-weight: 500;
+}
+
+.btn-primary:hover {
+    background-color: var(--secondary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.table {
+    background: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.table thead th {
+    background-color: var(--primary-color);
+    color: white;
+    font-weight: 500;
+    border: none;
+}
+
+.form-control {
+    border-radius: 5px;
+    border: 1px solid #e0e0e0;
+    padding: 0.75rem;
+}
+
+.form-control:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 0.2rem rgba(41, 98, 255, 0.25);
+}
+
+.alert {
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+/* Animações para feedback */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.alert {
+    animation: fadeIn 0.3s ease;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .navbar-brand {
+        font-size: 1.2rem;
+    }
+    
+    .container {
+        padding: 1rem;
+    }
+    
+    .card {
+        margin-bottom: 1rem;
+    }
+} 

static/js/forms.js

@@ -0,0 +1,146 @@
+// Validação de CPF
+function validarCPF(cpf) {
+    cpf = cpf.replace(/[^\d]/g, '');
+    
+    if (cpf.length !== 11) return false;
+    
+    // Verifica se todos os dígitos são iguais
+    if (/^(\d)\1{10}$/.test(cpf)) return false;
+    
+    // Validação do primeiro dígito verificador
+    let soma = 0;
+    for (let i = 0; i < 9; i++) {
+        soma += parseInt(cpf.charAt(i)) * (10 - i);
+    }
+    let resto = 11 - (soma % 11);
+    let dv1 = resto > 9 ? 0 : resto;
+    
+    if (dv1 !== parseInt(cpf.charAt(9))) return false;
+    
+    // Validação do segundo dígito verificador
+    soma = 0;
+    for (let i = 0; i < 10; i++) {
+        soma += parseInt(cpf.charAt(i)) * (11 - i);
+    }
+    resto = 11 - (soma % 11);
+    let dv2 = resto > 9 ? 0 : resto;
+    
+    if (dv2 !== parseInt(cpf.charAt(10))) return false;
+    
+    return true;
+}
+
+// Validação de email
+function validarEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+
+// Validação de telefone
+function validarTelefone(telefone) {
+    telefone = telefone.replace(/[^\d]/g, '');
+    return telefone.length >= 10 && telefone.length <= 11;
+}
+
+// Inicialização dos formulários
+document.addEventListener('DOMContentLoaded', function() {
+    // Validação personalizada para CPF
+    const cpfInputs = document.querySelectorAll('input[name="cpf"]');
+    cpfInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const cpf = this.value;
+            if (!validarCPF(cpf)) {
+                this.setCustomValidity('CPF inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação personalizada para email
+    const emailInputs = document.querySelectorAll('input[type="email"]');
+    emailInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const email = this.value;
+            if (!validarEmail(email)) {
+                this.setCustomValidity('Email inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação personalizada para telefone
+    const phoneInputs = document.querySelectorAll('input[name="telefone"]');
+    phoneInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const telefone = this.value;
+            if (!validarTelefone(telefone)) {
+                this.setCustomValidity('Telefone inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação de campos monetários
+    const moneyInputs = document.querySelectorAll('input[type="number"][step="0.01"]');
+    moneyInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const value = parseFloat(this.value);
+            if (isNaN(value) || value < 0) {
+                this.setCustomValidity('Valor inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+                this.value = value.toFixed(2);
+            }
+        });
+    });
+    
+    // Validação de datas
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    dateInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            const date = new Date(this.value);
+            const today = new Date();
+            
+            if (this.hasAttribute('min')) {
+                const minDate = new Date(this.getAttribute('min'));
+                if (date < minDate) {
+                    this.setCustomValidity(`A data não pode ser anterior a ${minDate.toLocaleDateString()}`);
+                    this.classList.add('is-invalid');
+                    return;
+                }
+            }
+            
+            if (this.hasAttribute('max')) {
+                const maxDate = new Date(this.getAttribute('max'));
+                if (date > maxDate) {
+                    this.setCustomValidity(`A data não pode ser posterior a ${maxDate.toLocaleDateString()}`);
+                    this.classList.add('is-invalid');
+                    return;
+                }
+            }
+            
+            this.setCustomValidity('');
+            this.classList.remove('is-invalid');
+        });
+    });
+    
+    // Feedback visual para campos obrigatórios
+    const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
+    requiredInputs.forEach(input => {
+        const label = input.previousElementSibling;
+        if (label && label.tagName === 'LABEL') {
+            label.innerHTML += ' <span class="text-danger">*</span>';
+        }
+    });
+}); 

static/js/main.js

@@ -0,0 +1,145 @@
+// Máscaras para campos de formulário
+document.addEventListener('DOMContentLoaded', function() {
+    // Máscara para CPF
+    const cpfInputs = document.querySelectorAll('input[name="cpf"]');
+    cpfInputs.forEach(input => {
+        input.addEventListener('input', function(e) {
+            let value = e.target.value.replace(/\D/g, '');
+            if (value.length <= 11) {
+                value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
+                e.target.value = value;
+            }
+        });
+    });
+
+    // Máscara para telefone
+    const phoneInputs = document.querySelectorAll('input[name="telefone"]');
+    phoneInputs.forEach(input => {
+        input.addEventListener('input', function(e) {
+            let value = e.target.value.replace(/\D/g, '');
+            if (value.length <= 11) {
+                if (value.length === 11) {
+                    value = value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
+                } else {
+                    value = value.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3");
+                }
+                e.target.value = value;
+            }
+        });
+    });
+
+    // Formatação de valores monetários
+    const moneyInputs = document.querySelectorAll('input[type="number"][step="0.01"]');
+    moneyInputs.forEach(input => {
+        input.addEventListener('blur', function(e) {
+            const value = parseFloat(e.target.value);
+            if (!isNaN(value)) {
+                e.target.value = value.toFixed(2);
+            }
+        });
+    });
+});
+
+// Funções para tabelas
+document.addEventListener('DOMContentLoaded', function() {
+    const tables = document.querySelectorAll('.table');
+    tables.forEach(table => {
+        // Ordenação
+        const headers = table.querySelectorAll('th[data-sort]');
+        headers.forEach(header => {
+            header.addEventListener('click', function() {
+                const column = this.dataset.sort;
+                const asc = this.classList.toggle('sort-asc');
+                const tbody = table.querySelector('tbody');
+                const rows = Array.from(tbody.querySelectorAll('tr'));
+                
+                rows.sort((a, b) => {
+                    const aVal = a.querySelector(`td[data-${column}]`).dataset[column];
+                    const bVal = b.querySelector(`td[data-${column}]`).dataset[column];
+                    return asc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+                });
+                
+                rows.forEach(row => tbody.appendChild(row));
+            });
+        });
+
+        // Filtro
+        const filterInput = document.querySelector(`#filter-${table.id}`);
+        if (filterInput) {
+            filterInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                const rows = table.querySelectorAll('tbody tr');
+                
+                rows.forEach(row => {
+                    const text = row.textContent.toLowerCase();
+                    row.style.display = text.includes(searchTerm) ? '' : 'none';
+                });
+            });
+        }
+    });
+});
+
+// Validação de formulários
+document.addEventListener('DOMContentLoaded', function() {
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            if (!form.checkValidity()) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                // Destacar campos inválidos
+                const invalidInputs = form.querySelectorAll(':invalid');
+                invalidInputs.forEach(input => {
+                    input.classList.add('is-invalid');
+                    
+                    // Adicionar mensagem de erro
+                    const feedback = document.createElement('div');
+                    feedback.className = 'invalid-feedback';
+                    feedback.textContent = input.validationMessage;
+                    input.parentNode.appendChild(feedback);
+                });
+            }
+            
+            form.classList.add('was-validated');
+        });
+    });
+});
+
+// Animações e feedback visual
+document.addEventListener('DOMContentLoaded', function() {
+    // Animar cards ao carregar
+    const cards = document.querySelectorAll('.card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        setTimeout(() => {
+            card.style.transition = 'all 0.3s ease';
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+
+    // Feedback visual para ações
+    const actionButtons = document.querySelectorAll('[data-action]');
+    actionButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            button.classList.add('animate__animated', 'animate__pulse');
+            setTimeout(() => {
+                button.classList.remove('animate__animated', 'animate__pulse');
+            }, 1000);
+        });
+    });
+});
+
+// Confirmações de ações
+document.addEventListener('DOMContentLoaded', function() {
+    const deleteButtons = document.querySelectorAll('[data-confirm]');
+    deleteButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            if (!confirm(this.dataset.confirm)) {
+                e.preventDefault();
+            }
+        });
+    });
+}); 

templates/base.html

@@ -3,132 +3,113 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}{% endblock %} - Sistema de Controle OCI</title>
+    <title>{% block title %}{% endblock %} - Sistema de Gestão</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    {{ bootstrap.load_css() }}
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    <style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
-        body {
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-            padding-top: 56px;
+    {% block extra_css %}{% endblock %}
-        }
-        .navbar-brand {
-            font-weight: bold;
-        }
-        .nav-link {
-            font-weight: 500;
-        }
-        .card {
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        .card-header {
-            background-color: #f8f9fa;
-            border-bottom: 1px solid #dee2e6;
-        }
-        .btn-primary {
-            background-color: #0d6efd;
-            border-color: #0d6efd;
-        }
-        .btn-success {
-            background-color: #198754;
-            border-color: #198754;
-        }
-        .btn-secondary {
-            background-color: #6c757d;
-            border-color: #6c757d;
-        }
-        .btn-outline-primary {
-            color: #0d6efd;
-            border-color: #0d6efd;
-        }
-        .btn-outline-primary:hover {
-            background-color: #0d6efd;
-            color: #fff;
-        }
-        .alert {
-            border-radius: 0.25rem;
-        }
-        .form-control:focus {
-            border-color: #0d6efd;
-            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-        }
-        .form-select:focus {
-            border-color: #0d6efd;
-            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-        }
-    </style>
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    {% if current_user is defined and current_user.is_authenticated %}
+    <nav class="navbar navbar-expand-lg navbar-dark">
         <div class="container">
-            <a class="navbar-brand" href="{{ url_for('home') }}">Sistema de Controle OCI</a>
+            <a class="navbar-brand" href="{{ url_for('home') }}">
+                <i class="fas fa-users-cog me-2"></i>Sistema de Gestão
+            </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav me-auto">
-                    {% if current_user is defined and current_user.is_authenticated %}
+                    {% if current_user.has_permission('view_cell_data') %}
-                        {% if current_user.is_admin %}
+                    <li class="nav-item dropdown">
-                        <li class="nav-item">
+                        <a class="nav-link dropdown-toggle" href="#" id="militantesDropdown" role="button" data-bs-toggle="dropdown">
-                            <a class="nav-link" href="{{ url_for('dashboard_admin') }}">Dashboard Admin</a>
+                            <i class="fas fa-users me-1"></i>Militantes
-                        </li>
+                        </a>
-                        {% else %}
+                        <ul class="dropdown-menu">
-                        <li class="nav-item">
+                            <li><a class="dropdown-item" href="{{ url_for('listar_militantes') }}">Listar Militantes</a></li>
-                            <a class="nav-link" href="{{ url_for('home') }}">Início</a>
+                            <li><a class="dropdown-item" href="{{ url_for('novo_militante') }}">Novo Militante</a></li>
-                        </li>
+                        </ul>
-                        
+                    </li>
-                        {% if current_user.has_permission('view_cell_data') %}
+                    {% endif %}
-                        <li class="nav-item">
+
-                            <a class="nav-link" href="{{ url_for('listar_militantes') }}">Militantes</a>
+                    {% if current_user.has_permission('view_cell_reports') %}
-                        </li>
+                    <li class="nav-item dropdown">
-                        {% endif %}
+                        <a class="nav-link dropdown-toggle" href="#" id="financeiroDropdown" role="button" data-bs-toggle="dropdown">
-                        
+                            <i class="fas fa-dollar-sign me-1"></i>Financeiro
-                        {% if current_user.has_permission('view_cell_reports') %}
+                        </a>
-                        <li class="nav-item">
+                        <ul class="dropdown-menu">
-                            <a class="nav-link" href="{{ url_for('listar_pagamentos') }}">Pagamentos</a>
+                            <li><a class="dropdown-item" href="{{ url_for('listar_cotas') }}">Cotas</a></li>
-                        </li>
+                            <li><a class="dropdown-item" href="{{ url_for('listar_pagamentos') }}">Pagamentos</a></li>
-                        <li class="nav-item">
+                        </ul>
-                            <a class="nav-link" href="{{ url_for('listar_materiais') }}">Materiais</a>
+                    </li>
-                        </li>
+                    <li class="nav-item dropdown">
-                        <li class="nav-item">
+                        <a class="nav-link dropdown-toggle" href="#" id="materiaisDropdown" role="button" data-bs-toggle="dropdown">
-                            <a class="nav-link" href="{{ url_for('listar_relatorios_vendas') }}">Vendas</a>
+                            <i class="fas fa-book me-1"></i>Materiais
-                        </li>
+                        </a>
-                        {% endif %}
+                        <ul class="dropdown-menu">
-                        
+                            <li><a class="dropdown-item" href="{{ url_for('listar_materiais') }}">Listar Materiais</a></li>
-                        {% if current_user.has_permission('view_cell_reports') or current_user.has_permission('view_sector_reports') or current_user.has_permission('view_cr_reports') %}
+                            <li><a class="dropdown-item" href="{{ url_for('listar_vendas_jornal') }}">Vendas de Jornal</a></li>
-                        <li class="nav-item dropdown">
+                            <li><a class="dropdown-item" href="{{ url_for('listar_assinaturas') }}">Assinaturas</a></li>
-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
+                        </ul>
-                                Relatórios
+                    </li>
-                            </a>
+                    {% endif %}
-                            <ul class="dropdown-menu">
+
-                                {% if current_user.has_permission('view_cell_reports') %}
+                    {% if current_user.has_permission('view_cell_reports') or current_user.has_permission('view_sector_reports') or current_user.has_permission('view_cr_reports') %}
-                                <li><a class="dropdown-item" href="{{ url_for('listar_relatorios_cotas') }}">Relatórios de Cotas</a></li>
+                    <li class="nav-item dropdown">
-                                <li><a class="dropdown-item" href="{{ url_for('listar_relatorios_vendas') }}">Relatórios de Vendas</a></li>
+                        <a class="nav-link dropdown-toggle" href="#" id="relatoriosDropdown" role="button" data-bs-toggle="dropdown">
-                                {% endif %}
+                            <i class="fas fa-chart-bar me-1"></i>Relatórios
-                            </ul>
+                        </a>
-                        </li>
+                        <ul class="dropdown-menu">
-                        {% endif %}
+                            {% if current_user.has_permission('view_cell_reports') %}
-                        {% endif %}
+                            <li><a class="dropdown-item" href="{{ url_for('listar_relatorios_cotas') }}">Relatórios de Cotas</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('listar_relatorios_vendas') }}">Relatórios de Vendas</a></li>
+                            {% endif %}
+                        </ul>
+                    </li>
                     {% endif %}
                 </ul>
                 <ul class="navbar-nav">
-                    {% if current_user is defined and current_user.is_authenticated %}
+                    {% if current_user.is_admin %}
                     <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('logout') }}">Sair</a>
+                        <a class="nav-link" href="{{ url_for('dashboard_admin') }}">
-                    </li>
+                            <i class="fas fa-user-shield me-1"></i>Dashboard Admin
-                    {% else %}
+                        </a>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
                     </li>
                     {% endif %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('logout') }}">
+                            <i class="fas fa-sign-out-alt me-1"></i>Sair
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>
     </nav>
+    {% endif %}
     
     <div class="container mt-4">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
         {% block content %}{% endblock %}
     </div>
-    
+
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {{ bootstrap.load_js() }}
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/forms.js') }}"></script>
+    {% block extra_js %}{% endblock %}
+
+    {% if current_user is defined and current_user.is_authenticated %}
     <script>
         // Verificar status da sessão a cada 5 minutos
         function checkSession() {
@@ -152,5 +133,6 @@
             }
         });
     </script>
+    {% endif %}
 </body>
 </html>

templates/home.html

@@ -1,34 +1,161 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 
 {% block title %}Home{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="row mb-4">
-    <div class="row">
+    <div class="col-12">
-        <div class="col-md-12">
+        <h1 class="display-4 mb-4">
-            <h1 class="mb-4">Bem-vindo, {{ current_user.username }}!</h1>
+            <i class="fas fa-tachometer-alt me-2"></i>Dashboard
-            
+        </h1>
-            {% with messages = get_flashed_messages(with_categories=true) %}
+    </div>
-                {% if messages %}
+</div>
-                    {% for category, message in messages %}
+
-                        <div class="alert alert-{{ category }}">{{ message }}</div>
+<div class="row g-4">
-                    {% endfor %}
+    {% if current_user.has_permission('view_cell_data') %}
-                {% endif %}
+    <!-- Card de Militantes -->
-            {% endwith %}
+    <div class="col-md-6 col-lg-3">
-            
+        <div class="card bg-primary text-white">
-            <div class="row">
+            <div class="card-body">
-                {% for link in links %}
+                <div class="d-flex justify-content-between align-items-center">
-                <div class="col-md-4">
+                    <div>
-                    <div class="card mb-4">
+                        <h6 class="card-title mb-0">Total de Militantes</h6>
-                        <div class="card-body">
+                        <h2 class="my-2">{{ total_militantes }}</h2>
-                            <h5 class="card-title">{{ link.text }}</h5>
+                    </div>
-                            <a href="{{ link.url }}" class="btn btn-primary">Acessar</a>
+                    <div class="fs-1">
-                        </div>
+                        <i class="fas fa-users"></i>
                     </div>
                 </div>
-                {% endfor %}
+                <a href="{{ url_for('listar_militantes') }}" class="text-white text-decoration-none">
+                    Ver detalhes <i class="fas fa-arrow-right ms-1"></i>
+                </a>
             </div>
         </div>
     </div>
+    {% endif %}
+
+    {% if current_user.has_permission('view_cell_reports') %}
+    <!-- Card de Cotas -->
+    <div class="col-md-6 col-lg-3">
+        <div class="card bg-success text-white">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h6 class="card-title mb-0">Total de Cotas</h6>
+                        <h2 class="my-2">R$ {{ total_cotas }}</h2>
+                    </div>
+                    <div class="fs-1">
+                        <i class="fas fa-dollar-sign"></i>
+                    </div>
+                </div>
+                <a href="{{ url_for('listar_cotas') }}" class="text-white text-decoration-none">
+                    Ver detalhes <i class="fas fa-arrow-right ms-1"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card de Materiais -->
+    <div class="col-md-6 col-lg-3">
+        <div class="card bg-info text-white">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h6 class="card-title mb-0">Materiais Vendidos</h6>
+                        <h2 class="my-2">{{ total_materiais }}</h2>
+                    </div>
+                    <div class="fs-1">
+                        <i class="fas fa-book"></i>
+                    </div>
+                </div>
+                <a href="{{ url_for('listar_materiais') }}" class="text-white text-decoration-none">
+                    Ver detalhes <i class="fas fa-arrow-right ms-1"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Card de Assinaturas -->
+    <div class="col-md-6 col-lg-3">
+        <div class="card bg-warning text-white">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h6 class="card-title mb-0">Assinaturas Ativas</h6>
+                        <h2 class="my-2">{{ total_assinaturas }}</h2>
+                    </div>
+                    <div class="fs-1">
+                        <i class="fas fa-newspaper"></i>
+                    </div>
+                </div>
+                <a href="{{ url_for('listar_assinaturas') }}" class="text-white text-decoration-none">
+                    Ver detalhes <i class="fas fa-arrow-right ms-1"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<div class="row mt-4">
+    {% if current_user.has_permission('view_cell_data') %}
+    <!-- Últimos Militantes -->
+    <div class="col-md-6 mb-4">
+        <div class="card h-100">
+            <div class="card-header bg-light">
+                <h5 class="card-title mb-0">
+                    <i class="fas fa-user-plus me-2"></i>Últimos Militantes Cadastrados
+                </h5>
+            </div>
+            <div class="card-body">
+                {% if ultimos_militantes %}
+                <div class="list-group list-group-flush">
+                    {% for militante in ultimos_militantes %}
+                    <a href="{{ url_for('editar_militante', id=militante.id) }}" class="list-group-item list-group-item-action">
+                        <div class="d-flex w-100 justify-content-between">
+                            <h6 class="mb-1">{{ militante.nome }}</h6>
+                            <small class="text-muted">{{ militante.created_at.strftime('%d/%m/%Y') }}</small>
+                        </div>
+                        <small class="text-muted">{{ militante.email }}</small>
+                    </a>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <p class="text-muted mb-0">Nenhum militante cadastrado recentemente.</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    {% if current_user.has_permission('view_cell_reports') %}
+    <!-- Últimos Pagamentos -->
+    <div class="col-md-6 mb-4">
+        <div class="card h-100">
+            <div class="card-header bg-light">
+                <h5 class="card-title mb-0">
+                    <i class="fas fa-money-bill-wave me-2"></i>Últimos Pagamentos
+                </h5>
+            </div>
+            <div class="card-body">
+                {% if ultimos_pagamentos %}
+                <div class="list-group list-group-flush">
+                    {% for pagamento in ultimos_pagamentos %}
+                    <div class="list-group-item">
+                        <div class="d-flex w-100 justify-content-between">
+                            <h6 class="mb-1">{{ pagamento.militante.nome }}</h6>
+                            <span class="badge bg-success">R$ {{ "%.2f"|format(pagamento.valor) }}</span>
+                        </div>
+                        <small class="text-muted">{{ pagamento.data_pagamento.strftime('%d/%m/%Y') }}</small>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <p class="text-muted mb-0">Nenhum pagamento registrado recentemente.</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endif %}
 </div>
 {% endblock %} 

templates/listar_militantes.html

@@ -1,71 +1,240 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 
-{% block title %}Lista de Militantes{% endblock %}
+{% block title %}Militantes{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="row mb-4">
-    <div class="row">
+    <div class="col-12">
-        <div class="col-md-12">
+        <div class="d-flex justify-content-between align-items-center">
-            <h1 class="mb-4">Lista de Militantes</h1>
+            <h1 class="mb-0">
-            
+                <i class="fas fa-users me-2"></i>Militantes
-            {% with messages = get_flashed_messages(with_categories=true) %}
+            </h1>
-                {% if messages %}
+            {% if current_user.has_permission('gerenciar_militantes') %}
-                    {% for category, message in messages %}
+            <a href="{{ url_for('criar_militante') }}" class="btn btn-primary">
-                        <div class="alert alert-{{ category }}">{{ message }}</div>
+                <i class="fas fa-user-plus me-2"></i>Novo Militante
-                    {% endfor %}
+            </a>
-                {% endif %}
+            {% endif %}
-            {% endwith %}
+        </div>
-            
+    </div>
-            <div class="d-flex justify-content-between mb-4">
+</div>
-                <a href="{{ url_for('criar_militante') }}" class="btn btn-primary">Novo Militante</a>
+
+<div class="card shadow-sm">
+    <div class="card-body">
+        <div class="row mb-4">
+            <div class="col-md-6">
+                <div class="input-group">
+                    <span class="input-group-text">
+                        <i class="fas fa-search"></i>
+                    </span>
+                    <input type="text" class="form-control" id="searchInput" placeholder="Pesquisar militantes...">
+                </div>
             </div>
-            
+            <div class="col-md-6">
-            <div class="table-responsive">
+                <div class="d-flex justify-content-end gap-2">
-                <table class="table table-striped">
+                    <div class="btn-group">
-                    <thead>
+                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
-                        <tr>
+                            <i class="fas fa-filter me-1"></i>Filtrar
-                            <th>Nome</th>
+                        </button>
-                            <th>Email</th>
+                        <ul class="dropdown-menu">
-                            <th>Célula</th>
+                            <li><a class="dropdown-item" href="#" data-filter="todos">Todos</a></li>
-                            <th>Responsabilidades</th>
+                            <li><a class="dropdown-item" href="#" data-filter="filiados">Filiados</a></li>
-                            <th>Ações</th>
+                            <li><a class="dropdown-item" href="#" data-filter="nao-filiados">Não Filiados</a></li>
-                        </tr>
+                        </ul>
-                    </thead>
+                    </div>
-                    <tbody>
+                    <button type="button" class="btn btn-outline-secondary" id="btnExportar">
-                        {% for militante in militantes %}
+                        <i class="fas fa-download me-1"></i>Exportar
-                            <tr>
+                    </button>
-                                <td>{{ militante.nome }}</td>
+                </div>
-                                <td>{{ militante.email }}</td>
+            </div>
-                                <td>{{ militante.celula.nome }}</td>
+        </div>
-                                <td>
+
-                                    {% if militante.responsabilidades & Militante.RESPONSAVEL_FINANCAS %}
+        <div class="table-responsive">
-                                        <span class="badge bg-primary">Finanças</span>
+            <table class="table table-hover" id="militantesTable">
-                                    {% endif %}
+                <thead>
-                                    {% if militante.responsabilidades & Militante.RESPONSAVEL_IMPRENSA %}
+                    <tr>
-                                        <span class="badge bg-info">Imprensa</span>
+                        <th data-sort="nome">Nome <i class="fas fa-sort"></i></th>
-                                    {% endif %}
+                        <th data-sort="cpf">CPF <i class="fas fa-sort"></i></th>
-                                    {% if militante.responsabilidades & Militante.QUADRO_ORIENTADOR %}
+                        <th data-sort="email">Email <i class="fas fa-sort"></i></th>
-                                        <span class="badge bg-success">Quadro-Orientador</span>
+                        <th data-sort="telefone">Telefone <i class="fas fa-sort"></i></th>
-                                    {% endif %}
+                        <th data-sort="celula">Célula <i class="fas fa-sort"></i></th>
-                                </td>
+                        <th>Responsabilidades</th>
-                                <td>
+                        <th class="text-end">Ações</th>
-                                    <a href="{{ url_for('editar_militante', id=militante.id) }}" class="btn btn-sm btn-warning">Editar</a>
+                    </tr>
-                                    <button type="button" class="btn btn-sm btn-danger" onclick="confirmarExclusao({{ militante.id }})">Excluir</button>
+                </thead>
-                                </td>
+                <tbody>
-                            </tr>
+                    {% for militante in militantes %}
-                        {% endfor %}
+                    <tr data-militante="{{ militante.id }}" data-filiado="{{ 'sim' if militante.filiado else 'nao' }}">
-                    </tbody>
+                        <td data-nome="{{ militante.nome }}">{{ militante.nome }}</td>
-                </table>
+                        <td data-cpf="{{ militante.cpf }}">{{ militante.cpf }}</td>
+                        <td data-email="{{ militante.email }}">{{ militante.email }}</td>
+                        <td data-telefone="{{ militante.telefone }}">{{ militante.telefone }}</td>
+                        <td data-celula="{{ militante.celula.nome }}">{{ militante.celula.nome }}</td>
+                        <td>
+                            {% if militante.responsabilidades & Militante.RESPONSAVEL_FINANCAS %}
+                                <span class="badge bg-primary">Finanças</span>
+                            {% endif %}
+                            {% if militante.responsabilidades & Militante.RESPONSAVEL_IMPRENSA %}
+                                <span class="badge bg-info">Imprensa</span>
+                            {% endif %}
+                            {% if militante.responsabilidades & Militante.QUADRO_ORIENTADOR %}
+                                <span class="badge bg-success">Quadro-Orientador</span>
+                            {% endif %}
+                        </td>
+                        <td class="text-end">
+                            <div class="btn-group">
+                                {% if current_user.has_permission('gerenciar_militantes') %}
+                                <a href="{{ url_for('editar_militante', id=militante.id) }}" 
+                                   class="btn btn-sm btn-outline-primary"
+                                   title="Editar">
+                                    <i class="fas fa-edit"></i>
+                                </a>
+                                <button type="button" 
+                                        class="btn btn-sm btn-outline-danger"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#deleteModal"
+                                        data-militante-id="{{ militante.id }}"
+                                        data-militante-nome="{{ militante.nome }}"
+                                        title="Excluir">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        <div class="d-flex justify-content-between align-items-center mt-4">
+            <div class="text-muted">
+                Mostrando <span id="countMilitantes">{{ militantes|length }}</span> militantes
+            </div>
+            <nav aria-label="Navegação de páginas">
+                <ul class="pagination mb-0">
+                    <li class="page-item disabled" id="prevPage">
+                        <a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
+                    </li>
+                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                    <li class="page-item"><a class="page-link" href="#">2</a></li>
+                    <li class="page-item"><a class="page-link" href="#">3</a></li>
+                    <li class="page-item" id="nextPage">
+                        <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+<!-- Modal de Confirmação de Exclusão -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Confirmar Exclusão</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Tem certeza que deseja excluir o militante <strong id="militanteNome"></strong>?</p>
+                <p class="text-danger mb-0">Esta ação não pode ser desfeita.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                <form action="" method="POST" id="deleteForm" class="d-inline">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="fas fa-trash me-2"></i>Excluir
+                    </button>
+                </form>
             </div>
         </div>
     </div>
 </div>
 
+{% block extra_js %}
 <script>
-function confirmarExclusao(id) {
+document.addEventListener('DOMContentLoaded', function() {
-    if (confirm('Tem certeza que deseja excluir este militante?')) {
+    // Configuração do modal de exclusão
-        window.location.href = "{{ url_for('excluir_militante', id=0) }}".replace('0', id);
+    const deleteModal = document.getElementById('deleteModal');
-    }
+    deleteModal.addEventListener('show.bs.modal', function(event) {
-}
+        const button = event.relatedTarget;
+        const militanteId = button.getAttribute('data-militante-id');
+        const militanteNome = button.getAttribute('data-militante-nome');
+        
+        document.getElementById('militanteNome').textContent = militanteNome;
+        document.getElementById('deleteForm').action = `/militantes/excluir/${militanteId}`;
+    });
+
+    // Pesquisa em tempo real
+    const searchInput = document.getElementById('searchInput');
+    searchInput.addEventListener('input', function() {
+        const searchTerm = this.value.toLowerCase();
+        const rows = document.querySelectorAll('#militantesTable tbody tr');
+        let visibleCount = 0;
+        
+        rows.forEach(row => {
+            const text = row.textContent.toLowerCase();
+            const isVisible = text.includes(searchTerm);
+            row.style.display = isVisible ? '' : 'none';
+            if (isVisible) visibleCount++;
+        });
+        
+        document.getElementById('countMilitantes').textContent = visibleCount;
+    });
+
+    // Filtros
+    const filterButtons = document.querySelectorAll('[data-filter]');
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            const filter = this.getAttribute('data-filter');
+            const rows = document.querySelectorAll('#militantesTable tbody tr');
+            let visibleCount = 0;
+            
+            rows.forEach(row => {
+                const filiado = row.getAttribute('data-filiado');
+                let isVisible = true;
+                
+                if (filter === 'filiados') {
+                    isVisible = filiado === 'sim';
+                } else if (filter === 'nao-filiados') {
+                    isVisible = filiado === 'nao';
+                }
+                
+                row.style.display = isVisible ? '' : 'none';
+                if (isVisible) visibleCount++;
+            });
+            
+            document.getElementById('countMilitantes').textContent = visibleCount;
+        });
+    });
+
+    // Exportar para CSV
+    document.getElementById('btnExportar').addEventListener('click', function() {
+        const rows = document.querySelectorAll('#militantesTable tbody tr:not([style*="display: none"])');
+        let csv = 'Nome,CPF,Email,Telefone,Célula\n';
+        
+        rows.forEach(row => {
+            const nome = row.querySelector('[data-nome]').getAttribute('data-nome');
+            const cpf = row.querySelector('[data-cpf]').getAttribute('data-cpf');
+            const email = row.querySelector('[data-email]').getAttribute('data-email');
+            const telefone = row.querySelector('[data-telefone]').getAttribute('data-telefone');
+            const celula = row.querySelector('[data-celula]').getAttribute('data-celula');
+            
+            csv += `"${nome}","${cpf}","${email}","${telefone}","${celula}"\n`;
+        });
+        
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'militantes.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    });
+});
 </script>
+{% endblock %}
 {% endblock %}

templates/login.html

@@ -1,43 +1,57 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 
 {% block title %}Login{% endblock %}
 
 {% block content %}
 <div class="container">
-    <div class="row justify-content-center">
+    <div class="row justify-content-center align-items-center min-vh-100">
-        <div class="col-md-6">
+        <div class="col-md-6 col-lg-4">
-            <div class="card">
+            <div class="card shadow-lg">
-                <div class="card-header">
+                <div class="card-body p-5">
-                    <h3 class="card-title">Login</h3>
+                    <div class="text-center mb-4">
-                </div>
+                        <h1 class="h3">Login</h1>
-                <div class="card-body">
+                        <p class="text-muted">Entre com suas credenciais</p>
+                    </div>
+
                     {% with messages = get_flashed_messages(with_categories=true) %}
                         {% if messages %}
                             {% for category, message in messages %}
-                                <div class="alert alert-{{ category }}">{{ message }}</div>
+                                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                                    {{ message }}
+                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                                </div>
                             {% endfor %}
                         {% endif %}
                     {% endwith %}
-                    
+
                     <form method="POST" action="{{ url_for('login') }}">
                         <div class="mb-3">
-                            <label for="username" class="form-label">Usuário</label>
+                            <label for="email" class="form-label">Email</label>
-                            <input type="text" class="form-control" id="username" name="username" required>
+                            <div class="input-group">
+                                <span class="input-group-text">
+                                    <i class="fas fa-envelope"></i>
+                                </span>
+                                <input type="email" class="form-control" id="email" name="email" required autofocus>
+                            </div>
                         </div>
-                        
+
-                        <div class="mb-3">
+                        <div class="mb-4">
-                            <label for="password" class="form-label">Senha</label>
+                            <label for="senha" class="form-label">Senha</label>
-                            <input type="password" class="form-control" id="password" name="password" required>
+                            <div class="input-group">
+                                <span class="input-group-text">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                                <input type="password" class="form-control" id="senha" name="senha" required>
+                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                            </div>
                         </div>
-                        
+
-                        <div class="mb-3">
-                            <label for="otp_code" class="form-label">Código OTP</label>
-                            <input type="text" class="form-control" id="otp_code" name="otp_code" required>
-                            <small class="text-muted">Digite o código gerado pelo seu aplicativo autenticador</small>
-                        </div>
-                        
                         <div class="d-grid">
-                            <button type="submit" class="btn btn-primary">Entrar</button>
+                            <button type="submit" class="btn btn-primary">
+                                <i class="fas fa-sign-in-alt me-2"></i>Entrar
+                            </button>
                         </div>
                     </form>
                 </div>
@@ -45,4 +59,30 @@
         </div>
     </div>
 </div>
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Toggle password visibility
+    const togglePassword = document.getElementById('togglePassword');
+    const password = document.getElementById('senha');
+
+    togglePassword.addEventListener('click', function() {
+        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+        password.setAttribute('type', type);
+        this.querySelector('i').classList.toggle('fa-eye');
+        this.querySelector('i').classList.toggle('fa-eye-slash');
+    });
+
+    // Auto-hide alerts after 5 seconds
+    const alerts = document.querySelectorAll('.alert');
+    alerts.forEach(alert => {
+        setTimeout(() => {
+            const bsAlert = new bootstrap.Alert(alert);
+            bsAlert.close();
+        }, 5000);
+    });
+});
+</script>
+{% endblock %}
 {% endblock %}