Cadastro da alíquota do ICMS correta. Inclusão da nova alíquota e comparação em todos os relatórios.

app/templates/parametros.html

@@ -22,7 +22,7 @@
       </div>
       <div class="form-group">
         <label for="aliquota_icms">Alíquota de ICMS (%):</label>
-        <input type="number" step="0.01" name="aliquota_icms" id="aliquota_icms" value="{{ parametros.aliquota_icms or '' }}" />
+        <input type="text" id="aliquota" name="aliquota" inputmode="decimal" pattern="[0-9]+([,][0-9]+)?" placeholder="Ex: 20,7487">
       </div>
     </div>
 
@@ -62,6 +62,7 @@
   <hr style="margin-top: 2rem; margin-bottom: 1rem;"> 
  <h3 style="margin-top: 2rem;">📋 Fórmulas Salvas</h3>
   <div class="card-list">
+    {% if
     {% for param in lista_parametros %}
       <div class="param-card {{ 'ativo' if param.ativo else 'inativo' }}" id="card-{{ param.id }}">
         <div style="display:flex; justify-content:space-between; align-items:center;">
@@ -124,7 +125,7 @@
 <!-- ABA ALÍQUOTAS -->
 <div id="aliquotas" class="tab-content">
   <div class="formulario-box">
-    <form onsubmit="return salvarAliquota(this)">
+    <form onsubmit="return salvarAliquota(this, event)">
       <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
         <div class="form-group">
           <label>UF:</label>
@@ -141,7 +142,10 @@
         </div>
         <div class="form-group">
           <label>Alíquota ICMS (%):</label>
-          <input name="aliquota" type="number" step="0.0001" required />
+          <input id="aliquota-uf" name="aliquota"
+                type="text" inputmode="decimal"
+                pattern="[0-9]+([,][0-9]+)?"
+                placeholder="Ex: 20,7487" required />
         </div>
       </div>
       <!-- Bloco com espaçamento e alinhamento central -->
@@ -160,12 +164,35 @@
         </div>
 
       </div>
+
+        <input type="hidden" id="orig-uf" name="original_uf">
+        <input type="hidden" id="orig-exercicio" name="original_exercicio">
+    
     </form>
 
-    <table class="selic-table">
-      <thead><tr><th>UF</th><th>Exercício</th><th>Alíquota</th></tr></thead>
-      <tbody id="tabela-aliquotas"></tbody>
-    </table>
+    <!-- Filtro de UF para a tabela -->
+    <div style="display:flex; align-items:center; gap:12px; margin:14px 0;">
+      <label for="filtro-uf" style="font-weight:600;">Filtrar por UF:</label>
+      <select id="filtro-uf" style="min-width:220px; padding:.5rem .75rem; border:1px solid #ddd; border-radius:8px;">
+        <option value="">Todas</option>
+        {% for uf in ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'] %}
+          <option value="{{ uf }}">{{ uf }}</option>
+        {% endfor %}
+      </select>
+      <span id="total-aliquotas" class="muted"></span>
+    </div>
+
+<table class="selic-table">
+  <thead>
+    <tr>
+      <th>UF</th>
+      <th>Exercício</th>
+      <th>Alíquota</th>
+      <th style="width:140px;">Ações</th>
+    </tr>
+  </thead>
+  <tbody id="tabela-aliquotas"></tbody>
+</table>
   </div>
 </div>
 
@@ -581,16 +608,39 @@
 
   // ✅ Carrega tabela de alíquotas
   async function carregarAliquotas() {
-    const res = await fetch("/parametros/aliquotas");
+    const uf = document.getElementById("filtro-uf")?.value || "";
+    const url = new URL("/parametros/aliquotas", window.location.origin);
+    if (uf) url.searchParams.set("uf", uf);
+
+    const res = await fetch(url);
     const dados = await res.json();
+
     const tbody = document.getElementById("tabela-aliquotas");
+    if (!dados.length) {
+      tbody.innerHTML = `<tr><td colspan="3" style="padding:.6rem;">Nenhum registro.</td></tr>`;
+    } else {
     tbody.innerHTML = dados.map(a => `
-      <tr><td>${a.uf}</td><td>${a.exercicio}</td><td>${a.aliquota.toFixed(4)}%</td></tr>
+      <tr>
+        <td>${a.uf}</td>
+        <td>${a.exercicio}</td>
+        <td>${Number(a.aliquota).toLocaleString('pt-BR', {minimumFractionDigits:4, maximumFractionDigits:4})}%</td>
+        <td style="display:flex; gap:8px;">
+          <button class="btn btn-sm btn-secondary"
+                  onclick="editarAliquota('${a.uf}', ${a.exercicio}, ${Number(a.aliquota)})">✏️ Editar</button>
+          <button class="btn btn-sm btn-danger"
+                  onclick="excluirAliquota('${a.uf}', ${a.exercicio})">🗑️ Excluir</button>
+        </td>
+      </tr>
     `).join('');
+    }
+
+    document.getElementById("total-aliquotas").textContent = `Registros: ${dados.length}`;
   }
 
+
   // ✅ Eventos após carregar DOM
   document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById("filtro-uf")?.addEventListener("change", carregarAliquotas);
     carregarAliquotas();
 
     // Ativar/desativar checkbox
@@ -657,6 +707,86 @@
       });
   }
 
