Client List Dashboard - Copy this Html, Tailwind Component to your project
Mejora visualmente este codigo <?php session_start(); // Verificar si el usuario está autenticado if (!isset($_SESSION['usuario'])) { // Si el usuario no está autenticado, redirigir a la página de login header('Location: ../login.php'); exit(); } $servername = "localhost"; $username = "root"; $password = ""; $dbname = "manceca"; // Crear conexión $conn = new mysqli($servername, $username, $password, $dbname); $conn >set_charset("utf8"); // Comprobar conexión if ($conn >connect_error) { die("Conexión fallida: " . $conn >connect_error); } // Consulta SQL para obtener todos los clientes con su último ingreso $sql = " SELECT c.id, c.nombre, c.cedula, c.telefono, c.telefono2,MAX(i.fecha) AS ultimo_ingreso FROM clientes c LEFT JOIN ingresos i ON c.id = i.id_cliente GROUP BY c.id "; $result = $conn >query($sql); ?> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link rel="icon" type="image/png" sizes="16x16" href="../../image/manceca.png"> <title>Lista de Clientes</title> <! Librerías Bootstrap > <link rel="stylesheet" href="../table/bootstrap.min.css"> <script src="../table/bootstrap.bundle.min.js"></script> <! Librerías DataTables > <link rel="stylesheet" href="../table/dataTables.bootstrap5.min.css"> <script src="../table/jquery 3.6.0.min.js"></script> <script src="../table/jquery.dataTables.min.js"></script> <script src="../table/dataTables.bootstrap5.min.js"></script> <! Tailwind CSS > <link href="../tailwind.min.css" rel="stylesheet"> <! Font Awesome > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/6.4.0/css/all.min.css"> <?php include "navbar.php" ?> <style> body { background color: #f0f4f8; font family: 'Segoe UI', Tahoma, Geneva, Verdana, sans serif; } .fade in { animation: fadeIn 0.5s ease in out; } @keyframes fadeIn { from { opacity: 0; transform: translateY( 20px); } to { opacity: 1; transform: translateY(0); } } #tablaclientes th { background color: #2c5282; color: white; font weight: 600; } #tablaclientes { box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn primary { background color: #4299e1; border color: #4299e1; } .btn warning { background color: #ed8936; border color: #ed8936; } </style> </head> <body class="fade in"> <div class="container mx auto px 4 py 8"> <h1 class="text 4xl font bold text center text gray 800 mb 8"> <i class="fas fa users mr 2"></i>Lista de Clientes </h1> <div class="bg white shadow xl rounded lg overflow hidden"> <?php if ($result >num_rows > 0): ?> <div class="table responsive p 4"> <table id="tablaclientes" class="table table striped table hover"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Cédula</th> <th>Teléfono</th> <th>Teléfono 2</th> <th>Último Ingreso</th> <th>Acciones</th> </tr> </thead> <tbody> <?php while($row = $result >fetch_assoc()): ?> <tr> <td><?= $row['id'] ?></td> <td><?= $row['nombre'] ?></td> <td><?= $row['cedula'] ?></td> <td><?= $row['telefono'] ?></td> <td><?= $row['telefono2'] ?></td> <td><?= $row['ultimo_ingreso'] ? $row['ultimo_ingreso'] : 'Nunca' ?></td> <td> <a href="ver_ingresos_clientes.php?id_cliente=<?= $row['id'] ?>" class="btn btn primary btn sm"> <i class="fas fa eye mr 1"></i> Ver </a> <a href="editar_cliente.php?id_cliente=<?= $row['id'] ?>" class="btn btn warning btn sm ms 2"> <i class="fas fa edit mr 1"></i> Editar </a> </td> </tr> <?php endwhile; ?> </tbody> </table> </div> <?php else: ?> <p class="text center text gray 500 py 8"> <i class="fas fa info circle mr 2"></i>No se encontraron clientes. </p> <?php endif; ?> </div> </div> <script> $(document).ready(function() { $('#tablaclientes').DataTable({ language: { url: '../table/es ES.json' }, pageLength: 10, lengthMenu: [5, 10, 25, 50], order: [], responsive: true, columnDefs: [ { targets: 1, orderable: false } ] }); }); </script> </body> </html> <?php // Cerrar la conexión $conn >close(); ?>
