@dasidev/dasi-ui 1.0.0

package/src/components/tables/ExpandedTable.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.vue";
+import { LucideDatabase, LucideOctagonAlert, LucideSquare } from "lucide-vue-next";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import BaseDropdownTable from "@/components/tables/dropdown/BaseDropdownTable.vue";
+import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import LucideIcon from "@/components/LucideIcon.vue";
+import DetailSheet from "@/components/detail/DetailSheet.vue";
+import DataTableCell from "./DataTableCell.vue";
+import PinInputer from "@/components/PinInputer.vue";
+import Accordion from "@/components/ui/accordion/Accordion.vue";
+import AccordionItem from "@/components/ui/accordion/AccordionItem.vue";
+import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.vue";
+import AccordionContent from "@/components/ui/accordion/AccordionContent.vue";
+import { ChevronDown } from "lucide-vue-next";
+
+export interface ColumnAction {
+  label?: string;
+  icon?: string;
+  iconSize?: number;
+  action: (index: number, row: any) => void;
+  negative?: boolean;
+  type?: "separator" | "item";
+}
+
+export interface ColumnRef {
+  key: string;
+  header?: string;
+  size?: number;
+  bold?: boolean;
+  descriptonKey?: string;
+  descriptonKeys?: string[];
+  codeKeys?: string[];
+  type?: "cell" | "action" | "notifIcon";
+  showFavorite?: boolean;
+  showCustomButton?: boolean;
+  customButtonLabel?: string;
+  customButtonIcon?: string;
+  customButtonIconSize?: number;
+  customButtonIconFill?: boolean;
+  customButtonIconClass?: string;
+  showAction?: boolean;
+  cellRender?: (index: number, row: any) => void;
+  onFavoritChanged?: (index: number, row: any) => void;
+  onCustomButtonClicked?: (index: number, row: any) => void;
+  actions?: (index: number, row: any) => ColumnAction[];
+}
+
+interface Props {
+  data: any;
+  columns: ColumnRef[];
+  loading?: boolean;
+  loadingType?: "skeleton" | "loader";
+  error?: string | null;
+  formSchema?: any;
+  endpoint?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loadingType: "loader",
+  error: null,
+  data: []
+});
+
+const emits = defineEmits(["getData"]);
+const detailSheet: any = ref(null);
+const menuOpen = ref("1");
+
+/**
+ * PIN
+ *
+ */
+const pinInputer: any = ref(null);
+
+function openDetail(item: any) {
+  pinInputer.value.open((b: boolean) => {
+    if (!b) return;
+
+    detailSheet.value.open({
+      item,
+      endpoint: props.endpoint,
+      schema: props.formSchema
+    });
+  });
+}
+</script>
+
+<template>
+  <div>
+    <Table class="border-y bg-white dark:border-y-slate-700 dark:bg-slate-800">
+      <TableBody v-if="error">
+        <TableRow>
+          <TableCell colspan="999" class="bg-red-50">
+            <div class="flex min-h-[calc(100vh-440px)] items-center">
+              <div class="w-full text-center text-red-500">
+                <LucideOctagonAlert :size="40" :stroke-width="1.5" class="mx-auto mb-3" />
+                <div class="text-lg font-bold">Loading Data Error</div>
+                <div class="mb-4 text-sm">{{ error }}</div>
+                <BtnPrimary class="h-9 rounded-full py-0" v-on:click="emits('getData')">Coba Lagi</BtnPrimary>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+      <TableBody v-else-if="props.loading">
+        <template v-if="props.loadingType === 'skeleton'">
+          <TableRow v-for="i in 25" :key="i" class="border-slate-100 dark:border-slate-700">
+            <TableCell colspan="10" class="bg-white px-8 py-3 dark:bg-slate-800">
+              <div class="flex gap-2">
+                <Skeleton class="h-6 w-6 rounded-s"></Skeleton>
+                <Skeleton class="h-6 w-full rounded-s"></Skeleton>
+              </div>
+            </TableCell>
+          </TableRow>
+        </template>
+        <TableRow v-else>
+          <TableCell colspan="999" class="bg-slate-50 dark:bg-slate-900">
+            <div class="flex h-[calc(100vh-420px)] items-center justify-center">
+              <LoadingIndicator></LoadingIndicator>
+            </div>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+      <TableBody v-else-if="data.length">
+        <TableRow>
+          <TableCell colspan="999" class="p-0">
+            <div class="flex">
+              <div class="w-full text-left">
+                <Accordion collapsible type="single" :default-value="menuOpen">
+                  <AccordionItem v-for="(item, i) in data" :key="i" :value="item.id" class="relative border-none font-medium text-gray-500" :class="menuOpen === item.id ? 'bg-blue-50' : 'bg-white'">
+                    <AccordionTrigger @click="menuOpen = item.id" class="relative w-full justify-start gap-10 border-b-2 pl-10 text-start hover:no-underline">
+                      <template v-slot:icon>
+                        <div class="flex items-center gap-2">
+                          <ChevronDown class="mr-5 h-4 w-4 text-gray-400"></ChevronDown>
+                          <div :class="menuOpen === item.id ? 'font-bold text-blue-500' : 'text-black'">
+                            {{ item.status }}
+                          </div>
+
+                          <span class="text-slate-400">({{ item.data.length }} Pengiriman)</span>
+                        </div>
+                      </template>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <TableHeader>
+                        <TableRow class="dark:border-slate-700">
+                          <TableHead
+                            class="bg-white pl-8 pr-3.5 font-bold dark:bg-slate-900"
+                            v-for="cell in props.columns"
+                            :key="cell.key"
+                            :style="{
+                              width: cell.size ? `${cell.size}px` : 'auto'
+                            }">
+                            {{ cell.header }}
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody v-if="data.length">
+                        <TableRow v-for="(row, i) in item.data" :key="i" class="border-gray-100 dark:border-slate-700">
+                          <!-- Table Content -->
+
+                          <TableCell
+                            class="pl-8 pr-3.5 align-top"
+                            v-for="(cell, i2) in columns"
+                            :key="cell.key"
+                            :style="{
+                              width: cell.size ? `${cell.size}px` : 'auto'
+                            }">
+                            <div v-if="cell.type === 'notifIcon'">
+                              <div class="flex items-center">
+                                <div
+                                  class="mr-3 flex size-9 items-center justify-center rounded-full bg-blue-100 text-blue-500"
+                                  :style="{
+                                    'background-color': row.iconBgColor,
+                                    color: row.iconColor
+                                  }">
+                                  <img :src="row.customIcon.url" v-if="row.useCustomIcon && row.customIcon && row.customIcon.url" class="h-5" />
+                                  <LucideIcon
+                                    v-else-if="row.iconName"
+                                    :name="row.iconName.replace(/^[a-z]|-([a-z])/g, (g: string) => (g.length === 1 ? g.toUpperCase() : g[1].toUpperCase()))"
+                                    :size="20"
+                                    :stroke-width="2" />
+                                </div>
+                                <div>
+                                  <b>{{ row.name }}</b
+                                  ><br />{{ row.code }}
+                                </div>
+                              </div>
+                            </div>
+                            <DataTableCell :i="i" :row="row" :cell="cell" />
+                            <div v-if="cell.type === 'action'">
+                              <BaseDropdownTable
+                                :row="cell"
+                                :show-favorite="cell.showFavorite"
+                                @on-favorit-changed="cell.onFavoritChanged ? cell.onFavoritChanged(i, row) : () => {}"
+                                :show-action="cell.showAction"
+                                :show-custom-button="cell.showCustomButton"
+                                :custom-button-label="cell.customButtonLabel"
+                                :custom-button-icon="cell.customButtonIcon"
+                                :custom-button-icon-size="cell.customButtonIconSize"
+                                :custom-button-icon-fill="cell.customButtonIconFill"
+                                :custom-button-icon-class="cell.customButtonIconClass"
+                                @custom-button-clicked="cell.onCustomButtonClicked ? cell.onCustomButtonClicked(i, row) : () => {}"
+                                :show-view-detail="props.formSchema !== undefined"
+                                v-on:view-detail="openDetail(row)">
+                                <template v-if="cell.actions">
+                                  <div v-for="(action, i2) in cell.actions(i, row)" :key="i2">
+                                    <DropdownMenuSeparator v-if="action.type === 'separator'"></DropdownMenuSeparator>
+                                    <DropdownMenuItem
+                                      @click="action.action(i, row)"
+                                      v-else-if="action.action"
+                                      class="cursor-pointer items-start"
+                                      :class="{
+                                        '!text-red-500': action.negative
+                                      }"
+                                      :data-test="action.label">
+                                      <LucideIcon :name="action.icon" :size="action.iconSize || 18" :strokeWidth="1" v-if="action.icon" class="mr-2 mt-px" />
+                                      <LucideSquare :size="18" :stroke-width="1" class="mr-2 mt-px text-transparent" v-else />
+                                      <span>{{ action.label }}</span>
+                                    </DropdownMenuItem>
+                                  </div>
+                                </template>
+                              </BaseDropdownTable>
+                            </div>
+                          </TableCell>
+
+                          <!-- End Table COntent -->
+                        </TableRow>
+                      </TableBody>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+
+      <TableBody v-else>
+        <TableRow>
+          <TableCell colspan="999" class="bg-slate-50">
+            <div class="flex min-h-[calc(100vh-440px)] items-center">
+              <div class="w-full text-center">
+                <LucideDatabase :size="40" :stroke-width="1.5" class="mx-auto mb-3 text-gray-500" />
+                <div class="text-lg font-semibold">Tidak Ada Data</div>
+                <div class="text-sm text-gray-500">Maaf! Data Anda belum tersedia</div>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+  <DetailSheet ref="detailSheet" />
+  <PinInputer ref="pinInputer" />
+</template>

