course-plat/plans/RESPONSIVENESS_PLAN.md

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