Merge branch 'dev-defuj' of https://github.com/defuj/eis into development

.github/workflows/docker-image-development.yml

@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.7-vm
+          docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.10-vm
-          docker push defuj/apkt-eis:v0.0.7-vm
+          docker push defuj/apkt-eis:v0.0.10-vm

.tw-patch/tw-class-list.json

@@ -1,553 +0,0 @@
-[
-  "-left-2",
-  "-mr-1",
-  "-mr-12",
-  "-translate-x-full",
-  "-translate-y-2/4",
-  "2xl:text-sm",
-  "absolute",
-  "animate-spin",
-  "auto-cols-auto",
-  "backdrop-blur",
-  "bg-black",
-  "bg-gray-100",
-  "bg-gray-200",
-  "bg-gray-50",
-  "bg-gray-500",
-  "bg-gray-600",
-  "bg-gray-900",
-  "bg-indigo-600",
-  "bg-layout",
-  "bg-none",
-  "bg-opacity-100",
-  "bg-opacity-25",
-  "bg-opacity-5",
-  "bg-opacity-60",
-  "bg-opacity-75",
-  "bg-opacity-80",
-  "bg-primary-100",
-  "bg-primary-400",
-  "bg-primary-50",
-  "bg-primary-500",
-  "bg-red-100",
-  "bg-red-600",
-  "bg-secondary-100",
-  "bg-teal-600",
-  "bg-vtd-primary-100",
-  "bg-vtd-primary-500",
-  "bg-vtd-primary-600",
-  "bg-white",
-  "bg-yellow-100",
-  "bg-yellow-600",
-  "block",
-  "blur",
-  "border",
-  "border-0",
-  "border-b",
-  "border-b-0",
-  "border-black/[.1]",
-  "border-gray-300",
-  "border-gray-600",
-  "border-none",
-  "border-primary-500",
-  "border-r",
-  "border-solid",
-  "border-t",
-  "border-transparent",
-  "bottom-0",
-  "col-span-7",
-  "cursor-default",
-  "cursor-pointer",
-  "dark:bg-opacity-50",
-  "dark:focus:bg-opacity-50",
-  "dark:focus:border-vtd-primary-500",
-  "dark:focus:ring-opacity-20",
-  "dark:focus:ring-opacity-25",
-  "dark:focus:text-vtd-primary-300",
-  "dark:hover:text-vtd-primary-300",
-  "dark:text-opacity-70",
-  "dark:text-vtd-primary-400",
-  "delay-300",
-  "disabled:bg-primary-200",
-  "disabled:bg-primary-300",
-  "disabled:bg-primary-400",
-  "disabled:border-primary-300",
-  "disabled:cursor-not-allowed",
-  "disabled:text-primary-300",
-  "disabled:text-primary-400",
-  "divide-gray-500",
-  "divide-opacity-10",
-  "divide-y",
-  "duration-100",
-  "duration-150",
-  "duration-200",
-  "duration-300",
-  "duration-500",
-  "duration-75",
-  "ease-in",
-  "ease-in-out",
-  "ease-linear",
-  "ease-out",
-  "fill-gray-500",
-  "fill-gray-600",
-  "fill-green-600",
-  "fill-primary-300",
-  "fill-primary-500",
-  "fill-red-600",
-  "fill-white",
-  "filter",
-  "fixed",
-  "flex",
-  "flex-1",
-  "flex-col",
-  "flex-grow",
-  "flex-none",
-  "flex-row",
-  "flex-shrink-0",
-  "flex-wrap",
-  "focus-visible:outline",
-  "focus-visible:outline-2",
-  "focus-visible:outline-indigo-600",
-  "focus-visible:outline-offset-2",
-  "focus-visible:ring-2",
-  "focus-visible:ring-offset-2",
-  "focus-visible:ring-offset-teal-300",
-  "focus-visible:ring-opacity-75",
-  "focus-visible:ring-white",
-  "focus:bg-vtd-primary-50",
-  "focus:border-0",
-  "focus:border-vtd-primary-300",
-  "focus:outline-0",
-  "focus:outline-none",
-  "focus:ring",
-  "focus:ring-0",
-  "focus:ring-2",
-  "focus:ring-indigo-500",
-  "focus:ring-inset",
-  "focus:ring-offset-0",
-  "focus:ring-offset-2",
-  "focus:ring-opacity-10",
-  "focus:ring-primary-500",
-  "focus:ring-vtd-primary-500",
-  "focus:ring-white",
-  "focus:text-gray-500",
-  "focus:text-vtd-primary-600",
-  "font-bold",
-  "font-light",
-  "font-medium",
-  "font-normal",
-  "font-semibold",
-  "gap-1",
-  "gap-3",
-  "gap-x-1",
-  "gap-x-1.5",
-  "gap-x-2",
-  "gap-x-6",
-  "gap-y-0",
-  "gap-y-0.5",
-  "gap-y-1",
-  "grid",
-  "grid-cols-2",
-  "grid-cols-7",
-  "grid-flow-col",
-  "group-hover:bg-opacity-80",
-  "group-hover:bg-primary-500",
-  "group-hover:block",
-  "group-hover:fill-primary-500",
-  "group-hover:fill-white",
-  "group-hover:text-gray-500",
-  "group-hover:text-primary-500",
-  "group-hover:text-white",
-  "grow",
-  "h-0",
-  "h-10",
-  "h-11",
-  "h-12",
-  "h-16",
-  "h-4",
-  "h-5",
-  "h-6",
-  "h-7",
-  "h-8",
-  "h-9",
-  "h-[2.7rem]",
-  "h-[56px]",
-  "h-[66px]",
-  "h-[calc(100%-64px)]",
-  "h-[calc(90vh-24px)]",
-  "h-fit",
-  "h-full",
-  "h-screen-80",
-  "hidden",
-  "hover:bg-gray-50",
-  "hover:bg-indigo-500",
-  "hover:bg-indigo-700",
-  "hover:bg-primary-100",
-  "hover:bg-primary-200",
-  "hover:bg-primary-600",
-  "hover:bg-red-500",
-  "hover:bg-vtd-primary-700",
-  "hover:bg-yellow-500",
-  "hover:border-primary-500",
-  "hover:text-primary-500",
-  "hover:text-vtd-primary-700",
-  "inline-block",
-  "inline-flex",
-  "inset-0",
-  "inset-y-0",
-  "italic",
-  "items-center",
-  "items-start",
-  "justify-between",
-  "justify-center",
-  "justify-end",
-  "justify-start",
-  "leading-5",
-  "leading-6",
-  "leading-7",
-  "leading-none",
-  "leading-relaxed",
-  "left-0",
-  "left-4",
-  "left-auto",
-  "lg:block",
-  "lg:border-b-0",
-  "lg:border-r",
-  "lg:flex-nowrap",
-  "lg:grid-cols-3",
-  "lg:h-10",
-  "lg:mb-0",
-  "lg:mr-1",
-  "lg:mt-12",
-  "lg:mt-6",
-  "lg:mx-0",
-  "lg:px-8",
-  "lg:text-xs",
-  "lg:w-10",
-  "lg:w-80",
-  "line-clamp-1",
-  "max-h-0",
-  "max-h-60",
-  "max-h-[1000px]",
-  "max-h-[calc(100vh-140px)]",
-  "max-w-2xl",
-  "max-w-7xl",
-  "max-w-sm",
-  "max-w-xs",
-  "mb-2",
-  "mb-3",
-  "mb-4",
-  "mb-6",
-  "mb-8",
-  "md:bg-primary-500",
-  "md:block",
-  "md:fixed",
-  "md:flex",
-  "md:flex-col",
-  "md:h-16",
-  "md:hidden",
-  "md:inset-y-0",
-  "md:ml-6",
-  "md:ml-80",
-  "md:mr-3",
-  "md:mr-6",
-  "md:mt-8",
-  "md:p-20",
-  "md:pl-4",
-  "md:pl-80",
-  "md:px-6",
-  "md:py-0",
-  "md:rounded-t-3xl",
-  "md:text-2xl",
-  "md:text-3xl",
-  "md:w-1/2",
-  "md:w-80",
-  "md:w-[300px]",
-  "md:w-[440px]",
-  "me-1",
-  "min-h-full",
-  "min-h-screen",
-  "ml-1",
-  "ml-2",
-  "ml-3",
-  "ml-4",
-  "mr-1",
-  "mr-2",
-  "mt-0",
-  "mt-0.5",
-  "mt-1",
-  "mt-1.5",
-  "mt-10",
-  "mt-2",
-  "mt-3",
-  "mt-3.5",
-  "mt-4",
-  "mt-5",
-  "mt-6",
-  "mx-2",
-  "mx-3",
-  "mx-auto",
-  "my-1",
-  "my-auto",
-  "object-contain",
-  "opacity-0",
-  "opacity-100",
-  "opacity-25",
-  "opacity-30",
-  "opacity-40",
-  "opacity-50",
-  "opacity-75",
-  "order-last",
-  "ordinal",
-  "origin-top-left",
-  "outline",
-  "outline-0",
-  "overflow-auto",
-  "overflow-hidden",
-  "overflow-y-auto",
-  "p-1",
-  "p-1.5",
-  "p-2",
-  "p-4",
-  "pb-4",
-  "peer-checked:text-primary-500",
-  "pl-1",
-  "pl-10",
-  "pl-11",
-  "pl-2",
-  "pl-3",
-  "place-items-center",
-  "placeholder-gray-500",
-  "placeholder:text-gray-400",
-  "placeholder:text-sm",
-  "pointer-events-auto",
-  "pointer-events-none",
-  "pr-10",
-  "pr-12",
-  "pr-2",
-  "pr-4",
-  "pr-5",
-  "pr-7",
-  "pt-0",
-  "pt-0.5",
-  "pt-2",
-  "pt-5",
-  "px-0",
-  "px-0.5",
-  "px-1",
-  "px-1.5",
-  "px-2",
-  "px-3",
-  "px-3.5",
-  "px-4",
-  "px-6",
-  "py-0",
-  "py-1",
-  "py-1.5",
-  "py-14",
-  "py-2",
-  "py-2.5",
-  "py-24",
-  "py-3",
-  "py-4",
-  "py-6",
-  "relative",
-  "right-0",
-  "right-auto",
-  "ring-0",
-  "ring-1",
-  "ring-black",
-  "ring-gray-300",
-  "ring-inset",
-  "ring-opacity-5",
-  "rotate-180",
-  "rounded",
-  "rounded-2xl",
-  "rounded-b-2xl",
-  "rounded-full",
-  "rounded-l-full",
-  "rounded-lg",
-  "rounded-md",
-  "rounded-r-full",
-  "rounded-t-2xl",
-  "rounded-xl",
-  "scale-100",
-  "scale-95",
-  "scroll-py-2",
-  "select-none",
-  "shadow",
-  "shadow-2xl",
-  "shadow-gray-50",
-  "shadow-lg",
-  "shadow-md",
-  "shadow-sm",
-  "shadow-xl",
-  "shrink",
-  "sm:border",
-  "sm:border-b",
-  "sm:border-t-0",
-  "sm:col-start-1",
-  "sm:col-start-2",
-  "sm:flex",
-  "sm:flex-1",
-  "sm:flex-nowrap",
-  "sm:flex-row-reverse",
-  "sm:font-medium",
-  "sm:gap-3",
-  "sm:grid",
-  "sm:grid-cols-2",
-  "sm:grid-cols-3",
-  "sm:grid-flow-row-dense",
-  "sm:h-10",
-  "sm:hidden",
-  "sm:items-center",
-  "sm:items-start",
-  "sm:justify-between",
-  "sm:justify-start",
-  "sm:leading-4",
-  "sm:max-w-lg",
-  "sm:max-w-sm",
-  "sm:mb-0",
-  "sm:mb-1",
-  "sm:mb-1.5",
-  "sm:ml-2",
-  "sm:ml-3",
-  "sm:ml-4",
-  "sm:mr-2",
-  "sm:mt-0",
-  "sm:mt-1",
-  "sm:mt-2",
-  "sm:mt-2.5",
-  "sm:mt-4",
-  "sm:mt-5",
-  "sm:mt-6",
-  "sm:mx-0",
-  "sm:mx-1",
-  "sm:my-8",
-  "sm:order-none",
-  "sm:overflow-visible",
-  "sm:p-0",
-  "sm:p-6",
-  "sm:pb-4",
-  "sm:pr-6",
-  "sm:px-14",
-  "sm:px-2",
-  "sm:px-3",
-  "sm:px-4",
-  "sm:py-32",
-  "sm:py-4",
-  "sm:relative",
-  "sm:rounded-lg",
-  "sm:scale-100",
-  "sm:scale-95",
-  "sm:shadow-sm",
-  "sm:space-x-10",
-  "sm:space-x-4",
-  "sm:space-x-5",
-  "sm:space-x-reverse",
-  "sm:space-y-0",
-  "sm:static",
-  "sm:text-5xl",
-  "sm:text-left",
-  "sm:text-sm",
-  "sm:translate-y-0",
-  "sm:w-10",
-  "sm:w-auto",
-  "sm:w-full",
-  "sm:z-auto",
-  "space-x-1",
-  "space-x-1.5",
-  "space-y-1",
-  "space-y-2",
-  "space-y-3",
-  "space-y-4",
-  "sr-only",
-  "static",
-  "sticky",
-  "stroke-white",
-  "text-2xl",
-  "text-3xl",
-  "text-[8px]",
-  "text-aside",
-  "text-base",
-  "text-blue-400",
-  "text-center",
-  "text-dark",
-  "text-gray-200",
-  "text-gray-300",
-  "text-gray-400",
-  "text-gray-500",
-  "text-gray-600",
-  "text-gray-700",
-  "text-gray-800",
-  "text-gray-900",
-  "text-green-400",
-  "text-green-600",
-  "text-indigo-600",
-  "text-left",
-  "text-lg",
-  "text-opacity-40",
-  "text-orange-400",
-  "text-orange-600",
-  "text-primary-50",
-  "text-primary-500",
-  "text-primary-800",
-  "text-red-400",
-  "text-red-600",
-  "text-slate-600",
-  "text-slate-900",
-  "text-sm",
-  "text-start",
-  "text-teal-600",
-  "text-vtd-primary-500",
-  "text-vtd-primary-600",
-  "text-white",
-  "text-xl",
-  "text-xs",
-  "text-yellow-700",
-  "top-0",
-  "top-1/2",
-  "top-3",
-  "top-3.5",
-  "top-full",
-  "tracking-tight",
-  "tracking-wide",
-  "transform",
-  "transition",
-  "transition-all",
-  "transition-colors",
-  "transition-opacity",
-  "transition-transform",
-  "translate-x-0",
-  "translate-x-4",
-  "translate-y-0",
-  "translate-y-3",
-  "translate-y-4",
-  "truncate",
-  "uppercase",
-  "visible",
-  "w-0",
-  "w-1/2",
-  "w-10",
-  "w-12",
-  "w-14",
-  "w-16",
-  "w-4",
-  "w-5",
-  "w-56",
-  "w-6",
-  "w-8",
-  "w-80",
-  "w-9",
-  "w-[170px]",
-  "w-[2.7rem]",
-  "w-[266px]",
-  "w-auto",
-  "w-full",
-  "whitespace-nowrap",
-  "whitespace-pre-wrap",
-  "z-10",
-  "z-20",
-  "z-40",
-  "z-50"
-]