+async function salvarAliquota(form, ev) {
+  ev?.preventDefault();
+
+  const uf = form.uf.value?.trim();
+  const exercicio = Number(form.exercicio.value?.trim());
+  const aliquotaStr = form.aliquota.value?.trim();
+  const aliquota = parseFloat(aliquotaStr.replace(',', '.')); // vírgula -> ponto
+
+  // 👇 LE OS ORIGINAIS
+  const original_uf = document.getElementById('orig-uf').value || null;
+  const original_exercicio = document.getElementById('orig-exercicio').value
+    ? Number(document.getElementById('orig-exercicio').value)
+    : null;
+
+  if (!uf || !exercicio || isNaN(exercicio) || !aliquotaStr || isNaN(aliquota)) {
+    mostrarFeedback("❌ Erro", "Preencha UF, exercício e alíquota válidos.");
+    return false;
+  }
+
+  const res = await fetch("/parametros/aliquotas/salvar", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ uf, exercicio, aliquota, original_uf, original_exercicio })
+  });
+
+  if (!res.ok) {
+    const msg = await res.text();
+    mostrarFeedback("❌ Erro ao salvar", msg || "Falha na operação.");
+    return false;
+  }
+
+  mostrarFeedback("✅ Salvo", "Alíquota registrada/atualizada com sucesso.");
+  cancelarEdicao();     // limpa modo edição
+  carregarAliquotas();
+  return false;
+}
+
+
+function editarAliquota(uf, exercicio, aliquota) {
+  const form = document.querySelector('#aliquotas form');
+  form.uf.value = uf;
+  form.exercicio.value = String(exercicio);
+
+  // Mostrar no input com vírgula e 4 casas
+  const valorBR = Number(aliquota).toLocaleString('pt-BR', {
+    minimumFractionDigits: 4, maximumFractionDigits: 4
+  });
+  form.querySelector('[name="aliquota"]').value = valorBR;
+
+  // 👇 GUARDA A CHAVE ORIGINAL
+  document.getElementById('orig-uf').value = uf;
+  document.getElementById('orig-exercicio').value = String(exercicio);
+
+  document.getElementById('aliquotas')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+function cancelarEdicao(){
+  const form = document.querySelector('#aliquotas form');
+  form.reset();
+  document.getElementById('orig-uf').value = '';
+  document.getElementById('orig-exercicio').value = '';
+}
+
+async function excluirAliquota(uf, exercicio){
+  if(!confirm(`Excluir a alíquota de ${uf}/${exercicio}?`)) return;
+
+  const res = await fetch(`/parametros/aliquotas/${encodeURIComponent(uf)}/${exercicio}`, {
+    method: 'DELETE'
+  });
+
+  if(!res.ok){
+    const msg = await res.text();
+    mostrarFeedback("❌ Erro", msg || "Falha ao excluir.");
+    return;
+  }
+
+  mostrarFeedback("🗑️ Excluída", "Alíquota removida com sucesso.");
+  carregarAliquotas();
+}
+
 </script>
 
 <!-- Feedback estilo popup -->