From 17f10231fbb6953dc2df9ad291a4347968ab3619 Mon Sep 17 00:00:00 2001
From: herirudini <herirudini@gmail.com>
Date: Thu, 26 Feb 2026 09:13:17 +0700
Subject: [PATCH] feat(ProductSerialPage): slicng UI filter

---
 index.html                              |  3 ++
 src/views/product/ProductSerialPage.vue | 60 +++++++++++++++++++++----
 2 files changed, 54 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 82d6043..706057c 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,9 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
+    <!-- TODO: Remove this on production -->
+    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+    <script>eruda.init();</script>
   </body>
 
 </html>
diff --git a/src/views/product/ProductSerialPage.vue b/src/views/product/ProductSerialPage.vue
index 9fe43d5..67245a1 100644
--- a/src/views/product/ProductSerialPage.vue
+++ b/src/views/product/ProductSerialPage.vue
@@ -8,14 +8,14 @@
         <div class="p-4">
           <div class="flex items-center justify-between w-full aspect-auto mb-6 mt-4">
             <div class="flex items-center gap-4">
-              <ion-button size="medium" fill="clear" color="dark" @click="router.back()">
+              <ion-button size="default" fill="clear" color="dark" @click="router.back()">
                 <div class="font-semibold flex items-center gap-2">
                   <ion-icon slot="icon-only" :icon="caretBackCircleSharp" class="text-2xl"></ion-icon>
                   <div>Kembali</div>
                 </div>
               </ion-button>
             </div>
-            <img src="@/assets/images/Logo-KDM-merah.png" alt="Logo KDM" class="w-[20%] cursor-pointer" button
+            <img src="@/assets/images/Logo-KDM-merah.png" alt="Logo KDM" class="w-[20%] cursor-pointer"
               @click="router.push('/')">
           </div>
           <div class="grid grid-cols-1 gap-4">
@@ -26,7 +26,7 @@
               <h2 class="text-2xl font-semibold">APM CLOPPY</h2>
               <div class="flex gap-2 items-center justify-between text-gray-500">
                 <div>Detail informasi</div>
-                <ion-button size="small" fill="clear" class="text-gray-500 rounded-md">
+                <ion-button id="show-filter" size="small" fill="clear" class="text-gray-500 rounded-md">
                   <ion-icon slot="icon-only" :icon="funnelOutline"></ion-icon>
                 </ion-button>
               </div>
@@ -53,18 +53,61 @@
         </ion-card>
         <AppFooter color="white" />
       </div>
+      <ion-modal ref="modal" trigger="show-filter" @willDismiss="onWillDismiss">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button @click="cancel()">Cancel</ion-button>
+            </ion-buttons>
+            <ion-title>Filter</ion-title>
+            <ion-buttons slot="end">
+              <ion-button :strong="true" @click="confirm()">Confirm</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-item>
+            <ion-select placeholder="Pilih Status" label="Status" label-placement="stacked" v-model="selectedStatus">
+              <ion-select-option value="">Semua</ion-select-option>
+              <ion-select-option value="used">Dipakai</ion-select-option>
+              <ion-select-option value="ready">Ready To Use</ion-select-option>
+              <ion-select-option value="maintenance">Maintenance</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-content>
+      </ion-modal>
     </ion-content>
   </ion-page>
 </template>
 
-<script setup>
-import { IonPage, IonContent, IonSearchbar, IonCard, IonCardContent, IonIcon, IonButton } from '@ionic/vue'
+<script setup lang="ts">
+import { IonPage, IonContent, IonSearchbar, IonCard, IonCardContent, IonIcon, IonButton, IonModal, IonHeader, IonToolbar, IonButtons, IonTitle, IonItem, IonSelect, IonSelectOption } from '@ionic/vue'
+import { OverlayEventDetail } from '@ionic/core/components';
 import AppFooter from '@/components/common/AppFooter.vue'
 import SerialItemCard from '@/components/product/SerialItemCard.vue'
 import { funnelOutline, caretBackCircleSharp } from 'ionicons/icons'
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+
+const router = useRouter();
+const modal = ref();
+const selectedStatus = ref('')
+
+const cancel = () => modal.value.$el.dismiss(null, 'cancel');
+
+const confirm = () => {
+  console.log('Selected:', selectedStatus.value)
+  modal.value?.$el.dismiss(selectedStatus.value, 'confirm')
+}
+
+const onWillDismiss = (event: CustomEvent<OverlayEventDetail>) => {
+  const { role } = event.detail;
+  console.log({ role })
+};
 
 const serialItems = [
   {
+    id: 'ididi',
     serial: 'APM001 INT',
     production: '04-02-2026',
     status: 'used',
@@ -73,6 +116,7 @@ const serialItems = [
     history: '2x Maintenance'
   },
   {
+    id: 'ididi',
     serial: 'APM002 INT',
     production: '12-03-2026',
     status: 'ready',
@@ -81,6 +125,7 @@ const serialItems = [
     history: '1x Maintenance'
   },
   {
+    id: 'ididi',
     serial: 'APM003 INT',
     production: '04-02-2026',
     status: 'used',
@@ -89,6 +134,7 @@ const serialItems = [
     history: '2x Maintenance'
   },
   {
+    id: 'ididi',
     serial: 'APM004 INT',
     production: '12-03-2026',
     status: 'maintenance',
@@ -97,8 +143,4 @@ const serialItems = [
     history: '1x Maintenance'
   },
 ]
-
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
 </script>
\ No newline at end of file
