Merge branch 'dev-bagus' into playground

src/assets/css/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -50,6 +52,8 @@ html {
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -979,14 +989,30 @@ body {
   bottom: 0px;
 }
 
+.-bottom-px {
+  bottom: -1px;
+}
+
 .-left-2 {
   left: -0.5rem;
 }
 
+.-left-px {
+  left: -1px;
+}
+
+.-right-px {
+  right: -1px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
 
+.bottom-auto {
+  bottom: auto;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -1197,8 +1223,13 @@ body {
   margin-right: -3rem;
 }
 
+<<<<<<< HEAD
 .-mr-2 {
   margin-right: -0.5rem;
+=======
+.-mt-px {
+  margin-top: -1px;
+>>>>>>> dev-bagus
 }
 
 .mb-1 {
@@ -1269,6 +1300,13 @@ body {
   margin-right: 0.75rem;
 }
 
+<<<<<<< HEAD
+=======
+.mr-3\.5 {
+  margin-right: 0.875rem;
+}
+
+>>>>>>> dev-bagus
 .mt-0 {
   margin-top: 0px;
 }
@@ -1313,6 +1351,14 @@ body {
   margin-top: 1.5rem;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
+.box-content {
+  box-sizing: content-box;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1376,6 +1422,7 @@ body {
   height: 4rem;
 }
 
+<<<<<<< HEAD
 .h-2 {
   height: 0.5rem;
 }
@@ -1388,14 +1435,19 @@ body {
   height: 7rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .h-3 {
   height: 0.75rem;
 }
 
+<<<<<<< HEAD
 .h-3\.5 {
   height: 0.875rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .h-4 {
   height: 1rem;
 }
@@ -1449,6 +1501,10 @@ body {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen-80 {
   height: 80vh;
 }
@@ -1521,22 +1577,30 @@ body {
   width: 0.5rem;
 }
 
+<<<<<<< HEAD
 .w-20 {
   width: 5rem;
 }
 
 .w-28 {
   width: 7rem;
+=======
+.w-2\.5 {
+  width: 0.625rem;
+>>>>>>> dev-bagus
 }
 
 .w-3 {
   width: 0.75rem;
 }
 
+<<<<<<< HEAD
 .w-3\.5 {
   width: 0.875rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .w-4 {
   width: 1rem;
 }
@@ -1629,6 +1693,7 @@ body {
   max-width: 100%;
 }
 
+<<<<<<< HEAD
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1637,6 +1702,8 @@ body {
   max-width: 28rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1669,6 +1736,10 @@ body {
   flex-grow: 1;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -1824,6 +1895,13 @@ body {
   scroll-padding-bottom: 0.5rem;
 }
 
+<<<<<<< HEAD
+=======
+.list-none {
+  list-style-type: none;
+}
+
+>>>>>>> dev-bagus
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1902,10 +1980,6 @@ body {
   gap: 0.25rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2030,12 +2104,24 @@ body {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2044,6 +2130,10 @@ body {
   white-space: pre-wrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2064,19 +2154,30 @@ body {
   border-radius: 0.375rem;
 }
 
+<<<<<<< HEAD
 .rounded-none {
   border-radius: 0px;
+=======
+.rounded-sm {
+  border-radius: 0.125rem;
+>>>>>>> dev-bagus
 }
 
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-b-2xl {
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
 }
 
+<<<<<<< HEAD
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -2087,6 +2188,8 @@ body {
   border-bottom-left-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .rounded-b-none {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -2122,6 +2225,7 @@ body {
   border-bottom-right-radius: 9999px;
 }
 
+<<<<<<< HEAD
 .rounded-r-lg {
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
@@ -2135,6 +2239,11 @@ body {
 .rounded-r-none {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
+=======
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+>>>>>>> dev-bagus
 }
 
 .rounded-t-2xl {
@@ -2142,6 +2251,7 @@ body {
   border-top-right-radius: 1rem;
 }
 
+<<<<<<< HEAD
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -2152,11 +2262,14 @@ body {
   border-top-right-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .rounded-t-none {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
 
+<<<<<<< HEAD
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -2189,6 +2302,8 @@ body {
   border-top-right-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .border {
   border-width: 1px;
 }
@@ -2326,6 +2441,7 @@ body {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -2354,6 +2470,8 @@ body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2364,6 +2482,11 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2392,6 +2515,7 @@ body {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2411,6 +2535,8 @@ body {
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -2421,11 +2547,14 @@ body {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -2607,6 +2736,10 @@ body {
   --tw-bg-opacity: 0.05;
 }
 
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
 .bg-opacity-60 {
   --tw-bg-opacity: 0.6;
 }
@@ -2619,14 +2752,28 @@ body {
   --tw-bg-opacity: 0.8;
 }
 
+<<<<<<< HEAD
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
+=======
+.bg-multiselect-caret {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-remove {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-spinner {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
+>>>>>>> dev-bagus
 }
 
 .bg-none {
   background-image: none;
 }
 
+<<<<<<< HEAD
 .from-gray-100 {
   --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
@@ -2641,16 +2788,23 @@ body {
   background-size: cover;
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-center {
   background-position: center;
 }
 
+<<<<<<< HEAD
 .fill-\[\#4f46e5\] {
   fill: #4f46e5;
 }
 
 .fill-current {
   fill: currentColor;
+=======
+.bg-no-repeat {
+  background-repeat: no-repeat;
+>>>>>>> dev-bagus
 }
 
 .fill-gray-500 {
@@ -2715,10 +2869,6 @@ body {
   padding: 0px;
 }
 
-.p-0\.5 {
-  padding: 0.125rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -2895,12 +3045,17 @@ body {
   padding-left: 0.75rem;
 }
 
+<<<<<<< HEAD
 .pr-0 {
   padding-right: 0px;
 }
 
 .pr-0\.5 {
   padding-right: 0.125rem;
+=======
+.pl-3\.5 {
+  padding-left: 0.875rem;
+>>>>>>> dev-bagus
 }
 
 .pr-10 {
@@ -2911,6 +3066,10 @@ body {
   padding-right: 3rem;
 }
 
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2919,6 +3078,13 @@ body {
   padding-right: 0.75rem;
 }
 
+<<<<<<< HEAD
+=======
+.pr-3\.5 {
+  padding-right: 0.875rem;
+}
+
+>>>>>>> dev-bagus
 .pr-4 {
   padding-right: 1rem;
 }
@@ -2975,8 +3141,13 @@ body {
   text-align: start;
 }
 
+<<<<<<< HEAD
 .align-middle {
   vertical-align: middle;
+=======
+.font-sans {
+  font-family: Plus Jakarta Sans, sans-serif;
+>>>>>>> dev-bagus
 }
 
 .text-2xl {
@@ -3071,10 +3242,18 @@ body {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .leading-relaxed {
   line-height: 1.625;
 }
 
+.leading-snug {
+  line-height: 1.375;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -3097,6 +3276,7 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3117,6 +3297,8 @@ body {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(21 22 23 / var(--tw-text-opacity));
@@ -3166,6 +3348,11 @@ body {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-100 {
+  --tw-text-opacity: 1;
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
 .text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(74 222 128 / var(--tw-text-opacity));
@@ -3316,6 +3503,10 @@ body {
   color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
+.text-transparent {
+  color: transparent;
+}
+
 .text-vtd-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -3434,6 +3625,10 @@ body {
   opacity: 0.75;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3521,6 +3716,7 @@ body {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+<<<<<<< HEAD
 .ring-blue-400\/50 {
   --tw-ring-color: rgb(96 165 250 / 0.5);
 }
@@ -3529,6 +3725,8 @@ body {
   --tw-ring-color: rgb(29 78 216 / 0.1);
 }
 
+=======
+>>>>>>> dev-bagus
 .ring-gray-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
@@ -3943,6 +4141,7 @@ body {
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
+<<<<<<< HEAD
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -3955,6 +4154,11 @@ body {
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+=======
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+>>>>>>> dev-bagus
 }
 
 .hover\:bg-gray-50:hover {
@@ -4038,6 +4242,7 @@ body {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -4046,6 +4251,10 @@ body {
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
+=======
+.hover\:bg-opacity-10:hover {
+  --tw-bg-opacity: 0.1;
+>>>>>>> dev-bagus
 }
 
 .hover\:text-primary-500:hover {
@@ -4063,6 +4272,7 @@ body {
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .hover\:shadow-sm:hover {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -4071,6 +4281,10 @@ body {
 
 .focus\:z-10:focus {
   z-index: 10;
+=======
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+>>>>>>> dev-bagus
 }
 
 .focus\:border-0:focus {
@@ -4417,8 +4631,13 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .group:focus .group-focus\:visible {
   visibility: visible;
+=======
+.group:hover .group-hover\:opacity-60 {
+  opacity: 0.6;
+>>>>>>> dev-bagus
 }
 
 .peer:checked ~ .peer-checked\:text-primary-500 {
@@ -4426,6 +4645,7 @@ body {
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 :is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
@@ -5158,6 +5378,8 @@ body {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 @media (min-width: 640px) {
   .sm\:static {
     position: static;
@@ -5743,3 +5965,105 @@ body {
     line-height: 1.25rem;
   }
 }
+
+.rtl\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
+  left: auto;
+}
+
+.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *) {
+  right: 0px;
+}
+
+.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.25rem;
+}
+
+.rtl\:ml-3:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.75rem;
+}
+
+.rtl\:ml-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.875rem;
+}
+
+.rtl\:mr-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0px;
+}
+
+.rtl\:pl-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0px;
+}
+
+.rtl\:pl-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.5rem;
+}
+
+.rtl\:pl-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.75rem;
+}
+
+.rtl\:pl-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.875rem;
+}
+
+.rtl\:pr-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0px;
+}
+
+.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.5rem;
+}
+
+.rtl\:pr-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.75rem;
+}
+
+.rtl\:pr-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.875rem;
+}
+
+.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-opacity-50 {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:text-vtd-primary-400 {
+    --tw-text-opacity: 1;
+    color: rgb(53 124 141 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-opacity-70 {
+    --tw-text-opacity: 0.7;
+  }
+
+  .dark\:hover\:text-vtd-primary-300:hover {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:border-vtd-primary-500:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(3 91 113 / var(--tw-border-opacity));
+  }
+
+  .dark\:focus\:bg-opacity-50:focus {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:focus\:text-vtd-primary-300:focus {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:ring-opacity-20:focus {
+    --tw-ring-opacity: 0.2;
+  }
+
+  .dark\:focus\:ring-opacity-25:focus {
+    --tw-ring-opacity: 0.25;
+  }
+}

src/components/Button.vue

@@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
 })
 
 const emit = defineEmits(['on:click'])
+
 </script>
 
 <template>

src/components/DatePicker.vue

@@ -11,7 +11,25 @@ const formatter = ref({
 })
 
 const emit = defineEmits(['update:dateValue'])
-
+const customShortcuts = () => {
+  return [
+    {
+      label: "Last 15 Days",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setDate(date.getDate() + 1)), date];
+      },
+    },
+    {
+      label: "Last Years",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
+      },
+    },
+   
+  ];
+};
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })
@@ -23,8 +41,8 @@ watch(dateValue, (newValue) => {
       v-model="dateValue"
       :formatter="formatter"
       separator=" s/d "
-      :shortcuts="false"
-      :auto-apply="false"
+      :shortcuts="customShortcuts"
+      :auto-apply="true"
       as-single
       use-range
       v-slot="{ value, placeholder }"

src/components/Form/Filters.vue

@@ -2,19 +2,10 @@
 <script setup lang="ts">
 // components
 import Button from '@/components/Button.vue'
-import { useSearchStore } from '@/stores/filtersAction'
-
 // icons
 import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
-const cariButton = useSearchStore()
-defineProps({
-  reportButton: {
-    type: Boolean,
-    default: false
-  }
-})
 
-const emit = defineEmits(['runSearch'])
+const emit = defineEmits(['runSearch','resetForm'])
 </script>
 
 <template>
@@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
     <div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
       <div class="filter-buttons flex gap-3 flex-wrap">
         <Button
-          @click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
+          @on:click="() => emit('resetForm')"
           label="Ulangi"
           style-type="outline"
           class-name="bg-white"
@@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
         </Button>
 
         <Button
-          v-if="reportButton"
           label="Lihat Laporan"
           style-type="outline"
           class-name="bg-white"
-        >
+        > 
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 

src/components/Form/FiltersType/Type1.vue

@@ -12,15 +12,15 @@ import {
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const uppp = ref({ id: 0, name: uppPlaceholder })
+const up3 = ref({ id: 0, name: up3laceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: posko.value,
   periode: ''
 })
@@ -32,12 +32,12 @@ watch(data.value, (value) => {
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  up3.value = { id: 0, name: up3laceholder }
   data.value.uid = value
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  up3.value = value
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
@@ -57,35 +57,21 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Induk Distribusi/Wilayah:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :selected="uppp"
-      :placeholder="uppPlaceholder"
-    />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select
-      @update:selected="setPosko($event)"
-      :data="itemsPosko"
-      :selected="posko"
-      :placeholder="poskoPlaceholder"
-    />
+    <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">

src/components/Form/FiltersType/Type10.vue

@@ -1,13 +1,73 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+ 
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minJmlLapor: 1,
+  maxJmlLapor: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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">
@@ -15,7 +75,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select 
+      @update:selected="setUp3($event)" 
+      :data="itemsUp3" 
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +87,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -39,9 +107,13 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <Select placeholder="1" />
+      <InputNumber @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <Select placeholder="2" />
+      <InputNumber  @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type11.vue

@@ -1,13 +1,98 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+  
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minDurasiRecoveryTime: 1,
+  maxDurasiRecoveryTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiRecoveryTime = 46
+    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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">
@@ -15,7 +100,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +112,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -39,12 +132,30 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <Select placeholder="1" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiRecoveryTime =value
+          }
+          "
+        @value="data.minDurasiRecoveryTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <Select placeholder="2" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiRecoveryTime = value
+          }
+          "
+        @value="data.maxDurasiRecoveryTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type12.vue

@@ -2,13 +2,91 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithSuffix from '../InputWithSuffix.vue';
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minDurasiResponseTime: 1,
+  maxDurasiResponseTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+const triggerInput = ref(false)
+const sla = [
+  {
+    id: 0,
+    name: 'Durasi Menit'
+  },
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiResponseTime = 46
+    data.value.maxDurasiResponseTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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">
@@ -16,7 +94,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -24,7 +106,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -40,12 +126,30 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiResponseTime =value
+          }
+          "
+        @value="data.minDurasiResponseTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiResponseTime = value
+          }
+          "
+        @value="data.maxDurasiResponseTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type13.vue

@@ -1,44 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup @update:group-value="(value) => {
+      data.group = value
+      console.log('data.group', value)
+    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>

src/components/Form/FiltersType/Type14.vue

@@ -1,37 +1,71 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Distribusi/Wilayah';
+const up3Placeholder = 'Semua Area';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  up3.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  up3.value = value;
+  selectedUp3Posko(value);
+  posko.value = { id: 0, name: poskoPlaceholder };
+  data.value.up3 = value;
+};
+
+const setPosko = (value: any) => {
+  posko.value = value;
+  selectedPosko(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
+
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
-
-    <Select placeholder="Semua Distribusi/Wilayah"/>
+    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Area:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
 
-    <Select placeholder="Semua Area" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Posko:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
 
-    <Select placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -2,6 +2,21 @@
   import InputWithFilter from '../InputWithFilter.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+  const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
 </script>
 
 <template>

src/components/Form/FiltersType/Type16.vue

@@ -1,15 +1,81 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
-fetchMedia();
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsMedia
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const mediaPlaceholder = 'Semua Media'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: "", name: mediaPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  media: media.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const setMedia = (value: any) => {
+  media.value = value
+  data.value.media = value
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+  fetchMedia()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      :data="itemsUid"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -17,27 +83,45 @@ fetchMedia();
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      :data="itemsUp3"
+      @update:selected="setUp3($event)"
+      :placeholder="up3Placeholder"
+      :selected="up3"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select
+      :data="itemsPosko"
+      @update:selected="setPosko($event)"
+      :placeholder="poskoPlaceholder"
+      :selected="posko"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
 
-    <Select placeholder="Semua Media" :data="itemsMedia" />
+    <Select
+      :selected="media"
+      @update:selected="setMedia($event)"
+      :placeholder="mediaPlaceholder"
+      :data="itemsMedia"
+    />
   </div>
-  
+
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
-      " />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
 </template>

src/components/Form/FiltersType/Type17.vue

@@ -2,6 +2,10 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithFilter from '../InputWithFilter.vue'
+  import { ref } from 'vue'
+  const data = ref({
+    periode: '',
+  })
 </script>
 
 <template>

src/components/Form/FiltersType/Type18.vue

@@ -1,17 +1,16 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
-fetchData();
+fetchUid();
 
-const departments = [
-    { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
-    { id: 2, name: 'HR', contact: 'Kenton Towne' },
-    { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
-    { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
-    { id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
+const jenisTransakasi = [
+    { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
+    { id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM',  }, 
+    { id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM',  },  
+    { id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev'  },
   ]
 
 </script>
@@ -38,12 +37,15 @@ const departments = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
 
-    <SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
+    <SelectMulti 
+      :tags="jenisTransakasi" 
+      placeholder="Semua Jenis Transaksi" 
+      useLabel 
+      label="Jenis Transaksi"
+      />
   </div>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
     <DatePicker  />
   </div>
-</template> -->
-
-<template></template>
+</template>

src/components/Form/FiltersType/Type2.vue

@@ -1,45 +1,94 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
-import { ref } from 'vue';
+import { selectedUid,  selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { onMounted, ref } from 'vue';
+import { getMonthName } from '@/utils/texts';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const regionalPlaceholder = 'Semua Regional';
+const bulanPlaceholder = getMonthName(new Date().getMonth());
+const tahunPlaceholder = new Date().getFullYear().toString();
+const bulanSelected = new Date().getMonth();
+const tahunSelected = new Date().getFullYear();
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
+const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
+const emit = defineEmits(['update:filters'])
+// Find index of January
+const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
+console.log(bulanSelected)
+// Remove January if found
+if (bulanIndex !== -1) {
+  months.splice(bulanIndex, 1);
+}
+// Find index of current year
+const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
+if (tahunIndex !== -1) {
+  years.value.splice(tahunIndex, 1);
+}
+const data = ref({
+  regional: regional.value,
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  bulan : bulan.value,
+  tahun : tahun.value
+})
 
 const setRegional = (value: any) => {
   regional.value = value;
+  fetchUid(); 
+  // harusnya fetchUidWithRegional(value);
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
+  data.value.regional = value;
+  
 };
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value); 
   uppp.value = { id: 0, name: up3Placholder };
+  data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUp3Ulp(value);
+  data.value.posko = value;
 };
+const setMonth = (value: any) => {
+  bulan.value = value;
+  data.value.bulan = value;
+  console.log(data.value)
 
+};
+const setYear = (value: any) => {
+  tahun.value = value;
+  data.value.tahun = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchRegional()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
 
-    <Select @update:selected="setRegional($event)" :data="itemsRegional"  :placeholder="regionalPlaceholder" />
+    <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -64,10 +113,9 @@ const setUlp = (value: any) => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select :data="months" placeholder="Pilih Bulan" />
-      <Select :data="years" placeholder="Pilih Tahun" />
+      <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
+      <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
-</template> -->
+</template>
 
-<template></template>

src/components/Form/FiltersType/Type3.vue

@@ -1,32 +1,44 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-import { ref } from 'vue';
-fetchData();
+import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
-
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
   uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUlp(value);
+  data.value.posko = value;
 };
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
@@ -56,5 +68,4 @@ const setUlp = (value: any) => {
       }
       " />
   </div>
-</template> -->
-<template></template>
+</template>

src/components/Form/FiltersType/Type4.vue

@@ -1,13 +1,56 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  jenisLaporan : ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: "", name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  // fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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">
@@ -15,7 +58,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select 
+      @update:selected="setUp3($event)" 
+      :data="itemsUp3" 
+      :placeholder="up3Placeholder"
+     />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +70,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -31,7 +82,17 @@
       >Jenis Laporan:</label
     >
 
-    <Select placeholder="Laporan Berulang Unit" />
+    <Select
+      @update:selected="(value) => {
+        data.jenisLaporan = value
+      }"
+      :data="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Berulang Pelanggan' },
+        { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
+      ]"
+      :placeholder="'Semua Jenis Laporan'"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type5.vue

@@ -1,13 +1,68 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const uppp = ref({ id: 0, name: uppPlaceholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,19 +70,18 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-
-     <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => {
         data.periode = value
       }
       " />

src/components/Form/FiltersType/Type6.vue

@@ -1,57 +1,90 @@
-<!-- <script setup lang="ts">
-  import InputNumber from '@/components/Form/InputNumber.vue'
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
-import { useTotalReport } from '@/stores/totalReport';
-  fetchData();
-  const changeMinReport = (value: any) => {
-    useTotalReport().setDataMin(value)
-  }
-  const changeMaxReport = (value: any) => {
-    useTotalReport().setDataMax(value)
-  }
+<script setup lang="ts">
+import InputNumber from '@/components/Form/InputNumber.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minJmlLapor: 1,
+  maxJmlLapor: 1
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="itemsUid"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
   </div>
-  
+
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
-      " />
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber :value="1" @change="changeMinReport($event.target.value)" />
+      <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
+      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
-</template> -->
+</template>
 
-<template></template>

src/components/Form/FiltersType/Type7.vue

@@ -1,69 +1,120 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InputWithSuffix from '../InputWithSuffix.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue';
 import { useTotalDuration } from '@/stores/totalDuration';
-import { ref } from 'vue';
-  const data = [
-   
-    {
-      id : 1,
-      name : 'Dibawah  / Sesuai SLA (<= 45 menit)'
-    },
-    {
-      id : 2,
-      name : 'Melebihi SLA (> 45 menit)'
-    }
-  
-  ]
-  const triggerInput = ref(false)
-  const changeDuration = (value: any) => {
-    if(value.id === 0 ){
-      console.log('Durasi Menit')
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(5)
-      triggerInput.value = false
-    }else if(value.id === 1){
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(45)
-      console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
-      triggerInput.value = true
-    }else{
-      useTotalDuration().setDataMin(46)
-      useTotalDuration().setDataMax(7*60*24)
-      triggerInput.value = true
-      console.log('Melebihi SLA (> 45 menit)')
-    }
+
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref, watch } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minTime: useTotalDuration().getDataMin().split(' ')[0],
+  maxTime: useTotalDuration().getDataMax().split(' ')[0]
+})
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
   }
+
+]
+
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+  useTotalDuration().setDataMin(value)
+
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+  useTotalDuration().setDataMax(value)
+}
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    setMin("1 Menit")
+    setMax("5 Menit")
+    console.log('Durasi Menit')
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    setMin("1 Menit")
+    setMax("45 Menit")
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    setMin("45 Menit")
+    setMax(99999 * 60 * 24+ ' Menit')
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+}
+watch(data, (newValue) => {
+  emit('update:filters', newValue)
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
   </div>
-  
+
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
@@ -71,12 +122,15 @@ import { ref } from 'vue';
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
+        <InputWithSuffix 
+        :value="`${data.minTime} Menit`"
+         />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
+        <InputWithSuffix 
+        :value="`${data.maxTime} Menit`"/>
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -1,29 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+} from './reference'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const uppp = ref({ id: 0, name: uppPlaceholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="uppPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -2,13 +2,71 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const uppp = ref({ id: 0, name: uppPlaceholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: "" ,name: poskoPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <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">
@@ -16,13 +74,21 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="uppPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select 
+      @update:selected="setPosko($event)" 
+      :data="itemsPosko" 
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/reference.ts

@@ -2,7 +2,7 @@ import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
 import { useUp3Store } from '@/stores/up3'
-import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 interface Item {
   id: any
@@ -56,12 +56,14 @@ const fetchMedia = () => {
 const fetchUid = async () => {
   try {
     const res = await getUid()
-    itemsUid.value = res.data.map((item: any) => ({
-      id: item.id,
-      name: item.nama
-    }))
+    itemsUid.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama.toUpperCase(),
+      }
+    ));
   } catch (error) {
-    console.error('Error fetching data:', error)
+    console.error('Error fetching data:', error);
   }
 }
 
@@ -98,31 +100,20 @@ const fetchDataPosko = async (up3: number) => {
     console.error('Error fetching data:', error)
   }
 }
-const fetchRegional = () => {
-  itemsRegional.value = [
-    { id: '1', name: 'Wilayah Sumatera' },
-    { id: '2', name: 'Wilayah Jawa Bali' },
-    { id: '3', name: 'Wilayah Kalimantan' },
-    { id: '4', name: 'Wilayah Sulawesi' },
-    { id: '5', name: 'Wilayah Nusa Tenggara' },
-    { id: '6', name: 'Wilayah Maluku Papua' }
-  ]
-}
-const fetchStatus = (data: any) => {
-  const status = [
-    { id: '8', name: 'Selesai' },
-    { id: '7', name: 'Nyala' },
-    { id: '6', name: 'Pengalihan' },
-    { id: '5', name: 'Dialihkan' },
-    { id: '4', name: 'Dalam Pengerjaan' },
-    { id: '3', name: 'Dalam Perjalanan' },
-    { id: '2', name: 'Penugasan Regu' },
-    { id: '1', name: 'lapor' }
-  ]
-  const filteredStatus = status.find((item) => item.id == data)
-  const name = filteredStatus ? filteredStatus.name : null
-  return name
+const fetchRegional = async () => {
+  try {
+    const res = await getRegional()
+    itemsRegional.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama.toUpperCase(),
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 }
+
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id)
   fetchDataUp3(value.id)

src/components/Form/InlineRadioGroup.vue

@@ -3,8 +3,10 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input :id="`${item.id}`" type="radio" name="radio"
-            :checked="item.hasOwnProperty('checked') && item.checked === true"
+          <input v-model="groupValue" 
+            type="radio" name="radio"
+            :checked="itemSelected.id === item.id ? true : false"
+            @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
@@ -15,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType } from 'vue'
+import { ref, watch, type PropType, onMounted } from 'vue'
 
 interface Item {
   id: number;
@@ -23,10 +25,24 @@ interface Item {
   checked?: boolean;
 }
 
-defineProps({
+const onChange= (e:Item) => {
+  itemSelected.value = e
+  emit('update:groupValue', e)
+}
+
+const props = defineProps({
   radioItems: {
     type: Array as PropType<Item[]>,
     required: true
   }
 })
+
+const itemSelected = ref(props.radioItems[0])
+const emit = defineEmits(['update:groupValue'])
+const groupValue = ref(1)
+
+onMounted(() => {
+  itemSelected.value = props.radioItems[0]
+})
+
 </script>

src/components/Form/InputNumber.vue

@@ -1,36 +1,43 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:timeValue'])
+const timeValue = ref(1)
+watch(timeValue, (newValue) => {
+  emit('update:timeValue', newValue)
+})
+
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+      v-model="timeValue"
       autocomplete="off"
       type="number"
-      :value ="props.value"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
       class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"

src/components/Form/InputWithSuffix.vue

@@ -1,38 +1,52 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String,
+    default: '1 Menit'
+  }
+ 
+})
+const handleInput = (e :any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
+const handleBlur = (e :any) => {
+  e.value = e.value ? e.value + ' Menit' : ''
+}
+const handleFocus = (e:any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div 
+ 
+  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+     :value="props.value"
       autocomplete="off"
       type="text"
-      :value ="props.value"
       :placeholder="placeholder"
-      :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
-      onblur="this.value = this.value ? this.value + ' Menit' : ''"
-      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      :disabled="disabled"
+      @oninput="handleInput($event)"
+      @onblur="handleBlur($event)"
+      @onfocus="handleFocus($event)"
       class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
     />
   </div>

src/components/Pages/Anomali/Table_61.vue

@@ -1,17 +1,24 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-        :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+        column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
@@ -100,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -110,6 +117,15 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -145,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_62.vue

@@ -4,13 +4,14 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
         :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
         @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
@@ -41,6 +42,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_63.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -11,65 +17,70 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
+                css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
+                        caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
+                        data-type="number" caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxColumn>
     </DxDataGrid>
 
-    <AnomaliTable4 />
+    <AnomaliTable4 :filters-detail="filters" />
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -78,6 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -112,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_64.vue

@@ -4,53 +4,56 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-        :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+        column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
+            css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
             <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="e=b/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="f=c/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
+                    data-type="number" caption="g=e+f" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
 
@@ -58,6 +61,12 @@
 </template>
 
 <script setup lang="ts">
+defineProps({
+    filtersDetail: {
+        type: Object as PropType<any>,
+        required: true
+    }
+})
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -65,7 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { ref, watch, type PropType } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const filtersDetail = ref({}); // Declare the 'filters' variable
+watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
+    filterData(newValue)
+}, { immediate: true })
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -99,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
+  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
+
+    ) {
+        nama_petugas
+        nama_posko
+        persen_penyelesaian_petugas_anomali
+        persen_penyelesaian_petugas_anomali_cc_123
+        persen_penyelesaian_petugas_anomali_pln_mobile
+        total_penyelesaian_petugas_anomali
+        total_penyelesaian_petugas_anomali_cc_123
+        total_penyelesaian_petugas_anomali_pln_mobile
+        total_wo
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
 
 </script>

src/components/Pages/Anomali/Table_65.vue

@@ -1,4 +1,10 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -11,7 +17,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
@@ -76,7 +83,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -86,6 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -121,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_66.vue

@@ -10,7 +10,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
@@ -34,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -41,6 +44,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const loading = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Cico/Table_60.vue

@@ -1,39 +1,48 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
+            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
                 caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
                 caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number" 
+            caption="Rata-rata RPT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
-                caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
+                caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -42,7 +51,20 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { Type1 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const data = ref<any[]>([])
+const showDetail = ref(false)
+const showData = () => {
+    showDetail.value = true
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -71,18 +93,72 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+
+
+const filters = ref()
 </script>

src/components/Pages/Ctt/Table_67.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,46 +13,47 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn alignment="center"  caption="CC 123" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
+                    <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
+                <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
+                <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -55,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -64,7 +71,16 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import Filters from '@/components/Form/Filters.vue'
+import { Type3 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,17 +110,74 @@ const onExporting = (e: any) => {
     }
 }
 
+const GET_laporanCttKwhPeriksa = gql`
+  query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCttKwhPeriksa(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        dlpd
+history_p2ti
+nama_posko
+rekomendasi_sistem_mendatangkan_petugas
+total_wo
+total_wo_cc123
+total_wo_comcen
+total_wo_loket
+total_wo_pln_mobile
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCttKwhPeriksa,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
-    })
-})
+const showData = () => {
+    showDetail.value = true
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_1.vue

@@ -1,202 +1,67 @@
 <template>
-  <Filters
-    @run-search="
-      () => {
-        console.log(filters)
-        filterData(filters)
-      }
-    "
-    class="mb-4"
-  >
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+  <Filters @run-search="() => {
+    console.log(filters)
+    filterData(filters)
+  }
+    " class="mb-4">
+    <Type1 @update:filters="(value) => {
+      filters = value
+    }
+      " />
   </Filters>
 
-  <div id="data">
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :remote-operations="true"
-      :data-source="data"
-      key-expr="no_laporan"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+  <div id="dataTable">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
+      :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+      :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :allow-column-resizing="true" column-resizing-mode="widget">
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager
-        :visible="true"
-        :allowed-page-sizes="[5, 10, 20, 'all']"
-        display-mode="full"
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="true"
-      />
+      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+        :show-info="true" :show-navigation-buttons="true" />
       <DxSelection mode="single" />
       <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
-
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="pembuat_laporan"
-        caption="Pembuat Laporan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_dialihkan"
-        caption="Tgl Dialihkan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_respon_time"
-        caption="Durasi Response Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko_asal"
-        caption="Posko Awal"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko_tujuan"
-        caption="Posko Tujuan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko"
-        caption="Posko"
-        cell-template="data"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+        caption="No Laporan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
+        caption="Pembuat Laporan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        caption="Tgl Lapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        caption="Tgl Response" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        caption="Tgl Recovery" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+        caption="Durasi Response Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
+        caption="Posko Awal" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
+        caption="Posko Tujuan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+        caption="IDPEL/NO METER" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        caption="Nama Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        caption="Alamat Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        caption="No Telp Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
+        cell-template="data" />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -205,107 +70,135 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="showDetail"
-    title="Daftar Gangguan Dialihkan ke Posko Lain"
-    @on-close="closeDetail"
-  >
+  <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          No Laporan:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Pembuat Laporan:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Laporan:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Dialihkan:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Respon:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Recovery:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Durasi Response Time:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Durasi Recovery Time:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko Awal:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko Tujuan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Status:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          IDPEL/NO METER:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Nama Pelapor:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Alamat Pelapor:
+        </h3>
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Pembuat Laporan:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Keterangan Pelapor:
+        </h3>
         <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Sumber Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
+
   </DetailDialog>
 </template>
 
@@ -325,41 +218,62 @@ import {
 } from 'devextreme-vue/data-grid'
 import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { fetchStatus } from '@/components/Form/FiltersType/reference'
-const position = { of: '#data' }
+const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-
+const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
+    const doc = new jsPDF({
+      orientation: 'landscape',
+      unit: 'mm',
+      format: 'a4',
+     
+    })
+
+    // autoTable(doc, {
+   
+    //   margin: { top: 20 }, // Adjust top margin as needed
+    //   styles: {
+    //     fontSize: 8,
+    //     overflow: 'linebreak', // Enable linebreaks to fit content
+    //   },
+    //   startY: 10, // Adjust startY position as needed
+    //   head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+    //   body: data.value.map((item) =>
+    //     [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko])
+
+    // })
+
 
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5
     }).then(() => {
-      doc.save(`.pdf`)
+      doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
     })
   } else {
     const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
     exportToExcel({
       component: e.component,
@@ -367,7 +281,7 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
       })
     })
 
@@ -376,7 +290,7 @@ const onExporting = (e: any) => {
 }
 
 const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
     daftarGangguanDialihkanKePoskoLain(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -385,49 +299,36 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       idUp3: $idUp3
     ) {
       alamat_pelapor
+      pembuat_laporan
       durasi_recovery_time
       durasi_response_time
+      waktu_lapor
       waktu_dialihkan
       waktu_recovery
       waktu_response
-      id_gangguan
       idpel_nometer
       keterangan_pelapor
       media
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko_asal
-      posko_tujuan
+      nama_posko_lama
+      nama_posko_baru
       status_akhir
       waktu_recovery
       waktu_response
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(
-  GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-// const detected = computed(() => reportButton.isTriggerChange)
-const filterData = (filters: any) => {
-  console.log(filters)
-  const dateValue = filters().periode.split(' s/d ')
-  const posko = filters().posko ? filters().posko : ''
-  const up3 = filters().up3 ? filters().up3 : 0
-  const uid = filters().uid ? filters().uid : 0
+const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
   refetch({
-    dateFrom: dateValue[0].split('-').reverse().join('-'),
-    dateTo: dateValue[1].split('-').reverse().join('-'),
-    posko: posko,
-    idUid: uid,
-    idUp3: up3
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -436,7 +337,7 @@ const filterData = (filters: any) => {
           ...data.value,
           {
             ...item,
-            status_akhir: fetchStatus(item.status_akhir)
+            posko: item.nama_posko_baru
           }
         ]
       })
@@ -449,6 +350,16 @@ const filterData = (filters: any) => {
     console.log(error)
   })
 }
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data

src/components/Pages/Gangguan/Table_10.vue

@@ -1,6 +1,12 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -9,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -77,8 +82,10 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -111,7 +118,7 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
   query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -178,19 +185,15 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ')
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -203,19 +206,13 @@ watch(detected, () => {
     onError((queryError) => {
         console.log(queryError)
     })
-})
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const filters = ref();
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
 </script>

src/components/Pages/Gangguan/Table_11.vue

@@ -1,5 +1,11 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,11 +14,13 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
-
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
                 css-class="custom-table-column" :group-index="0" />
@@ -148,8 +156,9 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -168,7 +177,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
 query rekapitulasiGangguanPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -204,7 +213,6 @@ query rekapitulasiGangguanPerPosko(
         total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -240,95 +248,30 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E'];
-
-const createDummy = () => {
-    var dummy = data.value;
-    for (let i = 1; i <= 50; i++) {
-        const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)];
-
-        const totalLaporan = Math.floor(Math.random() * 21);
-        const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1));
-        const laporanBelumSelesai = totalLaporan - laporanSelesai;
-
-        const responseTimeTotal = Math.floor(Math.random() * 31);
-        const responseTimeRataRata = (Math.random() * 21) + 10;
-        const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11);
-        const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11);
-
-        const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla;
-
-        const recoveryTimeTotal = Math.floor(Math.random() * 31);
-        const recoveryTimeRataRata = (Math.random() * 21) + 10;
-        const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11);
-        const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11);
-
-        const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla;
-
-        const entry = {
-            no: i,
-            posko: randomPosko,
-            laporan: {
-                total: totalLaporan,
-                sudahSelesai: {
-                    jml: laporanSelesai,
-                    persen: (laporanSelesai / totalLaporan) * 100,
-                },
-                belumSelesai: {
-                    jml: laporanBelumSelesai,
-                    persen: (laporanBelumSelesai / totalLaporan) * 100,
-                },
-            },
-            responseTime: {
-                menit: {
-                    total: responseTimeTotal,
-                    rataRata: responseTimeRataRata,
-                    max: responseTimeMax,
-                    min: responseTimeMin,
-                },
-                laporan: {
-                    lebihSla: responseTimeLebihSla,
-                    kurangSla: responseTimeKurangSla,
-                },
-            },
-            recoveryTime: {
-                menit: {
-                    total: recoveryTimeTotal,
-                    rataRata: recoveryTimeRataRata,
-                    max: recoveryTimeMax,
-                    min: recoveryTimeMin,
-                },
-                laporan: {
-                    lebihSla: recoveryTimeLebihSla,
-                    kurangSla: recoveryTimeKurangSla,
-                },
-            }
-        };
-
-        dummy.push(entry);
-    }
-    data.value = dummy;
-}
-
-
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-          
+
             var i = 1;
             queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
                 const entry = {
-                    no : Number(i++),
+                    no: Number(i++),
                     posko: item.posko,
                     laporan: {
                         total: item.total,
@@ -338,7 +281,7 @@ onMounted(() => {
                         },
                         belumSelesai: {
                             jml: item.total_inproses,
-                            persen:item.persen_inproses,
+                            persen: item.persen_inproses,
                         },
                     },
                     responseTime: {
@@ -373,8 +316,7 @@ onMounted(() => {
             })
 
             data.value = [...data.value];
-            console.log(data.value)
-            loadingVisible.value = false
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -383,10 +325,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
-    // createDummy()
-})
+
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -1,23 +1,31 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type9 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
-            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -38,36 +46,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -75,7 +83,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted ,ref} from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -95,7 +105,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
 query rekapitulasiGangguanPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -165,21 +175,26 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const loadingVisible = ref<boolean>(true)
-
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanPerRegu;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -188,8 +203,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-9'
-    })
-})
+
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,10 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" 
+            :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -75,6 +84,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -130,7 +141,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
 query rekapitulasiGangguanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -166,20 +177,27 @@ query rekapitulasiGangguanPerTanggal(
         total_selesai
         }
 }`;
-const  loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+
+    const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        posko: 0,
         idUid: 0,
         idUp3: 0,
     })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -188,8 +206,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-9'
-    })
-})
+   
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -25,6 +33,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -88,7 +98,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   query rekapitulasiGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -134,21 +144,29 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
 
+
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -157,9 +175,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -1,30 +1,41 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
+                css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -79,7 +90,7 @@ query rekapitulasiGangguanAlihPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -98,22 +109,30 @@ query rekapitulasiGangguanAlihPosko
         posko_out
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
+
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanAlihPosko
-                ;
-            loadingVisible.value = false
+            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -122,9 +141,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_16.vue

@@ -1,46 +1,61 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-                <DxColumn :width="50" alignment="center" 
-                :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-                caption="a" css-class="custom-table-column" />
+                <DxColumn :width="50" alignment="center"
+                    :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
+                    css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c"
+                    css-class="custom-table-column" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
+                        css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
+                            css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
+                            css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
+                            css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
+                            css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
             </DxColumn>
@@ -50,20 +65,23 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking"
+                                    caption="i" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
+                                    caption="j=(i/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking"
+                                    caption="k" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center"  data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
+                                    caption="l" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -71,20 +89,23 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"  caption="m" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"
+                                    caption="m" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
+                                    caption="n=(m/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
+                                    caption="o" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
+                                    caption="p" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -94,20 +115,25 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
+                                    caption="q" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
+                                    caption="r=(q/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"
+                                    data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
+                                    css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"
+                                    data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
+                                    css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -115,20 +141,23 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
+                                    caption="u" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
+                                    caption="v=(u/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
+                                    caption="w" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
+                                    caption="x" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -140,6 +169,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -194,7 +225,7 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -231,22 +262,30 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
         total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
+    const filters = useFiltersStore()
+
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -255,9 +294,8 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref();
+
 </script>

src/components/Pages/Gangguan/Table_17.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,15 +13,15 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            caption="NO" data-type="number"
-                css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+                caption="NO" data-type="number" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -65,6 +71,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -151,7 +159,7 @@ query rekapitulasiGangguanRatingPerPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -182,22 +190,29 @@ query rekapitulasiGangguanRatingPerPosko
         total 
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
 
+
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -207,10 +222,7 @@ onMounted(() => {
         console.log(error)
     })
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+}
+const filters = ref();
 
 </script>

src/components/Pages/Gangguan/Table_18.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -63,6 +71,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -126,7 +136,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanRatingPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -156,22 +166,28 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
       total
     }
   }
-`
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+`  
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
         dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
         dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
         posko: '',
         idUid: 0,
         idUp3: 0
     })
-
+const filterData = (params: any) => {
+  
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -180,9 +196,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+   
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_19.vue

@@ -1,17 +1,27 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type18 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
                 <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
@@ -43,6 +53,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type18 from '@/components/Form/FiltersType/Type18.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -99,7 +111,7 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -128,22 +140,29 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
         up3
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -152,9 +171,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-18',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_2.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type6 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -6,21 +12,14 @@
             column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel
-            :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading"
-            v-model:visible="loading"
-            :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@@ -35,8 +34,8 @@
                 caption="Durasi Response Time" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
-                cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@@ -49,7 +48,7 @@
                 caption="Keterangan Pelapor" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
                 cell-template="data" />
 
             <template #data="{ data }">
@@ -165,20 +164,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type6 from '@/components/Form/FiltersType/Type6.vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
 import InputText from '@/components/InputText.vue';
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useTotalReport } from '@/stores/totalReport';
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -199,9 +194,9 @@ const showData = () => {
 const closeDetail = () => {
     showDetail.value = false
 }
-const loadingVisible = ref(true)
-const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
-query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
+
+const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
   daftarGangguanMelaporLebihDariSatuKali(
     minJmlLapor: $minJmlLapor
     maxJmlLapor: $maxJmlLapor
@@ -212,8 +207,9 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     idUp3: $idUp3
   ) {
     alamat_pelapor
+    pembuat_laporan
     durasi_response_time
-    id_gangguan
+    durasi_recovery_time
     idpel_nometer
     jumlah_lapor
     keterangan_pelapor
@@ -221,46 +217,38 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     nama_pelapor
     no_laporan
     no_telp_pelapor
-    posko
     status_akhir
+    waktu_lapor
     waktu_recovery
     waktu_response
+    nama_posko
   }
 }`;
- const { onResult, onError, loading, refetch  } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
-        minJmlLapor: 1,
-        maxJmlLapor: 1,
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
-
-
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-    const minJmlLapor = useTotalReport().getDataMin()
-    const maxJmlLapor = useTotalReport().getDataMax()
+const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+    minJmlLapor: 1,
+    maxJmlLapor: 1,
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
 
+const filterData = (params: any) => {
+    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ');
     refetch({
-        minJmlLapor,
-        maxJmlLapor,
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+        maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
-        if(queryResult.data != undefined){
+        if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -269,11 +257,7 @@ watch(detected, () => {
     onError(error => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-6',
-    })
-})
+}
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_20.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,12 +13,15 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
                 <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
@@ -44,8 +53,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -107,7 +117,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanCleansingTransaksiTM(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -136,21 +146,26 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+      const { posko, uid, up3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
-
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -159,9 +174,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref(); 
 </script>

src/components/Pages/Gangguan/Table_3.vue

@@ -1,14 +1,20 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -40,39 +46,56 @@
                 caption="No Telp Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useTotalDuration } from '@/stores/totalDuration';
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-
 const data = ref<any[]>([])
-
+const filterData = (params: any) => {
+    const { minTime, maxTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ') 
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiResponseTime : minTime ? minTime : 0,
+        maxDurasiResponseTime : maxTime ? maxTime : 1,
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanResponseTime;
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
 query daftarGangguanResponseTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -88,15 +111,16 @@ query daftarGangguanResponseTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
+        is_marking
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
     }
@@ -106,52 +130,10 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RES
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: 1, //menit
     maxDurasiResponseTime: 1,// menit
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
-onResult(queryResult => {
-    if (queryResult.data != undefined) {
-        data.value = queryResult.data.daftarGangguanResponseTime;
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-})
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-    const minDurasiResponseTime = useTotalDuration().getDataMin();
-    const maxDurasiResponseTime = useTotalDuration().getDataMax();
-    refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        minDurasiResponseTime,
-        maxDurasiResponseTime,
-        posko,
-        idUid: uid,
-        idUp3: up3
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-7',
-    })
-})
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_4.vue

@@ -1,14 +1,20 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -28,7 +34,7 @@
                 caption="Durasi Recovery Time" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
                 caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
                 caption="Referensi Marking" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
@@ -42,37 +48,56 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-import { useDateStore } from '@/stores/date';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useTotalDuration } from '@/stores/totalDuration';
-import { useUp3Store } from '@/stores/up3';
-import { useSearchStore } from '@/stores/filtersAction';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
+
+const filterData = (params: any) => {
+    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
+        maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanRecoveryTime;
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
 query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -88,15 +113,16 @@ query daftarGangguanRecoveryTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
+        is_marking
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -107,44 +133,11 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiRecoveryTime: 1, //menit
     maxDurasiRecoveryTime: 1,// menit
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-    const minDurasiRecoveryTime = useTotalDuration().getDataMin();
-    const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
-    refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        minDurasiRecoveryTime,
-        maxDurasiRecoveryTime,
-        posko,
-        idUid: uid,
-        idUp3: up3
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanRecoveryTime;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-7',
-    })
-})
+
+const filters = ref()
+
 </script>

src/components/Pages/Gangguan/Table_5.vue

@@ -1,14 +1,20 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            v-if="loading"  v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -40,24 +46,19 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
-
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -67,7 +68,7 @@ const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
 query daftarGangguanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -81,15 +82,15 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -97,24 +98,19 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
 const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
-
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const {  posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -127,11 +123,6 @@ watch(detected, () => {
     onError(error => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_6.vue

@@ -1,14 +1,20 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type16 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true"/>
+            v-if="loading"  v-model:visible="loading" :enabled="true"/>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -38,18 +44,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type16 from '@/components/Form/FiltersType/Type16.vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useMediaStore } from '@/stores/media';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -59,7 +60,7 @@ const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
 query daftarGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
     $media : String!
@@ -75,47 +76,44 @@ query daftarGangguanBerdasarkanMedia(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_media
+        waktu_lapor
         waktu_recovery
         waktu_response
+        keterangan_media
         }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
         dateFrom: new Date().toISOString().slice(0, 10),
         dateTo: new Date().toISOString().slice(0, 10),
-        posko: "",
+        posko: 0,
         idUid: 0,
         idUp3: 0,
         media : "Twitter"
     })
-   
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-    const media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
+const filterData = (params: any) => {
+    const { posko, uid, up3, media } = params;
+    const dateValue = params.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3,
-        media
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
+        media : media ? media.id : ""
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+            
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -124,12 +122,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    
-    filters.setConfig({
-        type: 'type-16',
-    })
-})
+}
+const filters = ref()
+
 </script>

src/components/Pages/Gangguan/Table_7.vue

@@ -1,14 +1,20 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -40,24 +46,20 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -67,7 +69,7 @@ const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
 query daftarGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -81,15 +83,15 @@ query daftarGangguanDiselesaikanMobileAPKT(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -97,26 +99,22 @@ query daftarGangguanDiselesaikanMobileAPKT(
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
 
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3?.id ? up3.id : 0,
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
         }
@@ -127,12 +125,9 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
+}
+
+const filters = ref();
+
 </script>

src/components/Pages/Gangguan/Table_8.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -6,15 +12,16 @@
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel v-model:visible.sync="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
@@ -45,7 +52,7 @@
                     :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
                     caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
                     caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
@@ -67,6 +74,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -79,11 +88,6 @@ import { Workbook } from 'exceljs'
 
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable'
-import { useSearchStore } from '@/stores/filtersAction'
-import { useDateStore } from '@/stores/date'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -93,7 +97,7 @@ const GET_REKAPITULASI_GANGGUAN_ALL = gql`
 query rekapitulasiAllGangguan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -107,8 +111,6 @@ query rekapitulasiAllGangguan(
         avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
         max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
@@ -117,7 +119,7 @@ query rekapitulasiAllGangguan(
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        nama_posko
         total
         total_diatas_sla_dispatch
         total_diatas_sla_recovery
@@ -132,42 +134,37 @@ query rekapitulasiAllGangguan(
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
 
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
-    if (queryResult.data != undefined) {
-        queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-            data.value = [...data.value, {
-                ...item,
-                nama_unit: 'UNIT'
-            }];
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                }];
 
-        })
-    }
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-})
-onError((error) => {
-    console.log(error)
-})
-})
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -203,11 +200,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_9.vue

@@ -1,5 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -9,7 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -116,8 +122,9 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -139,11 +146,6 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useDateStore } from '@/stores/date'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
 import { useQuery } from '@vue/apollo-composable'
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -155,7 +157,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
   query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -231,741 +233,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const data = [
-    {
-        no: 1,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 2,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 3,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 4,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 6,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 6,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 15,
-                rataRata: 12.5,
-                max: 18,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 18,
-                rataRata: 15,
-                max: 20,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 4
-            }
-        }
-    },
-    {
-        no: 5,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 14,
-                rataRata: 14,
-                max: 16,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 22,
-                rataRata: 16,
-                max: 26,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 6,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 12,
-                rataRata: 15,
-                max: 18,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 16,
-                rataRata: 18,
-                max: 22,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 0
-            }
-        }
-    },
-    {
-        no: 7,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 10,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 13.33,
-                max: 24,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 25,
-                rataRata: 16.67,
-                max: 30,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 12,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 8,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 2,
-                persen: 28.57
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 71.43
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 9,
-                max: 20,
-                min: 6
-            },
-            laporan: {
-                lebihSla: 1,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 14,
-                max: 30,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 9,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 20,
-                max: 28,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 26,
-                max: 36,
-                min: 22
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1
-            }
-        }
-    },
-    {
-        no: 10,
-        kode: 'E',
-        jenisGangguan: 'Gangguan E',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 12,
-                persen: 80
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 20
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 14.67,
-                max: 26,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 20,
-                max: 36,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 13,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 11,
-        kode: 'F',
-        jenisGangguan: 'Gangguan F',
-        laporan: {
-            total: 9,
-            sudahSelesai: {
-                jml: 6,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 12,
-                max: 22,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 1
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 18.67,
-                max: 34,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 10,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 12,
-        kode: 'G',
-        jenisGangguan: 'Gangguan G',
-        laporan: {
-            total: 11,
-            sudahSelesai: {
-                jml: 7,
-                persen: 63.64
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 36.36
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 14.29,
-                max: 24,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1
-            }
-        }
-    },
-    {
-        no: 13,
-        kode: 'H',
-        jenisGangguan: 'Gangguan H',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 5,
-                persen: 71.43
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 28.57
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 16,
-                rataRata: 12.8,
-                max: 20,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 26,
-                rataRata: 20.8,
-                max: 30,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 0
-            }
-        }
-    },
-    {
-        no: 14,
-        kode: 'I',
-        jenisGangguan: 'Gangguan I',
-        laporan: {
-            total: 14,
-            sudahSelesai: {
-                jml: 10,
-                persen: 71.43
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 28.57
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 15.71,
-                max: 28,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 7
-            }
-        }
-    },
-    {
-        no: 15,
-        kode: 'J',
-        jenisGangguan: 'Gangguan J',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 8,
-                persen: 80
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 20
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 16,
-                max: 26,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 23,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 16,
-        kode: 'K',
-        jenisGangguan: 'Gangguan K',
-        laporan: {
-            total: 13,
-            sudahSelesai: {
-                jml: 9,
-                persen: 69.23
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 30.77
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 18.46,
-                max: 28,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 7
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 34,
-                rataRata: 25.38,
-                max: 40,
-                min: 20
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 4
-            }
-        }
-    },
-    {
-        no: 17,
-        kode: 'L',
-        jenisGangguan: 'Gangguan L',
-        laporan: {
-            total: 16,
-            sudahSelesai: {
-                jml: 11,
-                persen: 68.75
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 31.25
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 26,
-                rataRata: 19.38,
-                max: 32,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 36,
-                rataRata: 24,
-                max: 42,
-                min: 20
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 18,
-        kode: 'M',
-        jenisGangguan: 'Gangguan M',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 18.33,
-                max: 28,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 7
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 24,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 6
-            }
-        }
-    }
-]
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ')
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, uid, up3 } = params
+
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -1022,13 +299,7 @@ watch(detected, () => {
     onError((queryError) => {
         console.log(queryError)
     })
-})
+}
 
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
 </script>