package/src/components/tables/PageTable.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['pages', 'pageColumns'])
+</script>
+
+<template>
+  <Table class="bg-white">
+    <!-- <TableCaption>A list of your recent invoices.</TableCaption> -->
+    <TableHeader>
+      <TableRow>
+        <TableHead
+          v-for="column in pageColumns"
+          :key="column.id"
+          class="font-bold"
+          :class="column.class"
+          >{{ column.title }}</TableHead
+        >
+      </TableRow>
+    </TableHeader>
+    <TableBody v-if="pages.length > 0">
+      <TableRow v-for="page in pages" :key="page.id">
+        <TableCell>
+          {{ page.id }}
+        </TableCell>
+        <TableCell>
+          <p v-for="(nama, index) in page.nama_page" :key="index">{{ nama }}</p>
+        </TableCell>
+        <TableCell>
+          <p class="flex">{{ page.page }}</p>
+        </TableCell>
+        <TableCell>
+          <div class="flex justify-between items-center h-full">
+            <span>{{ page.akses }}</span>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <EllipsisVertical class="cursor-pointer" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="w-56" align="end">
+                <DropdownMenuItem class="cursor-pointer">Edit aktifitas</DropdownMenuItem>
+                <DropdownMenuItem class="cursor-pointer">Sesuaikan akses</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem class="cursor-pointer">Hapus aktifitas</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+
+    <TableBody v-else>
+      <TableRow class="grid h-24 text-center place-content-center">No results.</TableRow>
+    </TableBody>
+  </Table>
+</template>

