Ajouts des dernières modification
This commit is contained in:
stiti
282
MaquetteWEB/html/CHEF/paiement.html
Normal file
282
MaquetteWEB/html/CHEF/paiement.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Suivi des Paiements des Professeurs</title>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
.filter-input {
|
||||
width: 300px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.pagination button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex; /* Utilise flexbox pour aligner les filtres */
|
||||
gap: 10px; /* Espace entre les filtres */
|
||||
}
|
||||
|
||||
.w3-select {
|
||||
width: 250px; /* Largeur fixe pour les sélecteurs */
|
||||
padding: 8px; /* Espacement intérieur pour rendre le texte lisible */
|
||||
}
|
||||
|
||||
/* Optionnel : ajuster le style des bordures et fonds */
|
||||
.w3-border {
|
||||
border-color: #ccc; /* Couleur de la bordure */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="w3-light-grey">
|
||||
|
||||
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container w3-bar-item">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;">
|
||||
</div>
|
||||
|
||||
<!-- Bouton burger pour petit écran -->
|
||||
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
|
||||
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
||||
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
||||
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
||||
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
||||
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
||||
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
||||
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section w3-right w3-hide-small w3-hide-medium">
|
||||
<div class="user-name">
|
||||
Florent MADELAINE
|
||||
</div>
|
||||
<div class="logout-container w3-bar-item">
|
||||
<a href="./notifications.html" title="Notifications">
|
||||
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
||||
</a>
|
||||
<a href="./settings.html" title="Paramètres">
|
||||
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
||||
</a>
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu mobile caché au départ -->
|
||||
<div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
|
||||
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
||||
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
||||
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
||||
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
||||
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
||||
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
||||
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
||||
|
||||
<!-- Section utilisateur pour mobile -->
|
||||
<div class="w3-bar-item w3-border-top w3-margin-top">
|
||||
<div class="user-name">Florent MADELAINE</div>
|
||||
<a href="./notifications.html" title="Notifications">
|
||||
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
||||
</a>
|
||||
<a href="./settings.html" title="Paramètres">
|
||||
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
||||
</a>
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container w3-card w3-white w3-padding">
|
||||
<h2>Suivi des Paiements des Professeurs</h2>
|
||||
|
||||
<select id="contractTypeFilter" class="w3-select w3-border" onchange="filterTable()">
|
||||
<option value="">Tous les contrats</option>
|
||||
<option value="Permanent">Permanents</option>
|
||||
<option value="Vacataire">Vacataires</option>
|
||||
</select>
|
||||
|
||||
<select id="paymentStatusFilter" class="w3-select w3-border" onchange="filterTable()">
|
||||
<option value="">Tous les statuts de paiement</option>
|
||||
<option value="En attente">En attente</option>
|
||||
<option value="Validé">Validé</option>
|
||||
<option value="Refusé">Refusé</option>
|
||||
</select>
|
||||
|
||||
<input type="text" id="searchInput" style="margin-top: 10px;" class="filter-input w3-input w3-border" placeholder="Rechercher par nom de professeur..." oninput="filterTable()">
|
||||
|
||||
<table class="w3-table w3-bordered w3-striped w3-white">
|
||||
<thead>
|
||||
<tr class="w3-light-grey">
|
||||
<th>Nom Professeur</th>
|
||||
<th>Statut</th>
|
||||
<th>Période</th>
|
||||
<th>Heures Payées</th>
|
||||
<th>Type Heure</th>
|
||||
<th>Montant Brut (€)</th>
|
||||
<th>Montant Net (€)</th>
|
||||
<th>Date de Paiement</th>
|
||||
<th>Statut de Paiement</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="paymentTableBody">
|
||||
<!-- Les paiements seront ajoutés ici dynamiquement -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pagination">
|
||||
<button class="w3-button w3-green w3-round" id="prevBtn" onclick="changePage(-1)">Précédent</button>
|
||||
<span id="pageInfo"></span>
|
||||
<button class="w3-button w3-green w3-round" id="nextBtn" onclick="changePage(1)">Suivant</button>
|
||||
</div>
|
||||
|
||||
<h3>Graphique des Paiements</h3>
|
||||
<canvas id="paymentsChart" width="300" height="150"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const rowsPerPage = 7;
|
||||
let currentPage = 1;
|
||||
|
||||
const payments = [
|
||||
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Janvier 2024', hoursPaid: 40, hourType: 'TD/TP', grossAmount: 3000, netAmount: 2400, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
|
||||
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Février 2024', hoursPaid: 35, hourType: 'CM/TD', grossAmount: 2750, netAmount: 2200, paymentDate: '2024-02-29', paymentStatus: 'En attente' },
|
||||
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Mars 2024', hoursPaid: 38, hourType: 'CM/TD/TP', grossAmount: 2900, netAmount: 2320, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
|
||||
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Janvier 2024', hoursPaid: 20, hourType: 'TP', grossAmount: 1000, netAmount: 800, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
|
||||
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Février 2024', hoursPaid: 18, hourType: 'TP', grossAmount: 900, netAmount: 720, paymentDate: '2024-02-29', paymentStatus: 'Refusé' },
|
||||
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Mars 2024', hoursPaid: 22, hourType: 'TP', grossAmount: 1100, netAmount: 880, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
|
||||
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Janvier 2024', hoursPaid: 45, hourType: 'CM/TD/Suivi', grossAmount: 3250, netAmount: 2600, paymentDate: '2024-01-31', paymentStatus: 'En attente' },
|
||||
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Février 2024', hoursPaid: 40, hourType: 'CM/TP', grossAmount: 3000, netAmount: 2400, paymentDate: '2024-02-29', paymentStatus: 'Validé' },
|
||||
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Mars 2024', hoursPaid: 42, hourType: 'TD/TP/Suivi', grossAmount: 3100, netAmount: 2480, paymentDate: '2024-03-31', paymentStatus: 'Refusé' },
|
||||
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Janvier 2024', hoursPaid: 25, hourType: 'CM', grossAmount: 1200, netAmount: 960, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
|
||||
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Février 2024', hoursPaid: 20, hourType: 'CM', grossAmount: 1000, netAmount: 800, paymentDate: '2024-02-29', paymentStatus: 'En attente' },
|
||||
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Mars 2024', hoursPaid: 30, hourType: 'CM', grossAmount: 1500, netAmount: 1200, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
|
||||
];
|
||||
|
||||
function renderTable() {
|
||||
const tableBody = document.getElementById('paymentTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
const filteredPayments = filterPayments();
|
||||
const startIndex = (currentPage - 1) * rowsPerPage;
|
||||
const endIndex = startIndex + rowsPerPage;
|
||||
const currentPayments = filteredPayments.slice(startIndex, endIndex);
|
||||
|
||||
currentPayments.forEach(payment => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${payment.name}</td>
|
||||
<td>${payment.status}</td>
|
||||
<td>${payment.period}</td>
|
||||
<td>${payment.hoursPaid}</td>
|
||||
<td>${payment.hourType}</td>
|
||||
<td>${payment.grossAmount}</td>
|
||||
<td>${payment.netAmount}</td>
|
||||
<td>${payment.paymentDate}</td>
|
||||
<td>${payment.paymentStatus}</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
updatePagination(filteredPayments.length);
|
||||
updateChart(filteredPayments);
|
||||
}
|
||||
|
||||
function filterPayments() {
|
||||
const contractType = document.getElementById('contractTypeFilter').value;
|
||||
const paymentStatus = document.getElementById('paymentStatusFilter').value;
|
||||
const searchValue = document.getElementById('searchInput').value.toLowerCase();
|
||||
|
||||
return payments.filter(payment => {
|
||||
const matchesContract = !contractType || payment.status === contractType;
|
||||
const matchesStatus = !paymentStatus || payment.paymentStatus === paymentStatus;
|
||||
const matchesSearch = payment.name.toLowerCase().includes(searchValue);
|
||||
return matchesContract && matchesStatus && matchesSearch;
|
||||
});
|
||||
}
|
||||
|
||||
function updatePagination(totalFiltered) {
|
||||
const pageInfo = document.getElementById('pageInfo');
|
||||
const totalPages = Math.ceil(totalFiltered / rowsPerPage);
|
||||
pageInfo.innerText = `Page ${currentPage} sur ${totalPages}`;
|
||||
document.getElementById('prevBtn').disabled = currentPage === 1;
|
||||
document.getElementById('nextBtn').disabled = currentPage === totalPages;
|
||||
}
|
||||
|
||||
function changePage(direction) {
|
||||
currentPage += direction;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function updateChart(filteredPayments) {
|
||||
const permanentPayments = filteredPayments.filter(p => p.status === 'Permanent');
|
||||
const temporaryPayments = filteredPayments.filter(p => p.status === 'Vacataire');
|
||||
|
||||
const permanentTotal = permanentPayments.reduce((sum, p) => sum + p.netAmount, 0);
|
||||
const temporaryTotal = temporaryPayments.reduce((sum, p) => sum + p.netAmount, 0);
|
||||
|
||||
const ctx = document.getElementById('paymentsChart').getContext('2d');
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Permanents', 'Vacataires'],
|
||||
datasets: [{
|
||||
label: 'Montant Net (€)',
|
||||
data: [permanentTotal, temporaryTotal],
|
||||
backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Montant Net (€)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function filterTable() {
|
||||
currentPage = 1; // Reset to the first page on filter change
|
||||
renderTable();
|
||||
}
|
||||
|
||||
// Initial render
|
||||
renderTable();
|
||||
</script>
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
var x = document.getElementById("mobileMenu");
|
||||
if (x.className.indexOf("w3-show") == -1) {
|
||||
x.className += " w3-show";
|
||||
} else {
|
||||
x.className = x.className.replace(" w3-show", "");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user