Tela inicial de administração desenvolvida.

static/css/components.css

@@ -20,6 +20,10 @@
     --bs-success-dark: #157347;
     --bs-secondary: #6c757d;
     --bs-secondary-dark: #565e64;
+    
+    /* Variáveis para status */
+    --status-active: #28a745;
+    --status-inactive: #dc3545;
 }
 
 /* Tabelas */
@@ -609,3 +613,14 @@ input.btn-secondary:hover,
     background-color: #cff4fc;
     border-color: #b6effb;
 }
+
+/* Status styles */
+.status-active {
+    color: var(--status-active);
+    font-weight: 500;
+}
+
+.status-inactive {
+    color: var(--status-inactive);
+    font-weight: 500;
+} 

templates/dashboard_admin.html

@@ -4,15 +4,9 @@
 
 {% block content %}
 <div class="container mt-4">
+    <h2 class="mb-4"><i class="fas fa-users-cog"></i> Administração de Usuários</h2>
     <div class="card">
-        <div class="card-header bg-dark text-white">
-            <h3 class="mb-0"><i class="fas fa-users-cog"></i> Administração de Usuários</h3>
-        </div>
         <div class="card-body">
-            <div class="alert alert-info" role="alert">
-                <i class="fas fa-info-circle"></i> Aqui você pode gerenciar todos os usuários do sistema. Use os controles abaixo para ativar/desativar contas ou alterar níveis de acesso.
-            </div>
-            
             <div class="table-responsive">
                 <table class="table table-hover">
                     <thead class="thead-light">
@@ -34,7 +28,7 @@
                             <td>{{ usuario.nome }}</td>
                             <td>{{ usuario.last_login }}</td>
                             <td>
-                                <span class="badge {% if usuario.ativo %}badge-success{% else %}badge-danger{% endif %}">
+                                <span class="badge {% if usuario.ativo %}bg-success{% else %}bg-danger{% endif %}">
                                     {{ "Ativo" if usuario.ativo else "Inativo" }}
                                 </span>
                             </td>