package/src/components/tables/Pagination.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { Pagination, PaginationEllipsis, PaginationList, PaginationListItem, PaginationNext, PaginationPrev } from "@/components/ui/pagination";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { computed } from "vue";
+import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+
+interface Props {
+  totalData: number;
+  loading: boolean;
+}
+
+const currentPage = defineModel("currentPage", { default: 25 });
+const itemsPerPage = defineModel("itemsPerPage", { default: 0 });
+const emits = defineEmits(["getData"]);
+const props = withDefaults(defineProps<Props>(), { totalData: 0, loading: false });
+const maxPage = computed(() => {
+  return Math.ceil(props.totalData / itemsPerPage.value);
+});
+const itemsPerPage10 = computed(() => {
+  return itemsPerPage.value === 10;
+});
+const itemsPerPage25 = computed(() => {
+  return itemsPerPage.value === 25;
+});
+const itemsPerPage50 = computed(() => {
+  return itemsPerPage.value === 50;
+});
+const itemsPerPage100 = computed(() => {
+  return itemsPerPage.value === 100;
+});
+const itemsPerPage150 = computed(() => {
+  return itemsPerPage.value === 150;
+});
+const itemsPerPage250 = computed(() => {
+  return itemsPerPage.value === 250;
+});
+
+function selectItemsPerPage(_i: number) {
+  itemsPerPage.value = _i;
+  emits("getData");
+}
+</script>
+
+<template>
+  <section class="flex w-full items-center px-5">
+    <div class="mr-auto text-sm text-gray-500">
+      Menampilkan
+      <span v-if="loading">...</span>
+      <template v-else>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="outline" class="hover:bg-primary_main_hover hover:border-primary_main_hover mx-2 h-8 rounded-sm border border-gray-300 px-2 transition hover:shadow-md">
+              {{ itemsPerPage }}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent class="w-56">
+            <DropdownMenuLabel>Item per halaman</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage10" v-on:select="selectItemsPerPage(10)"> 10 item </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage25" v-on:select="selectItemsPerPage(25)"> 25 item </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage50" v-on:select="selectItemsPerPage(50)"> 50 item </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage100" v-on:select="selectItemsPerPage(100)"> 100 item </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage150" v-on:select="selectItemsPerPage(150)"> 150 item </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="itemsPerPage250" v-on:select="selectItemsPerPage(250)"> 250 item </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        dari {{ props.totalData.toLocaleString("id") }}
+      </template>
+    </div>
+    <Pagination v-model:page="currentPage" v-model:items-per-page="itemsPerPage" :total="props.totalData" :sibling-count="1" show-edges :default-page="1" v-on:update:page="emits('getData')">
+      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationPrev class="h-8 w-9 rounded-lg" v-if="currentPage > 1">
+          <ChevronLeft :stroke-width="1.5" :size="24" />
+        </PaginationPrev>
+        <PaginationPrev class="h-8 w-9 rounded-lg !bg-transparent opacity-30" v-else>
+          <ChevronLeft :stroke-width="1.5" :size="24" />
+        </PaginationPrev>
+
+        <template v-for="(item, index) in items">
+          <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+            <Button class="h-8 w-9 rounded-lg p-0" :variant="item.value === currentPage ? 'default' : 'ghost'">
+              {{ item.value }}
+            </Button>
+          </PaginationListItem>
+          <PaginationEllipsis v-else :key="item.type" :index="index" />
+        </template>
+
+        <PaginationNext class="h-8 w-9 rounded-lg" v-if="currentPage < maxPage">
+          <ChevronRight :stroke-width="1.5" :size="24" />
+        </PaginationNext>
+        <PaginationNext class="h-8 w-9 rounded-lg !bg-transparent opacity-30" v-else>
+          <ChevronRight :stroke-width="1.5" :size="24" />
+        </PaginationNext>
+      </PaginationList>
+    </Pagination>
+  </section>
+</template>

