Skip to content

Instantly share code, notes, and snippets.

@AIbnuHIbban

AIbnuHIbban/aktual-risiko-aspirasi.html

Created December 2, 2025 02:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AIbnuHIbban/26a52bf31cecae6d066012970b38dc17 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AIbnuHIbban/26a52bf31cecae6d066012970b38dc17 to your computer and use it in GitHub Desktop.
Download ZIP
HTML files upload
Raw
aktual-risiko-aspirasi.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
input.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
/* Hide dotted underline when printing */
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align:center;border-top:1px solid;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px;"></span>
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Risiko Aspirasi</div>
<div>(I.0004)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kesadaran, batuk, muntah, dan kemampuan menelan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor status pernapasan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
x/Menit
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor bunyi nafas terutama setelah makan/minum :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa residu gaster sebelum asupan oral (pasien terpasang NGT) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa kepatenan selang NGT sebelum memberi asupan oral :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span><br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi fowler (30-45 derajat) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas (teknik head till chin lift, jaw thrust) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan penghisapan jalan nafas (suction) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan makanan dalam bentuk cair :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px; min-width: 200px"></span>,
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
cc<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan pemasangan NGT :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan oksigen sesuai kebutuhan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
Liter/Menit<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_1"
name="signature_title_1"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_1"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_1"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_1"
name="signature_image_1"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_1"
name="signature_name_1"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<div class="force-new-page"></div>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<!-- SORE Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kesadaran, batuk, muntah, dan kemampuan menelan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor status pernapasan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
x/Menit
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor bunyi nafas terutama setelah makan/minum :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa residu gaster sebelum asupan oral (pasien terpasang NGT) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa kepatenan selang NGT sebelum memberi asupan oral :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span><br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi fowler (30-45 derajat) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas (teknik head till chin lift, jaw thrust) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan penghisapan jalan nafas (suction) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan makanan dalam bentuk cair :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px; min-width: 200px"></span>,
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
cc<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan pemasangan NGT :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan oksigen sesuai kebutuhan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
Liter/Menit<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_2"
name="signature_title_2"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_2"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_2"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_2"
name="signature_image_2"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_2"
name="signature_name_2"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- MALAM Section -->
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<!-- MALAM Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kesadaran, batuk, muntah, dan kemampuan menelan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor status pernapasan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
x/Menit
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor bunyi nafas terutama setelah makan/minum :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa residu gaster sebelum asupan oral (pasien terpasang NGT) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memeriksa kepatenan selang NGT sebelum memberi asupan oral :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span><br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi fowler (30-45 derajat) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas (teknik head till chin lift, jaw thrust) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan penghisapan jalan nafas (suction) :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan makanan dalam bentuk cair :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px; min-width: 200px"></span>,
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
cc<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan pemasangan NGT :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memberikan oksigen sesuai kebutuhan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 60px; min-width: 40px"></span>
Liter/Menit<br />
&nbsp;&nbsp;<span contenteditable="true" class="input-line" data-placeholder="" style="width: 95%"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_3"
name="signature_title_3"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_3"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_3"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_3"
name="signature_image_3"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_3"
name="signature_name_3"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
defisit-perawatan-dini.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
input.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
/* Hide dotted underline when printing */
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align:center;border-top:1px solid;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px;"></span>
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Defisit Perawatan Diri</div>
<div>(I.0109)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan aktivitas perawatan diri sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kemandirian :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebutuhan alat bantu kebersihan diri, berpakaian, berhias, dan makan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan BAB/BAK sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor integritas kulit :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang terapeutik :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyiapkan keperluan pribadi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendampingi dalam melakukan perawatan diri sampai mandiri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi untuk menerima keadaan ketergantungan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi kemandirian, bantu jika tidak mampu lakukan perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjadwalkan rutinitas perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendukung penggunaan toilet/commode/pispot/urinal secara konsisten :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan melakukan perawatan diri secara konsisten sesuai kemampuan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan BAK/BAB secara rutin :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan kolaborasi pemberian obat sesuai indikasi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_1"
name="signature_title_1"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_1"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_1"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_1"
name="signature_image_1"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_1"
name="signature_name_1"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<div class="force-new-page"></div>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<!-- SORE Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan aktivitas perawatan diri sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kemandirian :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebutuhan alat bantu kebersihan diri, berpakaian, berhias, dan makan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan BAB/BAK sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor integritas kulit :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang terapeutik :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyiapkan keperluan pribadi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendampingi dalam melakukan perawatan diri sampai mandiri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi untuk menerima keadaan ketergantungan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi kemandirian, bantu jika tidak mampu lakukan perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjadwalkan rutinitas perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendukung penggunaan toilet/commode/pispot/urinal secara konsisten :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan melakukan perawatan diri secara konsisten sesuai kemampuan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan BAK/BAB secara rutin :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan kolaborasi pemberian obat sesuai indikasi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_2"
name="signature_title_2"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_2"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_2"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_2"
name="signature_image_2"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_2"
name="signature_name_2"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- MALAM Section -->
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<!-- MALAM Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan aktivitas perawatan diri sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor tingkat kemandirian :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebutuhan alat bantu kebersihan diri, berpakaian, berhias, dan makan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 150px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kebiasaan BAB/BAK sesuai usia :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memonitor integritas kulit :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang terapeutik :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menyiapkan keperluan pribadi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendampingi dalam melakukan perawatan diri sampai mandiri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi untuk menerima keadaan ketergantungan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi kemandirian, bantu jika tidak mampu lakukan perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjadwalkan rutinitas perawatan diri :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mendukung penggunaan toilet/commode/pispot/urinal secara konsisten :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan melakukan perawatan diri secara konsisten sesuai kemampuan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan BAK/BAB secara rutin :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<!-- Kolaborasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Kolaborasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Melakukan kolaborasi pemberian obat sesuai indikasi :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_3"
name="signature_title_3"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_3"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_3"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_3"
name="signature_image_3"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_3"
name="signature_name_3"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
dukungan-penampilan-peran.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
input.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
/* Hide dotted underline when printing */
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center; border-top: 1px solid">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<span
id="hari_perawatan"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<span
id="ruang_rawat"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 180px"
></span>
</td>
</tr>
</table>
</td>
<td
style="
width: 35%;
padding: 10px;
vertical-align: middle;
"
>
<div><span class="bold">Kode I :</span></div>
<div>Dukungan Penampilan Peran</div>
<div>(I.13478)</div>
</td>
</tr>
</table>
<!-- Main Table - Single table with 3 tbody sections -->
<table class="table-full border" style="border-top: none">
<!-- PAGI Section -->
<tbody class="shift-section" data-shift="PAGI">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_pagi"
name="hari_tanggal_jam_pagi"
class="form-textarea print-no-border auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi peran yang ada dalam keluarga :
<span
id="pagi_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi adanya peran yang tidak terpenuhi :
<span
id="pagi_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi berbagai peran dan periode transisi sesuai tingkat perkembangan :
<span
id="pagi_obs_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 170px"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi adaptasi peran keluarga terhadap perubahan peran yang tidak diinginkan :
<span
id="pagi_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi bermain peran dalam mengantisipasi reaksi orang lain terhadap perilaku :
<span
id="pagi_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perilaku yang dibutuhkan untuk pengembangan peran :
<span
id="pagi_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 200px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perubahan peran yang diperlukan akibat penyakit :
<span
id="pagi_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Kolaborasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Merujuk dalam kelompok untuk mempelajari peran baru :
<span
id="pagi_kol_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_sore"
name="hari_tanggal_jam_sore"
class="form-textarea auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi peran yang ada dalam keluarga :
<span
id="sore_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi adanya peran yang tidak terpenuhi :
<span
id="sore_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi berbagai peran dan periode transisi sesuai tingkat perkembangan :
<span
id="sore_obs_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 170px"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi adaptasi peran keluarga terhadap perubahan peran yang tidak diinginkan :
<span
id="sore_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi bermain peran dalam mengantisipasi reaksi orang lain terhadap perilaku :
<span
id="sore_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perilaku yang dibutuhkan untuk pengembangan peran :
<span
id="sore_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 200px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perubahan peran yang diperlukan akibat penyakit :
<span
id="sore_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Kolaborasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Merujuk dalam kelompok untuk mempelajari peran baru :
<span
id="sore_kol_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- MALAM Section -->
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_malam"
name="hari_tanggal_jam_malam"
class="form-textarea auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi peran yang ada dalam keluarga :
<span
id="malam_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi adanya peran yang tidak terpenuhi :
<span
id="malam_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mengidentifikasi berbagai peran dan periode transisi sesuai tingkat perkembangan :
<span
id="malam_obs_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 170px"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi adaptasi peran keluarga terhadap perubahan peran yang tidak diinginkan :
<span
id="malam_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Memfasilitasi bermain peran dalam mengantisipasi reaksi orang lain terhadap perilaku :
<span
id="malam_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perilaku yang dibutuhkan untuk pengembangan peran :
<span
id="malam_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 200px"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Mendiskusikan perubahan peran yang diperlukan akibat penyakit :
<span
id="malam_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Kolaborasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Merujuk dalam kelompok untuk mempelajari peran baru :
<span
id="malam_kol_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 250px"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
dukungan-pengambilan-keputusan.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
DUKUNGAN PENGAMBILAN KEPUTUSAN
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Dukungan Pengambilan Keputusan</span></div>
<div>(I 09265)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi persepsi mengenai masalah dan informasi yang memicu konflik :
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memfasilitasi mengklarifikasi nilai dan harapan yang membantu membuat pilihan :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mendiskusikan kelebihan dan kekurangan dari setiap solusi :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 34.6%; --w-print: 26.1%;"
maxlength="18"
/>
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi melihat situasi secara realistik :
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 50.5%; --w-print: 44.1%;"
maxlength="31"
/>
<input
type="text"
id="pagi_ter_5"
name="pagi_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Motivasi mengungkapkan tujuan perawatan yang diharapkan :
<input
type="text"
id="pagi_ter_6"
name="pagi_ter_6"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 32.6%; --w-print: 23.8%;"
maxlength="16"
/>
<input
type="text"
id="pagi_ter_7"
name="pagi_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi pengambilan keputusan secara kolaboratif :
<input
type="text"
id="pagi_ter_8"
name="pagi_ter_8"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 37.9%; --w-print: 29.8%;"
maxlength="21"
/>
<input
type="text"
id="pagi_ter_9"
name="pagi_ter_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menghormati hak pasien untuk menerima atau menolak informasi :
<input
type="text"
id="pagi_ter_10"
name="pagi_ter_10"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 27.5%; --w-print: 18%;"
maxlength="12"
/>
<input
type="text"
id="pagi_ter_11"
name="pagi_ter_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Memfasilitasi menjelaskan keputusan kepada orang lain jika perlu :
<input
type="text"
id="pagi_ter_12"
name="pagi_ter_12"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 28%; --w-print: 18.6%;"
maxlength="13"
/>
<input
type="text"
id="pagi_ter_13"
name="pagi_ter_13"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memfasilitasi hubungan antara pasien, keluarga, dan tenaga kesehatan lainnya :
<input
type="text"
id="pagi_ter_14"
name="pagi_ter_14"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menginformasikan alternatif solusi secara jelas :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 47.3%; --w-print: 40.4%;"
maxlength="28"
/>
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan informasi yang diminta pasien :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51%; --w-print: 44.6%;"
maxlength="31"
/>
<input
type="text"
id="pagi_edu_4"
name="pagi_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkolaborasi dengan tenaga kesehatan lain dalam memfasilitasi pengambilan keputusan :
<input
type="text"
id="pagi_kol_1"
name="pagi_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi persepsi mengenai masalah dan informasi yang memicu konflik :
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memfasilitasi mengklarifikasi nilai dan harapan yang membantu membuat pilihan :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mendiskusikan kelebihan dan kekurangan dari setiap solusi :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 34.6%; --w-print: 26.1%;"
maxlength="18"
/>
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi melihat situasi secara realistik :
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 50.5%; --w-print: 44.1%;"
maxlength="31"
/>
<input
type="text"
id="sore_ter_5"
name="sore_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Motivasi mengungkapkan tujuan perawatan yang diharapkan :
<input
type="text"
id="sore_ter_6"
name="sore_ter_6"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 32.6%; --w-print: 23.8%;"
maxlength="16"
/>
<input
type="text"
id="sore_ter_7"
name="sore_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi pengambilan keputusan secara kolaboratif :
<input
type="text"
id="sore_ter_8"
name="sore_ter_8"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 37.9%; --w-print: 29.8%;"
maxlength="21"
/>
<input
type="text"
id="sore_ter_9"
name="sore_ter_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menghormati hak pasien untuk menerima atau menolak informasi :
<input
type="text"
id="sore_ter_10"
name="sore_ter_10"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 27.5%; --w-print: 18%;"
maxlength="12"
/>
<input
type="text"
id="sore_ter_11"
name="sore_ter_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Memfasilitasi menjelaskan keputusan kepada orang lain jika perlu :
<input
type="text"
id="sore_ter_12"
name="sore_ter_12"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 28%; --w-print: 18.6%;"
maxlength="13"
/>
<input
type="text"
id="sore_ter_13"
name="sore_ter_13"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memfasilitasi hubungan antara pasien, keluarga, dan tenaga kesehatan lainnya :
<input
type="text"
id="sore_ter_14"
name="sore_ter_14"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menginformasikan alternatif solusi secara jelas :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 47.3%; --w-print: 40.4%;"
maxlength="28"
/>
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan informasi yang diminta pasien :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51%; --w-print: 44.6%;"
maxlength="31"
/>
<input
type="text"
id="sore_edu_4"
name="sore_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkolaborasi dengan tenaga kesehatan lain dalam memfasilitasi pengambilan keputusan :
<input
type="text"
id="sore_kol_1"
name="sore_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi persepsi mengenai masalah dan informasi yang memicu konflik :
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memfasilitasi mengklarifikasi nilai dan harapan yang membantu membuat pilihan :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mendiskusikan kelebihan dan kekurangan dari setiap solusi :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 34.6%; --w-print: 26.1%;"
maxlength="18"
/>
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi melihat situasi secara realistik :
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 50.5%; --w-print: 44.1%;"
maxlength="31"
/>
<input
type="text"
id="malam_ter_5"
name="malam_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Motivasi mengungkapkan tujuan perawatan yang diharapkan :
<input
type="text"
id="malam_ter_6"
name="malam_ter_6"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 32.6%; --w-print: 23.8%;"
maxlength="16"
/>
<input
type="text"
id="malam_ter_7"
name="malam_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi pengambilan keputusan secara kolaboratif :
<input
type="text"
id="malam_ter_8"
name="malam_ter_8"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 37.9%; --w-print: 29.8%;"
maxlength="21"
/>
<input
type="text"
id="malam_ter_9"
name="malam_ter_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menghormati hak pasien untuk menerima atau menolak informasi :
<input
type="text"
id="malam_ter_10"
name="malam_ter_10"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 27.5%; --w-print: 18%;"
maxlength="12"
/>
<input
type="text"
id="malam_ter_11"
name="malam_ter_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Memfasilitasi menjelaskan keputusan kepada orang lain jika perlu :
<input
type="text"
id="malam_ter_12"
name="malam_ter_12"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 28%; --w-print: 18.6%;"
maxlength="13"
/>
<input
type="text"
id="malam_ter_13"
name="malam_ter_13"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memfasilitasi hubungan antara pasien, keluarga, dan tenaga kesehatan lainnya :
<input
type="text"
id="malam_ter_14"
name="malam_ter_14"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menginformasikan alternatif solusi secara jelas :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 47.3%; --w-print: 40.4%;"
maxlength="28"
/>
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan informasi yang diminta pasien :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51%; --w-print: 44.6%;"
maxlength="31"
/>
<input
type="text"
id="malam_edu_4"
name="malam_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkolaborasi dengan tenaga kesehatan lain dalam memfasilitasi pengambilan keputusan :
<input
type="text"
id="malam_kol_1"
name="malam_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
dukungan-proses-berduka.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
DUKUNGAN PROSES BERDUKA
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Dukungan Proses Berduka</span></div>
<div>(I 09274)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kehilangan yang dihadapi :
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51.6%; --w-print: 45.4%;"
maxlength="32"
/>
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi proses berduka yang dialami :
<input
type="text"
id="pagi_obs_3"
name="pagi_obs_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 48.3%; --w-print: 41.7%;"
maxlength="29"
/>
<input
type="text"
id="pagi_obs_4"
name="pagi_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengidentifikasi sifat keterikatan pada benda yang hilang atau orang yang meninggal :
<!-- <input
type="text"
id="pagi_obs_5"
name="pagi_obs_5"
class="form-text text-underline input-line hide"
style="width: 6.9%;"
/> -->
<input
type="text"
id="pagi_obs_6"
name="pagi_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengidentifikasi reaksi awal terhadap kehilangan :
<input
type="text"
id="pagi_obs_7"
name="pagi_obs_7"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 44.5%; --w-print: 37.5%;"
maxlength="26"
/>
<input
type="text"
id="pagi_obs_8"
name="pagi_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menunjukkan sikap menerima dan empati :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 52%; --w-print: 45.8%;"
maxlength="32"
/>
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memotivasi agar mau mengungkapkan perasaan kehilangan :
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 33.3%; --w-print: 24.8%;"
maxlength="17"
/>
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memotivasi untuk menguatkan dukungan keluarga atau orang terdekat :
<input
type="text"
id="pagi_ter_5"
name="pagi_ter_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 21.9%; --w-print: 11.9%;"
maxlength="8"
/>
<input
type="text"
id="pagi_ter_6"
name="pagi_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Memfasilitasi melakukan kebiasaan sesuai dengan budaya, agama dan norma sosial :
<!-- <input
type="text"
id="pagi_ter_7"
name="pagi_ter_7"
class="form-text text-underline input-line hide"
style="width: 8.9%;"
/> -->
<input
type="text"
id="pagi_ter_8"
name="pagi_ter_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi mengekspresikan perasaan dengan cara yang nyaman :
<input
type="text"
id="pagi_ter_9"
name="pagi_ter_9"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 25.3%; --w-print: 15.8%;"
maxlength="11"
/>
<input
type="text"
id="pagi_ter_10"
name="pagi_ter_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan strategi koping yang dapat digunakan :
<input
type="text"
id="pagi_ter_11"
name="pagi_ter_11"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 40.5%; --w-print: 33%;"
maxlength="23"
/>
<input
type="text"
id="pagi_ter_12"
name="pagi_ter_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan kepada pasien dan keluarga bahwa sikap mengingkari, marah, tawar-menawar, depresi dan menerima adalah wajar dalam menghadapi kehilangan :
<!-- <input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 28.6%; --w-print: 21%;"
/> -->
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menganjurkan mengekspresikan perasaan tentang kehilangan :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 31.3%; --w-print: 22.5%;"
maxlength="15"
/>
<input
type="text"
id="pagi_edu_4"
name="pagi_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan melewati proses berduka secara bertahap :
<input
type="text"
id="pagi_edu_5"
name="pagi_edu_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 38.1%; --w-print: 30.2%;"
maxlength="21"
/>
<input
type="text"
id="pagi_edu_6"
name="pagi_edu_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kehilangan yang dihadapi :
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51.6%; --w-print: 45.4%;"
maxlength="32"
/>
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi proses berduka yang dialami :
<input
type="text"
id="sore_obs_3"
name="sore_obs_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 48.3%; --w-print: 41.7%;"
maxlength="29"
/>
<input
type="text"
id="sore_obs_4"
name="sore_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengidentifikasi sifat keterikatan pada benda yang hilang atau orang yang meninggal :
<input
type="text"
id="sore_obs_6"
name="sore_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengidentifikasi reaksi awal terhadap kehilangan :
<input
type="text"
id="sore_obs_7"
name="sore_obs_7"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 44.5%; --w-print: 37.5%;"
maxlength="26"
/>
<input
type="text"
id="sore_obs_8"
name="sore_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menunjukkan sikap menerima dan empati :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 52%; --w-print: 45.8%;"
maxlength="32"
/>
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memotivasi agar mau mengungkapkan perasaan kehilangan :
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 33.3%; --w-print: 24.8%;"
maxlength="17"
/>
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memotivasi untuk menguatkan dukungan keluarga atau orang terdekat :
<input
type="text"
id="sore_ter_5"
name="sore_ter_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 21.9%; --w-print: 11.9%;"
maxlength="8"
/>
<input
type="text"
id="sore_ter_6"
name="sore_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<input
type="text"
id="sore_ter_8"
name="sore_ter_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi mengekspresikan perasaan dengan cara yang nyaman :
<input
type="text"
id="sore_ter_9"
name="sore_ter_9"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 25.3%; --w-print: 15.8%;"
maxlength="11"
/>
<input
type="text"
id="sore_ter_10"
name="sore_ter_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan strategi koping yang dapat digunakan :
<input
type="text"
id="sore_ter_11"
name="sore_ter_11"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 40.5%; --w-print: 33%;"
maxlength="23"
/>
<input
type="text"
id="sore_ter_12"
name="sore_ter_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan kepada pasien dan keluarga bahwa sikap mengingkari, marah, tawar-menawar, depresi dan menerima adalah wajar dalam menghadapi kehilangan :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menganjurkan mengekspresikan perasaan tentang kehilangan :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 31.3%; --w-print: 22.5%;"
maxlength="15"
/>
<input
type="text"
id="sore_edu_4"
name="sore_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan melewati proses berduka secara bertahap :
<input
type="text"
id="sore_edu_5"
name="sore_edu_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 38.1%; --w-print: 30.2%;"
maxlength="21"
/>
<input
type="text"
id="sore_edu_6"
name="sore_edu_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kehilangan yang dihadapi :
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 51.6%; --w-print: 45.4%;"
maxlength="32"
/>
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi proses berduka yang dialami :
<input
type="text"
id="malam_obs_3"
name="malam_obs_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 48.3%; --w-print: 41.7%;"
maxlength="29"
/>
<input
type="text"
id="malam_obs_4"
name="malam_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengidentifikasi sifat keterikatan pada benda yang hilang atau orang yang meninggal :
<input
type="text"
id="malam_obs_6"
name="malam_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengidentifikasi reaksi awal terhadap kehilangan :
<input
type="text"
id="malam_obs_7"
name="malam_obs_7"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 44.5%; --w-print: 37.5%;"
maxlength="26"
/>
<input
type="text"
id="malam_obs_8"
name="malam_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menunjukkan sikap menerima dan empati :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 52%; --w-print: 45.8%;"
maxlength="32"
/>
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memotivasi agar mau mengungkapkan perasaan kehilangan :
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 33.3%; --w-print: 24.8%;"
maxlength="17"
/>
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memotivasi untuk menguatkan dukungan keluarga atau orang terdekat :
<input
type="text"
id="malam_ter_5"
name="malam_ter_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 21.9%; --w-print: 11.9%;"
maxlength="8"
/>
<input
type="text"
id="malam_ter_6"
name="malam_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Memfasilitasi melakukan kebiasaan sesuai dengan budaya, agama dan norma sosial :
<input
type="text"
id="malam_ter_8"
name="malam_ter_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi mengekspresikan perasaan dengan cara yang nyaman :
<input
type="text"
id="malam_ter_9"
name="malam_ter_9"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 25.3%; --w-print: 15.8%;"
maxlength="11"
/>
<input
type="text"
id="malam_ter_10"
name="malam_ter_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan strategi koping yang dapat digunakan :
<input
type="text"
id="malam_ter_11"
name="malam_ter_11"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 40.5%; --w-print: 33%;"
maxlength="23"
/>
<input
type="text"
id="malam_ter_12"
name="malam_ter_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan kepada pasien dan keluarga bahwa sikap mengingkari, marah, tawar-menawar, depresi dan menerima adalah wajar dalam menghadapi kehilangan :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menganjurkan mengekspresikan perasaan tentang kehilangan :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 31.3%; --w-print: 22.5%;"
maxlength="15"
/>
<input
type="text"
id="malam_edu_4"
name="malam_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan melewati proses berduka secara bertahap :
<input
type="text"
id="malam_edu_5"
name="malam_edu_5"
class="form-text text-underline input-line dynamic-width hide"
style="--w: 38.1%; --w-print: 30.2%;"
maxlength="21"
/>
<input
type="text"
id="malam_edu_6"
name="malam_edu_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
edukasi-diet.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
EDUKASI DIET
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Edukasi Diet</span></div>
<div>(I 12369)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kemampuan pasien dan keluarga menerima informasi :
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi tingkat pengetahuan :
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi kebiasaan pola makan saat ini dan masa lalu :
<input
type="text"
id="pagi_obs_3"
name="pagi_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi persepsi pasien dan keluarga tentang diet yang diprogramkan :
<input
type="text"
id="pagi_obs_4"
name="pagi_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi keterbatasan finansial untuk menyediakan makanan :
<input
type="text"
id="pagi_obs_5"
name="pagi_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjadwalkan waktu yang tepat untuk memberikan pendidikan kesehatan :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan kesempatan pasien dan keluarga bertanya :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tujuan kepatuhan diet terhadap kesehatan :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menginformasikan makanan yang boleh dan tidak boleh :
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan pasien duduk saat makan dan 30 menit setelah makan :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan melakukan olahraga sesuai toleransi :
<input
type="text"
id="pagi_edu_4"
name="pagi_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkonsultasikan pasien dan keluarga pasien ke ahli gizi :
<input
type="text"
id="pagi_kol_1"
name="pagi_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kemampuan pasien dan keluarga menerima informasi :
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi tingkat pengetahuan :
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi kebiasaan pola makan saat ini dan masa lalu :
<input
type="text"
id="sore_obs_3"
name="sore_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi persepsi pasien dan keluarga tentang diet yang diprogramkan :
<input
type="text"
id="sore_obs_4"
name="sore_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi keterbatasan finansial untuk menyediakan makanan :
<input
type="text"
id="sore_obs_5"
name="sore_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjadwalkan waktu yang tepat untuk memberikan pendidikan kesehatan :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan kesempatan pasien dan keluarga bertanya :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tujuan kepatuhan diet terhadap kesehatan :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menginformasikan makanan yang boleh dan tidak boleh :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan pasien duduk saat makan dan 30 menit setelah makan :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan melakukan olahraga sesuai toleransi :
<input
type="text"
id="sore_edu_4"
name="sore_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkonsultasikan pasien dan keluarga pasien ke ahli gizi :
<input
type="text"
id="sore_kol_1"
name="sore_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kemampuan pasien dan keluarga menerima informasi :
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi tingkat pengetahuan :
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi kebiasaan pola makan saat ini dan masa lalu :
<input
type="text"
id="malam_obs_3"
name="malam_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi persepsi pasien dan keluarga tentang diet yang diprogramkan :
<input
type="text"
id="malam_obs_4"
name="malam_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi keterbatasan finansial untuk menyediakan makanan :
<input
type="text"
id="malam_obs_5"
name="malam_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjadwalkan waktu yang tepat untuk memberikan pendidikan kesehatan :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Memberikan kesempatan pasien dan keluarga bertanya :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tujuan kepatuhan diet terhadap kesehatan :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menginformasikan makanan yang boleh dan tidak boleh :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan pasien duduk saat makan dan 30 menit setelah makan :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan melakukan olahraga sesuai toleransi :
<input
type="text"
id="malam_edu_4"
name="malam_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaboratif -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengkonsultasikan pasien dan keluarga pasien ke ahli gizi :
<input
type="text"
id="malam_kol_1"
name="malam_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
edukasi-keluarga-berencana.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
EDUKASI DIET
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Edukasi Diet</span></div>
<div>(I 12369)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kesiapan dan kemampuan menerima informasi :
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi pengetahuan tentang alat kontrasepsi :
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menyediakan materi dan media pendidikan kesehatan :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjadwalkan pendidikan kesehatan sesuai kesepakatan :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan kesempatan untuk bertanya :
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan pemeriksaan fisik :
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi ibu dan pasangan dalam mengambil keputusan menggunakan alat kontrasepsi :
<input
type="text"
id="pagi_ter_5"
name="pagi_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan pertimbangan agama, budaya, perkembangan, sosial-ekonomi terhadap pemilihan alat kontrasepsi :
<input
type="text"
id="pagi_ter_6"
name="pagi_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tentang sistem reproduksi :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan metode-metode alat kontrasepsi :
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kesiapan dan kemampuan menerima informasi :
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi pengetahuan tentang alat kontrasepsi :
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menyediakan materi dan media pendidikan kesehatan :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjadwalkan pendidikan kesehatan sesuai kesepakatan :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan kesempatan untuk bertanya :
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan pemeriksaan fisik :
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi ibu dan pasangan dalam mengambil keputusan menggunakan alat kontrasepsi :
<input
type="text"
id="sore_ter_5"
name="sore_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan pertimbangan agama, budaya, perkembangan, sosial-ekonomi terhadap pemilihan alat kontrasepsi :
<input
type="text"
id="sore_ter_6"
name="sore_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tentang sistem reproduksi :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan metode-metode alat kontrasepsi :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi kesiapan dan kemampuan menerima informasi :
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi pengetahuan tentang alat kontrasepsi :
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menyediakan materi dan media pendidikan kesehatan :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjadwalkan pendidikan kesehatan sesuai kesepakatan :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan kesempatan untuk bertanya :
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan pemeriksaan fisik :
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Memfasilitasi ibu dan pasangan dalam mengambil keputusan menggunakan alat kontrasepsi :
<input
type="text"
id="malam_ter_5"
name="malam_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Mendiskusikan pertimbangan agama, budaya, perkembangan, sosial-ekonomi terhadap pemilihan alat kontrasepsi :
<input
type="text"
id="malam_ter_6"
name="malam_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan tentang sistem reproduksi :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan metode-metode alat kontrasepsi :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td style="padding: 8px; vertical-align: top" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
edukasi-menyusui.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center; border-top: 1px solid">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<span
id="hari_perawatan"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100px"
></span>
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<span
id="ruang_rawat"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 180px"
></span>
</td>
</tr>
</table>
</td>
<td
style="
width: 35%;
padding: 10px;
vertical-align: middle;
"
>
<div><span class="bold">Kode I :</span></div>
<div>Edukasi Menyusui</div>
<div>(I.12393)</div>
</td>
</tr>
</table>
<!-- Main Table - Single table with 3 tbody sections -->
<table class="table-full border" style="border-top: none">
<!-- PAGI Section -->
<tbody class="shift-section" data-shift="PAGI">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_pagi"
name="hari_tanggal_jam_pagi"
class="form-textarea print-no-border auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi kesiapan dan kemampuan
menerima informasi :
<span
id="pagi_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi tujuan atau keinginan
menyusui :
<span
id="pagi_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Sediakan materi dan media pendidikan
kesehatan :
<span
id="pagi_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jadwalkan pendidikan kesehatan sesuai
kesepakatan :
<span
id="pagi_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan kesempatan untuk bertanya :
<span
id="pagi_ter_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Dukung ibu untuk meningkatkan kepercayaan
diri dalam menyusui :
<span
id="pagi_ter_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Libatkan sistem pendukung : suami,
keluarga, tenaga kesehatan dan masyarakat :
<span
id="pagi_ter_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan konseling menyusui :
<span
id="pagi_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jelaskan manfaat menyusui bagi ibu dan
bayi :
<span
id="pagi_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan 4 posisi menyusui dan perlekatan
(latch on) dengan benar :
<span
id="pagi_edu_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara antepartum
dengan kompres pakai kapas yang telah
diberikan minyak kelapa :
<span
id="pagi_edu_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara postpartum
(mis. Memerah ASI, pijat payudara, pijat
oksitosin) :
<span
id="pagi_edu_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="1">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_sore"
name="hari_tanggal_jam_sore"
class="form-textarea auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi kesiapan dan kemampuan
menerima informasi :
<span
id="sore_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi tujuan atau keinginan
menyusui :
<span
id="sore_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Sediakan materi dan media pendidikan
kesehatan :
<span
id="sore_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jadwalkan pendidikan kesehatan sesuai
kesepakatan :
<span
id="sore_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan kesempatan untuk bertanya :
<span
id="sore_ter_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Dukung ibu untuk meningkatkan kepercayaan
diri dalam menyusui :
<span
id="sore_ter_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Libatkan sistem pendukung : suami,
keluarga, tenaga kesehatan dan masyarakat :
<span
id="sore_ter_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan konseling menyusui :
<span
id="sore_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jelaskan manfaat menyusui bagi ibu dan
bayi :
<span
id="sore_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan 4 posisi menyusui dan perlekatan
(latch on) dengan benar :
<span
id="sore_edu_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara antepartum
dengan kompres pakai kapas yang telah
diberikan minyak kelapa :
<span
id="sore_edu_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara postpartum
(mis. Memerah ASI, pijat payudara, pijat
oksitosin) :
<span
id="sore_edu_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="1">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- MALAM Section -->
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row only-print-after-first-border" style="text-align:center">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td
style="padding: 8px; vertical-align: top"
class="border-right date-td"
rowspan="1"
>
<textarea
id="hari_tanggal_jam_malam"
name="hari_tanggal_jam_malam"
class="form-textarea auto-resize-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="padding: 8px; vertical-align: top"
class="border-right border-bottom content-td"
>
<table class="table-full" style="font-size: 11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f"
>Observasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi kesiapan dan kemampuan
menerima informasi :
<span
id="malam_obs_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Identifikasi tujuan atau keinginan
menyusui :
<span
id="malam_obs_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f"
>Terapeutik :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Sediakan materi dan media pendidikan
kesehatan :
<span
id="malam_ter_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jadwalkan pendidikan kesehatan sesuai
kesepakatan :
<span
id="malam_ter_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan kesempatan untuk bertanya :
<span
id="malam_ter_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Dukung ibu untuk meningkatkan kepercayaan
diri dalam menyusui :
<span
id="malam_ter_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Libatkan sistem pendukung : suami,
keluarga, tenaga kesehatan dan masyarakat :
<span
id="malam_ter_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2"
>Edukasi :</span
>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Berikan konseling menyusui :
<span
id="malam_edu_1"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Jelaskan manfaat menyusui bagi ibu dan
bayi :
<span
id="malam_edu_2"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan 4 posisi menyusui dan perlekatan
(latch on) dengan benar :
<span
id="malam_edu_3"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara antepartum
dengan kompres pakai kapas yang telah
diberikan minyak kelapa :
<span
id="malam_edu_4"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
- Ajarkan perawatan payudara postpartum
(mis. Memerah ASI, pijat payudara, pijat
oksitosin) :
<span
id="malam_edu_5"
class="input-line"
contenteditable="true"
data-placeholder=""
style="width: 100%"
></span>
</td>
</tr>
</table>
</td>
<td style="padding: 8px; vertical-align: top" class="signature-td" rowspan="1">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
edukasi-proses-penyakit.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Edukasi Proses Penyakit</div>
<div>(I.12444)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Identifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Sediakan materi dan media pendidikan kesehatan :</span>
<span id="pagi_ter_1" name="pagi_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jadwalkan pendidikan kesehatan sesuai kesepakatan :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berikan kesempatan untuk bertanya :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan penyebab dan faktor resiko penyakit :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan proses patofisiologi munculnya penyakit :</span>
<span id="pagi_edu_2" name="pagi_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tanda dan gejala yang ditimbulkan oleh penyakit :</span>
<span id="pagi_edu_3" name="pagi_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan kemungkinan terjadinya komplikasi :</span>
<span id="pagi_edu_4" name="pagi_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meredakan atau mengatasi gejala yang dirasakan :</span>
<span id="pagi_edu_5" name="pagi_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meminimalkan efek samping dari intervensi atau pengobatan Menginformasikan kondisi pasien saat ini :</span>
<span id="pagi_edu_6" name="pagi_edu_6" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan melapor jika merasakan tanda dan gejala memberat atau tidak biasa :</span>
<span id="pagi_edu_7" name="pagi_edu_7" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Identifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Sediakan materi dan media pendidikan kesehatan :</span>
<span id="sore_ter_1" name="sore_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jadwalkan pendidikan kesehatan sesuai kesepakatan :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berikan kesempatan untuk bertanya :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan penyebab dan faktor resiko penyakit :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan proses patofisiologi munculnya penyakit :</span>
<span id="sore_edu_2" name="sore_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tanda dan gejala yang ditimbulkan oleh penyakit :</span>
<span id="sore_edu_3" name="sore_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan kemungkinan terjadinya komplikasi :</span>
<span id="sore_edu_4" name="sore_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meredakan atau mengatasi gejala yang dirasakan :</span>
<span id="sore_edu_5" name="sore_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meminimalkan efek samping dari intervensi atau pengobatan Menginformasikan kondisi pasien saat ini :</span>
<span id="sore_edu_6" name="sore_edu_6" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan melapor jika merasakan tanda dan gejala memberat atau tidak biasa :</span>
<span id="sore_edu_7" name="sore_edu_7" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Identifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Sediakan materi dan media pendidikan kesehatan :</span>
<span id="malam_ter_1" name="malam_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jadwalkan pendidikan kesehatan sesuai kesepakatan :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berikan kesempatan untuk bertanya :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan penyebab dan faktor resiko penyakit :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan proses patofisiologi munculnya penyakit :</span>
<span id="malam_edu_2" name="malam_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tanda dan gejala yang ditimbulkan oleh penyakit :</span>
<span id="malam_edu_3" name="malam_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan kemungkinan terjadinya komplikasi :</span>
<span id="malam_edu_4" name="malam_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meredakan atau mengatasi gejala yang dirasakan :</span>
<span id="malam_edu_5" name="malam_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan cara meminimalkan efek samping dari intervensi atau pengobatan Menginformasikan kondisi pasien saat ini :</span>
<span id="malam_edu_6" name="malam_edu_6" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan melapor jika merasakan tanda dan gejala memberat atau tidak biasa :</span>
<span id="malam_edu_7" name="malam_edu_7" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
edukasi-seksualitas.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Edukasi Seksualitas</div>
<div>(I.12447)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan materi dan media Pendidikan kesehatan :</span>
(<input type="checkbox" id="pagi_ter_1_leaflet" name="pagi_ter_1_leaflet" /> Leaflet /
<input type="checkbox" id="pagi_ter_1_brosur" name="pagi_ter_1_brosur" /> Brosur,
<input type="checkbox" id="pagi_ter_1_lainnya" name="pagi_ter_1_lainnya" />
<input type="text" id="pagi_ter_1_other" name="pagi_ter_1_other"
class="form-text text-underline input-line" minlength="15" style="width: 150px" />)
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjadwalkan Pendidikan kesehatan sesuai kesepakatan :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan kesempatan untuk bertanya :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan anatomi sistem reproduksi laki-laki dan atau perempuan :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan perkembangan seksualitas sepanjang siklus kehidupan :</span>
<span id="pagi_edu_2" name="pagi_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jelaskan risiko tertular penyakit menular seksual dan AIDS akibat sex bebas :</span>
<span id="pagi_edu_3" name="pagi_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan materi dan media Pendidikan kesehatan :</span>
(<input type="checkbox" id="sore_ter_1_leaflet" name="sore_ter_1_leaflet" /> Leaflet /
<input type="checkbox" id="sore_ter_1_brosur" name="sore_ter_1_brosur" /> Brosur,
<input type="checkbox" id="sore_ter_1_lainnya" name="sore_ter_1_lainnya" />
<input type="text" id="sore_ter_1_other" name="sore_ter_1_other"
class="form-text text-underline input-line" minlength="15" style="width: 150px" />)
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjadwalkan Pendidikan kesehatan sesuai kesepakatan :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan kesempatan untuk bertanya :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan anatomi sistem reproduksi laki-laki dan atau perempuan :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan perkembangan seksualitas sepanjang siklus kehidupan :</span>
<span id="sore_edu_2" name="sore_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jelaskan risiko tertular penyakit menular seksual dan AIDS akibat sex bebas :</span>
<span id="sore_edu_3" name="sore_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kesiapan dan kemampuan menerima informasi :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan materi dan media Pendidikan kesehatan :</span>
(<input type="checkbox" id="malam_ter_1_leaflet" name="malam_ter_1_leaflet" /> Leaflet /
<input type="checkbox" id="malam_ter_1_brosur" name="malam_ter_1_brosur" /> Brosur,
<input type="checkbox" id="malam_ter_1_lainnya" name="malam_ter_1_lainnya" />
<input type="text" id="malam_ter_1_other" name="malam_ter_1_other"
class="form-text text-underline input-line" minlength="15" style="width: 150px" />)
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjadwalkan Pendidikan kesehatan sesuai kesepakatan :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan kesempatan untuk bertanya :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan anatomi sistem reproduksi laki-laki dan atau perempuan :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan perkembangan seksualitas sepanjang siklus kehidupan :</span>
<span id="malam_edu_2" name="malam_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Jelaskan risiko tertular penyakit menular seksual dan AIDS akibat sex bebas :</span>
<span id="malam_edu_3" name="malam_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
latihan-batuk-efektif.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Latihan Batuk Efektif</div>
<div>(I.01006)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemampuan batuk :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor adanya retensi sputum :</span>
<span id="pagi_obs_2" name="pagi_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala infeksi saluran napas :</span>
<span id="pagi_obs_3" name="pagi_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor input dan output cairan (mis. jumlah dan karakteristik) :</span>
<span id="pagi_obs_4" name="pagi_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi-Fowler atau Fowler :</span>
<span id="pagi_ter_1" name="pagi_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memasang perlak dan bengkok di pangkuan pasien :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Membuang sekret pada tempat sputum :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tujuan dan prosedur batuk efektif :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan tarik napas dalam melalui hidung selama 4 detik, ditahan selama 2 detik, kemudian keluarkan dari mulut dengan bibir mencucu (dibulatkan) selama 8 detik :</span>
<span id="pagi_edu_2" name="pagi_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan mengulangi tarik napas dalam hingga 3 kali :</span>
<span id="pagi_edu_3" name="pagi_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan batuk dengan kuat langsung setelah tarik napas dalam yang ke-3 :</span>
<span id="pagi_edu_4" name="pagi_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi pemberian mukolitik atau ekspektoran :</span>
<span id="pagi_kol_1" name="pagi_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemampuan batuk :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor adanya retensi sputum :</span>
<span id="sore_obs_2" name="sore_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala infeksi saluran napas :</span>
<span id="sore_obs_3" name="sore_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor input dan output cairan (mis. jumlah dan karakteristik) :</span>
<span id="sore_obs_4" name="sore_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi-Fowler atau Fowler :</span>
<span id="sore_ter_1" name="sore_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memasang perlak dan bengkok di pangkuan pasien :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Membuang sekret pada tempat sputum :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tujuan dan prosedur batuk efektif :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan tarik napas dalam melalui hidung selama 4 detik, ditahan selama 2 detik, kemudian keluarkan dari mulut dengan bibir mencucu (dibulatkan) selama 8 detik :</span>
<span id="sore_edu_2" name="sore_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan mengulangi tarik napas dalam hingga 3 kali :</span>
<span id="sore_edu_3" name="sore_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan batuk dengan kuat langsung setelah tarik napas dalam yang ke-3 :</span>
<span id="sore_edu_4" name="sore_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi pemberian mukolitik atau ekspektoran :</span>
<span id="sore_kol_1" name="sore_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemampuan batuk :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor adanya retensi sputum :</span>
<span id="malam_obs_2" name="malam_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala infeksi saluran napas :</span>
<span id="malam_obs_3" name="malam_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor input dan output cairan (mis. jumlah dan karakteristik) :</span>
<span id="malam_obs_4" name="malam_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengatur posisi semi-Fowler atau Fowler :</span>
<span id="malam_ter_1" name="malam_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memasang perlak dan bengkok di pangkuan pasien :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Membuang sekret pada tempat sputum :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan tujuan dan prosedur batuk efektif :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan tarik napas dalam melalui hidung selama 4 detik, ditahan selama 2 detik, kemudian keluarkan dari mulut dengan bibir mencucu (dibulatkan) selama 8 detik :</span>
<span id="malam_edu_2" name="malam_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan mengulangi tarik napas dalam hingga 3 kali :</span>
<span id="malam_edu_3" name="malam_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan batuk dengan kuat langsung setelah tarik napas dalam yang ke-3 :</span>
<span id="malam_edu_4" name="malam_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi pemberian mukolitik atau ekspektoran :</span>
<span id="malam_kol_1" name="malam_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
manajemen-berat-badan.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align:center;border-top:1px solid;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px;"></span>
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 180px"></span>
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Manajemen Berat Badan</div>
<div>(I.03119)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kondisi kesehatan pasien yang dapat mempengaruhi berat badan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menghitung berat badan ideal pasien :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
kg
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi menentukan target berat badan yang realistis :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan hubungan antara asupan makanan, aktivitas fisik, penambahan berat badan dan penurunan berat badan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan faktor risiko berat badan lebih :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan mencatat berat badan setiap minggu :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 20%; padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<div class="force-new-page"></div>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<!-- SORE Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kondisi kesehatan pasien yang dapat mempengaruhi berat badan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menghitung berat badan ideal pasien :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
kg
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi menentukan target berat badan yang realistis :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan hubungan antara asupan makanan, aktivitas fisik, penambahan berat badan dan penurunan berat badan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan faktor risiko berat badan lebih :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan mencatat berat badan setiap minggu :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 20%; padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- MALAM Section -->
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<!-- MALAM Content Row -->
<tr>
<td style="width: 10%; padding: 4px; vertical-align: top" class="border-right date-td" rowspan="6">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder="" style="width:100%;"></textarea>
</td>
<td style="width: 70%; padding: 8px; vertical-align: top" class="border-right border-bottom content-td">
<div style="font-size:11px">
<!-- Observasi -->
<div>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kondisi kesehatan pasien yang dapat mempengaruhi berat badan:</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Terapeutik -->
<div style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menghitung berat badan ideal pasien :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 50px; min-width: 30px"></span>
kg
</div>
<div style="padding: 2px 0">
<span class="question-text">- Memfasilitasi menentukan target berat badan yang realistis :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 200px"></span>
</div>
<!-- Edukasi -->
<div style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan hubungan antara asupan makanan, aktivitas fisik, penambahan berat badan dan penurunan berat badan :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 100px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menjelaskan faktor risiko berat badan lebih :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 250px"></span>
</div>
<div style="padding: 2px 0">
<span class="question-text">- Menganjurkan mencatat berat badan setiap minggu :</span>
<span contenteditable="true" class="input-line" data-placeholder="" style="width: 220px"></span>
</div>
</div>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 20%; padding: 8px; vertical-align: top" class="signature-td" rowspan="6">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
manajemen-eliminasi-urin.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
outline: none;
resize: none;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="text1"
name="text1"
class="form-text text-underline input-line"
style="width: 100px"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="text2"
name="text2"
class="form-text text-underline input-line"
style="width: 180px"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Manajemen Eliminasi Urin</span></div>
<div>(I 04152)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_1"
name="textarea_1"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi tanda dan gejala retensi atau inkontenesia urin :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi faktor yang menyebabkan retensi atau inkontenensia urin :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memonitor eliminasi urin :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
style="width: 69%;"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mencatat waktu-waktu dan haluaran berkemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Membatasi asupan cairan :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
style="width: 68%;"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengambil sampel urine tengah (midstream) untuk pemeriksaan :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengajarkan tanda dan gejala infeksi saluran kemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan untuk mengukur asupan cairan dan haluaran urine :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan cara mengambil spesimen urin (midstream) :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengajarkan untuk mengenali tanda berkemih dan waktu yang tepat untuk berkemih :
<input
type="text"
id="text_4"
name="text_4"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan minum yang cukup, jika tidak ada kontra indikasi :
<input
type="text"
id="text_5"
name="text_5"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menganjurkan untuk mengurangi minum menjelang tidur :
<input
type="text"
id="text_6"
name="text_6"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi dalam pemberian obat supositoria uretra :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_1"
name="textarea_1"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi tanda dan gejala retensi atau inkontenesia urin :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi faktor yang menyebabkan retensi atau inkontenensia urin :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memonitor eliminasi urin :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
style="width: 69%;"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mencatat waktu-waktu dan haluaran berkemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Membatasi asupan cairan :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
style="width: 68%;"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengambil sampel urine tengah (midstream) untuk pemeriksaan :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengajarkan tanda dan gejala infeksi saluran kemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan untuk mengukur asupan cairan dan haluaran urine :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan cara mengambil spesimen urin (midstream) :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengajarkan untuk mengenali tanda berkemih dan waktu yang tepat untuk berkemih :
<input
type="text"
id="text_4"
name="text_4"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan minum yang cukup, jika tidak ada kontra indikasi :
<input
type="text"
id="text_5"
name="text_5"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menganjurkan untuk mengurangi minum menjelang tidur :
<input
type="text"
id="text_6"
name="text_6"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi dalam pemberian obat supositoria uretra :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_1"
name="textarea_1"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi tanda dan gejala retensi atau inkontenesia urin :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengidentifikasi faktor yang menyebabkan retensi atau inkontenensia urin :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memonitor eliminasi urin :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
style="width: 69%;"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mencatat waktu-waktu dan haluaran berkemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Membatasi asupan cairan :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
style="width: 68%;"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengambil sampel urine tengah (midstream) untuk pemeriksaan :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengajarkan tanda dan gejala infeksi saluran kemih :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan untuk mengukur asupan cairan dan haluaran urine :
<input
type="text"
id="text_2"
name="text_2"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Mengajarkan cara mengambil spesimen urin (midstream) :
<input
type="text"
id="text_3"
name="text_3"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mengajarkan untuk mengenali tanda berkemih dan waktu yang tepat untuk berkemih :
<input
type="text"
id="text_4"
name="text_4"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan minum yang cukup, jika tidak ada kontra indikasi :
<input
type="text"
id="text_5"
name="text_5"
class="form-text text-underline input-line"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Menganjurkan untuk mengurangi minum menjelang tidur :
<input
type="text"
id="text_6"
name="text_6"
class="form-text text-underline input-line"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi dalam pemberian obat supositoria uretra :
<input
type="text"
id="text_1"
name="text_1"
class="form-text text-underline input-line"
/>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
manajemen-energi.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
input.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
/* Hide dotted underline when printing */
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Manajemen Energi</div>
<div>(I.05178)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Mengidentifikasi gangguan fungsi tubuh yang mengakibatkan kelelahan :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Memonitor kelelahan fisik dan emosional :</span>
<span id="pagi_obs_2" name="pagi_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memonitor pola dan jam tidur. Jumlah jam tidur :</span>
<input type="text" id="pagi_obs_3" name="pagi_obs_3"
class="form-text text-underline input-line" minlength="5" style="width: 80px" /> jam
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Memonitor lokasi dan ketidaknyamanan selama melakukan aktivitas :</span>
<span id="pagi_obs_4" name="pagi_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menyediakan lingkungan nyaman dan rendah stimulus :</span>
<span id="pagi_ter_1" name="pagi_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Melakukan latihan rentang gerak pasif dan aktif :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memberikan aktivitas distraksi yang menenangkan :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Fasilitasi duduk disisi tempat tidur, jika tidak dapat berpindah atau berjalan :</span>
<span id="pagi_ter_4" name="pagi_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menganjurkan tirah baring :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Menganjurkan melakukan aktivitas secara bertahap :</span>
<span id="pagi_edu_2" name="pagi_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Menganjurkan menghubungi perawat jika tanda dan gejala kelelahan tidak berkurang :</span>
<span id="pagi_edu_3" name="pagi_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Mengajarkan strategi koping untuk mengurangi kelelahan :</span>
<span id="pagi_edu_4" name="pagi_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Berkolaborasi dengan ahli gizi tentang cara meningkatkan asupan makanan :</span>
<span id="pagi_kol_1" name="pagi_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_1"
name="signature_title_1"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_1"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_1"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_1"
name="signature_image_1"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_1"
name="signature_name_1"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Mengidentifikasi gangguan fungsi tubuh yang mengakibatkan kelelahan :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Memonitor kelelahan fisik dan emosional :</span>
<span id="sore_obs_2" name="sore_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memonitor pola dan jam tidur. Jumlah jam tidur :</span>
<input type="text" id="sore_obs_3" name="sore_obs_3"
class="form-text text-underline input-line" minlength="5" style="width: 80px" /> jam
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Memonitor lokasi dan ketidaknyamanan selama melakukan aktivitas :</span>
<span id="sore_obs_4" name="sore_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menyediakan lingkungan nyaman dan rendah stimulus :</span>
<span id="sore_ter_1" name="sore_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Melakukan latihan rentang gerak pasif dan aktif :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memberikan aktivitas distraksi yang menenangkan :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Fasilitasi duduk disisi tempat tidur, jika tidak dapat berpindah atau berjalan :</span>
<span id="sore_ter_4" name="sore_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menganjurkan tirah baring :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Menganjurkan melakukan aktivitas secara bertahap :</span>
<span id="sore_edu_2" name="sore_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Menganjurkan menghubungi perawat jika tanda dan gejala kelelahan tidak berkurang :</span>
<span id="sore_edu_3" name="sore_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Mengajarkan strategi koping untuk mengurangi kelelahan :</span>
<span id="sore_edu_4" name="sore_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Berkolaborasi dengan ahli gizi tentang cara meningkatkan asupan makanan :</span>
<span id="sore_kol_1" name="sore_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_2"
name="signature_title_2"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_2"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_2"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_2"
name="signature_image_2"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_2"
name="signature_name_2"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Mengidentifikasi gangguan fungsi tubuh yang mengakibatkan kelelahan :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Memonitor kelelahan fisik dan emosional :</span>
<span id="malam_obs_2" name="malam_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memonitor pola dan jam tidur. Jumlah jam tidur :</span>
<input type="text" id="malam_obs_3" name="malam_obs_3"
class="form-text text-underline input-line" minlength="5" style="width: 80px" /> jam
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Memonitor lokasi dan ketidaknyamanan selama melakukan aktivitas :</span>
<span id="malam_obs_4" name="malam_obs_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menyediakan lingkungan nyaman dan rendah stimulus :</span>
<span id="malam_ter_1" name="malam_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Melakukan latihan rentang gerak pasif dan aktif :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Memberikan aktivitas distraksi yang menenangkan :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Fasilitasi duduk disisi tempat tidur, jika tidak dapat berpindah atau berjalan :</span>
<span id="malam_ter_4" name="malam_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Menganjurkan tirah baring :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">2. Menganjurkan melakukan aktivitas secara bertahap :</span>
<span id="malam_edu_2" name="malam_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">3. Menganjurkan menghubungi perawat jika tanda dan gejala kelelahan tidak berkurang :</span>
<span id="malam_edu_3" name="malam_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">4. Mengajarkan strategi koping untuk mengurangi kelelahan :</span>
<span id="malam_edu_4" name="malam_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">1. Berkolaborasi dengan ahli gizi tentang cara meningkatkan asupan makanan :</span>
<span id="malam_kol_1" name="malam_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input
type="text"
id="signature_title_3"
name="signature_title_3"
data-title="TTD Dokter / Penata Anestesi"
class="form-text text-underline"
maxlength="50"
value="Dokter / Penata Anestesi"
style="text-align: center;"
>
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label
for="signature_image_3"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;"
class="print-signature"
>
<img
id="preview-selected-signature_image_3"
src="/img/icon/sign-here.svg"
style="max-width: 100px; max-height: 60px; object-fit: contain;"
/>
</label>
<input
type="file"
id="signature_image_3"
name="signature_image_3"
accept="image/*"
style="display: none"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input
type="text"
id="signature_name_3"
name="signature_name_3"
data-title="Nama, Tanda tangan"
class="form-text text-underline"
maxlength="50"
value="Nama, Tanda tangan"
style="text-align: center;"
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
manajemen-hipoglikemi.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Manajemen Hipoglikemi</div>
<div>(I.15506)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi tanda dan gejala hipoglikemia :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemungkinan penyebab hipoglikemia :</span>
<span id="pagi_obs_2" name="pagi_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan karbohidrat sederhana :</span>
<span id="pagi_ter_1" name="pagi_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan akses IV :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menghubungi layanan medis :</span>
<span id="pagi_ter_4" name="pagi_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan membawa karbohidrat sederhana setiap saat :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan memakai identitas darurat yang tepat :</span>
<span id="pagi_edu_2" name="pagi_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan monitor kadar glukosa darah :</span>
<span id="pagi_edu_3" name="pagi_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan interaksi antara diet, insulin/agen oral, dan olahraga :</span>
<span id="pagi_edu_4" name="pagi_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan pengelolaan hipoglikemia :</span>
<span id="pagi_edu_5" name="pagi_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian dekstrose :</span>
<span id="pagi_kol_1" name="pagi_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian glucagon :</span>
<span id="pagi_kol_2" name="pagi_kol_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi tanda dan gejala hipoglikemia :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemungkinan penyebab hipoglikemia :</span>
<span id="sore_obs_2" name="sore_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan karbohidrat sederhana :</span>
<span id="sore_ter_1" name="sore_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan akses IV :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menghubungi layanan medis :</span>
<span id="sore_ter_4" name="sore_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan membawa karbohidrat sederhana setiap saat :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan memakai identitas darurat yang tepat :</span>
<span id="sore_edu_2" name="sore_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan monitor kadar glukosa darah :</span>
<span id="sore_edu_3" name="sore_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan interaksi antara diet, insulin/agen oral, dan olahraga :</span>
<span id="sore_edu_4" name="sore_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan pengelolaan hipoglikemia :</span>
<span id="sore_edu_5" name="sore_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian dekstrose :</span>
<span id="sore_kol_1" name="sore_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian glucagon :</span>
<span id="sore_kol_2" name="sore_kol_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi tanda dan gejala hipoglikemia :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi kemungkinan penyebab hipoglikemia :</span>
<span id="malam_obs_2" name="malam_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memberikan karbohidrat sederhana :</span>
<span id="malam_ter_1" name="malam_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan kepatenan jalan nafas :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mempertahankan akses IV :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menghubungi layanan medis :</span>
<span id="malam_ter_4" name="malam_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan membawa karbohidrat sederhana setiap saat :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan memakai identitas darurat yang tepat :</span>
<span id="malam_edu_2" name="malam_edu_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan monitor kadar glukosa darah :</span>
<span id="malam_edu_3" name="malam_edu_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menjelaskan interaksi antara diet, insulin/agen oral, dan olahraga :</span>
<span id="malam_edu_4" name="malam_edu_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengajarkan pengelolaan hipoglikemia :</span>
<span id="malam_edu_5" name="malam_edu_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
<!-- Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #388e3c">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian dekstrose :</span>
<span id="malam_kol_1" name="malam_kol_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Berkolaborasi dalam pemberian glucagon :</span>
<span id="malam_kol_2" name="malam_kol_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<table class="table-full">
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
manajemen-hipotermia.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.signature-area{
padding-top: 40px;
}
.form-textarea {
width: 100%;
font-size: 11px;
resize: none;
overflow: hidden;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.question-text {
display: inline;
}
/* Input line as contenteditable span */
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
box-sizing: border-box;
display: inline;
vertical-align: bottom;
line-height: 1.4;
padding: 0;
margin: 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
}
/* For empty state - add visible space with border */
.input-line[contenteditable="true"]:empty::before {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
}
/* For textarea variant */
textarea.input-line {
resize: none;
overflow: hidden;
vertical-align: middle;
border-bottom: 1px dotted #000;
}
/* Hide dotted underline when printing */
@media print {
.input-line[contenteditable="true"] {
border-bottom: none;
}
.input-line[contenteditable="true"]:empty::before {
content: none;
}
textarea.input-line {
border-bottom: none;
}
/* Prevent shift header from separating from its content */
.shift-header-row {
page-break-after: avoid;
page-break-inside: avoid;
}
}
.date-td {
width: 16.1%;
}
.date-td-content {
width: 16.1%;
}
.day-td-content {
width: 72.5%;
}
.leopold-text {
width: 81%;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
/* Paged.js page configuration */
@page {
size: A4;
margin: 15mm 10mm 15mm 10mm;
}
/* Prevent awkward breaks */
.shift-section {
page-break-inside: avoid;
}
.date-td {
width: 15%;
}
.date-td-content {
width: 15%;
}
.day-td-content {
width: 67%;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-no-border {
border: none !important;
}
.leopold-text {
width: 77%;
}
.form-textarea {
width: 100%;
resize: none;
border: none;
}
.input-line {
border: none;
outline: none;
font-size: 12px;
}
.signature-area {
min-height: 40px;
}
}
</style>
<!-- Template for continuation header (hidden, used by Paged.js) -->
<template id="continuation-header-template">
<tr class="shift-header-row" style="text-align:center" data-shift="{{SHIFT_NAME}}">
<th style="padding: 8px" class="border-right date-td border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">{{SHIFT_NAME}}</span>
</th>
<th style="padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</template>
<form id="dynamicForm">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<div class="page-header no-border-top">
<table class="table-full border-sides">
<tr style="text-align: center;">
<td>
<div style="padding: 5px" class="form-title">
Implementasi Keperawatan
</div>
</td>
</tr>
</table>
</div>
<div class="page-content">
<!-- Info Section -->
<table class="table-full border">
<tr>
<td style="width: 25%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="hari_perawatan" name="hari_perawatan"
class="form-text text-underline input-line" style="width: 100px;" />
</td>
</tr>
</table>
</td>
<td style="width: 40%; padding: 10px" class="border-right">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input type="text" id="ruang_rawat" name="ruang_rawat"
class="form-text text-underline input-line" style="width: 180px" />
</td>
</tr>
</table>
</td>
<td style="
width: 35%;
padding: 10px;
vertical-align: middle;
">
<div><span class="bold">Kode I :</span></div>
<div>Manajemen Hipotermia</div>
<div>(I.14507)</div>
</td>
</tr>
</table>
<!-- Main Table -->
<table class="table-full border no-border-top">
<thead>
<!-- Header Row -->
<tr class="shift-header-row" style="text-align: center" data-shift="PAGI">
<th style="width: 15%; padding: 4px" class="border-right border-bottom">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="width: 72%; padding: 8px" class="border-right border-bottom">
<span class="bold">PAGI</span>
</th>
<th style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
</thead>
<tbody class="shift-section" data-shift="PAGI">
<!-- PAGI -->
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right">
<textarea id="hari_tanggal_jam_pagi" name="hari_tanggal_jam_pagi" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor suhu tubuh :</span>
<span id="pagi_obs_1" name="pagi_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi penyebab hipotermia :</span>
<span id="pagi_obs_2" name="pagi_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala akibat hipotermia :</span>
<span id="pagi_obs_3" name="pagi_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang hangat (mis: mengatur suhu ruangan, inkubator) :</span>
<span id="pagi_ter_1" name="pagi_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengganti pakaian atau linen yang basah :</span>
<span id="pagi_ter_2" name="pagi_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan pasif (mis: selimut, menutup kepala, pakaian tebal) :</span>
<span id="pagi_ter_3" name="pagi_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif eksternal (mis: kompres hangat, selimut hangat, model perawatan kangguru) :</span>
<span id="pagi_ter_4" name="pagi_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif internal (mis: infus cairan hangat) :</span>
<span id="pagi_ter_5" name="pagi_ter_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan makan/minum yang hangat :</span>
<span id="pagi_edu_1" name="pagi_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_atas_pagi" name="ttd_label_atas_pagi" class="form-text print-no-border"
maxlength="50" placeholder="Perawat/Bidan" style="text-align: center; border: none;" />
</td>
</tr>
<tr>
<td>
<div class="signature-area"></div>
</td>
</tr>
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_bawah_pagi" name="ttd_label_bawah_pagi" class="form-text print-no-border"
maxlength="50" placeholder="(.........................)" style="text-align: center;border: none;" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- SORE Section -->
<tbody class="shift-section" data-shift="SORE">
<tr class="shift-header-row" style="text-align:center" data-shift="SORE">
<th style="width: 14.1%;padding: 8px"
class="border-right date-td border-bottom only-print-after-first-border">
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">SORE</span>
</th>
<th style="width: 21.7%; padding: 8px"
class="border-bottom only-print-after-first-border">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_sore" name="hari_tanggal_jam_sore" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor suhu tubuh :</span>
<span id="sore_obs_1" name="sore_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi penyebab hipotermia :</span>
<span id="sore_obs_2" name="sore_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala akibat hipotermia :</span>
<span id="sore_obs_3" name="sore_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang hangat (mis: mengatur suhu ruangan, inkubator) :</span>
<span id="sore_ter_1" name="sore_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengganti pakaian atau linen yang basah :</span>
<span id="sore_ter_2" name="sore_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan pasif (mis: selimut, menutup kepala, pakaian tebal) :</span>
<span id="sore_ter_3" name="sore_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif eksternal (mis: kompres hangat, selimut hangat, model perawatan kangguru) :</span>
<span id="sore_ter_4" name="sore_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif internal (mis: infus cairan hangat) :</span>
<span id="sore_ter_5" name="sore_ter_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan makan/minum yang hangat :</span>
<span id="sore_edu_1" name="sore_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-edu input-line"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_atas_sore" name="ttd_label_atas_sore" class="form-text print-no-border"
maxlength="50" placeholder="Perawat/Bidan" style="
text-align: center;
border: none;
border-bottom: 1px solid #ccc;
" />
</td>
</tr>
<tr>
<td>
<div class="signature-area"></div>
</td>
</tr>
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_bawah_sore" name="ttd_label_bawah_sore" class="form-text print-no-border"
maxlength="50" placeholder="(.........................)" style="
text-align: center;
border: none;
border-bottom: 1px solid #ccc;
" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="shift-section" data-shift="MALAM">
<tr class="shift-header-row" style="text-align: center" data-shift="MALAM">
<th style="width: 14.1%;padding: 8px" class="border-right date-td border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
<!-- END -->
</th>
<th style="padding: 8px" class="border-right border-bottom">
<span class="bold">MALAM</span>
</th>
<th style="width: 21.7%; padding: 8px" class="border-bottom only-print-after-first-border">
<!-- SHOULD ONLY SHOW IN PAGE 2 <. IF PAGE > 1 -->
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
<!-- END -->
</th>
</tr>
<tr>
<td style="padding: 8px; vertical-align: top;padding-top:10px;" class="border-right date-td-content">
<textarea id="hari_tanggal_jam_malam" name="hari_tanggal_jam_malam" class="form-textarea print-no-border auto-resize-textarea" placeholder=""></textarea>
</td>
<td style="padding: 8px; vertical-align: top" class="border-right border-bottom day-td-content">
<table class="table-full" style="font-size:11px">
<!-- Observasi -->
<tr>
<td>
<span class="bold" style="color: #d32f2f">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor suhu tubuh :</span>
<span id="malam_obs_1" name="malam_obs_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengidentifikasi penyebab hipotermia :</span>
<span id="malam_obs_2" name="malam_obs_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Memonitor tanda dan gejala akibat hipotermia :</span>
<span id="malam_obs_3" name="malam_obs_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #d32f2f">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menyediakan lingkungan yang hangat (mis: mengatur suhu ruangan, inkubator) :</span>
<span id="malam_ter_1" name="malam_ter_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Mengganti pakaian atau linen yang basah :</span>
<span id="malam_ter_2" name="malam_ter_2" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan pasif (mis: selimut, menutup kepala, pakaian tebal) :</span>
<span id="malam_ter_3" name="malam_ter_3" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif eksternal (mis: kompres hangat, selimut hangat, model perawatan kangguru) :</span>
<span id="malam_ter_4" name="malam_ter_4" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Melakukan penghangatan aktif internal (mis: infus cairan hangat) :</span>
<span id="malam_ter_5" name="malam_ter_5" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line"></span>
</td>
</tr>
<!-- Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold" style="color: #1976d2">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
<span class="question-text">- Menganjurkan makan/minum yang hangat :</span>
<span id="malam_edu_1" name="malam_edu_1" contenteditable="true" data-placeholder="true"
class="form-text text-underline input-line input-edu"></span>
</td>
</tr>
</table>
</td>
<!-- Kolom Paraf/TTD - ROWSPAN untuk semua shift -->
<td style="width: 18%; padding: 8px; vertical-align: top">
<table class="table-full">
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_atas_malam" name="ttd_label_atas_malam" class="form-text print-no-border"
maxlength="50" placeholder="Perawat/Bidan" style="
text-align: center;
border: none;
border-bottom: 1px solid #ccc;
" />
</td>
</tr>
<tr>
<td>
<div class="signature-area"></div>
</td>
</tr>
<tr>
<td style="text-align: center">
<input type="text" id="ttd_label_bawah_malam" name="ttd_label_bawah_malam" class="form-text print-no-border"
maxlength="50" placeholder="(.........................)" style="
text-align: center;
border: none;
border-bottom: 1px solid #ccc;
" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Raw
manajemen-jalan-napas.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN JALAN NAPAS
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Manajemen Jalan Napas</span></div>
<div>(I 01011)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memonitor pola napas : frekuensi
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="3"
/> x/menit, kedalaman
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="15"
/> usaha Napas
<input
type="text"
id="pagi_obs_3"
name="pagi_obs_3"
class="form-text text-underline input-line hide"
maxlength="20"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Memonitor bunyi napas tambahan (mis. gurgling, mengi, wheezing, ronkhi kering):
<input
type="text"
id="pagi_obs_4"
name="pagi_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Memonitor sputum : jumlah
<input
type="text"
id="pagi_obs_5"
name="pagi_obs_5"
class="form-text text-underline input-line hide"
maxlength="3"
/> cc, warna
<input
type="text"
id="pagi_obs_6"
name="pagi_obs_6"
class="form-text text-underline input-line hide"
maxlength="15"
/> aroma
<input
type="text"
id="pagi_obs_7"
name="pagi_obs_7"
class="form-text text-underline input-line hide"
maxlength="15"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mempertahankan kepatenan jalan napas dengan head-tilt dan chin-lift (jaw-thrust jika curiga trauma servikal) :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengatur posisi semi Fowler atau Fowler :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan minum air hangat
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line hide"
maxlength="5"
/> cc
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan fisioterapi dada :
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Melakukan penghisapan lendir ≤ 15 detik :
<input
type="text"
id="pagi_ter_5"
name="pagi_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Melakukan hiperoksigenasi sebelum penghisapan endotrakeal :
<input
type="text"
id="pagi_ter_6"
name="pagi_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Mengeluarkan sumbatan benda padat dengan forsep McGill :
<input
type="text"
id="pagi_ter_7"
name="pagi_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memberikan oksigen
<input
type="text"
id="pagi_ter_8"
name="pagi_ter_8"
class="form-text text-underline input-line hide"
maxlength="5"
/> liter/menit
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menganjurkan asupan cairan 2000 ml/hari, jika tidak kontra indikasi :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan teknik relaksasi napas dalam/teknik batuk efektif :
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi pemberian bronkodilator, ekspektoran, mukolitik :
<input
type="text"
id="pagi_kol_1"
name="pagi_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memonitor pola napas : frekuensi
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="3"
/> x/menit, kedalaman
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="15"
/> usaha Napas
<input
type="text"
id="sore_obs_3"
name="sore_obs_3"
class="form-text text-underline input-line hide"
maxlength="20"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Memonitor bunyi napas tambahan (mis. gurgling, mengi, wheezing, ronkhi kering):
<input
type="text"
id="sore_obs_4"
name="sore_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Memonitor sputum : jumlah
<input
type="text"
id="sore_obs_5"
name="sore_obs_5"
class="form-text text-underline input-line hide"
maxlength="3"
/> cc, warna
<input
type="text"
id="sore_obs_6"
name="sore_obs_6"
class="form-text text-underline input-line hide"
maxlength="15"
/> aroma
<input
type="text"
id="sore_obs_7"
name="sore_obs_7"
class="form-text text-underline input-line hide"
maxlength="15"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mempertahankan kepatenan jalan napas dengan head-tilt dan chin-lift (jaw-thrust jika curiga trauma servikal) :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengatur posisi semi Fowler atau Fowler :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan minum air hangat
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line hide"
maxlength="5"
/> cc
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan fisioterapi dada :
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Melakukan penghisapan lendir ≤ 15 detik :
<input
type="text"
id="sore_ter_5"
name="sore_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Melakukan hiperoksigenasi sebelum penghisapan endotrakeal :
<input
type="text"
id="sore_ter_6"
name="sore_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Mengeluarkan sumbatan benda padat dengan forsep McGill :
<input
type="text"
id="sore_ter_7"
name="sore_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memberikan oksigen
<input
type="text"
id="sore_ter_8"
name="sore_ter_8"
class="form-text text-underline input-line hide"
maxlength="5"
/> liter/menit
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menganjurkan asupan cairan 2000 ml/hari, jika tidak kontra indikasi :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan teknik relaksasi napas dalam/teknik batuk efektif :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi pemberian bronkodilator, ekspektoran, mukolitik :
<input
type="text"
id="sore_kol_1"
name="sore_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memonitor pola napas : frekuensi
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="3"
/> x/menit, kedalaman
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="15"
/> usaha Napas
<input
type="text"
id="malam_obs_3"
name="malam_obs_3"
class="form-text text-underline input-line hide"
maxlength="20"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Memonitor bunyi napas tambahan (mis. gurgling, mengi, wheezing, ronkhi kering):
<input
type="text"
id="malam_obs_4"
name="malam_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Memonitor sputum : jumlah
<input
type="text"
id="malam_obs_5"
name="malam_obs_5"
class="form-text text-underline input-line hide"
maxlength="3"
/> cc, warna
<input
type="text"
id="malam_obs_6"
name="malam_obs_6"
class="form-text text-underline input-line hide"
maxlength="15"
/> aroma
<input
type="text"
id="malam_obs_7"
name="malam_obs_7"
class="form-text text-underline input-line hide"
maxlength="15"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mempertahankan kepatenan jalan napas dengan head-tilt dan chin-lift (jaw-thrust jika curiga trauma servikal) :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengatur posisi semi Fowler atau Fowler :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memberikan minum air hangat
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line hide"
maxlength="5"
/> cc
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Melakukan fisioterapi dada :
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Melakukan penghisapan lendir ≤ 15 detik :
<input
type="text"
id="malam_ter_5"
name="malam_ter_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
6. Melakukan hiperoksigenasi sebelum penghisapan endotrakeal :
<input
type="text"
id="malam_ter_6"
name="malam_ter_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
7. Mengeluarkan sumbatan benda padat dengan forsep McGill :
<input
type="text"
id="malam_ter_7"
name="malam_ter_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
8. Memberikan oksigen
<input
type="text"
id="malam_ter_8"
name="malam_ter_8"
class="form-text text-underline input-line hide"
maxlength="5"
/> liter/menit
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menganjurkan asupan cairan 2000 ml/hari, jika tidak kontra indikasi :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengajarkan teknik relaksasi napas dalam/teknik batuk efektif :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menjelaskan aktivitas seksualitas setelah mengikuti program KB :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Berkolaborasi pemberian bronkodilator, ekspektoran, mukolitik :
<input
type="text"
id="malam_kol_1"
name="malam_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
manajemen-nyeri-akut.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN NYERI AKUT
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Manajemen Nyeri Akut</span></div>
<div>(I 08238)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="pagi_obs_3"
name="pagi_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="pagi_obs_4"
name="pagi_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="pagi_obs_5"
name="pagi_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="pagi_obs_6"
name="pagi_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_7"
name="pagi_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_8"
name="pagi_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_9"
name="pagi_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_10"
name="pagi_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_11"
name="pagi_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_12"
name="pagi_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="pagi_edu_4"
name="pagi_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="pagi_edu_5"
name="pagi_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="pagi_kol_1"
name="pagi_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="sore_obs_3"
name="sore_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="sore_obs_4"
name="sore_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="sore_obs_5"
name="sore_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="sore_obs_6"
name="sore_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_7"
name="sore_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_8"
name="sore_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_9"
name="sore_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_10"
name="sore_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_11"
name="sore_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_12"
name="sore_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="sore_edu_4"
name="sore_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="sore_edu_5"
name="sore_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="sore_kol_1"
name="sore_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="malam_obs_3"
name="malam_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="malam_obs_4"
name="malam_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="malam_obs_5"
name="malam_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="malam_obs_6"
name="malam_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_7"
name="malam_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_8"
name="malam_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_9"
name="malam_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_10"
name="malam_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_11"
name="malam_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_12"
name="malam_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="malam_edu_4"
name="malam_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="malam_edu_5"
name="malam_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="malam_kol_1"
name="malam_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
manajemen-nyeri-kronis.html
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #FAFAFA;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #D3D3D3;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Tables */
.table-full {
width: 100%;
border-collapse: collapse;
}
.content-table td {
border: 1px solid;
}
/* Borders */
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-sides {
border-right: 1px solid;
border-left: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
/* Inputs */
.form-title {
font-weight: 800;
font-size: 16px;
}
.form-text {
text-align: start;
border: none;
outline: none;
width: 100%;
}
.form-textarea {
width: 100%;
resize: none;
text-align: center;
}
/* Spacing */
.small-padding {
padding: 5px;
}
.medium-padding {
padding: 10px;
}
.bold {
font-weight: 800;
}
.text-underline {
border-bottom: 1px solid #D3D3D3;
}
.dynamic-width {
width: var(--w, 100%);
}
.print-signature:hover::after {
content: "";
position: absolute;
left: 70%;
z-index: 999;
background-image: url('/img/icon/tooltip-change-signature.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 80px;
}
/* Print Mode */
@media print {
html, body {
margin: 0;
padding: 0;
}
* {
font: 10.5px !important;
}
/* Adjust padding to align content correctly across print pages */
#dynamicForm {
background-color: white;
padding: 0px;
}
.dynamic-form {
width: 180mm; /* Adjust to fit content width in A4 */
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #ffffff;
}
.form-title {
font-size: 14.5px !important;
}
#letterHead {
width: 180mm;
}
.page-container {
margin: 0;
padding: 0;
border: initial;
border-radius: initial;
width: 100%;
max-width: 180mm;
box-shadow: initial;
/* background-color: red; /* for testing pagination cutoff */
}
/* Optional visual border for each printed page */
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.form-textarea {
width: 92%;
border: none;
outline: none;
resize: none;
text-align: center;
}
.dynamic-width {
width: var(--w-print, 100%);
}
input.hide[value=""] {
display: none;
}
/* hide placeholder sign-here on print preview */
img[src*="sign-here.svg"] {
display: none !important;
}
}
</style>
<form id="dynamicForm">
<div class="dynamic-form">
<div class="page-container">
<div class="letter-head">
<!-- Letter head content will be inserted here via useEffect -->
</div>
<!-- Form Title Section -->
<div class="page-header">
<table class="table-full border-sides print-border-top">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN NYERI KRONIS
</div>
</td>
</tr>
</table>
</div>
<!-- Form Content Section 1 -->
<table class="table-full border">
<tr>
<td style="width: 25%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 45%">Hari Perawatan</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="hari_perawatan"
name="hari_perawatan"
class="form-text text-underline input-line"
style="width: 100px"
maxlength="16"
/>
</td>
</tr>
</table>
</td>
<td style="width: 40%;" class="border-right medium-padding">
<table class="table-full">
<tr>
<td style="width: 30%">Ruang Rawat</td>
<td style="width: 5%">:</td>
<td>
<input
type="text"
id="ruang_rawat"
name="ruang_rawat"
class="form-text text-underline input-line"
style="width: 180px"
maxlength="29"
/>
</td>
</tr>
</table>
</td>
<td style="width: 35%; vertical-align: middle;" class="medium-padding">
<div>Kode I :</div>
<div><span class="bold">Manajemen Nyeri Kronis</span></div>
<div>(I 08238)</div>
</td>
</tr>
</table>
<!-- Form Content Section 2 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">PAGI</span>
</td>
<td style="width: 18%; padding: 8px" class="border-bottom">
<span class="bold">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Pagi -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_pagi"
name="textarea_pagi"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="pagi_obs_1"
name="pagi_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="pagi_obs_2"
name="pagi_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="pagi_obs_3"
name="pagi_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="pagi_obs_4"
name="pagi_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="pagi_obs_5"
name="pagi_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="pagi_obs_6"
name="pagi_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="pagi_obs_7"
name="pagi_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi pengetahuan dan keyakinan tentang nyeri :
<input
type="text"
id="pagi_obs_8"
name="pagi_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi pengaruh budaya terhadap respon nyeri :
<input
type="text"
id="pagi_obs_9"
name="pagi_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi pengaruh nyeri pada kualitas hidup :
<input
type="text"
id="pagi_obs_10"
name="pagi_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Memonitor keberhasilan terapi komplementer yang sudah diberikan :
<input
type="text"
id="pagi_obs_11"
name="pagi_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Memonitor efek samping penggunaan analgetik :
<input
type="text"
id="pagi_obs_12"
name="pagi_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="pagi_ter_1"
name="pagi_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="pagi_ter_2"
name="pagi_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="pagi_ter_3"
name="pagi_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="pagi_ter_4"
name="pagi_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="pagi_edu_1"
name="pagi_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="pagi_edu_2"
name="pagi_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="pagi_edu_3"
name="pagi_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="pagi_edu_4"
name="pagi_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="pagi_edu_5"
name="pagi_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="pagi_kol_1"
name="pagi_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_1" name="signature_title_1"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_1" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_1" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_1" name="signature_image_1" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_1" name="signature_name_1"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 3 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">SORE</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Sore -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_sore"
name="textarea_sore"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="sore_obs_1"
name="sore_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="sore_obs_2"
name="sore_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="sore_obs_3"
name="sore_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="sore_obs_4"
name="sore_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="sore_obs_5"
name="sore_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="sore_obs_6"
name="sore_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="sore_obs_7"
name="sore_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi pengetahuan dan keyakinan tentang nyeri :
<input
type="text"
id="sore_obs_8"
name="sore_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi pengaruh budaya terhadap respon nyeri :
<input
type="text"
id="sore_obs_9"
name="sore_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi pengaruh nyeri pada kualitas hidup :
<input
type="text"
id="sore_obs_10"
name="sore_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Memonitor keberhasilan terapi komplementer yang sudah diberikan :
<input
type="text"
id="sore_obs_11"
name="sore_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Memonitor efek samping penggunaan analgetik :
<input
type="text"
id="sore_obs_12"
name="sore_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="sore_ter_1"
name="sore_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="sore_ter_2"
name="sore_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="sore_ter_3"
name="sore_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="sore_ter_4"
name="sore_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="sore_edu_1"
name="sore_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="sore_edu_2"
name="sore_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="sore_edu_3"
name="sore_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="sore_edu_4"
name="sore_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="sore_edu_5"
name="sore_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="sore_kol_1"
name="sore_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_2" name="signature_title_2"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_2" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_2" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_2" name="signature_image_2" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_2" name="signature_name_2"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Page Break -->
<div class="new-page"></div>
<!-- Header for Print Preview -->
<table class="table-full border print-border-top print-only">
<tr style="text-align: center;">
<td>
<div class="form-title small-padding">
MANAJEMEN ELIMINASI URIN
</div>
</td>
</tr>
</table>
<!-- Form Content Section 4 -->
<table class="table-full border no-border-top">
<tr style="text-align: center">
<td
style="width: 12%; padding: 8px"
class="border-right no-border-bottom print-border-bottom"
>
<span class="bold print-only">HARI,<br />TANGGAL<br />& JAM</span>
</td>
<td
style="width: 70%; padding: 8px"
class="border-right border-bottom"
>
<span class="bold">MALAM</span>
</td>
<td style="width: 18%; padding: 8px" class="no-border-bottom print-border-bottom">
<span class="bold print-only ">PARAF, NAMA<br />PERAWAT/BIDAN</span>
</td>
</tr>
<!-- Section Malam -->
<tr>
<td
style="width: 10%; padding: 8px; vertical-align: top"
class="border-right"
rowspan="6"
>
<textarea
id="textarea_malam"
name="textarea_malam"
class="form-textarea"
rows="20"
cols="15"
placeholder=""
maxlength="15"
></textarea>
</td>
<td
style="width: 70%; padding: 8px; vertical-align: top"
class="border-right border-bottom"
>
<table class="table-full" style="font-size: 11px">
<!-- Section Observasi -->
<tr>
<td>
<span class="bold">Observasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Mengidentifikasi karakteristik Nyeri<br />P
<input
type="text"
id="malam_obs_1"
name="malam_obs_1"
class="form-text text-underline input-line hide"
maxlength="72"
/> Q
<input
type="text"
id="malam_obs_2"
name="malam_obs_2"
class="form-text text-underline input-line hide"
maxlength="72"
/> R
<input
type="text"
id="malam_obs_3"
name="malam_obs_3"
class="form-text text-underline input-line hide"
maxlength="72"
/> S
<input
type="text"
id="malam_obs_4"
name="malam_obs_4"
class="form-text text-underline input-line hide"
maxlength="72"
/> T
<input
type="text"
id="malam_obs_5"
name="malam_obs_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
2. Mengidentifikasi respons nyeri non verbal :
<input
type="text"
id="malam_obs_6"
name="malam_obs_6"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
3. Mengidentifikasi faktor yang memperberat dan memperingan nyeri :
<input
type="text"
id="malam_obs_7"
name="malam_obs_7"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
4. Mengidentifikasi pengetahuan dan keyakinan tentang nyeri :
<input
type="text"
id="malam_obs_8"
name="malam_obs_8"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
5. Mengidentifikasi pengaruh budaya terhadap respon nyeri :
<input
type="text"
id="malam_obs_9"
name="malam_obs_9"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
6. Mengidentifikasi pengaruh nyeri pada kualitas hidup :
<input
type="text"
id="malam_obs_10"
name="malam_obs_10"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
7. Memonitor keberhasilan terapi komplementer yang sudah diberikan :
<input
type="text"
id="malam_obs_11"
name="malam_obs_11"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
8. Memonitor efek samping penggunaan analgetik :
<input
type="text"
id="malam_obs_12"
name="malam_obs_12"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Terapeutik -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Terapeutik :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Memberikan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="malam_ter_1"
name="malam_ter_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Mengontrol lingkungan yang memperberat rasa nyeri :
<input
type="text"
id="malam_ter_2"
name="malam_ter_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Memfasilitasi istirahat dan tidur :
<input
type="text"
id="malam_ter_3"
name="malam_ter_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Mempertimbangkan jenis dan sumber nyeri dalam pemilihan strategi meredakan nyeri :
<input
type="text"
id="malam_ter_4"
name="malam_ter_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Edukasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Edukasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Menjelaskan penyebab, periode, dan pemicu nyeri :
<input
type="text"
id="malam_edu_1"
name="malam_edu_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
2. Menjelaskan strategi meredakan nyeri :
<input
type="text"
id="malam_edu_2"
name="malam_edu_2"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
3. Menganjurkan memonitor nyeri secara mandiri :
<input
type="text"
id="malam_edu_3"
name="malam_edu_3"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
4. Menganjurkan menggunakan analgetik secara tepat :
<input
type="text"
id="malam_edu_4"
name="malam_edu_4"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<tr>
<td style="padding: 2px 0">
5. Menganjurkan teknik non farmakologis untuk mengurangi rasa nyeri :
<input
type="text"
id="malam_edu_5"
name="malam_edu_5"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
<!-- Section Kolaborasi -->
<tr>
<td style="padding-top: 8px">
<span class="bold">Kolaborasi :</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0 2px 0;">
1. Kolaborasi pemberian analgetik :
<input
type="text"
id="malam_kol_1"
name="malam_kol_1"
class="form-text text-underline input-line hide"
maxlength="72"
/>
</td>
</tr>
</table>
</td>
<!-- Form Content Section TTD -->
<td
style="width: 20%; padding: 8px; vertical-align: top"
rowspan="6"
>
<table class="table-full">
<tr>
<td style="padding: 0px 10px;">
<input type="text" id="signature_title_3" name="signature_title_3"
data-title="TTD Perawat/Bidan" class="form-text text-underline"
maxlength="50" value="Perawat/Bidan" style="text-align: center;">
</td>
</tr>
<tr>
<td style="cursor: pointer; width: 120px; height: 80px; position: relative;">
<label for="signature_image_3" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; text-align: center;" class="print-signature">
<img id="preview-selected-signature_image_3" src="/img/icon/sign-here.svg" style="max-width: 100px; max-height: 60px; object-fit: contain;"/>
</label>
<input type="file" id="signature_image_3" name="signature_image_3" accept="image/*" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="signature_name_3" name="signature_name_3"
data-title="Nama, Tanda tangan" class="form-text text-underline"
maxlength="50" value="Nama, Tanda tangan" style="text-align: center;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
Raw
observasi-bayi-prematur.html
This file has been truncated, but you can view the full file.
<style>
* {
box-sizing: border-box;
font: 12px "Tahoma";
}
#dynamicForm {
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
background-color: #fafafa;
}
.page-container {
width: 210mm;
min-height: 297mm;
padding: 4mm;
margin: auto;
border: 1px solid #d3d3d3;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.table-full {
width: 100%;
border-collapse: collapse;
}
.form-textarea {
width: 91%;
resize: none;
}
.text-underline {
border-bottom: 1px solid #d3d3d3;
}
.border {
border: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-sides {
border-left: 1px solid;
border-right: 1px solid;
}
.no-border-top {
border-top: none !important;
}
.no-border-bottom {
border-bottom: none !important;
}
.no-border-left {
border-left: none !important;
}
.no-border-right {
border-right: none !important;
}
.form-title {
font-weight: 800;
font-size: 16px;
}
.bold {
font-weight: 800;
}
.medical_device_table td {
border: 1px solid;
}
input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 3px;
border: 1px solid #b0b0b0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
}
input[type="checkbox"]:checked {
appearance: auto;
}
.english-text,
.english-text-tab-paragraph {
font-style: italic;
color: #333;
font-size: 11px;
}
.english-text-tab-paragraph {
padding-left: 0;
text-indent: 0;
display: block;
}
.english-text-title {
font-style: italic;
}
.tab-text-1 {
text-indent: 12px;
}
.tab-text-2 {
text-indent: 31px;
}
.bullet-row {
display: flex;
align-items: flex-start;
}
.bullet-row .bullet {
width: 20px;
}
.input-line {
border: none;
border-bottom: 1px dotted #000;
outline: none;
font-size: 12px;
}
.form-textarea {
overflow: hidden;
}
.width-650 {
width: 650px;
}
.width-630 {
width: 630px;
}
.width-580 {
width: 580px;
}
.width-550 {
width: 550px;
}
.width-475 {
width: 475px;
}
.width-300 {
width: 300px;
}
.width-250 {
width: 250px;
}
.width-275 {
width: 275px;
}
.width-270 {
width: 270px;
}
.width-175 {
width: 175px;
}
.width-170 {
width: 170px;
}
.width-90 {
width: 90px;
}
.tab-paragraph {
padding-left: 30px;
text-indent: -20px;
}
.relation-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.checkbox-group {
display: flex;
gap: 5px;
}
.checkbox-group label {
display: flex;
align-items: center;
font-size: 12px;
}
.checkbox-group input[type="checkbox"] {
margin: 0;
margin-right: -10px;
width: 14px;
height: 14px;
}
.margin-top-xs {
margin-top: 5px;
}
.margin-top-sm {
margin-top: 10px;
}
.margin-top-md {
margin-top: 10px;
}
.align-center {
text-align: center;
}
@media print {
html,
body {
margin: 0;
padding: 0;
}
#dynamicForm {
background-color: #fff;
padding: 0;
}
.dynamic-form {
width: 180mm;
height: 297mm;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
background: #fff;
}
#letterHead {
width: 175mm;
}
.page-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
width: auto;
box-shadow: none;
}
.print-border-top {
border-top: 1px solid !important;
}
.print-border-bottom {
border-bottom: 1px solid !important;
}
.width-475 {
width: 440px;
}
.width-650 {
width: 550px;
}
.width-630 {
width: 530px;
}
.width-580 {
width: 480px;
}
.width-550 {
width: 450px;
}
.width-300 {
width: 200px;
}
.width-270 {
width: 170px;
}
.form-textarea {
Raw
pemantauan-detak-jantung-janin.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
pencegahan-aspirasi.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
pencegahan-infeksi.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
pencegahan-perdarahan.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
pencegahan-syok.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
perawatan-perkembangan.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
promosi-antisipasi-keluarga.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
promosi-citra-tubuh.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment