@dasidev/dasi-ui 1.0.0

package/src/layouts/FormGlobal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import FormDialog from '@/components/dialog/FormDialog.vue';
+import { useFormSheet } from '@/stores/form';
+import type { Vueform } from '@vueform/vueform';
+import { ref, watch } from 'vue';
+
+const formSheet = useFormSheet();
+
+/**
+ * El
+ *
+ */
+const formSheetEl = ref<Vueform>();
+
+function sheetFormChanged(after: any, before: any) {
+  formSheet.onChange(after, before);
+}
+
+function formEditCanceled() {
+  formSheetEl.value?.reset();
+  formSheet.close();
+}
+
+watch(() => formSheetEl.value, (el$) => {
+  formSheet.el$ = el$;
+  if (el$) {
+    setTimeout(() => {
+      formSheet.onMounted();
+    })
+  }
+})
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="formSheet.show"
+    :title="formSheet.title"
+    v-on:save-click="formSheetEl?.submit()"
+    v-on:cancel-click="formEditCanceled"
+    :loading="formSheet.loading"
+    v-model:saving="formSheet.saving"
+    v-model:error="formSheet.formError"
+    :class="formSheet.className">
+    <Vueform
+      :schema="(formSheet.formSchema as any)"
+      :endpoint="formSheet.submitForm"
+      ref="formSheetEl"
+      v-on:change="sheetFormChanged"/>
+  </FormDialog>
+</template>

package/src/layouts/GlobalDialog.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import BtnPrimary from '@/components/button/BtnPrimary.vue';
+import BtnSecondary from '@/components/button/BtnSecondary.vue';
+import ErrorDialog from '@/components/dialog/ErrorDialog.vue';
+import FormInputerDialog from '@/components/dialog/FormInputerDialog.vue';
+import InfoDialog from '@/components/dialog/InfoDialog.vue';
+import SuccessDialog from '@/components/dialog/SuccessDialog.vue';
+import LoadingDialog from '@/components/loadings/LoadingDialog.vue';
+import LucideIcon from '@/components/helper/LucideIcon.vue';
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
+  AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import DialogDescription from '@/components/ui/dialog/DialogDescription.vue';
+import DialogTitle from '@/components/ui/dialog/DialogTitle.vue';
+import { useConfirmDialog, useErrorDialog, useFormInputerDialog, useInfoDialog, useLoadingDialog, useSuccessDialog } from '@/stores/dialog';
+
+/**
+ * Dialog
+ *
+ */
+const infoDialog = useInfoDialog();
+const errorDialog = useErrorDialog();
+const loadingDialog = useLoadingDialog();
+const confirmDialog = useConfirmDialog();
+const successDialog = useSuccessDialog();
+const formInputerDialog = useFormInputerDialog();
+
+function formInputerChanged(after: any, before: any, el$: any) {
+if (formInputerDialog.options?.onChange) {
+    formInputerDialog.options?.onChange(after, before, el$);
+  }
+}
+</script>
+
+<template>
+  <LoadingDialog v-model:show="loadingDialog.show"/>
+  <InfoDialog v-model:open="infoDialog.show">
+    <template #title>
+      {{ infoDialog.options?.title }}
+    </template>
+    <template #description>
+      {{ infoDialog.options?.description }}
+    </template>
+    <template #actionLabel>
+      {{ infoDialog.options?.actionLabel || 'Tutup' }}
+    </template>
+  </InfoDialog>
+  <ErrorDialog v-model:open="errorDialog.show" v-on:close="errorDialog.close">
+    <template #title>
+      {{ errorDialog.options?.title }}
+    </template>
+    <template #description>
+      {{ errorDialog.options?.description }}
+    </template>
+    <template #actionLabel>
+      {{ errorDialog.options?.actionLabel || 'Tutup' }}
+    </template>
+  </ErrorDialog>
+  <SuccessDialog v-model:open="successDialog.show" v-on:close="successDialog.close">
+    <template #title v-if="successDialog.options?.title">
+      {{ successDialog.options?.title }}
+    </template>
+    <template #description v-if="successDialog.options?.description">
+      {{ successDialog.options?.description }}
+    </template>
+    <template #close-label v-if="successDialog.options?.closeLabel">
+      {{ successDialog.options?.closeLabel }}
+    </template>
+  </SuccessDialog>
+
+  <AlertDialog v-model:open="confirmDialog.show">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ confirmDialog.options?.title }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          <div v-html="confirmDialog.options?.description"></div>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <slot name="content"></slot>
+      <AlertDialogFooter class="pt-4">
+        <BtnSecondary class="h-auto 2xl:h-auto"
+          v-on:click="confirmDialog.close(false)">
+          {{ confirmDialog.options?.cancelLabel || 'Batal' }}
+        </BtnSecondary>
+        <BtnPrimary v-on:click.stop="confirmDialog.close(true)"
+          :loading="confirmDialog.options?.loading"
+          :disabled="confirmDialog.options?.loading"
+          class="h-auto 2xl:h-auto"
+          :class="{
+            'bg-red-500 hover:bg-red-600': confirmDialog.options?.negative,
+            'pl-3 pr-4': confirmDialog.options?.actionIcon,
+          }">
+          <LucideIcon v-if="confirmDialog.options?.actionIcon"
+            :name="confirmDialog.options?.actionIcon"
+            :size="18" class="mr-2 -ml-1" />
+          {{ confirmDialog.options?.actionLabel || 'Simpan' }}
+        </BtnPrimary>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+
+  <FormInputerDialog
+    :class="formInputerDialog.options?.class"
+    :class-content="formInputerDialog.options?.classContent"
+    :class-overlay="formInputerDialog.options?.classOverlay"
+    :close-on-submit="false"
+    v-model:show="formInputerDialog.show"
+    v-model:error="formInputerDialog.formError"
+    v-model:saving="formInputerDialog.saving"
+    v-model:form="formInputerDialog.formSchema"
+    @submit="formInputerDialog.submit"
+    @change="formInputerChanged"
+  >
+    <template #header>
+      <DialogTitle>{{ formInputerDialog.options?.title }}</DialogTitle>
+      <DialogDescription v-if="formInputerDialog.options?.description">
+        {{ formInputerDialog.options?.description }}
+      </DialogDescription>
+    </template>
+    <template #button-label>{{ formInputerDialog.options?.actionLabel ?? 'Simpan' }}</template>
+    <template #secondary-button-label>{{ formInputerDialog.options?.cancelLabel ?? 'Batal' }}</template>
+  </FormInputerDialog>
+</template>

