diff --git a/v1/js/order.js b/v1/js/order.js
new file mode 100644
index 0000000..64b3d25
--- /dev/null
+++ b/v1/js/order.js
@@ -0,0 +1,503 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('order', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init() {
+            let today = new Date();
+            this.selectedDaySD = today.getDate();
+            this.month = today.getMonth();
+            this.year = today.getFullYear();
+            // this.datepickerValueSD = this.formatDate(today);
+            this.datepickerValueSD = 'Start Date'
+            this.getNoOfDays();
+            this.selectedDaySD = today.getDate();
+
+            // End Date Functions
+            this.selectedDayED = today.getDate();
+            this.monthED = today.getMonth();
+            this.yearED = today.getFullYear();
+            this.datepickerValueED = 'End Date';
+            this.getNoOfDaysED();
+
+            // Order Date
+            this.selectedDayOD = today.getDate();
+            this.monthOD = today.getMonth();
+            this.yearOD = today.getFullYear();
+            this.datepickerValueOD = this.formatDate(today);
+            this.getNoOfDaysOD();
+
+            // DOB
+            this.selectedDayDOB = today.getDate();
+            this.monthDOB = today.getMonth();
+            this.yearDOB = today.getFullYear();
+            this.datepickerValueDOB = this.formatDate(today);
+            this.getNoOfDaysDOB();
+
+            // multiple pemeriksaan add
+            this.filteredPemeriksaan = [...this.dataPemeriksaan];
+
+        },
+        // 1. Inisialisasi Start
+        // datepicker
+        selectedDaySD: null,
+        showDatepickerSD: false,
+        datepickerValueSD: '',
+        month: 0,
+        year: 0,
+        no_of_days: [],
+        blankdays: [],
+
+        selectedDayED: null,
+        showDatepickerED: false,
+        datepickerValueED: '',
+        monthED: 0,
+        yearED: 0,
+        no_of_daysED: [],
+        blankdaysED: [],
+
+        // Order Date Variables
+        showDatepickerOD: false,
+        selectedDayOD: null,
+        datepickerValueOD: '',
+        monthOD: 0,
+        yearOD: 0,
+        no_of_daysOD: [],
+        blankdaysOD: [],
+
+        // DOB Variabless
+        showDatepickerDOB: false,
+        selectedDayDOB: null,
+        datepickerValueDOB: '',
+        monthDOB: 0,
+        yearDOB: 0,
+        no_of_daysDOB: [],
+        blankdaysDOB: [],
+
+        MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+
+        formatDate(date) {
+            let day = date.getDate().toString().padStart(2, '0');
+            let month = (date.getMonth() + 1).toString().padStart(2, '0');
+            let year = date.getFullYear();
+            return `${day}/${month}/${year}`;
+        },
+
+        prevMonth() {
+            if (this.month === 0) {
+                this.year--;
+                this.month = 11;
+            } else {
+                this.month--;
+            }
+            this.getNoOfDays();
+        },
+
+        nextMonth() {
+            if (this.month === 11) {
+                this.year++;
+                this.month = 0;
+            } else {
+                this.month++;
+            }
+            this.getNoOfDays();
+        },
+
+        getDateValue(date) {
+            let selectedDate = new Date(this.year, this.month, date);
+            this.selectedDaySD = date; // Simpan tanggal yang dipilih
+            this.datepickerValueSD = this.formatDate(selectedDate);
+            this.showDatepickerSD = false;
+        },
+
+        isToday(date) {
+            let today = new Date();
+            let d = new Date(this.year, this.month, date);
+            return today.toDateString() === d.toDateString();
+        },
+
+        isSelected(date) {
+            return this.selectedDaySD === date;
+        },
+
+        getNoOfDays() {
+            let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
+            let dayOfWeek = new Date(this.year, this.month, 1).getDay();
+            this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
+        setDate(date) {
+            let selectedDate = new Date(this.year, this.month, date);
+            this.selectedDaySD = date;
+            this.datepickerValueSD = this.formatDate(selectedDate);
+            this.showDatepickerSD = false;
+        },
+
+        // End Date Functions
+        prevMonthED() {
+            if (this.monthED === 0) {
+                this.yearED--;
+                this.monthED = 11;
+            } else {
+                this.monthED--;
+            }
+            this.getNoOfDaysED();
+        },
+
+        nextMonthED() {
+            if (this.monthED === 11) {
+                this.yearED++;
+                this.monthED = 0;
+            } else {
+                this.monthED++;
+            }
+            this.getNoOfDaysED();
+        },
+
+        setDateED(date) {
+            let selectedDate = new Date(this.yearED, this.monthED, date);
+            this.selectedDayED = date;
+            this.datepickerValueED = this.formatDate(selectedDate);
+            this.showDatepickerED = false;
+        },
+
+        isSelectedED(date) {
+            return this.selectedDayED === date;
+        },
+
+        getNoOfDaysED() {
+            let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
+            let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
+            this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
+        // Order Date Functions
+        prevMonthOD() {
+            if (this.monthOD === 0) {
+                this.yearOD--;
+                this.monthOD = 11;
+            } else {
+                this.monthOD--;
+            }
+            this.getNoOfDaysOD();
+        },
+
+        nextMonthOD() {
+            if (this.monthOD === 11) {
+                this.yearOD++;
+                this.monthOD = 0;
+            } else {
+                this.monthOD++;
+            }
+            this.getNoOfDaysOD();
+        },
+
+        setDateOD(date) {
+            let selectedDate = new Date(this.yearOD, this.monthOD, date);
+            this.selectedDayOD = date;
+            this.datepickerValueOD = this.formatDate(selectedDate);
+            this.showDatepickerOD = false;
+        },
+
+        isSelectedOD(date) {
+            return this.selectedDayOD === date;
+        },
+
+        getNoOfDaysOD() {
+            let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
+            let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
+            this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
+        // Dob Functions
+        prevMonthDOB() {
+            if (this.monthDOB === 0) {
+                this.yearDOB--;
+                this.monthDOB = 11;
+            } else {
+                this.monthDOB--;
+            }
+            this.getNoOfDaysDOB();
+        },
+
+        nextMonthDOB() {
+            if (this.monthDOB === 11) {
+                this.yearDOB++;
+                this.monthDOB = 0;
+            } else {
+                this.monthDOB++;
+            }
+            this.getNoOfDaysDOB();
+        },
+
+        setDateDOB(date) {
+            let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
+            this.selectedDayDOB = date;
+            this.datepickerValueDOB = this.formatDate(selectedDate);
+            this.showDatepickerDOB = false;
+        },
+
+        isSelectedDOB(date) {
+            return this.selectedDayDOB === date;
+        },
+
+        getNoOfDaysDOB() {
+            let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
+            let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
+            this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
+            this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        },
+
+        // datepicker
+
+        // multiple select
+        openPemeriksaanAdd: false,
+        searchPemeriksaan: "",
+        selectedPemeriksaan: [],
+        dataPemeriksaan: [
+            {
+                idPemeriksaan: 1,
+                namaPemeriksaan: 'SGOT'
+            },
+            {
+                idPemeriksaan: 2,
+                namaPemeriksaan: 'SGPT'
+            },
+            {
+                idPemeriksaan: 3,
+                namaPemeriksaan: 'GLOB'
+            },
+            {
+                idPemeriksaan: 4,
+                namaPemeriksaan: 'TBIL'
+            },
+            {
+                idPemeriksaan: 5,
+                namaPemeriksaan: 'Darah Lengkap'
+            },
+        ],
+        filteredItemPemeriksaan: [],
+        filterItemPemeriksaan() {
+            this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
+                item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
+            );
+        },
+
+        addItemPemeriksaan(item) {
+            if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
+                this.selectedPemeriksaan.push(item);
+                this.objForm.pemeriksaan.push(item);
+            }
+            this.searchPemeriksaan = "";
+            this.filterItemPemeriksaan();
+        },
+
+        removeItemPemeriksaan(index) {
+            this.selectedPemeriksaan.splice(index, 1);
+        },
+
+        // multiple select
+        showDialogAdd: false,
+        showDialogEdit: false,
+        loadingVerifikasi: false,
+        isVerifikasiDone: false,
+        MRN_SID: '',
+        dataOrder: [
+            {
+                idOrder: 1,
+                date: '02/03/2025',
+                mrn: 'P.2024.205.1',
+                sid: 'SRK1234SK',
+                name: 'Joko Santoso',
+                dob: '01/03/2000',
+                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
+                dataPemeriksaan: [
+                    {
+                        idPemeriksaan: 1,
+                        namaPemeriksaan: 'SGOT'
+                    },
+                    {
+                        idPemeriksaan: 2,
+                        namaPemeriksaan: 'SGPT'
+                    },
+                    {
+                        idPemeriksaan: 3,
+                        namaPemeriksaan: 'GLOB'
+                    },
+                    {
+                        idPemeriksaan: 4,
+                        namaPemeriksaan: 'TBIL'
+                    },
+                ],
+            },
+            {
+                idOrder: 2,
+                date: '02/03/2025',
+                mrn: 'P.2024.205.1',
+                sid: 'SRK1234SK',
+                name: 'Joko Santoso',
+                dob: '01/03/2000',
+                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
+                dataPemeriksaan: [
+                    {
+                        idPemeriksaan: 1,
+                        namaPemeriksaan: 'SGOT'
+                    },
+                    {
+                        idPemeriksaan: 2,
+                        namaPemeriksaan: 'SGPT'
+                    },
+                    {
+                        idPemeriksaan: 3,
+                        namaPemeriksaan: 'GLOB'
+                    },
+                    {
+                        idPemeriksaan: 4,
+                        namaPemeriksaan: 'TBIL'
+                    },
+                ],
+            },
+            {
+                idOrder: 3,
+                date: '02/03/2025',
+                mrn: 'P.2024.205.1',
+                sid: 'SRK1234SK',
+                name: 'Joko Santoso',
+                dob: '01/03/2000',
+                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
+                dataPemeriksaan: [
+                    {
+                        idPemeriksaan: 1,
+                        namaPemeriksaan: 'SGOT'
+                    },
+                    {
+                        idPemeriksaan: 2,
+                        namaPemeriksaan: 'SGPT'
+                    },
+                    {
+                        idPemeriksaan: 3,
+                        namaPemeriksaan: 'GLOB'
+                    },
+                    {
+                        idPemeriksaan: 4,
+                        namaPemeriksaan: 'TBIL'
+                    },
+                    {
+                        idPemeriksaan: 5,
+                        namaPemeriksaan: 'Darah Lengkap'
+                    },
+                ],
+            },
+        ],
+        selectedInstrument: {
+            idInstrument: -1,
+            namaInstrument: 'Instrument'
+        },
+        openInstrument: false,
+        openInstrumentSearchMobile: false,
+        openInstrumentSearch: false,
+        dataInstrument: [
+            {
+                idInstrument: 1,
+                namaInstrument: 'Hema 01',
+            },
+            {
+                idInstrument: 2,
+                namaInstrument: 'Axsym',
+            },
+            {
+                idInstrument: 3,
+                namaInstrument: 'Cobas C311',
+            },
+        ],
+
+        mrnAdd: '',
+        datePickerValueAdd: '',
+        sidAdd: '',
+        nameAdd: '',
+        dobAdd: '',
+        pemeriksaanAdd: [],
+        objForm: {
+            date: '',
+            mrn: '',
+            sid: '',
+            name: '',
+            dob: '',
+            pemeriksaan: [],
+        },
+        // 1. Inisialisasi End
+        // 2. Fungsi Start
+        closeDialog() {
+            this.pemeriksaanAdd = []
+            this.filteredItemPemeriksaan = []
+            this.selectedPemeriksaan = []
+            this.mrnAdd = ''
+            this.datePickerValueAdd = ''
+            this.sidAdd = ''
+            this.nameAdd = ''
+            this.dobAdd = ''
+            this.objForm = {
+                date: '',
+                mrn: '',
+                sid: '',
+                name: '',
+                dob: '',
+                pemeriksaan: [],
+            }
+            this.showDialogAdd = false
+        },
+        onChangeInstrumentSearch(item) {
+            this.openInstrumentSearch = false;
+            this.selectedInstrument = item;
+        },
+        onChangeInstrument(item) {
+            this.openInstrument = false;
+            this.selectedInstrumentAdd = item;
+        },
+        onChangeInstrumentEdit(item) {
+            this.openInstrument = false;
+            this.selectedInstrumentEdit = item;
+        },
+        onChangeMrnAdd() {
+            this.objForm.assayCode = this.mrnAdd;
+        },
+        onChangeSidAdd() {
+            this.objForm.sid = this.sidAdd;
+        },
+        onChangeNameAdd() {
+            this.objForm.name = this.nameAdd;
+        },
+        onChangeInstrumentMobile(item) {
+            this.openInstrumentSearchMobile = false;
+            // this.selectedInstrument = item;
+            this.selectedInstrument = { ...item };
+        },
+        openModalEdit(item) {
+            this.selectedInstrumentEdit = {
+                idInstrument: item.idInstrument,
+                namaInstrument: item.namaInstrument
+            }
+
+            this.assayCodeEdit = item.assayCode
+            this.decimalFontEdit = item.decimalFont
+            this.formulaEdit = item.formula
+
+            this.showDialogEdit = !this.showDialogEdit;
+        },
+        closeDialogEdit() {
+            this.loadingVerifikasi = false;
+            this.isErrorVerifikasi = false;
+            this.isVerifikasiDone = false;
+            this.hasilVerifikasi = ''
+            this.showDialogEdit = !this.showDialogEdit;
+        },
+        editMobilePage(item) {
+            var json = JSON.stringify(item);
+            localStorage.setItem('itemEditMobile', json)
+            window.location.href = "assay_format_mobile_edit.html";
+        },
+        // 2. Fungsi End
+    }))
+})
\ No newline at end of file
diff --git a/v1/order.html b/v1/order.html
index 8229621..0f96f63 100644
--- a/v1/order.html
+++ b/v1/order.html
@@ -1 +1,858 @@
-ini order page
\ No newline at end of file
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Order XPORT</title>
+    <!-- tailwind cdn -->
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <!-- alpine cdn -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    <!-- material Symbols -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+</head>
+
+<body class="bg-[#F2F9FF] h-screen flex flex-col">
+    <!-- Navbar -->
+    <div class="bg-white h-20 flex items-center justify-between px-6">
+        <!-- Logo -->
+        <a class="block text-teal-600" href="#">
+            <div class="flex items-center space-x-2">
+                <img src="../images/logoServer.png" class="mr-3 h-10" />
+                <p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
+            </div>
+        </a>
+
+        <!-- Navigasi (Desktop) -->
+        <nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
+            <ul class="flex items-center gap-6 text-sm">
+                <li>
+                    <a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
+                </li>
+                <li>
+                    <a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3] ">ASSAY
+                        FORMAT</a>
+                </li>
+                <li>
+                    <a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
+                </li>
+                <li class="bg-[#E3F2FD] rounded-sm p-3">
+                    <a href="order.html" class="text-[#2196F3]  transition font-bold hover:text-black/87">ORDER</a>
+                </li>
+                <li>
+                    <a href="master_data.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">MASTER
+                        DATA</a>
+                </li>
+                <li>
+                    <a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
+                </li>
+                <li>
+                    <img src="../images/avatar.png" class="mr-3" />
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Hamburger Menu (Mobile) -->
+        <div x-data="{ open: false }">
+            <button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
+                <span class="material-symbols-outlined text-3xl">menu</span>
+            </button>
+
+            <!-- Bottom Sheet Menu (Mobile) -->
+            <div>
+                <!-- Overlay -->
+                <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
+                </div>
+
+                <!-- Modal -->
+                <div x-show="open" x-transition
+                    class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
+                    x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
+                    <ul class="space-y-2">
+                        <li>
+                            <a href="settings.html"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">settings</span>
+                                    Setting
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="assay_format.html"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">edit</span>
+                                    Assay Format
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="result.html"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">calculate</span>
+                                    Result
+                                </div>
+                            </a>
+                        </li>
+                        <li class="bg-[#E3F2FD] p-2 rounded">
+                            <a href="order.html"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-[#2196F3] font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-[#2196F3]">calculate</span>
+                                    Order
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="master_data.html"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">calculate</span>
+                                    Master Data
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">online_prediction</span>
+                                    Status
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">person</span>
+                                    Akun
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Konten utama -->
+    <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="order">
+        <!-- Bagian Kiri Full (Tabel) -->
+        <div class="hidden lg: bg-white w-full rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
+            <div class="flex justify-between space-x-2">
+                <div class="p-2 text-black font-medium text-lg rounded-lg">Order</div>
+                <button @click="showDialogAdd = !showDialogAdd">
+                    <span class="material-symbols-outlined text-black">add</span>
+                </button>
+            </div>
+
+            <!-- space 20 -->
+            <div class="mb-0 lg:mb-5"></div>
+
+            <!-- inputan search  -->
+            <div class="flex flex-row gap-4 w-full">
+                <div class="relative w-[25%]">
+                    <!-- instrument -->
+                    <fieldset @click.outside="openInstrumentSearch = false"
+                        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="selectedInstrument.idInstrument != -1 ? 'Instrument' : selectedInstrument.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="openInstrumentSearch = !openInstrumentSearch" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInstrumentSearch }" 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="openInstrumentSearch"
+                        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="onChangeInstrumentSearch(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>
+                </div>
+                <!-- start date -->
+                <div class="w-[25%]">
+                    <div class="relative">
+                        <label for="Start Date"
+                            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" autocomplete="off" x-model="datepickerValueSD"
+                                @click="showDatepickerSD = !showDatepickerSD" readonly
+                                class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                placeholder="Start 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">
+                                Start Date
+                            </span>
+                        </label>
+
+                        <!-- Icon Kalender -->
+                        <div class="absolute top-0 right-0 px-3 py-3 cursor-pointer"
+                            @click="showDatepickerSD = !showDatepickerSD">
+                            <svg class="h-6 w-6 text-black/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+
+                        <!-- Datepicker Dropdown -->
+                        <div class="bg-white shadow-md mt-12 rounded-lg p-4 absolute top-0 left-0 w-[18rem]"
+                            x-show="showDatepickerSD" @click.away="showDatepickerSD = false">
+
+                            <!-- Header Datepicker -->
+                            <div class="flex justify-between items-center mb-2">
+                                <button @click="prevMonth()" 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[month] + ' ' + year"></span>
+                                <button @click="nextMonth()" 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>
+
+                            <!-- Days of the Week -->
+                            <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>
+
+                            <!-- Dates -->
+                            <div class="grid grid-cols-7 text-sm">
+                                <template x-for="blankday in blankdays">
+                                    <div class="text-center border p-1 border-transparent"></div>
+                                </template>
+                                <template x-for="date in no_of_days" :key="date">
+                                    <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                        :class="{'bg-blue-500 text-white': isSelected(date)}" @click="setDate(date)">
+                                        <span x-text="date"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- start date -->
+                <!-- end date -->
+                <!-- End Date -->
+                <div class="w-[25%]">
+                    <div class="relative">
+                        <label for="End Date"
+                            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" autocomplete="off" x-model="datepickerValueED"
+                                @click="showDatepickerED = !showDatepickerED" readonly
+                                class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                placeholder="End 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">
+                                End Date
+                            </span>
+                        </label>
+
+                        <!-- Icon Kalender -->
+                        <div class="absolute top-0 right-0 px-3 py-3 cursor-pointer"
+                            @click="showDatepickerED = !showDatepickerED">
+                            <svg class="h-6 w-6 text-black/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+
+                        <!-- Datepicker Dropdown -->
+                        <div class="bg-white shadow-md mt-12 rounded-lg p-4 absolute top-0 left-0 w-[18rem]"
+                            x-show="showDatepickerED" @click.away="showDatepickerED = false">
+
+                            <!-- Header Datepicker -->
+                            <div class="flex justify-between items-center mb-2">
+                                <button @click="prevMonthED()" 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[monthED] + ' ' + yearED"></span>
+                                <button @click="nextMonthED()" 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>
+
+                            <!-- Days of the Week -->
+                            <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>
+
+                            <!-- Dates -->
+                            <div class="grid grid-cols-7 text-sm">
+                                <template x-for="blankday in blankdaysED">
+                                    <div class="text-center border p-1 border-transparent"></div>
+                                </template>
+                                <template x-for="date in no_of_daysED" :key="date">
+                                    <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                        :class="{'bg-blue-500 text-white': isSelectedED(date)}"
+                                        @click="setDateED(date)">
+                                        <span x-text="date"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- End Date -->
+
+                <!-- end date -->
+                <div class="w-[25%]">
+                    <!-- MRN/SID -->
+                    <label for="MRN/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="MRN/SID" x-model="MRN_SID"
+                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                            placeholder="MRN/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">
+                            MRN/SID
+                        </span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- space 16 -->
+            <div class="mb-0 lg:mb-4"></div>
+
+            <!-- Table Desktop -->
+            <div class="flex-1 overflow-auto h-full">
+                <table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
+                    <thead>
+                        <tr>
+                            <th class="p-2 font-medium text-gray-900 w-[10%] text-left text-xs">Date</th>
+                            <th class="p-2 font-medium text-gray-900 w-[20%] text-left text-xs">MRN</th>
+                            <th class="p-2 font-medium text-gray-900 w-[20%] text-left text-xs">SID</th>
+                            <th class="p-2 font-medium text-gray-900 w-[20%] text-left text-xs">Name</th>
+                            <th class="p-2 font-medium text-gray-900 w-[10%] text-left text-xs">DOB</th>
+                            <th class="p-2 font-medium text-gray-900 w-[50%] text-left text-xs">PEMERIKSAAN</th>
+                            <th class="p-2 font-medium text-gray-900 w-[10%] text-center">
+                                #
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                        <template x-for="item in dataOrder" :key="item.idOrder">
+                            <tr>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.date"></td>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.mrn"></td>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.sid"></td>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.name"></td>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.dob"></td>
+                                <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
+                                    x-text="item.pemeriksaanStr"></td>
+                                <td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
+                                    <button @click="openModalEdit(item)"><span
+                                            class="material-symbols-outlined">edit</span></button>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- modal add desktop -->
+        <div x-show="showDialogAdd" x-transition.duration.200ms class="fixed z-10 inset-0">
+            <div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
+                <!-- box -->
+                <div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
+                    <!-- header -->
+                    <div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
+                        <h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
+                    </div>
+                    <!-- body -->
+                    <div class="flex flex-1 bg-white px-6 py-5">
+                        <div class="relative w-full">
+                            <!-- Order Date -->
+                            <label for="Order Date"
+                                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="Order Date" autocomplete="off" x-model="datepickerValueOD"
+                                    @click="showDatepickerOD = !showDatepickerOD" readonly
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    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">
+                                    Order Date
+                                </span>
+                            </label>
+
+                            <!-- Datepicker Order Date -->
+                            <div class="bg-white shadow-md mt-12 rounded-lg p-4 absolute top-0 left-0 w-[18rem]"
+                                x-show="showDatepickerOD" @click.away="showDatepickerOD = false">
+                                <div class="flex justify-between items-center mb-2">
+                                    <button @click="prevMonthOD()" 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[monthOD] + ' ' + yearOD"></span>
+                                    <button @click="nextMonthOD()" 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 no_of_daysOD">
+                                        <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                            :class="{'bg-blue-500 text-white': isSelectedOD(date)}"
+                                            @click="setDateOD(date)">
+                                            <span x-text="date"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- 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="mrnAdd"
+                                    @change="onChangeMrnAdd()"
+                                    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="sidAdd"
+                                    @change="onChangeSidAdd()"
+                                    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="nameAdd"
+                                    @change="onChangeNameAdd()"
+                                    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="datepickerValueDOB"
+                                    @click="showDatepickerDOB = !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="showDatepickerDOB" @click.away="showDatepickerDOB = false">
+                                <div class="flex justify-between items-center mb-2">
+                                    <button @click="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[monthDOB] + ' ' + yearDOB"></span>
+                                    <button @click="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 no_of_daysDOB">
+                                        <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                            :class="{'bg-blue-500 text-white': isSelectedDOB(date)}"
+                                            @click="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="searchPemeriksaan"
+                                    @click="openPemeriksaanAdd = true" @input="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>
+                                <!-- List Dipilih -->
+                                <div class="flex flex-wrap gap-2 mt-2">
+                                    <template x-for="(item, index) in selectedPemeriksaan" :key="item.idPemeriksaan">
+                                        <div
+                                            class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
+                                            <span x-text="item.namaPemeriksaan"></span>
+                                            <button @click="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="openPemeriksaanAdd" @click.away="openPemeriksaanAdd = 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="filteredPemeriksaan.length === 0">
+                                        <div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
+                                    </template>
+                                    <template x-for="item in filteredPemeriksaan" :key="item.idPemeriksaan">
+                                        <div @click="addItemPemeriksaan(item)"
+                                            class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
+                                            :class="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
+                                            <span x-text="item.namaPemeriksaan"></span>
+                                            <svg x-show="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 justify-between items-center">
+                            <button @click="closeDialog()" class="text-[#1976D2] hover:text-white font-bold text-sm uppercase transition duration-200 
+                                hover:bg-[#1976D2] px-4 py-2 rounded-md">
+                                Batalkan
+                            </button>
+
+                            <div class="flex items-center space-x-3">
+                                <button @click="closeDialog()" 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>
+            </div>
+        </div>
+        <!-- modal add desktop -->
+
+        <!-- modal edit desktop -->
+        <div x-show="showDialogEdit" x-transition.duration.200ms class="fixed z-10 inset-0">
+            <div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
+                <!-- box -->
+                <div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
+                    <!-- header -->
+                    <div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
+                        <h3 class="text-xl font-bold uppercase text-white px-4 py-1">edit</h3>
+                    </div>
+                    <!-- body -->
+                    <div class="flex flex-1 bg-white px-6 py-5">
+                        <div class="relative w-full">
+                            <!-- instrument -->
+                            <fieldset @click.outside="openInstrument = false"
+                                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"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Assay Code" />
+
+                                <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
+                                </span>
+                            </label>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <!-- Decimal Font -->
+                            <label for="Decimal"
+                                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="Decimal" x-model="decimalFontEdit"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Decimal" autocomplete="off" />
+
+                                <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">
+                                    Decimal
+                                </span>
+                            </label>
+
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
+
+                            <label for="Formula"
+                                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+
+                                <textarea id="Formula" x-model="formulaEdit" autocomplete="off"
+                                    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"
+                                    placeholder="Formula"></textarea>
+
+                                <span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all 
+                                peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0 
+                                peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
+                                    :class="formulaEdit.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
+                                    Formula
+                                </span>
+                            </label>
+
+                            <!-- btn verifikasi -->
+                            <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 -->
+                            <div>
+                                <template x-if="isErrorVerifikasi === false">
+                                    <p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
+                                </template>
+                                <template x-if="isErrorVerifikasi === true">
+                                    <p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- footer -->
+                    <div class="h-10 px-4 py-2 mb-5">
+                        <div class="flex items-end justify-end">
+                            <button @click="closeDialogEdit()" class="mr-3 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 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>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- modal edit desktop -->
+
+        <!-- Kiri Mobile -->
+        <div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">
+            <h2 class="text-black/87 font-medium text-xl mb-4">Order</h2>
+            <a href="assay_format_mobile_add.html">
+                <span class="material-symbols-outlined text-[#2196F3]">add</span>
+            </a>
+        </div>
+
+        <!-- dialog instrument mobile start -->
+        <div>
+            <!-- Overlay -->
+            <div x-show="openInstrumentSearchMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
+                @click="openInstrumentSearchMobile = false">
+            </div>
+
+            <!-- Modal -->
+            <div x-show="openInstrumentSearchMobile" x-transition
+                class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
+                x-bind:class="openInstrumentSearchMobile ? 'translate-y-0' : 'translate-y-full'">
+                <div class="flex justify-between space-x-2">
+                    <p class="text-[16px] font-medium text-[#212B36]">Instrument</p>
+                    <button @click="openInstrumentSearchMobile = false">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            class="w-6 h-6 text-[#637381] hover:text-gray-700 transition-colors" viewBox="0 0 24 24"
+                            fill="none">
+                            <path
+                                d="M13.4099 12.0002L17.7099 7.71019C17.8982 7.52188 18.004 7.26649 18.004 7.00019C18.004 6.73388 17.8982 6.47849 17.7099 6.29019C17.5216 6.10188 17.2662 5.99609 16.9999 5.99609C16.7336 5.99609 16.4782 6.10188 16.2899 6.29019L11.9999 10.5902L7.70994 6.29019C7.52164 6.10188 7.26624 5.99609 6.99994 5.99609C6.73364 5.99609 6.47824 6.10188 6.28994 6.29019C6.10164 6.47849 5.99585 6.73388 5.99585 7.00019C5.99585 7.26649 6.10164 7.52188 6.28994 7.71019L10.5899 12.0002L6.28994 16.2902C6.19621 16.3831 6.12182 16.4937 6.07105 16.6156C6.02028 16.7375 5.99414 16.8682 5.99414 17.0002C5.99414 17.1322 6.02028 17.2629 6.07105 17.3848C6.12182 17.5066 6.19621 17.6172 6.28994 17.7102C6.3829 17.8039 6.4935 17.8783 6.61536 17.9291C6.73722 17.9798 6.86793 18.006 6.99994 18.006C7.13195 18.006 7.26266 17.9798 7.38452 17.9291C7.50638 17.8783 7.61698 17.8039 7.70994 17.7102L11.9999 13.4102L16.2899 17.7102C16.3829 17.8039 16.4935 17.8783 16.6154 17.9291C16.7372 17.9798 16.8679 18.006 16.9999 18.006C17.132 18.006 17.2627 17.9798 17.3845 17.9291C17.5064 17.8783 17.617 17.8039 17.7099 17.7102C17.8037 17.6172 17.8781 17.5066 17.9288 17.3848C17.9796 17.2629 18.0057 17.1322 18.0057 17.0002C18.0057 16.8682 17.9796 16.7375 17.9288 16.6156C17.8781 16.4937 17.8037 16.3831 17.7099 16.2902L13.4099 12.0002Z"
+                                fill="currentColor" />
+                        </svg>
+                    </button>
+                </div>
+                <!-- spacer 24px -->
+                <div class="mb-6"></div>
+                <!-- list radio button -->
+                <div class="max-h-[200px] overflow-y-auto">
+                    <template x-if="dataInstrument.length === 0">
+                        <p class="py-2 px-3 text-gray-500 text-center">Data tidak ada</p>
+                    </template>
+                    <template x-for="item in dataInstrument" :key="item.idInstrument">
+                        <div :id="item.idInstrument" class="mb-6">
+                            <label class="flex items-center space-x-3 cursor-pointer">
+                                <input type="radio" :value="item.idInstrument" class="peer hidden"
+                                    x-model="selectedInstrument.idInstrument" @change="onChangeInstrumentMobile(item)">
+                                <div
+                                    class="w-5 h-5 border-2 border-gray-400 rounded-full flex items-center justify-center peer-checked:border-[#2196F3] peer-checked:bg-[#2196F3]">
+                                    <div class="w-2 h-2 bg-white rounded-full opacity-100 transition"></div>
+                                </div>
+                                <span class="text-gray-900" x-text="item.namaInstrument"></span>
+                            </label>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <!-- dialog instrument mobile end -->
+    </div>
+
+    <script src="js/order.js"></script>
+</body>
+
+</html>
\ No newline at end of file