From 9528a9400e0f53421564ce9d8e7ccf05e8eeb131 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 3 Apr 2024 05:04:24 +0700
Subject: [PATCH] Update DatePicker and DGangguan_DKPL components

---
 src/components/DatePicker.vue                 | 46 ++++++++++++++++++-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  | 14 +++---
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 31bb88e..3a7bb7b 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -15,14 +15,56 @@ const emit = defineEmits(['update:dateValue'])
 const customShortcuts = () => {
   return [
     {
-      label: 'Last 15 Days',
+      label: 'Hari Ini',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setHours(0, 0, 0, 0)), new Date()]
+      }
+    },
+    {
+      label: 'Kemarin',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 1)), new Date(date.setHours(0, 0, 0, 0))]
+      }
+    },
+    {
+      label: '7 Hari Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 7)), new Date()]
+      }
+    },
+    {
+      label: '15 Hari Terakhir',
       atClick: () => {
         const date = new Date()
         return [new Date(date.setDate(date.getDate() - 15)), new Date()]
       }
     },
     {
-      label: 'Last Years',
+      label: '30 Hari Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 30)), new Date()]
+      }
+    },
+    {
+      label: '3 Bulan Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setMonth(date.getMonth() - 3)), new Date()]
+      }
+    },
+    {
+      label: '6 Bulan Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setMonth(date.getMonth() - 6)), new Date()]
+      }
+    },
+    {
+      label: '1 Tahun Terakhir',
       atClick: () => {
         const date = new Date()
         return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index a347997..3697a7c 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -122,7 +122,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_lama"
         caption="Posko Asal"
@@ -130,7 +130,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_baru"
         caption="Posko Tujuan"
@@ -138,7 +138,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="150"
+        :width="250"
         alignment="center"
         data-field="status_akhir"
         caption="Status"
@@ -154,7 +154,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="150"
+        :width="250"
         alignment="center"
         data-field="nama_pelapor"
         caption="Nama Pelapor"
@@ -162,7 +162,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="alamat_pelapor"
         caption="Alamat Pelapor"
@@ -174,7 +174,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -194,7 +194,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_lama"
         caption="Posko"