1333 lines
70 KiB
HTML
1333 lines
70 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Dashboard - SGMP{% endblock %}
|
||
|
||
{% block css %}
|
||
<style>
|
||
/* --- Header --- */
|
||
.dashboard-header {
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
.dashboard-header h1 {
|
||
font-size: 1.85rem;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin: 0;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
.dashboard-header p {
|
||
color: #64748b;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* --- Cards de Métricas --- */
|
||
.metrics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.metric-card {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
border: 1px solid #e2e8f0;
|
||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||
border-left: 5px solid transparent;
|
||
transition: all 0.2s ease-in-out;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.metric-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.metric-card.active {
|
||
background-color: #f8fafc;
|
||
border-color: #cbd5e1;
|
||
transform: scale(1.02);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Cores dos Cards */
|
||
.card-total { border-left-color: #3b82f6; }
|
||
.card-total .metric-value { color: #3b82f6; }
|
||
|
||
.card-pending { border-left-color: #f59e0b; }
|
||
.card-pending .metric-value { color: #d97706; }
|
||
|
||
|
||
.metric-label {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: #64748b;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.metric-value {
|
||
font-size: 2.25rem;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* --- Seções e Tabelas --- */
|
||
.section { margin-bottom: 30px; }
|
||
.section h3 {
|
||
color: #1e293b;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
/* Container responsivo para tabela */
|
||
.table-responsive {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
white-space: nowrap; /* Evita quebra de linha indesejada no mobile */
|
||
}
|
||
th, td {
|
||
padding: 16px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
th {
|
||
background-color: #f8fafc;
|
||
font-weight: 600;
|
||
color: #475569;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.025em;
|
||
}
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background-color: #f8fafc; }
|
||
|
||
/* Badges de Status */
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4px 10px;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
.status-RASCUNHO { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
|
||
.status-AGUARDANDO_HEAD { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
|
||
.status-ENVIADA { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
|
||
.status-APROVADA_GG,
|
||
.status-APROVADA_CONTROLADORIA,
|
||
.status-APROVADA_DIRETORIA { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
|
||
.status-FINALIZADA { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
|
||
.status-REPROVADA { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
|
||
|
||
/* --- Paginação --- */
|
||
.pagination {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pagination a {
|
||
padding: 8px 14px;
|
||
text-decoration: none;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 6px;
|
||
color: #475569;
|
||
background: white;
|
||
font-size: 0.9rem;
|
||
transition: all 0.2s;
|
||
}
|
||
.pagination a:hover {
|
||
background: #f1f5f9;
|
||
border-color: #cbd5e1;
|
||
color: #1e293b;
|
||
}
|
||
.pagination .current {
|
||
padding: 8px 14px;
|
||
background: #2563eb;
|
||
color: white;
|
||
border-radius: 6px;
|
||
font-weight: 500;
|
||
border: 1px solid #2563eb;
|
||
}
|
||
|
||
/* --- Mensagens --- */
|
||
.messages ul { list-style: none; padding: 0; margin: 0 0 20px 0; }
|
||
.messages li {
|
||
padding: 14px 18px;
|
||
margin-bottom: 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid transparent;
|
||
font-size: 0.95rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.messages .error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
|
||
.messages .success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
|
||
.messages .info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
|
||
|
||
/* --- Empty State --- */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: #64748b;
|
||
background: white;
|
||
border-radius: 12px;
|
||
border: 1px dashed #cbd5e1;
|
||
}
|
||
.empty-state p { margin: 0; font-size: 1.1rem; }
|
||
|
||
/* --- Detalhes Expansíveis --- */
|
||
.details-row { background-color: #f8fafc; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
|
||
.details-row td { padding: 0 !important; border-bottom: none; }
|
||
|
||
.details-wrapper { padding: 2rem; animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
|
||
@keyframes slideDown {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* Abas */
|
||
.tab-nav {
|
||
display: flex;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
margin-bottom: 1.5rem;
|
||
gap: 2rem;
|
||
overflow-x: auto; /* Scroll nas abas em mobile */
|
||
}
|
||
.tab-btn {
|
||
background: none;
|
||
border: none;
|
||
padding: 0.75rem 0;
|
||
cursor: pointer;
|
||
color: #64748b;
|
||
border-bottom: 2px solid transparent;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
.tab-btn:hover { color: #2563eb; }
|
||
.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
|
||
|
||
.tab-pane { display: none; }
|
||
.tab-pane.active { display: block; animation: fadeIn 0.3s ease; }
|
||
|
||
/* Seções Internas */
|
||
.details-section {
|
||
margin-bottom: 1.5rem;
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
.details-section h5 {
|
||
color: #94a3b8;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
margin: 1.5rem 0 1rem 0;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
padding-bottom: 8px;
|
||
}
|
||
.details-section h5:first-child { margin-top: 0; }
|
||
|
||
/* Grid de Informações */
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
.info-item { display: flex; flex-direction: column; }
|
||
.info-item label {
|
||
font-size: 0.75rem;
|
||
color: #64748b;
|
||
margin-bottom: 0.35rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
.info-item span {
|
||
font-size: 1rem;
|
||
color: #0f172a;
|
||
font-weight: 500;
|
||
word-break: break-word;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline { position: relative; padding-left: 2rem; border-left: 2px solid #e2e8f0; margin-left: 0.5rem; }
|
||
.timeline-item { position: relative; padding-bottom: 2rem; padding-left: 1.5rem; }
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -2.4rem; /* Ajuste fino para centralizar na linha */
|
||
top: 0.25rem;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: #cbd5e1;
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 1px #e2e8f0;
|
||
}
|
||
.timeline-item:last-child { padding-bottom: 0; }
|
||
.timeline-header { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.95rem; align-items: baseline; }
|
||
.timeline-user { font-weight: 600; color: #1e293b; }
|
||
.timeline-action { color: #64748b; }
|
||
.timeline-date { font-size: 0.8rem; color: #94a3b8; margin-left: auto; }
|
||
.timeline-justificativa {
|
||
margin-top: 0.75rem;
|
||
padding: 1rem;
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
color: #334155;
|
||
border: 1px solid #e2e8f0;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Botões */
|
||
.btn-action {
|
||
padding: 0.6rem 1.2rem;
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-action-primary { background: #2563eb; color: white; border: 1px solid #1d4ed8; }
|
||
.btn-action-primary:hover { background: #1d4ed8; box-shadow: 0 2px 4px rgba(37,99,235,0.2); }
|
||
|
||
.btn-action-success { background: #10b981; color: white; border: 1px solid #059669; }
|
||
.btn-action-success:hover { background: #059669; box-shadow: 0 2px 4px rgba(16,185,129,0.2); }
|
||
|
||
.btn-action-danger { background: white; color: #ef4444; border: 1px solid #ef4444; }
|
||
.btn-action-danger:hover { background: #fef2f2; }
|
||
|
||
/* Forms Internos */
|
||
.form-decisao {
|
||
background: #f8fafc;
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
margin-top: 1.5rem;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
.form-group input, .form-group select, .form-group textarea {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: 6px;
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
|
||
outline: none;
|
||
border-color: #2563eb;
|
||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||
}
|
||
|
||
/* Seta de expansão */
|
||
.chevron-icon {
|
||
transition: transform 0.3s ease;
|
||
display: inline-block;
|
||
font-size: 0.8rem;
|
||
}
|
||
.request-row.expanded .chevron-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* Modal */
|
||
#modal-aprovacao {
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.modal-content {
|
||
background-color: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
border: 1px solid #e2e8f0;
|
||
animation: modalFadeIn 0.2s ease-out;
|
||
}
|
||
@keyframes modalFadeIn {
|
||
from { opacity: 0; transform: scale(0.95); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.dashboard-header h1 { font-size: 1.5rem; }
|
||
.metrics-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||
.metric-value { font-size: 1.75rem; }
|
||
.info-grid { grid-template-columns: 1fr; }
|
||
.btn-action { width: 100%; justify-content: center; margin-bottom: 0.5rem; }
|
||
.details-wrapper { padding: 1rem; }
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<div class="dashboard-header">
|
||
<h1>SGMP - Movimentação de Pessoas</h1>
|
||
<p>
|
||
Olá, <strong>{{ usuario_sistema.nome }}</strong>!
|
||
<span style="display: inline-block; background: #e2e8f0; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; margin-left: 8px; color: #475569;">
|
||
{{ usuario_sistema.get_perfil_display }}
|
||
</span>
|
||
<br>
|
||
<small style="color: #94a3b8;">Matrícula: {{ usuario_sistema.matricula }}</small>
|
||
</p>
|
||
</div>
|
||
|
||
{% if messages %}
|
||
<div class="messages">
|
||
<ul>
|
||
{% for message in messages %}
|
||
<li class="{{ message.tags }}">
|
||
{% if message.tags == 'error' %}⚠️{% elif message.tags == 'success' %}✅{% else %}ℹ️{% endif %}
|
||
{{ message }}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if usuario_sistema.perfil == 'GESTOR' %}
|
||
<div class="section">
|
||
<div style="background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; padding: 16px; margin-bottom: 24px; display: flex; gap: 12px; align-items: flex-start;">
|
||
<span style="font-size: 1.5rem;">💡</span>
|
||
<div>
|
||
<h4 style="margin: 0 0 4px 0; color: #92400e;">Lembrete Rápido</h4>
|
||
<p style="margin: 0; color: #b45309; font-size: 0.95rem;">
|
||
Solicitações em <strong>Rascunho</strong> só são visíveis para você.
|
||
Lembre-se de clicar em <strong>"Enviar para Aprovação"</strong> na página de detalhes para iniciar o fluxo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Cards de Métricas -->
|
||
<div class="metrics-grid">
|
||
<div class="metric-card card-total active" onclick="filtrarTabela('todos', this)">
|
||
<div class="metric-label">Total</div>
|
||
<div class="metric-value">{{ total }}</div>
|
||
</div>
|
||
<div class="metric-card card-pending" onclick="filtrarTabela('pendente', this)">
|
||
<div class="metric-label">Pendentes</div>
|
||
<div class="metric-value">{{ pendentes }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>
|
||
{% if usuario_sistema.perfil == 'GESTOR' %}
|
||
📋 Minhas Solicitações
|
||
{% else %}
|
||
⏳ Pendentes de Aprovação
|
||
{% endif %}
|
||
</h3>
|
||
|
||
{% if usuario_sistema.perfil != 'GESTOR' %}
|
||
<div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px; margin-bottom: 20px; color: #1e40af; font-size: 0.9rem; display: flex; align-items: center; gap: 8px;">
|
||
ℹ️ Você está vendo solicitações com status <strong>Enviada</strong> aguardando sua análise.
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if solicitacoes %}
|
||
<div class="table-responsive">
|
||
<table id="tabela-solicitacoes">
|
||
<thead>
|
||
<tr>
|
||
<th>Tipo</th>
|
||
<th>Colaborador</th>
|
||
<th>Status</th>
|
||
<th>Data</th>
|
||
<th>Ações</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for item in solicitacoes_com_acao %}
|
||
{% with solicitacao=item.solicitacao %}
|
||
<tr class="request-row"
|
||
data-id="{{ solicitacao.id }}"
|
||
data-status="{% if solicitacao.status == 'FINALIZADA' %}aprovado{% elif solicitacao.status == 'REPROVADA' %}reprovado{% else %}pendente{% endif %}"
|
||
onclick="toggleDetails('{{ solicitacao.id }}', this)"
|
||
style="cursor: pointer;">
|
||
<td><strong>{{ solicitacao.get_tipo_display }}</strong></td>
|
||
<td>
|
||
{% if solicitacao.funcionario %}
|
||
{{ solicitacao.funcionario.nome }}
|
||
{% else %}
|
||
<span style="color: #94a3b8;">N/A</span>
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<span class="status-badge status-{{ solicitacao.status }}">
|
||
{{ solicitacao.get_status_display }}
|
||
</span>
|
||
</td>
|
||
<td style="color: #64748b;">{{ solicitacao.criado_em|date:"d/m/Y H:i" }}</td>
|
||
<td>
|
||
<div style="display: flex; gap: 12px; align-items: center;">
|
||
<span class="expand-btn" style="color: #3b82f6; font-weight: 600; font-size: 0.85rem;">
|
||
Detalhes <span class="chevron-icon">▼</span>
|
||
</span>
|
||
|
||
{% if item.pode_dar_parecer %}
|
||
<a href="{% url 'solicitacoes:solicitacao_detalhe' solicitacao.id %}"
|
||
class="btn-action btn-action-primary"
|
||
style="padding: 4px 10px; font-size: 0.75rem;"
|
||
title="Fornecer parecer técnico">
|
||
📝 Parecer
|
||
</a>
|
||
{% endif %}
|
||
|
||
{% if item.pode_aprovar %}
|
||
<div style="display: flex; gap: 4px;">
|
||
<button class="btn-action btn-action-success"
|
||
onclick="event.stopPropagation(); abrirModalAprovacao('{{ solicitacao.id }}', 'APROVADO')"
|
||
style="padding: 4px 8px; font-size: 0.75rem;" title="Aprovar">
|
||
✅
|
||
</button>
|
||
<button class="btn-action btn-action-danger"
|
||
onclick="event.stopPropagation(); abrirModalAprovacao('{{ solicitacao.id }}', 'REPROVADO')"
|
||
style="padding: 4px 8px; font-size: 0.75rem;" title="Reprovar">
|
||
❌
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Linha de detalhes expansível -->
|
||
<tr id="details-{{ solicitacao.id }}" class="details-row" style="display:none;">
|
||
<td colspan="5">
|
||
<div class="details-wrapper" id="wrapper-{{ solicitacao.id }}">
|
||
<!-- Barra de navegação das abas -->
|
||
<div class="tab-nav">
|
||
<button class="tab-btn active" onclick="switchTab(event, 'solicitacao', '{{ solicitacao.id }}')">
|
||
📄 Solicitação
|
||
</button>
|
||
|
||
{% if solicitacao.funcionario %}
|
||
<button class="tab-btn" onclick="switchTab(event, 'rm', '{{ solicitacao.id }}')">
|
||
🏢 RM (Totvs)
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% for item_acao in solicitacoes_com_acao %}
|
||
{% if item_acao.solicitacao.id == solicitacao.id and item_acao.dados_winthor_organizados %}
|
||
<button class="tab-btn" onclick="switchTab(event, 'winthor', '{{ solicitacao.id }}')">
|
||
💼 Winthor
|
||
</button>
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
<button class="tab-btn" onclick="switchTab(event, 'auditoria', '{{ solicitacao.id }}')">
|
||
📝 Histórico & Auditoria
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ABA: SOLICITAÇÃO -->
|
||
<div class="tab-pane active" data-tab="solicitacao">
|
||
<div class="details-section">
|
||
<h5>Dados Gerais</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Solicitante</label>
|
||
<span>{{ solicitacao.solicitante.nome }} <small style="color:#64748b">({{ solicitacao.solicitante.matricula }})</small></span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Tipo</label>
|
||
<span style="font-weight:700; color:#2563eb;">{{ solicitacao.get_tipo_display }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Data Criação</label>
|
||
<span>{{ solicitacao.criado_em|date:"d/m/Y H:i" }}</span>
|
||
</div>
|
||
{% if solicitacao.enviada_em %}
|
||
<div class="info-item">
|
||
<label>Enviada em</label>
|
||
<span>{{ solicitacao.enviada_em|date:"d/m/Y H:i" }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.finalizada_em %}
|
||
<div class="info-item">
|
||
<label>Finalizada em</label>
|
||
<span>{{ solicitacao.finalizada_em|date:"d/m/Y H:i" }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Detalhes específicos por tipo -->
|
||
{% if solicitacao.tipo == 'DESLIGAMENTO' and solicitacao.desligamento %}
|
||
<h5>Detalhes do Desligamento</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
{% if solicitacao.desligamento.tipo_desligamento %}
|
||
<div class="info-item">
|
||
<label>Tipo de Desligamento</label>
|
||
<span>
|
||
{% if solicitacao.desligamento.tipo_desligamento == 'PEDIDO_DEMISSAO' %}
|
||
📝 Pedido de Demissão
|
||
{% elif solicitacao.desligamento.tipo_desligamento == 'SEM_JUSTA_CAUSA' %}
|
||
🚪 Sem Justa Causa
|
||
{% elif solicitacao.desligamento.tipo_desligamento == 'COM_JUSTA_CAUSA' %}
|
||
⚠️ Por Justa Causa
|
||
{% elif solicitacao.desligamento.tipo_desligamento == 'TERMINO_CONTRATO' %}
|
||
📅 Término de Contrato
|
||
{% elif solicitacao.desligamento.tipo_desligamento == 'OUTROS' %}
|
||
📋 Outros
|
||
{% else %}
|
||
{{ solicitacao.desligamento.get_tipo_desligamento_display|default:"—" }}
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.desligamento.aviso_previo %}
|
||
<div class="info-item">
|
||
<label>Aviso Prévio</label>
|
||
<span>
|
||
{% if solicitacao.desligamento.aviso_previo == 'TRABALHADO' %}
|
||
✅ Trabalhado
|
||
{% elif solicitacao.desligamento.aviso_previo == 'INDENIZADO' %}
|
||
💰 Indenizado
|
||
{% elif solicitacao.desligamento.aviso_previo == 'DISPENSADO' %}
|
||
📤 Dispensado
|
||
{% else %}
|
||
{{ solicitacao.desligamento.get_aviso_previo_display|default:"—" }}
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
<div class="info-item">
|
||
<label>Data Prevista de Saída</label>
|
||
<span>{{ solicitacao.desligamento.data_prevista_desligamento|date:"d/m/Y"|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Detalhamento / Justificativa</label>
|
||
<span style="white-space: pre-wrap;">{{ solicitacao.desligamento.motivo|default:"—" }}</span>
|
||
</div>
|
||
{% if solicitacao.desligamento.arquivo_pedido %}
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Carta de Pedido</label>
|
||
<span>
|
||
<a href="{{ solicitacao.desligamento.arquivo_pedido.url }}" target="_blank" style="color: #2563eb; text-decoration: none;">
|
||
📎 Ver arquivo
|
||
</a>
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.desligamento.observacoes %}
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Observações Adicionais</label>
|
||
<span style="white-space: pre-wrap;">{{ solicitacao.desligamento.observacoes }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% elif solicitacao.tipo == 'MOVIMENTACAO' and solicitacao.movimentacao %}
|
||
<h5>Detalhes da Movimentação</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Data de Efetivação</label>
|
||
<span>{{ solicitacao.movimentacao.data_efetivacao|date:"d/m/Y"|default:"—" }}</span>
|
||
</div>
|
||
{% if solicitacao.movimentacao.altera_funcao %}
|
||
<div class="info-item">
|
||
<label>Nova Função</label>
|
||
<span>{{ solicitacao.movimentacao.novo_cod_funcao|default:"—" }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.movimentacao.altera_centro_custo %}
|
||
<div class="info-item">
|
||
<label>Nova Seção</label>
|
||
<span>{{ solicitacao.movimentacao.novo_cod_secao|default:"—" }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.movimentacao.novo_salario %}
|
||
<div class="info-item">
|
||
<label>Novo Salário</label>
|
||
<span>R$ {{ solicitacao.movimentacao.novo_salario }}</span>
|
||
</div>
|
||
{% endif %}
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Justificativa</label>
|
||
<span>{{ solicitacao.movimentacao.justificativa|default:"—" }}</span>
|
||
</div>
|
||
</div>
|
||
{% elif solicitacao.tipo == 'ADM_SUBSTITUICAO' and solicitacao.admissao_substituicao %}
|
||
<h5>Detalhes da Admissão por Substituição</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Data Prevista</label>
|
||
<span>{{ solicitacao.admissao_substituicao.data_previsao_contratacao|date:"d/m/Y"|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Coligada Destino</label>
|
||
<span>{{ solicitacao.admissao_substituicao.cod_coligada_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Filial Destino</label>
|
||
<span>{{ solicitacao.admissao_substituicao.cod_filial_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Seção Destino</label>
|
||
<span>{{ solicitacao.admissao_substituicao.cod_secao_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Função Destino</label>
|
||
<span>{{ solicitacao.admissao_substituicao.cod_funcao_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Justificativa</label>
|
||
<span>{{ solicitacao.admissao_substituicao.justificativa|default:"—" }}</span>
|
||
</div>
|
||
</div>
|
||
{% elif solicitacao.tipo == 'ADM_AUMENTO' and solicitacao.admissao_aumento %}
|
||
<h5>Detalhes da Admissão por Aumento de Quadro</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Data Prevista</label>
|
||
<span>{{ solicitacao.admissao_aumento.data_previsao_contratacao|date:"d/m/Y"|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Coligada Destino</label>
|
||
<span>{{ solicitacao.admissao_aumento.cod_coligada_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Filial Destino</label>
|
||
<span>{{ solicitacao.admissao_aumento.cod_filial_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Seção Destino</label>
|
||
<span>{{ solicitacao.admissao_aumento.cod_secao_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Função Destino</label>
|
||
<span>{{ solicitacao.admissao_aumento.cod_funcao_destino|default:"—" }}</span>
|
||
</div>
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Justificativa Estratégica</label>
|
||
<span>{{ solicitacao.admissao_aumento.justificativa_estrategica|default:"—" }}</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Ações -->
|
||
<div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0;">
|
||
{% if solicitacao.pode_enviar and solicitacao.solicitante.id == usuario_sistema.id %}
|
||
<a href="{% url 'solicitacoes:enviar_solicitacao' solicitacao.id %}" class="btn-action btn-action-primary">
|
||
🚀 Enviar para Aprovação
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ABA: RM (Totvs) -->
|
||
{% if solicitacao.funcionario %}
|
||
<div class="tab-pane" data-tab="rm">
|
||
<div class="details-section section-highlight">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin: -1rem 0 1.5rem 0; color: #2563eb; background: #dbeafe; padding: 8px 12px; border-radius: 6px; display: inline-flex;">
|
||
<span>💾</span>
|
||
<span style="font-size: 0.85rem; font-weight: 600;">Snapshot TOTVS RM</span>
|
||
</div>
|
||
|
||
<h5>Dados Básicos</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Matrícula</label>
|
||
<span><strong>{{ solicitacao.funcionario.matricula }}</strong></span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Nome Completo</label>
|
||
<span><strong>{{ solicitacao.funcionario.nome }}</strong></span>
|
||
</div>
|
||
{% if solicitacao.funcionario.cpf %}
|
||
<div class="info-item">
|
||
<label>CPF</label>
|
||
<span>{{ solicitacao.funcionario.cpf }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.funcionario.data_admissao %}
|
||
<div class="info-item">
|
||
<label>Data de Admissão</label>
|
||
<span>{{ solicitacao.funcionario.data_admissao|date:"d/m/Y" }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if solicitacao.funcionario.situacao %}
|
||
<div class="info-item">
|
||
<label>Situação</label>
|
||
<span>{{ solicitacao.funcionario.situacao }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<h5>Dados Profissionais</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Cargo/Função</label>
|
||
<span>{{ solicitacao.funcionario.cargo }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Código da Função</label>
|
||
<span>{{ solicitacao.funcionario.cod_funcao|default:"N/A" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Setor/Seção</label>
|
||
<span>{{ solicitacao.funcionario.setor }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Centro de Custo</label>
|
||
<span>{{ solicitacao.funcionario.centro_custo }}</span>
|
||
</div>
|
||
{% if solicitacao.funcionario.salario %}
|
||
<div class="info-item">
|
||
<label>Salário Atual</label>
|
||
<span><strong style="color: #10b981; font-size: 1.1rem;">R$ {{ solicitacao.funcionario.salario|floatformat:2 }}</strong></span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if solicitacao.funcionario.saldo_banco_horas_minutos is not None %}
|
||
<h5>Banco de Horas</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Saldo Atual</label>
|
||
<span>
|
||
{% if solicitacao.funcionario.saldo_banco_horas_minutos >= 0 %}
|
||
<strong style="color: #10b981; font-size: 1.1rem;">
|
||
+{{ solicitacao.funcionario.saldo_banco_horas_minutos }} min
|
||
</strong>
|
||
{% else %}
|
||
<strong style="color: #ef4444; font-size: 1.1rem;">
|
||
{{ solicitacao.funcionario.saldo_banco_horas_minutos }} min
|
||
</strong>
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- ABA: WINTHOR -->
|
||
{% for item_acao in solicitacoes_com_acao %}
|
||
{% if item_acao.solicitacao.id == solicitacao.id and item_acao.dados_winthor_organizados %}
|
||
{% with win=item_acao.dados_winthor_organizados %}
|
||
<div class="tab-pane" data-tab="winthor">
|
||
<div class="details-section section-highlight" style="border-left-color: #10b981;">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin: -1rem 0 1.5rem 0; color: #059669; background: #d1fae5; padding: 8px 12px; border-radius: 6px; display: inline-flex;">
|
||
<span>💼</span>
|
||
<span style="font-size: 0.85rem; font-weight: 600;">Sistema Winthor</span>
|
||
</div>
|
||
|
||
{% if win.basicos %}
|
||
<h5>Dados Básicos</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
{% if win.basicos.matricula %}
|
||
<div class="info-item">
|
||
<label>Matrícula</label>
|
||
<span><strong>{{ win.basicos.matricula }}</strong></span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.basicos.nome %}
|
||
<div class="info-item">
|
||
<label>Nome</label>
|
||
<span><strong>{{ win.basicos.nome }}</strong></span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.basicos.cpf %}
|
||
<div class="info-item">
|
||
<label>CPF</label>
|
||
<span>{{ win.basicos.cpf }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if win.admissao %}
|
||
<h5>Admissão e Situação</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
{% if win.admissao.admissao %}
|
||
<div class="info-item">
|
||
<label>Data de Admissão</label>
|
||
<span>
|
||
{% if win.admissao.admissao|date:"d/m/Y" %}
|
||
{{ win.admissao.admissao|date:"d/m/Y" }}
|
||
{% else %}
|
||
{{ win.admissao.admissao }}
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.admissao.situacao %}
|
||
<div class="info-item">
|
||
<label>Situação</label>
|
||
<span>{{ win.admissao.situacao }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.admissao.dt_exclusao %}
|
||
<div class="info-item">
|
||
<label>Data de Exclusão</label>
|
||
<span>
|
||
{% if win.admissao.dt_exclusao|date:"d/m/Y" %}
|
||
{{ win.admissao.dt_exclusao|date:"d/m/Y" }}
|
||
{% else %}
|
||
{{ win.admissao.dt_exclusao }}
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if win.endereco %}
|
||
<h5>Endereço</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
{% if win.endereco.endereco %}
|
||
<div class="info-item" style="grid-column: 1 / -1;">
|
||
<label>Endereço</label>
|
||
<span>{{ win.endereco.endereco }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.endereco.bairro %}
|
||
<div class="info-item">
|
||
<label>Bairro</label>
|
||
<span>{{ win.endereco.bairro }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.endereco.cidade %}
|
||
<div class="info-item">
|
||
<label>Cidade</label>
|
||
<span>{{ win.endereco.cidade }}</span>
|
||
</div>
|
||
{% endif %}
|
||
{% if win.endereco.estado %}
|
||
<div class="info-item">
|
||
<label>Estado</label>
|
||
<span>{{ win.endereco.estado }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endwith %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
<!-- ABA: AUDITORIA -->
|
||
<div class="tab-pane" data-tab="auditoria">
|
||
<div class="details-section">
|
||
<h5>Status Atual</h5>
|
||
<div class="info-grid" style="margin-bottom: 1.5rem;">
|
||
<div class="info-item">
|
||
<label>Status</label>
|
||
<span class="status-badge status-{{ solicitacao.status }}">{{ solicitacao.get_status_display }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Última Modificação</label>
|
||
<span>{{ solicitacao.atualizado_em|date:"d/m/Y H:i" }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h5>Histórico de Aprovações</h5>
|
||
{% if solicitacao.aprovacoes.all %}
|
||
<div class="timeline">
|
||
{% for aprovacao in solicitacao.aprovacoes.all %}
|
||
<div class="timeline-item">
|
||
<div class="timeline-header">
|
||
<span class="timeline-user">{{ aprovacao.usuario.nome }}</span>
|
||
<span class="timeline-action">
|
||
{% if aprovacao.decisao == 'APROVADO' %}
|
||
<span style="color: #10b981;">aprovou</span>
|
||
{% else %}
|
||
<span style="color: #ef4444;">reprovou</span>
|
||
{% endif %}
|
||
em {{ aprovacao.get_etapa_display }}
|
||
</span>
|
||
<span class="timeline-date">{{ aprovacao.decidido_em|date:"d/m/Y H:i" }}</span>
|
||
</div>
|
||
{% if aprovacao.justificativa %}
|
||
<div class="timeline-justificativa">"{{ aprovacao.justificativa }}"</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p style="color: #64748b; font-style: italic; background: #f8fafc; padding: 10px; border-radius: 6px;">
|
||
⏳ Nenhuma aprovação registrada ainda.
|
||
</p>
|
||
{% endif %}
|
||
|
||
<!-- Pareceres -->
|
||
{% if solicitacao.pareceres.all %}
|
||
<h5 style="margin-top: 1.5rem;">Pareceres Técnicos</h5>
|
||
<div style="margin-bottom: 1.5rem;">
|
||
{% for parecer in solicitacao.pareceres.all %}
|
||
<div style="background: white; padding: 16px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
|
||
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||
<strong style="color: #1e293b;">{{ parecer.get_etapa_display }}</strong>
|
||
<small style="color: #64748b;">{{ parecer.criado_em|date:"d/m/Y H:i" }}</small>
|
||
</div>
|
||
<small style="color: #64748b; display: block; margin-bottom: 8px;">Autor: {{ parecer.usuario.nome }}</small>
|
||
<p style="margin: 0; color: #334155; line-height: 1.5;">{{ parecer.texto }}</p>
|
||
{% if parecer.anexo %}
|
||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0;">
|
||
<a href="{{ parecer.anexo.url }}" target="_blank" style="color: #3b82f6; text-decoration: none; font-size: 0.9rem; font-weight: 500;">
|
||
📎 Visualizar Anexo ({{ parecer.anexo.name|slice:"20:" }})
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Form de parecer -->
|
||
{% comment %} {% for item_acao in solicitacoes_com_acao %}
|
||
{% if item_acao.solicitacao.id == solicitacao.id %}
|
||
{% if item_acao.pode_dar_parecer %}
|
||
<div class="form-decisao" style="background: #f0f9ff; border: 2px solid #3b82f6;">
|
||
<h5 style="margin-top: 0; color: #1e40af; border: none;">📝 Registrar Parecer Técnico</h5>
|
||
<p style="color: #64748b; font-size: 0.9rem; margin-bottom: 1rem;">
|
||
Forneça sua análise técnica sobre a solicitação. Este parecer será avaliado pela Diretoria para a decisão final.
|
||
</p>
|
||
<form method="post" action="{% url 'solicitacoes:registrar_parecer' solicitacao.id %}" enctype="multipart/form-data">
|
||
{% csrf_token %}
|
||
<div class="form-group">
|
||
<label for="texto-{{ solicitacao.id }}">Análise: <span style="color: #ef4444;">*</span></label>
|
||
<textarea name="texto" id="texto-{{ solicitacao.id }}" rows="4" required placeholder="Descreva sua análise detalhada..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="anexo-{{ solicitacao.id }}">Anexo (opcional):</label>
|
||
<input type="file" name="anexo" id="anexo-{{ solicitacao.id }}" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
|
||
<small style="color: #64748b; font-size: 0.85rem;">Formatos aceitos: PDF, Office, Imagens</small>
|
||
</div>
|
||
<button type="submit" class="btn-action btn-action-primary" style="margin-top: 10px; width: 100%; justify-content: center;">
|
||
Salvar Parecer
|
||
</button>
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
{% endfor %} {% endcomment %}
|
||
|
||
{% comment %} <!-- Form de decisão (igual ao de solicitacao_detalhe.html) -->
|
||
{% for item_acao in solicitacoes_com_acao %}
|
||
{% if item_acao.solicitacao.id == solicitacao.id %}
|
||
{% if item_acao.pode_aprovar and solicitacao.solicitante.id != usuario_sistema.id %}
|
||
<div class="action-card" style="background: #fffbeb; border: 2px solid #f59e0b;">
|
||
<h3 style="color: #92400e; margin-top: 0;">⚖️ Decisão Final - Diretoria</h3>
|
||
<p style="color: #b45309; font-size: 0.9rem; margin-bottom: 1.5rem;">
|
||
Esta é a etapa final. Por favor, revise os pareceres técnicos antes de decidir.
|
||
</p>
|
||
|
||
<form method="post" action="{% url 'solicitacoes:decidir_solicitacao' solicitacao.id %}" id="form-decisao-{{ solicitacao.id }}" class="form-decisao-dashboard">
|
||
{% csrf_token %}
|
||
<div style="margin-bottom: 15px;">
|
||
<label for="decisao-{{ solicitacao.id }}" style="display:block; margin-bottom:5px; font-weight:600; color:#334155;">Veredito <span style="color:red">*</span></label>
|
||
<select name="decisao" id="decisao-{{ solicitacao.id }}" class="form-control decisao-select" required>
|
||
<option value="">Selecione...</option>
|
||
<option value="APROVADO">✅ APROVAR SOLICITAÇÃO</option>
|
||
<option value="REPROVADO">❌ REPROVAR SOLICITAÇÃO</option>
|
||
</select>
|
||
</div>
|
||
<div style="margin-bottom: 20px;">
|
||
<label for="justificativa-{{ solicitacao.id }}" style="display:block; margin-bottom:5px; font-weight:600; color:#334155;">
|
||
Justificativa <span id="justificativa-required-{{ solicitacao.id }}" class="justificativa-required" style="color:red; display:none;">*</span>
|
||
</label>
|
||
<textarea name="justificativa" id="justificativa-{{ solicitacao.id }}" class="form-control justificativa-input" rows="4" placeholder="Obrigatória apenas se reprovado..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-warning" style="width: 100%; justify-content: center; font-size: 1rem;">Confirmar Decisão</button>
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% endcomment %}
|
||
{% if solicitacao.solicitante.id == usuario_sistema.id and solicitacao.status != 'RASCUNHO' %}
|
||
<div style="background: #f1f5f9; border-radius: 8px; padding: 15px; margin-top: 1.5rem; color: #64748b; text-align: center; font-size: 0.9rem;">
|
||
👁️ Você é o solicitante. Acompanhe o status acima.
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="no-results" class="empty-state" style="display: none;">
|
||
<p>🔍 Nenhuma solicitação encontrada com este filtro.</p>
|
||
</div>
|
||
|
||
{% if solicitacoes.has_other_pages %}
|
||
<div class="pagination">
|
||
{% if solicitacoes.has_previous %}
|
||
<a href="?page=1">« Primeira</a>
|
||
<a href="?page={{ solicitacoes.previous_page_number }}">‹ Anterior</a>
|
||
{% endif %}
|
||
|
||
<span class="current">
|
||
{{ solicitacoes.number }} / {{ solicitacoes.paginator.num_pages }}
|
||
</span>
|
||
|
||
{% if solicitacoes.has_next %}
|
||
<a href="?page={{ solicitacoes.next_page_number }}">Próxima ›</a>
|
||
<a href="?page={{ solicitacoes.paginator.num_pages }}">Última »</a>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<p>🎉 Nenhuma solicitação encontrada.</p>
|
||
{% if usuario_sistema.perfil == 'GESTOR' %}
|
||
<p style="font-size: 0.9rem; margin-top: 10px;">Use o botão "Nova Solicitação" para começar.</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function filtrarTabela(status, cardElement) {
|
||
// Remove active de todos os cards
|
||
document.querySelectorAll('.metric-card').forEach(c => c.classList.remove('active'));
|
||
// Adiciona active no card clicado
|
||
if (cardElement) cardElement.classList.add('active');
|
||
|
||
const rows = document.querySelectorAll('.request-row');
|
||
let visibleCount = 0;
|
||
|
||
rows.forEach(row => {
|
||
const categoria = row.getAttribute('data-status'); // pendente | aprovado | reprovado (aprovado/reprovado não são mais filtrados)
|
||
|
||
let show = false;
|
||
if (status === 'todos') {
|
||
show = true;
|
||
} else if (status === 'pendente') {
|
||
show = (categoria === 'pendente');
|
||
} else {
|
||
show = false; // Filtros de aprovado/reprovado removidos
|
||
}
|
||
|
||
if (show) {
|
||
row.style.display = '';
|
||
visibleCount++;
|
||
} else {
|
||
row.style.display = 'none';
|
||
// Fecha detalhes se estiver aberto
|
||
const solicitacaoId = row.getAttribute('data-id');
|
||
const detailsRow = document.getElementById('details-' + solicitacaoId);
|
||
if (detailsRow && detailsRow.style.display !== 'none') {
|
||
detailsRow.style.display = 'none';
|
||
row.classList.remove('expanded');
|
||
}
|
||
}
|
||
});
|
||
|
||
// Mostra mensagem se não houver resultados
|
||
const noResults = document.getElementById('no-results');
|
||
const tableContainer = document.querySelector('.table-responsive');
|
||
if (noResults && tableContainer) {
|
||
if (visibleCount === 0) {
|
||
noResults.style.display = 'block';
|
||
tableContainer.style.display = 'none';
|
||
} else {
|
||
noResults.style.display = 'none';
|
||
tableContainer.style.display = 'block';
|
||
}
|
||
}
|
||
}
|
||
|
||
function toggleDetails(solicitacaoId, rowElement) {
|
||
const detailsRow = document.getElementById('details-' + solicitacaoId);
|
||
if (!detailsRow) return;
|
||
|
||
if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
|
||
// Fecha todas as outras linhas
|
||
document.querySelectorAll('.details-row').forEach(row => {
|
||
row.style.display = 'none';
|
||
});
|
||
document.querySelectorAll('.request-row').forEach(row => {
|
||
row.classList.remove('expanded');
|
||
});
|
||
|
||
// Abre esta linha
|
||
detailsRow.style.display = 'table-row';
|
||
if(rowElement) rowElement.classList.add('expanded');
|
||
} else {
|
||
// Fecha esta linha
|
||
detailsRow.style.display = 'none';
|
||
if(rowElement) rowElement.classList.remove('expanded');
|
||
}
|
||
}
|
||
|
||
function switchTab(event, tabName, solicitacaoId) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const wrapper = document.getElementById('wrapper-' + solicitacaoId);
|
||
if (!wrapper) return;
|
||
|
||
const buttons = wrapper.querySelectorAll('.tab-btn');
|
||
buttons.forEach(btn => btn.classList.remove('active'));
|
||
|
||
const panes = wrapper.querySelectorAll('.tab-pane');
|
||
panes.forEach(pane => pane.classList.remove('active'));
|
||
|
||
event.currentTarget.classList.add('active');
|
||
|
||
const targetPane = wrapper.querySelector(`.tab-pane[data-tab="${tabName}"]`);
|
||
if (targetPane) {
|
||
targetPane.classList.add('active');
|
||
}
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const cardTotal = document.querySelector('.card-total');
|
||
if (cardTotal) {
|
||
filtrarTabela('todos', cardTotal);
|
||
}
|
||
});
|
||
|
||
function abrirModalAprovacao(solicitacaoId, decisao) {
|
||
const modal = document.getElementById('modal-aprovacao');
|
||
const form = document.getElementById('form-aprovacao');
|
||
const decisaoInput = document.getElementById('decisao-input');
|
||
const justificativaDiv = document.getElementById('justificativa-div');
|
||
const justificativaInput = document.getElementById('justificativa-input');
|
||
const tituloModal = document.getElementById('titulo-modal');
|
||
|
||
decisaoInput.value = decisao;
|
||
justificativaInput.value = '';
|
||
justificativaInput.removeAttribute('required');
|
||
|
||
if (decisao === 'REPROVADO') {
|
||
tituloModal.textContent = 'Reprovar Solicitação';
|
||
tituloModal.style.color = '#ef4444';
|
||
justificativaDiv.style.display = 'block';
|
||
justificativaInput.setAttribute('required', 'required');
|
||
justificativaInput.placeholder = 'Descreva o motivo da reprovação...';
|
||
} else {
|
||
tituloModal.textContent = 'Aprovar Solicitação';
|
||
tituloModal.style.color = '#10b981';
|
||
justificativaDiv.style.display = 'none';
|
||
justificativaInput.removeAttribute('required');
|
||
}
|
||
|
||
form.action = '/solicitacao/' + solicitacaoId + '/decidir/';
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
function fecharModalAprovacao() {
|
||
const modal = document.getElementById('modal-aprovacao');
|
||
modal.style.display = 'none';
|
||
}
|
||
|
||
window.onclick = function(event) {
|
||
const modal = document.getElementById('modal-aprovacao');
|
||
if (event.target === modal) {
|
||
fecharModalAprovacao();
|
||
}
|
||
}
|
||
|
||
// Decisão Final (form igual ao de solicitacao_detalhe): toggle justificativa e validação
|
||
document.querySelectorAll('.decisao-select').forEach(function(select) {
|
||
select.addEventListener('change', function() {
|
||
var form = this.closest('form');
|
||
var justificativa = form.querySelector('.justificativa-input');
|
||
var requiredMarker = form.querySelector('.justificativa-required');
|
||
if (this.value === 'REPROVADO') {
|
||
justificativa.setAttribute('required', 'required');
|
||
if (requiredMarker) requiredMarker.style.display = 'inline';
|
||
justificativa.placeholder = 'Descreva o motivo da reprovação...';
|
||
} else {
|
||
justificativa.removeAttribute('required');
|
||
if (requiredMarker) requiredMarker.style.display = 'none';
|
||
justificativa.placeholder = 'Opcional para aprovação...';
|
||
}
|
||
});
|
||
});
|
||
document.querySelectorAll('.form-decisao-dashboard').forEach(function(form) {
|
||
form.addEventListener('submit', function(e) {
|
||
var decisao = form.querySelector('.decisao-select').value;
|
||
var justificativa = form.querySelector('.justificativa-input').value.trim();
|
||
if (decisao === 'REPROVADO' && !justificativa) {
|
||
e.preventDefault();
|
||
alert('A justificativa é obrigatória para reprovações.');
|
||
form.querySelector('.justificativa-input').focus();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Modal de Aprovação/Reprovação -->
|
||
<div id="modal-aprovacao" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center;">
|
||
<div class="modal-content">
|
||
<h3 id="titulo-modal" style="margin-top: 0; margin-bottom: 20px; font-size: 1.25rem;">Aprovar Solicitação</h3>
|
||
<form id="form-aprovacao" method="post" action="">
|
||
{% csrf_token %}
|
||
<input type="hidden" id="decisao-input" name="decisao" value="">
|
||
|
||
<div id="justificativa-div" style="display: none; margin-bottom: 20px;">
|
||
<label for="justificativa-input" style="display: block; margin-bottom: 8px; font-weight: 600; color: #334155;">
|
||
Justificativa Obrigatória <span style="color: #ef4444;">*</span>
|
||
</label>
|
||
<textarea id="justificativa-input" name="justificativa" rows="4"
|
||
style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 0.95rem;"
|
||
placeholder="Descreva o motivo..."></textarea>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px;">
|
||
<button type="button" onclick="fecharModalAprovacao()"
|
||
style="padding: 10px 20px; background: white; color: #64748b; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; font-weight: 600;">
|
||
Cancelar
|
||
</button>
|
||
<button type="submit"
|
||
style="padding: 10px 24px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
|
||
Confirmar
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %} |