From aae45861e377c96f07e11745b5bc3f9629a32069 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Mon, 24 Mar 2025 10:19:29 +0700
Subject: [PATCH] step 41 : order mobile screen list item and filter

---
 v1/order.html | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)

diff --git a/v1/order.html b/v1/order.html
index 0c643ea..5d224ef 100644
--- a/v1/order.html
+++ b/v1/order.html
@@ -914,6 +914,256 @@
                 <span class="material-symbols-outlined text-[#2196F3]">add</span>
             </a>
         </div>
+        <div class="flex flex-col overflow-auto mb-5 lg:hidden lg:mb-0">
+            <!-- filter mobile -->
+            <div class="mb-5">
+                <div class="bg-white w-full flex flex-row lg:hidden lg:mb-0">
+                    <!-- instrument selected -->
+                    <div class="bg-white w-full px-3 py-2" @click="openInstrumentSearchMobile = true">
+                        <div class="flex justify-between items-center">
+                            <p class="text-black/60" aria-readonly="true" x-text="(selectedInstrument.idInstrument != -1) 
+                                ? selectedInstrument.namaInstrument 
+                                : 'Instrument'"></p>
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5 transition-transform text-[#0000008A]"
+                                :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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-5">
+                <div class="bg-white w-full flex flex-col lg:hidden lg:mb-0">
+                    <!-- Start Date -->
+                    <div
+                        class="relative flex items-center border border-gray-400 rounded-md focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <label for="Start Date" class="w-full">
+                            <input type="text" autocomplete="off" x-model="datepickerValueSD"
+                                @click="showDatepickerSD = true" readonly
+                                class="peer w-full 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 right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+                            @click="showDatepickerSD = true">
+                            <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>
+                    </div>
+
+                    <!-- Datepicker Modal -->
+                    <div x-show="showDatepickerSD"
+                        class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
+                        @click.away="showDatepickerSD = false">
+                        <!-- Datepicker Box -->
+                        <div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
+                            <!-- Header Datepicker -->
+                            <div class="flex justify-between items-center mb-4">
+                                <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 mb-2">
+                                <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>
+
+                            <!-- Tombol Tutup -->
+                            <div class="mt-4 text-center">
+                                <button @click="showDatepickerSD = false"
+                                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
+                                    Tutup
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- End Datepicker Modal -->
+                </div>
+            </div>
+
+
+            <div class="mb-5">
+                <div class="bg-white w-full flex flex-col lg:hidden lg:mb-0">
+                    <!-- End Date -->
+                    <div
+                        class="relative flex items-center border border-gray-400 rounded-md focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <label for="End Date" class="w-full">
+                            <input type="text" autocomplete="off" x-model="datepickerValueED"
+                                @click="showDatepickerED = true" readonly
+                                class="peer w-full 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 right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+                            @click="showDatepickerED = true">
+                            <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>
+                    </div>
+
+                    <!-- Datepicker Modal -->
+                    <div x-show="showDatepickerED"
+                        class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
+                        @click.away="showDatepickerED = false">
+                        <!-- Datepicker Box -->
+                        <div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
+                            <!-- Header Datepicker -->
+                            <div class="flex justify-between items-center mb-4">
+                                <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 mb-2">
+                                <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>
+
+                            <!-- Tombol Tutup -->
+                            <div class="mt-4 text-center">
+                                <button @click="showDatepickerED = false"
+                                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
+                                    Tutup
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- End Datepicker Modal -->
+                </div>
+            </div>
+
+            <div class="mb-5">
+                <div class="bg-white">
+                    <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>
+
+            <!-- filter mobile -->
+
+            <!-- table become card mobile -->
+            <div class="w-full">
+                <template x-for="item in dataOrder" :key="item.idOrder">
+                    <div class="bg-white rounded-lg mb-4 p-5 ">
+                        <div class="flex justify-between">
+                            <h2 class="text-black/87 font-medium text-xl mb-4" x-text="item.date"></h2>
+                            <div class="relative flex h-4 w-4">
+                                <button @click="editMobilePage(item)">
+                                    <span class="material-symbols-outlined text-[#2196F3]">edit</span>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex justify-between">
+                            <p class="text-[#00000099] font-normal text-sm mb-2">MRN</p>
+                            <p class="text-black/87 font-normal text-sm mb-2" x-text="item.mrn"></p>
+                        </div>
+                        <div class="flex justify-between">
+                            <p class="text-[#00000099] font-normal text-sm mb-2">SID</p>
+                            <p class="text-black/87 font-normal text-sm mb-2" x-text="item.sid"></p>
+                        </div>
+                        <div class="flex justify-between">
+                            <p class="text-[#00000099] font-normal text-sm mb-2">Name</p>
+                            <p class="text-black/87 font-normal text-sm mb-2" x-text="item.name"></p>
+                        </div>
+                        <div class="flex justify-between">
+                            <p class="text-[#00000099] font-normal text-sm mb-2">DOB</p>
+                            <p class="text-black/87 font-normal text-sm mb-2" x-text="item.dob"></p>
+                        </div>
+                        <div class="flex justify-between">
+                            <p class="text-[#00000099] font-normal text-sm mb-2">Pemeriksaan</p>
+                            <p class="text-black/87 font-normal text-sm mb-2" x-text="item.pemeriksaanStr"></p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
 
         <!-- dialog instrument mobile start -->
         <div>