210 lines
5.0 KiB
PHP
210 lines
5.0 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pasien Aktif Ambulans</title>
|
||
|
||
<meta http-equiv="refresh" content="5">
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
background: linear-gradient(135deg,#eef2f7,#f8fafc);
|
||
font-family: 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
.header-title {
|
||
font-weight: bold;
|
||
letter-spacing: .5px;
|
||
}
|
||
|
||
.card {
|
||
border-radius: 18px;
|
||
border: none;
|
||
transition: all .2s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.fase-box {
|
||
padding: 10px 12px;
|
||
border-radius: 12px;
|
||
margin-bottom: 6px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.done {
|
||
background: #d1e7dd;
|
||
border-left: 5px solid #198754;
|
||
}
|
||
|
||
.active {
|
||
background: #fff3cd;
|
||
border-left: 5px solid #ffc107;
|
||
}
|
||
|
||
.locked {
|
||
background: #e9ecef;
|
||
color: #999;
|
||
}
|
||
|
||
.badge-emergency {
|
||
background:#dc3545;
|
||
color:white;
|
||
animation:blinkRed 1s infinite;
|
||
font-weight:bold;
|
||
}
|
||
|
||
.badge-non {
|
||
background:#ffc107;
|
||
color:black;
|
||
font-weight:500;
|
||
}
|
||
|
||
.badge-pending {
|
||
background:#198754;
|
||
color:white;
|
||
}
|
||
|
||
@keyframes blinkRed{
|
||
0%,100%{opacity:1;}
|
||
50%{opacity:.4;}
|
||
}
|
||
|
||
.btn-sm {
|
||
font-size: 12px;
|
||
border-radius: 20px;
|
||
padding: 4px 10px;
|
||
}
|
||
|
||
.menu-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
margin-bottom: 15px;
|
||
transition: .2s;
|
||
}
|
||
|
||
.menu-card:hover {
|
||
background: #0d6efd;
|
||
color: white;
|
||
}
|
||
|
||
.menu-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.empty-state {
|
||
margin-top: 80px;
|
||
opacity: .6;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="container py-4">
|
||
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h4 class="header-title">🚑 Pasien Aktif</h4>
|
||
<small class="text-muted">Auto refresh 5 detik</small>
|
||
</div>
|
||
|
||
<div class="menu-card" onclick="window.location.href='/pasien/input'">
|
||
<div class="menu-icon">➕</div>
|
||
<h6 class="mt-2 mb-0">Tambah Pasien Baru</h6>
|
||
</div>
|
||
|
||
<!-- ================= LIST PASIEN ================= -->
|
||
<?php if (!empty($pasien)): ?>
|
||
|
||
<?php foreach($pasien as $p): ?>
|
||
|
||
<?php
|
||
$fase = $p['fase'] ?? 1;
|
||
$orderType = $p['order_type'] ?? 'Pending Order';
|
||
|
||
switch ($orderType) {
|
||
case 'True Emergency':
|
||
$badgeClass = 'badge-emergency';
|
||
break;
|
||
case 'Non Emergency':
|
||
$badgeClass = 'badge-non';
|
||
break;
|
||
default:
|
||
$badgeClass = 'badge-pending';
|
||
break;
|
||
}
|
||
|
||
$steps = [
|
||
1 => "Pre Dispatch",
|
||
2 => "Dispatch",
|
||
3 => "En Route",
|
||
4 => "On Scene",
|
||
5 => "Transport",
|
||
6 => "Selesai"
|
||
];
|
||
?>
|
||
|
||
<div class="card mb-3 shadow-sm">
|
||
<div class="card-body">
|
||
|
||
<!-- HEADER -->
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-1">👤 <?= esc($p['nama']) ?></h6>
|
||
<span class="badge <?= $badgeClass ?>">
|
||
<?= esc($orderType) ?>
|
||
</span>
|
||
</div>
|
||
<p class="text-muted small mb-2">
|
||
<?= esc($p['alamat'] ?? '-') ?>
|
||
</p>
|
||
<hr>
|
||
<!-- FASE AMBULANS-->
|
||
<?php foreach($steps as $key => $label): ?>
|
||
<?php
|
||
$class =
|
||
$fase > $key ? 'done' :
|
||
($fase == $key ? 'active' : 'locked');
|
||
?>
|
||
<div class="fase-box <?= $class ?>">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<?php if($key == 1): ?>
|
||
<!-- PRE DISPATCH -->
|
||
<a href="/pasien/predispatch/<?= $p['id'] ?>" style="text-decoration:none; color:inherit;">
|
||
<b><?= $label ?></b>
|
||
</a>
|
||
<?php else: ?>
|
||
<b><?= $label ?></b>
|
||
<?php endif; ?>
|
||
<?php if($fase == $key && $fase < 6): ?>
|
||
<a href="/pasien/next/<?= $p['id'] ?>" class="btn btn-sm btn-warning">
|
||
➡️ Lanjut
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php else: ?>
|
||
|
||
<div class="text-center empty-state">
|
||
<h1>🚑</h1>
|
||
<p>Tidak ada pasien aktif</p>
|
||
</div>
|
||
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|