Add spacing and border styles to CSS file, update Transaksi.vue with tab functionality

src/components/Pages/Transaksi/Transaksi.vue

@@ -1,4 +1,31 @@
 <template>
+  <div class="flex flex-row items-center w-full mb-6 space-x-4">
+    <button
+      @click="tab = 'gangguan'"
+      type="button"
+      class="px-1 py-4 text-sm"
+      :class="[
+        tab == 'gangguan'
+          ? 'border-b-2 border-secondary-500 text-primary-500 font-semibold'
+          : 'font-medium text-gray-500'
+      ]"
+    >
+      Gangguan: Transaksi Aktif > SLA
+    </button>
+    <button
+      @click="tab = 'keluhan'"
+      type="button"
+      class="px-1 py-4 text-sm"
+      :class="[
+        tab == 'keluhan'
+          ? 'border-b-2 border-secondary-500 text-primary-500 font-semibold'
+          : 'font-medium text-gray-500'
+      ]"
+    >
+      Keluhan: Transaksi Aktif > SLA
+    </button>
+  </div>
+
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type17 @update:filters="(value) => (filters = value)" />
   </Filters>
@@ -154,6 +181,7 @@ const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
+const tab = ref('gangguan')
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()