<?php
$page_title = 'KPI Dashboard';
require_once __DIR__ . '/header.php';
if (!in_array($role, ['manager', 'admin', 'super_admin'])) redirect('index.php');
?>

<div class="card">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
    <h3 style="margin:0;color:#0f172a;">Key Performance Indicators (<?= h($dept) ?>)</h3>
    <select style="padding:6px 12px;border-radius:4px;border:1px solid #cbd5e1;">
      <option>This Month</option>
      <option>Last Month</option>
      <option>This Quarter</option>
    </select>
  </div>
  
  <div class="grid-3" style="margin-bottom:24px;">
    <div style="padding:20px;border:1px solid #e2e8f0;border-radius:8px;text-align:center;background:#f8fafc;">
      <div style="font-size:2rem;font-weight:700;color:#2557d6;">98%</div>
      <p style="margin:4px 0 0;color:#64748b;font-size:.85rem;">Attendance Rate</p>
    </div>
    <div style="padding:20px;border:1px solid #e2e8f0;border-radius:8px;text-align:center;background:#f8fafc;">
      <div style="font-size:2rem;font-weight:700;color:#16a34a;">142</div>
      <p style="margin:4px 0 0;color:#64748b;font-size:.85rem;">Tasks Completed</p>
    </div>
    <div style="padding:20px;border:1px solid #e2e8f0;border-radius:8px;text-align:center;background:#f8fafc;">
      <div style="font-size:2rem;font-weight:700;color:#d97706;">85%</div>
      <p style="margin:4px 0 0;color:#64748b;font-size:.85rem;">Target Achievement</p>
    </div>
  </div>

  <div style="text-align:center;padding:30px;color:#64748b;border:1px dashed #cbd5e1;border-radius:8px;">
    <i class="fas fa-chart-bar" style="font-size:3rem;color:#cbd5e1;margin-bottom:16px;"></i>
    <p>Detailed performance analytics charts will populate here after the first data cycle.</p>
  </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
