From 6c5e0fe763eac8a1be899ad0bd87f1f2e298ead8 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 19 Feb 2024 09:08:50 +0700
Subject: [PATCH] Update file permissions for multiple files

---
 .env.development                              |   0
 .env.production                               |   0
 .eslintrc.cjs                                 |   0
 .../workflows/docker-image-development.yml    |   0
 .github/workflows/docker-image-release.yml    |   0
 .gitignore                                    |   0
 .prettierrc.json                              |   0
 .tw-patch/tw-class-list.json                  |   0
 .vscode/extensions.json                       |   0
 Dockerfile                                    |   0
 README.md                                     |   0
 deployment.yaml                               |   0
 env.d.ts                                      |   0
 index.html                                    |   0
 nginx.conf                                    |   0
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 postcss.config.js                             |   0
 public/assets/css/loader.css                  |   0
 public/assets/images/favicon.ico              | Bin
 public/assets/images/pln.ico                  | Bin
 src/App.vue                                   |   0
 src/assets/css/base.css                       |   0
 src/assets/css/main.css                       |   0
 src/assets/css/style.css                      |   0
 src/assets/css/tailwind.css                   |   0
 src/assets/icons/dot-outline.svg              |   0
 src/assets/icons/gauge.svg                    |   0
 src/assets/icons/lightning-slash.svg          |   0
 src/assets/icons/monitor.svg                  |   0
 src/assets/icons/plugs.svg                    |   0
 src/assets/icons/smiley-sad.svg               |   0
 src/assets/icons/swap.svg                     |   0
 src/assets/images/hero.png                    | Bin
 src/assets/images/pln-with-text.png           | Bin
 src/assets/images/pln.png                     | Bin
 src/components/Button.vue                     |   0
 src/components/Buttons/ButtonDropdown.vue     |   0
 src/components/Buttons/ButtonPrimary.vue      |   0
 src/components/CommandPalettes.vue            |   0
 src/components/DatePicker.vue                 |   0
 src/components/Dialogs/ActionDialog.vue       |   0
 src/components/Dialogs/DetailDialog.vue       |   0
 src/components/Form/Filters.vue               |   0
 src/components/Form/FiltersType/Type1.vue     |   4 +-
 src/components/Form/FiltersType/Type10.vue    |   4 +-
 src/components/Form/FiltersType/Type11.vue    |   5 +-
 src/components/Form/FiltersType/Type12.vue    |  66 ++++-
 src/components/Form/FiltersType/Type13.vue    |   4 +-
 src/components/Form/FiltersType/Type14.vue    |  36 ++-
 src/components/Form/FiltersType/Type15.vue    |  15 +
 src/components/Form/FiltersType/Type16.vue    |   4 +-
 src/components/Form/FiltersType/Type17.vue    |   0
 src/components/Form/FiltersType/Type18.vue    |   0
 src/components/Form/FiltersType/Type2.vue     |  10 +-
 src/components/Form/FiltersType/Type3.vue     |   4 +-
 src/components/Form/FiltersType/Type4.vue     |   4 +-
 src/components/Form/FiltersType/Type5.vue     |   4 +-
 src/components/Form/FiltersType/Type6.vue     |   4 +-
 src/components/Form/FiltersType/Type7.vue     |  64 ++---
 src/components/Form/FiltersType/Type8.vue     |   4 +-
 src/components/Form/FiltersType/Type9.vue     |   4 +-
 src/components/Form/FiltersType/index.ts      |   0
 src/components/Form/FiltersType/reference.ts  |  25 +-
 src/components/Form/InlineRadioGroup.vue      |   0
 src/components/Form/InputNumber.vue           |   1 -
 src/components/Form/InputWithFilter.vue       |   0
 src/components/Form/InputWithSuffix.vue       |   8 +-
 src/components/Input.vue                      |   0
 src/components/InputText.vue                  |   0
 src/components/Navigation/Aside/Aside.vue     |   0
 .../Navigation/Aside/AsideMenuMultiple.vue    |   0
 .../Navigation/Aside/AsideMenuSingle.vue      |   0
 src/components/Navigation/Header.vue          |   0
 src/components/Navigation/Navigation.vue      |   0
 src/components/Notification/Notification.vue  |   0
 .../Notification/NotificationProvider.vue     |   0
 .../Notification/icons/CloseIcon.vue          |   0
 .../Notification/icons/ErrorIcon.vue          |   0
 .../Notification/icons/InfoIcon.vue           |   0
 .../Notification/icons/SuccessIcon.vue        |   0
 .../Notification/icons/WarningIcon.vue        |   0
 src/components/Notification/icons/index.ts    |   0
 src/components/Notification/index.ts          |   0
 .../interfaces/Notification.interface.ts      |   0
 .../NotificationConfig.interface.ts           |   0
 .../NotificationsState.interface.ts           |   0
 .../Notification/interfaces/index.ts          |   0
 src/components/Notification/store/index.ts    |   0
 src/components/Pages/Anomali/Table_61.vue     |   8 +-
 src/components/Pages/Anomali/Table_62.vue     |   6 +
 src/components/Pages/Anomali/Table_63.vue     |   7 +-
 src/components/Pages/Anomali/Table_64.vue     |   7 +-
 src/components/Pages/Anomali/Table_65.vue     |   7 +-
 src/components/Pages/Anomali/Table_66.vue     |   6 +
 src/components/Pages/Anomali/index.ts         |   0
 src/components/Pages/Cico/Table_60.vue        |  32 ++-
 src/components/Pages/Cico/index.ts            |   0
 src/components/Pages/Ctt/Table_67.vue         |  32 ++-
 src/components/Pages/Ctt/index.ts             |   0
 src/components/Pages/EmptyPage.vue            |   0
 src/components/Pages/Gangguan/Table_1.vue     |  39 +--
 src/components/Pages/Gangguan/Table_10.vue    |   9 +-
 src/components/Pages/Gangguan/Table_11.vue    |  10 +-
 src/components/Pages/Gangguan/Table_12.vue    |  10 +-
 src/components/Pages/Gangguan/Table_13.vue    |  10 +-
 src/components/Pages/Gangguan/Table_14.vue    |  38 ++-
 src/components/Pages/Gangguan/Table_15.vue    |  10 +-
 src/components/Pages/Gangguan/Table_16.vue    |  10 +-
 src/components/Pages/Gangguan/Table_17.vue    |  10 +-
 src/components/Pages/Gangguan/Table_18.vue    |  10 +-
 src/components/Pages/Gangguan/Table_19.vue    |  10 +-
 src/components/Pages/Gangguan/Table_2.vue     |   0
 src/components/Pages/Gangguan/Table_20.vue    |  10 +-
 src/components/Pages/Gangguan/Table_3.vue     |   1 +
 src/components/Pages/Gangguan/Table_4.vue     |   0
 src/components/Pages/Gangguan/Table_5.vue     |   0
 src/components/Pages/Gangguan/Table_6.vue     |   0
 src/components/Pages/Gangguan/Table_7.vue     |  11 +-
 src/components/Pages/Gangguan/Table_8.vue     |   4 +-
 src/components/Pages/Gangguan/Table_9.vue     |  11 +-
 src/components/Pages/Gangguan/index.ts        |   0
 src/components/Pages/HomeEmpty.vue            |   0
 src/components/Pages/Keluhan/Table_21.vue     |  16 +-
 src/components/Pages/Keluhan/Table_22.vue     |  16 +-
 src/components/Pages/Keluhan/Table_23.vue     |  16 +-
 src/components/Pages/Keluhan/Table_24.vue     |  16 +-
 src/components/Pages/Keluhan/Table_25.vue     |  16 +-
 src/components/Pages/Keluhan/Table_26.vue     |  16 +-
 src/components/Pages/Keluhan/Table_27.vue     |  22 +-
 src/components/Pages/Keluhan/Table_28.vue     |  12 +-
 src/components/Pages/Keluhan/Table_29.vue     |  17 +-
 src/components/Pages/Keluhan/Table_30.vue     |  16 +-
 src/components/Pages/Keluhan/Table_31.vue     |  19 +-
 src/components/Pages/Keluhan/Table_32.vue     | 256 +++++-------------
 src/components/Pages/Keluhan/Table_33.vue     |  67 ++---
 src/components/Pages/Keluhan/Table_34.vue     |  57 ++--
 src/components/Pages/Keluhan/Table_35.vue     |  55 ++--
 src/components/Pages/Keluhan/index.ts         |   0
 src/components/Pages/Material/Table_68.vue    |  29 +-
 src/components/Pages/Material/Table_69.vue    |   7 +-
 src/components/Pages/Material/index.ts        |   0
 src/components/Pages/MenuProvider.vue         |   0
 src/components/Pages/Monalisa/Table_36.vue    |  10 +-
 src/components/Pages/Monalisa/Table_37.vue    |  31 ++-
 src/components/Pages/Monalisa/Table_38.vue    |  40 +--
 src/components/Pages/Monalisa/Table_39.vue    |  30 +-
 src/components/Pages/Monalisa/Table_40.vue    |  17 +-
 src/components/Pages/Monalisa/Table_41.vue    |  17 +-
 src/components/Pages/Monalisa/Table_42.vue    |  30 +-
 src/components/Pages/Monalisa/Table_43.vue    |  30 +-
 src/components/Pages/Monalisa/Table_44.vue    |  59 ++--
 src/components/Pages/Monalisa/Table_45.vue    | 102 ++++++-
 src/components/Pages/Monalisa/Table_46.vue    | 112 ++++++--
 src/components/Pages/Monalisa/Table_47.vue    |  86 +++++-
 src/components/Pages/Monalisa/Table_48.vue    |  96 ++++++-
 src/components/Pages/Monalisa/Table_49.vue    |  80 +++++-
 src/components/Pages/Monalisa/Table_50.vue    |  92 ++++++-
 src/components/Pages/Monalisa/Table_51.vue    | 234 ++++++++++++----
 src/components/Pages/Monalisa/Table_52.vue    |   0
 src/components/Pages/Monalisa/Table_53.vue    |   0
 src/components/Pages/Monalisa/Table_54.vue    |   0
 src/components/Pages/Monalisa/Table_55.vue    |   0
 src/components/Pages/Monalisa/Table_56.vue    |   0
 src/components/Pages/Monalisa/Table_57.vue    |   0
 src/components/Pages/Monalisa/Table_58.vue    |   0
 src/components/Pages/Monalisa/Table_59.vue    |   1 +
 src/components/Pages/Monalisa/index.ts        |   0
 .../Pages/PencarianData/Table_71.vue          |  26 +-
 src/components/Pages/PencarianData/index.ts   |   0
 src/components/Pages/Transaksi/Table_70.vue   |  21 +-
 src/components/Pages/Transaksi/index.ts       |   0
 src/components/Pages/Welcome.vue              |   0
 src/components/PictureInitial.vue             |   0
 src/components/Select.vue                     |   0
 src/components/SelectMulti.vue                |   0
 src/components/__tests__/HelloWorld.spec.ts   |   0
 src/components/icons/IconBars3.vue            |   0
 src/components/icons/IconBox.vue              |   0
 src/components/icons/IconCommunity.vue        |   0
 src/components/icons/IconDatabase.vue         |   0
 src/components/icons/IconDocumentation.vue    |   0
 src/components/icons/IconDotOutline.vue       |   0
 src/components/icons/IconEcosystem.vue        |   0
 src/components/icons/IconFileSearch.vue       |   0
 src/components/icons/IconFileX.vue            |   0
 src/components/icons/IconFilter.vue           |   0
 src/components/icons/IconGauge.vue            |   0
 src/components/icons/IconLightningSlash.vue   |   0
 src/components/icons/IconLinkBreak.vue        |   0
 src/components/icons/IconLockKey.vue          |   0
 src/components/icons/IconMonitor.vue          |   0
 src/components/icons/IconNetworkChange.vue    |   0
 .../icons/IconNetworkDisconnected.vue         |   0
 src/components/icons/IconPlugs.vue            |   0
 src/components/icons/IconSmileySad.vue        |   0
 src/components/icons/IconSupport.vue          |   0
 src/components/icons/IconSwap.vue             |   0
 src/components/icons/IconTooling.vue          |   0
 src/components/icons/IconWallet.vue           |   0
 src/main.ts                                   |   0
 src/router/index.ts                           |   0
 src/stores/auth.ts                            |   0
 src/stores/command.ts                         |   0
 src/stores/date.ts                            |   0
 src/stores/dialog.ts                          |   0
 src/stores/filters.ts                         |   0
 src/stores/filtersAction.ts                   |   0
 src/stores/media.ts                           |   0
 src/stores/menu.ts                            |   0
 src/stores/posts.ts                           |   0
 src/stores/queries.ts                         |   0
 src/stores/region.ts                          |   0
 src/stores/totalDuration.ts                   |   0
 src/stores/totalReport.ts                     |   0
 src/stores/ulp.ts                             |   0
 src/stores/up3.ts                             |   0
 src/stores/user.ts                            |   0
 src/types/gangguan.ts                         |   0
 src/types/menu.ts                             |   0
 src/utils/graphql.ts                          |   2 +-
 src/utils/icons.ts                            |   0
 src/utils/network.ts                          |   3 +-
 src/utils/numbers.ts                          |   0
 src/utils/route.ts                            |   0
 src/utils/storage.ts                          |   0
 src/utils/texts.ts                            |   0
 src/views/HomeView.vue                        |   0
 src/views/LoginView.vue                       |   0
 src/views/NotFoundView.vue                    |   0
 src/views/TestView.vue                        |   0
 tailwind.config.js                            |   0
 tsconfig.app.json                             |   0
 tsconfig.json                                 |   0
 tsconfig.node.json                            |   0
 tsconfig.vitest.json                          |   0
 vercel.json                                   |   0
 vite.config.ts                                |   0
 vitest.config.ts                              |   0
 239 files changed, 1433 insertions(+), 928 deletions(-)
 mode change 100644 => 100755 .env.development
 mode change 100644 => 100755 .env.production
 mode change 100644 => 100755 .eslintrc.cjs
 mode change 100644 => 100755 .github/workflows/docker-image-development.yml
 mode change 100644 => 100755 .github/workflows/docker-image-release.yml
 mode change 100644 => 100755 .gitignore
 mode change 100644 => 100755 .prettierrc.json
 mode change 100644 => 100755 .tw-patch/tw-class-list.json
 mode change 100644 => 100755 .vscode/extensions.json
 mode change 100644 => 100755 Dockerfile
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 deployment.yaml
 mode change 100644 => 100755 env.d.ts
 mode change 100644 => 100755 index.html
 mode change 100644 => 100755 nginx.conf
 mode change 100644 => 100755 package-lock.json
 mode change 100644 => 100755 package.json
 mode change 100644 => 100755 postcss.config.js
 mode change 100644 => 100755 public/assets/css/loader.css
 mode change 100644 => 100755 public/assets/images/favicon.ico
 mode change 100644 => 100755 public/assets/images/pln.ico
 mode change 100644 => 100755 src/App.vue
 mode change 100644 => 100755 src/assets/css/base.css
 mode change 100644 => 100755 src/assets/css/main.css
 mode change 100644 => 100755 src/assets/css/style.css
 mode change 100644 => 100755 src/assets/css/tailwind.css
 mode change 100644 => 100755 src/assets/icons/dot-outline.svg
 mode change 100644 => 100755 src/assets/icons/gauge.svg
 mode change 100644 => 100755 src/assets/icons/lightning-slash.svg
 mode change 100644 => 100755 src/assets/icons/monitor.svg
 mode change 100644 => 100755 src/assets/icons/plugs.svg
 mode change 100644 => 100755 src/assets/icons/smiley-sad.svg
 mode change 100644 => 100755 src/assets/icons/swap.svg
 mode change 100644 => 100755 src/assets/images/hero.png
 mode change 100644 => 100755 src/assets/images/pln-with-text.png
 mode change 100644 => 100755 src/assets/images/pln.png
 mode change 100644 => 100755 src/components/Button.vue
 mode change 100644 => 100755 src/components/Buttons/ButtonDropdown.vue
 mode change 100644 => 100755 src/components/Buttons/ButtonPrimary.vue
 mode change 100644 => 100755 src/components/CommandPalettes.vue
 mode change 100644 => 100755 src/components/DatePicker.vue
 mode change 100644 => 100755 src/components/Dialogs/ActionDialog.vue
 mode change 100644 => 100755 src/components/Dialogs/DetailDialog.vue
 mode change 100644 => 100755 src/components/Form/Filters.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type1.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type10.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type11.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type12.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type13.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type14.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type15.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type16.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type17.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type18.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type2.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type3.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type4.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type5.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type6.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type7.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type8.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type9.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/index.ts
 mode change 100644 => 100755 src/components/Form/FiltersType/reference.ts
 mode change 100644 => 100755 src/components/Form/InlineRadioGroup.vue
 mode change 100644 => 100755 src/components/Form/InputNumber.vue
 mode change 100644 => 100755 src/components/Form/InputWithFilter.vue
 mode change 100644 => 100755 src/components/Form/InputWithSuffix.vue
 mode change 100644 => 100755 src/components/Input.vue
 mode change 100644 => 100755 src/components/InputText.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/Aside.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/AsideMenuMultiple.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/AsideMenuSingle.vue
 mode change 100644 => 100755 src/components/Navigation/Header.vue
 mode change 100644 => 100755 src/components/Navigation/Navigation.vue
 mode change 100644 => 100755 src/components/Notification/Notification.vue
 mode change 100644 => 100755 src/components/Notification/NotificationProvider.vue
 mode change 100644 => 100755 src/components/Notification/icons/CloseIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/ErrorIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/InfoIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/SuccessIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/WarningIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/index.ts
 mode change 100644 => 100755 src/components/Notification/index.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/Notification.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/NotificationConfig.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/NotificationsState.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/index.ts
 mode change 100644 => 100755 src/components/Notification/store/index.ts
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_61.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_62.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_63.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_64.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_65.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_66.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/index.ts
 mode change 100644 => 100755 src/components/Pages/Cico/Table_60.vue
 mode change 100644 => 100755 src/components/Pages/Cico/index.ts
 mode change 100644 => 100755 src/components/Pages/Ctt/Table_67.vue
 mode change 100644 => 100755 src/components/Pages/Ctt/index.ts
 mode change 100644 => 100755 src/components/Pages/EmptyPage.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_1.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_10.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_11.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_12.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_13.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_14.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_15.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_16.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_17.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_18.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_19.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_2.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_20.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_3.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_4.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_5.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_6.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_7.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_8.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_9.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/index.ts
 mode change 100644 => 100755 src/components/Pages/HomeEmpty.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_21.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_22.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_23.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_24.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_25.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_26.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_27.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_28.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_29.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_30.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_31.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_32.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_33.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_34.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_35.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/index.ts
 mode change 100644 => 100755 src/components/Pages/Material/Table_68.vue
 mode change 100644 => 100755 src/components/Pages/Material/Table_69.vue
 mode change 100644 => 100755 src/components/Pages/Material/index.ts
 mode change 100644 => 100755 src/components/Pages/MenuProvider.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_36.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_37.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_38.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_39.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_40.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_41.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_42.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_43.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_44.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_45.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_46.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_47.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_48.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_49.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_50.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_51.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_52.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_53.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_54.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_55.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_56.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_57.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_58.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_59.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/index.ts
 mode change 100644 => 100755 src/components/Pages/PencarianData/Table_71.vue
 mode change 100644 => 100755 src/components/Pages/PencarianData/index.ts
 mode change 100644 => 100755 src/components/Pages/Transaksi/Table_70.vue
 mode change 100644 => 100755 src/components/Pages/Transaksi/index.ts
 mode change 100644 => 100755 src/components/Pages/Welcome.vue
 mode change 100644 => 100755 src/components/PictureInitial.vue
 mode change 100644 => 100755 src/components/Select.vue
 mode change 100644 => 100755 src/components/SelectMulti.vue
 mode change 100644 => 100755 src/components/__tests__/HelloWorld.spec.ts
 mode change 100644 => 100755 src/components/icons/IconBars3.vue
 mode change 100644 => 100755 src/components/icons/IconBox.vue
 mode change 100644 => 100755 src/components/icons/IconCommunity.vue
 mode change 100644 => 100755 src/components/icons/IconDatabase.vue
 mode change 100644 => 100755 src/components/icons/IconDocumentation.vue
 mode change 100644 => 100755 src/components/icons/IconDotOutline.vue
 mode change 100644 => 100755 src/components/icons/IconEcosystem.vue
 mode change 100644 => 100755 src/components/icons/IconFileSearch.vue
 mode change 100644 => 100755 src/components/icons/IconFileX.vue
 mode change 100644 => 100755 src/components/icons/IconFilter.vue
 mode change 100644 => 100755 src/components/icons/IconGauge.vue
 mode change 100644 => 100755 src/components/icons/IconLightningSlash.vue
 mode change 100644 => 100755 src/components/icons/IconLinkBreak.vue
 mode change 100644 => 100755 src/components/icons/IconLockKey.vue
 mode change 100644 => 100755 src/components/icons/IconMonitor.vue
 mode change 100644 => 100755 src/components/icons/IconNetworkChange.vue
 mode change 100644 => 100755 src/components/icons/IconNetworkDisconnected.vue
 mode change 100644 => 100755 src/components/icons/IconPlugs.vue
 mode change 100644 => 100755 src/components/icons/IconSmileySad.vue
 mode change 100644 => 100755 src/components/icons/IconSupport.vue
 mode change 100644 => 100755 src/components/icons/IconSwap.vue
 mode change 100644 => 100755 src/components/icons/IconTooling.vue
 mode change 100644 => 100755 src/components/icons/IconWallet.vue
 mode change 100644 => 100755 src/main.ts
 mode change 100644 => 100755 src/router/index.ts
 mode change 100644 => 100755 src/stores/auth.ts
 mode change 100644 => 100755 src/stores/command.ts
 mode change 100644 => 100755 src/stores/date.ts
 mode change 100644 => 100755 src/stores/dialog.ts
 mode change 100644 => 100755 src/stores/filters.ts
 mode change 100644 => 100755 src/stores/filtersAction.ts
 mode change 100644 => 100755 src/stores/media.ts
 mode change 100644 => 100755 src/stores/menu.ts
 mode change 100644 => 100755 src/stores/posts.ts
 mode change 100644 => 100755 src/stores/queries.ts
 mode change 100644 => 100755 src/stores/region.ts
 mode change 100644 => 100755 src/stores/totalDuration.ts
 mode change 100644 => 100755 src/stores/totalReport.ts
 mode change 100644 => 100755 src/stores/ulp.ts
 mode change 100644 => 100755 src/stores/up3.ts
 mode change 100644 => 100755 src/stores/user.ts
 mode change 100644 => 100755 src/types/gangguan.ts
 mode change 100644 => 100755 src/types/menu.ts
 mode change 100644 => 100755 src/utils/graphql.ts
 mode change 100644 => 100755 src/utils/icons.ts
 mode change 100644 => 100755 src/utils/network.ts
 mode change 100644 => 100755 src/utils/numbers.ts
 mode change 100644 => 100755 src/utils/route.ts
 mode change 100644 => 100755 src/utils/storage.ts
 mode change 100644 => 100755 src/utils/texts.ts
 mode change 100644 => 100755 src/views/HomeView.vue
 mode change 100644 => 100755 src/views/LoginView.vue
 mode change 100644 => 100755 src/views/NotFoundView.vue
 mode change 100644 => 100755 src/views/TestView.vue
 mode change 100644 => 100755 tailwind.config.js
 mode change 100644 => 100755 tsconfig.app.json
 mode change 100644 => 100755 tsconfig.json
 mode change 100644 => 100755 tsconfig.node.json
 mode change 100644 => 100755 tsconfig.vitest.json
 mode change 100644 => 100755 vercel.json
 mode change 100644 => 100755 vite.config.ts
 mode change 100644 => 100755 vitest.config.ts

