feat: orgaos page integrated with real API

front-end/app/pages/gestao/orgaos.vue

@@ -1,43 +1,426 @@
 <!-- front-end/app/pages/gestao/orgaos.vue -->
 <script setup lang="ts">
-import { orgaos } from '~/data/mock/orgaos'
+const { apiFetch } = useApi()
 
-const esferaLabel = { federal: 'Federal', estadual: 'Estadual', municipal: 'Municipal' }
-const columns = [
-  { id: 'nome', accessorKey: 'nome', header: 'Órgão' },
-  { id: 'esfera', accessorKey: 'esfera', header: 'Esfera' },
-  { id: 'estado', accessorKey: 'estado', header: 'UF' },
-  { id: 'totalParticipacoes', accessorKey: 'totalParticipacoes', header: 'Participações' },
-  { id: 'totalVitorias', accessorKey: 'totalVitorias', header: 'Vitórias' },
-  { id: 'taxaVitoria', accessorKey: 'taxaVitoria', header: 'Taxa' },
-]
+interface ApiOrgan {
+  ID: string
+  Nome: string
+  Esfera: string
+  Estado: string
+  Site: string
+  Telefone: string
+  Email: string
+  Observacoes: string
+  CreatedAt: string
+}
 
-const dados = computed(() => orgaos.map(o => ({
-  ...o,
-  taxaVitoria: o.totalParticipacoes > 0 ? `${Math.round((o.totalVitorias / o.totalParticipacoes) * 100)}%` : '0%',
-})))
+const { data: orgaos, refresh } = await useAsyncData('orgaos', () =>
+  apiFetch<ApiOrgan[]>('/organs')
+)
+
+// --- Menu dropdown ---
+const openMenuId = ref<string | null>(null)
+const menuPos = ref({ top: 0, right: 0 })
+
+function toggleMenu(id: string, event: MouseEvent) {
+  if (openMenuId.value === id) {
+    openMenuId.value = null
+    return
+  }
+  const btn = event.currentTarget as HTMLElement
+  const rect = btn.getBoundingClientRect()
+  menuPos.value = {
+    top: rect.bottom + window.scrollY + 4,
+    right: window.innerWidth - rect.right,
+  }
+  openMenuId.value = id
+}
+const closeMenu = () => { openMenuId.value = null }
+onMounted(() => document.addEventListener('click', closeMenu))
+onUnmounted(() => document.removeEventListener('click', closeMenu))
+
+// --- Modal Criar ---
+const showCreate = ref(false)
+const createForm = reactive({
+  nome: '', esfera: 'federal', estado: '',
+  site: '', telefone: '', email: '', observacoes: '',
+})
+const createError = ref('')
+const createLoading = ref(false)
+
+async function criarOrgao() {
+  createError.value = ''
+  createLoading.value = true
+  try {
+    await apiFetch('/organs', { method: 'POST', body: { ...createForm } })
+    showCreate.value = false
+    Object.assign(createForm, { nome: '', esfera: 'federal', estado: '', site: '', telefone: '', email: '', observacoes: '' })
+    await refresh()
+  } catch (err: any) {
+    createError.value = err?.data?.error || 'Erro ao criar órgão.'
+  } finally {
+    createLoading.value = false
+  }
+}
+
+// --- Modal Editar ---
+const showEdit = ref(false)
+const editOrgao = ref<ApiOrgan | null>(null)
+const editForm = reactive({
+  nome: '', esfera: 'federal', estado: '',
+  site: '', telefone: '', email: '', observacoes: '',
+})
+const editError = ref('')
+const editLoading = ref(false)
+
+function abrirEditar(o: ApiOrgan) {
+  editOrgao.value = o
+  Object.assign(editForm, {
+    nome: o.Nome, esfera: o.Esfera, estado: o.Estado,
+    site: o.Site, telefone: o.Telefone, email: o.Email, observacoes: o.Observacoes,
+  })
+  editError.value = ''
+  showEdit.value = true
+}
+
+async function salvarEdicao() {
+  if (!editOrgao.value) return
+  editError.value = ''
+  editLoading.value = true
+  try {
+    await apiFetch(`/organs/${editOrgao.value.ID}`, { method: 'PUT', body: { ...editForm } })
+    showEdit.value = false
+    await refresh()
+  } catch (err: any) {
+    editError.value = err?.data?.error || 'Erro ao salvar.'
+  } finally {
+    editLoading.value = false
+  }
+}
+
+// --- Modal Confirmação Exclusão ---
+const showDeleteConfirm = ref(false)
+const deleteTarget = ref<ApiOrgan | null>(null)
+const deletingId = ref<string | null>(null)
+
+function pedirExclusao(o: ApiOrgan) {
+  deleteTarget.value = o
+  showDeleteConfirm.value = true
+}
+
+async function confirmarExclusao() {
+  if (!deleteTarget.value) return
+  deletingId.value = deleteTarget.value.ID
+  try {
+    await apiFetch(`/organs/${deleteTarget.value.ID}`, { method: 'DELETE' })
+    showDeleteConfirm.value = false
+    deleteTarget.value = null
+    await refresh()
+  } catch {}
+  deletingId.value = null
+}
+
+// --- Helpers ---
+const esferaLabel: Record<string, string> = {
+  federal: 'Federal',
+  estadual: 'Estadual',
+  municipal: 'Municipal',
+}
+const esferaBadgeClass: Record<string, string> = {
+  federal: 'badge-federal',
+  estadual: 'badge-estadual',
+  municipal: 'badge-municipal',
+}
 </script>
 
 <template>
   <div class="page">
     <AppTopbar title="Órgãos Públicos" breadcrumb="Gestão · Órgãos">
       <template #actions>
