385 lines
14 KiB
HTML
385 lines
14 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Profil utilisateur</title>
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="{% static 'styles.css' %}">
|
|
|
|
<style>
|
|
.bg-orange-dark {
|
|
background: linear-gradient(90deg, #993d00, #b34700); /* oranges plus sombres */
|
|
color: white;
|
|
}
|
|
.card-body p { margin-bottom: 0.5rem; }
|
|
|
|
.main {
|
|
margin-left: 0px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row flex-nowrap">
|
|
<!-- Sidebar -->
|
|
{% include 'menu_principal.html' %}
|
|
|
|
<!-- Main -->
|
|
<main class="col px-2 py-4" style="margin-left: 280px;">
|
|
|
|
{% if messages %}
|
|
<!-- Modal Message Django -->
|
|
<div class="modal fade" id="messageModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-orange-dark text-white">
|
|
<h5 class="modal-title">
|
|
{% if messages.0.tags == 'error' %}
|
|
Erreur
|
|
{% elif messages.0.tags == 'success' %}
|
|
Succès
|
|
{% else %}
|
|
Information
|
|
{% endif %}
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% for message in messages %}
|
|
<p>{{ message }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<!-- Icône Notification -->
|
|
<div class="notification-bell position-fixed top-0 end-0 m-3" data-bs-toggle="modal" data-bs-target="#modalNotifications" style="z-index:1050; cursor:pointer;">
|
|
<i class="bi bi-bell-fill fs-4"></i>
|
|
<span class="badge bg-danger">{{ notifications_contrats|length }}</span>
|
|
</div>
|
|
|
|
<!-- Modal Notifications Contrats -->
|
|
<div class="modal fade" id="modalNotifications" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-orange-dark text-white">
|
|
<h5 class="modal-title"><i class="bi bi-bell me-2"></i>Contrats proches de la fin</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% if notifications_contrats %}
|
|
<ul class="list-group">
|
|
{% for notif in notifications_contrats %}
|
|
<h5>Votre Contrat <strong>{{ notif.numero }}</strong> signé le <strong>{{ notif.date }}</strong>
|
|
se termine dans
|
|
<span class="badge bg-danger rounded-pill">{{ notif.jours_restants }} jours</span>
|
|
</h5>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="text-muted">Aucun contrat proche de la fin.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Profil -->
|
|
|
|
<div class="container py-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-10 col-lg-8">
|
|
<div class="card border-0 shadow-sm">
|
|
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<h4 class="mb-0 fw-bold">
|
|
<i class="bi bi-person-circle me-2"></i> Mon Profil
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="card-body p-3">
|
|
<!-- Infos personnelles -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<p><strong>Nom :</strong> {{ employe.last_name|default:"Non renseigné" }}</p>
|
|
<p><strong>Prénom :</strong> {{ employe.first_name|default:"Non renseigné" }}</p>
|
|
<p><strong>Matricule :</strong> {{ employe.matricule|default:"Non renseigné" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><strong>Département :</strong> {{ employe.departement|default:"Non renseigné" }}</p>
|
|
<p><strong>Email :</strong> {{ employe.email|default:"Non renseigné" }}</p>
|
|
<p><strong>Téléphone :</strong> {{ employe.telephone|default:"Non renseigné" }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contrats -->
|
|
<h5 class="mt-3">Contrats</h5>
|
|
{% for contrat in contrats %}
|
|
<div class="mb-3 p-3 border rounded">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p><strong>Numéro :</strong> {{ contrat.numero_contrat }}</p>
|
|
<p><strong>Type :</strong> {{ contrat.type_contrat }}</p>
|
|
<p><strong>Date début :</strong> {{ contrat.date_debut|date:"d/m/Y" }}</p>
|
|
<p><strong>Date fin :</strong> {{ contrat.date_fin|date:"d/m/Y"|default:"Non précisée" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><strong>Salaire mensuel :</strong>
|
|
{% if contrat.salaire_mensuel %}
|
|
{{ contrat.salaire_mensuel }} GNF
|
|
{% else %}
|
|
Non précisé
|
|
{% endif %}
|
|
</p>
|
|
<p><strong>Statut :</strong>
|
|
<span class="badge
|
|
{% if contrat.statut_auto == 'Actif' %}bg-success
|
|
{% elif contrat.statut_auto == 'Terminé' %}bg-danger
|
|
{% elif contrat.statut_auto == 'Suspendu' %}bg-warning text-dark
|
|
{% else %}bg-secondary{% endif %}">
|
|
{{ contrat.statut_auto }}
|
|
</span>
|
|
</p>
|
|
<p><strong>Solde congé :</strong> {{ contrat.solde_conge|default:"Non précisé" }} jours</p>
|
|
<p><strong>Fichier :</strong>
|
|
{% if contrat.fichier_contrat %}
|
|
<a href="{{ contrat.fichier_contrat.url }}" target="_blank">
|
|
<i class="bi bi-file-earmark-pdf me-1"></i> Télécharger
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Aucun fichier</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-danger">Aucun contrat trouvé.</p>
|
|
{% endfor %}
|
|
|
|
<!-- Projets -->
|
|
<h5 class="mt-3">Projets</h5>
|
|
<ul class="list-group mb-3">
|
|
{% for a in affectations %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
{{ a.projet.nom_projet }} - {{ a.temps_affectation }}%
|
|
{% if a.projet.statut %}
|
|
- <span class="badge bg-info text-dark">{{ a.projet.statut }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<button type="button" class="btn bg-orange-dark btn-sm text-white"
|
|
data-bs-toggle="modal" data-bs-target="#modalFicheProjet{{ a.projet.id }}">
|
|
<i class="bi bi-info-circle"></i> Détails
|
|
</button>
|
|
</div>
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item text-muted text-center">Aucun projet assigné.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-footer bg-white d-flex justify-content-end">
|
|
<button type="button" class="btn btn-outline-secondary me-2" onclick="window.history.back()">Fermer</button>
|
|
<a href="{% url 'profil' %}" class="btn bg-orange-dark text-white">
|
|
<i class="bi bi-pencil-square me-1"></i> Renseigner les autres informations
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% for a in affectations %}
|
|
<!-- Modal Détails Projet -->
|
|
<div class="modal fade" id="modalFicheProjet{{ a.projet.id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-orange-dark text-white">
|
|
<h5 class="modal-title">
|
|
<i class="bi bi-info-circle me-2"></i>Détails du projet {{ a.projet.nom_projet }}
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<p><strong>Nom :</strong> {{ a.projet.nom_projet }}</p>
|
|
<p><strong>Numéro convention :</strong> {{ a.projet.numero_convention }}</p>
|
|
<p><strong>Dates :</strong> {{ a.projet.date_debut|date:"d/m/Y" }} → {{ a.projet.date_fin|date:"d/m/Y" }}</p>
|
|
<p><strong>Type :</strong> {{ a.projet.get_type_projet_display }}</p>
|
|
<p><strong>Domaine :</strong> {{ a.projet.get_domaine_recherche_display }}</p>
|
|
<p><strong>Budget :</strong> {{ a.projet.budget }} GNF</p>
|
|
<p><strong>Budget RH :</strong> {{ a.projet.budget_RH }} GNF</p>
|
|
<p><strong>Statut :</strong> <span class="badge bg-info">{{ a.projet.statut }}</span></p>
|
|
<p><strong>Description :</strong> {{ a.projet.description }}</p>
|
|
|
|
<h6 class="mt-4">Employés affectés :</h6>
|
|
<ul class="list-group mb-3">
|
|
{% for aff in a.projet.affectations.all %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
{{ aff.employe }} <span class="badge bg-orange-dark">{{ aff.temps_affectation }}%</span>
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item text-muted">Aucun employé affecté</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<h6>Bailleurs :</h6>
|
|
<ul class="list-group mb-3">
|
|
{% for f in a.projet.financements.all %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
{{ f.bailleur.nom }} <span class="badge bg-success">{{ f.pourcentage }}%</span>
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item text-muted">Aucun bailleur enregistré</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<h6 class="mt-4">Documents du projet :</h6>
|
|
<ul class="list-group">
|
|
{% for doc in a.projet.documents.all %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<strong>{{ doc.get_nom_document_display }}</strong><br>
|
|
pour le projet {{ a.projet.nom_projet }}<br>
|
|
{% if doc.description %}
|
|
<small class="text-muted">{{ doc.description }}</small><br>
|
|
{% endif %}
|
|
<small class="text-muted">
|
|
{% if doc.numero %}
|
|
{{ doc.numero }}
|
|
{% endif %}
|
|
</small>
|
|
<br> <small></small>
|
|
document ajouter le {{ doc.date_ajout|date:"d/m/Y" }}</small>
|
|
{% if doc.date_validite %}
|
|
<br><small class="text-muted"> et Valide jusqu'au {{ doc.date_validite|date:"d/m/Y" }}</small>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item text-muted">Aucun document disponible</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-1"></i> Fermer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Ferme les modales ouvertes avant d'en ouvrir une autre
|
|
const modals = document.querySelectorAll('.modal');
|
|
modals.forEach(modal => {
|
|
modal.addEventListener('show.bs.modal', function () {
|
|
document.querySelectorAll('.modal.show').forEach(openModal => {
|
|
if (openModal !== modal) {
|
|
const instance = bootstrap.Modal.getInstance(openModal);
|
|
if (instance) instance.hide();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Répare le bug d'écran figé après fermeture
|
|
document.addEventListener('hidden.bs.modal', function () {
|
|
if (!document.querySelector('.modal.show')) {
|
|
document.body.classList.remove('modal-open');
|
|
document.body.style.removeProperty('padding-right');
|
|
}
|
|
});
|
|
|
|
|
|
const forms = document.querySelectorAll('form[action*="ajouter-document"]');
|
|
forms.forEach(form => {
|
|
form.addEventListener('submit', function (e) {
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
const modalEl = form.closest('.modal');
|
|
if (btn) {
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Enregistrement...';
|
|
}
|
|
if (modalEl) {
|
|
const modalInstance = bootstrap.Modal.getInstance(modalEl);
|
|
if (modalInstance) modalInstance.hide();
|
|
}
|
|
});
|
|
});
|
|
|
|
const messageModalEl = document.getElementById('messageModal');
|
|
if (messageModalEl) {
|
|
const messageModal = new bootstrap.Modal(messageModalEl);
|
|
messageModal.show();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|