clqms-be/app/Views/v2/requests/requests_index.php

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

<?= $this->section("content") ?>
<div class="w-full space-y-6">
  
  <!-- Page Header -->
  <div class="card-glass p-6 animate-fadeIn">
    <div class="flex items-center gap-4">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-600 to-blue-900 flex items-center justify-center shadow-lg">
        <i class="fa-solid fa-flask text-2xl text-white"></i>
      </div>
      <div>
        <h2 class="text-2xl font-bold" style="color: rgb(var(--color-text));">Lab Requests</h2>
        <p class="text-sm" style="color: rgb(var(--color-text-muted));">Manage laboratory test requests and orders</p>
      </div>
    </div>
  </div>

  <!-- Quick Stats -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <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</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-clock text-amber-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <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));">In Progress</p>
            <p class="text-3xl font-bold text-blue-500">18</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-spinner text-blue-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <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-emerald-500">156</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-check-circle text-emerald-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>

    <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));">Rejected</p>
            <p class="text-3xl font-bold text-red-500">3</p>
          </div>
          <div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="fa-solid fa-times-circle text-red-500 text-2xl"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content Card -->
  <div class="card">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
          <input 
            type="text" 
            placeholder="Search requests..." 
            class="input input-bordered w-64"
          />
          <select class="select select-bordered">
            <option value="">All Status</option>
            <option value="pending">Pending</option>
            <option value="in-progress">In Progress</option>
            <option value="completed">Completed</option>
            <option value="rejected">Rejected</option>
          </select>
        </div>
        <button class="btn btn-primary">
          <i class="fa-solid fa-plus mr-2"></i>
          New Request
        </button>
      </div>

      <!-- Table Placeholder -->
      <div class="overflow-x-auto">
        <table class="table w-full">
          <thead>
            <tr>
              <th>Request ID</th>
              <th>Patient</th>
              <th>Test Type</th>
              <th>Priority</th>
              <th>Status</th>
              <th>Date</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="7" class="text-center py-12" style="color: rgb(var(--color-text-muted));">
                <i class="fa-solid fa-database text-4xl mb-3 opacity-30"></i>
                <p>No data available. Connect to API to load lab requests.</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

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