package/src/components/tables/dropdown/BaseDropdownTable.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import { EllipsisVertical, Star, LucideChevronRight, LucideLoaderCircle, LucideSend, LucideUserRoundCheck, LucideUserCheck2, LucideUserCheck, LucideChevronLeft, LucideArrowLeftFromLine, LucidePencilLine } from "lucide-vue-next";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import { cn, isValidValue } from "@/lib/utils";
+import { onMounted, ref } from "vue";
+import api from "@/api/api";
+import { string } from "@vueform/vueform";
+
+const props = defineProps({
+  i: Number,
+  row: Object as any,
+  cell: Object as any,
+  showAction: {
+    type: Boolean,
+    default: true
+  },
+  showViewDetail: {
+    type: Boolean,
+    default: true
+  },
+  itemLoading: {
+    type: Object as any,
+    default: false
+  },
+  rowActions: {
+    type: Object as any,
+    default: null
+  },
+  customBtnConfig: {
+    type: Object as any,
+    default: null
+  },
+
+  endpoint: string,
+  pageConfig: Object as any
+});
+const emits = defineEmits(["onFavoritChanged", "viewDetail", 'openApproval', "customBtnClick", 'edit']);
+const loading = ref(false);
+const myApproval = ref<any>();
+
+function customBtnClicked(btnId?: string) {
+  if (props.customBtnConfig && props.customBtnConfig.onClick) {
+    props.customBtnConfig.onClick(props.i ?? 0, props.row, btnId);
+  }
+  emits("customBtnClick", props.i ?? 0, props.row, btnId);
+}
+
+function hasActionBtn(row: any): boolean {
+  return (props.customBtnConfig && props.customBtnConfig.show)
+    || (['APPROVAL_REQUIRED', 'WAITING_APPROVAL', 'APPROVED_PARTIALY'].includes(row.status) && !props.pageConfig?.forceDisplayActionRow)
+    || (props.rowActions && props.rowActions.length > 0);
+}
+
+onMounted(() => {
+  if (['WAITING_APPROVAL', 'APPROVED_PARTIALY'].includes(props.row.status)) {
+    loading.value = true;
+    api.get(`${props.pageConfig?.viewDocsEndpoint ?? props.endpoint}/${props.row.id}/my-approval`).then((r) => {
+      myApproval.value = r.data.data;
+    }).finally(() => {
+      loading.value = false;
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-end gap-2 pr-1">
+    <div class="flex items-center pr-1" v-if="itemLoading || loading">
+      <LucideLoaderCircle class="animate-spin opacity-50" :size="24" />
+      <span class="ml-1.5 text-xs opacity-65" v-if="typeof itemLoading === 'string'">
+        {{ itemLoading }}
+      </span>
+    </div>
+    <template v-else>
+      <template v-if="rowActions && rowActions.length > 0">
+        <BtnCircle
+          v-for="(rowAction, i2) in rowActions"
+          :key="i2"
+          :class="cn({ '!w-auto whitespace-nowrap border border-slate-300 pl-2 pr-3': rowAction.label }, rowAction.class)"
+          v-on:click="rowAction.onClick(i, row)">
+          <LucideIcon
+            :name="rowAction.icon"
+            :size="rowAction.iconSize"
+            :class="[{ 'mr-1': rowAction.label }, rowAction.iconClass]"
+            :fill="rowAction.iconFill ? 'currentColor' : 'none'"
+            :stroke-width="rowAction.iconStrokeWidth" />
+          {{ rowAction.label }}
+        </BtnCircle>
+      </template>
+
+      <!-- <BtnCircle v-if="isDibutuhkanPerbaikan(row[pageConfig.nextDataField]?.[0])"
+        class="!w-auto whitespace-nowrap border transition pl-2 pr-3 bg-white border-blue-500 text-blue-600"
+        v-on:click="emits('edit', i, row)">
+        <LucidePencilLine class="mr-2" :size="17" :stroke-width="1.6"/>
+        Perbaiki Data
+      </BtnCircle> -->
+
+      <BtnCircle
+        v-else-if="props.customBtnConfig && props.customBtnConfig.show"
+        :class="cn({ '!w-auto whitespace-nowrap border border-slate-300 bg-white pl-2 pr-3': props.customBtnConfig.label }, props.customBtnConfig.class)"
+        v-on:click="customBtnClicked(props.customBtnConfig.id)">
+        <LucideIcon
+          :name="props.customBtnConfig.icon"
+          :size="props.customBtnConfig.iconSize ?? 20"
+          :class="[{ 'mr-1': props.customBtnConfig.label }, props.customBtnConfig.iconClass]"
+          :fill="props.customBtnConfig.iconFill ? 'currentColor' : 'none'"
+          :stroke-width="props.customBtnConfig.iconStrokeWidth ?? 1.6" />
+        {{ props.customBtnConfig.label }}
+      </BtnCircle>
+      <BtnCircle
+        class="whitespace-nowrap border border-slate-300 bg-white dark:bg-dark_bg4 dark:border-none dark:text-dark_text dark:hover:bg-dark_bg6"
+        :class="{'!w-auto pl-2 pr-3': !hasActionBtn(row)}"
+        v-on:click="$emit('viewDetail')"
+        v-if="showViewDetail">
+        <LucideArrowLeftFromLine :size="18" :stroke-width="1.4"
+          :class="{ 'ml-1 mr-1.5': !hasActionBtn(row)}"/>
+        <template v-if="!hasActionBtn(row)">
+          Lihat Detil
+        </template>
+      </BtnCircle>
+    </template>
+    <BtnCircle v-if="1 > 2" v-on:click="$emit('onFavoritChanged')" class="hover:text-orange-400" :class="{ 'text-orange-400': cell.favorited }">
+      <Star :stroke-width="1.6" :size="20" fill="currentColor" v-if="cell.favorited" class="transition" />
+      <Star :stroke-width="1.6" :size="20" v-else class="transition" />
+    </BtnCircle>
+    <DropdownMenu v-if="showAction !== false && !['WAITING_APPROVAL', 'APPROVED_PARTIALY'].includes(row.status)
+      && (!pageConfig?.nextDataField || isValidValue(row[pageConfig?.nextDataField]))">
+      <DropdownMenuTrigger as-child>
+        <BtnCircle data-test="action-menu">
+          <EllipsisVertical :size="22" />
+        </BtnCircle>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-[320px]" align="end">
+        <slot></slot>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableActivity.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Aktifitas')"
+          >Edit aktifitas</DropdownMenuItem
+        >
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Aktifitas')"
+          >Sesuaikan aktifitas</DropdownMenuItem
+        >
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus grup</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableAsset.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Asset')">Edit asset</DropdownMenuItem>
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Sesuaikan Asset')">Sesuaikan asset
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus asset</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

package/src/components/tables/dropdown/DropdownTableConfig.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+
+import { EllipsisVertical } from 'lucide-vue-next'
+
+defineProps(['openSheet', 'openSheet2'])
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <EllipsisVertical class="cursor-pointer" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-56" align="end">
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet('Edit Konfig')">Edit Konfig</DropdownMenuItem>
+        <DropdownMenuItem class="cursor-pointer" @click="openSheet2('Tambah Subconfig')">Tambah Subconfig
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="cursor-pointer">Hapus Konfig</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>