1099 lines
33 KiB
HTML
1099 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocuAgro - Painel da Cooperativa</title>
|
|
<style>
|
|
/* === RESET & BASE === */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--verde: #2D7D46;
|
|
--verde-escuro: #1B5E30;
|
|
--verde-claro: #E8F5E9;
|
|
--amarelo: #FFA000;
|
|
--amarelo-claro: #FFF8E1;
|
|
--vermelho: #D32F2F;
|
|
--vermelho-claro: #FFEBEE;
|
|
--cinza: #616161;
|
|
--cinza-claro: #F5F5F5;
|
|
--branco: #FFFFFF;
|
|
--preto: #212121;
|
|
--sombra: 0 2px 8px rgba(0,0,0,0.1);
|
|
--radius: 12px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--cinza-claro);
|
|
color: var(--preto);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* === TELA DE LOGIN === */
|
|
.login-overlay {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(135deg, #1B5E30 0%, #2D7D46 40%, #4CAF50 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.login-overlay.escondido {
|
|
display: none;
|
|
}
|
|
|
|
.login-container {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 48px 40px;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
text-align: center;
|
|
animation: loginEntrar 0.5s ease;
|
|
}
|
|
|
|
@keyframes loginEntrar {
|
|
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.login-logo {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.login-titulo {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
color: var(--verde);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.login-subtitulo {
|
|
font-size: 0.9rem;
|
|
color: var(--cinza);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.input-grupo {
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.input-grupo label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--cinza);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.input-grupo input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 10px;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.input-grupo input:focus {
|
|
border-color: var(--verde);
|
|
box-shadow: 0 0 0 3px rgba(45, 125, 70, 0.15);
|
|
background: white;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(45, 125, 70, 0.4);
|
|
}
|
|
|
|
.login-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.login-btn:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.login-erro {
|
|
background: var(--vermelho-claro);
|
|
color: var(--vermelho);
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
display: none;
|
|
}
|
|
|
|
.login-erro.visivel {
|
|
display: block;
|
|
}
|
|
|
|
.login-footer {
|
|
margin-top: 24px;
|
|
font-size: 0.75rem;
|
|
color: #bbb;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.login-container {
|
|
margin: 16px;
|
|
padding: 32px 24px;
|
|
}
|
|
.login-titulo { font-size: 1.5rem; }
|
|
}
|
|
|
|
/* === HEADER === */
|
|
header {
|
|
background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
|
|
color: white;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: var(--sombra);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
header h1 span { font-size: 1.8rem; }
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-branco { background: white; color: var(--verde); }
|
|
.btn-branco:hover { background: var(--verde-claro); }
|
|
.btn-verde { background: var(--verde); color: white; }
|
|
.btn-verde:hover { background: var(--verde-escuro); }
|
|
.btn-outline { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.5); }
|
|
.btn-outline:hover { background: rgba(255,255,255,0.15); }
|
|
.btn-sair { background: rgba(255,255,255,0.15); color: white; border: 1.5px solid rgba(255,255,255,0.3); }
|
|
.btn-sair:hover { background: rgba(255,0,0,0.2); border-color: rgba(255,100,100,0.5); }
|
|
|
|
/* === MAIN CONTENT === */
|
|
main {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
#app-container {
|
|
display: none;
|
|
}
|
|
|
|
#app-container.visivel {
|
|
display: block;
|
|
}
|
|
|
|
/* === CARDS DASHBOARD === */
|
|
.dashboard-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
box-shadow: var(--sombra);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.card:hover { transform: translateY(-2px); }
|
|
|
|
.card-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card-numero {
|
|
font-size: 2.2rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 0.85rem;
|
|
color: var(--cinza);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card-verde .card-numero { color: var(--verde); }
|
|
.card-amarelo .card-numero { color: var(--amarelo); }
|
|
.card-vermelho .card-numero { color: var(--vermelho); }
|
|
.card-cinza .card-numero { color: var(--cinza); }
|
|
|
|
/* === BARRA DE PROGRESSO === */
|
|
.progresso-container {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
box-shadow: var(--sombra);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.progresso-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.progresso-header h3 { font-size: 1rem; }
|
|
|
|
.progresso-pct {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: var(--verde);
|
|
}
|
|
|
|
.progresso-barra {
|
|
height: 12px;
|
|
background: var(--cinza-claro);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progresso-preenchido {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--verde), #4CAF50);
|
|
border-radius: 6px;
|
|
transition: width 0.8s ease;
|
|
}
|
|
|
|
/* === TABELA DE PRODUTORES === */
|
|
.tabela-container {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--sombra);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tabela-header {
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--cinza-claro);
|
|
}
|
|
|
|
.tabela-header h2 { font-size: 1.1rem; }
|
|
|
|
.busca-input {
|
|
padding: 8px 14px;
|
|
border: 1.5px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
width: 250px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.busca-input:focus { border-color: var(--verde); }
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background: var(--cinza-claro);
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--cinza);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
tr:hover td { background: #fafafa; }
|
|
|
|
/* === BADGES STATUS === */
|
|
.badge {
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
|
|
.badge-completo { background: var(--verde-claro); color: var(--verde); }
|
|
.badge-em_andamento { background: var(--amarelo-claro); color: var(--amarelo); }
|
|
.badge-pendente { background: var(--cinza-claro); color: var(--cinza); }
|
|
.badge-irregular { background: var(--vermelho-claro); color: var(--vermelho); }
|
|
|
|
/* === BARRA DE DOCS === */
|
|
.docs-mini-barra {
|
|
display: flex;
|
|
gap: 3px;
|
|
align-items: center;
|
|
}
|
|
|
|
.docs-mini-barra .bloco {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.docs-mini-barra .bloco.aprovado { background: var(--verde); }
|
|
.docs-mini-barra .bloco.enviado { background: var(--amarelo); }
|
|
.docs-mini-barra .bloco.rejeitado { background: var(--vermelho); }
|
|
|
|
.docs-texto {
|
|
font-size: 0.75rem;
|
|
color: var(--cinza);
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* === BOTÃO AÇÃO === */
|
|
.btn-acao {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
background: var(--verde-claro);
|
|
color: var(--verde);
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-acao:hover { background: var(--verde); color: white; }
|
|
|
|
/* === MODAL === */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 200;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-overlay.ativo { display: flex; }
|
|
|
|
.modal {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
padding: 24px;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.modal h2 {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-fechar {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: var(--cinza);
|
|
}
|
|
|
|
.detalhe-campo {
|
|
display: flex;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.detalhe-label {
|
|
font-weight: 600;
|
|
width: 160px;
|
|
flex-shrink: 0;
|
|
color: var(--cinza);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.detalhe-valor {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.docs-lista {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.doc-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.doc-item:last-child { border-bottom: none; }
|
|
|
|
/* === LOADING === */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--cinza);
|
|
}
|
|
|
|
.loading .spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--cinza-claro);
|
|
border-top: 3px solid var(--verde);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin: 0 auto 12px;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
/* === RESPONSIVO === */
|
|
@media (max-width: 768px) {
|
|
.dashboard-cards { grid-template-columns: repeat(2, 1fr); }
|
|
.tabela-header { flex-direction: column; gap: 12px; }
|
|
.busca-input { width: 100%; }
|
|
.header-actions { flex-wrap: wrap; }
|
|
th:nth-child(3), td:nth-child(3),
|
|
th:nth-child(4), td:nth-child(4) { display: none; }
|
|
}
|
|
|
|
/* === EMPTY STATE === */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--cinza);
|
|
}
|
|
|
|
.empty-state .icone { font-size: 4rem; margin-bottom: 16px; }
|
|
.empty-state h3 { margin-bottom: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- TELA DE LOGIN -->
|
|
<div class="login-overlay" id="login-overlay">
|
|
<div class="login-container">
|
|
<div class="login-logo">🌱</div>
|
|
<h1 class="login-titulo">DocuAgro</h1>
|
|
<p class="login-subtitulo">Painel de Compliance EUDR</p>
|
|
|
|
<form class="login-form" id="login-form" onsubmit="fazerLogin(event)">
|
|
<div class="login-erro" id="login-erro"></div>
|
|
|
|
<div class="input-grupo">
|
|
<label for="login-username">Usuário</label>
|
|
<input type="text" id="login-username" placeholder="Digite seu usuário" autocomplete="username" required autofocus>
|
|
</div>
|
|
|
|
<div class="input-grupo">
|
|
<label for="login-senha">Senha</label>
|
|
<input type="password" id="login-senha" placeholder="Digite sua senha" autocomplete="current-password" required>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn" id="login-btn">
|
|
Entrar
|
|
</button>
|
|
</form>
|
|
|
|
<div class="login-footer">
|
|
DocuAgro © 2026 — Compliance EUDR para Cooperativas
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- APP (escondido até autenticar) -->
|
|
<div id="app-container">
|
|
<!-- HEADER -->
|
|
<header>
|
|
<h1><span>🌱</span> DocuAgro <small style="font-size:0.6em;opacity:0.7">Painel Cooperativa</small></h1>
|
|
<div class="header-actions">
|
|
<div class="header-user" id="header-user">👤 <span id="header-nome-usuario"></span></div>
|
|
<a href="javascript:void(0)" onclick="exportarCSV()" class="btn btn-outline">📥 Exportar CSV</a>
|
|
<button class="btn btn-branco" onclick="carregarDados()">🔄 Atualizar</button>
|
|
<button class="btn btn-sair" onclick="fazerLogout()">🚪 Sair</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- CONTEÚDO PRINCIPAL -->
|
|
<main>
|
|
<!-- CARDS DASHBOARD -->
|
|
<div class="dashboard-cards" id="dashboard-cards">
|
|
<div class="card card-cinza">
|
|
<div class="card-icon">👥</div>
|
|
<div class="card-numero" id="stat-total">-</div>
|
|
<div class="card-label">Total Produtores</div>
|
|
</div>
|
|
<div class="card card-verde">
|
|
<div class="card-icon">✅</div>
|
|
<div class="card-numero" id="stat-completos">-</div>
|
|
<div class="card-label">Completos</div>
|
|
</div>
|
|
<div class="card card-amarelo">
|
|
<div class="card-icon">🔄</div>
|
|
<div class="card-numero" id="stat-andamento">-</div>
|
|
<div class="card-label">Em Andamento</div>
|
|
</div>
|
|
<div class="card card-vermelho">
|
|
<div class="card-icon">⚠️</div>
|
|
<div class="card-numero" id="stat-pendentes">-</div>
|
|
<div class="card-label">Pendentes</div>
|
|
</div>
|
|
<div class="card card-cinza">
|
|
<div class="card-icon">📄</div>
|
|
<div class="card-numero" id="stat-docs">-</div>
|
|
<div class="card-label">Documentos Recebidos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BARRA DE PROGRESSO GERAL -->
|
|
<div class="progresso-container">
|
|
<div class="progresso-header">
|
|
<h3>📊 Compliance EUDR Geral</h3>
|
|
<div class="progresso-pct" id="progresso-pct">0%</div>
|
|
</div>
|
|
<div class="progresso-barra">
|
|
<div class="progresso-preenchido" id="progresso-barra" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TABELA DE PRODUTORES -->
|
|
<div class="tabela-container">
|
|
<div class="tabela-header">
|
|
<h2>👨🌾 Produtores</h2>
|
|
<input type="text" class="busca-input" placeholder="🔍 Buscar produtor..." id="busca-input" oninput="filtrarProdutores()">
|
|
</div>
|
|
<div id="tabela-body">
|
|
<div class="loading">
|
|
<div class="spinner"></div>
|
|
Carregando...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- MODAL DETALHE -->
|
|
<div class="modal-overlay" id="modal-overlay" onclick="fecharModal(event)">
|
|
<div class="modal" id="modal-conteudo">
|
|
<!-- Preenchido via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ============================================================
|
|
// AUTENTICAÇÃO
|
|
// ============================================================
|
|
const TOKEN_KEY = 'docuagro_token';
|
|
const USER_KEY = 'docuagro_usuario';
|
|
let autoRefreshInterval = null;
|
|
|
|
function getToken() {
|
|
return localStorage.getItem(TOKEN_KEY);
|
|
}
|
|
|
|
function getUsuario() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(USER_KEY));
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function salvarAuth(token, usuario) {
|
|
localStorage.setItem(TOKEN_KEY, token);
|
|
localStorage.setItem(USER_KEY, JSON.stringify(usuario));
|
|
}
|
|
|
|
function limparAuth() {
|
|
localStorage.removeItem(TOKEN_KEY);
|
|
localStorage.removeItem(USER_KEY);
|
|
}
|
|
|
|
// Fetch autenticado — adiciona Bearer token em todas as requisições
|
|
async function fetchAuth(url, options = {}) {
|
|
const token = getToken();
|
|
if (!options.headers) options.headers = {};
|
|
if (token) {
|
|
options.headers['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
const res = await fetch(url, options);
|
|
|
|
// Se 401, token expirou → voltar pro login
|
|
if (res.status === 401) {
|
|
limparAuth();
|
|
mostrarLogin();
|
|
throw new Error('Sessão expirada');
|
|
}
|
|
|
|
return res;
|
|
}
|
|
|
|
function mostrarLogin() {
|
|
document.getElementById('login-overlay').classList.remove('escondido');
|
|
document.getElementById('app-container').classList.remove('visivel');
|
|
document.getElementById('login-erro').classList.remove('visivel');
|
|
document.getElementById('login-username').value = '';
|
|
document.getElementById('login-senha').value = '';
|
|
document.getElementById('login-username').focus();
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
autoRefreshInterval = null;
|
|
}
|
|
}
|
|
|
|
function mostrarApp() {
|
|
const usuario = getUsuario();
|
|
if (usuario) {
|
|
document.getElementById('header-nome-usuario').textContent = usuario.nome || usuario.username;
|
|
}
|
|
document.getElementById('login-overlay').classList.add('escondido');
|
|
document.getElementById('app-container').classList.add('visivel');
|
|
carregarDados();
|
|
// Auto-refresh a cada 30 segundos
|
|
autoRefreshInterval = setInterval(carregarDados, 30000);
|
|
}
|
|
|
|
async function fazerLogin(event) {
|
|
event.preventDefault();
|
|
|
|
const username = document.getElementById('login-username').value.trim();
|
|
const senha = document.getElementById('login-senha').value;
|
|
const btnLogin = document.getElementById('login-btn');
|
|
const erroEl = document.getElementById('login-erro');
|
|
|
|
if (!username || !senha) return;
|
|
|
|
btnLogin.disabled = true;
|
|
btnLogin.textContent = 'Entrando...';
|
|
erroEl.classList.remove('visivel');
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, senha })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.sucesso) {
|
|
salvarAuth(data.dados.token, data.dados.usuario);
|
|
mostrarApp();
|
|
} else {
|
|
erroEl.textContent = data.erro || 'Usuário ou senha incorretos';
|
|
erroEl.classList.add('visivel');
|
|
document.getElementById('login-senha').value = '';
|
|
document.getElementById('login-senha').focus();
|
|
}
|
|
} catch (erro) {
|
|
erroEl.textContent = 'Erro de conexão com o servidor';
|
|
erroEl.classList.add('visivel');
|
|
} finally {
|
|
btnLogin.disabled = false;
|
|
btnLogin.textContent = 'Entrar';
|
|
}
|
|
}
|
|
|
|
function fazerLogout() {
|
|
limparAuth();
|
|
mostrarLogin();
|
|
}
|
|
|
|
function exportarCSV() {
|
|
const token = getToken();
|
|
// Abrir com token no header via fetch + blob
|
|
fetchAuth('/api/exportar/csv')
|
|
.then(res => res.blob())
|
|
.then(blob => {
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'docuagro_produtores.csv';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
})
|
|
.catch(err => console.error('Erro ao exportar:', err));
|
|
}
|
|
|
|
// Verificar se tem token válido ao carregar
|
|
async function verificarAuth() {
|
|
const token = getToken();
|
|
if (!token) {
|
|
mostrarLogin();
|
|
return;
|
|
}
|
|
|
|
// Testa se o token ainda é válido
|
|
try {
|
|
const res = await fetch('/api/dashboard', {
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
|
|
if (res.status === 401) {
|
|
limparAuth();
|
|
mostrarLogin();
|
|
} else {
|
|
mostrarApp();
|
|
}
|
|
} catch {
|
|
// Erro de rede — tenta mostrar o app mesmo assim
|
|
mostrarApp();
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// ESTADO GLOBAL
|
|
// ============================================================
|
|
let produtoresCache = [];
|
|
const API_BASE = '';
|
|
|
|
// Tipos de documento com nomes amigáveis
|
|
const TIPOS_DOC = {
|
|
car: 'CAR',
|
|
ccir: 'CCIR',
|
|
itr: 'ITR',
|
|
georreferenciamento: 'Georreferenciamento',
|
|
licenca_ambiental: 'Licença Ambiental',
|
|
contrato_arrendamento: 'Contrato Arrendamento',
|
|
nota_fiscal: 'Nota Fiscal',
|
|
declaracao_desmatamento: 'Decl. Não Desmatamento'
|
|
};
|
|
|
|
const TODOS_TIPOS = Object.keys(TIPOS_DOC);
|
|
|
|
// ============================================================
|
|
// CARREGAR DADOS
|
|
// ============================================================
|
|
async function carregarDados() {
|
|
try {
|
|
// Dashboard
|
|
const dashRes = await fetchAuth(`${API_BASE}/api/dashboard`);
|
|
const dashData = await dashRes.json();
|
|
|
|
if (dashData.sucesso) {
|
|
const d = dashData.dados;
|
|
document.getElementById('stat-total').textContent = d.totalProdutores;
|
|
document.getElementById('stat-completos').textContent = d.completos;
|
|
document.getElementById('stat-andamento').textContent = d.emAndamento;
|
|
document.getElementById('stat-pendentes').textContent = d.pendentes + d.irregulares;
|
|
document.getElementById('stat-docs').textContent = d.totalDocumentos;
|
|
document.getElementById('progresso-pct').textContent = d.percentualCompliance + '%';
|
|
document.getElementById('progresso-barra').style.width = d.percentualCompliance + '%';
|
|
}
|
|
|
|
// Produtores
|
|
const prodRes = await fetchAuth(`${API_BASE}/api/produtores`);
|
|
const prodData = await prodRes.json();
|
|
|
|
if (prodData.sucesso) {
|
|
produtoresCache = prodData.dados;
|
|
renderizarTabela(produtoresCache);
|
|
}
|
|
} catch (erro) {
|
|
if (erro.message === 'Sessão expirada') return;
|
|
console.error('Erro ao carregar dados:', erro);
|
|
document.getElementById('tabela-body').innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="icone">🔌</div>
|
|
<h3>Erro de conexão</h3>
|
|
<p>Não foi possível conectar ao servidor. Verifique se o backend está rodando.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// RENDERIZAR TABELA
|
|
// ============================================================
|
|
function renderizarTabela(produtores) {
|
|
if (produtores.length === 0) {
|
|
document.getElementById('tabela-body').innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="icone">🌾</div>
|
|
<h3>Nenhum produtor cadastrado</h3>
|
|
<p>Os produtores aparecerão aqui quando iniciarem o cadastro pelo bot Telegram.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Produtor</th>
|
|
<th>Propriedade</th>
|
|
<th>Município/UF</th>
|
|
<th>Documentos</th>
|
|
<th>Status</th>
|
|
<th>Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
for (const p of produtores) {
|
|
const statusClass = `badge-${p.status || 'pendente'}`;
|
|
const statusLabel = {
|
|
completo: 'Completo',
|
|
em_andamento: 'Em Andamento',
|
|
pendente: 'Pendente',
|
|
irregular: 'Irregular'
|
|
}[p.status] || 'Pendente';
|
|
|
|
// Mini barra de documentos
|
|
const docsAprovados = p.docs_aprovados || 0;
|
|
const docsEnviados = p.docs_enviados || 0;
|
|
const docsRejeitados = p.docs_rejeitados || 0;
|
|
|
|
let blocos = '';
|
|
for (let i = 0; i < 8; i++) {
|
|
let classe = '';
|
|
if (i < docsAprovados) classe = 'aprovado';
|
|
else if (i < docsAprovados + docsEnviados) classe = 'enviado';
|
|
else if (i < docsAprovados + docsEnviados + docsRejeitados) classe = 'rejeitado';
|
|
blocos += `<div class="bloco ${classe}"></div>`;
|
|
}
|
|
|
|
html += `
|
|
<tr>
|
|
<td>
|
|
<strong>${p.nome || 'Sem nome'}</strong>
|
|
<br><small style="color:var(--cinza)">${p.cpf_cnpj || 'CPF não informado'}</small>
|
|
</td>
|
|
<td>${p.propriedade_nome || '-'}</td>
|
|
<td>${p.propriedade_municipio || '-'}/${p.propriedade_estado || '-'}</td>
|
|
<td>
|
|
<div class="docs-mini-barra">
|
|
${blocos}
|
|
<span class="docs-texto">${p.docs_completos || 0}/8</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge ${statusClass}">${statusLabel}</span></td>
|
|
<td>
|
|
<button class="btn-acao" onclick="verDetalhe('${p.id}')">📋 Ver</button>
|
|
<button class="btn-acao" onclick="gerarDossie('${p.id}')" style="margin-left:4px">📄 Dossiê</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
html += '</tbody></table>';
|
|
document.getElementById('tabela-body').innerHTML = html;
|
|
}
|
|
|
|
// ============================================================
|
|
// FILTRAR PRODUTORES
|
|
// ============================================================
|
|
function filtrarProdutores() {
|
|
const termo = document.getElementById('busca-input').value.toLowerCase();
|
|
const filtrados = produtoresCache.filter(p =>
|
|
(p.nome || '').toLowerCase().includes(termo) ||
|
|
(p.cpf_cnpj || '').includes(termo) ||
|
|
(p.propriedade_nome || '').toLowerCase().includes(termo) ||
|
|
(p.propriedade_municipio || '').toLowerCase().includes(termo)
|
|
);
|
|
renderizarTabela(filtrados);
|
|
}
|
|
|
|
// ============================================================
|
|
// VER DETALHE DO PRODUTOR
|
|
// ============================================================
|
|
async function verDetalhe(id) {
|
|
try {
|
|
const res = await fetchAuth(`${API_BASE}/api/produtores/${id}`);
|
|
const data = await res.json();
|
|
|
|
if (!data.sucesso) {
|
|
alert('Erro ao buscar dados do produtor');
|
|
return;
|
|
}
|
|
|
|
const p = data.dados.produtor;
|
|
const docs = data.dados.documentos || [];
|
|
|
|
let docsHtml = '';
|
|
for (const tipo of TODOS_TIPOS) {
|
|
const doc = docs.find(d => d.tipo === tipo);
|
|
let statusHtml = '<span class="badge badge-pendente">Não enviado</span>';
|
|
|
|
if (doc) {
|
|
const badgeClass = `badge-${doc.status === 'aprovado' ? 'completo' : doc.status === 'rejeitado' ? 'irregular' : 'em_andamento'}`;
|
|
statusHtml = `<span class="badge ${badgeClass}">${doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}</span>`;
|
|
}
|
|
|
|
docsHtml += `
|
|
<div class="doc-item">
|
|
<span>${TIPOS_DOC[tipo]}</span>
|
|
${statusHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const modalHtml = `
|
|
<h2>
|
|
👨🌾 ${p.nome || 'Produtor'}
|
|
<button class="modal-fechar" onclick="document.getElementById('modal-overlay').classList.remove('ativo')">×</button>
|
|
</h2>
|
|
|
|
<div class="detalhe-campo"><div class="detalhe-label">CPF/CNPJ</div><div class="detalhe-valor">${p.cpf_cnpj || 'Não informado'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Telefone</div><div class="detalhe-valor">${p.telefone || 'Não informado'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Propriedade</div><div class="detalhe-valor">${p.propriedade_nome || 'Não informada'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Município/UF</div><div class="detalhe-valor">${p.propriedade_municipio || '-'}/${p.propriedade_estado || '-'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Área</div><div class="detalhe-valor">${p.propriedade_area_ha ? p.propriedade_area_ha + ' ha' : 'Não informada'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Cultura</div><div class="detalhe-valor">${p.cultura_principal || 'Não informada'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Telegram</div><div class="detalhe-valor">@${p.telegram_username || 'Sem username'}</div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Status</div><div class="detalhe-valor"><span class="badge badge-${p.status}">${p.status || 'Pendente'}</span></div></div>
|
|
<div class="detalhe-campo"><div class="detalhe-label">Cadastrado em</div><div class="detalhe-valor">${new Date(p.criado_em).toLocaleDateString('pt-BR')}</div></div>
|
|
|
|
<div class="docs-lista">
|
|
<h3 style="margin-bottom:8px">📄 Documentos</h3>
|
|
${docsHtml}
|
|
</div>
|
|
|
|
<div style="margin-top:20px;text-align:right">
|
|
<button class="btn btn-verde" onclick="gerarDossie('${p.id}')">📄 Gerar Dossiê PDF</button>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('modal-conteudo').innerHTML = modalHtml;
|
|
document.getElementById('modal-overlay').classList.add('ativo');
|
|
|
|
} catch (erro) {
|
|
if (erro.message === 'Sessão expirada') return;
|
|
console.error('Erro:', erro);
|
|
alert('Erro ao buscar dados');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// GERAR DOSSIÊ
|
|
// ============================================================
|
|
async function gerarDossie(id) {
|
|
try {
|
|
const res = await fetchAuth(`${API_BASE}/api/produtores/${id}/dossie`, { method: 'POST' });
|
|
const data = await res.json();
|
|
|
|
if (data.sucesso) {
|
|
// Download autenticado
|
|
const dlRes = await fetchAuth(data.dados.caminho);
|
|
const blob = await dlRes.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = data.dados.arquivo;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} else {
|
|
alert('Erro ao gerar dossiê: ' + (data.erro || 'Erro desconhecido'));
|
|
}
|
|
} catch (erro) {
|
|
if (erro.message === 'Sessão expirada') return;
|
|
console.error('Erro:', erro);
|
|
alert('Erro ao gerar dossiê');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// FECHAR MODAL
|
|
// ============================================================
|
|
function fecharModal(event) {
|
|
if (event.target === event.currentTarget) {
|
|
document.getElementById('modal-overlay').classList.remove('ativo');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// INIT — Verifica autenticação ao carregar
|
|
// ============================================================
|
|
document.addEventListener('DOMContentLoaded', verificarAuth);
|
|
|
|
// Enter no formulário de login
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' && !document.getElementById('login-overlay').classList.contains('escondido')) {
|
|
const form = document.getElementById('login-form');
|
|
if (form) form.requestSubmit();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|