Dockerfile

@@ -1,30 +1,20 @@
-# FROM node:lts-alpine as build-stage
+# syntax=docker/dockerfile:1
-# WORKDIR /app
+# build stage
-# COPY package*.json ./
+FROM node:lts-alpine as builder
-# RUN npm install
+WORKDIR /apkt
-# COPY . .
+COPY package*.json ./
-# RUN npm run build
+RUN npm install && npm install npm-run-all -g
-# FROM nginx:stable-alpine as production-stage
+COPY . .
-# COPY --from=build-stage /app/dist /usr/share/nginx/html
+RUN npm run build
-# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+# production stage
-# EXPOSE 32166
+FROM nginx:stable-alpine
-# CMD ["nginx", "-g", "daemon off;"]
+COPY --from=builder /apkt/dist /usr/share/nginx/html
+COPY --from=builder /apkt/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 32166
+CMD ["nginx", "-g", "daemon off;"]
 
 # FROM nginx:stable-alpine
 # COPY /dist /usr/share/nginx/html
 # COPY /nginx.conf /etc/nginx/nginx.conf
 # EXPOSE 32166
 # CMD ["nginx", "-g", "daemon off;"]
-
-# Use official Node image as base image for building
-FROM node:latest AS builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
-FROM nginx:latest
-COPY --from=builder /app/dist /usr/share/nginx/html
-COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf
-EXPOSE 32166
-CMD ["nginx", "-g", "daemon off;"]

