feat(#11): Implementa estrutura inicial da área administrativa - Cria blueprint administrativo com rotas básicas - Implementa templates base para área administrativa - Adiciona dashboard administrativo - Implementa gerenciamento de usuários - Organiza rotas em pacote separado

This commit is contained in:
andersonid
2025-04-15 10:49:15 -03:00
parent 53769cf080
commit 47f13e7c18
6 changed files with 405 additions and 0 deletions

100
templates/admin/base.html Normal file
View File

@@ -0,0 +1,100 @@
{% extends "base.html" %}
{% block title %}Área Administrativa{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link {% if request.endpoint == 'admin.dashboard' %}active{% endif %}"
href="{{ url_for('admin.dashboard') }}">
<i class="fas fa-tachometer-alt me-2"></i>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.endpoint == 'admin.list_users' %}active{% endif %}"
href="{{ url_for('admin.list_users') }}">
<i class="fas fa-users me-2"></i>
Usuários
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">
<i class="fas fa-arrow-left me-2"></i>
Voltar ao Sistema
</a>
</li>
</ul>
</div>
</nav>
<!-- Main content -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">{% block admin_title %}{% endblock %}</h1>
</div>
{% 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 admin_content %}{% endblock %}
</main>
</div>
</div>
{% endblock %}
{% block extra_css %}
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
main {
padding-top: 48px;
}
@media (max-width: 767.98px) {
.sidebar {
position: static;
padding-top: 0;
}
main {
padding-top: 0;
}
}
</style>
{% endblock %}

View File

@@ -0,0 +1,79 @@
{% extends "admin/base.html" %}
{% block admin_title %}Dashboard Administrativo{% endblock %}
{% block admin_content %}
<div class="row">
<!-- Card de Total de Usuários -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Total de Usuários</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_users }}</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Card de Usuários Ativos -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Usuários Ativos</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ active_users }}</div>
</div>
<div class="col-auto">
<i class="fas fa-user-check fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Card de Usuários Inativos -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Usuários Inativos</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ inactive_users }}</div>
</div>
<div class="col-auto">
<i class="fas fa-user-times fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Ações Rápidas -->
<div class="row mt-4">
<div class="col-12">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Ações Rápidas</h6>
</div>
<div class="card-body">
<a href="{{ url_for('admin.list_users') }}" class="btn btn-primary me-2">
<i class="fas fa-users me-1"></i>
Gerenciar Usuários
</a>
</div>
</div>
</div>
</div>
{% endblock %}

108
templates/admin/users.html Normal file
View File

@@ -0,0 +1,108 @@
{% extends "admin/base.html" %}
{% block admin_title %}Gerenciamento de Usuários{% endblock %}
{% block admin_content %}
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Lista de Usuários</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="usersTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Email</th>
<th>Nome</th>
<th>Status</th>
<th>Último Login</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.email }}</td>
<td>{{ user.militante.nome if user.militante else 'N/A' }}</td>
<td>
<span class="badge {% if user.is_active %}bg-success{% else %}bg-danger{% endif %}">
{{ 'Ativo' if user.is_active else 'Inativo' }}
</span>
</td>
<td>{{ user.ultimo_login.strftime('%d/%m/%Y %H:%M') if user.ultimo_login else 'Nunca' }}</td>
<td>
<div class="btn-group" role="group">
<!-- Botão de Reset OTP -->
<form action="{{ url_for('admin.reset_user_otp', user_id=user.id) }}" method="POST" class="d-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-warning btn-sm" title="Resetar OTP"
onclick="return confirm('Tem certeza que deseja resetar o OTP deste usuário?')">
<i class="fas fa-key"></i>
</button>
</form>
<!-- Botão de Reset Senha -->
<form action="{{ url_for('admin.reset_user_password', user_id=user.id) }}" method="POST" class="d-inline ms-1">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-danger btn-sm" title="Resetar Senha"
onclick="return confirm('Tem certeza que deseja resetar a senha deste usuário?')">
<i class="fas fa-lock"></i>
</button>
</form>
<!-- Botão de Ativar/Desativar -->
<button class="btn btn-primary btn-sm ms-1" title="{{ 'Desativar' if user.is_active else 'Ativar' }} Usuário"
onclick="toggleUserStatus({{ user.id }})">
<i class="fas {% if user.is_active %}fa-user-times{% else %}fa-user-check{% endif %}"></i>
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function toggleUserStatus(userId) {
if (!confirm('Tem certeza que deseja alterar o status deste usuário?')) {
return;
}
fetch(`/admin/users/${userId}/toggle-status`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token() }}'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Recarregar a página para mostrar as mudanças
location.reload();
} else {
alert(data.message || 'Erro ao alterar status do usuário');
}
})
.catch(error => {
console.error('Error:', error);
alert('Erro ao alterar status do usuário');
});
}
// Inicializar DataTable
$(document).ready(function() {
$('#usersTable').DataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Portuguese-Brasil.json'
},
order: [[1, 'asc']]
});
});
</script>
{% endblock %}