From afac8a545e04000ec06c6407af7d4a9c7d50887e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 4 Mar 2024 20:40:23 +0700
Subject: [PATCH] Refactor form layout and styling

---
 src/components/Form/FiltersType/Type1.vue | 67 +++++++++++------------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index cc1615b..461b3d7 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -58,40 +58,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="filter-input-label"
-      >Unit Induk Distribusi/Wilayah:</label
-    >
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-  </div>
-
-  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="filter-input-label"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
-
-    <Select
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :selected="up3"
-      :placeholder="up3placeholder"
-    />
-  </div>
-
-  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="filter-input-label">Posko:</label>
-
-    <Select
-      @update:selected="setPosko($event)"
-      :data="itemsPosko"
-      :selected="posko"
-      :placeholder="poskoPlaceholder"
-    />
-  </div>
-
-  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="filter-input-label">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => (data.periode = value)" />
+      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+
+      <Select
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3placeholder"
+      />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Posko:</label>
+
+      <Select
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        :placeholder="poskoPlaceholder"
+      />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Periode Tanggal:</label>
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
+    </div>
   </div>
+  
 </template>