update
This commit is contained in:
@@ -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
|
||||
Reference in New Issue
Block a user