@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/tables/ExpandedTable.vue

@@ -1,259 +0,0 @@
-<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/helper/LucideIcon.vue";
-import DetailSheet from "../../components/detail/DetailSheet.vue";
-import DataTableCell from "./DataTableCell.vue";
-import PinInputer from "../../components/helper/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/template/src/components/tables/PageTable.vue

@@ -1,73 +0,0 @@
-<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/template/src/components/tables/Pagination.vue

@@ -1,98 +0,0 @@
-<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/template/src/components/tables/dropdown/BaseDropdownTable.vue

@@ -1,140 +0,0 @@
-<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/template/src/components/tables/dropdown/DropdownTableActivity.vue

@@ -1,33 +0,0 @@
-<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/template/src/components/tables/dropdown/DropdownTableAsset.vue

@@ -1,30 +0,0 @@
-<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/template/src/components/tables/dropdown/DropdownTableConfig.vue

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