From 0338f35706af97c0ac31dfebd65241cb1f88a63f Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Mon, 17 Mar 2025 04:45:44 +0700
Subject: [PATCH] step 29 : modal edit form assay format

---
 v1/assay_format.html  | 505 +++++++-----------------------------------
 v1/js/assay_format.js |  19 ++
 2 files changed, 105 insertions(+), 419 deletions(-)

diff --git a/v1/assay_format.html b/v1/assay_format.html
index 8743eac..8b6b1f2 100644
--- a/v1/assay_format.html
+++ b/v1/assay_format.html
@@ -243,20 +243,18 @@
                             <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"
+                                <textarea id="Formula" x-model="formulaAdd"
                                     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 start-2.5 top-0 bg-white p-0.5 text-xs text-gray-700 transition-all 
-                                    peer-placeholder-shown:top-[25%] peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm 
-                                    peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2">
+                                <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="formulaAdd.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
                                     Formula
                                 </span>
                             </label>
 
-
-
-
                             <!-- btn verifikasi -->
                             <div class="flex justify-end items-end">
                                 <button @click="onProcessVerifiaksi()" class="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 
@@ -310,450 +308,119 @@
                 <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>
+                        <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">
-                            <fieldset @click.outside="openJenis = false"
+                            <!-- 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="selectedJenis.idJenis != -1 ? 'Jenis' : selectedJenis.namaJenis"
+                                <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="openJenis = !openJenis" type="button"
+                                <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="selectedJenis.namaJenis" class="text-left"></span>
+                                    <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': openJenis }" fill="none" viewBox="0 0 24 24"
+                                        :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>
-
-                            <!-- list menu -->
-                            <div x-show="openJenis"
+                            <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="dataJenis.length === 0">
+                                    <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 dataJenis" :key="item.idJenis">
-                                        <li :id="item.idJenis" @click="onChangeJenis(item)"
+                                    <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.namaJenis"></button>
+                                            <button x-text="item.namaInstrument"></button>
                                         </li>
                                     </template>
                                 </ul>
                             </div>
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
 
-                            <!-- garis putus putus -->
-                            <template x-if="selectedJenis.idJenis !== -1">
-                                <div class="border-t border-dashed border-gray-400 mt-5 mb-5"></div>
-                            </template>
+                            <!-- 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="assayCode"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Assay Code" />
 
-                            <!-- namaJenis TCP Server  -->
-                            <template x-if="selectedJenis.idJenis === 1">
-                                <div>
-                                    <!-- port -->
-                                    <label for="Port"
-                                        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="Port" x-model="port"
-                                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                            placeholder="Port" />
-                                        <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">
-                                            Port
-                                        </span>
-                                    </label>
-                                    <div class="mb-5"></div>
-                                    <!-- interface -->
-                                    <fieldset @click.outside="openInterface = 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="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
-                                            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="openInterface = !openInterface" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openInterface }" 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="openInterface"
-                                        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="dataInterface.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataInterface" :key="item.idInterface">
-                                                <li :id="item.idInterface" @click="onChangeInterface(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaInterface"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- 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="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="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="selectedInstrument.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>
-                                    <div class="mb-5"></div>
-                                </div>
-                            </template>
-                            <!-- namaJenis TCP Server  -->
+                                <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>
 
-                            <!-- namaJenis TCP Client -->
-                            <template x-if="selectedJenis.idJenis === 2">
-                                <div>
-                                    <!-- server -->
-                                    <label for="Server"
-                                        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="Server" x-model="server"
-                                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                            placeholder="Server" />
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
 
-                                        <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">
-                                            Server
-                                        </span>
-                                    </label>
-                                    <div class="mb-5"></div>
-                                    <!-- port -->
-                                    <label for="Port"
-                                        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="Port" x-model="port"
-                                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                            placeholder="Port" />
+                            <!-- 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="decimalFont"
+                                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                                    placeholder="Decimal" />
 
-                                        <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">
-                                            Port
-                                        </span>
-                                    </label>
-                                    <div class="mb-5"></div>
-                                    <!-- interface -->
-                                    <fieldset @click.outside="openInterface = 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="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
-                                            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="openInterface = !openInterface" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openInterface }" 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="openInterface"
-                                        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="dataInterface.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataInterface" :key="item.idInterface">
-                                                <li :id="item.idInterface" @click="onChangeInterface(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaInterface"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- 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="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="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="selectedInstrument.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>
-                                    <div class="mb-5"></div>
-                                </div>
-                            </template>
-                            <!-- namaJenis TCP Client -->
+                                <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>
 
