step 50 : perbaikan result raw data modal desktop dan mobile

v1/js/result.js

@@ -70,7 +70,8 @@ document.addEventListener('alpine:init', () => {
                 namaStopBit: '1'
             },
         ],
-        rawDataDesktop: false,
+        rawData: false,
+        rawDataMobile: false,
         showDialogAdd: false,
         showDialogEdit: false,
         loadingVerifikasi: false,
@@ -157,10 +158,10 @@ document.addEventListener('alpine:init', () => {
         },
         openModalRawData(item){
             this.selectedRawData = item
-            this.rawDataDesktop = true
+            this.rawData = true
         },
         closeDialog(){
-            this.rawDataDesktop = false
+            this.rawData = false
         },
         // 2. Fungsi End
     }))

v1/result.html

@@ -142,7 +142,7 @@
     <!-- Konten utama -->
     <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="result">
         <!-- Bagian Kiri (Tabel) -->
-        <div class="hidden lg: bg-white w-full lg:w-1/2 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
+        <div class="hidden lg: bg-white w-2/3 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
             <div class="p-2 text-black font-medium text-lg rounded-lg">Result</div>
 
             <!-- space 20 -->
@@ -253,11 +253,12 @@
             </div>
         </div>
 
-        <!-- modal raw data desktop -->
+        <!-- modal raw data -->
-        <div x-show="rawDataDesktop" x-transition.duration.200ms class="fixed z-10 inset-0">
+        <div x-show="rawData" 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">
+                <div
+                    class="flex flex-col bg-white rounded-lg w-[80%] 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">raw data</h3>
@@ -266,15 +267,56 @@
                     <div class="mx-6 my-5">
                         <template x-if="selectedRawData.idResult != -1">
                             <div>
-                                <div class="flex items-center px-4 py-2 border-b border-gray-200 w-full">
+                                <!-- desktop -->
+                                <div class="hidden lg:flex items-center px-4 py-2 border-b border-gray-200 w-full">
                                     <span class="text-gray-900 w-1/5" x-text="selectedRawData.namaInstrument"></span>
                                     <span class="text-gray-900 w-1/5" x-text="selectedRawData.sampleID"></span>
                                     <span class="text-gray-900 w-1/5" x-text="selectedRawData.assayNo"></span>
                                     <span class="text-gray-900 w-1/5" x-text="selectedRawData.result"></span>
                                     <span class="text-gray-900 w-1/5" x-text="selectedRawData.date"></span>
                                 </div>
+                                <!-- mobile -->
+                                <div class="px-4 py-2 lg:hidden">
+                                    <div class="flex justify-between">
+                                        <p class="text-gray-900 font-normal text-sm mb-2">Info</p>
+                                        <p class="text-gray-900 font-normal text-sm mb-2"
+                                            x-text="selectedRawData.namaInstrument"></p>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <p class="text-gray-900 font-normal text-sm mb-2">Sample ID</p>
+                                        <p class="text-gray-900 font-normal text-sm mb-2"
+                                            x-text="selectedRawData.sampleID"></p>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <p class="text-gray-900 font-normal text-sm mb-2">Assay No</p>
+                                        <p class="text-gray-900 font-normal text-sm mb-2"
+                                            x-text="selectedRawData.assayNo"></p>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <p class="text-gray-900 font-normal text-sm mb-2">Result</p>
+                                        <p class="text-gray-900 font-normal text-sm mb-2"
+                                            x-text="selectedRawData.result"></p>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <p class="text-gray-900 font-normal text-sm mb-2">Result</p>
+                                        <p class="text-gray-900 font-normal text-sm mb-2"
+                                            x-text="selectedRawData.date"></p>
+                                    </div>
+                                </div>
                                 <div class="flex flex-1 bg-[#F0F2F5DE] flex-col rounded-lg mt-5 p-5">
-                                    <h3 class="font-normal text-base text-black/87 mb-3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque ducimus amet, culpa expedita eum soluta repellat sed accusantium minus! Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit dignissimos impedit mollitia esse odit sequi facere praesentium possimus suscipit optio eveniet, nam fuga perferendis.</h3>
+                                    <h3 class="font-normal text-base text-black/87 mb-3">Lorem ipsum dolor, sit amet
+                                        consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
+                                        ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
+                                        Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
+                                        consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
+                                        dignissimos impedit mollitia esse odit sequi facere praesentium possimus
+                                        suscipit optio eveniet, nam fuga perferendis.Lorem ipsum dolor, sit amet
+                                        consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
+                                        ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
+                                        Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
+                                        consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
+                                        dignissimos impedit mollitia esse odit sequi facere praesentium possimus
+                                        suscipit optio eveniet, nam fuga perferendis.</h3>
                                 </div>
                             </div>
                         </template>
@@ -291,7 +333,7 @@
                 </div>
             </div>
         </div>
-        <!-- modal raw data desktop -->
+        <!-- modal raw data -->
 
         <!-- Kiri Mobile -->
         <div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">