Perbaikan monitoring pasien ambulans 119

This commit is contained in:
2026-08-08 11:32:48 +07:00
parent 44d929e8fe
commit a287885db2
13 changed files with 1494 additions and 57 deletions
+223
View File
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Detail Riwayat Ambulans</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background: linear-gradient(135deg,#eef2f7,#dfe6ee);
font-family: 'Segoe UI', sans-serif;
}
.container-app{
max-width:1200px;
margin:auto;
padding:20px;
}
.cardx{
border:none;
border-radius:16px;
padding:16px;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.06);
margin-bottom:15px;
}
.title{font-size:12px;color:#6c757d}
.value{font-size:14px;font-weight:600}
.badge-status{
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}
.fase-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
}
.fase-box{
padding:10px;
border-radius:12px;
text-align:center;
font-size:12px;
}
.done{background:#d1e7dd;}
.active{
background:#fff3cd;
animation:pulse 1.5s infinite;
}
.locked{background:#e9ecef;color:#999}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,193,7,.5);}
70%{box-shadow:0 0 0 10px rgba(255,193,7,0);}
100%{box-shadow:0 0 0 0 rgba(255,193,7,0);}
}
.progress{
height:8px;
border-radius:10px;
}
.print-btn{
position:fixed;
right:20px;
bottom:20px;
border:none;
background:#0d6efd;
color:white;
padding:10px 16px;
border-radius:30px;
}
.system{
font-weight:800;
color:#ef4444;
animation: blink 2s infinite;
}
@keyframes blink{
50%{opacity:.4}
}
</style>
</head>
<body>
<div class="container-app">
<?php
// ================= FASE HELPER =================
function syncFase($p){
if (!isset($p['waktuFase'])) return "pre_dispatch";
if (!empty($p['waktuFase']['post'])) return "post";
if (!empty($p['waktuFase']['transfer'])) return "transfer";
if (!empty($p['waktuFase']['atScene'])) return "atScene";
if (!empty($p['waktuFase']['enRoute'])) return "enRoute";
if (!empty($p['waktuFase']['dispatch'])) return "dispatch";
return "pre_dispatch";
}
$fase = syncFase($p ?? []);
?>
<!-- ================= HEADER ================= -->
<div class="cardx">
<div class="d-flex justify-content-between">
<h5>
👤 <?= ucwords(strtolower(trim(($p['atribut'] ?? '') . ' ' . ($p['nama'] ?? '-')))) ?>
</h5>
<span class="system">Riwayat Detail Pasien - Silaras 119</span>
</div>
<div class="row mt-2 small">
<div class="col-md-4">RM: <b><?= $p['rm'] ?? '-' ?></b></div>
<div class="col-md-4">Register: <b><?= $p['register'] ?? '-' ?></b></div>
<div class="col-md-4">
Tanggal Lahir:
<b>
<?= !empty($p['tgl_lahir'])
? date('d-m-Y', strtotime($p['tgl_lahir']))
: '-' ?>
</b>
</div>
<div class="col-md-4">Jenis Kelamin: <b><?= $p['gender'] ?? '-' ?></b></div>
</div>
<div class="mt-2 small">
Alamat: <b><?= $p['alamat'] ?? '-' ?></b>
</div>
</div>
<!-- ================= STATUS ================= -->
<div class="cardx">
<?php
$order = $p['order_type'] ?? 'Pending Order';
$color = $order == 'True Emergency' ? '#dc3545' : ($order == 'Non Emergency' ? '#ffc107' : '#198754');
?>
<span class="badge-status" style="background:<?= $color ?>;color:white;">
<?= $order ?> - <?= strtoupper($fase) ?>
</span>
</div>
<!-- ================= PROGRESS ================= -->
<div class="cardx">
<div class="progress mb-2">
<?php
$steps = ["pre_dispatch","dispatch","enRoute","atScene","transfer","post"];
$index = array_search($fase, $steps);
$percent = (($index+1)/count($steps))*100;
?>
<div class="progress-bar" style="width:<?= $percent ?>%"></div>
</div>
<div class="fase-grid">
<?php foreach($steps as $s): ?>
<?php
$class =
$fase == $s ? 'active' :
(array_search($s,$steps) < array_search($fase,$steps) ? 'done' : 'locked');
?>
<?php if($s == 'pre_dispatch'): ?>
<a href="<?= base_url('pasien/predispatch/'.$p['id']) ?>"
class="fase-box <?= $class ?>"
style="text-decoration:none;">
<?= strtoupper($s) ?>
</a>
<?php else: ?>
<div class="fase-box <?= $class ?>">
<?= strtoupper($s) ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<!-- ================= DETAIL ================= -->
<div class="row">
<div class="col-md-6">
<div class="cardx">
<div class="title">Petugas</div>
<div class="value">
Dokter: <?= $p['dokter'] ?? '-' ?><br>
Perawat: <?= is_array($p['perawatPelaksana'] ?? null) ? implode(', ',$p['perawatPelaksana']) : '-' ?><br>
Driver: <?= is_array($p['driver'] ?? null) ? implode(', ',$p['driver']) : '-' ?>
</div>
</div>
</div>
<div class="col-md-6">
<div class="cardx">
<div class="title">Operasional</div>
<div class="value">
KM: <?= $p['kmAwal'] ?? '-' ?> → <?= $p['kmAkhir'] ?? '-' ?><br>
Biaya: <?= $p['biaya'] ?? '-' ?>
</div>
</div>
</div>
</div>
</div>
<!-- PRINT -->
<button class="print-btn" onclick="window.print()">🖨 Print</button>
</body>
</html>
+175
View File
@@ -0,0 +1,175 @@
<!-- ================= REGISTER (LOCK TOTAL) ================= -->
<div class="mb-2">
<label class="form-label">Register Ambulans</label>
<input type="text"
value="<?= esc($pasien['register']) ?>"
class="form-control"
disabled>
</div>
<!-- ================= RM (ONLY ADMIN EDITABLE) ================= -->
<div class="mb-2">
<label class="form-label">No RM</label>
<input type="text"
name="rm"
value="<?= esc($pasien['rm']) ?>"
class="form-control"
<?= (session()->get('role') !== 'admin') ? 'readonly' : '' ?>>
</div>
<!-- ================= IDENTITAS PASIEN ================= -->
<div class="mb-2">
<label class="form-label">Atribut</label>
<input type="text" name="atribut"
value="<?= esc($pasien['atribut']) ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Nama Pasien</label>
<input type="text" name="nama"
value="<?= esc($pasien['nama']) ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Jenis Kelamin</label>
<select name="gender" class="form-select">
<option value="L" <?= ($pasien['gender']=='L')?'selected':'' ?>>Laki-laki</option>
<option value="P" <?= ($pasien['gender']=='P')?'selected':'' ?>>Perempuan</option>
</select>
</div>
<div class="mb-2">
<label class="form-label">Tanggal Lahir</label>
<input type="date"
name="tgl_lahir"
value="<?= esc($pasien['tgl_lahir']) ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Alamat</label>
<textarea name="alamat" class="form-control"><?= esc($pasien['alamat']) ?></textarea>
</div>
<hr>
<!-- ================= ORDER PASIEN ================= -->
<div class="mb-2">
<label class="form-label">Keluhan Utama</label>
<input type="text" name="keluhan_utama"
value="<?= esc($order['keluhan_utama'] ?? '') ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Kesadaran</label>
<input type="text" name="kesadaran"
value="<?= esc($order['kesadaran'] ?? '') ?>"
class="form-control">
</div>
<!-- ================= TUJUAN ================= -->
<div class="mb-2">
<label class="form-label">Tujuan</label>
<select name="tujuan" class="form-select">
<option value="RFDK" <?= ($order['tujuan']=='RFDK')?'selected':'' ?>>
Rumah ke Faskes Dalam Kota
</option>
<option value="F-FDK" <?= ($order['tujuan']=='F-FDK')?'selected':'' ?>>
Fasilitas Umum ke Faskes Dalam Kota
</option>
<option value="AFDK" <?= ($order['tujuan']=='AFDK')?'selected':'' ?>>
Antar Faskes Dalam Kota
</option>
<option value="AFLK" <?= ($order['tujuan']=='AFLK')?'selected':'' ?>>
Antar Faskes Luar Kota
</option>
<option value="PDK" <?= ($order['tujuan']=='PDK')?'selected':'' ?>>
Pulang Dalam Kota
</option>
<option value="PLK" <?= ($order['tujuan']=='PLK')?'selected':'' ?>>
Pulang Luar Kota
</option>
</select>
</div>
<div class="mb-2">
<label class="form-label">Detail Tujuan</label>
<input type="text"
name="tujuan_detail"
value="<?= esc($order['tujuan_detail'] ?? '') ?>"
class="form-control">
</div>
<hr>
<!-- ================= MEDIS ================= -->
<div class="mb-2">
<label class="form-label">Suhu</label>
<input type="text"
name="suhu"
value="<?= esc($order['suhu'] ?? '') ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Berat Badan</label>
<input type="text"
name="berat_badan"
value="<?= esc($order['berat_badan'] ?? '') ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Persetujuan Biaya</label>
<input type="text"
name="persetujuan"
value="<?= esc($order['persetujuan'] ?? '') ?>"
class="form-control">
</div>
<div class="mb-2">
<label class="form-label">Estimasi Biaya</label>
<input type="number"
name="biaya"
value="<?= esc($order['biaya'] ?? '') ?>"
class="form-control">
</div>
<!-- ================= INFORMASI LAIN ================= -->
<div class="mb-2">
<label class="form-label">Informasi Lain</label>
<textarea
name="informasi_lain"
class="form-control"
rows="3"
placeholder="Informasi tambahan terkait pasien / transfer..."><?= esc($order['informasi_lain'] ?? '') ?></textarea>
</div>
<!-- ================= KIE PROSES TRANSFER ================= -->
<div class="mb-2">
<label class="form-label">KIE Proses Transfer</label>
<textarea
name="kie_transfer"
class="form-control"
rows="4"
placeholder="Edukasi proses transfer kepada pasien/keluarga..."><?= esc($order['kie_transfer'] ?? '') ?></textarea>
</div>
<div class="mb-2">
<label class="form-label">Validasi</label>
<input type="text"
name="validasi"
value="<?= esc($order['validasi'] ?? '') ?>"
class="form-control">
</div>
<!-- ================= BUTTON ================= -->
<div class="mt-3">
<button type="submit" class="btn btn-success w-100">
💾 Simpan Perubahan
</button>
</div>
+662
View File
@@ -0,0 +1,662 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Rekam Medik - SiLARAS 119</title>
<link rel="icon" href="https://raw.githubusercontent.com/ambulan119/inventarisambulans119/refs/heads/main/silarass2.ico">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
/* ======================================================
SiLARAS 119 - THE ULTIMATE CINEMATIC DASHBOARD 2026
Fokus: No-Scroll, No-Cut, High Performance Animation
====================================================== */
:root {
--primary-navy: #020617; /* Warna Dasar RSSA */
--accent-blue: #38bdf8; /* Biru Modern */
--emergency-red: #ef4444; /* Warna Respon 119 */
--table-border: #cbd5e1; /* Border Grid Tegas */
}
/* 1. RESET & BACKGROUND (TAK TERBATAS) */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden; /* Mutlak: No Horizontal Scroll */
background:
linear-gradient(135deg, rgba(2, 6, 23, 0.95), rgba(15, 23, 42, 0.85)),
url("https://raw.githubusercontent.com/ambulan119/inventarisambulans119/refs/heads/main/silarasss.jpg")
center/cover no-repeat fixed;
font-family: 'Inter', system-ui, sans-serif;
color: #ffffff;
}
/* ======================================================
SiLARAS 119 - GOD MODE PLATINUM ANIMATION
Fokus: Ultra-High-End Visuals, Neon FX, 3D Dynamics
====================================================== */
/* 1. HEADER SECTION - CINEMATIC ENTRY */
.hero-header {
padding: 60px 20px 40px;
text-align: center;
perspective: 1000px; /* Memberikan kedalaman 3D */
animation: godEntrance 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* 2. LOGO - FLOATING NEON PULSE */
.brand-logo {
height: 105px;
margin-bottom: 25px;
/* Glow biru neon yang sangat dalam */
filter: drop-shadow(0 0 15px var(--accent-blue)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.4));
animation:
logoGodPulse 4s ease-in-out infinite,
logo3DRotate 8s linear infinite;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.brand-logo:hover {
transform: scale(1.2) rotate(10deg);
filter: drop-shadow(0 0 40px var(--accent-blue));
}
/* 3. TITLE - METALLIC SHIMMER EFFECT */
.laras-title {
font-size: clamp(3rem, 10vw, 5.5rem);
font-weight: 950;
letter-spacing: -5px;
margin: 0;
color: #ffffff;
position: relative;
/* Efek kilauan perak/metallic */
background: linear-gradient(to right, #ffffff 20%, #94a3b8 40%, #94a3b8 60%, #ffffff 80%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 4s linear infinite;
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.7));
}
/* 4. EMERGENCY SPAN - NEON ALERT 119 */
.laras-title span {
display: inline-block;
-webkit-text-fill-color: var(--emergency-red);
/* Animasi alarm gawat darurat yang sangat "kece" */
animation: emergencyNeon 1.5s ease-in-out infinite;
position: relative;
}
/* 5. TAGLINE - KINETIC TYPOGRAPHY */
.laras-tagline {
font-size: 0.95rem;
text-transform: uppercase;
/* tetap luas tapi lebih stabil */
letter-spacing: 10px;
color: var(--accent-blue);
font-weight: 900;
margin-top: 20px;
opacity: 0;
/* animasi lebih smooth */
animation: trackingExpandPro 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
/* glow tipis biar hidup */
text-shadow: 0 0 6px rgba(56, 189, 248, 0.25);
}
/* ======================================================
6. GOD MODE KEYFRAMES (LOGIKA VISUAL)
====================================================== */
/* Muncul dengan efek Zoom & Fade */
@keyframes godEntrance {
0% { opacity: 0; transform: scale(0.8) translateY(-100px) rotateX(-20deg); }
100% { opacity: 1; transform: scale(1) translateY(0) rotateX(0deg); }
}
/* Animasi Berdenyut & Melayang */
@keyframes logoGodPulse {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
/* Rotasi Halus 3D */
@keyframes logo3DRotate {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(15deg); }
100% { transform: rotateY(0deg); }
}
/* Kilauan Teks Metallic */
@keyframes textShimmer {
to { background-position: 200% center; }
}
/* Neon Emergency yang Berdenyut Tajam */
@keyframes emergencyNeon {
0%, 100% {
filter: brightness(1) drop-shadow(0 0 5px var(--emergency-red));
transform: scale(1);
}
50% {
filter: brightness(1.5) drop-shadow(0 0 25px var(--emergency-red));
transform: scale(1.1);
color: #ffeb3b; /* Flash Kuning Sedetik */
}
}
/* Animasi Huruf Menyebar (Tagline) */
@keyframes trackingExpandPro {
0% {
letter-spacing: -0.4em;
opacity: 0;
transform: translateY(12px);
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
letter-spacing: 10px;
transform: translateY(0);
}
}
/* 3. TABLE GRID (EDGE-TO-EDGE & NO SCROLL) */
.main-content {
width: 100vw;
max-width: 100vw;
padding: 0;
margin-bottom: 50px;
}
.table-responsive {
width: 100%;
background: #ffffff;
border-top: 4px solid var(--accent-blue);
border-bottom: 4px solid var(--accent-blue);
overflow: hidden; /* Mematikan scroll bar sepenuhnya */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Memaksa konten muat 100% layar */
}
/* Header Tabel - Rapi & Kuat */
.table thead th {
text-align: center !important;
background-color: #f1f5f9;
color: #0f172a;
font-size: 0.75rem;
font-weight: 800;
padding: 15px 5px;
border: 1px solid var(--table-border);
text-transform: uppercase;
}
/* Isi Tabel - ANTI POTONG KATA */
.table tbody td {
padding: 15px 8px;
font-size: 0.82rem;
line-height: 1.4;
color: #1e293b;
border: 1px solid var(--table-border);
vertical-align: middle;
/* Kunci: Teks turun ke bawah utuh per kata */
white-space: normal !important;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: normal;
}
/* 4. DISTRIBUSI LEBAR KOLOM */
.table th:nth-child(1) { width: 35px; } /* No */
.table th:nth-child(2) { width: 8%; } /* Register */
.table th:nth-child(3) { width: 80px; } /* No RM */
.table th:nth-child(4) { width: 12%; } /* Nama */
.table th:nth-child(5) { width: 10%; } /* Tgl Lahir + Umur */
.table th:nth-child(6) { width: 85px; } /* JK */
.table th:nth-child(7) { width: 15%; } /* Alamat */
.table th:nth-child(8) { width: 12%; } /* Tujuan */
.table th:nth-child(9) { width: 120px; } /* Status (Order + Fase) */
.table th:nth-child(10) { width: 70px; } /* Durasi */
.table th:nth-child(11) { width: 9%; } /* Waktu */
.table th:nth-child(12) { width: 18%; } /* Petugas */
.table th:nth-child(13) { width: 60px; } /* Aksi */
/* 5. KEYFRAMES ANIMASI */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes logoPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--accent-blue)); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 35px var(--accent-blue)); }
}
@keyframes blinkRed {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; color: #ffeb3b; } /* Berkedip ke Kuning Respon */
}
/* Utility */
.table tbody tr:nth-child(even) { background-color: #f8fafc; }
.table tbody tr:hover { background-color: #f0f9ff; transition: 0.2s; }
.text-danger { color: #dc2626 !important; font-weight: 800; }
.text-success { color: #16a34a !important; font-weight: 800; }
.hover-shadow:hover {
transform: translateY(-3px);
transition: 0.2s ease;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
}
.strobo-text span {
display: inline-block;
color: #ff0000;
-webkit-text-stroke: 0.4px rgba(0,0,0,0.3);
animation: stroboAmbulance 1s linear infinite;
}
/* animasi merah → putih → biru */
@keyframes stroboAmbulance {
0% {
color: #ff0000;
transform: scale(1);
}
25% {
color: #ffffff;
}
50% {
color: #0ea5e9;
transform: scale(1.05);
}
75% {
color: #ffffff;
}
100% {
color: #ff0000;
transform: scale(1);
}
}
</style>
<body>
<nav class="navbar laras-navbar px-4 py-3 mb-4 shadow-sm">
<div class="container-fluid justify-content-between align-items-center flex-wrap gap-3">
<!-- LEFT: LOGO + TITLE -->
<div class="d-flex align-items-center gap-3">
<div class="logo-wrap">
<img
src="https://raw.githubusercontent.com/ambulan119/inventarisambulans119/refs/heads/main/silarass2.ico"
alt="Logo LARAS 119"
class="laras-logo">
</div>
<div class="lh-sm text-white">
<div class="fw-bold laras-title">
SiLARAS <span class="text-119">119</span>
</div>
<div class="laras-subtitle">
Sistem Laporan Aktivitas Respon Ambulans 119
</div>
<div class="laras-subtitle">
Rumah Sakit dr. Saiful Anwar
</div>
<div class="laras-tagline">
Selaras dalam Koordinasi, Sigap dalam Respon
</div>
</div>
</div>
<!-- RIGHT: INFO -->
<div class="text-end text-white small">
<div class="fw-semibold">🚑 Mako Ambulans 119</div>
<div><?= date('l, d M Y') ?></div>
</div>
</div>
</nav>
<div class="container-fluid py-3">
<!-- HEADER + FILTER + ACTION -->
<div class="card shadow-sm mb-4 border-0 rounded-4">
<div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-3">
<h4 class="fw-bold mb-0 strobo-text">
🧾 E-Rekam Medik SiLARAS <span>119</span>
</h4>
<div class="d-flex align-items-center gap-2 flex-wrap">
<!-- FILTER -->
<form method="get" class="d-flex align-items-center gap-2">
<label for="filterPeriode" class="form-label fw-semibold mb-0">📅</label>
<input type="month"
id="filterPeriode"
name="periode"
value="<?= $_GET['periode'] ?? date('Y-m') ?>"
class="form-control shadow-sm rounded-3"
style="width: 160px;"
onchange="this.form.submit()">
</form>
<!-- EXPORT (UNDER MAINTENANCE) -->
<button type="button"
class="btn btn-outline-secondary rounded-3 shadow-sm"
onclick="alert('Fitur export masih dalam pengembangan 🚧')">
<i class="bi bi-file-earmark-arrow-down"></i> Export Laporan
</button>
<!-- KEMBALI -->
<a href="<?= base_url('dashboard') ?>"
class="btn btn-outline-dark rounded-3 shadow-sm">
<i class="bi bi-arrow-left"></i> Kembali Ke Dashboard Utama
</a>
</div>
</div>
</div>
<!-- CARD STATISTIK -->
<div class="row g-3 mb-4">
<!-- TOTAL -->
<div class="col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 hover-shadow">
<div class="card-body d-flex align-items-center justify-content-between">
<div>
<div class="text-muted small">Total Permintaan Ambulans 119</div>
<h3 class="fw-bold mb-0"><?= $total ?></h3>
</div>
<div class="bg-primary bg-opacity-10 text-primary rounded-circle p-3">
<i class="bi bi-people-fill fs-4"></i>
</div>
</div>
</div>
</div>
<!-- TERLAYANI -->
<div class="col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 hover-shadow">
<div class="card-body d-flex align-items-center justify-content-between">
<div>
<div class="text-muted small">Total Pasien Yang Sudah Terlayani</div>
<h3 class="fw-bold mb-0 text-success"><?= $terlayani ?></h3>
</div>
<div class="bg-success bg-opacity-10 text-success rounded-circle p-3">
<i class="bi bi-check-circle-fill fs-4"></i>
</div>
</div>
</div>
</div>
<!-- PROSES -->
<div class="col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 hover-shadow">
<div class="card-body d-flex align-items-center justify-content-between">
<div>
<div class="text-muted small">Total Pasien Dalam Proses Pelayanan</div>
<h3 class="fw-bold mb-0 text-warning"><?= $dalam_pelayanan ?></h3>
</div>
<div class="bg-warning bg-opacity-10 text-warning rounded-circle p-3">
<i class="bi bi-hourglass-split fs-4"></i>
</div>
</div>
</div>
</div>
<!-- BATAL -->
<div class="col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 hover-shadow">
<div class="card-body d-flex align-items-center justify-content-between">
<div>
<div class="text-muted small">Total Permintaan Batal</div>
<h3 class="fw-bold mb-0 text-danger"><?= $batal ?></h3>
</div>
<div class="bg-danger bg-opacity-10 text-danger rounded-circle p-3">
<i class="bi bi-x-circle-fill fs-4"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover align-middle">
<thead class="table-primary text-center align-middle">
<tr>
<th>No</th>
<th>Register</th>
<th>No RM</th>
<th>Nama Pasien</th>
<th>Tanggal Lahir<br><small>(Umur)</small></th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Tujuan</th>
<th>Status Order</th>
<th>Durasi Tugas</th>
<th>Waktu Input</th>
<th>Petugas</th>
<th width="170">Aksi</th>
</tr>
</thead>
<tbody>
<?php if (!empty($pasien)) : ?>
<?php $no = 1; ?>
<?php
$tujuanList = [
'RFDK' => 'Rumah ke Faskes Dalam Kota',
'F-FDK' => 'Fasilitas Umum ke Faskes Dalam Kota',
'AFDK' => 'Antar Faskes Dalam Kota',
'AFLK' => 'Antar Faskes Luar Kota',
'PDK' => 'Pulang Dalam Kota',
'PLK' => 'Pulang Luar Kota',
];
?>
<?php foreach ($pasien as $p) : ?>
<tr>
<!-- NO -->
<td class="text-center"><?= $no++ ?></td>
<!-- REGISTER -->
<td><?= esc($p['register'] ?? '-') ?></td>
<!-- NO RM -->
<td><?= esc($p['rm']) ?></td>
<!-- NAMA -->
<td><?= esc(trim(($p['atribut'] ?? '') . ' ' . ($p['nama'] ?? '-'))) ?></td>
<!-- TGL LAHIR + UMUR -->
<td class="text-center">
<?php
$tgl = $p['tgl_lahir'] ?? null;
if ($tgl) {
$lahir = new DateTime($tgl);
$now = new DateTime();
$umur = $now->diff($lahir)->y;
echo date('d/m/Y', strtotime($tgl));
echo "<br><small class='text-primary fw-bold'>{$umur} th</small>";
} else {
echo '-';
}
?>
</td>
<!-- JK -->
<td class="text-center"><?= esc($p['gender'] ?? '-') ?></td>
<!-- ALAMAT -->
<td><?= esc($p['alamat'] ?? '-') ?></td>
<!-- TUJUAN -->
<td>
<?php
$kode = $p['tujuan'] ?? '-';
$label = $tujuanList[$kode] ?? null;
?>
<?php if ($label): ?>
<div class="fw-semibold"><?= esc($kode) ?></div>
<small class="text-muted"><?= esc($label) ?></small>
<?php else: ?>
<?= esc($kode) ?>
<?php endif; ?>
</td>
<!-- STATUS ORDER + FASE -->
<td class="text-center">
<div class="d-flex flex-column gap-1">
<?php
$type = $p['order_type'] ?? 'Pending Order';
$fase = (int) ($p['fase'] ?? 1);
$status = $p['status'] ?? '';
?>
<!-- BATAL -->
<?php if ($status == 'batal'): ?>
<span class="badge bg-danger">
❌ BATAL
</span>
<small class="text-muted">
<?= esc($p['alasan_batal'] ?? '-') ?>
</small>
<?php else: ?>
<!-- ORDER TYPE -->
<span class="badge
<?= $type == 'True Emergency' ? 'bg-danger' :
($type == 'Non Emergency' ? 'bg-warning text-dark' : 'bg-success') ?>">
<?= $type == 'True Emergency' ? '🔴 True Emergency' :
($type == 'Non Emergency' ? '🟡 Non Emergency' : '🟢 Pending Order') ?>
</span>
<!-- FASE -->
<span class="badge bg-primary">
<?= match(true) {
$fase == 1 => 'Predispatch',
$fase == 2 => 'On Scene',
$fase == 3 => 'Transport',
$fase == 4 => 'Arrival RS',
$fase == 5 => 'Handover',
$fase >= 6 => 'Selesai',
default => 'Predispatch'
} ?>
</span>
<?php endif; ?>
</div>
</td>
<!-- DURASI -->
<td class="text-center"><?= esc($p['durasi'] ?? '-') ?></td>
<!-- WAKTU -->
<td class="text-center">
<?= !empty($p['created_at'])
? date('d/m/Y H:i', strtotime($p['created_at']))
: '-' ?>
</td>
<!-- PETUGAS -->
<td>
<b>Predispatch:</b><br>
<?= esc($p['petugas_predispatch'] ?? '-') ?>
<br>
<b>Tim Ambulans 119:</b><br>
<?= esc($p['petugas'] ?? '-') ?>
</td>
<!-- AKSI -->
<td class="text-center">
<a href="<?= base_url('pasien/detail/' . $p['id']) ?>"
class="btn btn-sm btn-primary">
🔍 Detail
</a>
<form action="http://localhost/silaras119/public/pasien/hapus/<?= $p['id'] ?>"
method="post"
style="display:inline;"
onsubmit="return konfirmasiHapus(this)">
<?= csrf_field() ?>
<input type="hidden" name="admin_password">
<button type="submit" class="btn btn-sm btn-danger mb-1">
🗑️ Hapus
</button>
</form>
</td>
</tr>
<?php endforeach; ?>
<?php else : ?>
<tr>
<td colspan="13" class="text-center text-muted py-4">
Belum ada data pasien.
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function konfirmasiHapus(form)
{
let password = prompt("Masukkan Password Admin119 untuk menghapus data:");
if(password === null || password === "")
{
return false;
}
form.admin_password.value = password;
return confirm("Yakin ingin menghapus data pasien ini?");
}
</script>
</body>
</html>