step 39 : order page desktop, mb result desktop

v1/js/order.js

@@ -25,6 +25,12 @@ document.addEventListener('alpine:init', () => {
             this.datepickerValueOD = this.formatDate(today);
             this.getNoOfDaysOD();
 
+            this.e_selectedDayOD = today.getDate();
+            this.e_monthOD = today.getMonth();
+            this.e_yearOD = today.getFullYear();
+            this.e_datepickerValueOD = this.formatDate(today);
+            this.e_getNoOfDaysOD();
+
             // DOB
             this.selectedDayDOB = today.getDate();
             this.monthDOB = today.getMonth();
@@ -32,6 +38,12 @@ document.addEventListener('alpine:init', () => {
             this.datepickerValueDOB = this.formatDate(today);
             this.getNoOfDaysDOB();
 
+            this.e_selectedDayDOB = today.getDate();
+            this.e_monthDOB = today.getMonth();
+            this.e_yearDOB = today.getFullYear();
+            this.e_datepickerValueDOB = this.formatDate(today);
+            this.e_getNoOfDaysDOB();
+
             // multiple pemeriksaan add
             this.filteredPemeriksaan = [...this.dataPemeriksaan];
 
@@ -63,6 +75,14 @@ document.addEventListener('alpine:init', () => {
         no_of_daysOD: [],
         blankdaysOD: [],
 
+        e_showDatepickerOD: false,
+        e_selectedDayOD: null,
+        e_datepickerValueOD: '',
+        e_monthOD: 0,
+        e_yearOD: 0,
+        e_no_of_daysOD: [],
+        e_blankdaysOD: [],
+
         // DOB Variabless
         showDatepickerDOB: false,
         selectedDayDOB: null,
@@ -72,6 +92,14 @@ document.addEventListener('alpine:init', () => {
         no_of_daysDOB: [],
         blankdaysDOB: [],
 
+        e_showDatepickerDOB: false,
+        e_selectedDayDOB: null,
+        e_datepickerValueDOB: '',
+        e_monthDOB: 0,
+        e_yearDOB: 0,
+        e_no_of_daysDOB: [],
+        e_blankdaysDOB: [],
+
         MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
         DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
 
@@ -211,6 +239,45 @@ document.addEventListener('alpine:init', () => {
             this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
         },
 
+        // edit order date
+        e_prevMonthOD() {
+            if (this.e_monthOD === 0) {
+                this.e_yearOD--;
+                this.e_monthOD = 11;
+            } else {
+                this.e_monthOD--;
+            }
+            this.e_getNoOfDaysOD();
+        },
+
+        e_nextMonthOD() {
+            if (this.e_monthOD === 11) {
+                this.e_yearOD++;
+                this.e_monthOD = 0;
+            } else {
+                this.e_monthOD++;
+            }
+            this.e_getNoOfDaysOD();
+        },
+
+        e_setDateOD(date) {
+            let selectedDate = new Date(this.e_yearOD, this.e_monthOD, date);
+            this.e_selectedDayOD = date;
+            this.e_datepickerValueOD = this.formatDate(selectedDate);
+            this.e_showDatepickerOD = false;
+        },
+
+        e_isSelectedOD(date) {
+            return this.e_selectedDayOD === date;
+        },
+
+        e_getNoOfDaysOD() {
+            let daysInMonth = new Date(this.e_yearOD, this.e_monthOD + 1, 0).getDate();
+            let dayOfWeek = new Date(this.e_yearOD, this.e_monthOD, 1).getDay();
+            this.e_blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.e_no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
         // Dob Functions
         prevMonthDOB() {
             if (this.monthDOB === 0) {
@@ -250,6 +317,45 @@ document.addEventListener('alpine:init', () => {
             this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
         },
 
+        // edit dob
+        e_prevMonthDOB() {
+            if (this.e_monthDOB === 0) {
+                this.e_yearDOB--;
+                this.e_monthDOB = 11;
+            } else {
+                this.e_monthDOB--;
+            }
+            this.e_getNoOfDaysDOB();
+        },
+
+        e_nextMonthDOB() {
+            if (this.e_monthDOB === 11) {
+                this.e_yearDOB++;
+                this.e_monthDOB = 0;
+            } else {
+                this.e_monthDOB++;
+            }
+            this.e_getNoOfDaysDOB();
+        },
+
+        e_setDateDOB(date) {
+            let selectedDate = new Date(this.e_yearDOB, this.e_monthDOB, date);
+            this.e_selectedDayDOB = date;
+            this.e_datepickerValueDOB = this.formatDate(selectedDate);
+            this.e_showDatepickerDOB = false;
+        },
+
+        e_isSelectedDOB(date) {
+            return this.e_selectedDayDOB === date;
+        },
+
+        e_getNoOfDaysDOB() {
+            let daysInMonth = new Date(this.e_yearDOB, this.e_monthDOB + 1, 0).getDate();
+            let dayOfWeek = new Date(this.e_yearDOB, this.e_monthDOB, 1).getDay();
+            this.e_blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.e_no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
         // datepicker
 
         // multiple select
@@ -298,7 +404,36 @@ document.addEventListener('alpine:init', () => {
             this.selectedPemeriksaan.splice(index, 1);
         },
 
+        // edit multiple
+        openPemeriksaanEdit: false,
+        e_searchPemeriksaan: "",
+        e_selectedPemeriksaan: [],
+        e_filteredItemPemeriksaan: [],
+        e_filterItemPemeriksaan() {
+            if (this.e_searchPemeriksaan.trim() === '') {
+                this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
+            } else {
+                this.e_filteredPemeriksaan = this.dataPemeriksaan.filter((item) =>
+                    item.namaPemeriksaan.toLowerCase().includes(this.e_searchPemeriksaan.toLowerCase())
+                );
+            }
+        },
+
+        e_ItemPemeriksaan(item) {
+            if (!this.e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
+                this.e_selectedPemeriksaan.push(item);
+                this.objFormEdit.pemeriksaan.push(item);
+            }
+            this.e_searchPemeriksaan = "";
+            this.e_filterItemPemeriksaan();
+        },
+
+        e_removeItemPemeriksaan(index) {
+            this.e_selectedPemeriksaan.splice(index, 1);
+        },
+
         // multiple select
+
         showDialogAdd: false,
         showDialogEdit: false,
         loadingVerifikasi: false,
@@ -307,11 +442,11 @@ document.addEventListener('alpine:init', () => {
         dataOrder: [
             {
                 idOrder: 1,
-                date: '02/03/2025',
+                date: '01/03/2025',
                 mrn: 'P.2024.205.1',
                 sid: 'SRK1234SK',
                 name: 'Joko Santoso',
-                dob: '01/03/2000',
+                dob: '09/05/2008',
                 pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
                 dataPemeriksaan: [
                     {
@@ -414,9 +549,12 @@ document.addEventListener('alpine:init', () => {
         ],
 
         mrnAdd: '',
+        e_mrn: '',
         datePickerValueAdd: '',
         sidAdd: '',
+        e_sid: '',
         nameAdd: '',
+        e_name: '',
         dobAdd: '',
         pemeriksaanAdd: [],
         objForm: {
@@ -427,6 +565,14 @@ document.addEventListener('alpine:init', () => {
             dob: '',
             pemeriksaan: [],
         },
+        objFormEdit: {
+            date: '',
+            mrn: '',
+            sid: '',
+            name: '',
+            dob: '',
+            pemeriksaan: [],
+        },
         // 1. Inisialisasi End
         // 2. Fungsi Start
         closeDialog() {
@@ -461,36 +607,61 @@ document.addEventListener('alpine:init', () => {
             this.selectedInstrumentEdit = item;
         },
         onChangeMrnAdd() {
-            this.objForm.assayCode = this.mrnAdd;
+            this.objForm.mrn = this.mrnAdd;
+        },
+        onChangeMrnEdit() {
+            this.objFormEdit.mrn = this.e_mrn;
         },
         onChangeSidAdd() {
             this.objForm.sid = this.sidAdd;
         },
+        onChangeSidEdit() {
+            this.objFormEdit.sid = this.e_sid;
+        },
         onChangeNameAdd() {
             this.objForm.name = this.nameAdd;
         },
+        onChangeNameEdit() {
+            this.objFormEdit.name = this.e_name;
+        },
         onChangeInstrumentMobile(item) {
             this.openInstrumentSearchMobile = false;
             // this.selectedInstrument = item;
             this.selectedInstrument = { ...item };
         },
         openModalEdit(item) {
-            this.selectedInstrumentEdit = {
+            // Order date edit
-                idInstrument: item.idInstrument,
+            let selectedDate = new Date(item.date.split('/').reverse().join('-'));
-                namaInstrument: item.namaInstrument
+            this.e_selectedDayOD = selectedDate.getDate();
-            }
+            this.e_monthOD = selectedDate.getMonth();
+            this.e_yearOD = selectedDate.getFullYear();
+            this.e_datepickerValueOD = this.formatDate(selectedDate);
+            this.e_getNoOfDaysOD();
 
-            this.assayCodeEdit = item.assayCode
+            // mrn
-            this.decimalFontEdit = item.decimalFont
+            this.e_mrn = item.mrn
-            this.formulaEdit = item.formula
+
+            // sid
+            this.e_sid = item.sid
+
+            // name
+            this.e_name = item.name
+
+            // DOB edit
+            let selectedDateDOB = new Date(item.dob.split('/').reverse().join('-'));
+            this.e_selectedDayDOB = selectedDateDOB.getDate();
+            this.e_monthDOB = selectedDateDOB.getMonth();
+            this.e_yearDOB = selectedDateDOB.getFullYear();
+            this.e_datepickerValueDOB = this.formatDate(selectedDateDOB);
+            this.e_getNoOfDaysDOB();
+
+            // multiple pemeriksaan
+            this.e_selectedPemeriksaan  = [...item.dataPemeriksaan];
+            this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
 
             this.showDialogEdit = !this.showDialogEdit;
         },
         closeDialogEdit() {
-            this.loadingVerifikasi = false;
-            this.isErrorVerifikasi = false;
-            this.isVerifikasiDone = false;
-            this.hasilVerifikasi = ''
             this.showDialogEdit = !this.showDialogEdit;
         },
         editMobilePage(item) {

v1/order.html

@@ -665,129 +665,241 @@
                     <!-- body -->
                     <div class="flex flex-1 bg-white px-6 py-5">
                         <div class="relative w-full">
-                            <!-- instrument -->
+                            <!-- Order Date -->
-                            <fieldset @click.outside="openInstrument = false"
+                            <label for="Order Date"
-                                class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
-                                <span
-                                    x-text="selectedInstrumentEdit.idInstrument != -1 ? 'Instrument' : selectedInstrumentEdit.namaInstrument"
-                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
-                                </span>
-                                <button @click="openInstrument = !openInstrument" type="button"
-                                    class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                    <span x-text="selectedInstrumentEdit.namaInstrument" class="text-left"></span>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                        :class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
-                                        stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M19 9l-7 7-7-7" />
-                                    </svg>
-                                </button>
-                            </fieldset>
-                            <div x-show="openInstrument"
-                                class="absolute bg-white w-full border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto">
-                                <ul>
-                                    <template x-if="dataInstrument.length === 0">
-                                        <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                    </template>
-                                    <template x-for="item in dataInstrument" :key="item.idInstrument">
-                                        <li :id="item.idInstrument" @click="onChangeInstrument(item)"
-                                            class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                            <button x-text="item.namaInstrument"></button>
-                                        </li>
-                                    </template>
-                                </ul>
-                            </div>
-                            <!-- space 20 -->
-                            <div class="mb-0 lg:mb-5"></div>
-
-                            <!-- Assay Code -->
-                            <label for="Assay Code"
                                 class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
-                                <input type="text" id="Assay Code" x-model="assayCodeEdit" autocomplete="off"
+                                <input type="text" id="Order Date" autocomplete="off" x-model="e_datepickerValueOD"
+                                    @click="e_showDatepickerOD = !e_showDatepickerOD" readonly
                                     class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                    placeholder="Assay Code" />
+                                    placeholder="Order Date" />
 
                                 <span
                                     class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
-                                    Assay Code
+                                    Order Date
                                 </span>
                             </label>
 
-                            <!-- space 20 -->
+                            <!-- Datepicker Order Date -->
-                            <div class="mb-0 lg:mb-5"></div>
+                            <div class="bg-white shadow-md mt-12 rounded-lg p-4 absolute top-0 left-0 w-[18rem]"
-
+                                x-show="e_showDatepickerOD" @click.away="e_showDatepickerOD = false">
-                            <!-- Decimal Font -->
+                                <div class="flex justify-between items-center mb-2">
-                            <label for="Decimal"
+                                    <button @click="e_prevMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
-                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                                <input type="text" id="Decimal" x-model="decimalFontEdit"
+                                            stroke="currentColor">
-                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    placeholder="Decimal" autocomplete="off" />
+                                                d="M15 19l-7-7 7-7" />
-
+                                        </svg>
-                                <span
+                                    </button>
-                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    <span class="text-lg font-bold text-gray-800"
-                                    Decimal
+                                        x-text="MONTH_NAMES[e_monthOD] + ' ' + e_yearOD"></span>
-                                </span>
+                                    <button @click="e_nextMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
-                            </label>
+                                        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-
+                                            stroke="currentColor">
-                            <!-- space 20 -->
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            <div class="mb-0 lg:mb-5"></div>
+                                                d="M9 5l7 7-7 7" />
-
+                                        </svg>
-                            <label for="Formula"
+                                    </button>
-                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                </div>
-
+                                <div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800">
-                                <textarea id="Formula" x-model="formulaEdit" autocomplete="off"
+                                    <template x-for="day in DAYS">
-                                    class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
+                                        <div x-text="day"></div>
-                                    placeholder="Formula"></textarea>
+                                    </template>
-
+                                </div>
-                                <span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all 
+                                <div class="grid grid-cols-7 text-sm">
-                                peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0 
+                                    <template x-for="date in e_no_of_daysOD">
-                                peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
+                                        <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
-                                    :class="formulaEdit.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
+                                            :class="{'bg-blue-500 text-white': e_isSelectedOD(date)}"
-                                    Formula
+                                            @click="e_setDateOD(date)">
-                                </span>
+                                            <span x-text="date"></span>
-                            </label>
+                                        </div>
-
+                                    </template>
-                            <!-- btn verifikasi -->
+                                </div>
-                            <div class="flex justify-end items-end">
-                                <button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false 
-                                        ? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
-                                        : 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
-                                    ">
-
-                                    <!-- Loading Spinner -->
-                                    <div x-show="loadingVerifikasi"
-                                        class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
-                                    </div>
-
-                                    <span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
-                                </button>
                             </div>
 
                             <!-- space 20 -->
                             <div class="mb-0 lg:mb-5"></div>
 
-                            <!-- hasil verifikasi -->
+                            <!-- MRN -->
+                            <label for="MRN"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                <input type="text" id="MRN" autocomplete="off" x-model="e_mrn"
+                                    @change="onChangeMrnEdit()"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="MRN" />
+
+                                <span
+                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    MRN
+                                </span>
+                            </label>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- SID -->
+                            <label for="SID"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                <input type="text" id="SID" autocomplete="off" x-model="e_sid"
+                                    @change="onChangeSidEdit()"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="SID" />
+
+                                <span
+                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    SID
+                                </span>
+                            </label>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- Name -->
+                            <label for="Name"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                <input type="text" id="Name" autocomplete="off" x-model="e_name"
+                                    @change="onChangeNameEdit()"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Name" />
+
+                                <span
+                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    Name
+                                </span>
+                            </label>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- dob -->
+                            <label for="DOB"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                <input type="text" id="DOB" autocomplete="off" x-model="e_datepickerValueDOB"
+                                    @click="e_showDatepickerDOB = !e_showDatepickerDOB" readonly
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="DOB" />
+
+                                <span
+                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    DOB
+                                </span>
+                            </label>
+
+                            <div class="bg-white shadow-md mt-12 rounded-lg p-4 absolute top-0 left-0 w-[18rem]"
+                                x-show="e_showDatepickerDOB" @click.away="e_showDatepickerDOB = false">
+                                <div class="flex justify-between items-center mb-2">
+                                    <button @click="e_prevMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
+                                        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
+                                            stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M15 19l-7-7 7-7" />
+                                        </svg>
+                                    </button>
+                                    <span class="text-lg font-bold text-gray-800"
+                                        x-text="MONTH_NAMES[e_monthDOB] + ' ' + e_yearDOB"></span>
+                                    <button @click="e_nextMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
+                                        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
+                                            stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M9 5l7 7-7 7" />
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800">
+                                    <template x-for="day in DAYS">
+                                        <div x-text="day"></div>
+                                    </template>
+                                </div>
+                                <div class="grid grid-cols-7 text-sm">
+                                    <template x-for="date in e_no_of_daysDOB">
+                                        <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                            :class="{'bg-blue-500 text-white': e_isSelectedDOB(date)}"
+                                            @click="e_setDateDOB(date)">
+                                            <span x-text="date"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- pemeriksaan -->
+                            <label for="Pemeriksaan"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                                <input type="text" id="Pemeriksaan" autocomplete="off" x-model="e_searchPemeriksaan"
+                                    @click="openPemeriksaanEdit = true" @input="e_filterItemPemeriksaan()"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Cari Pemeriksaan" />
+
+                                <span
+                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                                    Cari Pemeriksaan
+                                </span>
+                            </label>
+
                             <div>
-                                <template x-if="isErrorVerifikasi === false">
+                                <!-- List Dipilih -->
-                                    <p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
+                                <div class="flex flex-wrap gap-2 mt-2">
-                                </template>
+                                    <template x-for="(item, index) in e_selectedPemeriksaan" :key="item.idPemeriksaan">
-                                <template x-if="isErrorVerifikasi === true">
+                                        <div
-                                    <p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
+                                            class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
-                                </template>
+                                            <span x-text="item.namaPemeriksaan"></span>
+                                            <button @click="e_removeItemPemeriksaan(index)"
+                                                class="ml-2 focus:outline-none">
+                                                <svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none"
+                                                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        d="M6 18L18 6M6 6l12 12"></path>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </template>
+                                </div>
+
+                                <!-- Dropdown List -->
+                                <div x-show="openPemeriksaanEdit" @click.away="openPemeriksaanEdit = false"
+                                    class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
+                                    <template x-if="e_filteredPemeriksaan.length === 0">
+                                        <div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
+                                    </template>
+                                    <template x-for="item in e_filteredPemeriksaan" :key="item.idPemeriksaan">
+                                        <div @click="e_ItemPemeriksaan(item)"
+                                            class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
+                                            :class="e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
+                                            <span x-text="item.namaPemeriksaan"></span>
+                                            <svg x-show="e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)"
+                                                class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor"
+                                                stroke-width="2" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7">
+                                                </path>
+                                            </svg>
+                                        </div>
+                                    </template>
+                                </div>
                             </div>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
                         </div>
                     </div>
                     <!-- footer -->
                     <div class="h-10 px-4 py-2 mb-5">
-                        <div class="flex items-end justify-end">
+                        <div class="flex justify-between items-center">
-                            <button @click="closeDialogEdit()" class="mr-3 text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200 
+                            <button @click="closeDialogEdit()" class="text-[#1976D2] hover:text-white font-bold text-sm uppercase transition duration-200 
-                                hover:bg-[#FF5252] px-4 py-2 rounded-md">
+                                hover:bg-[#1976D2] px-4 py-2 rounded-md">
-                                Cancel
+                                Batalkan
-                            </button>
-                            <button class="text-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 
-                                hover:bg-[#1976D2] hover:text-white">
-                                Save
                             </button>
+
+                            <div class="flex items-center space-x-3">
+                                <button @click="closeDialogEdit()" class="text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200 
+                                    hover:bg-[#FF5252] px-4 py-2 rounded-md">
+                                    Cancel
+                                </button>
+                                <button @click="save()" class="text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 
+                                    hover:bg-[#388E3C]">
+                                    Save
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>

v1/result.html

@@ -380,7 +380,7 @@
             <div class="mb-2"></div>
 
             <!-- Sample ID Inputan -->
-            <div class="bg-white w-full px-3 py-2 lg:hidden lg:mb-0">
+            <div class="bg-white w-full px-3 py-2 mb-6 lg:hidden lg:mb-0">
                 <label for="Sample ID"
                     class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
                     <input type="text" id="Sample ID" x-model="sampleID"