@dasidev/dasi-ui 1.0.0

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

@@ -0,0 +1,6 @@
+<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/src/components/button/BtnAddOutline.vue

@@ -0,0 +1,14 @@
+<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/src/components/button/BtnCircle.vue

@@ -0,0 +1,10 @@
+<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/src/components/button/BtnOutline.vue

@@ -0,0 +1,15 @@
+<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/src/components/button/BtnPrimary.vue

@@ -0,0 +1,25 @@
+<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/src/components/button/BtnSecondary.vue

@@ -0,0 +1,26 @@
+<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/src/components/detail/AccountDetailTimeline.vue

@@ -0,0 +1,144 @@
+<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/src/components/detail/ApprovalInfo.vue

@@ -0,0 +1,288 @@
+<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>