206 lines
		
	
	
		
			8.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
		
		
			
		
	
	
			206 lines
		
	
	
		
			8.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| 
								 | 
							
								<!DOCTYPE html>
							 | 
						||
| 
								 | 
							
								<html lang="fr">
							 | 
						||
| 
								 | 
							
								<head>
							 | 
						||
| 
								 | 
							
								    <meta charset="UTF-8">
							 | 
						||
| 
								 | 
							
								    <meta name="viewport" content="width=device-width, initial-scale=1.0">
							 | 
						||
| 
								 | 
							
								    <title>Dashboard Financier</title>
							 | 
						||
| 
								 | 
							
								    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
							 | 
						||
| 
								 | 
							
								    <link rel="stylesheet" href="../../css/FINANCE/finance.css">
							 | 
						||
| 
								 | 
							
								</head>
							 | 
						||
| 
								 | 
							
								<body>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    <div class="header">
							 | 
						||
| 
								 | 
							
								        <!-- Logo pour retourner à l'accueil -->
							 | 
						||
| 
								 | 
							
								        <div class="logo-container">
							 | 
						||
| 
								 | 
							
								            <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        <!-- Catégories dans le header -->
							 | 
						||
| 
								 | 
							
								        <div class="categories">
							 | 
						||
| 
								 | 
							
								            <a href="./finance.html">Accueil</a>
							 | 
						||
| 
								 | 
							
								            <a href="./paiements_en_attente.html">Paiements en attente</a>
							 | 
						||
| 
								 | 
							
								            <a href="./rapports_financiers.html">Rapports Financiers</a>
							 | 
						||
| 
								 | 
							
								            <a href="./historique_paiements.html">Historique des transactions</a>
							 | 
						||
| 
								 | 
							
								            <a href="./mes_informations.html">Mes informations et documents</a>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								    
							 | 
						||
| 
								 | 
							
								        <!-- Section utilisateur avec déconnexion -->
							 | 
						||
| 
								 | 
							
								        <div class="user-section">
							 | 
						||
| 
								 | 
							
								            <div class="user-name">
							 | 
						||
| 
								 | 
							
								                Jean DUPONT
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								            <div class="logout-container">
							 | 
						||
| 
								 | 
							
								                <a href="../../index.html" title="Se déconnecter">
							 | 
						||
| 
								 | 
							
								                    <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
							 | 
						||
| 
								 | 
							
								                </a>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								    </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    <div class="dashboard-container">
							 | 
						||
| 
								 | 
							
								        <!-- Alertes et Notifications -->
							 | 
						||
| 
								 | 
							
								        <div class="section-header" id="notifications-section">
							 | 
						||
| 
								 | 
							
								            <h2>Alertes et Notifications</h2>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								        <div id="notifications-container">
							 | 
						||
| 
								 | 
							
								            <!-- Notifications -->
							 | 
						||
| 
								 | 
							
								            <div class="alert">
							 | 
						||
| 
								 | 
							
								                <span class="close" onclick="this.parentElement.style.display='none';">×</span>
							 | 
						||
| 
								 | 
							
								                <p><strong>Paiements en attente :</strong> Vous avez des paiements qui n'ont pas encore été traités. Merci de vérifier dans : <a href="paiements_en_attente.html">Paiements en attente</a>.</p>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								            <div class="success">
							 | 
						||
| 
								 | 
							
								                <span class="close" onclick="this.parentElement.style.display='none';">×</span>
							 | 
						||
| 
								 | 
							
								                <p><strong>Rapport validé :</strong> Votre dernier rapport financier a été validé. Vous pouvez le consulter dans : <a href="rapports_financiers.html">Rapports Financiers</a>.</p>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        <!-- Script pour gérer l'affichage des notifications -->
							 | 
						||
| 
								 | 
							
								        <script>
							 | 
						||
| 
								 | 
							
								            const notificationsContainer = document.getElementById('notifications-container');
							 | 
						||
| 
								 | 
							
								            const notificationsSection = document.getElementById('notifications-section');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								            // Vérifiez si le conteneur des notifications est vide
							 | 
						||
| 
								 | 
							
								            if (notificationsContainer.childElementCount === 0) {
							 | 
						||
| 
								 | 
							
								                notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
							 | 
						||
| 
								 | 
							
								            }
							 | 
						||
| 
								 | 
							
								        </script>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        <!-- Paiements en attente -->
							 | 
						||
| 
								 | 
							
								        <div class="section-header">
							 | 
						||
| 
								 | 
							
								            <h2>Paiements en Attente</h2>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								        <div class="card">
							 | 
						||
| 
								 | 
							
								            <div class="table-container">
							 | 
						||
| 
								 | 
							
								                <table>
							 | 
						||
| 
								 | 
							
								                    <thead>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <th>ID Transaction</th>
							 | 
						||
| 
								 | 
							
								                            <th>Période</th>
							 | 
						||
| 
								 | 
							
								                            <th>Montant en Attente (€)</th>
							 | 
						||
| 
								 | 
							
								                            <th>Date prévue de paiement</th>
							 | 
						||
| 
								 | 
							
								                            <th>Statut</th>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </thead>
							 | 
						||
| 
								 | 
							
								                    <tbody>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>002</td>
							 | 
						||
