39669-vm/dashboard.php

<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/app.php';

$flash = consume_flash();
$stats = dashboard_metrics();
$recentApplications = latest_applications(5);

render_page_start('المتابعة التشغيلية', 'dashboard', 'لوحة متابعة تشغيلية لعمليات النظام.');
render_flash($flash);
?>
<section class="py-4 py-lg-5">
  <div class="container-xxl">
    <div class="admin-layout row g-4 align-items-start">
      <div class="col-lg-3 layout-sidebar-column">
        <?php require __DIR__ . '/includes/sidebar.php'; ?>
      </div>
      <div class="col-lg-9 layout-content-column">

        <div class="row align-items-center mb-4 bg-white rounded-4 shadow-sm overflow-hidden" style="border: 1px solid var(--border-color);">
          <div class="col-lg-7 p-4 p-lg-5">
            <h1 class="h3 fw-bold mb-3 text-primary">المتابعة التشغيلية</h1>
            <p class="text-muted mb-4" style="line-height: 1.8; font-size: 0.95rem;">
              مرحباً بك في واجهة المتابعة التشغيلية. هنا يمكنك مراقبة مؤشرات الأداء الحيوية، استعراض أحدث الطلبات الواردة، واتخاذ إجراءات سريعة لتيسير العمليات اليومية.
            </p>
            <div class="d-flex flex-wrap gap-3">
              <a class="btn btn-primary px-4 py-2" href="admin.php">لوحة الإدارة</a>
              <a class="btn btn-outline-secondary px-4 py-2" href="applications.php?status=submitted">طلبات جديدة</a>
            </div>
          </div>
          <div class="col-lg-5 p-0 d-none d-lg-block" style="background-color: var(--bg-color);">
            <img src="assets/images/pexels/dashboard-analytics.jpg" alt="تحليلات" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 250px;">
          </div>
        </div>

        <div class="d-flex align-items-center justify-content-between mb-3 mt-4">
          <h3 class="h6 mb-0 fw-bold text-dark">مؤشرات الأداء</h3>
        </div>

        <div class="row g-3 mb-4">
          <div class="col-sm-6 col-xl-3">
            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
              <div class="mini-stat-label text-muted mb-2">إجمالي الطلبات</div>
              <div class="mini-stat-value fs-3 fw-bold text-primary mb-1"><?= e($stats['all']) ?></div>
              <div class="mini-stat-copy small text-secondary mt-auto">كافة الطلبات المسجلة</div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
              <div class="mini-stat-label text-muted mb-2">قيد الاستلام</div>
              <div class="mini-stat-value fs-3 fw-bold text-warning mb-1"><?= e($stats['submitted']) ?></div>
              <div class="mini-stat-copy small text-secondary mt-auto">طلبات جديدة للمراجعة</div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
              <div class="mini-stat-label text-muted mb-2">تحت التقييم</div>
              <div class="mini-stat-value fs-3 fw-bold text-info mb-1"><?= e($stats['under_review']) ?></div>
              <div class="mini-stat-copy small text-secondary mt-auto">نشطة داخل المسار</div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
              <div class="mini-stat-label text-muted mb-2">معتمد</div>
              <div class="mini-stat-value fs-3 fw-bold text-success mb-1"><?= e($stats['approved']) ?></div>
              <div class="mini-stat-copy small text-secondary mt-auto">مراكز جاهزة للتشغيل</div>
            </div>
          </div>
        </div>

        <div class="row g-4">
          <div class="col-lg-8">
            <div class="d-flex align-items-center justify-content-between mb-3 mt-2">
              <h3 class="h6 mb-0 fw-bold text-dark">أحدث الطلبات</h3>
              <a class="btn btn-link btn-sm text-decoration-none px-0" href="applications.php">عرض الكل &larr;</a>
            </div>
            <div class="app-card p-0 overflow-hidden shadow-sm">
              <div class="table-responsive">
                <table class="table app-table align-middle mb-0">
                  <thead class="bg-light">
                    <tr>
                      <th class="ps-4">المرجع</th>
                      <th>المركز</th>
                      <th>المدينة</th>
                      <th>الحالة</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php foreach ($recentApplications as $application): ?>
                      <tr>
                        <td class="ps-4"><a class="text-decoration-none fw-bold" href="application_detail.php?id=<?= e((string) $application['id']) ?>">#<?= e((string) $application['id']) ?></a></td>
                        <td>
                          <div class="fw-semibold text-dark"><?= e((string) $application['center_name']) ?></div>
                          <div class="text-muted small"><?= e((string) $application['director_name']) ?></div>
                        </td>
                        <td><?= e((string) $application['city']) ?></td>
                        <td><?= status_badge((string) $application['status']) ?></td>
                      </tr>
                    <?php endforeach; ?>
                    <?php if (empty($recentApplications)): ?>
                      <tr><td colspan="4" class="text-center text-muted py-4">لا توجد طلبات حديثة</td></tr>
                    <?php endif; ?>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="d-flex align-items-center justify-content-between mb-3 mt-2">
              <h3 class="h6 mb-0 fw-bold text-dark">إجراءات سريعة</h3>
            </div>
            <div class="d-flex flex-column gap-3">
              <a href="center_application.php" class="text-decoration-none">
                <article class="app-card link-card p-3 border-start border-primary border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
                  <h4 class="h6 fw-bold text-dark mb-1">تقديم طلب جديد</h4>
                  <p class="text-muted small mb-0">فتح نموذج التسجيل لمركز جديد.</p>
                </article>
              </a>
              <a href="applications.php" class="text-decoration-none">
                <article class="app-card link-card p-3 border-start border-warning border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
                  <h4 class="h6 fw-bold text-dark mb-1">مراجعة الطلبات</h4>
                  <p class="text-muted small mb-0">الذهاب إلى قائمة جميع الطلبات.</p>
                </article>
              </a>
              <a href="modules.php" class="text-decoration-none">
                <article class="app-card link-card p-3 border-start border-success border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
                  <h4 class="h6 fw-bold text-dark mb-1">هيكل النظام</h4>
                  <p class="text-muted small mb-0">نظرة على بنية الوحدات والميزات.</p>
                </article>
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
<?php render_page_end(); ?>