feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais

static/css/components.css

@@ -0,0 +1,164 @@
+/* Variáveis globais */
+:root {
+    --table-header-bg: #d8dde2;
+    --table-hover-bg: rgba(0, 0, 0, 0.02);
+    --border-color: #dee2e6;
+}
+
+/* Tabelas */
+.table-container {
+    background: #fff;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    margin-bottom: 1.5rem;
+}
+
+.table {
+    margin-bottom: 0;
+}
+
+.table thead {
+    background-color: var(--table-header-bg) !important;
+}
+
+.table thead th {
+    border-bottom: none;
+    font-weight: 600;
+    padding: 1rem;
+    white-space: nowrap;
+}
+
+.table tbody td {
+    padding: 1rem;
+    vertical-align: middle;
+}
+
+.table-hover tbody tr:hover {
+    background-color: var(--table-hover-bg);
+}
+
+/* Botões de ação */
+.btn-group-actions {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+}
+
+.btn-group-actions .btn {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+/* Botões padrão */
+.btn-outline-primary {
+    color: #0d6efd;
+    border-color: #0d6efd;
+    background-color: transparent;
+}
+
+.btn-outline-primary:hover {
+    color: #fff;
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+/* Cabeçalho de listagem */
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.list-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.list-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Barra de pesquisa e filtros */
+.search-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    gap: 1rem;
+}
+
+.search-input-group {
+    flex: 1;
+    max-width: 500px;
+}
+
+.search-input-group .input-group-text {
+    background-color: #f8f9fa;
+    border-right: none;
+}
+
+.search-input-group .form-control {
+    border-left: none;
+}
+
+.search-input-group .form-control:focus {
+    box-shadow: none;
+    border-color: #dee2e6;
+}
+
+/* Badges */
+.badge {
+    padding: 0.5em 0.75em;
+    font-weight: 500;
+}
+
+.badge.bg-success {
+    background-color: #198754 !important;
+}
+
+.badge.bg-secondary {
+    background-color: #6c757d !important;
+}
+
+/* Paginação */
+.pagination-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.pagination {
+    margin: 0;
+}
+
+.page-link {
+    padding: 0.375rem 0.75rem;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .search-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-input-group {
+        max-width: 100%;
+    }
+
+    .list-actions {
+        flex-wrap: wrap;
+    }
+
+    .btn-group-actions {
+        justify-content: center;
+    }
+} 

templates/base.html

@@ -9,6 +9,8 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css?v=1" rel="stylesheet">
     <!-- Font Awesome 6 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?v=1">
+    <!-- Componentes CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
     
     <style>
         :root {
@@ -22,6 +24,7 @@
             --info-color: #0dcaf0;
             --background-gradient: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
             --navbar-stripe: 4px solid var(--primary-color);
+            --table-header-bg: #d8dde2;
         }
 
         body {
@@ -420,6 +423,21 @@
             padding: 2rem 1rem;
             min-height: calc(100vh - 70px);
         }
+
+        .table thead {
+            background-color: var(--table-header-bg) !important;
+        }
+
+        .btn-outline-primary {
+            color: #0d6efd;
+            border-color: #0d6efd;
+        }
+        
+        .btn-outline-primary:hover {
+            color: #fff;
+            background-color: #0d6efd;
+            border-color: #0d6efd;
+        }
     </style>
     {% block extra_css %}{% endblock %}
 </head>

templates/listar_militantes.html

@@ -3,6 +3,7 @@
 {% block title %}Militantes{% endblock %}
 
 {% block content %}
+<<<<<<< HEAD
 <div class="row mb-4">
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center">
@@ -12,42 +13,94 @@
             {% if current_user.has_permission('gerenciar_militantes') %}
             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNovoMilitante">
                 <i class="fas fa-user-plus me-2"></i>Novo Militante
+=======
+<div class="table-container">
+    <div class="list-header">
+        <h2 class="list-title">
+            <i class="fas fa-users"></i>Militantes
+        </h2>
+        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalNovoMilitante">
+            <i class="fas fa-user-plus me-2"></i>Novo Militante
+        </button>
+    </div>
+
+    <div class="search-bar">
+        <div class="search-input-group input-group">
+            <span class="input-group-text">
+                <i class="fas fa-search"></i>
+            </span>
+            <input type="text" class="form-control" placeholder="Pesquisar militantes..." id="searchInput">
+        </div>
+        <div class="list-actions">
+            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
+                <i class="fas fa-filter me-2"></i>Filtrar
+            </button>
+            <button class="btn btn-outline-primary" type="button">
+                <i class="fas fa-file-export me-2"></i>Exportar
+>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
             </button>
             {% endif %}
         </div>
     </div>
-</div>
 
-<div class="card shadow-sm">
+    <div class="table-responsive">
-    <div class="card-body">
+        <table class="table table-hover align-middle">
-        <div class="row mb-4">
+            <thead>
-            <div class="col-md-6">
+                <tr>
-                <div class="input-group">
+                    <th>Nome</th>
-                    <span class="input-group-text">
+                    <th>CPF</th>
-                        <i class="fas fa-search"></i>
+                    <th>Email</th>
-                    </span>
+                    <th>Telefone</th>
-                    <input type="text" class="form-control" id="searchInput" placeholder="Pesquisar militantes...">
+                    <th>Filiado</th>
-                </div>
+                    <th class="text-end">Ações</th>
-            </div>
+                </tr>
-            <div class="col-md-6">
+            </thead>
-                <div class="d-flex justify-content-end gap-2">
+            <tbody>
-                    <div class="btn-group">
+                {% for militante in militantes %}
-                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+                <tr>
-                            <i class="fas fa-filter me-1"></i>Filtrar
+                    <td>{{ militante.nome }}</td>
-                        </button>
+                    <td>{{ militante.cpf }}</td>
-                        <ul class="dropdown-menu">
+                    <td>{{ militante.email }}</td>
-                            <li><a class="dropdown-item" href="#" data-filter="todos">Todos</a></li>
+                    <td>{{ militante.telefone }}</td>
-                            <li><a class="dropdown-item" href="#" data-filter="filiados">Filiados</a></li>
+                    <td>
-                            <li><a class="dropdown-item" href="#" data-filter="nao-filiados">Não Filiados</a></li>
+                        <span class="badge {{ 'bg-success' if militante.filiado else 'bg-secondary' }}">
-                        </ul>
+                            {{ 'Sim' if militante.filiado else 'Não' }}
-                    </div>
+                        </span>
-                    <button type="button" class="btn btn-outline-secondary" id="btnExportar">
+                    </td>
-                        <i class="fas fa-download me-1"></i>Exportar
+                    <td>
-                    </button>
+                        <div class="btn-group-actions">
-                </div>
+                            <button type="button" 
-            </div>
+                               class="btn btn-sm btn-outline-primary"
-        </div>
+                               data-bs-toggle="modal"
+                               data-bs-target="#modalEditarMilitante"
+                               data-militante-id="{{ militante.id }}"
+                               data-militante-nome="{{ militante.nome }}"
+                               data-militante-cpf="{{ militante.cpf }}"
+                               data-militante-email="{{ militante.email }}"
+                               data-militante-telefone="{{ militante.telefone }}"
+                               data-militante-endereco="{{ militante.endereco }}"
+                               data-militante-filiado="{{ militante.filiado }}"
+                               title="Editar">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <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>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 
+<<<<<<< HEAD
         <div class="table-responsive">
             <table class="table table-hover" id="militantesTable">
                 <thead>
@@ -132,10 +185,29 @@
                     </li>
                 </ul>
             </nav>
+=======
+    <div class="pagination-container">
+        <div class="text-muted">
+            Mostrando <span id="countMilitantes">{{ militantes|length }}</span> militantes
+>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
         </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>
 
+<<<<<<< HEAD
 <!-- Modal de Confirmação de Exclusão -->
 <div class="modal fade" id="deleteModal" tabindex="-1">
     <div class="modal-dialog">
@@ -268,6 +340,12 @@
         </div>
     </div>
 </div>
+=======
+<!-- Modais -->
+{% include 'modals/militante_novo.html' %}
+{% include 'modals/militante_editar.html' %}
+{% include 'modals/militante_excluir.html' %}
+>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
 {% endblock %}
 
 {% block scripts %}

templates/modals/militante_editar.html

@@ -0,0 +1,51 @@
+<!-- Modal de Edição -->
+<div class="modal fade" id="modalEditarMilitante" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i class="fas fa-user-edit me-2"></i>Editar Militante
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="formEditarMilitante" method="post">
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="editNome" class="form-label">Nome:</label>
+                            <input type="text" class="form-control" id="editNome" name="nome" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="editCpf" class="form-label">CPF:</label>
+                            <input type="text" class="form-control" id="editCpf" name="cpf" required>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="editEmail" class="form-label">Email:</label>
+                            <input type="email" class="form-control" id="editEmail" name="email" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="editTelefone" class="form-label">Telefone:</label>
+                            <input type="text" class="form-control" id="editTelefone" name="telefone">
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="editEndereco" class="form-label">Endereço:</label>
+                        <input type="text" class="form-control" id="editEndereco" name="endereco">
+                    </div>
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="editFiliado" name="filiado">
+                        <label class="form-check-label" for="editFiliado">Filiado</label>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                <button type="submit" form="formEditarMilitante" class="btn btn-success">
+                    <i class="fas fa-save me-2"></i>Salvar
+                </button>
+            </div>
+        </div>
+    </div>
+</div> 

templates/modals/militante_excluir.html

@@ -0,0 +1,23 @@
+<!-- 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> 

templates/modals/militante_novo.html

@@ -0,0 +1,56 @@
+<!-- Modal de Novo Militante -->
+<div class="modal fade" id="modalNovoMilitante" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i class="fas fa-user-plus me-2"></i>Novo Militante
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="formNovoMilitante" method="post" action="{{ url_for('novo_militante') }}">
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="nome" class="form-label">Nome:</label>
+                            <input type="text" class="form-control" id="nome" name="nome" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="cpf" class="form-label">CPF:</label>
+                            <input type="text" class="form-control" id="cpf" name="cpf" required
+                                   pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}" 
+                                   title="Digite um CPF no formato: xxx.xxx.xxx-xx">
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="email" class="form-label">Email:</label>
+                            <input type="email" class="form-control" id="email" name="email" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="telefone" class="form-label">Telefone:</label>
+                            <input type="text" class="form-control" id="telefone" name="telefone">
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="endereco" class="form-label">Endereço:</label>
+                        <input type="text" class="form-control" id="endereco" name="endereco">
+                    </div>
+                    
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="filiado" name="filiado">
+                        <label class="form-check-label" for="filiado">Filiado</label>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                <button type="submit" form="formNovoMilitante" class="btn btn-primary">
+                    <i class="fas fa-save me-2"></i>Salvar
+                </button>
+            </div>
+        </div>
+    </div>
+</div>