158 lines
5.1 KiB
HTML
158 lines
5.1 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PRINCICALA</title>
|
|
<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' %}">
|
|
<link rel="stylesheet" href="{% static 'icons.css' %}">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
.bg-orange-dark {
|
|
background: linear-gradient(90deg, #993d00, #b34700); /* oranges plus sombres */
|
|
color: white;
|
|
}
|
|
.sidebar .nav-link {
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
.sidebar .nav-link:hover {
|
|
background-color: rgba(255,255,255,0.2);
|
|
border-radius: 5px;
|
|
}
|
|
.logo {
|
|
max-width: 90px;
|
|
|
|
}
|
|
main {
|
|
margin-left: 220px;
|
|
}
|
|
.stat-card {
|
|
background: rgb(255, 255, 255);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 2px 5px rgba(113, 11, 11, 0.1);
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row flex-nowrap">
|
|
|
|
<nav class="col-12 col-md-3 col-lg-2 sidebar p-3">
|
|
<div class="text-center mb-4">
|
|
<img src="{% static 'CERFIF.jpg' %}" alt="Logo" class="logo mb-5">
|
|
<h4 class="text-white">CERFIG</h4>
|
|
</div>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item mb-2">
|
|
<a href="/" class="nav-link"><i class="bi bi-speedometer2"></i> Tableau de bord</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class=" bi bi-airplane"></i> Demande de congé </a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class="bi bi-people"></i> Gestion des Employés</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class="bi bi-folder"></i> Gestion des Projets</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class="bi bi-airplane"></i> Gestion des Congés</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class="bi bi-graph-up"></i>Rapports et Statistiques</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a href="#" class="nav-link"><i class="bi bi-gear"></i> Paramètres</a>
|
|
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-link"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Contenu principal -->
|
|
<main class="col px-4 py-4">
|
|
<h1 class="mb-4">Bienvenue sur le tableau de bord</h1>
|
|
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<h5><i class="bi bi-airplane"></i> Congés en attente</h5>
|
|
|
|
<p class="display-6 fw-bold"> {{ nombre_conges_attente }}</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<h5><i class="bi bi-people"></i> Nombre Employés </h5>
|
|
<p class="display-6 fw-bold">{{ nombre_employes }}</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<h5><i class="bi bi-kanban"></i> Projets en cours</h5>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card p-3">
|
|
<h3>
|
|
<i class="bi bi-people"></i> La liste des employés en congé</h3>
|
|
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Employé</th>
|
|
<th>Type de congé</th>
|
|
<th>Date de début</th>
|
|
<th>Date de fin</th>
|
|
<th>Statut</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{% for employe in personnes_en_conge %}
|
|
<tr>
|
|
<td>{{ employe.nom }} {{ employe.prenom }}</td>
|
|
<td>{{ employe.type }}</td>
|
|
<td>{{ employe.date_debut }}</td>
|
|
<td>{{ employe.date_fin }}</td>
|
|
<td>
|
|
<span class="badge bg-success">{{ employe.statut }} </span>
|
|
<td>
|
|
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">Personne en conge </td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|