From 343f61ade750dff38a0329997dba39c3b1618265 Mon Sep 17 00:00:00 2001
From: Gustavo <eric.fullmetal@gmail.com>
Date: Thu, 13 Aug 2026 22:01:11 -0300
Subject: [PATCH] feat: redesign da lista e formulario de cliente (cartoes,
 grid, tabela responsiva)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/cliente_form.html   | 43 +++++++++--------
 app/templates/clientes_lista.html | 76 ++++++++++++++++---------------
 2 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/app/templates/cliente_form.html b/app/templates/cliente_form.html
index 014f932..a4166bf 100644
--- a/app/templates/cliente_form.html
+++ b/app/templates/cliente_form.html
@@ -24,24 +24,31 @@
       Não foi possível salvar: {{ erro_gravacao }}
     </div>
   {% endif %}
-  <form method="post">
-    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-    {% for campo in campos %}
-      <label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
-      {% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
-        <input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
-      {% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
-        <input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
-      {% else %}
-        <input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
-        {% if campo == "CNPJ" %}
-          <small id="cnpj-status" style="display:block;color:#a1a1aa;margin-top:4px"></small>
-        {% endif %}
-      {% endif %}
-    {% endfor %}
-    <p><small>* campos obrigatórios. Os demais podem ficar em branco — implantação/mensalidade/juros ficam 0,00 e as datas de contrato ficam com a data de hoje até serem ajustadas.</small></p>
-    <button type="submit">Salvar</button>
-  </form>
+  <div class="cartao">
+    <form method="post">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+      <div class="grid-form">
+        {% for campo in campos %}
+          {% set largura_total = campo in ["OBS"] %}
+          <div class="{{ 'grid-form-largura-total' if largura_total }}">
+            <label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
+            {% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
+              <input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
+            {% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
+              <input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
+            {% else %}
+              <input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
+              {% if campo == "CNPJ" %}
+                <small id="cnpj-status" style="display:block;color:var(--cor-texto-secundario);margin-top:4px"></small>
+              {% endif %}
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
+      <p><small>* campos obrigatórios. Os demais podem ficar em branco — implantação/mensalidade/juros ficam 0,00 e as datas de contrato ficam com a data de hoje até serem ajustadas.</small></p>
+      <button type="submit">Salvar</button>
+    </form>
+  </div>
 
 <script>
 (function () {
diff --git a/app/templates/clientes_lista.html b/app/templates/clientes_lista.html
index 89e249e..99e1586 100644
--- a/app/templates/clientes_lista.html
+++ b/app/templates/clientes_lista.html
@@ -3,50 +3,54 @@
 {% block titulo %}Clientes{% endblock %}
 {% block conteudo %}
   <h1>Clientes</h1>
-  <form method="get" action="/clientes">
-    <label for="ordenar_por">Buscar/ordenar por</label>
-    <select id="ordenar_por" name="ordenar_por">
-      <option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
-      <option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
-      <option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
-      <option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
-    </select>
-    <input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
-    <button type="submit">Buscar</button>
-  </form>
+  <div class="cartao">
+    <form method="get" action="/clientes">
+      <label for="ordenar_por">Buscar/ordenar por</label>
+      <select id="ordenar_por" name="ordenar_por">
+        <option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
+        <option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
+        <option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
+        <option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
+      </select>
+      <input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
+      <button type="submit">Buscar</button>
+    </form>
+  </div>
   <p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
-  <table>
-    <tr>
-      {% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
-      {% for campo, rotulo in colunas_tabela %}
-        {% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
-        <th>
-          <a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
-            {{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
-          </a>
-        </th>
+  <div class="tabela-wrap">
+    <table>
+      <tr>
+        {% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
+        {% for campo, rotulo in colunas_tabela %}
+          {% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
+          <th>
+            <a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
+              {{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
+            </a>
+          </th>
+        {% endfor %}
+        <th></th>
+      </tr>
+      {% for c in clientes %}
+      <tr>
+        <td>{{ c.CODIGO }}</td>
+        <td>{{ c.RAZAO }}</td>
+        <td>{{ c.FANTASIA }}</td>
+        <td>{{ c.CNPJ }}</td>
+        <td><a class="botao" href="/clientes/{{ c.ID }}">Abrir</a></td>
+      </tr>
       {% endfor %}
-      <th></th>
-    </tr>
-    {% for c in clientes %}
-    <tr>
-      <td>{{ c.CODIGO }}</td>
-      <td>{{ c.RAZAO }}</td>
-      <td>{{ c.FANTASIA }}</td>
-      <td>{{ c.CNPJ }}</td>
-      <td><a class="botao" href="/clientes/{{ c.ID }}">Abrir</a></td>
-    </tr>
-    {% endfor %}
-  </table>
+    </table>
+  </div>
   {% if total_paginas and total_paginas > 1 %}
-    <p>
+    <div class="paginacao">
       {% if pagina > 1 %}
         <a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">&larr; Anterior</a>
       {% endif %}
-      Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)
+      <span>Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)</span>
       {% if pagina < total_paginas %}
         <a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima &rarr;</a>
       {% endif %}
-    </p>
+    </div>
   {% endif %}
 {% endblock %}