-                            <!-- namaJenis RS232 -->
-                            <template x-if="selectedJenis.idJenis === 3">
-                                <div>
-                                    <!-- serial -->
-                                    <fieldset @click.outside="openSerial = 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="selectedSerial.idSerial != -1 ? 'Serial' : selectedSerial.namaSerial"
-                                            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="openSerial = !openSerial" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedSerial.namaSerial" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openSerial }" 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="openSerial"
-                                        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="dataSerial.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataSerial" :key="item.idSerial">
-                                                <li :id="item.idSerial" @click="onChangeSerial(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaSerial"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- speed -->
-                                    <label for="Speed"
-                                        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="Speed" x-model="speed"
-                                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                            placeholder="Speed" />
+                            <!-- space 20 -->
+                            <div class="mb-0 lg:mb-5"></div>
 
-                                        <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">
-                                            Speed
-                                        </span>
-                                    </label>
-                                    <div class="mb-5"></div>
-                                    <!-- parity -->
-                                    <fieldset @click.outside="openParity = 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="selectedParity.idParity != -1 ? 'DataBit' : selectedParity.namaParity"
-                                            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="openParity = !openParity" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedParity.namaParity" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openParity }" 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="openParity"
-                                        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="dataParity.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataParity" :key="item.idParity">
-                                                <li :id="item.idParity" @click="onChangeParity(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaParity"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
+                            <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"
+                                    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="onProcessVerifiaksi()" class="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">
+
+                                    <!-- 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>
-                                    <div class="mb-5"></div>
-                                    <!-- data bits -->
-                                    <fieldset @click.outside="openDataBit = 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="selectedDataBit.idDataBit != -1 ? 'DataBit' : selectedDataBit.namaDataBit"
-                                            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="openDataBit = !openDataBit" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedDataBit.namaDataBit" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openDataBit }" 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="openDataBit"
-                                        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="dataDataBit.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataDataBit" :key="item.idDataBit">
-                                                <li :id="item.idDataBit" @click="onChangeDataBit(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaDataBit"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- stop bit -->
-                                    <fieldset @click.outside="openStopBit = 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="selectedStopBit.idStopBit != -1 ? 'StopBit' : selectedStopBit.namaStopBit"
-                                            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="openStopBit = !openStopBit" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedStopBit.namaStopBit" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openStopBit }" 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="openStopBit"
-                                        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="dataStopBit.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataStopBit" :key="item.idStopBit">
-                                                <li :id="item.idStopBit" @click="onChangeStopBit(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaStopBit"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- interface -->
-                                    <fieldset @click.outside="openInterface = 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="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
-                                            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="openInterface = !openInterface" type="button"
-                                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
-                                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
-                                                :class="{ 'rotate-180': openInterface }" 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="openInterface"
-                                        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="dataInterface.length === 0">
-                                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
-                                            </template>
-                                            <template x-for="item in dataInterface" :key="item.idInterface">
-                                                <li :id="item.idInterface" @click="onChangeInterface(item)"
-                                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
-                                                    <button x-text="item.namaInterface"></button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </div>
-                                    <div class="mb-5"></div>
-                                    <!-- 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="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="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="selectedInstrument.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>
-                                    <div class="mb-5"></div>
-                                </div>
-                            </template>
-                            <!-- namaJenis RS232 -->
+
+                                    <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 -->
diff --git a/v1/js/assay_format.js b/v1/js/assay_format.js
index a7dd38c..b07fe45 100644
--- a/v1/js/assay_format.js
+++ b/v1/js/assay_format.js
@@ -8,6 +8,10 @@ document.addEventListener('alpine:init', () => {
         showDialogAdd: false,
         showDialogEdit: false,
         loadingVerifikasi: false,
+        decimalFont: '',
+        assayCode: '',
+        formulaEdit: '',
+        formulaAdd: '',
         dataAssayFormat: [
             {
                 idAssayFormat: 1,
@@ -66,6 +70,7 @@ document.addEventListener('alpine:init', () => {
             this.loadingVerifikasi = false; 
             this.isErrorVerifikasi = false;
             this.hasilVerifikasi = ''
+            this.formulaAdd = ''
             this.showDialogAdd = false
         },
         onChangeInstrument(item){
@@ -81,6 +86,20 @@ document.addEventListener('alpine:init', () => {
                 this.hasilVerifikasi = 'Formula is valid';
             }, 2000);
         },
+        openModalEdit(item) {
+            this.selectedInstrument = {
+                idInstrument: item.idInstrument,
+                namaInstrument: item.namaInstrument
+            }
+
+            this.assayCode = item.assayCode
+            this.decimalFont = item.decimalFont
+            this.formulaEdit = item.formula
+            this.showDialogEdit = !this.showDialogEdit;
+        },
+        closeDialogEdit(){
+            this.showDialogEdit = !this.showDialogEdit;
+        },
         // 2. Fungsi End
     }))
 })
\ No newline at end of file