@dasidev/dasi-ui 1.0.0

package/src/components/detail/DocViewerContent.vue

@@ -0,0 +1,991 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from "vue";
+import {
+  LucideCheckCheck,
+  LucideX,
+  LucideFile,
+  LucideDownload,
+  LucideFileArchive,
+  LucideCheck,
+  LucidePencilLine,
+  LucideFileWarning,
+  LucideFilePenLine,
+  LucideMinus,
+  LucidePlus,
+  LucideChevronUp,
+  LucideNotebookPen,
+  LucideArrowDown,
+  LucideArrowUp,
+  LucideLogs,
+  LucideLoaderCircle,
+  LucideRotateCcw
+} from "lucide-vue-next";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from "@/components/ui/sheet";
+import { cn, isValidValue } from "@/lib/utils";
+import { type ErrorDialogOptions } from "@/components/dialog/ErrorDialog.vue";
+import pdfLogo from "@/assets/pdf-logo.svg";
+import ConfirmDialog from "@/components/dialog/ConfirmDialog.vue";
+import api from "@/api/api";
+import moment from "moment";
+import FormInputerDialog from "@/components/dialog/FormInputerDialog.vue";
+import { DialogDescription, DialogTitle } from "@/components/ui/dialog";
+import PdfViewer from "@/components/helper/PdfViewer.vue";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.vue";
+import { useConfirmDialog, useErrorDialog, useInfoDialog, useLoadingDialog, useSuccessDialog } from "@/stores/dialog";
+import type { DasiV2FormSchema } from "@/types/form.types";
+import DetailContentLoading from "@/components/detail/DetailContentLoading.vue";
+import DetailContentHeader from "@/components/detail/DetailContentHeader.vue";
+import ApprovalInfo from "./ApprovalInfo.vue";
+import { InternalServerError } from "@/lib/constants";
+import type { ColumnRef, PageConfig } from "@/vueform/config/types";
+import { getPageDataDetail } from "@/lib/page.utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import DCI2 from "@/components/detail/DCI2.vue";
+
+export interface DocViewerOptions {
+  title?: string;
+  item: any;
+  file?: any;
+}
+
+interface Props {
+  formSchema: DasiV2FormSchema;
+  detailEndpoint: string;
+  docsEndpoint: string;
+  columns?: ColumnRef[];
+  pageConfig?: PageConfig;
+  showFooter?: boolean;
+  title?: string;
+  class?: string;
+  approvalDisabled?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: "Data Detail"
+});
+const emits = defineEmits(["close"]);
+
+const data = defineModel<any>("data", { default: {} });
+const loadingDetail = ref(true);
+const sheetOpen = ref(false);
+const loading = ref(false);
+const file = ref<any>(null);
+const detailSelected = ref(true);
+const approvalStatus = ref<any>(null);
+const dialogTitle = ref(props.title);
+let resolveFn: (value: boolean) => void;
+
+/**
+ * For shipment and payment flow
+ * when displaying parent and child data
+ *
+ */
+const parentData = ref<any>(null);
+const loadingParent = ref(false);
+
+/**
+ * Used to set loading on button
+ *
+ */
+const saving = ref(false);
+const generatingDocs = ref(false);
+
+const inputerDialogType = ref("");
+const selectedFiles = ref<string[]>([]);
+const isApprovalDisabled = computed(() => {
+  /**
+   * Approval disabled if
+   * User can not approve this doc, or
+   * document already approved
+   *
+   */
+  return loading.value || !myApproval.value || myApproval.value.approvalStatus !== "WAITING_APPROVAL";
+});
+
+/**
+ * Pdf viewer
+ *
+ */
+const pdfScale = ref(1.4);
+const zoomType = ref<string>("zoom");
+
+/**
+ * Documents
+ *
+ */
+const docs = defineModel<any[]>("docs", { default: [] });
+const showDocActions = ref(true);
+const allReviewed = computed(() => {
+  for (const item of docs.value) {
+    if (item.type === "divider" || item.notes) continue;
+    if (!item.diperiksa) return false;
+  }
+  return true;
+});
+const notesCount = computed(() => {
+  return docs.value.filter((r: any) => r.type !== "divider" && !!r.notes).length;
+});
+const notes = computed(() => {
+  return docs.value.filter((r: any) => r.notes) ?? [];
+});
+
+/**
+ * Approval strategy
+ *
+ */
+const approvalStrategy = ref<any>();
+const approvals = ref<any[]>([]);
+const myApproval = ref<any>();
+const approvalRequester = ref<any>();
+
+/**
+ * Approval history
+ *
+ */
+const approvalHistory = ref<any[]>([]);
+const viewAllHistory = ref(false);
+const approvalHistoryView = computed(() => {
+  return viewAllHistory.value ? approvalHistory.value : approvalHistory.value.slice(0, 3);
+});
+
+/**
+ * El
+ *
+ */
+const confirmDialog = useConfirmDialog();
+const errorDialog = useErrorDialog();
+const successDialog = useSuccessDialog();
+const formInputerDialog = ref<any>(null);
+const infoDialog = useInfoDialog();
+const tidakSetujuiDialog = ref<any>(null);
+
+async function open(options: DocViewerOptions) {
+  dialogTitle.value = options.title ?? props.title;
+  sheetOpen.value = true;
+  loading.value = true;
+  loadingDetail.value = true;
+  file.value = options.file;
+  detailSelected.value = !options.file;
+  await nextTick();
+
+  getDetail(options.item);
+  getDocs(options.item);
+
+  return new Promise(resolve => {
+    resolveFn = resolve;
+  });
+}
+
+function getDocs(item: any) {
+  const base = `${props.docsEndpoint}/${item.id}`;
+
+  const extractList = (r: any) => (Array.isArray(r?.data?.data) ? r.data.data : []);
+
+  // Prefer singular endpoint first; if empty/null, fallback to plural
+  api
+    .get(`${base}/document`)
+    .then(r => {
+      const list = extractList(r);
+      if (list && list.length > 0) {
+        docs.value = list;
+        return;
+      }
+      // Fallback when document returns empty or null
+      return api.get(`${base}/documents`).then(r2 => {
+        docs.value = extractList(r2);
+      });
+    })
+    .catch(() => {
+      // If singular fails (404 or other), try plural
+      return api.get(`${base}/documents`).then(r2 => {
+        docs.value = extractList(r2);
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+async function getDetail(item: any) {
+  /**
+   * This is flow page,
+   * used on shipment and payment
+   *
+   */
+  if (props.pageConfig?.parentField && props.pageConfig.nextDataField && props.pageConfig.endpoint && isValidValue(item?.[props.pageConfig.nextDataField])) {
+    loadingParent.value = true;
+    getPageDataDetail({
+      endpoint: props.pageConfig.endpoint ?? "",
+      pageConfig: props.pageConfig,
+      item: { id: item.id },
+      formSchema: {}
+    })
+      .then(r => {
+        if (!r || !r.data) return;
+        parentData.value = r.data.data || r.data;
+      })
+      .finally(() => {
+        loadingParent.value = false;
+      });
+  }
+
+  const detailEndpoint =
+    props.detailEndpoint || props.pageConfig?.viewDetailEndpoint || props.pageConfig?.viewDocsEndpoint || props.pageConfig?.savePath || props.pageConfig?.endpoint || props.docsEndpoint || "";
+
+  getPageDataDetail({
+    item: item,
+    endpoint: props.pageConfig?.viewDetailEndpoint ?? props.pageConfig?.viewDocsEndpoint ?? props.pageConfig?.savePath ?? props.pageConfig?.endpoint ?? "",
+    pageConfig: props.pageConfig,
+    formSchema: props.formSchema,
+    includeExtras: false
+  })
+    .then(r => {
+      if (!r) return;
+      data.value = r.data.data;
+      approvalStrategy.value = r.data.approvalStrategy;
+      approvals.value = r.data.approvals;
+      myApproval.value = r.data.myApproval;
+      approvalRequester.value = r.data.requester;
+      approvalHistory.value = r.data.approvalHistory ?? [];
+    })
+    .finally(() => {
+      loadingDetail.value = false;
+    });
+}
+
+function close() {
+  const b = !!myApproval.value;
+  emits("close", b);
+  sheetOpen.value = false;
+  resolveFn(b);
+}
+
+function checkAllReviewed(): boolean {
+  if (!allReviewed.value) {
+    infoDialog.open({
+      title: "Dokumen belum diperiksa",
+      description: "Mohon untuk periksa semua dokumen dan pastikan informasi sudah benar untuk melanjutkan.",
+      actionLabel: "Tutup"
+    });
+    return false;
+  }
+  return true;
+}
+
+function setujui() {
+  if (!checkAllReviewed()) return;
+  if (notesCount.value) {
+    infoDialog.open({
+      title: "Terdapat catatan perbaikan",
+      description: "Untuk menyetujui dokumen ini, mohon pastikan sudah tidak ada catatan perbaikan.",
+      actionLabel: "Tutup"
+    });
+    return;
+  }
+
+  inputerDialogType.value = "setujui";
+  confirmDialog
+    .open({
+      title: "Setujui Data",
+      description: `Apakah Anda yakin ingin menyetujui dokumen <b class="text-blue-500">${dialogTitle.value}</b> ini?`,
+      actionLabel: "Setujui Dokumen",
+      cancelLabel: "Batal",
+      negative: false
+    })
+    .then((b: boolean) => {
+      if (!b) return;
+      const noteItems = [];
+      for (const item of docs.value.filter((r: any) => r.type !== "divider") ?? []) {
+        noteItems.push({
+          diperiksa: item.diperiksa,
+          idDokumen: item.id,
+          namaDokumen: item.name,
+          mediaId: item.mediaId,
+          keterangan: item.notes,
+          tipeDokumen: item.id
+        });
+      }
+      saving.value = true;
+      api
+        .post(`${props.docsEndpoint}/${data.value.id}/approve`, {
+          items: noteItems
+        })
+        .then(r => {
+          getDetail(data.value);
+          successDialog.open();
+        })
+        .finally(() => {
+          saving.value = false;
+        });
+    });
+}
+
+function tidakSetujui() {
+  if (!checkAllReviewed()) return;
+
+  if (!notesCount.value && docs.value.length > 0) {
+    infoDialog.open({
+      title: "Tidak ada catatan",
+      description: "Mohon untuk mengisi catatan pada satu atau beberapa dokumen perbaikan untuk melanjutkan.",
+      actionLabel: "Tutup"
+    });
+    return;
+  }
+
+  const msg = notesCount.value
+    ? "Dokumen tidak disetujui dengan catatan yang akan ditujukan ke masing - masing penanggun jawab, dengan catatan sebagai berikut:"
+    : "Apakah Anda yakin untuk tidak menyetujui Data ini? Data akan dikembalikan ke pengaju approval untuk perbaikan ulang.";
+  tidakSetujuiDialog.value.open(
+    {
+      title: "Tidak Setujui Dokumen",
+      description: msg,
+      cancelLabel: "Batal",
+      actionLabel: "Tidak Setujui",
+      negative: true
+    },
+    (b: boolean) => {
+      if (!b) return;
+      const noteItems = [];
+      for (const item of docs.value.filter((r: any) => r.type !== "divider") ?? []) {
+        noteItems.push({
+          diperiksa: item.diperiksa,
+          idDokumen: item.id,
+          namaDokumen: item.name,
+          mediaId: item.mediaId,
+          keterangan: item.notes,
+          tipeDokumen: item.id
+        });
+      }
+      saving.value = true;
+      api
+        .post(`${props.docsEndpoint}/${data.value.id}/reject`, {
+          items: noteItems
+        })
+        .then(r => {
+          successDialog.open();
+          getDetail(data.value);
+        })
+        .catch(err => {
+          const options: ErrorDialogOptions = {
+            title: "Tidak Setujui Gagal",
+            description: err.message || "Internal server error"
+          };
+          errorDialog.open(options);
+        })
+        .finally(() => {
+          saving.value = false;
+        });
+    }
+  );
+}
+
+function reviewAllFile() {
+  confirmDialog
+    .open({
+      title: "Periksa Semua File",
+      description: `Apakah Anda sudah memeriksa semua file dokumen?`,
+      cancelLabel: "Batal",
+      actionLabel: "Sudah Diperiksa",
+      negative: false
+    })
+    .then((b: any) => {
+      if (!b) return;
+      for (const r of docs.value) {
+        if (r.type === "divider" || r.notes || !r.url) continue;
+        r.diperiksa = true;
+      }
+    });
+}
+
+function selectItem(item: any) {
+  file.value = item;
+  document.getElementById(`pdf-container-${item.id}`)?.scrollIntoView();
+}
+
+function selectFile(item: any) {
+  if (!selectedFiles.value.includes(item.id)) selectedFiles.value.push(item.id);
+  else selectedFiles.value.splice(selectedFiles.value.indexOf(item.id), 1);
+}
+
+function selectAllFile() {
+  if (selectedFiles.value.length === docs.value.filter((r: any) => r.type !== "divider").length) {
+    selectedFiles.value = [];
+  } else {
+    selectedFiles.value = docs.value.filter((r: any) => r.type !== "divider").map((r: any) => r.id);
+  }
+}
+
+function toggleReviewed(item: any) {
+  if (isApprovalDisabled.value) return;
+  if (item.notes || !item.url) return;
+  item.diperiksa = !item.diperiksa;
+}
+
+function tulisCatatan(item: any) {
+  if (isApprovalDisabled.value) return;
+  inputerDialogType.value = "catatan";
+  formInputerDialog.value.open(
+    {
+      keterangan: {
+        type: "textarea",
+        label: "Catatan",
+        placeholder: "Tulis catatan....",
+        default: item.notes,
+        disabled: approvalStatus.value && approvalStatus.value.status === false && !approvalStatus.value.submitUlang
+      }
+    },
+    (formData: any) => {
+      item.notes = formData.keterangan;
+    }
+  );
+}
+
+function submitApproval() {
+  if (saving.value) return;
+  confirmDialog
+    .open({
+      title: "Submit Approval",
+      description: `Apakah Anda yakin untuk submit data ini untuk proses Approval?<br /><br />` + "Setelah data disubmit untuk proses approval, data sudah tidak dapat melakukan perubahan lagi.",
+      cancelLabel: "Batal",
+      actionLabel: "Submit Approval",
+      negative: false
+    })
+    .then((b: any) => {
+      if (!b) return;
+      saving.value = true;
+      api
+        .post(`${props.docsEndpoint}/${data.value.id}/approval`)
+        .then(r => {
+          getDetail(data.value);
+          successDialog.open();
+        })
+        .catch(err => {
+          errorDialog.open({
+            title: "Submit Approval Gagal",
+            description: err.message ?? InternalServerError
+          });
+        })
+        .finally(() => {
+          saving.value = false;
+        });
+    });
+}
+
+function onInteractOutside(e: any) {
+  e.preventDefault();
+}
+
+function onScrolled(e: any) {
+  detailSelected.value = e.target.scrollTop < (document.getElementById("pdf-sc-top-helper")?.offsetTop ?? 0);
+  for (const item of docs.value) {
+    if (item.type === "divider") continue;
+    const elOffsetTop = document.getElementById(`pdf-container-${item.id}`)?.offsetTop || 0;
+    if (e.target.scrollTop >= elOffsetTop) {
+      file.value = item;
+    }
+  }
+}
+
+function reloadData() {
+  if (!data.value) return;
+  getDocs(data.value);
+  getDetail(data.value);
+}
+
+onMounted(() => {});
+
+defineExpose({ open, close, getDocs, reloadData });
+</script>
+
+<template>
+  <Sheet v-model:open="sheetOpen">
+    <SheetContent
+      :class="cn('w-[calc(100vw-80px)] !max-w-[calc(100vw-80px)] bg-white px-8 pt-3 dark:border-dark_bg2 dark:bg-dark_bg2', props.class)"
+      v-on:escape-key-down="onInteractOutside"
+      v-on:pointer-down-outside="onInteractOutside">
+      <SheetHeader class="relative gap-y-0.5 pl-6">
+        <button
+          v-on:click="close"
+          class="absolute -left-4 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main">
+          <LucideX class="h-6 w-6"></LucideX>
+        </button>
+        <SheetTitle>{{ dialogTitle }}</SheetTitle>
+      </SheetHeader>
+      <section class="absolute bottom-0 left-0 right-0 top-14 flex w-full border-t dark:border-dark_border3" :class="{ '!bottom-14': props.showFooter }">
+        <div class="h-full w-full flex-1 basis-auto">
+          <section v-if="loading" class="flex h-full items-center justify-center">
+            <LoadingIndicator class="scale-90" />
+          </section>
+          <div class="flex h-full w-full" v-else>
+            <!-- leftbar -->
+            <div class="flex h-full w-[260px] flex-none flex-col overflow-hidden border-r bg-white dark:border-dark_border3 dark:bg-dark_bg2">
+              <div class="h-full">
+                <div class="p-1">
+                  <div
+                    class="group relative flex cursor-pointer items-center gap-2 rounded-sm border px-2 py-2 hover:bg-accent dark:border-dark_bg5 dark:bg-dark_bg5"
+                    :class="{ '!border-blue-500 !bg-blue-100 !text-blue-500 dark:!bg-blue-500 dark:!text-white': detailSelected }">
+                    <LucideLogs :size="20" :stroke-width="2" class="mr-px" />
+                    <span class="text-[13px] font-medium leading-tight"> Informasi Detail </span>
+                  </div>
+                </div>
+
+                <div class="mb-1 flex h-[36px] items-center border-b px-4 dark:border-dark_border3" v-if="docs.length > 0">
+                  <div class="flex items-center gap-1.5 text-sm font-medium">
+                    <button class="group -ml-[5px] rounded-full p-1.5 hover:bg-blue-100" v-on:click="selectAllFile">
+                      <button
+                        class="flex size-4 items-center justify-center rounded-sm border-2 border-slate-400 group-hover:border-blue-500 dark:border-dark_bg2"
+                        :class="{ '!border-blue-500 !bg-blue-500 !text-white': selectedFiles.length > 0 }">
+                        <LucideCheck :stroke-width="3" v-if="selectedFiles.length === docs.filter((r: any) => r.type !== 'divider').length" />
+                        <LucideMinus :stroke-width="3" v-else-if="selectedFiles.length > 0" />
+                      </button>
+                    </button>
+                    List Dokumen
+                  </div>
+                </div>
+
+                <ScrollArea class="h-[calc(100vh-143px)]">
+                  <div class="space-y-1 px-1 pb-16">
+                    <template v-for="(item, i) in docs" :key="i">
+                      <div class="!mt-5 px-2.5 text-sm font-medium opacity-65" v-if="item.type === 'divider'">
+                        {{ item.name }}
+                      </div>
+                      <div
+                        class="group relative flex cursor-pointer items-center gap-2 rounded-sm border px-2 py-1.5 hover:bg-accent dark:border-dark_bg4 dark:bg-dark_bg4"
+                        :class="{
+                          'border-green-500 bg-green-100 text-green-600': item.diperiksa,
+                          'border-orange-400 bg-orange-100 text-orange-500': item.notes,
+                          '!border-blue-500 !bg-blue-100 !text-blue-500 dark:!bg-blue-500 dark:!text-white': !detailSelected && file && file.id === item.id
+                        }"
+                        v-on:click="selectItem(item)"
+                        v-else>
+                        <div class="group relative w-6" v-if="!item.url">
+                          <LucideFileWarning :size="22" :stroke-width="1.5" class="text-red-500" />
+                          <div class="absolute left-0 top-full z-9 hidden w-[130px] rounded-md bg-black/75 px-2.5 py-1.5 text-[11px] leading-tight text-white group-hover:block">
+                            Dokumen {{ item.name }} tidak tersedia
+                          </div>
+                        </div>
+                        <img :src="pdfLogo" class="h-6 flex-none" v-else />
+                        <button
+                          class="absolute left-2 top-1.5 hidden rounded-md bg-white p-1 group-hover:block group-hover:bg-accent"
+                          :class="{ '!bg-blue-100': file && file.id === item.id, '!block': selectedFiles.includes(item.id) }"
+                          v-on:click="selectFile(item)">
+                          <div
+                            class="flex size-4 items-center justify-center rounded-sm border-2 border-slate-400 bg-white hover:border-blue-500"
+                            :class="{ '!border-blue-500 !bg-blue-500 !text-white': selectedFiles.includes(item.id) }">
+                            <LucideCheck v-if="selectedFiles.includes(item.id)" :stroke-width="3" />
+                          </div>
+                        </button>
+                        <span class="text-[13px] font-medium leading-tight">{{ item.name }}</span>
+                        <div class="ml-auto flex size-4 flex-none items-center justify-center" v-if="item.diperiksa || item.notes">
+                          <LucideFilePenLine v-if="item.notes" />
+                          <LucideCheck v-else />
+                        </div>
+                      </div>
+                      <div class="!mt-5 px-2.5 text-sm font-medium opacity-65" v-if="item.id === 'dokBastCif'">Dokumen Pendukung</div>
+                    </template>
+                    <a
+                      :href="''"
+                      target="_blank"
+                      download
+                      class="flex w-full items-center gap-2 rounded-sm border border-blue-500 px-3 py-1.5 text-[13px] font-medium text-blue-500 transition hover:bg-blue-100"
+                      v-if="selectedFiles.length > 0">
+                      <LucideFileArchive :size="20" class="-ml-0.5 mr-0.5" />
+                      Unduh File Terpilih
+                    </a>
+                  </div>
+                </ScrollArea>
+              </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="flex h-full w-full flex-col">
+              <div class="relative flex-1 bg-accent/10">
+                <div class="absolute bottom-2 left-2 right-2 z-[50] flex items-center gap-1.5 px-4 py-1" v-if="isValidValue(docs) && showDocActions">
+                  <BtnCircle class="border bg-white shadow-lg dark:border-dark_bg7 dark:bg-dark_bg7 dark:text-white dark:hover:bg-dark_bg8" @click="reloadData">
+                    <LucideRotateCcw :size="18" />
+                  </BtnCircle>
+                  <BtnCircle
+                    class="border bg-white shadow-lg dark:border-dark_bg7 dark:bg-dark_bg7 dark:text-white dark:hover:bg-dark_bg8"
+                    v-on:click="
+                      pdfScale -= 0.1;
+                      zoomType = 'zoom';
+                    ">
+                    <LucideMinus :size="18" />
+                  </BtnCircle>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger as-child>
+                      <BtnCircle class="!w-auto gap-2 border bg-white px-4 shadow-lg dark:border-dark_bg7 dark:bg-dark_bg7 dark:text-white dark:hover:bg-dark_bg8">
+                        <template v-if="zoomType === 'page-fit'"> Page Fit </template>
+                        <template v-else-if="zoomType === 'page-width'"> Page Width </template>
+                        <template v-else> {{ (pdfScale * 100).toFixed(0) }}% </template>
+                        <LucideChevronUp :size="18" />
+                      </BtnCircle>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent class="w-56">
+                      <DropdownMenuLabel>PDF Viewer Zoom</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem v-on:click="pdfScale = 0.5">
+                        <span>50%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 0.75">
+                        <span>75%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 1">
+                        <span>100%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 1.2">
+                        <span>120%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 1.5">
+                        <span>150%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 2">
+                        <span>200%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 3">
+                        <span>300%</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem v-on:click="pdfScale = 4">
+                        <span>400%</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <BtnCircle
+                    class="border bg-white shadow-lg dark:border-dark_bg7 dark:bg-dark_bg7 dark:text-white dark:hover:bg-dark_bg8"
+                    v-on:click="
+                      pdfScale += 0.1;
+                      zoomType = 'zoom';
+                    ">
+                    <LucidePlus :size="18" />
+                  </BtnCircle>
+
+                  <BtnCircle class="ml-auto !w-auto gap-2 border bg-white px-4 shadow-lg dark:border-none dark:bg-blue-500 dark:text-white dark:hover:bg-blue-600" v-on:click="reviewAllFile">
+                    <LucideCheckCheck :size="18" class="text-blue-600 dark:text-white" />
+                    Periksa Semua Dokumen
+                  </BtnCircle>
+                </div>
+                <div class="flex h-8 items-center gap-2 bg-slate-100 px-5 text-xs text-gray-600 dark:bg-dark_bg dark:text-gray-500" v-if="generatingDocs">
+                  <LucideLoaderCircle class="animate-spin" :size="18" />
+                  Generating document...
+                </div>
+                <div class="absolute bottom-0 left-0 right-0 top-0" :class="{ 'top-8': generatingDocs }">
+                  <div class="h-full overflow-auto" id="pdf-sc-area" v-on:scroll="onScrolled">
+                    <!-- view detail data -->
+                    <section>
+                      <DetailContentLoading v-if="loadingDetail || loadingParent" />
+                      <div class="bg-white py-5 dark:bg-dark_bg2" v-else-if="data">
+                        <DetailContentHeader :data="data" :endpoint="detailEndpoint" :pageConfig="pageConfig" />
+                        <template v-if="columns && parentData">
+                          <section class="detail-items px-6 pt-4">
+                            <div class="vueform-divider"><span>Informasi General</span></div>
+                          </section>
+                          <DCI2 :columns="columns" :data="parentData" />
+                          <div class="border-t py-1"></div>
+                        </template>
+                        <DCI2 :schema="formSchema" :data="data" v-if="formSchema" />
+                        <!-- <DetailContentItems :data="data" :schema="props.formSchema"/> -->
+                      </div>
+                    </section>
+
+                    <!-- documents viewer -->
+                    <div id="pdf-sc-top-helper"></div>
+                    <div v-for="(item, i) in docs">
+                      <div class="bg-gray-600 px-4 pb-1 pt-8 text-sm font-medium text-white/50" v-if="item.type === 'divider'">
+                        {{ item.name }}
+                      </div>
+                      <div :id="`pdf-container-${item.id}`" v-else>
+                        <div class="sticky top-0 z-10 flex items-center bg-gray-700 px-4 py-1.5 shadow-md dark:bg-dark_bg4">
+                          <h4 class="text-sm font-medium text-white">
+                            {{ item.name }}
+                          </h4>
+                          <div class="ml-auto flex items-center gap-1.5">
+                            <a
+                              :href="item.downloadUrl"
+                              target="_blank"
+                              v-if="item.downloadUrl"
+                              class="mr-2 flex cursor-pointer items-center gap-1 rounded-md bg-slate-800 py-1.5 pl-1.5 pr-3 text-sm font-medium text-white/90 transition hover:bg-slate-600 hover:shadow-sm">
+                              <LucideDownload class="h-4" />
+                              Download
+                            </a>
+                            <template v-if="myApproval">
+                              <div class="mr-2 flex items-center gap-1.5 text-sm text-green-400" v-if="item.sudahDiperbaiki">
+                                <LucideCheckCheck :size="22" />
+                                Sudah diperbaiki
+                              </div>
+                              <button
+                                class="flex cursor-pointer items-center gap-1 rounded-md bg-slate-800 py-1.5 pl-1.5 pr-3 text-sm font-medium text-white/90 transition hover:bg-slate-600 hover:shadow-sm"
+                                :class="{
+                                  '!border-orange-400 !bg-orange-50 !text-orange-400': item.notes,
+                                  '!cursor-default !bg-slate-300 !text-slate-500': isApprovalDisabled && !item.notes
+                                }"
+                                v-on:click="tulisCatatan(item)">
+                                <LucidePencilLine class="h-4" />
+                                Catatan Perbaikan
+                              </button>
+                              <button
+                                class="flex cursor-pointer items-center gap-2 rounded-md bg-slate-800 px-3 py-1.5 text-sm font-medium text-white/90 transition hover:bg-slate-600 hover:shadow-sm"
+                                :class="{
+                                  '!border-green-500 !bg-green-50 !text-green-500': item.diperiksa && !item.notes && item.url,
+                                  '!cursor-default !bg-slate-300 !text-slate-500': item.notes || !item.url,
+                                  '!cursor-default': isApprovalDisabled
+                                }"
+                                v-on:click="toggleReviewed(item)">
+                                Diperiksa
+                                <div
+                                  class="flex size-4 items-center justify-center rounded-sm border-2 border-slate-300"
+                                  :class="{
+                                    '!border-green-500 !bg-green-500 !text-white': item.diperiksa && !item.notes && item.url,
+                                    '!border-slate-400 !bg-slate-400 text-black': item.notes || !item.url
+                                  }">
+                                  <LucideCheck v-if="item.diperiksa || item.notes" />
+                                </div>
+                              </button>
+                            </template>
+                          </div>
+                        </div>
+                        <div class="flex items-center justify-center bg-slate-100 py-[300px]" v-if="!item.url">
+                          <div class="mx-auto w-full max-w-[500px] px-5 text-center">
+                            <LucideFileWarning class="mx-auto mb-3" :size="46" :stroke-width="1" />
+                            <h4 class="font-medium">File Tidak Tersedia</h4>
+                            <p class="text-sm">Maaf untuk saat ini file dokumen tidak tersedia, mungkin terjadi kesalahan ketika proses upload file.</p>
+                          </div>
+                        </div>
+                        <div class="bg-gray-600 dark:bg-dark_bg" v-else>
+                          <div class="mx-auto w-fit max-w-full overflow-auto px-5 pb-16 pt-4">
+                            <slot name="pdf-item" :item="item">
+                              <PdfViewer :url="item.url + '?v=' + new Date().getTime()" :index="i" :scale="pdfScale" :zoom-type="zoomType" />
+                            </slot>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="bg-gray-600 px-4 pb-1 pt-8 text-sm font-medium text-white/50" v-if="item.id === 'dokBastCif'">Dokumen Pendukung</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Right Sidebar -->
+            <ScrollArea class="h-full w-[340px] flex-none border-l bg-white dark:border-dark_border3 dark:bg-dark_bg2">
+              <div class="pb-10">
+                <ApprovalInfo
+                  v-if="data.status && !['DRAFT', 'PUBLISHED'].includes(data.status) && !props.approvalDisabled"
+                  :data="data"
+                  :loading="loadingDetail"
+                  :saving="saving"
+                  :approvals="approvals"
+                  :approval-strategy="approvalStrategy"
+                  :my-approval="myApproval"
+                  :requester="approvalRequester"
+                  @submit="submitApproval"
+                  @approve="setujui"
+                  @reject="tidakSetujui" />
+
+                <div class="mb-5 px-4 pt-4" v-if="approvalHistory && approvalHistory.length > 0">
+                  <h4 class="mb-2 font-semibold">Riwayat Approval</h4>
+                  <div class="space-y-3">
+                    <div class="flex" v-for="(item, i) in approvalHistoryView" :key="i">
+                      <template v-if="['SETUJUI', 'TOLAK', 'BUAT', 'EDIT', 'PERBAIKAN'].includes(item.tipe)">
+                        <div class="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-blue-500 text-sm uppercase text-white">
+                          {{ item.account ? item.account.name.substring(0, 1) : "?" }}
+                        </div>
+                        <div class="ml-3">
+                          <p class="max-w-[170px] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">
+                            {{ item.account ? item.account.name : "-" }}
+                          </p>
+                          <div class="text-xs">{{ moment(item.createdAt).utc().format("DD/MM/YYYY HH:mm") }}</div>
+                          <p class="text-xs text-muted-foreground">
+                            {{ item && item.accessLevel ? item.accessLevel.name : "" }} &bull; {{ item.organization ? item.organization.name : "" }}<br />
+                            <span class="font-medium text-blue-500" v-if="item.tipe === 'BUAT'"> Membuat dokumen </span>
+                            <span class="font-medium text-red-500" v-if="item.tipe === 'TOLAK'"> Menolak persetujuan dokumen </span>
+                            <span class="font-medium text-green-500" v-if="item.tipe === 'SETUJUI'"> Menyetujui persetujuan dokumen </span>
+                            <span class="font-medium text-orange-500" v-if="item.tipe === 'EDIT'"> Melakukan perubahan </span>
+                            <template v-if="item.tipe === 'PERBAIKAN'">
+                              <span class="font-medium text-orange-400"> Melakukan perbaikan </span>
+                              pada dokumen
+                              <b class="font-medium">{{ item.namaDokumen }}</b>
+                            </template>
+                          </p>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div class="ml-3 size-3 flex-none rounded-full border-2 border-blue-500 bg-white"></div>
+                        <div class="pl-5 text-sm leading-[1.2]">
+                          <b>{{ item.account ? item.account.name : "-" }}</b>
+                          <div class="text-[13px] text-gray-500">
+                            <template v-if="item.tipe === 'PERIKSA'">
+                              <span class="font-medium text-green-500">Memeriksa</span>
+                              dokumen
+                            </template>
+                            <template v-if="item.tipe === 'CATATAN'">
+                              Menambahkan
+                              <span class="font-medium text-orange-500"> catatan </span>
+                              pada dokumen
+                            </template>
+                            <b class="font-medium">{{ item.namaDokumen }}</b>
+                          </div>
+                          <div class="mt-1 rounded-sm bg-yellow-100 px-1.5 py-0.5 text-[13px] text-yellow-900" v-if="item.keterangan">
+                            <div class="-mx-1.5 mb-0.5 flex items-center gap-1 border-b border-yellow-300 px-1.5 py-0.5 text-xs font-medium">
+                              <LucideNotebookPen :size="14" />
+                              Catatan Perbaikan
+                            </div>
+                            {{ item.keterangan }}
+                          </div>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                  <BtnCircle class="mt-3 !h-7 !w-auto gap-1 border border-blue-500 pl-2 pr-3 text-sm text-blue-500" v-if="approvalHistory.length > 3" v-on:click="viewAllHistory = !viewAllHistory">
+                    <template v-if="viewAllHistory"> <LucideArrowUp :size="18" /> Lihat lebih sedikit </template>
+                    <template v-else> <LucideArrowDown :size="18" /> Lihat semua riwayat ({{ approvalHistory.length }}) </template>
+                  </BtnCircle>
+                </div>
+
+                <div v-if="file && !detailSelected">
+                  <div class="mb-4 border-b px-4 pb-2 pt-3">
+                    <h2 class="flex items-center text-sm font-medium">
+                      <LucideFile class="mr-2 size-4 flex-none" />
+                      Detail File
+                    </h2>
+                  </div>
+
+                  <div class="mb-6 px-4" v-if="file.url">
+                    <div class="mb-6 flex justify-center">
+                      <img :src="pdfLogo" alt="PDF Logo" class="h-32 w-32" />
+                    </div>
+
+                    <div class="space-y-4">
+                      <div>
+                        <label class="text-sm font-light text-[#3C3C4399]"> Nama File </label>
+                        <p class="text-sm font-semibold text-[#333333]">
+                          {{ file.name }}
+                        </p>
+                      </div>
+                      <div class="flex flex-row justify-between">
+                        <div class="w-full">
+                          <label class="text-sm font-light text-[#3C3C4399]"> Tanggal Pembuatan </label>
+                          <p class="text-sm font-semibold text-[#333333]">
+                            {{ moment(file.createdAt).utc().format("DD/MM/YYYY") }}
+                          </p>
+                        </div>
+                        <div v-if="1 > 2">
+                          <label class="text-sm font-light text-[#3C3C4399]"> Jumlah File </label>
+                          <p class="text-sm font-semibold text-[#333333]">
+                            {{ docs.length }}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="mb-5 px-4" v-if="file && file.dokumenKolaborator && file.dokumenKolaborator.length > 0">
+                    <h3 class="mb-2 text-sm font-medium">Collaborations</h3>
+                    <div class="space-y-3">
+                      <div class="flex" v-for="(item, i) in file.dokumenKolaborator" :key="i">
+                        <div class="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-blue-500 text-sm uppercase text-white">
+                          {{ item.account ? item.account.name.substring(0, 1) : "?" }}
+                        </div>
+                        <div class="ml-3">
+                          <p class="max-w-[170px] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">
+                            {{ item.account ? item.account.name : "-" }}
+                          </p>
+                          <p class="text-xs text-muted-foreground">
+                            <template v-if="item.tipeKolaborasi === 'MAKER'"> Maker </template>
+                            <template v-else> Checker </template>
+                            ({{ item && item.accessLevel ? item.accessLevel.name : "" }} &bull; {{ item.organization ? item.organization.name : "" }})
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </section>
+      <SheetFooter v-if="props.showFooter" class="border-t dark:border-none dark:bg-dark_bg4">
+        <slot name="footer">
+          <!-- <template v-if="['APPROVAL_REQUIRED'].includes(data.status)">
+            <BtnPrimary class="pl-4 pr-6 h-10 flex items-center cursor-pointer rounded-md transition bg-blue-500 text-white hover:bg-blue-600"
+              :class="{'!text-gray-400 !bg-gray-300 !shadow-none hover:!bg-gray-300 !cursor-default': !allReviewed}"
+              :loading="saving"
+              v-on:click="submitApproval">
+              <LucideCheckCheck class="mr-2.5" :size="20" />
+              Submit Approval
+            </BtnPrimary>
+          </template>
+          <template v-else-if="approvalStatus?.myApproval?.disetujui == null || approvalStatus?.myApproval?.submitUlang">
+            <button class="px-4 h-10 text-red-500 cursor-pointer hover:bg-red-100 rounded-md transition"
+              :class="{'!text-gray-400 !bg-none hover:!bg-transparent !cursor-default': !allReviewed}"
+              v-on:click="tidakSetujui">
+              Tolak
+            </button>
+            <button class="pl-4 pr-6 h-10 flex items-center cursor-pointer rounded-md transition bg-blue-500 text-white hover:bg-blue-600"
+              v-on:click="setujui"
+              :class="{'!text-gray-400 !bg-gray-300 !shadow-none hover:!bg-gray-300 !cursor-default': !allReviewed}">
+              <LucideCheckCheck class="mr-2.5" :size="20" />
+              Setujui
+            </button>
+          </template>
+          <div class="text-right text-sm leading-[1.3] text-gray-500"
+            v-else-if="approvalStatus.myApproval">
+            Dokumen
+            <b class="text-green-500 font-medium" v-if="approvalStatus.myApproval.disetujui">Disetujui</b>
+            <b class="text-red-500 font-medium" v-else>Ditolak</b>
+            <br />
+            oleh <b class="text-gray-600 font-medium">{{ approvalStatus.myApproval.account?.name }}</b> pada
+            <b class="text-gray-600 font-medium">{{ moment(approvalStatus.myApproval.createdAt).format('DD/MM/YYYY HH:mm') }}</b>
+          </div> -->
+        </slot>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+  <!-- @NOTES : REMOVE REF COMPONENT -->
+  <!-- <ErrorDialog ref="errorDialog" />
+  <ConfirmDialog ref="confirmDialog"/>
+  <LoadingDialog ref="loadingDialog"/>
+  <InfoDialog ref="infoDialog"/> -->
+  <ConfirmDialog ref="tidakSetujuiDialog">
+    <template #content>
+      <div class="-mx-6 -mb-4 max-h-[56vh] overflow-auto border-b border-t px-6 pb-3" v-if="notes.length > 0">
+        <div class="space-y-2 pt-3">
+          <div class="rounded-sm border" v-for="(item, i2) in notes" :key="i2">
+            <div class="flex items-center gap-2 border-b px-2 py-1.5">
+              <div class="group relative w-6" v-if="!item.url">
+                <LucideFileWarning :size="22" :stroke-width="1.5" class="text-red-500" />
+                <div class="absolute left-0 top-full z-9 hidden w-[130px] rounded-md bg-black/75 px-2.5 py-1.5 text-[11px] leading-tight text-white group-hover:block">
+                  Dokumen {{ item.name }} tidak tersedia
+                </div>
+              </div>
+              <img :src="pdfLogo" class="h-6 flex-none" v-else />
+              <span class="text-[13px] font-semibold leading-tight">{{ item.name }}</span>
+            </div>
+            <div class="bg-yellow-50 px-3 py-2 text-[13px] leading-tight text-yellow-950 opacity-85">
+              {{ item.notes }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ConfirmDialog>
+  <FormInputerDialog ref="formInputerDialog" :class="{ 'max-w-[640px]': inputerDialogType === 'setujui' }">
+    <template #header v-if="inputerDialogType === 'catatan'">
+      <DialogTitle>Catatan</DialogTitle>
+      <DialogDescription> Silahkan masukkan catatan untuk perubahan, catatan ini akan ditujukan kepada pihak yg bertanggung jawab terhadap file ini untuk dilakukan perubahan. </DialogDescription>
+    </template>
+    <template #header v-else-if="inputerDialogType === 'setujui'">
+      <DialogTitle>Setujui Dokumen</DialogTitle>
+      <DialogDescription> Silahkan masukkan informasi tambahan untuk menyetujui dokumen ini. </DialogDescription>
+    </template>
+    <template #button-label v-if="inputerDialogType === 'setujui'">
+      <LucideCheckCheck class="-ml-2 mr-3" />
+      Setujui
+    </template>
+  </FormInputerDialog>
+</template>
+
+<style>
+@import "vue3-perfect-scrollbar/style.css";
+</style>