clqms-be/app/Views/v2/dashboard/dashboard_index.php

<?= $this->extend("v2/layout/main_layout"); ?>

<?= $this->section("content") ?>
<div class="w-full space-y-6">
  
  <!-- Welcome Section -->
  <div class="card-glass p-8 animate-fadeIn">
    <div class="flex items-center gap-4">
      <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-600 to-blue-900 flex items-center justify-center shadow-lg">
        <i class="fa-solid fa-chart-line text-3xl text-white"></i>
      </div>
      <div>
        <h2 class="text-3xl font-bold mb-2" style="color: rgb(var(--color-text));">Welcome to CLQMS</h2>
        <p class="text-lg" style="color: rgb(var(--color-text-muted));">Clinical Laboratory Quality Management System</p>
      </div>
    </div>
  </div>

  <!-- Quick Stats -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- Total Patients -->
    <div class="card group hover:shadow-xl transition-all duration-300">
      <div class="p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium mb-1" style="color: rgb(var(--color-text-muted));">Total Patients</p>
            <p class="text-3xl font-bold" style="color: rgb(var(--color-text));">1,247</p>
          </div>
          <div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="fa-solid fa-users text-blue-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Today's Visits -->
    <div class="card group hover:shadow-xl transition-all duration-300">
      <div class="p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium mb-1" style="color: rgb(var(--color-text-muted));">Today's Visits</p>
            <p class="text-3xl font-bold text-emerald-500">89</p>
          </div>
          <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="fa-solid fa-calendar-check text-emerald-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Pending Tests -->
    <div class="card group hover:shadow-xl transition-all duration-300">
      <div class="p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium mb-1" style="color: rgb(var(--color-text-muted));">Pending Tests</p>
            <p class="text-3xl font-bold text-amber-500">34</p>
          </div>
          <div class="w-14 h-14 rounded-2xl bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="fa-solid fa-flask text-amber-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Completed Today -->
    <div class="card group hover:shadow-xl transition-all duration-300">
      <div class="p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium mb-1" style="color: rgb(var(--color-text-muted));">Completed</p>
            <p class="text-3xl font-bold text-sky-500">156</p>
          </div>
          <div class="w-14 h-14 rounded-2xl bg-sky-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="fa-solid fa-check-circle text-sky-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Recent Activity -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-clock-rotate-left" style="color: rgb(var(--color-primary));"></i>
          Recent Activity
        </h3>
        <div class="space-y-3">
          <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-opacity-50 transition-colors" style="background: rgb(var(--color-bg) / 0.5);">
            <div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
              <i class="fa-solid fa-user-plus text-emerald-500"></i>
            </div>
            <div class="flex-1 min-w-0">
              <p class="font-medium text-sm" style="color: rgb(var(--color-text));">New patient registered</p>
              <p class="text-xs" style="color: rgb(var(--color-text-muted));">John Doe - 5 minutes ago</p>
            </div>
          </div>
          <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-opacity-50 transition-colors" style="background: rgb(var(--color-bg) / 0.5);">
            <div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center flex-shrink-0">
              <i class="fa-solid fa-vial text-sky-500"></i>
            </div>
            <div class="flex-1 min-w-0">
              <p class="font-medium text-sm" style="color: rgb(var(--color-text));">Test completed</p>
              <p class="text-xs" style="color: rgb(var(--color-text-muted));">Sample #12345 - 12 minutes ago</p>
            </div>
          </div>
          <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-opacity-50 transition-colors" style="background: rgb(var(--color-bg) / 0.5);">
            <div class="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center flex-shrink-0">
              <i class="fa-solid fa-exclamation-triangle text-amber-500"></i>
            </div>
            <div class="flex-1 min-w-0">
              <p class="font-medium text-sm" style="color: rgb(var(--color-text));">Pending approval</p>
              <p class="text-xs" style="color: rgb(var(--color-text-muted));">Request #789 - 25 minutes ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Links -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-bolt" style="color: rgb(var(--color-primary));"></i>
          Quick Actions
        </h3>
        <div class="grid grid-cols-2 gap-3">
          <a href="<?= base_url('/v2/patients') ?>" class="btn btn-outline group">
            <i class="fa-solid fa-users mr-2 group-hover:scale-110 transition-transform"></i>
            Patients
          </a>
          <a href="<?= base_url('/v2/requests') ?>" class="btn btn-outline-secondary group">
            <i class="fa-solid fa-flask mr-2 group-hover:scale-110 transition-transform"></i>
            Lab Requests
          </a>
          <button class="btn btn-outline-accent group">
            <i class="fa-solid fa-vial mr-2 group-hover:scale-110 transition-transform"></i>
            Specimens
          </button>
          <button class="btn btn-outline-info group">
            <i class="fa-solid fa-chart-bar mr-2 group-hover:scale-110 transition-transform"></i>
            Reports
          </button>
        </div>
      </div>
    </div>
  </div>

</div>
<?= $this->endSection() ?>