ryan/careit-fixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ryan
2026-02-06 14:22:35 +07:00
commit bd70440c71
185 changed files with 69518 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backendcareit_v4/testingFE/billingtestwithAPI/billingPasienTest.html
+199
View File
@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Billing Pasien BPJS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="card shadow-lg">
<div class="card-header">
<h2 class="mb-0 text-white">Form Billing Pasien BPJS</h2>
</div>
<div class="card-body">
<form id="bpjsForm">
<!-- === DOKTER === -->
<div class="mb-3">
<label class="form-label">Nama Dokter</label>
<div class="searchable-select-wrapper" id="wrapper_nama_dokter">
<input type="text" class="searchable-select-input" id="nama_dokter" readonly placeholder="Dokter...">
<span class="searchable-select-arrow">▼</span>
<div class="searchable-select-dropdown" id="dropdown_nama_dokter">
<div class="searchable-select-search">
<input type="text" placeholder="Cari..." id="search_nama_dokter" autocomplete="off">
</div>
<div class="searchable-select-options" id="options_nama_dokter"></div>
</div>
</div>
<select class="form-select d-none" id="select_nama_dokter" name="nama_dokter"></select>
</div>
<!-- NAMA PASIEN -->
<div class="mb-3 position-relative">
<label class="form-label">Nama Pasien</label>
<input type="text" class="form-control" id="nama_pasien" autocomplete="off">
<div id="list_pasien" class="autocomplete-list"></div>
<input type="hidden" id="id_pasien" name="id_pasien">
</div>
<!-- Auto Fill atau Manual -->
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Jenis Kelamin</label>
<input type="text" class="form-control" id="jenis_kelamin" placeholder="Auto fill atau isi manual">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Usia</label>
<input type="number" class="form-control" id="usia" placeholder="Auto fill atau isi manual">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Ruangan</label>
<div class="searchable-select-wrapper" id="wrapper_ruangan">
<input type="text" class="searchable-select-input" id="ruangan" readonly placeholder="-- Pilih Ruangan --">
<span class="searchable-select-arrow">▼</span>
<div class="searchable-select-dropdown" id="dropdown_ruangan">
<div class="searchable-select-search">
<input type="text" placeholder="Cari..." id="search_ruangan" autocomplete="off">
</div>
<div class="searchable-select-options" id="options_ruangan"></div>
</div>
</div>
<select class="form-select d-none" id="select_ruangan" name="ruangan"></select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Kelas</label>
<select class="form-select" id="kelas" name="kelas">
<option value="">-- Pilih Kelas --</option>
<option value="1">Kelas 1</option>
<option value="2">Kelas 2</option>
<option value="3">Kelas 3</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Cara Bayar</label>
<select class="form-select" id="cara_bayar" name="cara_bayar">
<option value="">-- Pilih Cara Bayar --</option>
<option value="BPJS">BPJS</option>
<option value="UMUM">Umum</option>
</select>
</div>
<!-- Tanggal Keluar diisi oleh Admin Billing, bukan di form dokter -->
</div>
<!-- TINDAKAN -->
<div class="mb-3">
<label class="form-label">Tindakan RS</label>
<div class="searchable-select-wrapper multi-select" id="wrapper_tarif_rs">
<div class="searchable-select-input" id="tarif_rs" placeholder="-- Pilih --">
<input type="text" id="input_tarif_rs" placeholder="Tindakan..." autocomplete="off">
</div>
<span class="searchable-select-arrow">▼</span>
<div class="searchable-select-dropdown" id="dropdown_tarif_rs">
<div class="searchable-select-search">
<input type="text" placeholder="Cari..." id="search_tarif_rs" autocomplete="off">
</div>
<div class="searchable-select-options" id="options_tarif_rs"></div>
</div>
</div>
<select class="form-select d-none" id="select_tarif_rs" name="tarif_rs" multiple></select>
</div>
<!-- ICD -->
<div class="mb-3">
<label class="form-label">ICD 9</label>
<div class="searchable-select-wrapper multi-select" id="wrapper_icd9">
<div class="searchable-select-input" id="icd9" placeholder="-- Pilih --">
<input type="text" id="input_icd9" placeholder="-- Pilih --" autocomplete="off">
</div>
<span class="searchable-select-arrow">▼</span>
<div class="searchable-select-dropdown" id="dropdown_icd9">
<div class="searchable-select-search">
<input type="text" placeholder="Cari..." id="search_icd9" autocomplete="off">
</div>
<div class="searchable-select-options" id="options_icd9"></div>
</div>
</div>
<select class="form-select d-none" id="select_icd9" name="icd9" multiple></select>
</div>
<div class="mb-3">
<label class="form-label">ICD 10</label>
<div class="searchable-select-wrapper multi-select" id="wrapper_icd10">
<div class="searchable-select-input" id="icd10" placeholder="-- Pilih --">
<input type="text" id="input_icd10" placeholder="-- Pilih --" autocomplete="off">
</div>
<span class="searchable-select-arrow">▼</span>
<div class="searchable-select-dropdown" id="dropdown_icd10">
<div class="searchable-select-search">
<input type="text" placeholder="Cari..." id="search_icd10" autocomplete="off">
</div>
<div class="searchable-select-options" id="options_icd10"></div>
</div>
</div>
<select class="form-select d-none" id="select_icd10" name="icd10" multiple></select>
</div>
<!-- RIWAYAT BILLING AKTIF (TINDAKAN & ICD SEBELUMNYA) -->
<div class="mb-4">
<label class="form-label fw-bold">Riwayat Tindakan & ICD (Billing Aktif)</label>
<div id="billing_history_info" class="small text-muted mb-2">
Belum ada data yang dimuat. Pilih pasien untuk melihat riwayat.
</div>
<div class="row">
<div class="col-md-4">
<h6 class="fw-semibold">Tindakan RS</h6>
<ul id="history_tindakan_rs" class="list-group small"></ul>
</div>
<div class="col-md-4">
<h6 class="fw-semibold">ICD 9</h6>
<ul id="history_icd9" class="list-group small"></ul>
</div>
<div class="col-md-4">
<h6 class="fw-semibold">ICD 10</h6>
<ul id="history_icd10" class="list-group small"></ul>
</div>
</div>
</div>
<!-- TOTAL TARIF RS -->
<div class="mb-3">
<label class="form-label">Total Tarif RS</label>
<div class="input-group">
<span class="input-group-text">Rp</span>
<input type="text" class="form-control" id="total_tarif_rs" name="total_tarif_rs" readonly placeholder="0">
</div>
<small class="text-muted">Total akan dihitung otomatis berdasarkan tindakan yang dipilih</small>
</div>
<div id="formAlert" class="alert d-none" role="alert"></div>
<div class="d-grid gap-2 mt-4">
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary btn-lg">
💾 Simpan Data
</button>
<button type="button" id="saveDraftBtn" class="btn btn-outline-secondary btn-lg">💾 Save Draft</button>
<button type="button" id="clearDraftBtn" class="btn btn-outline-danger btn-lg">🗑️ Clear Draft</button>
<div id="draftStatus" class="align-self-center ms-2 text-muted" style="font-size:0.95rem"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- App script: loads dropdowns, autocomplete and form handlers -->
<script src="script.js"></script>
</body>
</html>
backendcareit_v4/testingFE/billingtestwithAPI/script.js
+1405
View File
File diff suppressed because it is too large Load Diff
backendcareit_v4/testingFE/billingtestwithAPI/styles.css
+616
View File
@@ -0,0 +1,616 @@
/* ============= GLOBAL STYLES ============= */
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #0dcaf0;
--light-bg: #f8f9fa;
--border-color: #dee2e6;
--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--border-radius: 0.5rem;
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* ============= CARD STYLES ============= */
.card {
border: none;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
background: white;
overflow: hidden;
transition: var(--transition);
}
.card:hover {
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
padding: 1.5rem;
border: none;
}
.card-body {
padding: 2rem;
}
h2 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 2rem;
text-align: center;
}
/* ============= FORM STYLES ============= */
.form-label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.form-control,
.form-select {
border: 2px solid var(--border-color);
border-radius: 0.375rem;
padding: 0.625rem 0.75rem;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
outline: none;
}
.form-control:disabled {
background-color: #e9ecef;
opacity: 0.6;
}
/* ============= BUTTON STYLES ============= */
.btn {
border-radius: 0.375rem;
padding: 0.625rem 1.5rem;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
box-shadow: 0 4px 6px rgba(13, 110, 253, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(13, 110, 253, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
/* ============= AUTOCOMPLETE STYLES ============= */
.autocomplete-list {
position: absolute;
z-index: 9999;
background: white;
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
width: 100%;
max-height: 250px;
overflow-y: auto;
display: none;
box-shadow: var(--shadow-lg);
margin-top: 0.25rem;
}
.autocomplete-list.show {
display: block;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.autocomplete-item {
padding: 0.75rem 1rem;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: var(--transition);
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover {
background: linear-gradient(90deg, #e3f2fd 0%, #f5f5f5 100%);
padding-left: 1.25rem;
}
.autocomplete-item.text-muted {
color: var(--secondary-color);
font-style: italic;
}
.autocomplete-item.text-danger {
color: var(--danger-color);
font-weight: 500;
}
/* ============= SEARCHABLE DROPDOWN STYLES ============= */
.searchable-select-wrapper {
position: relative;
}
.searchable-select-input {
width: 100%;
padding: 0.625rem 2.5rem 0.625rem 0.75rem;
border: 2px solid var(--border-color);
border-radius: 0.375rem;
font-size: 1rem;
line-height: 1.5;
background-color: #fff;
cursor: pointer;
transition: var(--transition);
}
.searchable-select-input:hover {
border-color: var(--primary-color);
}
.searchable-select-input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.searchable-select-input.searching {
cursor: text;
border-color: var(--primary-color);
}
.searchable-select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1050;
background: white;
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
margin-top: 0.25rem;
max-height: 250px;
overflow: hidden;
display: none;
box-shadow: var(--shadow-lg);
animation: slideDown 0.3s ease;
}
.searchable-select-dropdown.show {
display: block;
}
.searchable-select-search {
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: sticky;
top: 0;
z-index: 10;
}
.searchable-select-search input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 2px solid var(--border-color);
border-radius: 0.375rem;
font-size: 0.9rem;
transition: var(--transition);
}
.searchable-select-search input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.searchable-select-options {
max-height: 200px;
overflow-y: auto;
}
.searchable-select-options::-webkit-scrollbar {
width: 8px;
}
.searchable-select-options::-webkit-scrollbar-track {
background: #f1f1f1;
}
.searchable-select-options::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
.searchable-select-options::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
.searchable-select-option {
padding: 0.5rem 0.75rem;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: var(--transition);
font-size: 0.9rem;
line-height: 1.4;
}
.searchable-select-option:last-child {
border-bottom: none;
}
.searchable-select-option:hover,
.searchable-select-option.highlighted {
background: linear-gradient(90deg, #e3f2fd 0%, #f5f5f5 100%);
padding-left: 1rem;
}
.searchable-select-option.selected {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
font-weight: 600;
}
.searchable-select-option.selected::after {
content: " ✓";
float: right;
font-weight: bold;
}
.searchable-select-arrow {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: transform 0.3s ease;
color: var(--secondary-color);
font-size: 0.875rem;
}
.searchable-select-wrapper.open .searchable-select-arrow {
transform: translateY(-50%) rotate(180deg);
color: var(--primary-color);
}
.searchable-select-no-results {
padding: 1rem;
text-align: center;
color: var(--secondary-color);
font-size: 0.9rem;
font-style: italic;
}
/* ============= MULTI-SELECT STYLES ============= */
.searchable-select-wrapper.multi-select .searchable-select-input {
min-height: 38px;
max-height: 100px;
padding: 0.25rem 2.5rem 0.25rem 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
overflow-y: auto;
}
.searchable-select-wrapper.multi-select .searchable-select-input::-webkit-scrollbar {
width: 6px;
}
.searchable-select-wrapper.multi-select .searchable-select-input::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.searchable-select-wrapper.multi-select .searchable-select-input::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
.searchable-select-wrapper.multi-select .searchable-select-input::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
.searchable-select-wrapper.multi-select .searchable-select-input:empty::before {
content: attr(placeholder);
color: var(--secondary-color);
}
.selected-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
border-radius: 0.25rem;
font-size: 0.8rem;
gap: 0.25rem;
font-weight: 500;
box-shadow: 0 1px 3px rgba(13, 110, 253, 0.3);
max-width: 100%;
word-break: break-word;
line-height: 1.3;
}
.selected-chip .chip-remove {
cursor: pointer;
font-weight: bold;
padding: 0 0.25rem;
border-radius: 0.125rem;
transition: var(--transition);
font-size: 1.1rem;
line-height: 1;
}
.selected-chip .chip-remove:hover {
background-color: rgba(255, 255, 255, 0.3);
transform: scale(1.2);
}
.searchable-select-wrapper.multi-select .searchable-select-input input {
flex: 1;
min-width: 100px;
border: none;
outline: none;
padding: 0.375rem;
background: transparent;
cursor: text;
font-size: 1rem;
}
.searchable-select-wrapper.multi-select .searchable-select-input input:focus {
outline: none;
}
/* ============= LOADING STYLES ============= */
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.15em;
display: inline-block;
}
.select-loading {
position: relative;
}
.select-loading::after {
content: '';
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* ============= RESPONSIVE STYLES ============= */
@media (max-width: 768px) {
body {
padding: 1rem 0.5rem;
}
.card-body {
padding: 1.5rem;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.form-label {
font-size: 0.9rem;
}
.form-control,
.form-select,
.searchable-select-input {
font-size: 0.95rem;
padding: 0.5rem 0.625rem;
}
.btn {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
}
.row {
margin: 0;
}
.row > [class*="col-"] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.mb-3 {
margin-bottom: 1rem !important;
}
}
@media (max-width: 576px) {
body {
padding: 0.5rem;
}
.card-body {
padding: 1rem;
}
h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.searchable-select-dropdown {
max-height: 250px;
}
.autocomplete-list {
max-height: 200px;
}
}
/* ============= UTILITY CLASSES ============= */
.position-relative {
position: relative;
}
.text-center {
text-align: center;
}
.text-muted {
color: var(--secondary-color);
}
.text-danger {
color: var(--danger-color);
}
.shadow-sm {
box-shadow: var(--shadow);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
/* ============= ANIMATIONS ============= */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card {
animation: fadeIn 0.5s ease;
}
/* ============= TOTAL TARIF RS STYLES ============= */
#total_tarif_rs {
font-weight: 700;
color: #198754;
font-size: 1.25rem;
text-align: right;
letter-spacing: 0.5px;
}
.input-group-text {
background: linear-gradient(135deg, var(--success-color) 0%, #146c43 100%);
color: white;
font-weight: 600;
border: none;
}
.input-group .form-control:focus {
border-color: var(--success-color);
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
/* ============= FOCUS VISIBLE ============= */
*:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* ============= PRINT STYLES ============= */
@media print {
body {
background: white;
padding: 0;
}
.card {
box-shadow: none;
border: 1px solid #ddd;
}
.btn,
.searchable-select-arrow,
.autocomplete-list {
display: none;
}
}