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

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

<?= $this->section("content") ?>
<div class="max-w-7xl mx-auto">
  
  <!-- Welcome Section -->
  <div class="card bg-primary text-primary-content shadow-xl mb-6">
    <div class="card-body py-8">
      <div class="flex items-center gap-4">
        <div class="w-16 h-16 bg-primary-content/20 rounded-2xl flex items-center justify-center">
          <i class="fa-solid fa-chart-line text-3xl"></i>
        </div>
        <div>
          <h2 class="text-3xl font-bold mb-2">Welcome to CLQMS</h2>
          <p class="text-lg opacity-90">Clinical Laboratory Queue Management System</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Stats -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Total Patients -->
    <div class="card bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-base-content/60">Total Patients</p>
            <p class="text-2xl font-bold">1,247</p>
          </div>
          <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
            <i class="fa-solid fa-users text-blue-500 text-xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Today's Visits -->
    <div class="card bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-base-content/60">Today's Visits</p>
            <p class="text-2xl font-bold text-success">89</p>
          </div>
          <div class="w-12 h-12 bg-success/20 rounded-full flex items-center justify-center">
            <i class="fa-solid fa-calendar-check text-success text-xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Pending Tests -->
    <div class="card bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-base-content/60">Pending Tests</p>
            <p class="text-2xl font-bold text-warning">34</p>
          </div>
          <div class="w-12 h-12 bg-warning/20 rounded-full flex items-center justify-center">
            <i class="fa-solid fa-flask text-warning text-xl"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Completed Today -->
    <div class="card bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-base-content/60">Completed</p>
            <p class="text-2xl font-bold text-info">156</p>
          </div>
          <div class="w-12 h-12 bg-info/20 rounded-full flex items-center justify-center">
            <i class="fa-solid fa-check-circle text-info text-xl"></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 bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body">
        <h3 class="card-title text-lg mb-4">
          <i class="fa-solid fa-clock-rotate-left mr-2 text-primary"></i>
          Recent Activity
        </h3>
        <div class="space-y-3">
          <div class="flex items-center gap-3 p-2 hover:bg-base-200 rounded-lg">
            <div class="w-10 h-10 bg-success/20 rounded-full flex items-center justify-center">
              <i class="fa-solid fa-user-plus text-success"></i>
            </div>
            <div class="flex-1">
              <p class="font-medium">New patient registered</p>
              <p class="text-xs text-base-content/60">John Doe - 5 minutes ago</p>
            </div>
          </div>
          <div class="flex items-center gap-3 p-2 hover:bg-base-200 rounded-lg">
            <div class="w-10 h-10 bg-info/20 rounded-full flex items-center justify-center">
              <i class="fa-solid fa-vial text-info"></i>
            </div>
            <div class="flex-1">
              <p class="font-medium">Test completed</p>
              <p class="text-xs text-base-content/60">Sample #12345 - 12 minutes ago</p>
            </div>
          </div>
          <div class="flex items-center gap-3 p-2 hover:bg-base-200 rounded-lg">
            <div class="w-10 h-10 bg-warning/20 rounded-full flex items-center justify-center">
              <i class="fa-solid fa-exclamation-triangle text-warning"></i>
            </div>
            <div class="flex-1">
              <p class="font-medium">Pending approval</p>
              <p class="text-xs text-base-content/60">Request #789 - 25 minutes ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Links -->
    <div class="card bg-base-100 shadow-sm border border-base-content/10">
      <div class="card-body">
        <h3 class="card-title text-lg mb-4">
          <i class="fa-solid fa-bolt mr-2 text-primary"></i>
          Quick Actions
        </h3>
        <div class="grid grid-cols-2 gap-3">
          <a href="<?= base_url('/v2/patients') ?>" class="btn btn-outline btn-primary">
            <i class="fa-solid fa-users mr-2"></i>
            Patients
          </a>
          <a href="<?= base_url('/v2/requests') ?>" class="btn btn-outline btn-secondary">
            <i class="fa-solid fa-flask mr-2"></i>
            Lab Requests
          </a>
          <button class="btn btn-outline btn-accent">
            <i class="fa-solid fa-vial mr-2"></i>
            Specimens
          </button>
          <button class="btn btn-outline btn-info">
            <i class="fa-solid fa-chart-bar mr-2"></i>
            Reports
          </button>
        </div>
      </div>
    </div>
  </div>

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