@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/assets/pemasok-card-bg.svg

@@ -1,6 +0,0 @@
-<svg width="218" height="36" viewBox="0 0 218 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M218 13.9805H65.5467C56.0994 13.9805 46.957 17.3243 39.7391 23.4196L24.6719 36.1433H218V13.9805Z" fill="#91BEF7"/>
-<path d="M25.2224 29.5356L49.525 8.75953L43.774 7.37383L19.4281 28.3645L25.2224 29.5356Z" fill="#91BEF7"/>
-<path d="M4.93729 37.0517L29.2398 16.2756L24.3473 15.0634L0.00133888 36.0542L4.93729 37.0517Z" fill="#FFF200"/>
-<path d="M5.60198 27.1341L25.8613 9.78491L23.0714 9.22105L3.07008 26.399L5.60198 27.1341Z" fill="white"/>
-</svg>

package/template/src/components/button/BtnAddOutline.vue

@@ -1,14 +0,0 @@
-<script setup>
-import { cn } from "../../lib/utils";
-import { LucidePlusCircle } from "lucide-vue-next";
-import BtnCircle from "../../components/button/BtnCircle.vue";
-
-const props = defineProps(["class"]);
-</script>
-
-<template>
-  <BtnCircle :class="cn('!h-auto !w-auto border-[1.5px] border-primary_main bg-white py-1 pl-[5px] pr-3 text-sm text-primary_main', props.class)">
-    <LucidePlusCircle :size="25" class="mr-[6px]" :stroke-width="1.5" />
-    <slot></slot>
-  </BtnCircle>
-</template>

package/template/src/components/button/BtnCircle.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../lib/utils';
-const props = defineProps(['class'])
-</script>
-
-<template>
-  <button type="button" :class="cn('text-[12px] 2xl:text-[13px] rounded-full size-7 2xl:size-8 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-dark_bg5 transition text-gray-500 cursor-pointer', props.class)">
-    <slot></slot>
-  </button>
-</template>

package/template/src/components/button/BtnOutline.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { cn } from "../../lib/utils";
-import { type HTMLAttributes } from "vue";
-
-interface Props {
-  class?: HTMLAttributes["class"];
-}
-const props = defineProps<Props>();
-</script>
-
-<template>
-  <button :class="cn('hover:bg-primary_main_hover rounded-md border-2 border-primary_main bg-transparent px-4 py-2 font-medium text-primary_main transition hover:text-white', props.class)">
-    <slot></slot>
-  </button>
-</template>

package/template/src/components/button/BtnPrimary.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { Button } from '../../components/ui/button'
-import { cn } from '../../lib/utils';
-const props = defineProps(['class', 'loading', 'disabled', 'disabledClass'])
-</script>
-
-<template>
-  <Button
-    :class="[
-      cn('text-[13px] 2xl:text-[14px] bg-blue-500 px-6 py-0 h-9 2xl:h-11 border-none rounded-md border-blue-500 text-white font-medium hover:bg-blue-600 transition leading-none', props.class),
-       { '!bg-gray-300 !text-gray-300 cursor-default relative overflow-hidden !shadow-none': props.loading },
-       { '!bg-gray-300 !text-gray-400 cursor-default relative overflow-hidden !shadow-none': props.disabled || props.disabledClass },
-    ]"
-    :disabled="props.loading || props.disabled">
-    <slot></slot>
-    <div v-if="props.loading" class="top-0 right-0 bottom-0 left-0 bg-gray-300">
-      <svg class="absolute left-0 top-0 bottom-0 right-0 m-auto w-7 h-7 text-black animate-spin" fill="none"
-        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-        <path class="opacity-15" fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-      </svg>
-    </div>
-  </Button>
-</template>

