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

<?= $this->extend('layouts/v2') ?>

<?= $this->section('content') ?>

<div class="space-y-6">
    
    <!-- Welcome Hero Section -->
    <div class="card bg-gradient-to-br from-primary via-primary to-secondary text-primary-content shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 opacity-10">
        <svg viewBox="0 0 400 200" class="w-full h-full" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="hero-grid" width="30" height="30" patternUnits="userSpaceOnUse">
              <path d="M 30 0 L 0 0 0 30" fill="none" stroke="white" stroke-width="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#hero-grid)"/>
        </svg>
      </div>
      
      <!-- Floating decorative icons -->
      <div class="absolute top-6 right-8 opacity-20 hidden lg:block">
        <i data-lucide="microscope" class="w-20 h-20"></i>
      </div>
      <div class="absolute bottom-4 right-32 opacity-15 hidden lg:block">
        <i data-lucide="test-tube-2" class="w-12 h-12"></i>
      </div>
      
      <div class="card-body relative z-10 p-8">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-4">
              <div class="avatar">
                <div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center ring-2 ring-white/20">
                  <span class="text-2xl font-bold"><?= substr(esc($user->username ?? 'U'), 0, 1) ?></span>
                </div>
              </div>
              <div>
                <h1 class="text-2xl lg:text-3xl font-bold">Welcome back, <?= esc($user->username ?? 'User') ?>!</h1>
                <p class="text-primary-content/70 text-sm flex items-center gap-2 mt-1">
                  <i data-lucide="calendar" class="w-4 h-4"></i>
                  <?= date('l, F j, Y') ?>
                </p>
              </div>
            </div>
            
            <p class="text-primary-content/80 max-w-xl">
              Your laboratory is running smoothly. You have 
              <span class="font-bold bg-white/20 px-2 py-0.5 rounded-lg">3 pending tests</span> 
              and <span class="font-bold text-warning">2 alerts</span> requiring attention.
            </p>
          </div>
          
          <div class="flex gap-3">
            <button class="btn btn-warning shadow-lg gap-2 hover:scale-105 transition-transform">
              <i data-lucide="bell-ring" class="w-4 h-4"></i>
              View Alerts
              <span class="badge badge-sm bg-white/20 border-0">2</span>
            </button>
            <button class="btn bg-white/20 border-white/30 text-white hover:bg-white/30 gap-2">
              <i data-lucide="plus" class="w-4 h-4"></i>
              New Order
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Stats Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        
        <!-- Patients Today -->
        <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200/50 group">
          <div class="card-body p-5">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-xs uppercase tracking-wider text-base-content/50 font-semibold mb-1">Patients Today</p>
                <h3 class="text-3xl font-extrabold text-primary">24</h3>
                <p class="text-xs text-success flex items-center gap-1 mt-2 font-medium">
                  <i data-lucide="trending-up" class="w-3 h-3"></i>
                  +14% from yesterday
                </p>
              </div>
              <div class="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                <i data-lucide="users" class="w-6 h-6 text-primary"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Pending Tests -->
        <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200/50 group">
          <div class="card-body p-5">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-xs uppercase tracking-wider text-base-content/50 font-semibold mb-1">Pending Tests</p>
                <h3 class="text-3xl font-extrabold text-secondary">15</h3>
                <p class="text-xs text-warning flex items-center gap-1 mt-2 font-medium">
                  <i data-lucide="alert-triangle" class="w-3 h-3"></i>
                  5 urgent priority
                </p>
              </div>
              <div class="w-12 h-12 rounded-2xl bg-secondary/10 flex items-center justify-center group-hover:bg-secondary/20 transition-colors">
                <i data-lucide="test-tube" class="w-6 h-6 text-secondary"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Completed -->
        <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200/50 group">
          <div class="card-body p-5">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-xs uppercase tracking-wider text-base-content/50 font-semibold mb-1">Completed</p>
                <h3 class="text-3xl font-extrabold text-success">42</h3>
                <p class="text-xs text-success flex items-center gap-1 mt-2 font-medium">
                  <i data-lucide="check-circle" class="w-3 h-3"></i>
                  All validated
                </p>
              </div>
              <div class="w-12 h-12 rounded-2xl bg-success/10 flex items-center justify-center group-hover:bg-success/20 transition-colors">
                <i data-lucide="file-check-2" class="w-6 h-6 text-success"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- Efficiency -->
        <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200/50 group">
          <div class="card-body p-5">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-xs uppercase tracking-wider text-base-content/50 font-semibold mb-1">Efficiency</p>
                <h3 class="text-3xl font-extrabold text-info">86<span class="text-lg">%</span></h3>
                <p class="text-xs text-base-content/50 mt-2">Week over week</p>
              </div>
              <div class="radial-progress text-info text-xs font-bold" style="--value:86; --size:3rem; --thickness:4px;" role="progressbar">
                86%
              </div>
            </div>
          </div>
        </div>
        
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Quick Actions -->
        <div class="lg:col-span-2 card bg-base-100 shadow-lg border border-base-200/50">
            <div class="card-body">
                <div class="flex items-center justify-between mb-4">
                  <h2 class="card-title text-lg font-bold flex items-center gap-2">
                      <div class="w-8 h-8 rounded-lg bg-warning/20 flex items-center justify-center">
                        <i data-lucide="zap" class="w-4 h-4 text-warning"></i>
                      </div>
                      Quick Actions
                  </h2>
                  <span class="badge badge-ghost text-xs">Most used</span>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <a href="#" class="card bg-base-200/50 hover:bg-primary hover:text-primary-content border border-base-300/50 hover:border-primary transition-all duration-200 hover:scale-[1.02] hover:shadow-lg group">
                      <div class="card-body items-center text-center p-5">
                        <div class="w-12 h-12 rounded-2xl bg-primary/10 group-hover:bg-white/20 flex items-center justify-center mb-2 transition-colors">
                          <i data-lucide="user-plus" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                        </div>
                        <span class="text-sm font-semibold">Add Patient</span>
                      </div>
                    </a>
                    
                    <a href="#" class="card bg-base-200/50 hover:bg-secondary hover:text-secondary-content border border-base-300/50 hover:border-secondary transition-all duration-200 hover:scale-[1.02] hover:shadow-lg group">
                      <div class="card-body items-center text-center p-5">
                        <div class="w-12 h-12 rounded-2xl bg-secondary/10 group-hover:bg-white/20 flex items-center justify-center mb-2 transition-colors">
                          <i data-lucide="flask-conical" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                        </div>
                        <span class="text-sm font-semibold">New Order</span>
                      </div>
                    </a>
                    
                    <a href="#" class="card bg-base-200/50 hover:bg-accent hover:text-accent-content border border-base-300/50 hover:border-accent transition-all duration-200 hover:scale-[1.02] hover:shadow-lg group">
                      <div class="card-body items-center text-center p-5">
                        <div class="w-12 h-12 rounded-2xl bg-accent/10 group-hover:bg-white/20 flex items-center justify-center mb-2 transition-colors">
                          <i data-lucide="printer" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                        </div>
                        <span class="text-sm font-semibold">Print Labels</span>
                      </div>
                    </a>
                    
                    <a href="#" class="card bg-base-200/50 hover:bg-info hover:text-info-content border border-base-300/50 hover:border-info transition-all duration-200 hover:scale-[1.02] hover:shadow-lg group">
                      <div class="card-body items-center text-center p-5">
                        <div class="w-12 h-12 rounded-2xl bg-info/10 group-hover:bg-white/20 flex items-center justify-center mb-2 transition-colors">
                          <i data-lucide="search" class="w-6 h-6 group-hover:scale-110 transition-transform"></i>
                        </div>
                        <span class="text-sm font-semibold">Search Results</span>
                      </div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- System Status -->
        <div class="card bg-base-100 shadow-lg border border-base-200/50">
            <div class="card-body">
                <h2 class="card-title text-lg font-bold flex items-center gap-2 mb-4">
                    <div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center">
                      <i data-lucide="activity" class="w-4 h-4 text-success"></i>
                    </div>
                    System Status
                </h2>
                
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 bg-base-200/30 rounded-xl hover:bg-base-200/50 transition-colors">
                        <span class="flex items-center gap-3 text-sm">
                          <span class="relative flex h-2.5 w-2.5">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-success"></span>
                          </span>
                          LIS Connection
                        </span>
                        <span class="badge badge-success badge-sm font-semibold">Online</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-base-200/30 rounded-xl hover:bg-base-200/50 transition-colors">
                        <span class="flex items-center gap-3 text-sm">
                          <span class="relative flex h-2.5 w-2.5">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-success"></span>
                          </span>
                          Database
                        </span>
                        <span class="badge badge-success badge-sm font-semibold">Optimal</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-warning/5 rounded-xl border border-warning/20">
                        <span class="flex items-center gap-3 text-sm">
                          <span class="relative flex h-2.5 w-2.5">
                            <span class="animate-pulse absolute inline-flex h-full w-full rounded-full bg-warning opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-warning"></span>
                          </span>
                          Analyzer Interface
                        </span>
                        <span class="badge badge-warning badge-sm font-semibold">Syncing</span>
                    </div>
                </div>
                
                <div class="divider my-4"></div>
                
                <div class="flex flex-col gap-2">
                    <a href="<?= site_url('logout') ?>" class="btn btn-error btn-outline btn-sm gap-2 hover:scale-[1.02] transition-transform">
                       <i data-lucide="log-out" class="w-4 h-4"></i>
                       End Session
                    </a>
                </div>
            </div>
        </div>

    </div>
    
    <!-- Recent Activity Section -->
    <div class="card bg-base-100 shadow-lg border border-base-200/50">
      <div class="card-body">
        <div class="flex items-center justify-between mb-4">
          <h2 class="card-title text-lg font-bold flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-info/20 flex items-center justify-center">
              <i data-lucide="clock" class="w-4 h-4 text-info"></i>
            </div>
            Recent Activity
          </h2>
          <a href="#" class="btn btn-ghost btn-sm gap-1">
            View All
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
          </a>
        </div>
        
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr class="text-xs uppercase tracking-wider">
                <th>Time</th>
                <th>Action</th>
                <th>Details</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover">
                <td class="font-mono text-sm text-base-content/70">09:45 AM</td>
                <td class="flex items-center gap-2">
                  <div class="w-8 h-8 rounded-lg bg-success/10 flex items-center justify-center">
                    <i data-lucide="check" class="w-4 h-4 text-success"></i>
                  </div>
                  <span class="font-medium">Test Validated</span>
                </td>
                <td class="text-sm text-base-content/70">CBC Panel - Patient #1234</td>
                <td><span class="badge badge-success badge-sm">Complete</span></td>
              </tr>
              <tr class="hover">
                <td class="font-mono text-sm text-base-content/70">09:30 AM</td>
                <td class="flex items-center gap-2">
                  <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                    <i data-lucide="flask-conical" class="w-4 h-4 text-primary"></i>
                  </div>
                  <span class="font-medium">New Order Created</span>
                </td>
                <td class="text-sm text-base-content/70">Lipid Profile - Patient #5678</td>
                <td><span class="badge badge-info badge-sm">Processing</span></td>
              </tr>
              <tr class="hover">
                <td class="font-mono text-sm text-base-content/70">09:15 AM</td>
                <td class="flex items-center gap-2">
                  <div class="w-8 h-8 rounded-lg bg-warning/10 flex items-center justify-center">
                    <i data-lucide="alert-triangle" class="w-4 h-4 text-warning"></i>
                  </div>
                  <span class="font-medium">QC Alert</span>
                </td>
                <td class="text-sm text-base-content/70">Glucose analyzer - Calibration needed</td>
                <td><span class="badge badge-warning badge-sm">Pending</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
</div>

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