From a552d0d4f64018f859fed1d25a7ba68efb712c85 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Wed, 2 Apr 2025 12:23:21 +0700
Subject: [PATCH] step 50 : perbaikan result raw data modal desktop dan mobile

---
 v1/js/result.js |  7 ++++---
 v1/result.html  | 56 ++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/v1/js/result.js b/v1/js/result.js
index 7014383..21fef16 100644
--- a/v1/js/result.js
+++ b/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
     }))
diff --git a/v1/result.html b/v1/result.html
index 01152c0..8a191f3 100644
--- a/v1/result.html
+++ b/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 -->
-        <div x-show="rawDataDesktop" x-transition.duration.200ms class="fixed z-10 inset-0">
+        <!-- modal raw data -->
+        <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">