package/template/src/components/button/BtnSecondary.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { Button } from "../../components/ui/button";
-import { cn } from "../../lib/utils";
-const props = defineProps(["class", "disabled", "loading", "disabledClass"]);
-</script>
-
-<template>
-  <Button
-    :class="[
-      cn(
-        'h-9 rounded-md border-none border-primary_main bg-blue-50 bg-transparent px-6 text-[13px] font-medium text-primary_main shadow-none transition hover:border-primary_main hover:bg-blue-100 2xl:h-11 2xl:text-sm',
-        props.class
-      ),
-      { 'relative cursor-default overflow-hidden !bg-gray-300 !text-gray-300 !shadow-none': props.loading },
-      { 'relative cursor-default overflow-hidden !bg-gray-300 !text-gray-400 !shadow-none': props.disabled || props.disabledClass }
-    ]"
-    :disabled="props.disabled || props.loading">
-    <slot></slot>
-    <div v-if="props.loading" class="bottom-0 left-0 right-0 top-0 bg-gray-300">
-      <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-        <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-      </svg>
-    </div>
-  </Button>
-</template>

package/template/src/components/detail/AccountDetailTimeline.vue

@@ -1,144 +0,0 @@
-<script setup>
-import moment from 'moment';
-
-moment.updateLocale('en', {
-  relativeTime : {
-    future: "in %s",
-    past:   "%s ago",
-    s  : '1s',
-    ss : '%ds',
-    m:  "1m",
-    mm: "%dm",
-    h:  "1h",
-    hh: "%dh",
-    d:  "1d",
-    dd: "%dd",
-    w:  "1w",
-    ww: "%dw",
-    M:  "1Mo",
-    MM: "%dMo",
-    y:  "1y",
-    yy: "%dy"
-  },
-});
-
-const props = defineProps(['timeline', 'theme']);
-</script>
-
-<template>
-  <section
-    class="relative text-sm mb-6 rounded-md p-3 bg-white dark:bg-dasi_dark_bg3 transition-colors"
-  >
-    <div class="absolute left-7 top-0 w-px h-full bg-gray-300 dark:bg-dasi_dark_bg5"></div>
-    <div class="space-y-4">
-      <div v-for="(item, i) in props.timeline" :key="i">
-        <!-- CRUD/restore timeline item -->
-        <div
-          class="relative flex items-center"
-          v-if="['create', 'edit', 'delete_soft', 'restore'].includes(item.activityCode)"
-        >
-          <div
-            class="flex-none w-11 h-11 -ml-1.5 rounded-full bg-green-300 text-green-700 border-4 border-slate-50 overflow-hidden flex items-center justify-center font-semibold text-[17px] leading-none
-              dark:bg-green-900 dark:text-green-200 dark:border-dasi_dark_bg3"
-            :class="{'!border-slate-100 dark:!border-dasi_dark_bg3': props.theme === 'theme2'}"
-          >
-            {{ item.userName ? item.userName.substring(0,1).toUpperCase() : '' }}
-          </div>
-          <div class="ml-2 pt-1" v-if="props.theme === 'theme2'">
-            <h4 class="font-medium text-[15px]">
-              {{ item.pageName }}
-              <span class="text-gray-400 dark:text-gray-500 text-[13px] ml-1 mr-2">&bull;</span>
-              <span
-                class="text-gray-400 dark:text-gray-500 text-[13px] text-right whitespace-nowrap pl-3 mb-auto"
-                :title="moment(item.createdAt).format('D MMM YYYY HH:mm')"
-              >
-                {{ moment(item.createdAt).fromNow() }}
-              </span>
-            </h4>
-            <p class="text-gray-400 dark:text-gray-400 text-[14px]">
-              {{ item.userName }}
-              <b class="font-medium text-dasi_text_color dark:text-dasi_text_color">{{ item.activityName }}</b> pada
-              {{ item.pageName }}
-            </p>
-          </div>
-          <div class="ml-2" v-else>
-            <span class="font-[500]">{{ item.userName }}</span>
-            <span class="text-gray-400 dark:text-gray-400">{{ item.activityName }}</span>
-          </div>
-          <div
-            class="ml-auto text-gray-400 dark:text-gray-500 text-[13px] text-right whitespace-nowrap pl-3 mb-auto"
-            :class="{'!hidden': props.theme === 'theme2'}"
-            :title="moment(item.createdAt).format('D MMM YYYY HH:mm')"
-          >
-            {{ moment(item.createdAt).fromNow() }}
-          </div>
-        </div>
-        <!-- Approval timeline item -->
-        <div
-          class="relative flex items-start"
-          v-else-if="['approval_reject', 'approval_approve'].includes(item.activityCode)"
-        >
-          <div
-            class="flex-none w-11 h-11 -ml-1.5 rounded-full bg-green-300 text-green-700 border-4 border-slate-50 overflow-hidden
-              dark:bg-green-900 dark:text-green-200 dark:border-dasi_dark_bg3"
-            :class="{'!border-slate-100 dark:!border-dasi_dark_bg3': props.theme === 'theme2'}"
-          ></div>
-          <div class="ml-2 bg-white dark:bg-dasi_dark_bg3 px-4 py-3 border dark:border-dasi_dark_bg5 rounded-sm mt-1 mr-5">
-            <div class="font-semibold">{{ item.userName }} Approve</div>
-            <div class="text-gray-500 dark:text-gray-400 mt-1">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, blanditiis?
-            </div>
-          </div>
-          <div
-            class="ml-auto text-gray-400 dark:text-gray-500 text-[13px] flex-none text-right whitespace-nowrap pl-3 mb-auto"
-            :class="{'!hidden': props.theme === 'theme2'}"
-            :title="moment(item.createdAt).format('D MMM YYYY HH:mm')"
-          >
-            {{ moment(item.createdAt).fromNow() }}
-          </div>
-        </div>
-        <!-- Default timeline item -->
-        <div
-          class="relative flex items-center"
-          v-else
-          :class="{'!items-start': props.theme === 'theme2'}"
-        >
-          <div
-            class="flex-none w-8 h-8 rounded-full overflow-hidden flex items-center justify-center bg-slate-50 dark:bg-dasi_dark_bg5"
-            :class="{'!bg-slate-100 dark:!bg-dasi_dark_bg5': props.theme === 'theme2'}"
-          >
-            <div class="w-[13px] h-[13px] rounded-full border-2 border-gray-400 dark:border-gray-600"></div>
-          </div>
-          <div class="ml-3.5 pt-1" v-if="props.theme === 'theme2'">
-            <h4 class="font-medium text-[15px]">
-              {{ item.pageName }}
-              <span class="text-gray-400 dark:text-gray-500 text-[13px] ml-1 mr-2">&bull;</span>
-              <span
-                class="text-gray-400 dark:text-gray-500 text-[13px] text-right whitespace-nowrap pl-3 mb-auto"
-                :title="moment(item.createdAt).format('D MMM YYYY HH:mm')"
-              >
-                {{ moment(item.createdAt).fromNow() }}
-              </span>
-            </h4>
-            <p class="text-gray-400 dark:text-gray-400 text-[14px]">
-              {{ item.userName }}
-              <b class="font-medium text-dasi_text_color dark:text-dasi_text_color">{{ item.activityName }}</b> pada
-              {{ item.pageName }}
-            </p>
-          </div>
-          <div class="ml-3.5" v-else>
-            <span class="font-[500]">{{ item.userName }}</span>
-            <span class="text-gray-400 dark:text-gray-400">{{ item.activityName }}</span>
-          </div>
-          <div
-            class="ml-auto text-gray-400 dark:text-gray-500 text-[13px] text-right whitespace-nowrap pl-3 mb-auto"
-            :class="{'!hidden': props.theme === 'theme2'}"
-            :title="moment(item.createdAt).format('D MMM YYYY HH:mm')"
-          >
-            {{ moment(item.createdAt).fromNow() }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

package/template/src/components/detail/ApprovalInfo.vue

@@ -1,288 +0,0 @@
-<script setup lang="ts">
-import { getMenuItemByUrl, isValidValue } from '../../lib/utils';
-import { FileCheck2, LucideCheckCheck, LucideCircleX, LucideCornerRightUp, LucideSend, LucideSettings, LucideX, LucideXCircle } from 'lucide-vue-next';
-import moment from 'moment';
-import { RouterLink } from 'vue-router';
-import { Skeleton } from '../ui/skeleton';
-import BtnPrimary from '../button/BtnPrimary.vue';
-import { onMounted, ref } from 'vue';
-
-const props = defineProps(['data', 'saving', 'loading', 'approvalStrategy', 'approvals', 'myApproval', 'requester']);
-const emits = defineEmits(['approve', 'reject', 'submit']);
-const menu = ref<any>();
-
-onMounted(() => {
-  menu.value = getMenuItemByUrl('/approval/approval-strategy');
-})
-</script>
-
-<template>
-  <div class="px-4 pt-4 pb-6 space-y-2.5" v-if="props.loading">
-    <Skeleton class="w-full h-4 rounded-full"/>
-    <Skeleton class="w-[80%] h-4 rounded-full"/>
-    <Skeleton class="w-[40%] h-4 rounded-full"/>
-  </div>
-  <template v-else>
-    <div class="leading-[1.325] px-4 pt-3 pb-6 text-gray-500"
-      v-if="!approvalStrategy && !isValidValue(approvals)">
-      <FileCheck2 :size="26" :stroke-width="1.8" class="mb-3"/>
-      <h4 class="font-medium mb-0.5">Pengaturan approval belum ditetapkan.</h4>
-      <div class="text-sm mb-3">
-        Mohon untuk tetapkan pengaturan approval
-        pada halaman Approval Strategy.
-      </div>
-      <RouterLink class="border pl-2 pr-3 gap-1 py-1.5 flex items-center w-fit rounded-md text-[13px] hover:bg-blue-100 hover:text-blue-500 hover:border-blue-300 transition"
-        :to="menu.url" target="_blank" rel="noopener"
-        v-if="menu">
-        <LucideSettings :size="18"/>
-        Tetapkan Pengaturan
-      </RouterLink>
-    </div>
-    <section class="space-y-2" v-else>
-
-      <!-- My approval -->
-      <section
-        v-if="myApproval && myApproval.approvalStatus !== 'PENDING'
-          && !(myApproval.approvalStatus === 'WAITING_APPROVAL' && data.status === 'REJECTED')"
-        class="px-4 pt-3 pb-1"
-        :class="{'!bg-green-50 border-green-400 dark:!bg-green-950': myApproval.approvalStatus === 'APPROVED',
-        '!bg-red-50 border-red-300': myApproval.approvalStatus === 'REJECTED',
-        '!bg-blue-50 border-blue-300': myApproval.approvalStatus === 'PASSED'}">
-        <h4 class="font-semibold mb-[2px]">Approval</h4>
-        <p class="text-[13px] leading-snug mb-4">
-          <template v-if="['APPROVED', 'REJECTED'].includes(myApproval.approvalStatus)">
-            <span class="opacity-75">Anda telah </span>
-            <span class="font-medium text-green-500" v-if="myApproval.approvalStatus === 'APPROVED'">Menyetujui</span>
-            <span class="font-medium text-red-500" v-else-if="myApproval.approvalStatus === 'REJECTED'">Menolak</span>
-            <span class="opacity-75"> data ini pada<br />
-              <template v-if="myApproval.approvalDate">
-                {{ moment(myApproval.approvalDate).utc().format('D MMM YYYY HH:mm') }}
-              </template>
-            </span>
-          </template>
-          <span class="opacity-75" v-else-if="myApproval.approvalStatus === 'WAITING_APPROVAL'">
-            Data ini membutuhkan approval Anda, silahkan setujui atau tolak dengan klik tombol di bawah.
-          </span>
-          <span class="opacity-75" v-else-if="myApproval.approvalStatus === 'PASSED'">
-            Request approval Anda untuk aktifitas ini telah terlewati.
-          </span>
-          <template v-else>{{ myApproval.approvalStatus }}</template>
-        </p>
-        <div class="mb-2" v-if="myApproval.approvalStatus === 'APPROVED'">
-          <div class="text-green-500 font-medium -mt-1 flex items-center">
-            <LucideCheckCheck class="mr-3"/>
-            Approved
-          </div>
-          <div class="text-[12px] mt-1 opacity-75" v-if="myApproval.approvalDate">
-            Approved {{ moment(myApproval.approvalDate).utc().subtract(7, 'hour').calendar() }}
-          </div>
-        </div>
-        <div class="mb-2" v-else-if="myApproval.approvalStatus === 'REJECTED'">
-          <div class="text-red-500 font-medium -mt-1 flex items-center">
-            <LucideXCircle class="mr-2" :stroke-width="1.6"/>
-            Rejected
-          </div>
-          <div class="text-[12px] mt-1 opacity-75" v-if="myApproval.approvalDate">
-            Rejected {{ moment(myApproval.approvalDate).utc().subtract(7, 'hour').calendar() }}
-          </div>
-        </div>
-        <div class="mb-2" v-else-if="myApproval.approvalStatus === 'PASSED'">
-          <div class="text-blue-500 font-medium -mt-1 flex items-center">
-            <LucideCornerRightUp class="mr-3"/>
-            Passed
-          </div>
-        </div>
-        <template v-else-if="myApproval.approvalStatus === 'WAITING_APPROVAL'">
-          <div v-if="saving" class="h-9 mb-2 rounded-md relative flex items-center pl-9 text-gray-400 text-sm italic">
-            <svg class="absolute left-0 top-0 bottom-0 m-auto size-6 text-black animate-spin" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-            </svg>
-            Saving approval...
-          </div>
-          <div class="grid grid-cols-2 gap-3.5" v-else>
-            <button class="w-full text-left flex items-center border-red-500 border px-3 h-[34px] rounded-md text-red-500 transition hover:bg-red-100 text-sm"
-              @click="emits('reject')">
-              <LucideCircleX class="mr-2" :size="20" :stroke-width="1.5"/> Tolak
-            </button>
-            <button class="w-full text-left flex items-center bg-green-500 px-3 h-[34px] rounded-md text-white mb-2 border border-green-500 hover:bg-green-600 hover:border-green-600 transition text-sm"
-              @click="emits('approve')">
-              <LucideCheckCheck class="mr-2" :size="20"/> Setujui
-            </button>
-          </div>
-        </template>
-      </section>
-
-      <!-- Requester -->
-      <section class="px-4 pt-3 pb-1" v-if="requester">
-        <h4 class="font-semibold mb-[2px]">Pengajuan Approval</h4>
-        <p class="text-[13px] leading-snug mb-3">
-          <span class="opacity-75">
-            Request approval ini diajukan oleh
-          </span>
-        </p>
-        <div class="flex items-start text-sm">
-          <div class="flex-none size-6 bg-green-200 text-green-700 font-medium text-xs rounded-full mr-2.5 flex items-center justify-center">
-            {{ requester.name.substring(0, 1).toUpperCase() }}
-          </div>
-          <div>
-            <h4 class="font-medium">{{ requester.name }}</h4>
-            <p class="text-gray-500 text-xs leading-[1.175]">
-              <span class="font-medium">{{ requester.organization?.accessLevel?.name }}</span> &bull;
-              {{ requester.organization?.name }}
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Approver list -->
-      <section class="px-4 pt-3 pb-1">
-        <h4 class="font-semibold mb-[2px]">
-          <template v-if="['WAITING_APPROVAL', 'APPROVED_PARTIALY'].includes(data.status)">
-            Waiting Approval
-          </template>
-          <template v-else>Approval</template>
-        </h4>
-        <p class="text-[13px] leading-snug opacity-75 mb-2">Aktifitas ini membutuhkan approval dari</p>
-
-        <template v-if="isValidValue(approvals)">
-          <div class="mb-5" v-for="(approvalLevel, i1) in approvals" :key="i1">
-            <div class="uppercase font-medium text-xs opacity-65 mb-1.5">
-              Approval Tingkat {{ i1+1 }}
-            </div>
-            <div class="flex pb-1 mb-2 items-start text-sm border-b border-dashed"
-              v-for="(item, i2) in approvalLevel">
-              <div class="mr-auto flex"
-                v-if="(myApproval?.approvalLevelIdx ?? 0) >= i1 && (myApproval?.approvalCodeIdx ?? 0) >= i2 && item.approvalCode?.account">
-                <div class="flex-none size-6 bg-green-200 text-green-700 font-medium text-xs rounded-full mr-2.5 flex items-center justify-center">
-                  {{ (item.approvalCode?.account?.name ?? '?').substring(0,1) }}
-                </div>
-                <div class="w-full leading-[1.2]">
-                  <h4 class="font-semibold pt-0.5 text-sm">{{ item.approvalCode?.account?.name ?? '-' }}</h4>
-                  <p class="text-gray-500 text-xs leading-[1.175]">
-                    <span class="font-medium">{{ item.approvalCode?.account?.organization?.accessLevel?.name }}</span> &bull;
-                    {{ item.approvalCode?.account?.organization?.name }}
-                  </p>
-                </div>
-              </div>
-              <div class="mr-auto mb-auto" v-else>
-                <h4 class="font-semibold text-sm">{{ item.approvalCode?.name }}</h4>
-              </div>
-              <div class="ml-auto text-right leading-[1] flex-none">
-                <div class="font-semibold text-[11px] uppercase flex items-center border rounded-full px-2 leading-none pt-1 pb-[3px] w-fit ml-auto"
-                  :class="{
-                    'text-gray-500 bg-gray-50 border-gray-300': !item.approvalStatus,
-                    'text-orange-400 bg-orange-50 border-orange-200': item.approvalStatus === 'WAITING_APPROVAL',
-                    'text-red-500 bg-red-50 border-red-300': item.approvalStatus === 'REJECTED',
-                    'text-green-500 bg-green-50 border-green-300': item.approvalStatus === 'APPROVED',
-                    'text-blue-500 bg-blue-50 border-blue-300': ['PASSED'].includes(item.approvalStatus),
-                    'text-yellow-400 bg-yellow-50 border-yellow-200': ['PENDING'].includes(item.approvalStatus),
-                  }">
-                  <template v-if="!item.approvalStatus">
-                    Not Submited
-                  </template>
-                  <template v-else-if="['pending'].includes(item.approvalStatus)">
-                    Pending
-                  </template>
-                  <template v-else-if="['WAITING_APPROVAL'].includes(item.approvalStatus)">
-                    Requested
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'APPROVED'">
-                    <LucideCheckCheck :size="15" class="mr-1 -my-[2px]"/>
-                    Approved
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'PASSED'">
-                    Passed
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'REJECTED'">
-                    Rejected
-                  </template>
-                  <template v-else>{{ item.approvalStatus }}</template>
-                </div>
-                <div class="opacity-65 text-[11px] mt-1"
-                  v-if="item.approvalDate && item.approvalStatus !== 'PASSED'">
-                  {{ moment(item.approvalDate).utc().format('DD/MM/YYYY HH:mm') }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <template v-else-if="approvalStrategy">
-          <div class="mb-5" v-for="(approvalLevel, i1) in approvalStrategy.approvalLevels" :key="i1">
-            <div class="uppercase font-medium text-xs opacity-65 mb-1.5">
-              Approval Tingkat {{ i1+1 }}
-            </div>
-            <div class="flex pb-1 mb-2 items-start text-sm border-b border-dashed"
-              v-for="(item, i2) in approvalLevel.approvalCodes">
-              <div class="mr-auto flex"
-                v-if="(myApproval?.approvalLevelIdx ?? 0) >= i1 && (myApproval?.approvalCodeIdx ?? 0) >= i2 && item.approvalCode?.account">
-                <div class="flex-none size-6 bg-green-200 text-green-700 font-medium text-xs rounded-full mr-2.5 flex items-center justify-center">
-                  {{ (item.approvalCode?.account?.name ?? '?').substring(0,1) }}
-                </div>
-                <div class="w-full leading-[1.2]">
-                  <h4 class="font-semibold pt-0.5 text-sm">{{ item.approvalCode?.account?.name ?? '-' }}</h4>
-                  <p class="text-gray-500 text-xs leading-[1.175]">
-                    <span class="font-medium">{{ item.approvalCode?.account?.organization?.accessLevel?.name }}</span> &bull;
-                    {{ item.approvalCode?.account?.organization?.name }}
-                  </p>
-                </div>
-              </div>
-              <div class="mr-auto mb-auto" v-else>
-                <h4 class="font-semibold text-sm">{{ item.approvalCode?.name }}</h4>
-              </div>
-              <div class="ml-auto text-right leading-[1] flex-none">
-                <div class="font-semibold text-[11px] uppercase flex items-center border rounded-full px-2 leading-none pt-1 pb-[3px] w-fit ml-auto"
-                  :class="{
-                    'text-gray-500 bg-gray-50 border-gray-300': !item.approvalStatus,
-                    'text-orange-400 bg-orange-50 border-orange-200': item.approvalStatus === 'WAITING_APPROVAL',
-                    'text-red-500 bg-red-50 border-red-300': item.approvalStatus === 'REJECTED',
-                    'text-green-500 bg-green-50 border-green-300': item.approvalStatus === 'APPROVED',
-                    'text-blue-500 bg-blue-50 border-blue-300': ['PASSED'].includes(item.approvalStatus),
-                    'text-yellow-400 bg-yellow-50 border-yellow-200': ['PENDING'].includes(item.approvalStatus),
-                  }">
-                  <template v-if="!item.approvalStatus">
-                    Not Submited
-                  </template>
-                  <template v-else-if="['pending'].includes(item.approvalStatus)">
-                    Pending
-                  </template>
-                  <template v-else-if="['WAITING_APPROVAL'].includes(item.approvalStatus)">
-                    Requested
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'APPROVED'">
-                    <LucideCheckCheck :size="15" class="mr-1 -my-[2px]"/>
-                    Approved
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'PASSED'">
-                    Passed
-                  </template>
-                  <template v-else-if="item.approvalStatus === 'REJECTED'">
-                    Rejected
-                  </template>
-                  <template v-else>{{ item.approvalStatus }}</template>
-                </div>
-                <div class="opacity-65 text-[11px] mt-1" v-if="item.approvalDate">
-                  {{ moment(item.approvalDate).utc().format('DD/MM/YYYY HH:mm') }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <div v-if="data.status === 'APPROVAL_REQUIRED'">
-          <p class="text-[13px] leading-snug opacity-75 mb-2">
-            Mulai proses approval dengan klik tombol Submit Approval.
-            Mohon pastikan data sudah sesuai untuk mulai proses Approval.
-          </p>
-          <BtnPrimary class="w-full text-left justify-start !font-normal flex items-center px-3 !h-[36px] !text-sm"
-            @click="emits('submit')"
-            :loading="saving">
-            <LucideSend class="mr-2" :size="20" :stroke-width="1.5"/>
-            Submit Approval
-          </BtnPrimary>
-        </div>
-      </section>
-    </section>
-  </template>
-</template>