feat: redesign da lista e formulario de cliente (cartoes, grid, tabela responsiva)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Gustavo
2026-08-13 22:01:11 -03:00
co-authored by Claude Sonnet 5
parent e21b1646a7
commit 343f61ade7
2 changed files with 65 additions and 54 deletions
+25 -18
View File
@@ -24,24 +24,31 @@
Não foi possível salvar: {{ erro_gravacao }} Não foi possível salvar: {{ erro_gravacao }}
</div> </div>
{% endif %} {% endif %}
<form method="post"> <div class="cartao">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}"> <form method="post">
{% for campo in campos %} <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label> <div class="grid-form">
{% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %} {% for campo in campos %}
<input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}> {% set largura_total = campo in ["OBS"] %}
{% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %} <div class="{{ 'grid-form-largura-total' if largura_total }}">
<input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}> <label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
{% else %} {% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
<input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}> <input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
{% if campo == "CNPJ" %} {% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
<small id="cnpj-status" style="display:block;color:#a1a1aa;margin-top:4px"></small> <input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
{% endif %} {% else %}
{% endif %} <input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
{% endfor %} {% if campo == "CNPJ" %}
<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> <small id="cnpj-status" style="display:block;color:var(--cor-texto-secundario);margin-top:4px"></small>
<button type="submit">Salvar</button> {% endif %}
</form> {% 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> <script>
(function () { (function () {
+40 -36
View File
@@ -3,50 +3,54 @@
{% block titulo %}Clientes{% endblock %} {% block titulo %}Clientes{% endblock %}
{% block conteudo %} {% block conteudo %}
<h1>Clientes</h1> <h1>Clientes</h1>
<form method="get" action="/clientes"> <div class="cartao">
<label for="ordenar_por">Buscar/ordenar por</label> <form method="get" action="/clientes">
<select id="ordenar_por" name="ordenar_por"> <label for="ordenar_por">Buscar/ordenar por</label>
<option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option> <select id="ordenar_por" name="ordenar_por">
<option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option> <option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
<option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option> <option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
<option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option> <option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
</select> <option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
<input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima"> </select>
<button type="submit">Buscar</button> <input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
</form> <button type="submit">Buscar</button>
</form>
</div>
<p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p> <p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
<table> <div class="tabela-wrap">
<tr> <table>
{% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %} <tr>
{% for campo, rotulo in colunas_tabela %} {% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
{% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %} {% for campo, rotulo in colunas_tabela %}
<th> {% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
<a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}"> <th>
{{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %} <a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
</a> {{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
</th> </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 %} {% endfor %}
<th></th> </table>
</tr> </div>
{% 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>
{% if total_paginas and total_paginas > 1 %} {% if total_paginas and total_paginas > 1 %}
<p> <div class="paginacao">
{% if pagina > 1 %} {% 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> <a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">&larr; Anterior</a>
{% endif %} {% endif %}
Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes) <span>Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)</span>
{% if pagina < total_paginas %} {% 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> <a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima &rarr;</a>
{% endif %} {% endif %}
</p> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}