-        <UButton size="sm" class="btn-primary">+ Adicionar Órgão</UButton>
+        <UButton size="sm" class="btn-primary" @click="showCreate = true">+ Adicionar Órgão</UButton>
       </template>
     </AppTopbar>
+
     <div class="content">
       <div class="card">
-        <UTable :data="dados" :columns="columns">
-          <template #esfera-cell="{ row }">{{ esferaLabel[row.original.esfera] }}</template>
-        </UTable>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Órgão</th>
+              <th>Esfera</th>
+              <th>UF</th>
+              <th>Contato</th>
+              <th style="width:48px"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="!orgaos?.length">
+              <td colspan="5" class="empty">Nenhum órgão cadastrado.</td>
+            </tr>
+            <tr v-for="o in orgaos" :key="o.ID">
+              <td class="td-nome">{{ o.Nome }}</td>
+              <td><span :class="['badge', esferaBadgeClass[o.Esfera]]">{{ esferaLabel[o.Esfera] }}</span></td>
+              <td>{{ o.Estado }}</td>
+              <td class="td-contato">
+                <span v-if="o.Email">{{ o.Email }}</span>
+                <span v-else-if="o.Telefone">{{ o.Telefone }}</span>
+                <span v-else class="muted">—</span>
+              </td>
+              <td>
+                <button class="menu-btn" @click.stop="toggleMenu(o.ID, $event)">⋯</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
+
+    <!-- Dropdown menu (Teleport para escapar do overflow da tabela) -->
+    <Teleport to="body">
+      <div
+        v-if="openMenuId"
+        class="dropdown-fixed"
+        :style="{ top: menuPos.top + 'px', right: menuPos.right + 'px' }"
+        @click.stop
+      >
+        <button @click="abrirEditar(orgaos!.find(o => o.ID === openMenuId)!); closeMenu()">Editar</button>
+        <button class="danger" @click="pedirExclusao(orgaos!.find(o => o.ID === openMenuId)!); closeMenu()">Excluir</button>
+      </div>
+    </Teleport>
+
+    <!-- Modal Criar -->
+    <Teleport to="body">
+      <div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
+        <div class="modal">
+          <div class="modal-header">
+            <h2>Novo Órgão</h2>
+            <button class="close-btn" @click="showCreate = false">✕</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Nome *</label>
+                <input v-model="createForm.nome" placeholder="Ex: Ministério da Saúde" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label>Esfera *</label>
+                <select v-model="createForm.esfera">
+                  <option value="federal">Federal</option>
+                  <option value="estadual">Estadual</option>
+                  <option value="municipal">Municipal</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>UF *</label>
+                <input v-model="createForm.estado" placeholder="Ex: DF" maxlength="2" style="text-transform:uppercase" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label>Telefone</label>
+                <input v-model="createForm.telefone" placeholder="(61) 3000-0000" />
+              </div>
+              <div class="form-group">
+                <label>E-mail</label>
+                <input v-model="createForm.email" type="email" placeholder="contato@orgao.gov.br" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Site</label>
+                <input v-model="createForm.site" placeholder="https://www.orgao.gov.br" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Observações</label>
+                <textarea v-model="createForm.observacoes" rows="3" placeholder="Informações adicionais..."></textarea>
+              </div>
+            </div>
+            <p v-if="createError" class="error-msg">{{ createError }}</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-cancel" @click="showCreate = false">Cancelar</button>
+            <button class="btn-save" :disabled="createLoading" @click="criarOrgao">
+              {{ createLoading ? 'Salvando...' : 'Criar Órgão' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Modal Editar -->
+    <Teleport to="body">
+      <div v-if="showEdit" class="modal-overlay" @click.self="showEdit = false">
+        <div class="modal">
+          <div class="modal-header">
+            <h2>Editar Órgão</h2>
+            <button class="close-btn" @click="showEdit = false">✕</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Nome *</label>
+                <input v-model="editForm.nome" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label>Esfera *</label>
+                <select v-model="editForm.esfera">
+                  <option value="federal">Federal</option>
+                  <option value="estadual">Estadual</option>
+                  <option value="municipal">Municipal</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>UF *</label>
+                <input v-model="editForm.estado" maxlength="2" style="text-transform:uppercase" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label>Telefone</label>
+                <input v-model="editForm.telefone" />
+              </div>
+              <div class="form-group">
+                <label>E-mail</label>
+                <input v-model="editForm.email" type="email" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Site</label>
+                <input v-model="editForm.site" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-group full">
+                <label>Observações</label>
+                <textarea v-model="editForm.observacoes" rows="3"></textarea>
+              </div>
+            </div>
+            <p v-if="editError" class="error-msg">{{ editError }}</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-cancel" @click="showEdit = false">Cancelar</button>
+            <button class="btn-save" :disabled="editLoading" @click="salvarEdicao">
+              {{ editLoading ? 'Salvando...' : 'Salvar' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Modal Confirmação Exclusão -->
+    <Teleport to="body">
+      <div v-if="showDeleteConfirm" class="modal-overlay" @click.self="showDeleteConfirm = false">
+        <div class="modal modal-sm">
+          <div class="modal-header">
+            <h2>Excluir Órgão</h2>
+            <button class="close-btn" @click="showDeleteConfirm = false">✕</button>
+          </div>
+          <div class="modal-body">
+            <p>Tem certeza que deseja excluir <strong>{{ deleteTarget?.Nome }}</strong>?</p>
+            <p class="muted" style="margin-top:8px">Esta ação não pode ser desfeita.</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-cancel" @click="showDeleteConfirm = false">Cancelar</button>
+            <button class="btn-danger" :disabled="!!deletingId" @click="confirmarExclusao">
+              {{ deletingId ? 'Excluindo...' : 'Excluir' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <style scoped>
 .page { display: flex; flex-direction: column; height: 100vh; }
 .content { padding: 20px 22px; flex: 1; overflow-y: auto; }
-.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
+.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: visible; }
 .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
+
+.table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.table th { padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
+.table td { padding: 13px 16px; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; }
+.table tr:last-child td { border-bottom: none; }
+.table tr:hover td { background: #f8fafc; }
+
+.td-nome { font-weight: 500; }
+.td-contato { color: #64748b; font-size: 13px; }
+.muted { color: #94a3b8; }
+.empty { text-align: center; color: #94a3b8; padding: 40px; }
+
+.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; }
+.badge-federal  { background: #dbeafe; color: #1d4ed8; }
+.badge-estadual { background: #dcfce7; color: #16a34a; }
+.badge-municipal{ background: #ffedd5; color: #c2410c; }
+
+.menu-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: #94a3b8; padding: 4px 8px; border-radius: 6px; line-height: 1; }
+.menu-btn:hover { background: #f1f5f9; color: #475569; }
+
+/* Modais */
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal { background: white; border-radius: 12px; width: 560px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
+.modal-sm { width: 400px; }
+.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid #e2e8f0; }
+.modal-header h2 { font-size: 17px; font-weight: 600; margin: 0; color: #1e293b; }
+.close-btn { background: none; border: none; font-size: 16px; cursor: pointer; color: #94a3b8; padding: 4px; }
+.close-btn:hover { color: #475569; }
+.modal-body { padding: 20px 24px; }
+.modal-footer { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #f1f5f9; }
+
+.form-row { display: flex; gap: 14px; margin-bottom: 14px; }
+.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; }
+.form-group.full { flex: 1 1 100%; }
+.form-group label { font-size: 13px; font-weight: 500; color: #374151; }
+.form-group input, .form-group select, .form-group textarea {
+  border: 1px solid #d1d5db; border-radius: 7px; padding: 8px 11px;
+  font-size: 14px; color: #1e293b; outline: none; width: 100%; box-sizing: border-box;
+  font-family: inherit;
+}
+.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.15); }
+.form-group textarea { resize: vertical; }
+.error-msg { color: #ef4444; font-size: 13px; margin-top: 8px; }
+
+.btn-cancel { padding: 8px 18px; border: 1px solid #e2e8f0; border-radius: 7px; background: white; cursor: pointer; font-size: 14px; color: #64748b; }
+.btn-cancel:hover { background: #f8fafc; }
+.btn-save { padding: 8px 20px; border: none; border-radius: 7px; background: linear-gradient(135deg,#667eea,#764ba2); color: white; cursor: pointer; font-size: 14px; font-weight: 500; }
+.btn-save:hover:not(:disabled) { opacity: .9; }
+.btn-save:disabled { opacity: .6; cursor: not-allowed; }
+.btn-danger { padding: 8px 20px; border: none; border-radius: 7px; background: #ef4444; color: white; cursor: pointer; font-size: 14px; font-weight: 500; }
+.btn-danger:hover:not(:disabled) { background: #dc2626; }
+.btn-danger:disabled { opacity: .6; cursor: not-allowed; }
+</style>
+
+<!-- CSS global para o dropdown teleportado (não pode ser scoped) -->
+<style>
+.dropdown-fixed {
+  position: fixed;
+  z-index: 9999;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,.12);
+  min-width: 140px;
+  overflow: hidden;
+}
+.dropdown-fixed button {
+  display: block;
+  width: 100%;
+  padding: 9px 16px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: #1e293b;
+}
+.dropdown-fixed button:hover { background: #f8fafc; }
+.dropdown-fixed button.danger { color: #ef4444; }
+.dropdown-fixed button.danger:hover { background: #fef2f2; }
 </style>