Sothis/omnichannel-frontend

Table of Contents

Estrutura de Pastas

Visao geral
src/routes
src/shared
src/modules
Padrao de organizacao por modulo

Estrutura de Pastas

Visao geral

O frontend e organizado por modulos funcionais dentro de src/modules e por recursos compartilhados dentro de src/shared.

src/
|-- main.jsx
|-- routes/
|-- shared/
`-- modules/

`src/routes`

Define as rotas principais da aplicacao.

Arquivos importantes:

router.jsx: mapa de rotas.
ProtectedRoute.jsx: bloqueia acesso a paginas privadas quando nao existe sessao autenticada.

`src/shared`

Contem recursos usados por mais de um modulo:

services/apiConfig.js: URL da API e URL do Socket.IO.
services/authFetch.js: intercepta chamadas fetch para enviar Bearer token.
hooks/useWhatsappSocket.js: conexao Socket.IO com o namespace /whatsapp.
styles/global.css: estilos globais.

`src/modules`

Cada pasta representa uma area funcional:

auth: login, sessao e provedores de autenticacao.
home: experiencia inicial conforme perfil.
chat: atendimento em tempo real.
call: painel do atendente.
attendance: novo atendimento e abertura ativa.
management: painel administrativo e supervisor.

Padrao de organizacao por modulo

Quando o modulo cresce, a estrutura esperada e:

modulo/
|-- components/
|-- hooks/
|-- pages/
`-- services/

Regra pratica:

pages: telas roteadas.
components: partes reutilizaveis da tela.
hooks: estado e comportamento de tela.
services: chamadas para API ou normalizacao de dados.