Divide a interface Minha Turma em abas separando a configuração da sala e equipe dos alunos

public/app.js

@@ -3002,10 +3002,6 @@ const initApp = () => {
 
   // Fields
   const cFormId = document.getElementById('childFormId');
-  const cFormTurma = document.getElementById('childFormTurma');
-  const cFormSala = document.getElementById('childFormSala');
-  const cFormPeriodo = document.getElementById('childFormPeriodo');
-  const cFormAuxiliares = document.getElementById('childFormAuxiliares');
   const cFormNome = document.getElementById('childFormNome');
   const cFormApelido = document.getElementById('childFormApelido');
   const cFormDataNasc = document.getElementById('childFormDataNasc');
@@ -3015,6 +3011,47 @@ const initApp = () => {
   const cFormPais = document.getElementById('childFormPais');
   const cFormAutorizados = document.getElementById('childFormAutorizados');
 
+  // Fields Turma Config
+  const tabTurmaConfig = document.getElementById('tabTurmaConfig');
+  const tabTurmaAlunos = document.getElementById('tabTurmaAlunos');
+  const turmaConfigSection = document.getElementById('turmaConfigSection');
+  const turmaAlunosSection = document.getElementById('turmaAlunosSection');
+  
+  const configTurmaNome = document.getElementById('configTurmaNome');
+  const configTurmaSala = document.getElementById('configTurmaSala');
+  const configTurmaPeriodo = document.getElementById('configTurmaPeriodo');
+  const configTurmaProfTitular = document.getElementById('configTurmaProfTitular');
+  const configTurmaProfAux1 = document.getElementById('configTurmaProfAux1');
+  const configTurmaProfAux2 = document.getElementById('configTurmaProfAux2');
+  const configTurmaCuidadora = document.getElementById('configTurmaCuidadora');
+  const btnSaveTurmaConfig = document.getElementById('btnSaveTurmaConfig');
+
+  // Tab Logic
+  if (tabTurmaConfig) {
+    tabTurmaConfig.addEventListener('click', () => {
+      tabTurmaConfig.classList.add('active');
+      tabTurmaConfig.style.borderBottomColor = 'var(--brand-green)';
+      tabTurmaConfig.style.color = 'var(--brand-green)';
+      tabTurmaAlunos.classList.remove('active');
+      tabTurmaAlunos.style.borderBottomColor = 'transparent';
+      tabTurmaAlunos.style.color = 'var(--text-secondary)';
+      turmaConfigSection.style.display = 'flex';
+      turmaAlunosSection.style.display = 'none';
+    });
+  }
+  if (tabTurmaAlunos) {
+    tabTurmaAlunos.addEventListener('click', () => {
+      tabTurmaAlunos.classList.add('active');
+      tabTurmaAlunos.style.borderBottomColor = 'var(--brand-green)';
+      tabTurmaAlunos.style.color = 'var(--brand-green)';
+      tabTurmaConfig.classList.remove('active');
+      tabTurmaConfig.style.borderBottomColor = 'transparent';
+      tabTurmaConfig.style.color = 'var(--text-secondary)';
+      turmaAlunosSection.style.display = 'flex';
+      turmaConfigSection.style.display = 'none';
+    });
+  }
+
   // Toggle Especial Fields
   if (cFormEspecial) {
     cFormEspecial.addEventListener('change', () => {
@@ -3034,6 +3071,40 @@ const initApp = () => {
     localStorage.setItem('camila_turma', JSON.stringify(turma));
   };
 
+  const loadTurmaConfig = () => {
+    return JSON.parse(localStorage.getItem('camila_config_turma') || '{}');
+  };
+
+  const saveTurmaConfig = (cfg) => {
+    localStorage.setItem('camila_config_turma', JSON.stringify(cfg));
+    showCustomAlert('Sucesso', 'Configurações da turma salvas com sucesso!');
+  };
+
+  if (btnSaveTurmaConfig) {
+    btnSaveTurmaConfig.addEventListener('click', () => {
+      saveTurmaConfig({
+        nome: configTurmaNome.value,
+        sala: configTurmaSala.value,
+        periodo: configTurmaPeriodo.value,
+        profTitular: configTurmaProfTitular.value,
+        profAux1: configTurmaProfAux1.value,
+        profAux2: configTurmaProfAux2.value,
+        cuidadora: configTurmaCuidadora.value
+      });
+    });
+  }
+
+  const populateTurmaConfig = () => {
+    const cfg = loadTurmaConfig();
+    if(configTurmaNome) configTurmaNome.value = cfg.nome || '';
+    if(configTurmaSala) configTurmaSala.value = cfg.sala || '';
+    if(configTurmaPeriodo) configTurmaPeriodo.value = cfg.periodo || 'Integral';
+    if(configTurmaProfTitular) configTurmaProfTitular.value = cfg.profTitular || '';
+    if(configTurmaProfAux1) configTurmaProfAux1.value = cfg.profAux1 || '';
+    if(configTurmaProfAux2) configTurmaProfAux2.value = cfg.profAux2 || '';
+    if(configTurmaCuidadora) configTurmaCuidadora.value = cfg.cuidadora || '';
+  };
+
   const renderTurmaList = () => {
     if (!childrenList) return;
     const turma = loadTurma();
@@ -3049,7 +3120,7 @@ const initApp = () => {
       <div style="background: var(--bg-secondary); border: 1px solid var(--border-light); padding: 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
         <div>
           <div style="font-weight: 600; color: var(--text-primary);">${escapeHtml(c.nome)} ${c.especial ? '⭐' : ''}</div>
-          <div style="font-size: 0.8rem; color: var(--text-secondary);">${escapeHtml(c.turma || '')} - ${escapeHtml(c.periodo || '')}</div>
+          <div style="font-size: 0.8rem; color: var(--text-secondary);">${escapeHtml(c.apelido || '')}</div>
         </div>
         <div style="display: flex; gap: 8px;">
           <button onclick="editChild('${c.id}')" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px;" title="Editar">✏️</button>
@@ -3061,10 +3132,6 @@ const initApp = () => {
 
   const clearChildForm = () => {
     cFormId.value = '';
-    cFormTurma.value = '';
-    cFormSala.value = '';
-    cFormPeriodo.value = 'Integral';
-    cFormAuxiliares.value = '';
     cFormNome.value = '';
     cFormApelido.value = '';
     cFormDataNasc.value = '';
@@ -3082,10 +3149,6 @@ const initApp = () => {
     if (!c) return;
     
     cFormId.value = c.id;
-    cFormTurma.value = c.turma || '';
-    cFormSala.value = c.sala || '';
-    cFormPeriodo.value = c.periodo || 'Integral';
-    cFormAuxiliares.value = c.auxiliares || '';
     cFormNome.value = c.nome || '';
     cFormApelido.value = c.apelido || '';
     cFormDataNasc.value = c.dataNasc || '';
@@ -3112,6 +3175,7 @@ const initApp = () => {
   if (btnMinhaTurma) {
     btnMinhaTurma.addEventListener('click', () => {
       minhaTurmaModal.style.display = 'flex';
+      populateTurmaConfig();
       renderTurmaList();
       clearChildForm();
     });
@@ -3139,10 +3203,6 @@ const initApp = () => {
       
       const newChild = {
         id,
-        turma: cFormTurma.value.trim(),
-        sala: cFormSala.value.trim(),
-        periodo: cFormPeriodo.value,
-        auxiliares: cFormAuxiliares.value.trim(),
         nome: cFormNome.value.trim(),
         apelido: cFormApelido.value.trim(),
         dataNasc: cFormDataNasc.value,
@@ -3194,7 +3254,7 @@ const initApp = () => {
               role: 'user', 
               content: `A professora ditou as seguintes informações para cadastrar uma criança na turma: "${transcript}". 
 Por favor, extraia os dados e retorne APENAS um JSON válido com os seguintes campos:
-"turma", "sala", "periodo", "auxiliares", "nome", "apelido", "dataNasc" (formato YYYY-MM-DD), "especial" (boolean), "especialDetalhes", "pais", "autorizados". 
+"nome", "apelido", "dataNasc" (formato YYYY-MM-DD), "especial" (boolean), "especialDetalhes", "pais", "autorizados". 
 Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
             }],
             temperature: 0.1

public/index.html

@@ -528,18 +528,74 @@
           </svg>
         </button>
       </div>
-      <div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: row; gap: 16px; flex: 1; min-height: 500px;">
+      <div style="display: flex; border-bottom: 1px solid var(--border-light); padding: 0 16px;">
-        <!-- Lado Esquerdo: Lista de Crianças -->
+        <button id="tabTurmaConfig" class="btn-music-option active" style="border-radius: 0; border: none; border-bottom: 2px solid var(--brand-green); padding: 12px 16px; font-weight: 600; color: var(--brand-green); background: transparent;">🏫 Dados da Turma</button>
-        <div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
+        <button id="tabTurmaAlunos" class="btn-music-option" style="border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: 12px 16px; font-weight: 500; color: var(--text-secondary); background: transparent;">👧👦 Crianças da Turma</button>
-          <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
+      </div>
-            <h4 style="margin: 0; color: var(--text-primary);">Lista de Crianças</h4>
+
-            <button id="btnCreateChild" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Nova Criança</button>
+      <div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 500px;">
+        
+        <!-- SECÃO 1: CONFIGURAÇÕES DA TURMA -->
+        <div id="turmaConfigSection" style="display: flex; flex-direction: column; gap: 16px; flex: 1; width: 100%; overflow-y: auto; padding-right: 8px;">
+          <h4 style="margin: 0; color: var(--text-primary);">Configurações e Equipe da Turma</h4>
+          <p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);">Defina as informações gerais da turma. Estas informações valem para todos os alunos e serão usadas nos relatórios.</p>
+
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+            <div class="settings-group">
+              <label>Nome da Turma</label>
+              <input type="text" id="configTurmaNome" placeholder="Ex: Berçário 2" class="obs-input" style="width: 100%;">
+            </div>
+            <div class="settings-group">
+              <label>Sala</label>
+              <input type="text" id="configTurmaSala" placeholder="Ex: Sala 4" class="obs-input" style="width: 100%;">
+            </div>
+            <div class="settings-group">
+              <label>Período</label>
+              <select id="configTurmaPeriodo" class="obs-select" style="width: 100%;">
+                <option value="Integral">Integral</option>
+                <option value="Matutino">Matutino</option>
+                <option value="Vespertino">Vespertino</option>
+              </select>
+            </div>
           </div>
-          <div id="childrenList" style="display: flex; flex-direction: column; gap: 8px;">
+
-            <!-- Carregado via JS -->
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--border-light); padding-top: 16px;">
-            <div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando turma...</div>
+            <div class="settings-group">
+              <label>Professora Titular</label>
+              <input type="text" id="configTurmaProfTitular" placeholder="Sua Titulação e Nome" class="obs-input" style="width: 100%;">
+            </div>
+            <div class="settings-group">
+              <label>Professora Auxiliar 1</label>
+              <input type="text" id="configTurmaProfAux1" placeholder="Nome da Prof. Auxiliar" class="obs-input" style="width: 100%;">
+            </div>
+            <div class="settings-group">
+              <label>Professora Auxiliar 2</label>
+              <input type="text" id="configTurmaProfAux2" placeholder="Nome da Prof. Auxiliar (Opcional)" class="obs-input" style="width: 100%;">
+            </div>
+            <div class="settings-group">
+              <label>Cuidadora</label>
+              <input type="text" id="configTurmaCuidadora" placeholder="Nome da Cuidadora (Opcional)" class="obs-input" style="width: 100%;">
+            </div>
+          </div>
+
+          <div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: auto;">
+            <button id="btnSaveTurmaConfig" style="background: var(--brand-green); border: none; color: white; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.95rem;">Salvar Dados da Turma</button>
           </div>
         </div>
+
+        <!-- SECÃO 2: ALUNOS DA TURMA -->
+        <div id="turmaAlunosSection" style="display: none; flex-direction: row; gap: 16px; flex: 1; height: 100%; overflow: hidden;">
+          <!-- Lado Esquerdo: Lista de Crianças -->
+          <div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; height: 100%;">
+            <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
+              <h4 style="margin: 0; color: var(--text-primary);">Lista de Crianças</h4>
+              <button id="btnCreateChild" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Nova Criança</button>
+            </div>
+            <div id="childrenList" style="display: flex; flex-direction: column; gap: 8px;">
+              <!-- Carregado via JS -->
+              <div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando turma...</div>
+            </div>
+          </div>
         
         <!-- Lado Direito: Formulário de Cadastro/Edição -->
         <div id="childFormContainer" style="flex: 1.5; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
@@ -550,29 +606,6 @@
             </button>
           </div>
           <input type="hidden" id="childFormId">
-          
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-            <div class="settings-group" style="gap: 4px;">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Turma</label>
-              <input type="text" id="childFormTurma" placeholder="Ex: Berçário 2" class="obs-input" style="width: 100%;">
-            </div>
-            <div class="settings-group" style="gap: 4px;">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Sala</label>
-              <input type="text" id="childFormSala" placeholder="Ex: Sala 4" class="obs-input" style="width: 100%;">
-            </div>
-            <div class="settings-group" style="gap: 4px;">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Período</label>
-              <select id="childFormPeriodo" class="obs-select" style="width: 100%;">
-                <option value="Integral">Integral</option>
-                <option value="Matutino">Matutino</option>
-                <option value="Vespertino">Vespertino</option>
-              </select>
-            </div>
-            <div class="settings-group" style="gap: 4px;">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Prof. Auxiliares / Funções</label>
-              <input type="text" id="childFormAuxiliares" placeholder="Ex: Maria (Apoio)" class="obs-input" style="width: 100%;">
-            </div>
-          </div>
 
           <div class="settings-group" style="gap: 4px;">
             <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome Completo da Criança</label>
@@ -617,6 +650,7 @@
             <button id="btnSaveChild" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem;">Salvar Criança</button>
           </div>
         </div>
+        </div> <!-- Fim de turmaAlunosSection -->
       </div>
     </div>
   </div>