Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gerenciamento de Usuários</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-blue-600 px-6 py-4 text-white"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-xl font-bold">Gerenciamento de Usuários</h1> | |
| <a href="index.html" class="flex items-center space-x-1 bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded-lg transition"> | |
| <i data-feather="arrow-left" class="w-4 h-4"></i> | |
| <span>Voltar</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <button id="add-user-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center space-x-2"> | |
| <i data-feather="user-plus" class="w-4 h-4"></i> | |
| <span>Adicionar Usuário</span> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-mail</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Função</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="users-table" class="bg-white divide-y divide-gray-200"> | |
| <!-- Users will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add User Modal --> | |
| <div id="add-user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="border-b px-6 py-4"> | |
| <h2 class="text-xl font-semibold">Adicionar Novo Usuário</h2> | |
| </div> | |
| <div class="p-6"> | |
| <form id="add-user-form" class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-1" for="new-user-name">Nome Completo</label> | |
| <input type="text" id="new-user-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-1" for="new-user-email">E-mail</label> | |
| <input type="email" id="new-user-email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-1" for="new-user-password">Senha</label> | |
| <input type="password" id="new-user-password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-1" for="new-user-role">Função</label> | |
| <select id="new-user-role" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option value="Operação">Operação</option> | |
| <option value="Líder">Líder</option> | |
| <option value="Master">Master</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" id="cancel-add-user" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">Cancelar</button> | |
| <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Salvar</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Firebase configuration (same as index.html) | |
| const firebaseConfig = { | |
| apiKey: "AIzaSyDdP3jJq5X8X9Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q", | |
| authDomain: "firemaster-control-hub.firebaseapp.com", | |
| projectId: "firemaster-control-hub", | |
| storageBucket: "firemaster-control-hub.appspot.com", | |
| messagingSenderId: "123456789012", | |
| appId: "1:123456789012:web:abcd1234efgh5678ijkl90" | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| const auth = firebase.auth(); | |
| const db = firebase.firestore(); | |
| // DOM elements | |
| const usersTable = document.getElementById('users-table'); | |
| const addUserBtn = document.getElementById('add-user-btn'); | |
| const addUserModal = document.getElementById('add-user-modal'); | |
| const cancelAddUserBtn = document.getElementById('cancel-add-user'); | |
| const addUserForm = document.getElementById('add-user-form'); | |
| // Load users on page load | |
| loadUsers(); | |
| // Add user button click handler | |
| addUserBtn.addEventListener('click', () => { | |
| addUserModal.classList.remove('hidden'); | |
| }); | |
| // Cancel add user button | |
| cancelAddUserBtn.addEventListener('click', () => { | |
| addUserModal.classList.add('hidden'); | |
| addUserForm.reset(); | |
| }); | |
| // Add user form submission | |
| addUserForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const name = document.getElementById('new-user-name').value; | |
| const email = document.getElementById('new-user-email').value; | |
| const password = document.getElementById('new-user-password').value; | |
| const role = document.getElementById('new-user-role').value; | |
| // Create user in Firebase Auth | |
| auth.createUserWithEmailAndPassword(email, password) | |
| .then((userCredential) => { | |
| // Add user to Firestore | |
| return db.collection('users').doc(userCredential.user.uid).set({ | |
| nome: name, | |
| email: email, | |
| funcao: role, | |
| permissoes: { | |
| abaDashboard: true, | |
| abaRelatorios: role !== 'Operação', | |
| abaConfig: role === 'Master' | |
| } | |
| }); | |
| }) | |
| .then(() => { | |
| alert('Usuário criado com sucesso!'); | |
| addUserModal.classList.add('hidden'); | |
| addUserForm.reset(); | |
| loadUsers(); | |
| }) | |
| .catch((error) => { | |
| alert('Erro ao criar usuário: ' + error.message); | |
| }); | |
| }); | |
| function loadUsers() { | |
| usersTable.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center">Carregando usuários...</td></tr>'; | |
| db.collection('users').get() | |
| .then((querySnapshot) => { | |
| usersTable.innerHTML = ''; | |
| if (querySnapshot.empty) { | |
| usersTable.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center">Nenhum usuário encontrado</td></tr>'; | |
| return; | |
| } | |
| querySnapshot.forEach((doc) => { | |
| const user = doc.data(); | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4">${user.nome || 'N/A'}</td> | |
| <td class="px-6 py-4">${user.email || 'N/A'}</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full | |
| ${user.funcao === 'Master' ? 'bg-purple-100 text-purple-800' : | |
| user.funcao === 'Líder' ? 'bg-blue-100 text-blue-800' : | |
| 'bg-green-100 text-green-800'}"> | |
| ${user.funcao || 'Operação'} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <button data-id="${doc.id}" class="text-blue-600 hover:text-blue-900 mr-3">Editar</button> | |
| <button data-id="${doc.id}" class="text-red-600 hover:text-red-900">Excluir</button> | |
| </td> | |
| `; | |
| usersTable.appendChild(row); | |
| }); | |
| // Add event listeners to edit/delete buttons | |
| document.querySelectorAll('button').forEach(btn => { | |
| if (btn.textContent === 'Editar') { | |
| btn.addEventListener('click', () => { | |
| const userId = btn.getAttribute('data-id'); | |
| editUser(userId); | |
| }); | |
| } else if (btn.textContent === 'Excluir') { | |
| btn.addEventListener('click', () => { | |
| const userId = btn.getAttribute('data-id'); | |
| deleteUser(userId); | |
| }); | |
| } | |
| }); | |
| }) | |
| .catch((error) => { | |
| usersTable.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center text-red-600">Erro ao carregar usuários</td></tr>'; | |
| console.error('Error loading users:', error); | |
| }); | |
| } | |
| function editUser(userId) { | |
| // TODO: Implement edit functionality | |
| alert('Editar usuário com ID: ' + userId); | |
| } | |
| function deleteUser(userId) { | |
| if (confirm('Tem certeza que deseja excluir este usuário?')) { | |
| db.collection('users').doc(userId).delete() | |
| .then(() => { | |
| alert('Usuário excluído com sucesso'); | |
| loadUsers(); | |
| }) | |
| .catch((error) => { | |
| alert('Erro ao excluir usuário: ' + error.message); | |
| }); | |
| } | |
| } | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |