Files
Form-Laporan-Operasi-F5/index.php
renaldybrada a98bdb4a89 add laporan
2026-03-06 14:37:44 +07:00

800 lines
26 KiB
PHP

<?php
$riwayat = [
[
"tanggal" => "28/1/2026, 2:27:04 PM",
"operator" => "dr.SYAIFULLAH AMISRAGANI, Sp.OT",
"status" => "Tervalidasi"
],
[
"tanggal" => "29/1/2026, 10:13:29 AM",
"operator" => "dr.PRADANA NURHADI,Sp.U",
"status" => "Belum Validasi"
]
];
if ($_SERVER['REQUEST_METHOD'] == "POST") {
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Laporan Operasi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.section-title {
font-weight: 600;
margin-top: 25px;
margin-bottom: 10px;
}
.table-riwayat th {
background: #3fa7e0;
color: white;
}
</style>
</head>
<body class="bg-light">
<div class="container mt-4">
<h4 class="text-center mb-4">FORM LAPORAN OPERASI</h4>
<form method="POST" enctype="multipart/form-data">
<!-- IDENTITAS -->
<div class="row">
<div class="col-md-4">
<label>DPJP Operator</label>
<select class="form-select" name="dpjp_operator" id="dpjp_operator">
<option>dr.SYAIFULLAH AMISRAGANI, Sp.OT</option>
<option>dr.AGUS, Sp.BO</option>
<option>dr.Koernia Kusuma Wardhana, Sp.B-TKV</option>
</select>
</div>
<div class="col-md-4">
<label>Asisten Operator</label>
<input class="form-control" name="asisten_operator">
</div>
<div class="col-md-4">
<label>Instrumentir</label>
<input class="form-control" name="instrumentir">
</div>
</div>
<div class="row mt-3">
<div class="col-md-4">
<label>DPJP Anastesi</label>
<select class="form-select" name="dpjp_anastesi">
<option>dr.FANNIYAH,Sp.An</option>
<option>dr.DEWI ARUM SAWITRI, Sp.AN-TI</option>
<option>dr.MUHAMAD AKBAR SIDIQ, Sp.AN-TI</option>
</select>
</div>
<div class="col-md-4">
<label>Asisten Anastesi</label>
<input class="form-control" name="asisten_anastesi">
</div>
<div class="col-md-4">
<label>Tanggal Pembedahan</label>
<input type="date" class="form-control" name="tgl_bedah" id="tgl_bedah" required>
</div>
</div>
<!-- DIAGNOSA -->
<div class="row mt-3">
<div class="col-md-6">
<label>Diagnosa Pra Bedah</label>
<textarea class="form-control" name="diag_pre"></textarea>
</div>
<div class="col-md-6">
<label>Diagnosa Pasca Bedah</label>
<textarea class="form-control" name="diag_post"></textarea>
</div>
</div>
<!-- TINDAKAN OPERATIF -->
<div class="section-title">Tindakan Operatif</div>
<div id="tindakanContainer" class="container border pl-3">
<div class="row my-2 tindakanRow">
<div class="col-md-6">
<input class="form-control" name="tindakan_operatif[]" placeholder="Cari Prosedur">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success addTindakan">+</button>
</div>
</div>
</div>
<!-- DETAIL OPERASI -->
<div class="row my-3 d-flex flex-column">
<div class="row mb-3">
<div class="col-md-3">
<label>Jenis Tindakan Operasi</label>
</div>
<div class="col-md-4">
<select class="form-select" name="jenis_tindakan">
<option>Kecil</option>
<option>Sedang</option>
<option>Besar</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Kode Billing</label>
</div>
<div class="col-md-4">
<input class="form-control" name="kode_billing">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Jenis Anastesi</label>
</div>
<div class="col-md-4">
<select class="form-select" name="jenis_anastesi">
<option>General</option>
<option>Lokal</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label>Sistem Pelayanan</label>
</div>
<div class="col-md-4">
<select class="form-select" name="sistem_pelayanan">
<option>Emergency</option>
<option>Elektif</option>
</select>
</div>
</div>
</div>
<!-- OPERASI TIME -->
<!-- <div class="section-title">Waktu Operasi</div> -->
<div class="row mt-4 mb-3">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Operasi Mulai</label>
</div>
<div class="col-md-8">
<input type="datetime-local" id="op_mulai" class="form-control">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Operasi Selesai</label>
</div>
<div class="col-md-8">
<input type="datetime-local" id="op_selesai" class="form-control" disabled>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Lama Operasi (menit)</label>
</div>
<div class="col-md-8">
<input type="number" id="lama_op" class="form-control">
</div>
</div>
</div>
</div>
<!-- PEMBIUSAN TIME-->
<!-- <div class="section-title">Pembiusan</div> -->
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Pembiusan Mulai</label>
</div>
<div class="col-md-8">
<input type="datetime-local" id="bius_mulai" class="form-control">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Pembiusan Selesai</label>
</div>
<div class="col-md-8">
<input type="datetime-local" id="bius_selesai" class="form-control" disabled>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<label>Lama Pembiusan</label>
</div>
<div class="col-md-8">
<input type="number" id="lama_bius" class="form-control">
</div>
</div>
</div>
</div>
<!-- OBG -->
<!-- <div class="section-title">Data OBG</div> -->
<div class="row my-3 d-flex flex-column">
<div class="row my-3">
<div class="col-md-3">
<label>Jenis Pelayanan</label>
</div>
<div class="col-md-4">
<select class="form-select" name="jenis_pelayanan">
<option>Bersih</option>
<option>Kotor</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Operasi Ke</label>
</div>
<div class="col-md-4">
<input class="form-control" name="operasi_ke">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Keterangan Lahir</label>
</div>
<div class="col-md-4">
<select class="form-select" name="ket_lahir">
<option>Lahir Hidup</option>
<option>Lahir Mati</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Apgar Score</label>
</div>
<div class="col-md-4">
<input class="form-control" name="apgar">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Berat Badan</label>
</div>
<div class="col-md-4">
<div class="input-group">
<input class="form-control" name="bb">
<span class="input-group-text">gram</span>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Waktu Lahir</label>
</div>
<div class="col-md-4">
<input class="form-control" name="waktu_lahir">
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="section-title">Uraian Operasi</div>
</div>
<div class="col-md-6">
<textarea class="form-control" rows="5" name="uraian"></textarea>
</div>
</div>
</div>
<!-- DARAH MASUK -->
<div class="row">
<div class="col-md-3">
Jumlah Pendarahan
</div>
<div class="col-md-4">
<div class="input-group">
<input class="form-control" type="number" name="sum_darah" disabled>
<span class="input-group-text">cc</span>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-3">Jenis & Jumlah Darah Masuk</div>
<div class="col-md-9" id="darahContainer">
<div class="row darahRow mb-2">
<div class="col-md-5">
<div class="input-group">
<input class="form-control" name="jumlah_darah[]" type="number">
<span class="input-group-text">cc</span>
</div>
</div>
<div class="col-md-5">
<select name="jenis_darah[]" class="form-select">
<option>PRC</option>
<option>WB</option>
</select>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success addDarah">+</button>
<button type="button" class="btn btn-danger removeDarah">🗑</button>
</div>
</div>
</div>
</div>
<!-- FILE IMPLANT -->
<div class="row d-flex flex-column mt-3 border py-3" id="implantSection">
<div class="row mb-3">
<div class="col-md-3">
<label>Merek</label>
</div>
<div class="col-md-5">
<input class="form-control" type="file" id="merek">
</div>
<div class="col-md-4">
<p>*Format: JPG, PNG | Maks: 1MB</p>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Nama Implant</label>
</div>
<div class="col-md-5">
<input class="form-control" type="file" id="implant">
</div>
<div class="col-md-4">
<p>*Format: JPG, PNG | Maks: 1MB</p>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Stiker / Nomor Register Implant</label>
</div>
<div class="col-md-9">
<input class="form-control" id="stiker">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<label>Nama Pendamping Implant</label>
</div>
<div class="col-md-9">
<input class="form-control" id="pendamping_implant">
</div>
</div>
<div class="row">
<div class="col-md-12 d-flex justify-content-end">
<button type="button" id="btnSimpanImplant" class="btn btn-primary mt-3">Simpan</button>
</div>
</div>
<!-- TABLE IMPLANT -->
<div class="mt-4">
<h5>Daftar Implant</h5>
<table class="table table-bordered table-striped">
<thead class="table-primary">
<tr>
<th>Merek</th>
<th>Nama Implant</th>
<th>Stiker</th>
<th>Pendamping</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="tableImplantBody">
</tbody>
</table>
</div>
</div>
<!-- SPECIMEN / JARINGAN -->
<div class="row mt-3 border py-3">
<div class="col-md-3">Specimen / Jaringan dikirim ke</div>
<div class="col-md-9" id="specimenContainer">
<div class="row specimenRow mb-2">
<div class="col-md-5">
<div class="input-group">
<input class="form-control" name="jumlah_specimen[]" type="text">
</div>
</div>
<div class="col-md-5">
<select name="jenis_specimen[]" class="form-select">
<option>PA</option>
<option>Mikrobiologi</option>
<option>Laborat</option>
<option>Tidak Perlu</option>
</select>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success addSpecimen">+</button>
<button type="button" class="btn btn-danger removeSpecimen">🗑</button>
</div>
</div>
</div>
</div>
</form>
<!-- TOMBOL RIWAYAT & SIMPAN LAPORAN -->
<div class="row mt-4">
<div class="col-md-12 offset-md-0 d-flex justify-content-end ">
<div class="row">
<div class="col-md-12">
<button class="btn btn-secondary" type="submit">RIWAYAT LAPORAN OPERASI</button>
<button class="btn btn-primary" id="btnSimpanLaporan">SIMPAN LAPORAN OPERASI</button>
</div>
</div>
</div>
</div>
<!-- RIWAYAT -->
<div class="mt-5">
<h5>Daftar Riwayat Operasi</h5>
<table class="table table-bordered table-riwayat">
<thead>
<tr>
<th>No</th>
<th>Tanggal Simpan</th>
<th>DPJP Operator</th>
<th>Preview</th>
<th>Status</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="tableRiwayatOperasiBody">
<?php foreach ($riwayat as $i => $r): ?>
<tr>
<td><?= $i + 1 ?></td>
<td><?= $r['tanggal'] ?></td>
<td><?= $r['operator'] ?></td>
<td>
<button class="btn btn-sm btn-outline-success">👁</button>
</td>
<td>
<?php if ($r['status'] == "Tervalidasi"): ?>
<span class="badge bg-success">Valid</span>
<?php else: ?>
<span class="badge bg-warning">Belum Validasi</span>
<?php endif ?>
</td>
<td>
<?php if ($r['status'] != "Tervalidasi"): ?>
<button class="btn btn-sm btn-success">Validasi</button>
<?php endif ?>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
<script>
/* kalkulasi waktu */
function calc(start, dur, end) {
let s = document.getElementById(start).value
let d = document.getElementById(dur).value
if (!s || !d) return
let dt = new Date(s)
dt.setMinutes(dt.getMinutes() + parseInt(d))
let yyyy = dt.getFullYear()
let mm = String(dt.getMonth() + 1).padStart(2, '0')
let dd = String(dt.getDate()).padStart(2, '0')
let hh = String(dt.getHours()).padStart(2, '0')
let mi = String(dt.getMinutes()).padStart(2, '0')
document.getElementById(end).value = `${yyyy}-${mm}-${dd}T${hh}:${mi}`
}
document.getElementById("op_mulai").onchange = () => calc("op_mulai", "lama_op", "op_selesai")
document.getElementById("lama_op").oninput = () => calc("op_mulai", "lama_op", "op_selesai")
document.getElementById("bius_mulai").onchange = () => calc("bius_mulai", "lama_bius", "bius_selesai")
document.getElementById("lama_bius").oninput = () => calc("bius_mulai", "lama_bius", "bius_selesai")
/* dynamic tindakan */
document.addEventListener("click", e => {
if (e.target.classList.contains("addTindakan")) {
let row = document.querySelector(".tindakanRow").cloneNode(true)
document.getElementById("tindakanContainer").appendChild(row)
}
})
/* darah */
function sumDarah() {
let inputs = document.querySelectorAll('input[name="jumlah_darah[]"]')
let total = 0
inputs.forEach(input => {
let val = parseFloat(input.value)
if (!isNaN(val)) {
total += val
}
})
document.querySelector('input[name="sum_darah"]').value = total
}
document.addEventListener("click", e => {
if (e.target.classList.contains("addDarah")) {
let row = document.querySelector(".darahRow").cloneNode(true)
row.querySelector('input[name="jumlah_darah[]"]').value = ""
document.getElementById("darahContainer").appendChild(row)
}
if (e.target.classList.contains("removeDarah")) {
let rows = document.querySelectorAll(".darahRow")
if (rows.length > 1) {
e.target.closest(".darahRow").remove()
sumDarah()
}
}
})
document.addEventListener("input", function(e) {
if (e.target.name === "jumlah_darah[]") {
sumDarah()
}
})
/* specimen */
document.addEventListener("click", e => {
if (e.target.classList.contains("addSpecimen")) {
let row = document.querySelector(".specimenRow").cloneNode(true)
document.getElementById("specimenContainer").appendChild(row)
}
if (e.target.classList.contains("removeSpecimen")) {
let rows = document.querySelectorAll(".specimenRow")
if (rows.length > 1) {
e.target.closest(".specimenRow").remove()
}
}
})
/* Tabel implant */
document.getElementById("btnSimpanImplant").addEventListener("click", function() {
let merekInput = document.getElementById("merek")
let implantInput = document.getElementById("implant")
let stiker = document.getElementById("stiker").value
let pendamping = document.getElementById("pendamping_implant").value
let merekFile = merekInput.files[0]
let implantFile = implantInput.files[0]
let merekName = merekFile ? merekFile.name : "-"
let implantName = implantFile ? implantFile.name : "-"
let tbody = document.getElementById("tableImplantBody")
let row = document.createElement("tr")
row.innerHTML = `
<td>${merekName}</td>
<td>${implantName}</td>
<td>${stiker}</td>
<td>${pendamping}</td>
<td>
<button class="btn btn-sm btn-danger btnDelete">Hapus</button>
</td>
`
tbody.appendChild(row)
clearForm()
})
function clearForm() {
document.getElementById("merek").value = ""
document.getElementById("implant").value = ""
document.getElementById("stiker").value = ""
document.getElementById("pendamping_implant").value = ""
}
document.addEventListener("click", function(e) {
if (e.target.classList.contains("btnDelete")) {
e.target.closest("tr").remove()
}
})
/* Tabel Riwayat Operasi */
document.getElementById("btnSimpanLaporan").addEventListener("click", function() {
let operatorDPJP = document.getElementById("dpjp_operator").value
let tglBedah = document.getElementById("tgl_bedah")
let dateNow = new Date()
if (tglBedah.value == "") {
tglBedah.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
alert("Isikan tanggal pembedahan terlebih dahulu")
return
}
let tbody = document.getElementById("tableRiwayatOperasiBody")
let row = document.createElement("tr")
row.innerHTML = `
<td></td>
<td>${dateNow.toLocaleString()}</td>
<td>${operatorDPJP}</td>
<td>
<button class="btn btn-sm btn-outline-success">👁</button>
</td>
<td>
<span class="badge bg-warning">Belum Validasi</span>
</td>
<td>
<button class="btn btn-sm btn-success">Validasi</button>
</td>
`
tbody.appendChild(row)
tglBedah.value = ""
})
</script>
</body>
</html>