diff --git a/.env.development b/.env.development
old mode 100644
new mode 100755
diff --git a/.env.production b/.env.production
old mode 100644
new mode 100755
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
old mode 100644
new mode 100755
diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
old mode 100644
new mode 100755
diff --git a/.github/workflows/docker-image-release.yml b/.github/workflows/docker-image-release.yml
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/.prettierrc.json b/.prettierrc.json
old mode 100644
new mode 100755
diff --git a/.tw-patch/tw-class-list.json b/.tw-patch/tw-class-list.json
old mode 100644
new mode 100755
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
old mode 100644
new mode 100755
diff --git a/Dockerfile b/Dockerfile
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/deployment.yaml b/deployment.yaml
old mode 100644
new mode 100755
diff --git a/env.d.ts b/env.d.ts
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
diff --git a/nginx.conf b/nginx.conf
old mode 100644
new mode 100755
diff --git a/package-lock.json b/package-lock.json
old mode 100644
new mode 100755
index baae450..d1e3ff7
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "graphql": "^16.8.1",
         "graphql-tag": "^2.12.6",
         "jspdf": "^2.5.1",
+        "nvm": "^0.0.4",
         "pinia": "^2.1.3",
         "qs": "^6.11.2",
         "react": "^18.2.0",
@@ -6905,6 +6906,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nvm": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz",
+      "integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA==",
+      "deprecated": "This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.",
+      "bin": {
+        "nvm": "bin/nvm"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 81bf18d..5cd537e
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
     "react": "^18.2.0",
diff --git a/postcss.config.js b/postcss.config.js
old mode 100644
new mode 100755
diff --git a/public/assets/css/loader.css b/public/assets/css/loader.css
old mode 100644
new mode 100755
diff --git a/public/assets/images/favicon.ico b/public/assets/images/favicon.ico
old mode 100644
new mode 100755
diff --git a/public/assets/images/pln.ico b/public/assets/images/pln.ico
old mode 100644
new mode 100755
diff --git a/src/App.vue b/src/App.vue
old mode 100644
new mode 100755
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
old mode 100644
new mode 100755
diff --git a/src/assets/icons/dot-outline.svg b/src/assets/icons/dot-outline.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/gauge.svg b/src/assets/icons/gauge.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/lightning-slash.svg b/src/assets/icons/lightning-slash.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/plugs.svg b/src/assets/icons/plugs.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/smiley-sad.svg b/src/assets/icons/smiley-sad.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/swap.svg b/src/assets/icons/swap.svg
old mode 100644
new mode 100755
diff --git a/src/assets/images/hero.png b/src/assets/images/hero.png
old mode 100644
new mode 100755
diff --git a/src/assets/images/pln-with-text.png b/src/assets/images/pln-with-text.png
old mode 100644
new mode 100755
diff --git a/src/assets/images/pln.png b/src/assets/images/pln.png
old mode 100644
new mode 100755
diff --git a/src/components/Button.vue b/src/components/Button.vue
old mode 100644
new mode 100755
diff --git a/src/components/Buttons/ButtonDropdown.vue b/src/components/Buttons/ButtonDropdown.vue
old mode 100644
new mode 100755
diff --git a/src/components/Buttons/ButtonPrimary.vue b/src/components/Buttons/ButtonPrimary.vue
old mode 100644
new mode 100755
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
old mode 100644
new mode 100755
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
old mode 100644
new mode 100755
diff --git a/src/components/Dialogs/ActionDialog.vue b/src/components/Dialogs/ActionDialog.vue
old mode 100644
new mode 100755
diff --git a/src/components/Dialogs/DetailDialog.vue b/src/components/Dialogs/DetailDialog.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
old mode 100644
new mode 100755
index f1a85c4..d72c584
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
old mode 100644
new mode 100755
index c892fd5..e9ae3b0
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -20,7 +20,7 @@ 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,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
old mode 100644
new mode 100755
index ac02e78..24144c8
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -13,14 +13,13 @@ import {
 
 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: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const sla = [
   {
@@ -50,7 +49,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
old mode 100644
new mode 100755
index 742b0f2..207f1f2
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -9,13 +9,15 @@ 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: ''
+  periode: '',
+  minDurasiResponseTime: 1,
+  maxDurasiResponseTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
@@ -27,7 +29,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
@@ -36,6 +38,40 @@ const setUlp = (value: any) => {
   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()
@@ -90,12 +126,30 @@ onMounted(() => {
     <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>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
old mode 100644
new mode 100755
index c4ec4df..d495e4b
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -9,7 +9,7 @@ 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,
@@ -28,7 +28,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
old mode 100644
new mode 100755
index e405774..ebdab50
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -1,27 +1,39 @@
 <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 { 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>
   <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 placeholder="Semua Distribusi/Wilayah" />
   </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 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 placeholder="Semua Posko" />
   </div>
@@ -29,9 +41,9 @@
   <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>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
old mode 100644
new mode 100755
index 5492379..3a99461
--- a/src/components/Form/FiltersType/Type15.vue
+++ b/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>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
old mode 100644
new mode 100755
index ad275f9..d314b3f
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -19,7 +19,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const media = ref({ id: 0, name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
old mode 100644
new mode 100755
index 7bf7f2f..d6ad074
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+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';
@@ -13,14 +13,14 @@ 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);
@@ -42,6 +42,8 @@ const data = ref({
 
 const setRegional = (value: any) => {
   regional.value = value;
+  fetchUid(); 
+  // harusnya fetchUidWithRegional(value);
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
   data.value.regional = value;
@@ -57,7 +59,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
old mode 100644
new mode 100755
index 199e63b..8e010bc
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -8,7 +8,7 @@ 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,
@@ -26,7 +26,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
old mode 100644
new mode 100755
index 8a803f7..a35f1db
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -8,7 +8,7 @@ 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,
@@ -27,7 +27,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
old mode 100644
new mode 100755
index f1a85c4..d72c584
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
old mode 100644
new mode 100755
index 45a3b76..88945bb
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -10,7 +10,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
old mode 100644
new mode 100755
index 5247344..bc14453
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -12,7 +12,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -53,6 +53,13 @@ const sla = [
   }
 
 ]
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
@@ -63,7 +70,6 @@ const changeDuration = (value: any) => {
   } else if (value.id === 1) {
     data.value.minTime = 0
     data.value.maxTime = 45
-    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
@@ -72,13 +78,8 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
-  console.log('value', data.value);
-  
 }
 watch(data, (newValue) => {
-  console.log('newValue', newValue.maxTime)
-
   emit('update:filters', newValue)
 })
 onMounted(() => {
@@ -91,32 +92,19 @@ onMounted(() => {
   <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="setUid($event)" 
-      :data="itemsUid" 
-      :placeholder="uidPlaceholder"
-    />
+    <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>
 
-    <Select 
-      @update:selected="setUp3($event)" 
-      :data="itemsUp3" 
-      :placeholder="up3Placeholder"
-
-    />
+    <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="setPosko($event)" 
-      :data="itemsPosko" 
-      :placeholder="poskoPlaceholder"
-    />
+    <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">
@@ -132,32 +120,12 @@ onMounted(() => {
     <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="sla" 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 
-        :default-value="`${data.minTime} Menit`"
-        :disabled="triggerInput"
-          @update:minuteValue="
-          (value :any)=> {
-            data.minTime =value
-          }
-          "
-         
-       />
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-        :default-value="`${data.maxTime} Menit`"
-          @update:minuteValue="
-          (value :any)=> {
-            data.maxTime = value
-          }
-          "
-        :disabled="triggerInput"
-            />
+        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
old mode 100644
new mode 100755
index d80c165..d79661a
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -16,7 +16,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
old mode 100644
new mode 100755
index 3e7251b..0d86c92
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -19,7 +19,7 @@ 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 posko = ref({ id: "" ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/index.ts b/src/components/Form/FiltersType/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
old mode 100644
new mode 100755
index b7fb5f8..a297a19
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -38,15 +38,18 @@ const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
-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 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 fetchStatus = (data : any) => {
 
@@ -170,4 +173,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/InputNumber.vue b/src/components/Form/InputNumber.vue
old mode 100644
new mode 100755
index b6b5d08..9d1a44c
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@@ -22,7 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
 watch(timeValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:timeValue', newValue)
 })
 
diff --git a/src/components/Form/InputWithFilter.vue b/src/components/Form/InputWithFilter.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
old mode 100644
new mode 100755
index fed2b2a..2b9b5c0
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -21,15 +21,10 @@ const props = defineProps({
  
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref<any>(props.defaultValue)
+const menitValue = ref(props.defaultValue)
 watch(menitValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
-
-watch(() => props.defaultValue, (newValue) => {
-  menitValue.value = newValue
-})
 </script>
 
 <template>
@@ -45,6 +40,7 @@ watch(() => props.defaultValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
+      :defaultValue="props.defaultValue"
       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, '')"
diff --git a/src/components/Input.vue b/src/components/Input.vue
old mode 100644
new mode 100755
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/Notification.vue b/src/components/Notification/Notification.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/NotificationProvider.vue b/src/components/Notification/NotificationProvider.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/CloseIcon.vue b/src/components/Notification/icons/CloseIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/ErrorIcon.vue b/src/components/Notification/icons/ErrorIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/InfoIcon.vue b/src/components/Notification/icons/InfoIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/SuccessIcon.vue b/src/components/Notification/icons/SuccessIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/WarningIcon.vue b/src/components/Notification/icons/WarningIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/index.ts b/src/components/Notification/icons/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/Notification.interface.ts b/src/components/Notification/interfaces/Notification.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/NotificationConfig.interface.ts b/src/components/Notification/interfaces/NotificationConfig.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/NotificationsState.interface.ts b/src/components/Notification/interfaces/NotificationsState.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/index.ts b/src/components/Notification/interfaces/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/store/index.ts b/src/components/Notification/store/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
old mode 100644
new mode 100755
index 0cac13c..f18c375
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -101,7 +101,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'
@@ -111,7 +111,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
old mode 100644
new mode 100755
index efabbcd..1e82b6e
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -42,6 +42,12 @@ 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
old mode 100644
new mode 100755
index 6f969f5..5d68a22
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -69,7 +69,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'
@@ -79,6 +79,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
old mode 100644
new mode 100755
index 834db62..0cec0aa
--- a/src/components/Pages/Anomali/Table_64.vue
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -66,7 +66,12 @@ 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
old mode 100644
new mode 100755
index 7f7768f..3ba0150
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -77,7 +77,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'
@@ -87,6 +87,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
old mode 100644
new mode 100755
index efabbcd..1fb89be
--- a/src/components/Pages/Anomali/Table_66.vue
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -42,6 +42,12 @@ 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(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
old mode 100644
new mode 100755
index 51eea6b..89f6bae
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -1,5 +1,11 @@
 <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)]" :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"
@@ -34,7 +40,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'
@@ -43,7 +49,15 @@ 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'
+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 loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -78,12 +92,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
old mode 100644
new mode 100755
index 65a1a3b..a8ed96e
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/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"
@@ -56,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'
@@ -65,7 +71,15 @@ 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'
+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 loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +114,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
-    })
-})
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/EmptyPage.vue b/src/components/Pages/EmptyPage.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
old mode 100644
new mode 100755
index edde852..7153880
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,12 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => {
-        filters = value
-      }
+      filters = value
+    }
       " />
   </Filters>
 
-  <div id="data">
+  <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"
@@ -97,7 +97,7 @@
         <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" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -111,21 +111,21 @@
         <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" />
+        <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" />
+        <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" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -139,14 +139,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Status:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+        <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" />
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -181,14 +181,14 @@
         <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" />
+        <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" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
     </div>
 
@@ -221,7 +221,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' }
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
+const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
@@ -293,16 +294,14 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
   }
 `
 const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  const posko = params.posko ? params.posko.id : ''
-  const uid = params.uid ? params.uid.id : 0
-  const up3 = params.up3 ? params.up3.id : 0
   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,
-    idUid: uid,
-    idUp3: up3
+    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) {
@@ -313,6 +312,8 @@ const filterData = (params: any) => {
             ...item,
             pembuat_laporan: '-',
             waktu_lapor: '-',
+            status_akhir: fetchStatus(item.status_akhir),
+            posko: item.posko_asal
           }
         ]
       })
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
old mode 100644
new mode 100755
index e1fb885..470e115
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -188,16 +188,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
old mode 100644
new mode 100755
index 4e7ece9..e450aa5
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -257,15 +257,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
old mode 100644
new mode 100755
index 7171732..0686f3c
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -184,15 +184,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
old mode 100644
new mode 100755
index d3f24e9..dbb2d33
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -186,15 +186,13 @@ query rekapitulasiGangguanPerTanggal(
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
old mode 100644
new mode 100755
index 805f843..b764a8e
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -1,10 +1,10 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <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"
@@ -145,24 +145,22 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   }
 `
 
-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 { 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 = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    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,
-        idUid: uid,
-        idUp3: up3,
+        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,
     })
 
 
@@ -177,7 +175,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
old mode 100644
new mode 100755
index 2c8fc3c..eb4420c
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -120,15 +120,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
 
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
old mode 100644
new mode 100755
index 9ea618f..b818e32
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -271,15 +271,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     const filters = useFiltersStore()
 
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
old mode 100644
new mode 100755
index c4f12f0..e4f02f1
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -201,15 +201,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
old mode 100644
new mode 100755
index f45dab6..2089acc
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -177,15 +177,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 const filterData = (params: any) => {
   
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
old mode 100644
new mode 100755
index 7aca001..826845b
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -150,15 +150,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 const filterData = (params: any) => {
 
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
old mode 100644
new mode 100755
index af9cb86..c7deac2
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -155,15 +155,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
old mode 100644
new mode 100755
index 2f727f7..ea4ab88
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -68,6 +68,7 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
+    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
old mode 100644
new mode 100755
index 5086c33..b3880ab
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -105,15 +105,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    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,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3?.id ? up3.id : 0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
old mode 100644
new mode 100755
index 9d4ffb5..f3168e8
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         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) {
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
old mode 100644
new mode 100755
index efdc5b8..cac2c04
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -240,15 +240,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    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,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/index.ts b/src/components/Pages/Gangguan/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/HomeEmpty.vue b/src/components/Pages/HomeEmpty.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
old mode 100644
new mode 100755
index f7b69a7..f4f0a12
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -81,7 +81,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -164,16 +167,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPI
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
old mode 100644
new mode 100755
index 01388bb..42b5a58
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -170,9 +173,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
     const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
     refetch({
@@ -180,10 +181,9 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor,
         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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
old mode 100644
new mode 100755
index e8a6eda..a62a677
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,9 +166,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
     const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
     refetch({
@@ -173,10 +174,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiResponseTime: minDurasiResponseTime,
         maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
old mode 100644
new mode 100755
index e749520..72f20c3
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -82,7 +82,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -167,9 +170,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
     const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
     refetch({
@@ -177,10 +178,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiRecoveryTime: minDurasiRecoveryTime,
         maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
old mode 100644
new mode 100755
index a333140..9881a3c
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,16 +166,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
old mode 100644
new mode 100755
index ad45849..16a0128
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -161,16 +164,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
old mode 100644
new mode 100755
index a4fbce7..4def93a
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -14,8 +14,8 @@
             <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 :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" />
             <DxColumnFixing :enabled="true" />
@@ -58,7 +58,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -78,7 +77,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -149,7 +151,7 @@ const GET_DATA = gql`
         }
 `
 
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: '',
@@ -161,16 +163,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     const media = params.media ? params.media.id : ''
     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,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
         media: media
     })
 
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
old mode 100644
new mode 100755
index c6ca6de..f7f4c5d
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -62,7 +62,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -176,16 +175,13 @@ query rekapitulasiKeluhanAll
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
old mode 100644
new mode 100755
index b3ab454..bf4f5f1
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -144,14 +144,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiKeluhanPerFungsiBidang(
+  query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiKeluhanPerFungsiBidang(
+    rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -190,21 +190,18 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
+            data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
old mode 100644
new mode 100755
index 00a70a0..9ea8f91
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -93,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -181,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
old mode 100644
new mode 100755
index a6c5bff..5b2d706
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -83,8 +83,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  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'
@@ -94,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -182,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      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,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
old mode 100644
new mode 100755
index 77bbe03..cf80430
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -1,205 +1,78 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type13 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type13 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :data-source="data"
-      :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)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :data-source="data" :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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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"
-      />
+      <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"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" 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="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" 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="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -229,7 +102,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -306,7 +182,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -317,19 +193,17 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    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,
-        idUid: uid,
-        idUp3: up3
-    })
+  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 : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
-    
+
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
 
@@ -341,5 +215,5 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
- }
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
old mode 100644
new mode 100755
index f423b65..ff4d8fa
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,10 +1,10 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type8 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type8 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
     <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"
@@ -13,7 +13,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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" />
@@ -42,36 +42,36 @@
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
             css-class="custom-table-column" />
           <DxColumn :width="150" 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="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
             css-class="custom-table-column" />
           <DxColumn :width="150" 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="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -101,7 +101,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -178,7 +181,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -189,21 +192,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    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,
-        idUid: uid,
-        idUp3: up3
-    })
+  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 : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
-     
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -212,6 +213,6 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-  
+
 }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
old mode 100644
new mode 100755
index 97afa3f..5ba92df
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,19 +1,19 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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" />
@@ -23,8 +23,8 @@
         caption="NO" css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    :caption="i" css-class="custom-table-column" />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -33,8 +33,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -53,7 +53,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -139,7 +142,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -150,21 +153,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    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,
-        idUid: uid,
-        idUp3: up3
-    })
+  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 : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-  
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
old mode 100644
new mode 100755
index be1f318..af36afa
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -1,28 +1,30 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type8 @update:filters="(value) => {
             filters = value
         }
             " />
     </Filters>
     <div>
-        <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 :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" />
             <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="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode 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="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -84,7 +86,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -157,34 +162,32 @@ query rekapitulasiKeluhanRatingPerUnit
         total 
         }
 }`;
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
-        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_DATA, {
+    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 filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    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,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
 
-    
+
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
-          
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -193,6 +196,6 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-  
+
 }
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/index.ts b/src/components/Pages/Keluhan/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
old mode 100644
new mode 100755
index d88d8a4..83ae7da
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @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="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -36,16 +42,19 @@
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-14'
-    })
-})
+import Filters from '@/components/Form/Filters.vue';
+import { Type14 } from '@/components/Form/FiltersType';
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
old mode 100644
new mode 100755
index 6cabde2..c78aa91
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -31,10 +31,15 @@
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
 
 onMounted(() => {
     const filters = useFiltersStore()
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
old mode 100644
new mode 100755
index add6a38..ab0b4d0
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -150,11 +150,11 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : bulanSekarang.value,
-        tahun: bulan ? tahun : tahunSekarang.value
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
old mode 100644
new mode 100755
index 2bb02ba..5bce029
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -77,6 +77,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -142,14 +143,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
old mode 100644
new mode 100755
index c9d5cf2..4897ef5
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -55,12 +55,12 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -69,9 +69,9 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
-const monalisaRecoveryTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
-    monalisaRecoveryTimeKeluhan(
+const monalisaRecoveryTimeGangguan = gql`
+  query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeGangguan(
       regional:$regional
       posko: $posko
       idUid: $idUid
@@ -89,7 +89,7 @@ const monalisaRecoveryTimeKeluhan = gql`
     }
   }
 `;
-const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
     regional: "",
     posko: "",
     idUid: 0,
@@ -100,18 +100,20 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKel
 const filterData = (params: any) => {
 
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+            queryResult.data.monalisaRecoveryTimeGangguan.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
                 }];
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
old mode 100644
new mode 100755
index 9001c0c..3112c2d
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -65,11 +65,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
old mode 100644
new mode 100755
index dce4030..a6895b6
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -100,10 +100,9 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -159,11 +158,11 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko,
-    idUid: idUid ? idUid : 0,
-    idUp3: idUp3 ? idUp3 : 0,
-    bulan: bulan ? bulan : 10,
-    tahun: bulan ? tahun : 2023
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
old mode 100644
new mode 100755
index 18aa714..ae0f56a
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -54,10 +54,9 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -104,11 +103,11 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
old mode 100644
new mode 100755
index 39a520a..ab378ab
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
old mode 100644
new mode 100755
index e98abe6..9191d4b
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
 })
 const filterData = (params: any) => {
     const {regional, posko, idUid, idUp3, bulan, tahun} = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
old mode 100644
new mode 100755
index 409f104..50e9db6
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -12,19 +12,19 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" 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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -34,8 +34,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {ref} from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -52,10 +51,9 @@ 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 { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -82,35 +80,34 @@ const monalisaGangguanBelumSelesai = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_bulan
-      jumlah_bulan_n_1
-      jumlah_tahun
-      jumlah_tahun_n_1
-      nama_posko
-      persen_bulan
-      persen_tahun
+        gangguan
+informasi
+nama_posko
+total
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
-    bulan: 10,
-    tahun: 2023,
+
     regional: '',
     posko: '',
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
 })
 const filterData = (params: any) => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
old mode 100644
new mode 100755
index b1cd80a..18d29cb
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -6,7 +6,7 @@
             " />
     </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="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } 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'
@@ -54,7 +54,14 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
+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') {
         const doc = new jsPDF()
@@ -84,12 +91,77 @@ const onExporting = (e: any) => {
     }
 }
 
+
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
+const MONALISAJUMLAHKALIKELUHAN = gql`
+  query DaftarMonalisaJumlahKaliKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+})
+
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.monalisaJumlahKaliKeluhan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params: any) => {
-    console.log(params)
-}
-const filters = ref()
+onMounted(() => {
+    console.log(bulanSekarang.value)
+});
+const filters= ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
old mode 100644
new mode 100755
index 45217a5..f0db8f0
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -6,34 +6,35 @@
             " />
     </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"
-            :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 :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -46,7 +47,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { 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'
 import { jsPDF } from 'jspdf'
@@ -54,14 +54,19 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -90,14 +95,77 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const monalisaDispatchingTimeKeluhan = gql`
+  query DaftarmonalisaDispatchingTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeKeluhan.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 onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
old mode 100644
new mode 100755
index 10e38cf..531c236
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -89,14 +94,69 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const filterData = (params: any) => {
+
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.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 onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
old mode 100644
new mode 100755
index d6320e7..724976a
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -6,7 +6,7 @@
             " />
     </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="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -26,11 +26,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -38,11 +38,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -52,11 +52,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -64,11 +64,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -89,6 +89,8 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -96,7 +98,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -130,9 +132,77 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaJumlahDurasiRptRctKeluhan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_keluhan_rct_bulan
+      jumlah_keluhan_rct_sampai_bulan
+      jumlah_keluhan_rpt_bulan
+      jumlah_keluhan_rpt_sampai_bulan
+      nama_posko
+      rct_keluhan_bulan
+      rct_keluhan_sampai_bulan
+      rpt_keluhan_bulan
+      rpt_keluhan_sampai_bulan
+      total_rct_bulan
+      total_rct_sampai_bulan
+      total_rpt_bulan
+      total_rpt_sampai_bulan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctKeluhan.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 filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
old mode 100644
new mode 100755
index 4eca558..a032329
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -6,7 +6,7 @@
             " />
     </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="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
@@ -18,11 +18,11 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="ID Keluhan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Keluhan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center"  :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"  caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -39,6 +39,8 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -46,7 +48,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -80,9 +82,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaKeluhanPerJenisKeluhan = gql`
+  query DaftarmonalisaKeluhanPerJenisKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaKeluhanPerJenisKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_keluhan
+      jumlah
+      persen_keluhan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaKeluhanPerJenisKeluhan.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 filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
old mode 100644
new mode 100755
index 77c4ea7..481352b
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +99,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiLaporUlangKeluhan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.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 filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
old mode 100644
new mode 100755
index 76c12da..694f9d6
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -1,34 +1,82 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2
+      @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"
-            @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 :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" />
+      "
+    />
+  </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"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <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 alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,12 +84,23 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,43 +108,100 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiKeluhanBelumSelesai = gql`
+  query DaftarmonalisaRekapitulasiKeluhanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiKeluhanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      keluhan
+      informasi
+      nama_posko
+      total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiKeluhanBelumSelesai, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiKeluhanBelumSelesai.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 filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
old mode 100644
new mode 100755
index 331b5f7..cbfde2e
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -60,6 +60,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
old mode 100644
new mode 100755
index 2af40d5..4c4edbe
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type15 @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="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -37,10 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted,ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type15 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.vue';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,11 +56,10 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const loading = ref(false)
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-15'
-    })
-})
+const filters = ref();
+const filterData = async (filters: any) => {
+    loading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    loading.value = false
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
old mode 100644
new mode 100755
index 2a10496..6bb89a8
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+     <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type17 @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"
@@ -41,6 +47,8 @@ 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 { Type17 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -139,11 +147,8 @@ const data = [
     }
 ]
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-17'
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
old mode 100644
new mode 100755
diff --git a/src/components/PictureInitial.vue b/src/components/PictureInitial.vue
old mode 100644
new mode 100755
diff --git a/src/components/Select.vue b/src/components/Select.vue
old mode 100644
new mode 100755
diff --git a/src/components/SelectMulti.vue b/src/components/SelectMulti.vue
old mode 100644
new mode 100755
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconBars3.vue b/src/components/icons/IconBars3.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconBox.vue b/src/components/icons/IconBox.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDatabase.vue b/src/components/icons/IconDatabase.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDotOutline.vue b/src/components/icons/IconDotOutline.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFileSearch.vue b/src/components/icons/IconFileSearch.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFileX.vue b/src/components/icons/IconFileX.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFilter.vue b/src/components/icons/IconFilter.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconGauge.vue b/src/components/icons/IconGauge.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLightningSlash.vue b/src/components/icons/IconLightningSlash.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLinkBreak.vue b/src/components/icons/IconLinkBreak.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLockKey.vue b/src/components/icons/IconLockKey.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconMonitor.vue b/src/components/icons/IconMonitor.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconNetworkChange.vue b/src/components/icons/IconNetworkChange.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconNetworkDisconnected.vue b/src/components/icons/IconNetworkDisconnected.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconPlugs.vue b/src/components/icons/IconPlugs.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSmileySad.vue b/src/components/icons/IconSmileySad.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSwap.vue b/src/components/icons/IconSwap.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconWallet.vue b/src/components/icons/IconWallet.vue
old mode 100644
new mode 100755
diff --git a/src/main.ts b/src/main.ts
old mode 100644
new mode 100755
diff --git a/src/router/index.ts b/src/router/index.ts
old mode 100644
new mode 100755
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
old mode 100644
new mode 100755
diff --git a/src/stores/command.ts b/src/stores/command.ts
old mode 100644
new mode 100755
diff --git a/src/stores/date.ts b/src/stores/date.ts
old mode 100644
new mode 100755
diff --git a/src/stores/dialog.ts b/src/stores/dialog.ts
old mode 100644
new mode 100755
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
old mode 100644
new mode 100755
diff --git a/src/stores/filtersAction.ts b/src/stores/filtersAction.ts
old mode 100644
new mode 100755
diff --git a/src/stores/media.ts b/src/stores/media.ts
old mode 100644
new mode 100755
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
old mode 100644
new mode 100755
diff --git a/src/stores/posts.ts b/src/stores/posts.ts
old mode 100644
new mode 100755
diff --git a/src/stores/queries.ts b/src/stores/queries.ts
old mode 100644
new mode 100755
diff --git a/src/stores/region.ts b/src/stores/region.ts
old mode 100644
new mode 100755
diff --git a/src/stores/totalDuration.ts b/src/stores/totalDuration.ts
old mode 100644
new mode 100755
diff --git a/src/stores/totalReport.ts b/src/stores/totalReport.ts
old mode 100644
new mode 100755
diff --git a/src/stores/ulp.ts b/src/stores/ulp.ts
old mode 100644
new mode 100755
diff --git a/src/stores/up3.ts b/src/stores/up3.ts
old mode 100644
new mode 100755
diff --git a/src/stores/user.ts b/src/stores/user.ts
old mode 100644
new mode 100755
diff --git a/src/types/gangguan.ts b/src/types/gangguan.ts
old mode 100644
new mode 100755
diff --git a/src/types/menu.ts b/src/types/menu.ts
old mode 100644
new mode 100755
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
old mode 100644
new mode 100755
index 70a926a..c0ec287
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -3,7 +3,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core
 export const apolloClient = () => {
 
   const httpLink =  createHttpLink({
-    uri: 'http://10.8.0.13:8080/graphql',
+    uri: 'http://10.8.0.13:32169/graphql',
     credentials: 'include', // Include credentials for cross-origin requests
   });
 
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
old mode 100644
new mode 100755
diff --git a/src/utils/network.ts b/src/utils/network.ts
old mode 100644
new mode 100755
index 9f1783f..3176707
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -6,9 +6,10 @@ const instance = axios.create({
 
 const getUid = async () => await instance.get('/uid')
 const getUidRegional = async (regional: number) => await instance.get('/uid?regional=' + regional)
+const getRegional = async () => await instance.get('/regional')
 const getMedia = async () => await instance.get('/media')
 const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional}
+export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional,getRegional}
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
old mode 100644
new mode 100755
diff --git a/src/utils/route.ts b/src/utils/route.ts
old mode 100644
new mode 100755
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
old mode 100644
new mode 100755
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
old mode 100644
new mode 100755
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
old mode 100644
new mode 100755
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
old mode 100644
new mode 100755
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
old mode 100644
new mode 100755
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
old mode 100644
new mode 100755
diff --git a/tailwind.config.js b/tailwind.config.js
old mode 100644
new mode 100755
diff --git a/tsconfig.app.json b/tsconfig.app.json
old mode 100644
new mode 100755
diff --git a/tsconfig.json b/tsconfig.json
old mode 100644
new mode 100755
diff --git a/tsconfig.node.json b/tsconfig.node.json
old mode 100644
new mode 100755
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
old mode 100644
new mode 100755
diff --git a/vercel.json b/vercel.json
old mode 100644
new mode 100755
diff --git a/vite.config.ts b/vite.config.ts
old mode 100644
new mode 100755
diff --git a/vitest.config.ts b/vitest.config.ts
old mode 100644
new mode 100755