From 30cd13cf3319bf482755852590a9580467539b98 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 4 Apr 2024 23:07:23 +0700
Subject: [PATCH] Add spacing and border styles to CSS file, update
 Transaksi.vue with tab functionality

---
 src/assets/css/style.css                     | 19 +++++++++++++
 src/components/Pages/Transaksi/Transaksi.vue | 28 ++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index bd90444..3d695c5 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -2216,6 +2216,12 @@ body {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2461,6 +2467,10 @@ body {
   border-bottom-width: 0px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -2477,6 +2487,10 @@ body {
   border-top-width: 0px;
 }
 
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -2564,6 +2578,11 @@ body {
   border-color: rgb(255 51 51 / var(--tw-border-opacity));
 }
 
+.border-secondary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 162 185 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index daeec91..b6bd0e7 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/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()