Tul xxx Tul

Viewing: dashboard.php

<?php

include '../components/connect.php';

session_start();

$admin_id = $_SESSION['admin_id'];

if(!isset($admin_id)){
   header('location:admin_login.php');
}

function fetchScalar(PDO $conn, string $sql, array $params = [], $default = 0){
   try {
      $stmt = $conn->prepare($sql);
      $stmt->execute($params);
      $value = $stmt->fetchColumn();
      return $value !== false ? (float)$value : $default;
   } catch (PDOException $e) {
      return $default;
   }
}

function tableExists(PDO $conn, string $tableName): bool{
   try {
      $stmt = $conn->prepare("SHOW TABLES LIKE ?");
      $stmt->execute([$tableName]);
      return $stmt->fetchColumn() !== false;
   } catch (PDOException $e) {
      return false;
   }
}

function formatBytes(int $bytes): string{
   if($bytes <= 0){
      return '0 B';
   }
   $units = ['B','KB','MB','GB','TB'];
   $power = (int)floor(log($bytes, 1024));
   $power = min($power, count($units) - 1);
   $value = $bytes / (1024 ** $power);
   return number_format($value, $power >= 2 ? 2 : 1, ',', '.') . ' ' . $units[$power];
}

$totalProducts    = (int)fetchScalar($conn, "SELECT COUNT(*) FROM `products`");
$activeProducts   = (int)fetchScalar($conn, "SELECT COUNT(*) FROM `products` WHERE is_active = 1");
$inactiveProducts = (int)fetchScalar($conn, "SELECT COUNT(*) FROM `products` WHERE is_active = 0");
$totalCategories  = (int)fetchScalar($conn, "SELECT COUNT(*) FROM `categories`");

$galleryDir   = realpath(__DIR__ . '/../assets/img/galeria');
$galleryCount = 0;
$gallerySize  = 0;
if($galleryDir && is_dir($galleryDir)){
   $galleryFiles = glob($galleryDir . DIRECTORY_SEPARATOR . '*.{jpg,jpeg,png,webp,gif,avif,JPG,JPEG,PNG,WEBP,GIF,AVIF}', GLOB_BRACE) ?: [];
   $galleryCount = count($galleryFiles);
   foreach($galleryFiles as $filePath){
      if(is_file($filePath)){
         $gallerySize += filesize($filePath);
      }
   }
}

$topCategoriesStmt = $conn->query("SELECT c.name, COUNT(p.id) AS product_count FROM `categories` c LEFT JOIN `products` p ON p.category = c.id GROUP BY c.id, c.name ORDER BY product_count DESC, c.name ASC LIMIT 6");
$topCategories = $topCategoriesStmt ? $topCategoriesStmt->fetchAll(PDO::FETCH_ASSOC) : [];
$categoryLabels = array_column($topCategories, 'name');
$categoryData   = array_map('intval', array_column($topCategories, 'product_count'));

$statusLabels = ['Activos', 'Inactivos'];
$statusData   = [$activeProducts, $inactiveProducts];
$hasStatusData = array_sum($statusData) > 0;
$hasCategoryData = array_sum($categoryData) > 0;
$gallerySizeFormatted = formatBytes((int)$gallerySize);

