# 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`