O frontend do NexarGrid é uma Progressive Web App (PWA) sofisticada construída sobre Vue.js 3, utilizando a Composition API e TypeScript. Foi projetado para lidar com as interações complexas e intensivas em dados necessárias para a gestão de escalas médicas, priorizando performance, segurança de tipos e manutenibilidade.

# Stack Tecnológico Principal

• Framework: Vue.js 3.3+ (Composition API, <script setup>)
• Linguagem: TypeScript 5.0+ (Strict Mode ativado)
• Build Tool: Vite 4.0+ (HMR rápido, builds de produção otimizados)
• UI Framework: Quasar Framework (Componentes Material Design, grid responsivo)
• Gerenciamento de Estado: Pinia (Stores modulares e tipadas)
• Roteamento: Vue Router 4 (Lazy loading, guardas de navegação)
• Cliente HTTP: Axios (Interceptadores, tratamento global de erros)

# Estrutura de Diretórios

O projeto segue uma estrutura modular baseada em funcionalidades para garantir escalabilidade:

src/
├── assets/             # Assets estáticos (imagens, fontes, estilos globais)
├── boot/               # Scripts de inicialização (Axios, i18n, componentes globais)
├── components/         # Componentes de UI compartilhados (atomic design)
│   ├── common/         # Botões genéricos, inputs, modais
│   └── grid/           # Componentes específicos para o Grid de Escalas
├── composables/        # Lógica reutilizável (Vue Composables)
├── layouts/            # Layouts da aplicação (MainLayout, AuthLayout)
├── pages/              # Views de rota
│   ├── auth/           # Login, Redefinição de Senha
│   ├── dashboard/      # Widgets de KPI
│   └── grid/           # Interface Principal do Agendador
├── router/             # Definições de rotas e guardas
├── stores/             # Stores de estado do Pinia
├── types/              # Interfaces e tipos TypeScript
└── utils/              # Funções auxiliares (formatação de data, validação)

# Estratégia de Gerenciamento de Estado (Pinia)

Utilizamos o Pinia por seu suporte superior ao TypeScript e modularidade em comparação ao Vuex. O estado é dividido em stores específicas por domínio:

# 1. useAuthStore

Gerencia a sessão e identidade do usuário.

• Estado: user, token, permissions.
• Actions: login(), logout(), refreshToken(), checkPermission().
• Persistência: Persistido no localStorage para restauração de sessão.

# 2. useGridStore

A store central para a interface de agendamento.

• Estado: currentMonth, selectedUnit, shiftPacks (Map<id, ShiftPack>), filters.
• Getters: filteredShifts, totalHours, conflictsCount.
• Actions: loadGrid(), publishGrid(), applyFilters().

# 3. useShiftStore

Gerencia o estado transitório das operações de turno (drag-and-drop).

• Estado: draggedShift, dropTarget, isDragging.
• Actions: startDrag(), validateDrop(), commitMove().

# Roteamento e Guardas de Navegação

O Vue Router gerencia a navegação com controle de acesso estrito:

• Guarda Global (beforeEach): Verifica a existência de um token JWT válido. Redireciona para /login se ausente ou expirado.
• Guarda Baseada em Função: Verifica meta.requiresRole contra as permissões do usuário. Redireciona para /unauthorized se o acesso for negado.
• Lazy Loading: Todos os componentes de rota são importados dinamicamente (() => import('./Page.vue')) para reduzir o tamanho do bundle inicial.

# Arquitetura CSS

Utilizamos SCSS com a convenção de nomenclatura BEM para estilos customizados, juntamente com classes utilitárias do Tailwind CSS para layout e espaçamento.

• Variáveis Globais: Definidas em src/css/quasar.variables.scss (cores, breakpoints).
• Estilos Escopados: Usados dentro dos componentes para prevenir vazamento de estilos.
• Dark Mode: Totalmente suportado via plugin de modo escuro do Quasar, alternado via preferência do usuário.