?>

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dashboard | DONDEEDY</title>
   <link rel="icon" href="../images/favicon.png" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="../css/admin_style.css">
   <style>
      .dashboard-wrapper {
         max-width: 1200px;
         margin: 0 auto 40px;
         padding: 0 18px 60px;
         display: flex;
         flex-direction: column;
         gap: 28px;
      }
      .dashboard-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 18px;
      }
      .kpi-card {
         position: relative;
         background: linear-gradient(135deg, rgba(255,255,255,0.92), #ffffff);
         border-radius: 20px;
         padding: 20px;
         border: 1px solid rgba(0,0,0,0.06);
         box-shadow: 0 12px 26px rgba(0,0,0,0.08);
         display: flex;
         align-items: flex-start;
         gap: 16px;
         transition: transform .2s ease, box-shadow .2s ease;
         overflow: hidden;
      }
      .kpi-card:hover {
         transform: translateY(-3px);
         box-shadow: 0 16px 34px rgba(0,0,0,0.12);
      }
      .kpi-icon {
         width: 52px;
         height: 52px;
         border-radius: 16px;
         display: grid;
         place-items: center;
         font-size: 1.4rem;
         flex-shrink: 0;
         background: rgba(179,0,0,0.08);
         color: #b30000;
      }
      .kpi-value {
         font-size: 2.2rem;
         font-weight: 800;
         margin: 0;
         color: #111;
      }
      .kpi-label {
         margin: 6px 0 0 0;
         font-size: 1.05rem;
         font-weight: 600;
         color: rgba(17,17,17,0.72);
      }
      .panel-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 20px;
      }
      .panel-card {
         background: #fff;
         border-radius: 20px;
         padding: 20px;
         border: 1px solid rgba(0,0,0,0.05);
         box-shadow: 0 12px 28px rgba(0,0,0,0.08);
         position: relative;
         overflow: hidden;
      }
      .panel-title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         font-size: 1.2rem;
         font-weight: 800;
         color: #0f172a;
         margin: 0 0 18px 0;
      }
      .chart-holder {
         position: relative;
         height: 260px;
         width: 100%;
      }
      .chart-holder canvas {
         width: 100% !important;
         height: 100% !important;
         max-height: 100%;
      }
      .mini-thumbs {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
         gap: 8px;
      }
      .mini-thumbs figure {
         position: relative;
         aspect-ratio: 1 / 1;
         overflow: hidden;
         border-radius: 12px;
         box-shadow: 0 8px 18px rgba(0,0,0,0.08);
         margin: 0;
      }
      .mini-thumbs img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .2s ease;
      }
      .mini-thumbs img:hover {
         transform: scale(1.06);
      }
      .list-stack {
         display: flex;
         flex-direction: column;
         gap: 12px;
      }
      .list-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         padding: 12px 14px;
         border-radius: 14px;
         background: rgba(243, 244, 246, 0.6);
      }
      .list-item strong {
         font-size: 1.05rem;
         color: #111;
         font-weight: 700;
      }
      .list-item span {
         font-size: 0.95rem;
         font-weight: 600;
         color: rgba(17,17,17,0.65);
      }
      .empty-state {
         text-align: center;
         padding: 30px 16px;
         border-radius: 16px;
         border: 1px dashed rgba(0,0,0,0.06);
         background: rgba(249,250,251,0.8);
         color: rgba(17,17,17,0.55);
         font-weight: 600;
      }
      .delivery-status-list {
         display: flex;
         flex-direction: column;
         gap: 10px;
      }
      .delivery-status-list li {
         list-style: none;
         background: rgba(255,255,255,0.85);
         border-radius: 12px;
         padding: 10px 14px;
         display: flex;
         justify-content: space-between;
         font-weight: 600;
         color: #111;
      }
      @media (max-width: 640px) {
         .dashboard-wrapper {
            padding: 0 14px 40px;
         }
         .panel-title {
            font-size: 1.1rem;
         }
      }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body class="admin-panel">

<?php include '../components/admin_header.php'; ?>

<section class="page-heading">
   <h1 class="section-title">Panel de Control</h1>
</section>

