Desenvolvimento
Estrutura do Projeto
Organização de diretórios e arquivos do frontend e backend.
Estrutura do Projeto
Frontend (stCall)
stCall/
├── app.vue # Componente raiz (Toast, IncomingCall, TabBlocked)
├── nuxt.config.ts # Configuração Nuxt (módulos, tema, runtime config)
├── theme.config.ts # Tema PrimeVue (cores laranja)
├── tailwind.config.cjs # Configuração Tailwind CSS
├── tsconfig.json # TypeScript (extends .nuxt/tsconfig)
├── package.json # Dependências
├── Dockerfile # Imagem Docker (oven/bun:1-alpine)
├── docker-compose.yml # Compose para desenvolvimento local
│
├── assets/css/
│ └── tailwind.css # Imports do Tailwind
│
├── components/ # Componentes Vue (auto-importados)
│ ├── ActiveCallDisplay.vue # Display de chamada ativa (full/compact)
│ ├── AppSidebar.vue # Barra lateral de navegação
│ ├── AudioPlayer.vue # Reprodutor de áudio
│ ├── Dialer.vue # Teclado de discagem
│ ├── IncomingCallDialog.vue # Diálogo de chamada entrante
│ ├── MicrophoneSelector.vue # Seletor de microfone
│ ├── OutgoingCallDialog.vue # Diálogo de chamada saindo
│ ├── PasswordRecoveryDialog.vue
│ ├── RecentCallItem.vue # Item de chamada recente
│ ├── StatCard.vue # Card de estatística
│ ├── TabBlockedOverlay.vue # Overlay para instância única
│ ├── TopBar.vue # Barra superior
│ ├── VolumeIndicator.vue # Indicador de volume
│ └── WebRTCAudioPlayer.vue # Player de áudio WebRTC (invisível)
│
├── composables/ # Composables (auto-importados pelo Nuxt)
│ ├── agent/ # Gerenciamento de agentes
│ │ ├── useAgentConnection.ts
│ │ └── useAgentStatus.ts
│ ├── audio/ # Áudio e microfone
│ │ ├── useAudioLevel.ts
│ │ └── useMicTest.ts
│ ├── calls/ # Lógica de chamadas
│ │ ├── useCallControls.ts
│ │ ├── useCallDuration.ts
│ │ ├── useCallEvents.ts
│ │ ├── useCallFormatters.ts
│ │ ├── useCallHandler.ts
│ │ ├── useCallHistoryFilters.ts
│ │ ├── useCallLifecycle.ts
│ │ ├── useCallStatus.ts
│ │ └── useRecordingPlayer.ts
│ ├── storage/
│ │ └── useCallHistoryPersistence.ts
│ ├── utils/
│ │ └── useCommandExecutor.ts
│ ├── webrtc/ # Integração WebRTC
│ │ ├── useWebRTCCall.ts
│ │ ├── useWebRTCIntegration.ts
│ │ ├── useWebRTCMedia.ts
│ │ ├── useWebRTCPhone.ts
│ │ ├── useWebRTCSession.ts
│ │ └── useWebRTCState.ts
│ ├── ws/ # Integração WebSocket
│ │ ├── useAsteriskEventHandler.ts
│ │ ├── useWebSocketCommands.ts
│ │ ├── useWebSocketConnection.ts
│ │ ├── useWebSocketErrors.ts
│ │ ├── useWebSocketHandler.ts
│ │ ├── useWebSocketHeartbeat.ts
│ │ ├── useWebSocketMessageRouter.ts
│ │ └── useWebSocketReconnection.ts
│ ├── useAuthAPI.ts
│ ├── useDialer.ts
│ ├── useGlobalToast.ts
│ ├── useSessionManager.ts
│ ├── useSingleInstance.ts
│ └── useTokenStorage.ts
│
├── stores/ # Pinia stores
│ ├── agentStore.ts # Dados e status dos agentes
│ ├── asteriskStore.ts # Conexão WebSocket com stcall-ws
│ ├── audioStore.ts # Configurações de áudio
│ ├── authStore.ts # Autenticação e papel do usuário
│ ├── callStore.ts # Chamada ativa e histórico
│ ├── dialerStore.ts # Estado do discador
│ └── uiStore.ts # Preferências de UI (dark mode, notificações)
│
├── pages/ # Rotas (file-based routing)
│ ├── index.vue # Dashboard (/)
│ ├── agents.vue # Gerenciamento de agentes (/agents)
│ ├── call.vue # Interface de chamada (/call)
│ ├── history.vue # Histórico (/history)
│ ├── login.vue # Login (/login) - layout blank
│ ├── profile.vue # Perfil (/profile)
│ ├── settings.vue # Configurações (/settings)
│ ├── mic-test.vue # Teste de microfone (/mic-test)
│ ├── test-asterisk.vue # Teste Asterisk (/test-asterisk)
│ └── admin/
│ ├── index.vue # Dashboard admin (/admin)
│ └── analytics.vue # Analytics (/admin/analytics)
│
├── layouts/ # Templates de layout
│ ├── default.vue # Sidebar + TopBar + conteúdo
│ └── blank.vue # Mínimo (usado no login)
│
├── middleware/ # Middleware de rota
│ ├── auth.global.ts # Autenticação global
│ ├── admin.ts # Proteção de rotas admin
│ └── root-redirect.global.ts # Redirecionamento da raiz
│
├── plugins/
│ └── primevue.ts # Configuração do PrimeVue
│
├── types/ # Definições TypeScript
│ ├── index.ts # Barrel export
│ ├── agent.ts # Agent, AgentStatus, AgentStats
│ ├── asterisk.ts # Tipos do Asterisk
│ ├── call.ts # Call, CallHistory, CallStatus
│ ├── ui.ts # Notification, ReleaseNote
│ ├── user.ts # User, LoginResponse
│ └── runtime-config.d.ts # Config de runtime
│
├── utils/
│ ├── jwt.ts # Utilidades JWT
│ └── toastManager.ts # Gerenciador de toasts
│
└── server/
├── api/asterisk/test.get.ts # API de teste Asterisk
└── utils/asterisk.ts # Utilidades do Asterisk
WebSocket Server (websockets-stcall)
websockets-stcall/
├── src/
│ ├── server.ts # Entry point principal
│ ├── healthcheck.ts # Endpoint de health check
│ │
│ ├── agents/ # Gerenciamento de agentes
│ │ ├── auth.ts # Validação JWT
│ │ ├── authentication.ts # Lógica de autenticação
│ │ └── registry.ts # Registro de agentes (Map)
│ │
│ ├── asterisk/ # Integração Asterisk
│ │ ├── ami-connection.ts # Conexão AMI
│ │ ├── api-client.ts # Cliente REST ARI
│ │ └── connection.ts # Conexão ARI WebSocket
│ │
│ ├── commands/
│ │ └── handler.ts # Handler de comandos dos agentes
│ │
│ ├── database/
│ │ ├── calls.ts # Operações de chamadas
│ │ ├── cdr-client.ts # Cliente CDR
│ │ ├── prisma-client.ts # Inicialização Prisma
│ │ └── users.ts # Operações de usuários
│ │
│ ├── routes/ # Rotas HTTP
│ │ ├── auth.ts # Rota de autenticação
│ │ ├── pjsip-sync.ts # Rota de sincronização PJSIP
│ │ └── users.ts # Rota de usuários
│ │
│ ├── routing/
│ │ └── filter.ts # Filtro de eventos ARI
│ │
│ ├── services/
│ │ ├── call-tracker.ts # Rastreamento de chamadas
│ │ ├── direct-call-tracker.ts
│ │ ├── incoming-call-bridge.ts
│ │ ├── pjsip-sync.ts # Sincronização PJSIP
│ │ ├── queue-tracker.ts # Rastreamento de filas
│ │ ├── sip-sync.ts
│ │ └── freepbx/ # Integração FreePBX GraphQL
│ │ ├── auth.ts
│ │ ├── client.ts
│ │ ├── extensions.ts
│ │ ├── index.ts
│ │ └── types.ts
│ │
│ ├── types/
│ │ ├── index.ts # Tipos principais
│ │ └── ami-events.ts # Tipos de eventos AMI
│ │
│ └── utils/
│ ├── api-helpers.ts
│ ├── config.ts # Configuração centralizada
│ ├── encryption.ts # Criptografia de senhas SIP
│ ├── logger.ts # Logger estruturado JSON
│ └── password.ts # Utilitários de senha
│
├── prisma/
│ ├── schema.prisma # Schema MySQL (FreePBX)
│ ├── schema-stcall.prisma # Schema PostgreSQL (stCall)
│ └── schema-cdr.prisma # Schema MySQL (CDR)
│
├── database/
│ └── init-schema.sql # SQL de inicialização
│
├── scripts/
│ └── generate-password-hashes.ts
│
├── prisma.config.ts # Config Prisma PostgreSQL
├── prisma-freepbx.config.ts # Config Prisma MySQL
├── docker-compose.yml # Compose: WS + PostgreSQL + pgAdmin
├── Dockerfile
└── package.json