lic/front-end/app/components/AppSidebar.vue

<script setup lang="ts">
const { user, logout } = useAuth()
const route = useRoute()
const { apiFetch } = useApi()

const { data: editais } = await useAsyncData('sidebar-editais', () =>
  apiFetch<{ Status: string }[]>('/editais'), { server: false }
)
const { data: documentos } = await useAsyncData('sidebar-documentos', () =>
  apiFetch<{ DataVencimento: string | null }[]>('/documents'), { server: false }
)

const contagemPorStatus = computed(() => {
  const counts: Record<string, number> = {}
  for (const e of editais.value ?? []) {
    counts[e.Status] = (counts[e.Status] ?? 0) + 1
  }
  return counts
})

const alertasPrazos = computed(() => 0)
const docsVencendo = computed(() => {
  const hoje = new Date()
  const limite = new Date(hoje.getTime() + 30 * 24 * 60 * 60 * 1000)
  return (documentos.value ?? []).filter(d => {
    if (!d.DataVencimento) return false
    const venc = new Date(d.DataVencimento)
    return venc <= limite
  }).length
})

const navItems = computed(() => [
  {
    label: '',
    items: [
      { label: 'Dashboard', icon: 'i-heroicons-home', to: '/' },
    ],
  },
  {
    label: 'Oportunidades',
    items: [
      { label: 'Todos os Editais', icon: 'i-heroicons-clipboard-document-list', to: '/oportunidades', badge: (editais.value ?? []).length, badgeVariant: 'default' },
      { label: 'Mapeamento', icon: 'i-heroicons-magnifying-glass', to: '/oportunidades/em-analise', badge: contagemPorStatus.value.em_analise ?? 0, badgeVariant: 'default' },
      { label: 'Termo de Referência', icon: 'i-heroicons-pencil-square', to: '/oportunidades/elaborando-proposta', badge: contagemPorStatus.value.elaborando_proposta ?? 0, badgeVariant: 'warning' },
      { label: 'Edital Publicado', icon: 'i-heroicons-megaphone', to: '/oportunidades/edital-publicado', badge: contagemPorStatus.value.edital_publicado ?? 0, badgeVariant: 'default' },
      { label: 'Fase de Lances', icon: 'i-heroicons-play', to: '/oportunidades/fase-lances', badge: contagemPorStatus.value.fase_lances ?? 0, badgeVariant: 'default' },
      { label: 'Recurso', icon: 'i-heroicons-scale', to: '/oportunidades/recurso', badge: contagemPorStatus.value.recurso ?? 0, badgeVariant: 'warning' },
      { label: 'Vencidas', icon: 'i-heroicons-trophy', to: '/oportunidades/vencidas', badge: contagemPorStatus.value.vencida ?? 0, badgeVariant: 'success' },
      { label: 'Perdidas', icon: 'i-heroicons-x-circle', to: '/oportunidades/perdidas', badge: contagemPorStatus.value.perdida ?? 0, badgeVariant: 'neutral' },
    ],
  },
  {
    label: 'Pipeline',
    items: [
      { label: 'Kanban de Processos', icon: 'i-heroicons-view-columns', to: '/pipeline' },
    ],
  },
  {
    label: 'Gestão',
    items: [
      { label: 'Documentos', icon: 'i-heroicons-folder', to: '/gestao/documentos', badge: docsVencendo.value || undefined, badgeVariant: 'warning' },
      { label: 'Prazos', icon: 'i-heroicons-clock', to: '/gestao/prazos', badge: alertasPrazos.value || undefined, badgeVariant: 'warning' },
      { label: 'Órgãos Públicos', icon: 'i-heroicons-building-library', to: '/gestao/orgaos' },
      { label: 'Concorrentes', icon: 'i-heroicons-building-office-2', to: '/gestao/concorrentes' },
      { label: 'Contratos', icon: 'i-heroicons-document-text', to: '/gestao/contratos' },
    ],
  },
  {
    label: 'Inteligência',
    items: [
      { label: 'Inteligência de Mercado', icon: 'i-heroicons-chart-bar', to: '/inteligencia' },
    ],
  },
  {
    label: 'Sistema',
    items: [
      { label: 'Usuários', icon: 'i-heroicons-users', to: '/sistema/usuarios' },
      { label: 'Configurações', icon: 'i-heroicons-cog-6-tooth', to: '/sistema/configuracoes' },
    ],
  },
])

function isActive(to: string) {
  return route.path === to
}
</script>

<template>
  <aside class="sidebar">
    <div class="sidebar-logo">
      <div class="logo-icon">
        <UIcon name="i-heroicons-home" class="text-white w-4 h-4" />
      </div>
      <span class="logo-name">Licitatche</span>
    </div>

    <nav class="sidebar-nav">
      <template v-for="group in navItems" :key="group.label">
        <p v-if="group.label" class="nav-label">{{ group.label }}</p>
        <NuxtLink
          v-for="item in group.items"
          :key="item.to"
          :to="item.to"
          class="nav-item"
          :class="{ active: isActive(item.to) }"
        >
          <UIcon :name="item.icon" class="nav-icon" />
          <span class="nav-text">{{ item.label }}</span>
          <UBadge
            v-if="item.badge"
            :label="String(item.badge)"
            variant="soft"
            :color="item.badgeVariant === 'warning' ? 'warning' : item.badgeVariant === 'success' ? 'success' : item.badgeVariant === 'neutral' ? 'neutral' : 'primary'"
            size="xs"
          />
        </NuxtLink>
        <div v-if="group.label" class="nav-divider" />
      </template>
    </nav>

    <div class="sidebar-footer">
      <div class="user-row">
        <UAvatar :alt="user?.nome ?? 'A'" size="xs" />
        <div class="user-info">
          <p class="user-name">{{ user?.nome }}</p>
          <p class="user-role">{{ user?.papel }}</p>
        </div>
        <UButton icon="i-heroicons-arrow-right-on-rectangle" variant="ghost" color="neutral" size="xs" @click="logout" />
      </div>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 232px;
  min-height: 100vh;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-logo {
  padding: 18px 14px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #1e293b;
  position: sticky;
  top: 0;
  background: #0f172a;
  z-index: 1;
}
.logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.logo-name { font-size: 14px; font-weight: 700; color: #f1f5f9; }
.sidebar-nav { padding: 8px; flex: 1; }
.nav-label {
  font-size: 9.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 8px 3px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px;
  color: #94a3b8; text-decoration: none;
  font-size: 12.5px; margin-bottom: 1px;
  transition: background 0.15s;
}
.nav-item:hover { background: #1e293b; color: #e2e8f0; }
.nav-item.active { background: #1e3a5f; color: #93c5fd; }
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.nav-text { flex: 1; }
.nav-divider { height: 1px; background: #1e293b; margin: 4px 0; }
.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid #1e293b;
  position: sticky; bottom: 0; background: #0f172a;
}
.user-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; }
.user-row:hover { background: #1e293b; }
.user-info { flex: 1; }
.user-name { font-size: 12px; font-weight: 600; color: #e2e8f0; }
.user-role { font-size: 10.5px; color: #64748b; }
</style>