<section class="dashboard-wrapper">
   <div class="dashboard-grid">
      <div class="kpi-card">
         <div class="kpi-icon"><i class="fas fa-utensils"></i></div>
         <div>
            <p class="kpi-value"><?= number_format($totalProducts, 0, ',', '.'); ?></p>
            <p class="kpi-label">Comidas registradas</p>
         </div>
      </div>
      <div class="kpi-card">
         <div class="kpi-icon"><i class="fas fa-toggle-on"></i></div>
         <div>
            <p class="kpi-value"><?= number_format($activeProducts, 0, ',', '.'); ?></p>
            <p class="kpi-label">Comidas activas</p>
         </div>
      </div>
      <div class="kpi-card">
         <div class="kpi-icon"><i class="fas fa-moon"></i></div>
         <div>
            <p class="kpi-value"><?= number_format($inactiveProducts, 0, ',', '.'); ?></p>
            <p class="kpi-label">Comidas inactivas</p>
         </div>
      </div>
      <div class="kpi-card">
         <div class="kpi-icon"><i class="fas fa-layer-group"></i></div>
         <div>
            <p class="kpi-value"><?= number_format($totalCategories, 0, ',', '.'); ?></p>
            <p class="kpi-label">Categorías disponibles</p>
         </div>
      </div>
      <div class="kpi-card">
         <div class="kpi-icon"><i class="fas fa-images"></i></div>
         <div>
            <p class="kpi-value"><?= number_format($galleryCount, 0, ',', '.'); ?></p>
            <p class="kpi-label">Imágenes en galería</p>
         </div>
      </div>
   </div>

   <div class="panel-grid">
      <div class="panel-card">
         <h3 class="panel-title">Estado de los productos</h3>
         <?php if($hasStatusData): ?>
            <div class="chart-holder">
               <canvas id="product-status-chart"></canvas>
            </div>
         <?php else: ?>
            <div class="empty-state">Aún no hay datos para mostrar.</div>
         <?php endif; ?>
      </div>

      <div class="panel-card">
         <h3 class="panel-title">Top categorías por cantidad</h3>
         <?php if($hasCategoryData): ?>
            <div class="chart-holder">
               <canvas id="top-categories-chart"></canvas>
            </div>
         <?php else: ?>
            <div class="empty-state">Agrega productos para ver esta gráfica.</div>
         <?php endif; ?>
      </div>

      
   </div>
</section>

<script src="../js/admin_script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
   const statusAvailable = <?= $hasStatusData ? 'true' : 'false'; ?>;
   if(statusAvailable){
      const ctx = document.getElementById('product-status-chart');
      if(ctx){
         new Chart(ctx, {
            type: 'doughnut',
            data: {
               labels: <?= json_encode($statusLabels, JSON_UNESCAPED_UNICODE); ?>,
               datasets: [{
                  data: <?= json_encode($statusData, JSON_NUMERIC_CHECK); ?>,
                  backgroundColor: ['#22c55e', '#ef4444'],
                  borderWidth: 0,
               }]
            },
            options: {
               plugins: {
                  legend: {
                     position: 'bottom',
                     labels: {
                        boxWidth: 14,
                        font: {
                           family: 'Montserrat',
                           weight: '600',
                        }
                     }
                  }
               },
               cutout: '68%',
            }
         });
      }
   }

   const categoryAvailable = <?= $hasCategoryData ? 'true' : 'false'; ?>;
   if(categoryAvailable){
      const ctx = document.getElementById('top-categories-chart');
      if(ctx){
         new Chart(ctx, {
            type: 'bar',
            data: {
               labels: <?= json_encode($categoryLabels, JSON_UNESCAPED_UNICODE); ?>,
               datasets: [{
                  data: <?= json_encode($categoryData, JSON_NUMERIC_CHECK); ?>,
                  backgroundColor: '#b30000',
                  borderRadius: 12,
                  maxBarThickness: 38,
               }]
            },
            options: {
               responsive: true,
               maintainAspectRatio: false,
               plugins: {
                  legend: { display: false }
               },
               scales: {
                  x: {
                     ticks: {
                        font: {
                           family: 'Montserrat',
                           weight: '600'
                        }
                     }
                  },
                  y: {
                     beginAtZero: true,
                     ticks: {
                        precision: 0,
                        stepSize: 1,
                        font: {
                           family: 'Montserrat'
                        }
                     }
                  }
               }
            }
         });
      }
   }
});
</script>

</body>
</html>
User / IP	: 216.73.216.146
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64