@dasidev/dasi-ui 1.0.0

package/src/components/pages/PageContentTable.vue

@@ -0,0 +1,589 @@
+<script setup lang="ts">
+import DataTable from "@/components/tables/DataTable.vue";
+import Copyright from "@/components/helper/Copyright.vue";
+import api from "@/api/api";
+import moment from "moment";
+import {
+  Search,
+  LucideChevronRight,
+  LucideChevronLeft,
+  LucideListTodo,
+  LucideCheck,
+  LucideMinus,
+  LucideSearch,
+  LucideEye,
+  LucideEyeOff,
+  LucideFilter,
+  LucideFileSpreadsheet,
+  LucideFileType2
+} from "lucide-vue-next";
+import { Input } from "@/components/ui/input";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import Pagination from "@/components/tables/Pagination.vue";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import { computed, onMounted, ref } from "vue";
+import { cn, exportToCSV, exportToExcel, exportToPDF, fillFormSchema } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
+import type { ColumnRef, PageConfig, SortBy, ToggleConfig } from "@/vueform/config/types";
+import { useConfirmDialog } from "@/stores/dialog";
+import CheckboxElement from "@/components/helper/CheckboxElement.vue";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import { parseDate } from "@/lib/utils";
+
+interface Props {
+  title: string;
+  displaySearch?: boolean;
+  searchPlaceholder?: string;
+  loading?: boolean;
+  error: string | null;
+  totalData: number;
+  totalFilteredData: number;
+  formSchema?: any;
+  formHooks?: any;
+  endpoint?: string;
+  class?: string;
+  showCopyright: boolean;
+  filter?: any;
+  pageConfig?: PageConfig;
+  // Optional overrides for document viewer behavior per page
+  showViewDocumentBtn?: boolean;
+  viewDocsEndpoint?: string;
+  // Force remount filter form to reflect cleared defaults on reset
+  filterKey?: string | number;
+}
+
+const emits = defineEmits(["searchInput", "addClick", "getData", "filterChange", "resetFilter", "openDetail", "downloadDoc", "editItem", "checkActionClick", "toggleChange", "reloadDataByIds"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  displaySearch: true,
+  searchPlaceholder: "Pencarian...",
+  loading: true,
+  error: null,
+  totalData: 0,
+  totalFilteredData: 0,
+  showCopyright: true,
+  filter: null
+});
+const data = defineModel<any[]>("data", { default: [] });
+const currentPage = defineModel("currentPage", { default: 0 });
+const itemsPerPage = defineModel("itemsPerPage", { default: 25 });
+const sortBy = defineModel<SortBy>("sortBy");
+const toggleChecked = ref(true);
+const q: any = defineModel("search");
+const selectedId = ref("");
+const pembangkitName = ref("");
+const pembangkitId = ref("");
+const periode = ref("");
+const accessLevel = ref(localStorage.getItem("dasi.user.organization.level"));
+
+/**
+ * Column settings
+ *
+ */
+const columns = defineModel<ColumnRef[]>("columns", { default: [] });
+const columnSearch = ref("");
+const columnsFiltered = computed(() => {
+  return columns.value.filter(r => r.type !== "action");
+});
+const columnsSearchResult = computed(() => {
+  return columnsFiltered.value.filter(r => r.header && r.header.toLowerCase().indexOf(columnSearch.value.toLowerCase()) >= 0);
+});
+const allColumnsSelected = computed(() => {
+  return columnsFiltered.value.length > 0 && !columnsFiltered.value.some(r => !r.visible);
+});
+const allColumnsIndeterminate = computed(() => {
+  return columnsFiltered.value.some(r => r.visible);
+});
+
+/**
+ * El
+ *
+ */
+const confirmDialog = useConfirmDialog();
+
+function searchCanged(e: Event) {
+  emits("searchInput", (e.target as HTMLInputElement).value);
+}
+
+/**
+ * Columns selector visible not visible
+ *
+ */
+function selectAllColumns() {
+  const isSelected = !allColumnsSelected.value;
+  for (const column of columns.value) {
+    if (!column.header || column.type === "action") continue;
+    column.visible = isSelected;
+  }
+  saveColumnsFilter();
+}
+
+function getPageId(): string {
+  let pageId = props.pageConfig?.id ?? props.pageConfig?.savePath ?? props.endpoint ?? props.pageConfig?.endpoint ?? "__";
+  if (!pageId.startsWith("/")) pageId = "/" + pageId;
+  return pageId.replace(/[^a-zA-Z0-9_]/g, "_");
+}
+
+/**
+ * Toggle functionality
+ */
+function getToggleConfig(): ToggleConfig | null {
+  // Support both new toggleConfig and legacy toggle/toggleOptions
+  if (props.pageConfig?.toggleConfig) {
+    return props.pageConfig.toggleConfig;
+  }
+
+  // Legacy support for backward compatibility
+  if (props.pageConfig?.toggle && props.pageConfig?.toggleOptions) {
+    return {
+      show: true,
+      options: props.pageConfig.toggleOptions,
+      defaultChecked: true
+    };
+  }
+
+  return null;
+}
+
+function initializeToggleState() {
+  const toggleConfig = getToggleConfig();
+  if (!toggleConfig) return;
+
+  toggleChecked.value = toggleConfig.defaultChecked ?? true;
+}
+
+function toggleChanged() {
+  const toggleConfig = getToggleConfig();
+  if (!toggleConfig) return;
+
+  // Simply emit the toggle change event and let parent handle data fetching
+  emits("toggleChange", {
+    checked: toggleChecked.value,
+    config: toggleConfig
+  });
+}
+
+function colVisibilityKey(): string {
+  return `dasi.column_visibility.${getPageId()}`;
+}
+
+function toggleShowHideColumn(item: any) {
+  item.visible = !item.visible;
+  saveColumnsFilter();
+}
+
+function saveColumnsFilter() {
+  setTimeout(() => {
+    const dataToSave: any[] = [];
+    for (const item of columns.value) {
+      if (item.type === "action") continue;
+      dataToSave.push({
+        key: item.key,
+        visible: item.visible
+      });
+    }
+    const dataStr = JSON.stringify(dataToSave);
+    if (!dataStr) return;
+    localStorage.setItem(colVisibilityKey(), dataStr);
+  });
+}
+
+function restoreColumnsFilter() {
+  const dataStr = localStorage.getItem(colVisibilityKey());
+  if (!dataStr) return;
+  try {
+    const colJsonData = JSON.parse(dataStr);
+    for (const item of colJsonData ?? []) {
+      for (const column of columns.value) {
+        if (item.key === column.key) {
+          column.visible = !!item.visible;
+          break;
+        }
+      }
+    }
+  } catch (err) {
+    console.error("Failed to parse columns visibilty data", err);
+  }
+}
+
+/**
+ * Export
+ */
+const exportTo = async (type: "pdf" | "excel") => {
+  if (accessLevel.value === "pembangkit") {
+    pembangkitName.value = localStorage.getItem("dasi.user.name") || "";
+  } else {
+    if (pembangkitId.value) {
+      await api
+        .get(`/organization/${pembangkitId.value}`)
+        .then(r => {
+          pembangkitName.value = r.data.data?.pembangkit?.nama;
+        })
+        .catch(err => {
+          console.error("Error fetching pembangkit data:", err);
+        });
+    }
+  }
+
+  if (sessionStorage.getItem("dasiv2.filter.tanggal")) {
+    periode.value = sessionStorage.getItem("dasiv2.filter.tanggal") || "";
+  }
+
+  const tanggal = sessionStorage.getItem("dasiv2.filter.tanggal");
+
+  const namaPembangkit = pembangkitName.value || "";
+  const periodeValue = tanggal
+    ? (() => {
+        try {
+          const tempDate = parseDate(tanggal);
+          if (tempDate) {
+            return tempDate.format("MM/YYYY");
+          }
+        } catch (e) {
+          console.error("Error formatting date:", tanggal, e);
+        }
+        return "";
+      })()
+    : "";
+
+  const exportColumns: { key: string; label: string }[] = [];
+  columns.value?.map((item: any) => {
+    if (item.type === "action" || item.visible !== true) return; // Skip action columns
+    item.label = item.header?.replace("<br />", " ");
+    exportColumns.push({
+      key: item.key,
+      label: item.label?.replace("<br />", " ")
+    });
+  });
+
+  // Process export data using fillFormSchema if formSchema is available
+  let exportData = data.value.map((item: any) => ({ ...item }));
+
+  if (props.formSchema) {
+    // Create a schema entries array for fillFormSchema
+    Object.entries(props.formSchema);
+
+    // Process each data item through fillFormSchema
+    exportData = data.value.map((item: any) => {
+      // Create a copy of the schema to avoid modifying the original
+      const tempSchema = JSON.parse(JSON.stringify(props.formSchema));
+      const tempSchemaEntries = Object.entries(tempSchema);
+
+      // Use fillFormSchema to process the item
+      fillFormSchema(tempSchemaEntries, item);
+
+      // Extract the processed values from the schema
+      const processedItem: any = { ...item };
+      tempSchemaEntries.forEach(([key, schemaItem]: [string, any]) => {
+        if (schemaItem.default !== undefined && schemaItem.default !== null) {
+          // Handle different data types returned by fillFormSchema
+          if (Array.isArray(schemaItem.default)) {
+            // For arrays, try to extract meaningful values
+            if (schemaItem.default.length > 0) {
+              const firstItem = schemaItem.default[0];
+              if (typeof firstItem === "object" && firstItem !== null) {
+                // Extract name, nama, or other display properties
+                processedItem[key] = firstItem.name || firstItem.nama || firstItem.label || firstItem.id || JSON.stringify(firstItem);
+              } else {
+                processedItem[key] = firstItem;
+              }
+            } else {
+              processedItem[key] = "";
+            }
+          } else if (typeof schemaItem.default === "object" && schemaItem.default !== null) {
+            // For objects, extract meaningful display value
+            if (schemaItem.default.value && typeof schemaItem.default.value === "object") {
+              const valueObj = schemaItem.default.value;
+              processedItem[key] = valueObj.name || valueObj.nama || valueObj.label || valueObj.id || JSON.stringify(valueObj);
+            } else {
+              processedItem[key] = schemaItem.default.name || schemaItem.default.nama || schemaItem.default.label || schemaItem.default.id || JSON.stringify(schemaItem.default);
+            }
+          } else {
+            processedItem[key] = schemaItem.default;
+          }
+        }
+      });
+
+      return processedItem;
+    });
+  }
+
+  if (type == "pdf") {
+    exportToPDF(exportData, props.title, exportColumns, props.title, namaPembangkit, periodeValue);
+  } else if (type == "excel") {
+    exportToExcel(exportData, props.title, exportColumns, "Sheet1", namaPembangkit, periodeValue);
+  }
+};
+
+/**
+ * Filter
+ *
+ */
+function handleFilterChange(filterData: any) {
+  if (filterData.pembangkit_id && filterData.pembangkit_id.length > 0) {
+    pembangkitId.value = filterData.pembangkit_id;
+  }
+
+  // Emit the original filterChange event
+  emits("filterChange", filterData);
+}
+
+function resetFilter() {
+  confirmDialog
+    .open({
+      title: "Reset Filter",
+      description: "Apakah Anda yakin ingin reset semua filter terpilih?",
+      negative: false,
+      cancelLabel: "Batal",
+      actionLabel: "Reset Filter"
+    })
+    .then((b: boolean) => {
+      if (!b) return;
+      emits("resetFilter");
+    });
+}
+
+/**
+ * Checkbox per rows
+ *
+ */
+const checkedItems = computed(() => {
+  return data.value.filter(r => r.checked);
+});
+const checkedAll = computed(() => {
+  if (!data.value || data.value.length < 1) return false;
+  return checkedItems.value.length === data.value.length;
+});
+const indeterminate = computed(() => {
+  for (const item of data.value) {
+    if (item.checked) return true;
+  }
+  return false;
+});
+const checkDisabled = computed(() => {
+  if (!props.pageConfig?.showCheckboxItem || !props.pageConfig.checkDisabled) {
+    return false;
+  }
+  let isDisabled = true;
+  for (const item of data.value) {
+    if (!props.pageConfig.checkDisabled(item, data.value)) {
+      isDisabled = false;
+      break;
+    }
+  }
+  return isDisabled;
+});
+function checkAllData() {
+  const checked = !checkedAll.value;
+  for (const item of data.value) {
+    if (props.pageConfig?.checkDisabled && props.pageConfig?.checkDisabled(item, data.value) === true) continue;
+    item.checked = checked;
+  }
+}
+
+function checkActionClicked(i: number, action: any) {
+  emits("checkActionClick", checkedItems.value, action.id);
+}
+
+function pageInitialized() {
+  restoreColumnsFilter();
+  initializeToggleState();
+}
+
+defineExpose({ pageInitialized });
+
+onMounted(() => {
+  restoreColumnsFilter();
+  initializeToggleState();
+});
+
+// Merge optional props overrides into a derived pageConfig
+const effectivePageConfig = computed<PageConfig | undefined>(() => {
+  const base = props.pageConfig ? ({ ...props.pageConfig } as PageConfig) : ({} as PageConfig);
+  if (typeof props.showViewDocumentBtn !== "undefined") {
+    (base as any).showViewDocButton = props.showViewDocumentBtn;
+  }
+  if (props.viewDocsEndpoint) {
+    (base as any).viewDocsEndpoint = props.viewDocsEndpoint;
+  }
+  return Object.keys(base).length ? base : undefined;
+});
+</script>
+
+<template>
+  <main class="p-3 pb-2 2xl:p-4">
+    <section :class="cn('rounded-md border bg-white py-2.5 dark:border-dark_bg2 dark:bg-dark_bg2 2xl:py-3', props.class)" style="transform-origin: left">
+      <div class="mb-2.5 flex items-center justify-between px-4 2xl:mb-3">
+        <div class="flex w-full items-center">
+          <div class="mr-4 flex flex-none items-center gap-3 pl-1" v-if="pageConfig?.showCheckboxItem">
+            <CheckboxElement :indeterminate="indeterminate" :checked="checkedAll" :ignore-model="true" v-on:click="checkAllData" :disabled="checkDisabled" />
+            <div class="text-xs opacity-65" v-if="checkedItems.length > 0">{{ checkedItems.length }} terpilih</div>
+            <div class="flex items-center" v-if="checkedItems.length > 0">
+              <button
+                :class="
+                  cn(
+                    'mr-2 flex h-8 cursor-pointer items-center justify-center rounded-full border border-blue-500 pl-2.5 pr-3 text-[13px] leading-none text-blue-500 transition hover:bg-blue-100 2xl:text-[14px]',
+                    action.class
+                  )
+                "
+                v-for="(action, i) in pageConfig?.checkboxActionBtn ?? []"
+                @click.stop="checkActionClicked(i, action)">
+                <LucideIcon :name="action.icon" :class="cn('mr-1.5', action.iconClass)" :size="action.iconSize ?? 20" :stroke-width="action.iconStrokeWidth ?? 1.6" />
+                {{ action.label }}
+              </button>
+            </div>
+          </div>
+          <slot name="left-action"></slot>
+          <div class="relative w-full max-w-96" v-if="displaySearch !== false">
+            <Input
+              type="text"
+              :placeholder="props.searchPlaceholder"
+              class="!h-9 w-full rounded-full !border-2 !border-solid !border-transparent bg-[#eee] px-4 leading-none hover:bg-slate-100 focus:!border-2 focus:!border-solid focus:!border-blue-500 focus:bg-white dark:border-dark_bg4 dark:bg-dark_bg4 dark:hover:bg-dark_bg dark:focus:bg-dark_bg"
+              @input="searchCanged"
+              v-model="q" />
+            <span class="absolute right-0 top-0 flex items-center justify-center pr-3 pt-2">
+              <Search class="size-5 text-muted-foreground" />
+            </span>
+          </div>
+          <div class="pl-1 font-medium" v-else-if="pageConfig?.pageTitle">
+            {{ pageConfig?.pageTitle }}
+          </div>
+        </div>
+
+        <div class="pct-action-cnt flex flex-none items-center justify-end">
+          <slot name="right-action"></slot>
+
+          <div class="ml-5 mr-6 flex items-center gap-2 border-r px-2 py-2 pr-5" v-if="getToggleConfig()?.show">
+            <span class="text-[12px] opacity-75">{{ toggleChecked ? getToggleConfig()?.options.checked : getToggleConfig()?.options.unchecked }}</span>
+            <Switch class="!bg-green-500 data-[state=checked]:!bg-blue-500" v-model:checked="toggleChecked" v-on:update:checked="toggleChanged" />
+          </div>
+
+          <section class="flex items-center gap-2 2xl:gap-3">
+            <template v-if="pageConfig?.showPagination !== false">
+              <div class="mr-2 text-xs text-gray-500 dark:text-gray-400 2xl:mr-3 2xl:text-[13px]">
+                {{ (currentPage - 1) * itemsPerPage + 1 }} - {{ Math.min(currentPage * itemsPerPage, props.totalData) }} dari
+                {{ props.totalData }}
+              </div>
+              <BtnCircle :class="{ 'cursor-not-allowed opacity-30': currentPage <= 1 }" @click="currentPage > 1 && (currentPage--, emits('getData'))">
+                <LucideChevronLeft :stroke-width="1.5" class="size-[20px] 2xl:size-[24px]" />
+              </BtnCircle>
+              <BtnCircle
+                :class="{ 'cursor-not-allowed opacity-30': currentPage >= Math.ceil(props.totalData / itemsPerPage) }"
+                @click="currentPage < Math.ceil(props.totalData / itemsPerPage) && (currentPage++, emits('getData'))">
+                <LucideChevronRight :stroke-width="1.5" class="size-[20px] 2xl:size-[24px]" />
+              </BtnCircle>
+            </template>
+
+            <template v-if="props.pageConfig?.showExportButton === true">
+              <BtnCircle @click="exportTo('excel')" title="Export Excel">
+                <LucideFileSpreadsheet :stroke-width="1.5" class="size-[20px] 2xl:size-[24px]" />
+              </BtnCircle>
+              <BtnCircle @click="exportTo('pdf')" title="Export PDF">
+                <LucideFileType2 :stroke-width="1.5" class="size-[20px] 2xl:size-[24px]" />
+              </BtnCircle>
+            </template>
+
+            <Popover>
+              <PopoverTrigger>
+                <BtnCircle>
+                  <LucideListTodo :size="22" class="size-[20px] 2xl:size-[24px]" />
+                </BtnCircle>
+              </PopoverTrigger>
+              <PopoverContent class="mr-20 w-[360px] p-0">
+                <h1 class="flex w-full items-center border-b px-5 pb-2 pt-3 text-left font-medium text-gray-500">
+                  <LucideListTodo :size="20" class="mr-2" />
+                  Tampilan Kolom
+                </h1>
+                <li class="flex cursor-pointer list-none items-center border-b px-5 py-1.5 text-sm transition hover:bg-slate-100 dark:hover:bg-slate-700" v-on:click="selectAllColumns">
+                  <div
+                    class="ml-px mr-[13px] flex size-[16px] flex-none items-center justify-center rounded-sm border border-gray-400 bg-white text-white shadow-none"
+                    :class="{
+                      '!border-blue-500 !bg-blue-500': allColumnsSelected || allColumnsIndeterminate
+                    }">
+                    <LucideCheck v-if="allColumnsSelected" :stroke-width="3" />
+                    <LucideMinus v-else-if="allColumnsIndeterminate" :stroke-width="3" />
+                  </div>
+                  <template v-if="allColumnsSelected">Sembunyikan</template>
+                  <template v-else>Tampilkan</template>
+                  Semua Kolom
+                </li>
+                <li class="relative list-none border-b bg-slate-100 px-4 py-1.5 dark:bg-transparent">
+                  <input type="text" placeholder="Cari kolom..." class="w-full rounded-full border border-white bg-white py-1 pl-[33px] pr-3 text-sm dark:bg-slate-700" v-model="columnSearch" />
+                  <LucideSearch :size="16" class="absolute left-[23px] top-1/2 -translate-y-1/2 text-gray-400" />
+                </li>
+                <ScrollArea class="h-[380px] max-w-[60vh] pb-2">
+                  <li
+                    class="flex cursor-pointer list-none items-start px-5 py-1.5 text-sm transition hover:bg-blue-100 hover:text-blue-500 hover:dark:bg-slate-700"
+                    :class="{ 'bg-slate-50 text-[#888] dark:bg-slate-700 dark:text-white': !item.visible }"
+                    v-for="(item, i) in columnsSearchResult"
+                    :key="i"
+                    v-on:click="toggleShowHideColumn(item)">
+                    <LucideEye :stroke-width="1.5" :size="18" class="mr-3 mt-px flex-none" v-if="item.visible" />
+                    <LucideEyeOff :stroke-width="1.5" :size="18" class="mr-3 mt-px flex-none" v-else />
+                    <div v-html="item.header"></div>
+                  </li>
+                </ScrollArea>
+              </PopoverContent>
+            </Popover>
+            <Popover v-if="props.filter && Object.keys(props.filter).length > 0">
+              <PopoverTrigger>
+                <BtnCircle class="ml-2 2xl:ml-3">
+                  <LucideFilter class="size-[18px] 2xl:size-[21px]" />
+                </BtnCircle>
+              </PopoverTrigger>
+              <PopoverContent class="mr-20 p-0 dark:bg-dark_bg3" :class="pageConfig?.width ? `w-[${pageConfig.width}px]` : 'w-[360px]'">
+                <div class="flex w-full items-center border-b px-5 pb-2 pt-3 text-left font-medium text-gray-500">
+                  <LucideFilter :size="20" class="mr-2" />
+                  Filter
+                  <button class="-mr-2 ml-auto rounded-full px-2.5 py-0.5 text-sm text-red-500 transition hover:bg-red-100" v-on:click="resetFilter">Reset filter</button>
+                </div>
+                <div class="px-5 py-2.5">
+                  <Vueform :schema="props.filter" :key="props.filterKey" v-on:change="handleFilterChange" />
+                </div>
+              </PopoverContent>
+            </Popover>
+          </section>
+        </div>
+      </div>
+      <div class="min-h-[calc(100vh-360px)]">
+        <slot name="table">
+          <DataTable
+            v-model:data="data"
+            :title="props.title"
+            :columns="columns"
+            :loading="props.loading"
+            :error="props.error"
+            :form-hooks="props.formHooks"
+            :form-schema="props.formSchema"
+            :endpoint="props.endpoint"
+            :page-config="effectivePageConfig ?? pageConfig"
+            v-model:sort-by="sortBy"
+            v-model:selected-id="selectedId"
+            v-on:get-data="emits('getData')"
+            v-on:open-detail="(...e) => emits('openDetail', ...e)"
+            @reload-data-by-ids="(...e) => emits('reloadDataByIds', ...e)"
+            @edit="(...e) => emits('editItem', ...e)">
+            <template #detail="detail">
+              <slot name="detail" :detail="detail"></slot>
+            </template>
+          </DataTable>
+        </slot>
+      </div>
+      <slot name="legend"></slot>
+      <div class="mt-5 flex justify-end" v-if="pageConfig?.showPagination === false">
+        <section class="flex w-full items-center px-5">
+          <div class="mr-auto text-sm text-gray-500">Menampilkan {{ props.totalData }} data</div>
+        </section>
+      </div>
+      <div class="mt-5 flex justify-end" v-else>
+        <Pagination v-model:current-page="currentPage" v-model:items-per-page="itemsPerPage" :total-data="props.totalData" v-on:get-data="emits('getData')" :loading="props.loading" />
+      </div>
+    </section>
+    <div class="px-2 pb-10 pt-2 text-left text-xs text-slate-400 2xl:text-sm" v-if="props.showCopyright">
+      <Copyright />
+    </div>
+    <slot></slot>
+  </main>
+</template>

