<?
php
// Connexion à la base de données
$host = 'localhost'; // Remplace par l'adresse de ton serveur
$dbname = 'support_client'; // Remplace par le nom de ta base de données
$username = 'root'; // Ton nom d'utilisateur MySQL
$password = ''; // Ton mot de passe MySQL
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Requêtes SQL pour récupérer les données
$stmtUsers = $pdo->query("SELECT COUNT(*) as total_users FROM users");
$usersCount = $stmtUsers->fetch(PDO::FETCH_ASSOC)['total_users'];
$stmtReservations = $pdo->query("SELECT COUNT(*) as total_reservations FROM
reservations");
$reservationsCount = $stmtReservations->fetch(PDO::FETCH_ASSOC)
['total_reservations'];
$stmtTickets = $pdo->query("SELECT COUNT(*) as total_tickets FROM tickets");
$ticketsCount = $stmtTickets->fetch(PDO::FETCH_ASSOC)['total_tickets'];
} catch (PDOException $e) {
die("Erreur : " . $e->getMessage());
}
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Requête pour récupérer les données des tickets
$stmt = $pdo->query("SELECT client, debut, statut, priorite FROM tickets");
// Récupération des résultats
$tickets = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die("Erreur : " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:\wamp64\www\projet\client\pages\[Link]">
<link rel="stylesheet" href="C:\wamp64\www\projet\client\pages\
liste_reservation.php">
<link rel="stylesheet" href="C:\wamp64\www\projet\client\pages\
client_list.php">
<link rel="stylesheet" href="C:\wamp64\www\projet\client\pages\
admin_chat.html">
<!-- Boxicons -->
<link href='[Link]
rel='stylesheet'>
<link href='C:\wamp64\www\projet\client\pages\[Link]' rel='stylesheet'>
<!-- My CSS -->
<link rel="stylesheet" href="[Link]">
<title>AdminHub</title>
<style>
[Link] .dark-mode {
background: var(--grey); /* Appliquez le style approprié ici */
color: var(--dark); /* Exemple de couleur de texte en mode sombre */
}
body {
background: var(--grey);
overflow-x: hidden;
}
/* Conteneur principal : applique flex uniquement sur .table-data et .todo */
#content main .table-container {
display: flex; /* Active le mode flex pour les enfants .table-data et .todo */
flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
gap: 20px; /* Espace entre les éléments */
}
/* Style pour .table-data */
#content main .table-container .table-data {
flex-grow: 2; /* Prend plus d'espace horizontalement */
flex-basis: 65%; /* Définit une largeur initiale */
}
/* Style pour .todo */
/* Conteneur principal pour .table-data et .todo */
#content main .table-container{
display: flex; /* Active le mode flex */
flex-wrap: wrap; /* Permet le retour à la ligne si l'espace est limité */
gap: 24px; /* Espacement entre les éléments */
margin-top: 32px; /* Ajoute un espace entre header-title et table-container
*/
}
/* Style pour .table-data */
#content main .table-data {
flex-grow: 2; /* Occupation plus large pour le tableau */
flex-basis: 60%; /* Prend 60% de l'espace du conteneur */
}
/* Style pour .todo */
#content main .todo {
flex-grow: 1; /* Prend moins d'espace que .table-data */
flex-basis: 30%; /* Prend 35% de l'espace du conteneur */
display: flex;
flex-direction: column; /* Organise les éléments en colonne */
background: var(--light); /* Conserve le style existant */
border-radius: 10px;
padding: 20px;
}
#content main .table-data .todo {
flex-grow: 1;
flex-basis: 300px;
}
#content main .table-data .todo .todo-list {
width: 100%;
}
#content main .table-data .todo .todo-list li {
width: 100%;
margin-bottom: 16px;
background: var(--grey);
border-radius: 10px;
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
#content main .table-data .todo .todo-list li .bx {
cursor: pointer;
}
#content main .table-data .todo .todo-list [Link] {
border-left: 10px solid var(--blue);
}
#content main .table-data .todo .todo-list [Link]-completed {
border-left: 10px solid var(--orange);
}
#content main .table-data .todo .todo-list li:last-child {
margin-bottom: 0;
}
/* Style des éléments de la todo-list */
#content .todo .todo-list li {
width: 100%; /* Largeur flexible */
margin-bottom: 30px; /* Espacement vertical entre les éléments */
background: var(--light); /* Couleur de fond légère */
border-radius: 10px; /* Coins arrondis */
padding: 14px 20px; /* Espacement interne */
display: flex; /* Organisation en ligne pour les éléments internes */
justify-content: space-between; /* Alignement entre le texte et l'icône */
align-items: center; /* Centre les éléments verticalement */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajout d'une ombre subtile */
}
/* Style pour les icônes de la todo-list */
#content .todo .todo-list li .bx {
cursor: pointer; /* Ajoute un pointeur pour les interactions */
}
/* Différenciation des statuts */
#content .todo .todo-list [Link] {
border-left: 10px solid #007bff; /* Bleu pour les tâches terminées */
}
#content .todo .todo-list [Link]-completed {
border-left: 10px solid #ff5733; /* Orange pour les tâches non terminées */
}
/* Style pour le dernier élément (supprime la marge) */
#content .todo .todo-list li:last-child {
margin-bottom: 0; /* Supprime la marge en bas */
}
/* Flexibilité et intégration */
#content main .todo {
display: flex; /* Structure en colonne */
flex-direction: column; /* Organise les enfants verticalement */
gap: 16px; /* Espacement uniforme entre les éléments */
background: var(--light);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Style moderne avec ombre subtile
*/
}
/* En-tête des tableaux */
/* Style des tableaux */
#content main .table-data .order table tr td:first-child {
display: flex;
align-items: center;
gap: 12px;
padding-left: 6px;
}
#content main .table-data .order table td img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
/* Effet survol des lignes */
#content main .table-data .order table tbody tr:hover {
background: var(--grey);
}
/* Style des statuts */
#content main .table-data .order table tr td .status {
font-size: 10px;
padding: 6px 16px;
border-radius: 20px;
font-weight: 700;
text-transform: capitalize; /* Met une majuscule sur la première lettre */
}
/* Couleurs spécifiques des statuts */
#content main .table-data .order table tr td .[Link] {
background-color: #dc3545; /* Rouge pour 'fermer' */
color: #fff;
}
#content main .table-data .order table tr td .[Link] {
background-color: #28a745; /* Vert pour 'nouveau' */
color: #fff;
}
#content main .table-data .order table tr td .[Link]-cours {
background-color: #ffc107; /* Jaune pour 'en cours' */
color: #000;
}
/* Style des priorités */
#content main .table-data .order table tr td .priority {
font-size: 10px;
padding: 6px 16px;
border-radius: 20px;
font-weight: 700;
text-transform: capitalize; /* Met une majuscule sur la première lettre */
}
/* Couleurs spécifiques des priorités */
#content main .table-data .order table tr td .[Link] {
background-color: #007bff; /* Bleu pour 'normal' */
color: #fff;
}
#content main .table-data .order table tr td .[Link] {
background-color: #ff5733; /* Orange pour 'urgent' */
color: #fff;
}
</style>
</head>
<body>
<!-- SIDEBAR -->
<section id="sidebar">
<a href="#" class="brand">
<i class='bx bxs-happy-alt'></i>
<span class="text">AdminHub</span>
</a>
<ul class="side-menu top">
<li class="active">
<a href="[Link]
master/[Link]">
<i class='bx bxs-dashboard' ></i>
<span class="text">Dashboard</span>
</a>
</li>
<li>
<a
href="[Link]
<i class='bx bxs-user-detail' ></i>
<span class="text">liste clients</span>
</a>
</li>
<li>
<a href="[Link]
<i class='bx bxs-bookmarks' ></i>
<span class="text">liste tickets</span>
</a>
</li>
<li>
<a
href="[Link]
<i class='bx bxs-calendar' ></i>
<span class="text">liste reservation</span>
</a>
</li>
<li>
<a
href="[Link]
<i class='bx bxs-message' ></i>
<span class="text">message</span>
</a>
</li>
<li >
<a
href="[Link]
<i class='bx bxs-bar-chart-alt-2' ></i>
<span class="text">Statistiques</span>
</a>
</li>
<li >
<a href="admin_send_notif.php">
<i class='bx bxs-bell' ></i>
<span class="text">notifications</span>
</a>
</li>
</ul>
<ul class="side-menu">
<li>
<a href="[Link]
master/send_email.php">
<i class='bx bx-mail-send'></i>
<span class="text">Envoi de mails</span>
</a>
</li>
<li>
<a href="[Link]" class="logout">
<i class='bx bxs-log-out-circle' ></i>
<span class="text">Logout</span>
</a>
</li>
</ul>
</section>
<!-- SIDEBAR -->
<!-- CONTENT -->
<section id="content">
<!-- NAVBAR -->
<nav>
<i class='bx bx-menu' ></i>
<a href="#" class="nav-link">Categories</a>
<form action="#">
<div class="form-input">
<input type="search" placeholder="Search...">
<button type="submit" class="search-btn"><i class='bx
bx-search' ></i></button>
</div>
</form>
<input type="checkbox" id="switch-mode" hidden>
<label for="switch-mode" class="switch-mode"></label>
<a href="#" class="notification">
<i class='bx bxs-bell' ></i>
<span class="num">8</span>
</a>
<a href="#" class="profile">
<img src="img/[Link]">
</a>
</nav>
<!-- NAVBAR -->
<!-- MAIN -->
<main>
<div class="head-title">
<div class="left">
<h1>Dashboard</h1>
<ul class="breadcrumb">
<li>
<a href="#">Dashboard</a>
</li>
<li><i class='bx bx-chevron-right' ></i></li>
<li>
<a class="active" href="#">Home</a>
</li>
</ul>
</div>
<a href="[Link]
class="btn-download">
<i class='bx bxs-cloud-download' ></i>
<span class="text">Download PDF</span>
</a>
</div>
<ul class="box-info">
<li>
<i class='bx bxs-calendar-check'></i>
<span class="text">
<h3><?php echo $reservationsCount; ?></h3>
<p>Réservations</p>
</span>
</li>
<li>
<i class='bx bxs-group'></i>
<span class="text">
<h3><?php echo $usersCount; ?></h3>
<p>Clients</p>
</span>
</li>
<li>
<i class='bx bxs-dollar-circle'></i>
<span class="text">
<h3><?php echo $ticketsCount; ?></h3>
<p>Tickets</p>
</span>
</li>
</ul>
<div class="table-container">
<div class="table-data">
<div class="order">
<div class="head">
<h3>Recent Orders</h3>
<i class='bx bx-search'></i>
<i class='bx bx-filter'></i>
</div>
<table>
<thead>
<tr>
<th>User</th>
<th>Date Order</th>
<th>Status</th>
<th>priorite</th>
</tr>
</thead>
<tbody>
<?php foreach ($tickets as $ticket): ?>
<tr>
<td>
<img src="img/[Link]">
<p><?php echo htmlspecialchars($ticket['client']); ?
></p>
</td>
<td><?php echo htmlspecialchars($ticket['debut']); ?></td>
<td><span class="status <?php echo
strtolower($ticket['statut']); ?>">
<?php echo htmlspecialchars($ticket['statut']); ?>
</span></td>
<td><span class="priority <?php echo
strtolower($ticket['priorite']); ?>">
<?php echo htmlspecialchars($ticket['priorite']); ?>
</span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<div class="todo">
<div class="head">
<h3>Todos</h3>
<i class='bx bx-plus' ></i>
<i class='bx bx-filter' ></i>
</div>
<ul class="todo-list">
<li class="completed">
<p>Todo List</p>
<i class='bx bx-dots-vertical-rounded'
></i>
</li>
<li class="completed">
<p>Todo List</p>
<i class='bx bx-dots-vertical-rounded'
></i>
</li>
<li class="not-completed">
<p>Todo List</p>
<i class='bx bx-dots-vertical-rounded'
></i>
</li>
<li class="completed">
<p>Todo List</p>
<i class='bx bx-dots-vertical-rounded'
></i>
</li>
<li class="not-completed">
<p>Todo List</p>
<i class='bx bx-dots-vertical-rounded'
></i>
</li>
</ul>
</div>
</div>
</main>
<!-- MAIN -->
</section>
<!-- CONTENT -->
<script>
</script>
<script src="[Link]"></script>
</body>
</html>
