@dasidev/dasi-ui 1.0.0

package/src/components/pages/Leftbar.vue

@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { onMounted, ref, onBeforeMount, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
+import { ChevronDown, LucideSearch, Search } from "lucide-vue-next";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import menuSchema from "@/menu";
+import type { Menu, OrgLevel, Submenu } from "@/menu";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useAppConfig } from "@/composables/useAppConfig";
+
+/**
+ * Init variable
+ *
+ */
+const router = useRouter();
+const route = useRoute();
+
+const { companyName, logo, organizationLevels, isConfigLoaded } = useAppConfig();
+
+const open = ref(false);
+const commandOpen = ref(false);
+const selectedMenuUri = ref("");
+const menuOpen = ref("");
+const menu = ref<Menu[]>([]);
+const menuFiltered = ref<Menu[]>([]);
+const menuHistory = ref<Submenu[]>([]);
+const q = ref("");
+const orgLevel = ref<OrgLevel | null>(null);
+
+/**
+ * Keys shortcut to open global search
+ *
+ */
+function initKeyShortcuts() {
+  window.addEventListener("keydown", event => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      openSearch();
+    }
+  });
+}
+
+/**
+ * Go to menu from global search
+ *
+ */
+function openMenuItem(item: Menu, submenu: Submenu) {
+  menuOpen.value = item.id;
+  commandOpen.value = false;
+  if (!submenu.url) return;
+
+  const history = {
+    ...submenu,
+    icon: item.icon,
+    iconSize: item.iconSize,
+    iconType: item.iconType
+  };
+  const historyIdx = menuHistory.value.findIndex((r: any) => r.url === submenu.url);
+  if (historyIdx >= 0) menuHistory.value.splice(historyIdx, 1);
+  menuHistory.value.unshift(history);
+  if (menuHistory.value.length > 5) {
+    menuHistory.value.pop();
+  }
+  const historyStr = JSON.stringify(menuHistory.value);
+  localStorage.setItem("app.menu_history", historyStr);
+
+  router.push(submenu.url);
+}
+
+function openSubmenu(item: Menu, submenu: Submenu) {
+  menuOpen.value = item.id;
+  if (!submenu.url) return;
+  router.push(submenu.url);
+}
+
+function getSelectedMenu() {
+  if (menuFiltered.value.length > 0) {
+    for (const item of menuFiltered.value) {
+      if (item.submenu && item.submenu.length > 0) {
+        selectedMenuUri.value = item.submenu[0].url || "";
+        break;
+      }
+    }
+  }
+}
+
+function openSearch() {
+  commandOpen.value = !commandOpen.value;
+  getSelectedMenu();
+}
+
+function openSelectedMenu() {
+  for (const item of menuFiltered.value) {
+    for (const submenu of item.submenu) {
+      if (submenu.url === selectedMenuUri.value) {
+        openMenuItem(item, submenu);
+        return;
+      }
+    }
+  }
+}
+function selectPreviousMenuItem() {
+  let i1 = 0;
+  for (const item of menuFiltered.value) {
+    let i2 = 0;
+    for (const submenu of item.submenu) {
+      if (submenu.url === selectedMenuUri.value) {
+        if (menuFiltered.value[i1].submenu[i2 - 1]) {
+          selectedMenuUri.value = menuFiltered.value[i1].submenu[i2 - 1].url ?? "";
+        } else if (menuFiltered.value[i1 - 1]?.submenu[menuFiltered.value[i1 - 1].submenu.length - 1]) {
+          selectedMenuUri.value = menuFiltered.value[i1 - 1].submenu[menuFiltered.value[i1 - 1].submenu.length - 1].url ?? "";
+        }
+        return;
+      }
+      i2 += 1;
+    }
+    i1 += 1;
+  }
+}
+function selectNextMenuItem() {
+  let i1 = 0;
+  for (const item of menuFiltered.value) {
+    let i2 = 0;
+    for (const submenu of item.submenu) {
+      if (submenu.url === selectedMenuUri.value) {
+        if (menuFiltered.value[i1].submenu[i2 + 1]) {
+          selectedMenuUri.value = menuFiltered.value[i1].submenu[i2 + 1].url ?? "";
+        } else if (menuFiltered.value[i1 + 1]?.submenu[0]) {
+          selectedMenuUri.value = menuFiltered.value[i1 + 1]?.submenu[0].url ?? "";
+        }
+        return;
+      }
+      i2 += 1;
+    }
+    i1 += 1;
+  }
+}
+
+function searchMenu() {
+  menuFiltered.value = [];
+  const qlower = q.value.toLowerCase();
+  for (const item of menu.value) {
+    const headerFound = item.name.toLowerCase().includes(qlower) || (item.keyword || "").toLowerCase().includes(qlower);
+    if (headerFound) {
+      menuFiltered.value.push(item);
+    }
+    if (!headerFound) {
+      const submenu: Submenu[] = [];
+      for (const sub of item.submenu) {
+        if (sub.name.toLowerCase().includes(qlower) || (sub.keyword || "").toLowerCase().includes(qlower)) {
+          submenu.push(sub);
+        }
+      }
+      if (submenu.length > 0) {
+        menuFiltered.value.push({ ...item, submenu });
+      }
+    }
+  }
+  getSelectedMenu();
+}
+
+onBeforeMount(() => {
+  searhMenu: for (const item of menuSchema) {
+    for (const sub of item.submenu) {
+      if (sub.url === route.path) {
+        menuOpen.value = item.id;
+        break searhMenu;
+      }
+    }
+  }
+});
+
+onMounted(() => {
+  initKeyShortcuts();
+
+  // Use configurable key for organization level
+  orgLevel.value = localStorage.getItem("app.user.organization.level") as any;
+
+  // For development/testing - provide a fallback if no orgLevel is set
+  if (!orgLevel.value) {
+    console.warn('No organization level found in localStorage. Using fallback "superadmin" for development.');
+    orgLevel.value = "superadmin";
+  }
+
+  console.log("Current orgLevel:", orgLevel.value);
+
+  const historyStr = localStorage.getItem("app.menu_history");
+  if (historyStr) {
+    try {
+      const history = JSON.parse(historyStr);
+      if (Array.isArray(history)) menuHistory.value = history;
+    } catch (_) {}
+  }
+
+  // api.get('/auth/directory').then((r) => {
+  //   for (const item of menuSchema) {
+  //     for (const sub of item.submenu) {
+  //       if (sub.url === route.path) menuOpen.value = item.id;
+  //       sub.visible = r.data.data.findIndex((row: any) => row.url === sub.url) >= 0;
+  //     }
+  //     item.submenu = item.submenu.filter(sub => sub.visible);
+  //     if (item.submenu.length > 0) menu.value.push(item);
+  //   }
+  // })
+
+  for (const item of menuSchema) {
+    for (const sub of item.submenu) {
+      if (sub.url === route.path) menuOpen.value = item.id;
+      // More lenient visibility check - show if orgLevel matches or if superadmin or if no orgLevels restriction
+      sub.visible = (orgLevel.value && sub.orgLevels.includes(orgLevel.value)) || orgLevel.value === "superadmin" || !sub.orgLevels || sub.orgLevels.length === 0;
+
+      console.log(`Menu item "${sub.name}": orgLevel=${orgLevel.value}, required=${sub.orgLevels}, visible=${sub.visible}`);
+    }
+    item.submenu = item.submenu.filter(sub => sub.visible);
+    if (item.submenu.length > 0) {
+      menu.value.push(item);
+      console.log(`Added menu group "${item.name}" with ${item.submenu.length} items`);
+    }
+  }
+
+  console.log("Final menu structure:", menu.value);
+  // menu.value = menuSchema;
+
+  // api.get('/auth/page-activity').then((r) => {
+  // 	menu.value = r.data.data;
+  // })
+});
+
+defineExpose({ openSearch });
+</script>
+
+<template>
+  <div
+    class="leftbar fixed bottom-0 left-0 top-0 z-50 w-20 border-r bg-white transition-all hover:w-[380px] hover:shadow-lg dark:border-dark_border2 dark:bg-dark_bg"
+    :class="[{ open: open }]"
+    v-on:mouseenter="() => (open = true)"
+    v-on:mouseleave="() => (open = false)">
+    <ScrollArea class="h-full">
+      <!-- Sticky header with logo and search -->
+      <div class="sticky-header sticky top-0 z-50 bg-white dark:bg-dark_bg">
+        <div class="overflow-hidden pt-6">
+          <div class="w-[380px] pl-3">
+            <RouterLink to="/" class="relative flex items-center">
+              <div class="app-logo mr-3 h-14 w-14 bg-no-repeat transition-all" :style="{ backgroundImage: `url(${logo})` }"></div>
+              <div class="text-4xl font-bold text-primary_main">
+                {{ companyName }}
+              </div>
+              <!-- <div v-if="isConfigLoaded" class="ml-2 text-xs text-green-600 dark:text-green-400">✓ Config Loaded</div>
+              <div v-else class="ml-2 text-xs text-red-600 dark:text-red-400">⚠ Config Loading...</div> -->
+            </RouterLink>
+          </div>
+        </div>
+        <div class="w-[380px] px-5 pt-6">
+          <div
+            class="relative flex h-10 cursor-pointer items-center rounded-md text-gray-500 transition dark:hover:border-dark_bg3"
+            :class="[{ border: open, 'bg-gray-100 dark:bg-dark_bg2': open }]"
+            v-on:click="commandOpen = true">
+            <div class="mr-4 flex h-10 w-10 items-center justify-center rounded-md">
+              <Search class="scale-90 2xl:scale-100" />
+            </div>
+            <span class="text-sm opacity-0 transition" :class="[{ 'opacity-100': open }]">Search...</span>
+            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400 opacity-0 transition" :class="[{ 'opacity-100': open }]">⌘K</span>
+          </div>
+          <div class="mb-3 mt-3 h-px w-10 bg-gray-200" :class="[{ 'opacity-0': open }]"></div>
+        </div>
+      </div>
+
+      <!-- Scrollable content -->
+      <div class="overflow-hidden pb-14">
+        <div class="w-[380px] px-5">
+          <Accordion collapsible type="single" :default-value="menuOpen">
+            <AccordionItem v-for="(item, i) in menu" :key="i" :value="item.id" class="relative mb-2 border-none p-0 font-medium text-gray-500 dark:text-dark_text">
+              <AccordionTrigger class="relative block p-0 hover:no-underline">
+                <RouterLink to="#" class="flex items-center rounded-md transition hover:bg-hover_main hover:text-primary_main dark:hover:bg-dark_bg3 dark:hover:text-dark_text">
+                  <div
+                    class="relative mr-4 flex h-10 w-10 items-center justify-center overflow-hidden rounded-md text-gray-800 dark:text-dark_text"
+                    :class="{
+                      'bg-active_main dark:bg-blue-500 dark:text-white': menuOpen === item.id
+                    }">
+                    <div class="relative z-3">
+                      <div v-html="item.icon" v-if="item.iconType === 'svg'"></div>
+                      <LucideIcon :name="item.icon" :size="item.iconSize || 24" :strokeWidth="1.4" class="scale-[.85] 2xl:scale-100" />
+                    </div>
+                  </div>
+                  <div class="text-[13px] opacity-0 transition 2xl:text-[13px]" :class="[{ 'opacity-100': open }]">
+                    {{ item.name }}
+                  </div>
+                </RouterLink>
+                <template v-slot:icon>
+                  <ChevronDown class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-active_main"></ChevronDown>
+                </template>
+              </AccordionTrigger>
+              <AccordionContent v-if="item.submenu && item.submenu.length > 0">
+                <div class="group relative py-0.5 pl-10" v-for="(sub, i) in item.submenu" :key="i">
+                  <div
+                    class="absolute bottom-0 left-5 top-0 -ml-px w-0.5 bg-gray-200 group-hover:bg-primary_main dark:bg-dark_bg2/60 dark:group-hover:bg-dark_bg4"
+                    :class="{ '!bg-blue-500': sub.url === route.path }"></div>
+                  <div class="px-4 pb-px pt-3 text-xs uppercase tracking-wider text-gray-400" v-if="sub.type === 'header'">
+                    {{ sub.name }}
+                  </div>
+                  <div
+                    class="relative block cursor-pointer rounded-md px-4 py-2 text-xs transition hover:bg-hover_main hover:text-primary_main dark:hover:bg-dark_bg3 dark:hover:text-dark_text 2xl:text-[13px]"
+                    :class="{
+                      'bg-active_main text-primary_main dark:!bg-blue-500 dark:!text-white': sub.url === route.path,
+                      '!text-transparent dark:!text-transparent': !open
+                    }"
+                    v-on:click="openSubmenu(item, sub)"
+                    v-else>
+                    {{ sub.name }}
+                    <div
+                      class="absolute -left-4 top-3 h-2 w-2 rounded-full bg-orange-300 dark:bg-orange-700"
+                      v-if="sub.url && !sub.ok"
+                      :class="{
+                        '!bg-orange-300': sub.connectApi,
+                        '!bg-green-500': sub.finished
+                      }"></div>
+                  </div>
+                  <template v-if="sub.submenu && sub.submenu.length > 0">
+                    <div class="pl-4" v-for="(sub2, i2) in sub.submenu" :key="i2">
+                      <RouterLink :to="sub2.url || '#'" class="block rounded-md px-4 py-2 text-sm hover:bg-hover_main hover:text-primary_main">
+                        {{ sub2.name }}
+                      </RouterLink>
+                    </div>
+                  </template>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+    </ScrollArea>
+  </div>
+
+  <Dialog v-model:open="commandOpen">
+    <DialogContent class="block w-[calc(100%-40px)] max-w-[680px] overflow-hidden p-0 dark:bg-dark_bg2">
+      <div class="relative border-b">
+        <input
+          type="text"
+          class="w-full px-12 py-3 dark:bg-dark_bg2"
+          placeholder="Cari halaman..."
+          v-model="q"
+          v-on:input.prevent="searchMenu"
+          v-on:keydown.enter.prevent="openSelectedMenu"
+          v-on:keydown.up.prevent="selectPreviousMenuItem"
+          v-on:keydown.down.prevent="selectNextMenuItem" />
+        <LucideSearch class="absolute left-3 top-3 opacity-60" :size="20" />
+      </div>
+      <div class="h-[400px]">
+        <ScrollArea class="h-full">
+          <section class="py-3" v-if="!q">
+            <div class="px-5 pt-3 text-center" v-if="menuHistory.length > 0">
+              <div class="mb-6 px-5 text-sm opacity-60">Ketik untuk mulai pencarian halaman</div>
+              <h4 class="mb-4 font-medium">Riwayat Halaman</h4>
+              <div class="flex flex-wrap items-start justify-center gap-0">
+                <button class="w-24 text-center leading-none" v-for="(item, i) in menuHistory" :key="i" v-on:click="openMenuItem(item as any, item)">
+                  <div class="mx-auto mb-2 flex size-20 items-center justify-center rounded-lg border text-slate-500 hover:border-slate-500 hover:bg-slate-100 hover:text-blue-600 hover:shadow-md">
+                    <LucideIcon :name="item.icon" :size="item.iconSize ? item.iconSize + 20 : 44" :strokeWidth="1.4" class="mx-auto flex-none" />
+                  </div>
+                  <span class="text-xs font-medium leading-none">
+                    {{ item.name }}
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div class="px-5 text-sm opacity-60" v-else>Ketik untuk mulai pencarian halaman</div>
+          </section>
+          <section class="px-5 py-3 text-sm opacity-60" v-else-if="menuFiltered.length < 1">
+            <i>Halaman tidak ditemukan!</i>
+          </section>
+          <section class="py-3" v-else>
+            <div v-for="(item, i1) in menuFiltered" :key="item.id" class="px-2 pb-3">
+              <h4 class="mb-1 px-3 text-[13px] font-medium opacity-85">
+                {{ item.name }}
+              </h4>
+              <div v-for="(submenu, i2) in item.submenu" :key="submenu.url">
+                <button
+                  v-on:click="openMenuItem(item, submenu)"
+                  v-if="submenu.type !== 'header'"
+                  class="flex w-full cursor-pointer items-center rounded-sm px-3 py-1.5 text-sm hover:!bg-blue-500 hover:!text-white dark:hover:!bg-blue-600"
+                  :class="{
+                    'bg-blue-50 text-white dark:bg-dark_bg5': submenu.url === route.path,
+                    '!bg-blue-200 dark:!bg-dark_bg5': submenu.url === selectedMenuUri
+                  }">
+                  <LucideIcon :name="item.icon" :size="item.iconSize ? item.iconSize - 8 : 16" :strokeWidth="1.4" class="mr-3 flex-none" />
+                  {{ submenu.name }}
+                </button>
+              </div>
+            </div>
+          </section>
+        </ScrollArea>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<style lang="scss">
+.leftbar {
+  .app-logo {
+    background-position: top center;
+    background-size: 2.6rem auto;
+    background-repeat: no-repeat;
+  }
+
+  &.open {
+    .app-logo {
+      background-size: 3.5rem auto;
+    }
+  }
+
+  .sticky-header {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+}
+</style>

package/src/components/pages/PageActivity.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import PageActivityContent from "@/components/pages/PageActivityContent.vue";
+import type { CustomTab } from "@/components/pages/PageTab.vue";
+import type { DasiV2FormSchema, FormSchema, FormSchemaHooks } from "@/types/form.types";
+import type { ColumnRef } from "@/vueform/config/types";
+import { nextTick, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+/**
+ * As default page initialization
+ * will do automatic get from routes
+ * 
+ * If manualInit is set to true, you have to hit
+ * initPage manualy after setting pageCode and endpoint
+ *
+ */
+const props = defineProps(['manualInit']);
+
+/**
+ * Base
+ * 
+ */
+const pageCode = defineModel<string>('pageCode', { default: '' });
+const endpoint = defineModel<string>('endpoint', { default: '' });
+
+/**
+ * Form by Vueform
+ *
+ */
+const formSchema = ref<DasiV2FormSchema>();
+const formHooks = ref<FormSchemaHooks>();
+
+/**
+ * Model binding
+ *
+ */
+const data = ref<any[]>();
+const customTabs = ref<CustomTab[]>();
+const columns = ref<ColumnRef[]>();
+const tab = ref<string>();
+const loading = ref<boolean>();
+const dataError = ref<string | null>();
+
+/**
+ * El
+ *
+ */
+const pac = ref<InstanceType<typeof PageActivityContent>>();
+
+/**
+ * Init page with timeout or nextTick
+ * to make sure the model already set
+ *
+ */
+async function initPage() {
+  await nextTick();
+  pac.value?.initPage();
+}
+
+/**
+ * Re-init page
+ * if route params changed
+ *
+ */
+watch(
+  () => route.params,
+  (newParams) => {
+    if (props.manualInit) return;
+
+    /**
+     * Only reinitialize if the page or activity params have changed
+     * 
+     */
+    if (pageCode.value !== String(newParams.page) || endpoint.value !== String(newParams.activity)) {
+      pageCode.value = String(newParams.page);
+      endpoint.value = String(newParams.activity);
+      initPage();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.manualInit) return;
+  pageCode.value = String(route.params.page);
+  endpoint.value = String(route.params.activity);
+  initPage();
+});
+
+defineExpose({ initPage });
+</script>
+
+<template>
+  <PageActivityContent ref="pac"
+    :page-code="pageCode"
+    :endpoint="endpoint"
+    v-model:schema="formSchema"
+    v-model:hooks="formHooks"
+    v-model:data="data"
+    v-model:custom-tabs="customTabs"
+    v-model:columns="columns"
+    v-model:tab="tab"
+    v-model:loading="loading"
+    v-model:data-error="dataError"
+  />
+</template>