This commit is contained in:
Dwi Swandhana
2026-02-21 05:28:47 +07:00
parent 3b61faafbd
commit f7ccea75dc
3 changed files with 387 additions and 115 deletions
@@ -14,7 +14,7 @@
}
.rack-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.rack-box {
@@ -22,21 +22,35 @@
border-radius: 10px;
background: #ffffff;
padding: 12px;
min-height: 180px;
}
.rack-header {
font-weight: 700;
color: #1b3a57;
margin-bottom: 6px;
}
.specimen-preview {
margin: 0;
padding-left: 15px;
font-size: 12px;
}
.specimen-preview li {
margin-bottom: 4px;
}
.slot-grid {
display: grid;
grid-template-columns: repeat(8, minmax(26px, 1fr));
gap: 6px;
margin-top: 10px;
}
.slot-btn {
border: 1px solid #bfd3e8;
background: #f4f9ff;
color: #134068;
border-radius: 5px;
font-size: 11px;
line-height: 1;
padding: 7px 0;
cursor: pointer;
text-align: center;
}
.slot-btn.slot-filled {
background: #fce8e8;
border-color: #e7adad;
color: #8d1f1f;
cursor: not-allowed;
}
.oldest-highlight {
border: 1px solid #ffd58f;
background: #fff8ea;
@@ -104,7 +118,7 @@
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-lg-6">
<div class="card-box ribbon-box">
<div class="ribbon ribbon-primary">Tambah Lemari</div>
<p class="m-b-0"></p>
@@ -131,7 +145,7 @@
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-6">
<div class="card-box ribbon-box">
<div class="ribbon ribbon-info">Tambah Rack</div>
<p class="m-b-0"></p>
@@ -146,80 +160,38 @@
@endforeach
</select>
</div>
<div class="form-group">
<label>Kode Rack</label>
<input type="text" name="code" class="form-control" placeholder="R01" required>
</div>
<div class="form-group">
<label>Nama Rack</label>
<input type="text" name="name" class="form-control" required>
<div class="form-row">
<div class="form-group col-md-6">
<label>Kode Rack</label>
<input type="text" name="code" class="form-control" placeholder="R01" required>
</div>
<div class="form-group col-md-6">
<label>Nama Rack</label>
<input type="text" name="name" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<label>Level</label>
<div class="form-group col-md-3">
<label>Shelf</label>
<input type="number" name="level" class="form-control" min="1" value="1" required>
</div>
<div class="form-group col-6">
<label>Kapasitas</label>
<input type="number" name="capacity" class="form-control" min="0" value="0">
<div class="form-group col-md-3">
<label>Rack No</label>
<input type="number" name="rack_number" class="form-control" min="1" value="1" required>
</div>
<div class="form-group col-md-3">
<label>Box No</label>
<input type="number" name="box_number" class="form-control" min="1" value="1" required>
</div>
<div class="form-group col-md-3">
<label>Jumlah Slot</label>
<input type="number" name="capacity" class="form-control" min="1" value="24" required>
</div>
</div>
<button class="btn btn-info btn-block" type="submit">Simpan Rack</button>
</form>
</div>
</div>
<div class="col-lg-4">
<div class="card-box ribbon-box">
<div class="ribbon ribbon-success">Tambah Spesimen</div>
<p class="m-b-0"></p>
<form method="POST" action="{{ route('biorepository.storeSpecimen') }}">
@csrf
<div class="form-group">
<label>Pilih Rack</label>
<select name="rack_id" class="form-control" required>
<option value="">-- Pilih --</option>
@foreach($rackOptions as $rack)
<option value="{{ $rack->id }}">{{ $rack->cabinet->code ?? '-' }} | {{ $rack->code }} - {{ $rack->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Kode Spesimen</label>
<input type="text" name="specimen_code" class="form-control" placeholder="SP-0001" required>
</div>
<div class="form-group">
<label>Nama Spesimen</label>
<input type="text" name="specimen_name" class="form-control" placeholder="Darah, sputum, urin" required>
</div>
<div class="form-group">
<label>Nama Pasien (Opsional)</label>
<input type="text" name="patient_name" class="form-control">
</div>
<div class="form-row">
<div class="form-group col-6">
<label>Tanggal Ambil</label>
<input type="date" name="collected_at" class="form-control">
</div>
<div class="form-group col-6">
<label>Tanggal Simpan</label>
<input type="date" name="stored_at" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<label>Volume</label>
<input type="text" name="volume" class="form-control" placeholder="2 ml">
</div>
<div class="form-group col-6">
<label>Kondisi Simpan</label>
<input type="text" name="storage_condition" class="form-control" placeholder="-20 C">
</div>
</div>
<button class="btn btn-success btn-block" type="submit">Simpan Spesimen</button>
</form>
</div>
</div>
</div>
<div class="row">
@@ -228,7 +200,7 @@
<h4 class="m-b-15">Spesimen dengan Waktu Simpan Paling Lama</h4>
@if($oldestSpecimen)
<div class="oldest-highlight">
<strong>{{ $oldestSpecimen->specimen_code }}</strong> - {{ $oldestSpecimen->specimen_name }}<br>
<strong>{{ $oldestSpecimen->specimen_code }}</strong> - {{ $oldestSpecimen->bacteria_name ?? $oldestSpecimen->specimen_name }}<br>
Lemari: {{ $oldestSpecimen->cabinet->name ?? '-' }} | Rack: {{ $oldestSpecimen->rack->name ?? '-' }}<br>
Disimpan sejak: {{ $oldestSpecimen->stored_at }} ({{ $oldestStorageDays }} hari)
</div>
@@ -242,35 +214,48 @@
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="m-b-20">Visualisasi Lemari dan Rack</h4>
<h4 class="m-b-20">Visualisasi Lemari, Rack, dan Slot</h4>
<p class="text-muted">Klik slot berwarna biru untuk mengisi spesimen. Slot merah artinya sudah terisi.</p>
@forelse($cabinets as $cabinet)
<div class="cabinet-visual">
<h5 class="m-b-15">{{ $cabinet->code }} - {{ $cabinet->name }} <small class="text-muted">({{ $cabinet->location ?? 'Lokasi belum diisi' }})</small></h5>
<div class="rack-grid">
@forelse($cabinet->racks as $rack)
@php
$slotMap = [];
foreach ($rack->specimens as $item) {
if ($item->slot_number) {
$slotMap[$item->slot_number] = $item;
}
}
$capacity = (int) $rack->capacity;
@endphp
<div class="rack-box">
<div class="rack-header">{{ $rack->code }} - {{ $rack->name }} (Lv. {{ $rack->level }})</div>
<div>Kapasitas: {{ $rack->capacity }}</div>
<div>Total spesimen: {{ $rack->specimens->count() }}</div>
<div class="rack-header">{{ $rack->code }} - {{ $rack->name }}</div>
<div style="font-size:12px;">Shelf {{ $rack->level }} | Rack {{ $rack->rack_number ?? $rack->id }} | Box {{ $rack->box_number ?? 1 }}</div>
<div style="font-size:12px;">Slot: {{ $capacity }} | Terisi: {{ $rack->specimens->count() }}</div>
@if($rack->specimens->count() > 0)
@php
$oldestRackSpecimen = $rack->specimens->first();
$preview = $rack->specimens->take(4);
@endphp
<div class="text-muted" style="font-size:12px; margin-top:4px;">Terlama di rack ini: {{ $oldestRackSpecimen->specimen_code }} ({{ $oldestRackSpecimen->storage_days }} hari)</div>
<div style="margin-top:6px; font-size:12px;"><strong>Preview spesimen:</strong></div>
<ul class="specimen-preview">
@foreach($preview as $sp)
<li>
{{ $sp->specimen_code }} - {{ $sp->specimen_name }}<br>
<span class="text-muted">Simpan {{ $sp->stored_at }} ({{ $sp->storage_days }} hari)</span>
</li>
@endforeach
</ul>
@if($capacity > 0)
<div class="slot-grid">
@for($i = 1; $i <= $capacity; $i++)
@if(isset($slotMap[$i]))
<div class="slot-btn slot-filled" title="{{ $slotMap[$i]->specimen_code }} - {{ $slotMap[$i]->bacteria_name ?? $slotMap[$i]->specimen_name }}">{{ $i }}</div>
@else
<button type="button"
class="slot-btn js-slot"
data-rack-id="{{ $rack->id }}"
data-shelf="{{ $rack->level }}"
data-rackno="{{ $rack->rack_number ?? $rack->id }}"
data-slot="{{ $i }}"
data-box="{{ $rack->box_number ?? 1 }}">
{{ $i }}
</button>
@endif
@endfor
</div>
@else
<div class="text-muted" style="margin-top:8px;">Belum ada spesimen pada rack ini.</div>
<div class="alert alert-light m-b-0 m-t-10">Kapasitas slot belum diatur.</div>
@endif
</div>
@empty
@@ -286,4 +271,129 @@
</div>
</div>
</div>
<div id="modalIsiSlot" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Isi Spesimen ke Slot</h4>
</div>
<form method="POST" action="{{ route('biorepository.storeSpecimen') }}">
@csrf
<div class="modal-body">
<input type="hidden" id="rack_id" name="rack_id">
<div class="form-group m-b-25">
<div class="col-12">
<label>Category Penyimpanan</label>
<select class="form-control" id="kategorisimpan" name="kategorisimpan">
<option value="A">Penyimpanan Suhu Ruang</option>
<option value="B">Penyimpanan Suhu 4 Derajat</option>
<option value="C">Penyimpanan Suhu 20 Derajat</option>
<option value="D">Penyimpanan Suhu 80 Derajat</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-lg-4">
<label>Shelf Nomor</label>
<input type="number" class="form-control" id="shelfnomor" name="shelfnomor" readonly>
</div>
<div class="col-lg-4">
<label>Rack Number</label>
<input type="number" class="form-control" id="raknomor" name="raknomor" readonly>
</div>
<div class="col-lg-4">
<label>Slot Number</label>
<input type="number" class="form-control" id="slotnomor" name="slotnomor" readonly>
</div>
<div class="col-lg-4">
<label>Box Number</label>
<input type="number" class="form-control" id="boxnomor" name="boxnomor" readonly>
</div>
<div class="col-lg-4">
<label>Tube Number</label>
<input type="number" class="form-control" id="tubenomor" name="tubenomor" required>
</div>
<div class="col-lg-4">
<label>Tanggal Simpan</label>
<input type="date" class="form-control" id="stored_at" name="stored_at" value="{{ date('Y-m-d') }}" required>
</div>
</div>
<div class="form-group m-b-25">
<div class="col-12">
<label>Bactery Name</label>
<input type="text" class="form-control" id="nmbakteri" name="nmbakteri" required>
</div>
</div>
<div class="form-group m-b-25">
<div class="col-12">
<label>Strain</label>
<select class="form-control" id="strain" name="strain">
<option value="Gram Negatif">Gram Negatif</option>
<option value="Gram Positif">Gram Positif</option>
</select>
</div>
</div>
<div class="form-group m-b-25">
<div class="col-12">
<label>ATCC (Otomatis dari User Login)</label>
<input type="text" class="form-control" id="atcc" name="atcc" value="{{ Session('nama') }}" readonly>
</div>
</div>
<div class="form-group m-b-0">
<div class="col-12">
<label>Sample Code (Preview Otomatis)</label>
<input type="text" class="form-control" id="samplecodepreview" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary">Simpan Spesimen</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('script')
<script>
function normalizeCode(value) {
return (value || '').toString().toUpperCase().replace(/[^A-Z0-9]/g, '');
}
function buildSampleCodePreview() {
var category = $('#kategorisimpan').val() || '';
var shelf = $('#shelfnomor').val() || '';
var rack = $('#raknomor').val() || '';
var slot = $('#slotnomor').val() || '';
var box = $('#boxnomor').val() || '';
var atcc = normalizeCode($('#atcc').val());
var code = [category, shelf, rack, slot, box, atcc].join('-');
$('#samplecodepreview').val(code);
}
$(document).on('click', '.js-slot', function () {
$('#rack_id').val($(this).data('rack-id'));
$('#shelfnomor').val($(this).data('shelf'));
$('#raknomor').val($(this).data('rackno'));
$('#slotnomor').val($(this).data('slot'));
$('#boxnomor').val($(this).data('box'));
$('#tubenomor').val('');
buildSampleCodePreview();
$('#modalIsiSlot').modal('show');
});
$(document).on('keyup change', '#kategorisimpan, #shelfnomor, #raknomor, #slotnomor, #boxnomor, #atcc', function () {
buildSampleCodePreview();
});
</script>
@endpush