package/src/components/pages/PageTab.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import TabViewItem from '@/components/tab/TabViewItem.vue'
+import TabView from '@/components/tab/TabView.vue'
+import { LucideList, LucideStar, LucideTrash } from 'lucide-vue-next';
+import TabViewItemBar from '@/components/tab/TabViewItemBar.vue';
+import LucideIcon from '@/components/helper/LucideIcon.vue';
+
+export interface CustomTab {
+  name: string
+  code: string
+  icon: string
+  count?: number
+  color?: string
+}
+
+interface PageTabProp {
+  showDeleted?: boolean
+  showFavorite?: boolean
+  showAll?: boolean
+  customTabs?: CustomTab[]
+}
+
+const props = withDefaults(defineProps<PageTabProp>(), {
+  showAll: true,
+  showDeleted: true,
+  showFavorite: false,
+});
+
+const tab = defineModel<string>({ default: 'all' });
+const emits = defineEmits(['change']);
+
+function selectTab(selectedTab: string) {
+  tab.value = selectedTab;
+  emits('change', selectTab);
+}
+</script>
+
+<template>
+  <div class="bg-white dark:bg-dark_bg">
+    <TabView>
+      <TabViewItem :active="tab === 'all'" v-on:click="selectTab('all')" v-if="showAll">
+        <div class="flex items-center">
+          <LucideList class="2xl:size-[20px] size-[16px] mr-2" :stroke-width="3"/>
+          All Data
+        </div>
+      </TabViewItem>
+      <TabViewItem :active="tab === 'starred'" v-on:click="selectTab('starred')"
+        v-if="props.showFavorite">
+        <div class="flex items-center"
+          :class="{'text-orange-400': tab === 'starred'}">
+          <LucideStar class="2xl:size-[20px] size-[16px] mr-2" :stroke-width="2.2"/>
+          Starred
+        </div>
+        <template #bar>
+          <TabViewItemBar :class="{'!bg-orange-400': tab === 'starred'}"></TabViewItemBar>
+        </template>
+      </TabViewItem>
+      <template v-if="props.customTabs && props.customTabs.length > 0">
+        <TabViewItem :active="tab === item.code" v-on:click="selectTab(item.code)"
+          v-for="(item, i) in props.customTabs" :key="i">
+          <div class="flex items-center" :class="tab === item.code ? `text-${item.color}` : ''">
+            <LucideIcon class="2xl:size-[20px] size-[16px] mr-2" :stroke-width="2.2" :name="item.icon" v-if="item.icon"/>
+            {{ item.name }}
+            <div class="bg-red-500 h-[19px] min-w-[19px] px-1.5 text-center pt-[3px] leading-none text-[13px] rounded-full text-white ml-1.5" v-if="item.count">{{ item.count }}</div>
+          </div>
+          <template #bar v-if="item.color">
+            <TabViewItemBar :class="tab === item.code ? `!bg-${item.color}` : ''"></TabViewItemBar>
+          </template>
+        </TabViewItem>
+      </template>
+      <TabViewItem :active="tab === 'deleted'" v-on:click="selectTab('deleted')"
+        v-if="props.showDeleted !== false">
+        <div class="flex items-center"
+          :class="{'text-red-600': tab === 'deleted'}">
+          <LucideTrash :stroke-width="2.2" class="2xl:size-[20px] size-[16px] mr-2"/>
+          Deleted
+        </div>
+        <template #bar>
+          <TabViewItemBar :class="{'!bg-red-600': tab === 'deleted'}"></TabViewItemBar>
+        </template>
+      </TabViewItem>
+    </TabView>
+  </div>
+</template>