| 
								 | 
							
								                            <td>Octobre 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>1200,00</td>
							 | 
						||
| 
								 | 
							
								                            <td>15/10/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>En attente</td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>003</td>
							 | 
						||
| 
								 | 
							
								                            <td>Novembre 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>1800,00</td>
							 | 
						||
| 
								 | 
							
								                            <td>15/11/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>En attente</td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </tbody>
							 | 
						||
| 
								 | 
							
								                </table>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								            <div class="button-container" style="text-align: center; margin-top: 20px;">
							 | 
						||
| 
								 | 
							
								                <a href="./paiements_en_attente.html">
							 | 
						||
| 
								 | 
							
								                    <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
							 | 
						||
| 
								 | 
							
								                        Voir plus
							 | 
						||
| 
								 | 
							
								                    </button>
							 | 
						||
| 
								 | 
							
								                </a>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        <!-- Rapports Financiers -->
							 | 
						||
| 
								 | 
							
								        <div class="section-header">
							 | 
						||
| 
								 | 
							
								            <h2>Rapports Financiers</h2>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								        <div class="card">
							 | 
						||
| 
								 | 
							
								            <div class="table-container">
							 | 
						||
| 
								 | 
							
								                <table>
							 | 
						||
| 
								 | 
							
								                    <thead>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <th>Rapport</th>
							 | 
						||
| 
								 | 
							
								                            <th>Date de création</th>
							 | 
						||
| 
								 | 
							
								                            <th>Statut</th>
							 | 
						||
| 
								 | 
							
								                            <th>Actions</th>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </thead>
							 | 
						||
| 
								 | 
							
								                    <tbody>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>Rapport d'Octobre 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>01/10/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>Validé</td>
							 | 
						||
| 
								 | 
							
								                            <td><a href="rapports_financiers.html#octobre2024" class="btn">Voir Rapport</a></td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>Rapport de Novembre 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>01/11/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>En cours</td>
							 | 
						||
| 
								 | 
							
								                            <td><a href="#" class="btn">Préparer Rapport</a></td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </tbody>
							 | 
						||
| 
								 | 
							
								                </table>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								            <div class="button-container" style="text-align: center; margin-top: 20px;">
							 | 
						||
| 
								 | 
							
								                <a href="./rapports_financiers.html">
							 | 
						||
| 
								 | 
							
								                    <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
							 | 
						||
| 
								 | 
							
								                        Voir plus
							 | 
						||
| 
								 | 
							
								                    </button>
							 | 
						||
| 
								 | 
							
								                </a>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        <!-- Historique des paiements du personnel -->
							 | 
						||
| 
								 | 
							
								        <div class="section-header">
							 | 
						||
| 
								 | 
							
								            <h2>Historique des Paiements du Personnel</h2>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								        <div class="card">
							 | 
						||
| 
								 | 
							
								            <div class="table-container">
							 | 
						||
| 
								 | 
							
								                <table>
							 | 
						||
| 
								 | 
							
								                    <thead>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <th>Période</th>
							 | 
						||
| 
								 | 
							
								                            <th>Personnel</th>
							 | 
						||
| 
								 | 
							
								                            <th>Montant (€)</th>
							 | 
						||
| 
								 | 
							
								                            <th>Date de Paiement</th>
							 | 
						||
| 
								 | 
							
								                            <th>Bulletin de paie</th>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </thead>
							 | 
						||
| 
								 | 
							
								                    <tbody>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>Septembre 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>Denis MONNERAT (permanent)</td>
							 | 
						||
| 
								 | 
							
								                            <td>1800,00</td>
							 | 
						||
| 
								 | 
							
								                            <td>01/10/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                        <tr>
							 | 
						||
| 
								 | 
							
								                            <td>Août 2024</td>
							 | 
						||
| 
								 | 
							
								                            <td>Maxime MENAULT (vacataire)</td>
							 | 
						||
| 
								 | 
							
								                            <td>870,00</td>
							 | 
						||
| 
								 | 
							
								                            <td>01/09/2024</td>
							 | 
						||
| 
								 | 
							
								                            <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
							 | 
						||
| 
								 | 
							
								                        </tr>
							 | 
						||
| 
								 | 
							
								                    </tbody>
							 | 
						||
| 
								 | 
							
								                </table>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								            <div class="button-container" style="text-align: center; margin-top: 20px;">
							 | 
						||
| 
								 | 
							
								                <a href="./historique_paiements.html">
							 | 
						||
| 
								 | 
							
								                    <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
							 | 
						||
| 
								 | 
							
								                        Voir plus
							 | 
						||
| 
								 | 
							
								                    </button>
							 | 
						||
| 
								 | 
							
								                </a>
							 | 
						||
| 
								 | 
							
								            </div>
							 | 
						||
| 
								 | 
							
								        </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    <div class="footer">
							 | 
						||
| 
								 | 
							
								        <p>© 2024 IUT de Fontainebleau. Tous droits réservés | 
							 | 
						||
| 
								 | 
							
								            <a href="../mentions_legales.html">Mentions légales</a>
							 | 
						||
| 
								 | 
							
								        </p>
							 | 
						||
| 
								 | 
							
								    </div>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								</html>
							 |