package/src/layouts/RakorConfirmDialog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import api from '@/api/api';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { LucideCheckCheck } from 'lucide-vue-next';
+import { onMounted, ref } from 'vue';
+
+const konfirmasiTutupRakorOpen = ref(false);
+const konfirmasiData = ref<any>(null);
+const tutupRakorCountdown = ref(0);
+let tutupRakorInterval: any = null;
+
+function konfirmasiTutupRakor() {
+  konfirmasiTutupRakorOpen.value = false;
+  dialogOpenChanged(false);
+  api.post(`jadwal-rakor/${konfirmasiData.value.id}/konfirmasi-tutup-rakor`);
+}
+
+function setIntervalCloseKonfirmasiTutupRakor() {
+  tutupRakorCountdown.value = 30;
+  if (tutupRakorInterval) clearInterval(tutupRakorInterval);
+  setInterval(() => {
+    if (tutupRakorCountdown.value <= 0) {
+      if (tutupRakorInterval) clearInterval(tutupRakorInterval);
+      konfirmasiTutupRakorOpen.value = false;
+      setTimeout(() => {
+        dialogOpenChanged(false);
+      }, 3000);
+      return;
+    }
+    tutupRakorCountdown.value -= 1;
+  }, 1000);
+}
+
+/**
+ * Next change this to get from websocket
+ * when back-end ws ready
+ *
+ */
+function checkKonfirmasiTutupRakor() {
+  if (konfirmasiTutupRakorOpen.value) return;
+  // api.get('/jadwal-rakor/konfirmasi-tutup-rakor').then((r) => {
+  //   konfirmasiTutupRakorOpen.value = true;
+  //   konfirmasiData.value = r.data.data;
+  //   setIntervalCloseKonfirmasiTutupRakor();
+  // }).finally(() => {
+  //   setTimeout(() => {
+  //     checkKonfirmasiTutupRakor();
+  //   }, 3000);
+  // })
+}
+
+function dialogOpenChanged(b: boolean) {
+  if (b) return;
+  setTimeout(() => {
+    checkKonfirmasiTutupRakor();
+  }, 5000);
+}
+
+onMounted(() => {
+  // checkKonfirmasiTutupRakor();
+})
+</script>
+
+<template>
+  <Dialog v-model:open="konfirmasiTutupRakorOpen" v-on:update:open="dialogOpenChanged">
+    <DialogContent class="max-w-[520px] w-full">
+      <DialogHeader>
+        <DialogTitle>Rakor <b>{{ konfirmasiData.jadwalRakor.judul }}</b> Telah Ditutup</DialogTitle>
+        <DialogDescription class="mt-2">
+          Rakor 1 telah ditutup oleh
+          <b>{{ konfirmasiData.jadwalRakor && konfirmasiData.jadwalRakor.rakorDitutupOleh
+            ? konfirmasiData.jadwalRakor.rakorDitutupOleh.name : '' }}</b>
+          dari <b>{{ konfirmasiData.jadwalRakor && konfirmasiData.jadwalRakor.rakorDitutupOleh
+            && konfirmasiData.jadwalRakor.rakorDitutupOleh.organization
+            ? konfirmasiData.jadwalRakor.rakorDitutupOleh.organization.name : '' }}</b>,
+          silahkan konfrimasi penutupan Rakor dengan klik tombol Konfirmasi di bawah.
+          <br /><br />
+          Notulen rakor akan dikirimkan melalui email setelah semua peserta melakukan konfirmasi.
+          <br /><br />
+          Akan otomatis terkonfirmasi jika tidak ada konfirmasi selama 30 detik.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="text-sm">
+        <div class="flex items-center pt-4 -mb-1">
+          <div class="ml-auto pr-5" v-if="tutupRakorCountdown">{{ tutupRakorCountdown }}</div>
+          <button class="bg-green-500 text-white hover:bg-green-600 transition px-4 py-2 rounded-md font-medium text-base min-w-[120px] flex items-center"
+            v-on:click="konfirmasiTutupRakor">
+            <LucideCheckCheck class="mr-2"/>
+            Konfirmasi
+          </button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/layouts/SettingsLayout.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import { ref, onMounted, onBeforeMount, watch } from "vue";
+import { useRoute } from "vue-router";
+
+interface Menu {
+  id: string;
+  name: string;
+  uri?: string;
+  icon?: string;
+  iconSize?: number;
+  iconType?: "svg" | "lucide";
+  hasData?: boolean;
+  connectApi?: boolean;
+  finished?: boolean;
+  submenu?: Menu[];
+}
+
+const menu: Menu[] = [
+  {
+    id: "personal",
+    name: "Personal Settings",
+    submenu: [
+      {
+        id: "profile",
+        name: "Profile Settings",
+        icon: "CircleUser",
+        uri: "/settings/profile"
+      },
+      {
+        id: "account",
+        name: "Account Settings",
+        icon: "UserCog",
+        uri: "/settings/account"
+      },
+      {
+        id: "device",
+        name: "Devices",
+        icon: "Smartphone",
+        uri: "/settings/device"
+      }
+    ]
+  },
+  {
+    id: "security",
+    name: "Security",
+    submenu: [
+      {
+        id: "logs",
+        name: "Audit Logs",
+        icon: "ScrollText",
+        uri: "/settings/audit-logs"
+      }
+      // {
+      //   name: 'API Access',
+      //   icon: 'FileKey2',
+      // },
+    ]
+  }
+];
+
+const route = useRoute();
+
+const menuOpen = ref("");
+
+watch(route, to => {
+  findMenuOpen(to.path);
+});
+
+function findMenuOpen(path: string) {
+  searhMenu: for (const item of menu) {
+    if (!item.submenu) continue;
+    for (const sub of item.submenu) {
+      if (sub.uri === path) {
+        menuOpen.value = sub.id;
+        break searhMenu;
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  findMenuOpen(route.path);
+});
+</script>
+
+<template>
+  <section class="dark:bg-dark_bg3 fixed bottom-0 left-20 top-14 z-9 w-80 border-r bg-white">
+    <ScrollArea class="h-full px-2 pb-5">
+      <div v-for="(item, i) in menu" :key="i" class="pt-5">
+        <div class="my-1 flex items-center px-3 text-[13px] font-semibold uppercase text-gray-400">
+          {{ item.name }}
+        </div>
+        <div v-for="(sub, i) in item.submenu" :key="i">
+          <RouterLink
+            :to="sub.uri || '#'"
+            class="hover:bg-dasi_hover hover:text-dasi_primary relative my-2 block rounded-md py-2.5 pl-11 pr-4 text-sm font-[500]"
+            :class="{ '!bg-dasi_primary !text-white': menuOpen && menuOpen === sub.id }">
+            <div class="absolute left-3 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center">
+              <div v-html="sub.icon" v-if="sub.iconType === 'svg'"></div>
+              <LucideIcon :name="sub.icon" :size="sub.iconSize || 19" :strokeWidth="1.4"></LucideIcon>
+            </div>
+            {{ sub.name }}
+          </RouterLink>
+        </div>
+      </div>
+    </ScrollArea>
+  </section>
+  <section class="pl-80">
+    <div class="p-5 text-sm">
+      <RouterView />
+    </div>
+  </section>
+</template>

package/src/lib/constants.ts

@@ -0,0 +1,2 @@
+export const InternalServerError = 'Internal server error, mohon coba beberapa saat lagi';
+export const DibutuhkanPerbaikanLabel = '<p class="text-red-500 font-medium text-[12px]">Dibutuhkan perbaikan</p>';

package/src/lib/detail.utils.ts

@@ -0,0 +1,213 @@
+import type { DasiV2FormSchema } from "@/types/form.types";
+
+/**
+ * Generic schema mapping utility
+ * Maps data from API response to form schema defaults
+ */
+export async function schemaMaping(schema: DasiV2FormSchema, items: any) {
+  // Process each field in schema
+  for (const [key, item] of Object.entries(schema)) {
+    processSchemaField(key, item, items);
+  }
+}
+
+function processSchemaField(key: string, item: any, items: any) {
+  // Generate search key variations (removes Id, Ids, Code suffixes)
+  const searchKey = generateSearchKey(key);
+
+  // Try direct mapping from main data
+  setDirectMapping(key, searchKey, item, items);
+
+  // Fallback: try mapping from parent object if present
+  // Generic pattern: look for parent[searchKey] or parent[key]
+  const parentKeys = ['parent', 'parentData', 'related'];
+  for (const parentKey of parentKeys) {
+    if ((item.default === undefined || item.default === null || item.default === "") && items?.[parentKey]) {
+      const parent = items[parentKey];
+      // Direct key mapping
+      if (parent[searchKey] !== undefined && parent[searchKey] !== null) {
+        item.default = parent[searchKey];
+        break;
+      } else if (parent[key] !== undefined && parent[key] !== null) {
+        item.default = parent[key];
+        break;
+      } else {
+        // Selector/organization style keys
+        if (["dasi_v2_selector_single", "dasi_v2_config_data_selector", "dasi_v2_organization"].includes(item.type)) {
+          const theKey = key.endsWith("Id")
+            ? key.substring(0, key.length - 2)
+            : key.endsWith("Code") && key !== "unitCode"
+              ? key.substring(0, key.length - 4)
+              : key.endsWith("Ids")
+                ? key.substring(0, key.length - 3)
+                : key;
+          if (parent[theKey] !== undefined && parent[theKey] !== null) {
+            item.default = parent[theKey];
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  // Fallback: try mapping from array of related items (first item)
+  const relatedArrayKeys = ['relatedItems', 'items', 'children'];
+  for (const arrayKey of relatedArrayKeys) {
+    if ((item.default === undefined || item.default === null || item.default === "") && Array.isArray(items?.[arrayKey]) && items[arrayKey].length > 0) {
+      const firstItem = items[arrayKey][0];
+      // Try direct key mapping
+      if (firstItem[searchKey] !== undefined && firstItem[searchKey] !== null) {
+        item.default = firstItem[searchKey];
+        break;
+      } else if (firstItem[key] !== undefined && firstItem[key] !== null) {
+        item.default = firstItem[key];
+        break;
+      }
+    }
+  }
+
+  // Handle organization mapping
+  if (key === "organizationId" && items.organization) {
+    item.default = items.organization;
+  }
+
+  // Handle accessLevelId mapping
+  if (key === "accessLevelId") {
+    item.default = items.accessLevel || null;
+  }
+
+  // Handle Selector types
+  if (["dasi_v2_selector_single", "dasi_v2_config_data_selector", "dasi_v2_organization", "file"].includes(item.type)) {
+    const theKey =
+      key.substring(key.length - 2, key.length) === "Id"
+        ? key.substring(0, key.length - 2)
+        : key.substring(key.length - 4, key.length) === "Code" && key !== "unitCode"
+          ? key.substring(0, key.length - 4)
+          : key.substring(key.length - 3, key.length) === "Ids"
+            ? key.substring(0, key.length - 3)
+            : key;
+
+    item.default = items[theKey] || null;
+  }
+
+  // Handle file type
+  if (item.type === "file") {
+    const theKey = key.endsWith("Id") ? key.substring(0, key.length - 2) : key;
+    item.default = items[theKey] || null;
+  }
+
+  // Handle date range mapping
+  if (key.endsWith("Range") && item.type === "dasi_v2_date_range") {
+    // For date range fields, virtual fields will be handled separately
+    // The template will look for {key}Awal and {key}Akhir fields
+  }
+
+  // Fallback for createdAt
+  if (key === "createdAt" && !item.default && items.createdAt) {
+    item.default = items.createdAt;
+  }
+}
+
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((current, key) => {
+    if (current === null || current === undefined) {
+      return null;
+    }
+
+    // Handle array notation like "items.0.field"
+    if (!isNaN(Number(key))) {
+      const index = Number(key);
+      return Array.isArray(current) && current[index] ? current[index] : null;
+    }
+
+    return current[key];
+  }, obj);
+}
+
+function generateSearchKey(key: string): string {
+  const suffixes = [
+    { suffix: "Id", length: 2 },
+    { suffix: "Ids", length: 3 },
+    { suffix: "Code", length: 4 }
+  ];
+
+  for (const { suffix, length } of suffixes) {
+    if (key.endsWith(suffix) && key !== "unitCode") {
+      return key.substring(0, key.length - length);
+    }
+  }
+
+  return key;
+}
+
+function setDirectMapping(key: string, searchKey: string, item: any, items: any) {
+  for (const [itemKey, value] of Object.entries(items)) {
+    if (searchKey === itemKey || key === itemKey) {
+      // Don't override if value is null/undefined for organization fields
+      if ((value === null || value === undefined) && key.endsWith("Id")) {
+        break;
+      }
+      item.default = value;
+      break;
+    }
+  }
+}
+
+/**
+ * Add virtual fields for date range types to support template rendering
+ */
+function addVirtualDateRangeFields(schema: DasiV2FormSchema, items: any) {
+  // Find all date range fields
+  for (const [key, item] of Object.entries(schema)) {
+    if (item.type === "dasi_v2_date_range") {
+      // Add virtual Start field
+      const startKey = `${key}Start`;
+      if (!schema[startKey] && items[startKey]) {
+        schema[startKey] = {
+          type: "hidden",
+          default: items[startKey],
+          showInDetail: false
+        };
+      }
+
+      // Add virtual End field
+      const endKey = `${key}End`;
+      if (!schema[endKey] && items[endKey]) {
+        schema[endKey] = {
+          type: "hidden",
+          default: items[endKey],
+          showInDetail: false
+        };
+      }
+
+      // Also try Awal/Akhir pattern as fallback (Indonesian naming)
+      const awalKey = `${key}Awal`;
+      if (!schema[awalKey] && items[awalKey]) {
+        schema[awalKey] = {
+          type: "hidden",
+          default: items[awalKey],
+          showInDetail: false
+        };
+      }
+
+      const akhirKey = `${key}Akhir`;
+      if (!schema[akhirKey] && items[akhirKey]) {
+        schema[akhirKey] = {
+          type: "hidden",
+          default: items[akhirKey],
+          showInDetail: false
+        };
+      }
+
+      // Also try Mulai pattern as fallback
+      const mulaiKey = `${key}Mulai`;
+      if (!schema[mulaiKey] && items[mulaiKey]) {
+        schema[mulaiKey] = {
+          type: "hidden",
+          default: items[mulaiKey],
+          showInDetail: false
+        };
+      }
+    }
+  }
+}