Perbaikan monitoring pasien ambulans 119
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user