Frontend (stCall)

O frontend é uma aplicação Nuxt 3 com PrimeVue para UI e Pinia para gerenciamento de estado.

Stack

Componentes PrimeVue

Convenção de Nomes

Os componentes PrimeVue são usados em PascalCase sem prefixo:

<!-- CORRETO -->
<Button label="Salvar" />
<DataTable :value="dados">
<Dialog v-model:visible="visivel">
<Card>

<!-- ERRADO - NÃO usar prefixo p- -->
<p-button />
<p-data-table />

O prefixo p no nuxt.config.ts é apenas para classes CSS, não para nomes de componentes.

Tema

O tema é baseado no Aura preset do PrimeVue com cor primária laranja:

• Configurado em theme.config.ts
• Modo escuro: classe .stcall-dark-mode
• Ripple effect habilitado
• Input variant: filled

Pinia Stores

authStore

Gerencia autenticação e dados do usuário.

callStore

Gerencia chamadas ativas e histórico.

asteriskStore

Gerencia conexão WebSocket com stcall-ws.

agentStore

Gerencia dados e status dos agentes.

uiStore

Gerencia preferências de UI (dark mode, notificações, compacto).

audioStore

Gerencia configurações de áudio (dispositivos, volumes).

dialerStore

Gerencia estado do discador.

Composables

Os composables são auto-importados pelo Nuxt. Não crie index.ts barrel exports no diretório composables/.

<script setup lang="ts">
// CORRETO - auto-importado
const { callDuration } = useCallDuration(() => activeCall.value)
const { formatDuration } = useCallFormatters()

// ERRADO - não importar explicitamente
import { useCallDuration } from '~/composables'
</script>

Principais Composables

Layouts

default.vue

Layout principal com sidebar + topbar + área de conteúdo. Usado por todas as páginas exceto login.

blank.vue

Layout mínimo sem sidebar/topbar. Usado pela página de login.

Middleware

auth.global.ts

Middleware global que verifica autenticação em todas as rotas. Redireciona para /login se não autenticado.

admin.ts

Middleware para rotas administrativas. Verifica papel de admin/supervisor.

Tipos

Os tipos são definidos em types/ com barrel export em types/index.ts:

import type { Call, Agent, User } from '~/types'

Tipos Principais

type CallStatus = 'active' | 'ringing' | 'transferring' | 'missed' | 'completed'
type CallDirection = 'inbound' | 'outbound'
type AgentStatus = 'available' | 'on-call' | 'unavailable' | 'offline'
type UserRole = 'admin' | 'agent' | 'supervisor'

Padrão de Toast

O sistema de notificações toast está disponível globalmente:

const toast = useToast()
toast.add({
  severity: 'success',
  summary: 'Sucesso',
  detail: 'Operação concluída',
  life: 3000,
})

Severidades: success, error, warn, info