add silaras to git repo
This commit is contained in:
ryan
No files matched your search
@@ -0,0 +1,210 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user