Initial commit

2026-08-31 14:10:20 -03:00
commit 8fcb5aac66
454 changed files with 60207 additions and 0 deletions
@@ -0,0 +1,217 @@
+# Plano de Responsividade Mobile + Reutilizacao de Codigo
+
+## Breakpoints alvo
+
+| Nome  | Largura | Dispositivo                    |
+|-------|---------|--------------------------------|
+| xs    | < 640px | iPhone SE, pequenos            |
+| sm    | 640px+  | Smartphones grandes            |
+| md    | 768px+  | Tablets retrato                |
+| lg    | 1024px+ | Tablets paisagem / laptops     |
+
+---
+
+## Fase 0: Extrair componentes base (reutilizacao)
+
+Antes de aplicar responsividade, consolidar codigo duplicado.
+
+### 0.1 Componentes novos a criar
+
+| Componente           | Substitui                                      | Arquivos afetados |
+|----------------------|------------------------------------------------|-------------------|
+| `Modal`              | 11 copias do overlay `fixed inset-0 bg-black/50` | 11 arquivos       |
+| `TableWrapper`       | 9 wrappers identicos de tabela admin            | 9 arquivos        |
+| `MaterialsList`      | Listagem de materiais nos 3 ClassDetail         | 3 arquivos        |
+| `ClassHistoryList`   | 3 versoes (teacher/student/guardian)            | 3 arquivos        |
+| `PaymentForm` unificado | 2 PaymentForms 98% identicos                | 2 arquivos        |
+| `FormField`          | Padrao label+input+helper repetido em 4 forms   | 4 arquivos        |
+| `Spinner`            | SVG de loading copiado em 2+ arquivos           | 2+ arquivos       |
+
+### 0.2 Componentes existentes nao utilizados
+
+| Componente existente                              | Redefinido inline em                | Acao                      |
+|---------------------------------------------------|-------------------------------------|---------------------------|
+| `Card` (`dashboard/components/Card.jsx`)          | 20 ocorrencias em 10 arquivos       | Importar em vez de inline |
+| `Stat` (`dashboard/components/Stat.jsx`)          | Redefinido localmente em 2 arquivos | Importar                  |
+| `Row` (`dashboard/components/Row.jsx`)            | Redefinido em `StudentClassDetail`  | Importar                  |
+| `Button` (`shared/Button.jsx`)                    | Redefinido em `StudentClassDetail`  | Importar                  |
+| `DashboardLayout`                                 | Existe mas zero paginas usam        | Adotar ou remover         |
+| `dateUtils.js`                                    | `formatDateBR` redefinido em 12 arquivos (22 instancias) | Importar |
+
+### 0.3 Funcoes utilitarias a centralizar
+
+| Funcao             | Onde centralizar                   | Redefinida em       |
+|--------------------|------------------------------------|---------------------|
+| `formatDateBR`     | `@/app/lib/utils/dateUtils.js`     | 12 arquivos         |
+| `formatTime`       | `@/app/lib/utils/dateUtils.js`     | 2 ExamResults       |
+| `normalizeStatus`  | `@/app/lib/utils/statusPatterns.js`| 5 arquivos          |
+
+---
+
+## Fase 1: Layout responsivo global
+
+### 1.1 Admin Sidebar -- Drawer off-canvas
+
+**Arquivos**: `SideBarNav.jsx:7`, `admin/layout.jsx:22-28`
+
+**Problema**: Sidebar fixa `w-64` (256px) visivel em todas as telas. Em celulares de 375px, sobram ~119px para conteudo.
+
+**Solucao**:
+- Criar `MobileSidebarToggle` (hamburger button) visivel apenas em `md:hidden`
+- Sidebar: `hidden md:flex` + state para abrir/fechar no mobile com overlay
+- Usar `@headlessui/react` (ja no projeto) para o Dialog/Drawer
+- Drawer aberto: largura `w-72` + overlay escuro
+- Animação de slide-in/slide-out
+
+### 1.2 Page container padronizado
+
+**Problema**: 14+ paginas com container `max-w-6xl mx-auto p-6` hardcoded de formas inconsistentes.
+
+**Solucao**: Padronizar usando `MainSection` ou `DashboardLayout` com padding responsivo:
+```
+px-4 sm:px-6 lg:px-8 py-4 sm:py-6
+```
+
+| Pagina                     | Container atual                  | Correcao                   |
+|----------------------------|----------------------------------|----------------------------|
+| `student/StudentClassDetail` | `max-w-6xl p-6` (sem mx-auto) | Adicionar `mx-auto`        |
+| `guardian/GuardianClassDetail` | `w-full p-6`                  | `max-w-6xl mx-auto p-4 sm:p-6` |
+| `guardian/GuardianClassHistoryList` | `w-full` sem padding   | Adicionar `px-4 sm:px-6`   |
+| Todas as outras            | Variacoes de `max-w-6xl mx-auto p-6` | Padronizar via `MainSection` |
+
+### 1.3 `PageHeader` -- actions com wrap
+
+**Arquivo**: `shared/PageHeader.jsx:29`
+
+**Correcao**: Adicionar `flex-wrap` no div de actions. Resolve ~9 paginas de uma vez.
+
+---
+
+## Fase 2: Componentes responsivos (1 correcao aplica-se a N paginas)
+
+### 2.1 `Modal` (novo componente)
+
+```
+max-w-[95vw] sm:max-w-2xl md:max-w-4xl
+```
+ padding responsivo `p-4 sm:p-6`
+
+**Afeta**: 11 modais
+
+### 2.2 `TableWrapper` (novo componente)
+
+- `overflow-x-auto` por padrao
+- Borda e estilo consistentes
+
+**Afeta**: 9 tabelas admin
+
+### 2.3 `MainSection` -- padding responsivo
+
+```
+p-4 sm:p-6
+```
+
+**Afeta**: todas as paginas que usam `MainSection`
+
+---
+
+## Fase 3: Ajustes por componente
+
+### 3.1 Grids sem breakpoint responsivo
+
+| Arquivo                                  | Linha | Atual             | Correcao                        |
+|------------------------------------------|-------|-------------------|---------------------------------|
+| `teacher/ExamResults.jsx`                | 140   | `grid-cols-3`     | `grid-cols-1 sm:grid-cols-3`   |
+| `teacher/ExamResults.jsx`                | 251   | `grid-cols-2`     | `grid-cols-1 sm:grid-cols-2`   |
+| `exam-templates/TemplateForm.jsx`        | 485   | `grid-cols-2`     | `grid-cols-1 sm:grid-cols-2`   |
+| `exam-templates/AssignmentForm.jsx`      | 485   | `grid-cols-2`     | `grid-cols-1 sm:grid-cols-2`   |
+
+### 3.2 Tabela com overflow-hidden
+
+| Arquivo                    | Linha | Atual             | Correcao          |
+|----------------------------|-------|-------------------|-------------------|
+| `teacher/ClassDetail.jsx`  | 304   | `overflow-hidden` | `overflow-x-auto` |
+
+### 3.3 Flex layouts que transbordam
+
+| Arquivo                          | Linha    | Correcao                                    |
+|----------------------------------|----------|---------------------------------------------|
+| `student/TakeExam.jsx`           | 211      | `flex-wrap` + `gap-2`                       |
+| `dashboard/student/page.jsx`     | 29       | `flex-wrap` nos botoes                      |
+| `teacher/ExamResults.jsx`        | 169      | `flex-wrap` nos metadados                   |
+| `student/ExamResults.jsx`        | 269      | `flex-wrap gap-4` no resumo                 |
+| `lessons/LessonForm.jsx`         | 372-376  | `flex-col sm:flex-row`                      |
+| `teacher/AssignmentList.jsx`     | 127      | `flex-wrap gap-2`                           |
+| `exam-templates/TemplateList.jsx`| 153      | `flex-wrap` nos botoes                      |
+| `student/AvailableExams.jsx`     | 187, 231 | `flex-col sm:flex-row`                      |
+
+### 3.4 Texto longo sem quebra
+
+| Arquivo                                | Linha | Correcao            |
+|----------------------------------------|-------|---------------------|
+| `guardian/GuardianClassDetail.jsx`     | 40    | `break-words`       |
+| `teacher/class/[id]/page.jsx`         | 212   | Truncar no mobile   |
+
+### 3.5 Tabelas com muitas colunas -- ocultar no mobile
+
+| Arquivo                        | Colunas | Correcao                              |
+|--------------------------------|---------|---------------------------------------|
+| `teacher/ExamStatistics.jsx`   | 7       | `hidden sm:table-cell` nas colunas menos importantes |
+| `guardian/payments/page.jsx`   | 6       | Ocultar "Comprovante" no mobile       |
+
+### 3.6 Botoes que podem empilhar
+
+| Arquivo          | Linha | Correcao                |
+|------------------|-------|-------------------------|
+| `PaymentForm.jsx`| 193   | `flex-col sm:flex-row`  |
+| `RegisterForm.jsx`| 253  | `flex-col sm:flex-row`  |
+
+---
+
+## Header mobile -- ja parcialmente implementado
+
+O `Header.jsx` ja tem navegacao mobile (`md:hidden` com scroll horizontal). Pontos de melhoria:
+- Chips de navegacao mobile (linhas 147-162) poderiam usar icones maiores e mais touch-friendly
+- Considerar colapsar os chips em menu hamburger quando ha mais de 4 items (admin tem 6 links)
+
+---
+
+## Resumo de prioridade de execucao
+
+1. **Fase 0** -- Extrair componentes base (maior esforco, maior ganho em manutenibilidade)
+2. **Fase 1** -- Layout global responsivo (sidebar + containers + page header)
+3. **Fase 2** -- Componentes responsivos reutilizaveis (Modal + TableWrapper)
+4. **Fase 3** -- Ajustes pontuais por componente (grids, flex, tabelas)
+
+---
+
+## Metricas estimadas
+
+| Metricica                          | Valor                |
+|------------------------------------|----------------------|
+| Arquivos alterados                 | ~18                  |
+| Linhas removidas (duplicacao)      | ~800-1000            |
+| Componentes novos reutilizaveis    | 7                    |
+| Componentes importados (ja existiam)| 6                   |
+| Correcoes de responsividade        | ~26                  |
+| Modais afetados por 1 componente   | 11                   |
+| Tabelas afetadas por 1 componente  | 9                    |
+
+---
+
+## Componentes que NAO precisam de correcao de responsividade
+
+Ja estao corretos:
+- `page.jsx` (landing page) -- bem estruturado com breakpoints
+- `LoginForm.jsx` -- formulario centralizado simples
+- `ClassCard.jsx` -- card layout responsivo
+- `ClassCardsComponent.jsx` -- `grid-cols-1 sm:grid-cols-2`
+- `WardClassCardComponent.jsx` -- `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`
+- `DashboardCard.jsx` -- card layout
+- `AdminDashboard.jsx` -- `grid-cols-1 sm:grid-cols-2`
+- `RoleDispatcher.jsx` -- `grid-cols-1 sm:grid-cols-2`
+- `ProfileForm.jsx` -- `grid-cols-1 md:grid-cols-2`
+- `PasswordUpdateForm.jsx` -- `grid-cols-1 md:grid-cols-2`
+- `AffiliateProductsSection.jsx` -- `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`
+- `ToggleTheme.jsx` -- botao de tamanho fixo
+- `UserMenu.jsx` -- esconde nome em telas pequenas com `hidden sm:inline`