deployment.yaml

@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: apkt-eis
-          image: defuj/apkt-eis:v0.0.7-vm
+          image: defuj/apkt-eis:v0.0.10-vm
           ports:
             - containerPort: 80
 ---

package.json

@@ -20,11 +20,10 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.0.18",
-    "@lottiefiles/lottie-player": "^2.0.2",
+    "@lottiefiles/lottie-player": "^2.0.4",
     "@phosphor-icons/vue": "^2.1.6",
-    "@popperjs/core": "^2.11.8",
+    "@types/qs": "^6.9.12",
-    "@types/qs": "^6.9.9",
+    "@types/uuid": "^9.0.8",
-    "@types/uuid": "^9.0.2",
     "@types/vue-select": "^3.16.8",
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
@@ -34,19 +33,16 @@
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
     "dotenv": "^16.3.1",
-    "encrypt-storage": "^2.12.16",
+    "encrypt-storage": "^2.12.22",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.2",
-    "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
-    "react": "^18.2.0",
+    "uuid": "^9.0.1",
-    "react-dom": "^18.2.0",
-    "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "vue-tailwind-datepicker": "^1.6.1"
@@ -71,7 +67,6 @@
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
     "jsdom": "^22.1.0",
-    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.3.2",

src/components/Buttons/ButtonPrimary.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import * as LottiePlayer from "@lottiefiles/lottie-player";
 defineProps({
     type: {
         type: String as () => "button" | "submit" | "reset",

src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue

@@ -1,153 +1,48 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
+    <Type1 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
-        :width="170"
-        alignment="center"
-        data-field="uid"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-          data-field="januari"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-          caption="Januari"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-          data-field="februari"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-          caption="Februari"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-          data-field="maret"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-          caption="Maret"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="april"
-          data-type="number"
-          caption="April"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="mei"
-          data-type="number"
-          caption="Mei"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juni"
-          data-type="number"
-          caption="Juni"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juli"
-          data-type="number"
-          caption="Juli"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="agustus"
-          data-type="number"
-          caption="Agustus"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="september"
-          data-type="number"
-          caption="September"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="oktober"
-          data-type="number"
-          caption="Oktober"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="november"
-          data-type="number"
-          caption="November"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="desember"
-          data-type="number"
-          caption="Desember"
-          css-class="custom-table-column"
-        />
       </DxColumn>
     </DxDataGrid>
   </div>

src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue

@@ -1,132 +1,57 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
+    <Type1 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-        :width="50"
+        <DxColumn :width="50" alignment="center"
-        alignment="center"
+          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
-        caption="NO"
+          css-class="custom-table-column" />
-        css-class="custom-table-column"
-        rowspan="4"
-        colspan="2"
-      >
-        <DxColumn
-          :width="50"
-          alignment="center"
-          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-          caption="a"
-          css-class="custom-table-column"
-        />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
-          :width="150"
-          alignment="center"
-          data-field="regu"
-          caption="b"
-          css-class="custom-table-column"
-        />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
-          :width="150"
-          alignment="center"
-          data-field="kode_regu"
-          caption="c"
-          css-class="custom-table-column"
-        />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
-            data-field="total_laporan"
-            caption="d=(e+g)"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              data-field="total_selesai"
-              caption="e"
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              data-field="persen_selesai"
-              caption="f=(e/d)*100"
-              css-class="custom-table-column"
-            />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              data-field="total_belum_selesai"
-              caption="g"
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              data-field="persen_belum_selesai"
-              caption="h=(g/d)*100"
-              css-class="custom-table-column"
-            />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -136,43 +61,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="total_laporan_mobile_nonmarking"
-                  caption="i"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
-                  :width="150"
+                  caption="j=(i/d)*100" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="persen_laporan_mobile_nonmarking"
-                  caption="j=(i/d)*100"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_response_mobile_nonmarking"
-                  caption="k"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_recovery_mobile_nonmarking"
-                  caption="l"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -180,43 +85,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="total_laporan_mobile_marking"
-                  caption="m"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
-                  :width="150"
+                  caption="n=(m/d)*100" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="persen_laporan_mobile_marking"
-                  caption="n=(m/d)*100"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_response_mobile_marking"
-                  caption="o"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_recovery_mobile_marking"
-                  caption="p"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -226,43 +111,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="total_laporan_nonmobile_nonmarking"
-                  caption="q"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
-                  :width="150"
+                  caption="r=(q/d)*100" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="persen_laporan_nonmobile_nonmarking"
-                  caption="r=(q/d)*100"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking"
-                  :width="150"
+                  caption="s" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_response_nonmobile_nonmarking"
-                  caption="s"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking"
-                  :width="150"
+                  caption="t" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_nonmarking"
-                  caption="t"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -270,43 +135,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="total_laporan_nonmobile_marking"
-                  caption="u"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
-                  :width="150"
+                  caption="v=(u/d)*100" css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="persen_laporan_nonmobile_marking"
-                  caption="v=(u/d)*100"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_response_nonmobile_marking"
-                  caption="w"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
+                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x"
-                  :width="150"
+                  css-class="custom-table-column" />
-                  alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_marking"
-                  caption="x"
-                  css-class="custom-table-column"
-                />
               </DxColumn>
             </DxColumn>
           </DxColumn>

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -1,153 +1,48 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type18
+    <Type18 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
-        :width="170"
-        alignment="center"
-        data-field="uid"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-          data-field="januari"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-          caption="Januari"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-          data-field="februari"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-          caption="Februari"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
+        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-          :width="100"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-          data-field="maret"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-          caption="Maret"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
+        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-        />
+          css-class="custom-table-column" />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="april"
-          data-type="number"
-          caption="April"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="mei"
-          data-type="number"
-          caption="Mei"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juni"
-          data-type="number"
-          caption="Juni"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="juli"
-          data-type="number"
-          caption="Juli"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="agustus"
-          data-type="number"
-          caption="Agustus"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="september"
-          data-type="number"
-          caption="September"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="oktober"
-          data-type="number"
-          caption="Oktober"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="november"
-          data-type="number"
-          caption="November"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="100"
-          alignment="center"
-          data-field="desember"
-          data-type="number"
-          caption="Desember"
-          css-class="custom-table-column"
-        />
       </DxColumn>
     </DxDataGrid>
   </div>

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -1,195 +1,66 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
+    <Type1 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        :width="50"
+        caption="NO" data-type="number" css-class="custom-table-column" />
-        alignment="center"
+      <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        caption="NO"
-        data-type="number"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Kode Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-            data-field=""
+            css-class="custom-table-column" />
-            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>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-            data-field=""
+            css-class="custom-table-column" />
-            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>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-            data-field=""
+            css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-            caption="Jml"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-          />
+            css-class="custom-table-column" />
-          <DxColumn
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-            :width="120"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-            data-field=""
+            css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-            caption="1"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="2"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="3"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="4"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="5"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Index"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-          data-field=""
+          css-class="custom-table-column" />
-          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>
     </DxDataGrid>
   </div>

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -1,195 +1,66 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1
+    <Type1 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        :width="50"
+        caption="NO" data-type="number" css-class="custom-table-column" />
-        alignment="center"
+      <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
-        caption="NO"
-        data-type="number"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Kode"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Nama Regu"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-            data-field=""
+            css-class="custom-table-column" />
-            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>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-            data-field=""
+            css-class="custom-table-column" />
-            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>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-            data-field=""
+            css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-            caption="Jml"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-          />
+            css-class="custom-table-column" />
-          <DxColumn
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-            :width="120"
+            css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-            data-field=""
+            css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-            caption="1"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="2"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="3"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="4"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="5"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Index"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-          data-field=""
+          css-class="custom-table-column" />
-          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>
     </DxDataGrid>
   </div>

src/components/SelectMulti.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 
-import { type PropType } from 'vue'
+import { ref } from 'vue';
-import Multiselect from '@vueform/multiselect'
+import { TagsInput } from '@flavorly/vanilla-components';
+// import Multiselect from '@vueform/multiselect';
 interface Tags {
   id: number
   value: string,
   label: string
 }
 
-defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
     default: ''
   },
   tags: {
-    type: Array as PropType<Tags[]>,
+    type: Array as () => Tags[],
     required: true
   },
   useLabel: {
@@ -26,18 +27,22 @@ defineProps({
     default: ''
   }
 })
+
+const allowed = ref(props.tags.map((tag) => tag.label))
+const tags = ref<string[]>([])
+
+const updateTags = (value: string[]) => {
+  tags.value = value
+}
 </script>
 
 <template>
   <div class="flex flex-col">
-    <Multiselect
+    <TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
-      mode="tags"
+      valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
-      :placeholder="placeholder"
+
-      :close-on-select="false"
+    <!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
-      :searchable="true"
+      :create-option="true" :options="props.tags" :classes="{
-      :create-option="true"
-      :options="tags"
-      :classes="{
       container:
         'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg  bg-gray-200 text-left text-base leading-snug outline-none',
       containerDisabled: 'cursor-default bg-gray-50',
@@ -109,7 +114,6 @@ defineProps({
         'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
       assist: 'absolute -m-px w-px h-px overflow-hidden',
       spacer: 'box-content'
-      }"
+    }" /> -->
-    />
   </div>
 </template>

src/main.ts

@@ -1,5 +1,4 @@
 // import 'devextreme/dist/css/dx.material.blue.light.compact.css'
-import '@lottiefiles/lottie-player'
 import '@/assets/css/main.css'
 import { createPinia } from 'pinia'
 import App from './App.vue'
@@ -25,6 +24,23 @@ app.use(
         searchInput: 'rich-select-search-input',
         selectedHighlightedOption: 'rich-select-selected-highlighted-option'
       }
+    },
+    TagsInput: {
+      fixedClasses: {
+        input: 'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
+        inputWrapper: 'inline-flex flex-grow bg-transparent',
+        tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
+        tagDeleteButtonIcon: 'w-3 h-3',
+        tagLabel: 'px-3 text-xs',
+      },
+      classes: {
+        input: 'min-h-[32px]',
+        inputWrapper: '',
+        tagsWrapper: '',
+        tagDeleteButtonIcon: '',
+        tagLabel: '',
+        trigger: 'bg-gray-200 rounded-lg mb-2 mt-2',
+      },
     }
   })
 )