@dasidev/dasi-ui 1.0.0

package/src/types/form.types.ts

@@ -0,0 +1,348 @@
+import type { VueformSchema, Vueform } from "@vueform/vueform";
+
+interface FormSchemaMask {
+  mask: "number" | "string";
+  thousandsSeparator?: "," | "." | "";
+  radix?: "." | ",";
+  mapToRadix?: [".", ","] | [",", "."];
+  scale?: number;
+  min?: number;
+  max?: number;
+}
+
+interface FormSchemaAddons {
+  before?: string;
+  after?: string;
+}
+
+interface FormSchemaColumns {
+  container: number;
+}
+
+interface FormSchemaSubSelector {
+  label: string;
+  field: string;
+  fillFrom?: string;
+  fillFromFunc?: (item: any) => void;
+  submitField?: string;
+  autoSelect?: boolean;
+  selectedLabel?: string;
+  selectedLabelFunc?: (selected: any) => void;
+  selectedDesc?: string;
+  selectedDescFunc?: (selected: any) => void;
+}
+
+export interface FormSchemaHooks {
+  /**
+   * This will be called when form dialog/sheet open
+   * and display loading, the form are not rendered yet.
+   * Here you can change the schema to be rendered on form
+   *
+   * @param schema reactive form schema
+   * @param formType add / edit
+   * @param editData only available if edit
+   * @returns
+   * Promise, if return promise false will close the form
+   * if throw error, will display error dialog and close the form
+   *
+   */
+  onBeforeMount?: (schema: FormReactiveSchema, formType: "add" | "edit", editData?: any) => Promise<boolean>;
+
+  /**
+   * TODO:
+   * Please add descriptions about this hook
+   * @deprecated
+   * moved to page related hooks, now use pageDetailHooks on PageConfig
+   *
+   */
+  onMountedDetail?: (schema: DasiV2FormSchema, detailData?: any) => Promise<boolean>;
+
+  /**
+   * This will be called when the detail sheet are rendered,
+   * you can get the element via el$.el$ or change related schema
+   * via schema.value will change the rendered detail sheet
+   *
+   * @param schema reactive form schema, to change schema use schema.value[field_key],
+   * change the schema will change in the rendered the form
+   *
+   * @param formType add / edit
+   * @param editData only available if edit
+   * @returns
+   * Promise, if return promise false will close the form
+   * if throw error, will display error dialog and close the form
+   *
+   */
+  onMounted?: (el$: FormEl, schema: FormReactiveSchema | any, formType: "add" | "edit", editData?: any) => Promise<boolean>;
+
+  /**
+   * This will be called when use click submit before the form submited to api
+   * you change data to be submited to API on form$.data
+   *
+   * @param form$ you change what data to be submited to API by changing variable in form$.data
+   * the $form.data is the data form schema
+   * @returns
+   * Promise, if return promise false will prevent form from submiting
+   * if throw error, will display form error
+   *
+   */
+  onBeforeSubmit?: (form$: FormFromSubmit) => Promise<boolean>;
+
+  /**
+   * This will be called when any of the field in the form was changed
+   *
+   * @param after object form$.data
+   * @param before object form$.data
+   * @param el$ form element, to get field element you can use el$.el$([field_key])
+   * @param schema reactive form schema, to change schema use schema.value[field_key],
+   * change the schema will change in the rendered the form
+   * @param formType add / edit
+   * @returns void
+   *
+   */
+  onChange?: (after: any, before: any, el$: Vueform, schema: FormReactiveSchema | any, formType: "add" | "edit") => void;
+}
+
+export interface FormReactiveSchema {
+  value: DasiV2FormSchema;
+}
+
+export interface FormEl {
+  el$: any;
+}
+
+export interface FormReactiveSchema {
+  value: DasiV2FormSchema;
+}
+
+interface FormFromSubmit {
+  data: any;
+  schema: any;
+}
+
+export type DasiV2FormSchema = Record<string, FormSchemaItem>;
+
+export type FormSchema = {
+  schema: DasiV2FormSchema;
+  hooks?: FormSchemaHooks;
+};
+
+export interface FormSchemaItemItem {
+  value: any;
+  label: string;
+}
+
+export interface FormSchemaItemList {
+  element: FormSchema;
+}
+
+export interface FormSchemaItemListControls {
+  add?: boolean;
+  remove?: boolean;
+  sort?: boolean;
+}
+
+export interface FormSchemaItem {
+  key?: string;
+  type: "text" | "list" | "selector" | "static" | "date_selector" | "config_data_selector" | string;
+  cellType?: string;
+  label?: string;
+  title?: string,
+  cellHeader?: string;
+  text?: string;
+  inputType?: "text" | "number" | string;
+  addText?: string;
+  placeholder?: string;
+  rows?: number;
+  isEmpty?: any;
+  mask?: FormSchemaMask;
+  columns?: FormSchemaColumns | number;
+  rules?: string[];
+  addons?: FormSchemaAddons;
+  subItem?: FormSchemaSubSelector;
+  endpoint?: string;
+  nameField?: string;
+  nameFieldFunc?: (row: any) => string;
+  cellDescripton?: (i: number, item: any) => string | string;
+  cellDataSource?: (i: number, item: any) => any;
+  field?: string;
+  align?: string;
+  descriptionField?: string | ((row: any) => string);
+  descriptionFieldFunc?: (row: any) => string;
+  items?: FormSchemaItemItem[];
+  disabled?: boolean | any;
+  disableAutoLoad?: boolean;
+  sortKey?: string | string[];
+  showField?: boolean;
+  showInDetail?: boolean;
+  showInTable?: boolean;
+  cellRender?: (i: number, row: any) => string | null | undefined;
+  forceNumbers?: boolean;
+  description?: string;
+  drop?: boolean;
+  accept?: string;
+  schema?: DasiV2FormSchema;
+  messages?: any;
+  maxDate?: Date;
+  minDate?: Date;
+  buttonLabel?: string;
+  default?: any;
+  nullValue?: any;
+  parentCode?: string;
+  element?: any;
+  id?: string;
+  textAlign?: "right" | "center" | "right";
+  headAlign?: "right" | "center" | "left";
+  autofill?: boolean;
+  disabledValue?: boolean;
+  forceNumber?: boolean;
+  onKeyup?: (e: any) => void;
+  attrs?: any;
+  allowIncomplete?: boolean;
+  unmask?: boolean;
+  native?: boolean;
+
+  /**
+   * Can be class string or object
+   * please refer to https://vueform.com/recipes/add-custom-css-class-to-an-element
+   *
+   */
+  addClass?: any;
+
+  /**
+   * List
+   *
+   */
+  controls?: FormSchemaItemListControls;
+
+  /**
+   * Static content
+   *
+   */
+  content?: string;
+
+  /**
+   * Organization
+   *
+   */
+  accessLevel?: string;
+
+  /**
+   * For selector multiple
+   *
+   * if in dasi_v2_organizations default to organization
+   *
+   */
+  objectKey?: string;
+
+  /**
+   * Organization selector
+   *
+   */
+
+  /**
+   * Dialog selector
+   *
+   */
+  searchColumns?: string;
+
+  /**
+   * Dynamic Parameters for selectors
+   * Static query parameters to append to endpoint
+   */
+  params?: Record<string, any>;
+
+  /**
+   * Condition parameters for selectors
+   * Formatted as key:value,key2:value2 in query string
+   */
+  condition?: Record<string, any>;
+
+  /**
+   * Order by field for selectors
+   */
+  orderBy?: string;
+
+  /**
+   * Sort direction for selectors
+   */
+  sort?: "asc" | "desc";
+
+  /**
+   * Show avatar in selector
+   */
+  showAvatar?: boolean;
+
+  /**
+   * Return full object instead of just ID
+   */
+  returnObject?: boolean;
+
+  /**
+   * Auto-fill with user organization
+   */
+  autoFillOrg?: boolean;
+
+  /**
+   * Enable multiple selection mode
+   */
+  multiple?: boolean;
+
+  /**
+   * Date picker type
+   * - date: Single date picker
+   * - datetime: Date and time picker
+   * - month: Month picker
+   * - year: Year picker
+   */
+  pickerType?: "date" | "datetime" | "month" | "year";
+
+  /**
+   * Enable range selection for date pickers
+   */
+  range?: boolean;
+
+  /**
+   * Enable time picker for date pickers
+   */
+  enableTimePicker?: boolean;
+
+  /**
+   * Show time picker inline
+   */
+  timePickerInline?: boolean;
+
+  /**
+   * Custom display format for date values
+   */
+  displayFormat?: string;
+
+  /**
+   * Year range for date pickers [min, max]
+   */
+  yearRange?: [number, number];
+
+  /**
+   * Locale for date picker
+   */
+  locale?: string;
+
+  /**
+   * Auto apply date selection
+   */
+  autoApply?: boolean;
+
+  /**
+   * Enable text input for date picker
+   */
+  textInput?: boolean;
+
+  /**
+   * Start date for range pickers
+   */
+  startDate?: Date;
+
+  /**
+   * Special prop for stock real functionality
+   */
+  isStokReal?: boolean;
+}

package/src/types/types.ts

@@ -0,0 +1,7 @@
+export interface TableHeader<T> {
+	key: keyof T;
+	label: string;
+  align?: 'right' | 'left' | 'center';
+}
+
+export type SortOrder = "asc" | "desc";

package/src/utils/config.utils.ts

@@ -0,0 +1,149 @@
+/**
+ * Configuration Utilities
+ * Helper functions for safely accessing configuration values
+ */
+
+import { useAppConfig } from '@/composables/useAppConfig'
+
+/**
+ * Get configuration value with fallback
+ * @param key - Configuration key path (e.g., 'auth.tokenKey')
+ * @param fallback - Fallback value if key not found
+ * @returns Configuration value or fallback
+ */
+export const getConfigValue = (key: string, fallback: any) => {
+  try {
+    const { getConfigValue: getValue } = useAppConfig()
+    return getValue(key) || fallback
+  } catch (error) {
+    console.warn('Failed to get config value:', error);
+    return fallback;
+  }
+};
+
+/**
+ * Default configuration values
+ */
+export const defaultConfigValues = {
+  auth: {
+    tokenKey: 'app.user.token',
+    userKey: 'app.user.name',
+    organizationKey: 'app.user.organization'
+  },
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000/api',
+    timeout: 30000,
+    endpoints: {
+      auth: {
+        login: '/auth/login',
+        logout: '/auth/logout',
+        refresh: '/user/refresh-token',
+        forgotPassword: '/auth/forgotpassword',
+        changePassword: '/auth/changepassword',
+        info: '/auth/info',
+        status: '/auth/status',
+        init: '/auth/login/init',
+        captcha: '/auth/captcha/init'
+      },
+      notifications: {
+        unreadCount: '/notif/unreadCount',
+        list: '/notif/list'
+      },
+      media: {
+        upload: '/media',
+        delete: '/media'
+      }
+    }
+  },
+  branding: {
+    companyName: 'Your Company',
+    logo: '/img/brand/logo.svg',
+    primaryColor: '#3B82F6'
+  },
+  organization: {
+    defaultLevel: 'user'
+  },
+  features: {
+    realTimeNotifications: false
+  }
+};
+
+/**
+ * Get auth configuration values
+ */
+export const getAuthConfig = () => {
+  try {
+    const { authConfig } = useAppConfig()
+    return {
+      tokenKey: authConfig.value.tokenKey,
+      userKey: authConfig.value.userKey,
+      organizationKey: authConfig.value.organizationKey
+    }
+  } catch (error) {
+    console.warn('Failed to get auth config:', error);
+    return defaultConfigValues.auth;
+  }
+};
+
+/**
+ * Get API configuration values
+ */
+export const getApiConfig = () => {
+  try {
+    const { apiBaseUrl, apiEndpoints } = useAppConfig()
+    return {
+      baseUrl: apiBaseUrl.value,
+      timeout: 30000,
+      endpoints: apiEndpoints.value
+    }
+  } catch (error) {
+    console.warn('Failed to get API config:', error);
+    return defaultConfigValues.api;
+  }
+};
+
+/**
+ * Get branding configuration values
+ */
+export const getBrandingConfig = () => {
+  try {
+    const { companyName, logo, primaryColor } = useAppConfig()
+    return {
+      companyName: companyName.value,
+      logo: logo.value,
+      primaryColor: primaryColor.value
+    }
+  } catch (error) {
+    console.warn('Failed to get branding config:', error);
+    return defaultConfigValues.branding;
+  }
+};
+
+/**
+ * Get organization configuration values
+ */
+export const getOrganizationConfig = () => {
+  try {
+    const { organizationLevels, defaultOrgLevel } = useAppConfig()
+    return {
+      levels: organizationLevels.value,
+      defaultLevel: defaultOrgLevel.value
+    }
+  } catch (error) {
+    console.warn('Failed to get organization config:', error);
+    return defaultConfigValues.organization;
+  }
+};
+
+/**
+ * Get features configuration values
+ */
+export const getFeaturesConfig = () => {
+  try {
+    const { enabledFeatures } = useAppConfig()
+    return enabledFeatures.value
+  } catch (error) {
+    console.warn('Failed to get features config:', error);
+    return defaultConfigValues.features;
+  }
+};

package/src/views/NotFound.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import BtnPrimary from '@/components/button/BtnPrimary.vue';
+import { LucideOctagonAlert } from 'lucide-vue-next';
+
+function backToHome() {
+  const defaultApp = localStorage.getItem('app.user.default_app');
+  const nextUri = defaultApp === 'app1' ? '/dashboard' : '/';
+  window.location.href = nextUri;
+}
+</script>
+
+<template>
+  <section class="h-screen flex items-center justify-center bg-red-100">
+    <div class="text-center text-red-500 w-full max-w-[520px] px-5">
+      <LucideOctagonAlert class="mx-auto mb-5" :size="46" :stroke-width="1.3"/>
+      <h4 class="font-semibold text-lg mb-1">
+        Halaman Tidak Ditemukan
+      </h4>
+      <p class="text-sm mb-4">
+        Maaf, halaman tidak tersedia, mungkin anda klik link yang salah atau 
+        halaman yang Anda cari tidak tersedia atau telah dihapus.<br />
+        Mohon periksa kembali url yang Anda masukkan.
+      </p>
+      <BtnPrimary class="rounded-full py-0 h-9"
+        v-on:click="backToHome">
+        Kembali Ke Halaman Depan
+      </BtnPrimary>
+    </div>
+  </section>
+</template>

package/src/views/PageActivity.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import PageActivity from "@/components/pages/PageActivity.vue";
+import { ref } from "vue";
+
+/**
+ * Mode binding
+ *
+ */
+const pageCode = ref<string>('');
+const endpoint = ref<string>('');
+</script>
+
+<template>
+  <PageActivity v-model:endpoint="endpoint" v-model:page-code="pageCode"/>
+</template>

package/src/views/auth/LoginView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import LoginForm from '@/components/forms/auth/LoginForm.vue'
+</script>
+
+<template>
+  <LoginForm />
+</template>

package/src/views/auth/OauthCallback.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import api from '@/api/api';
+import BtnSecondary from '@/components/button/BtnSecondary.vue';
+import LoadingIndicator from '@/components/loadings/LoadingIndicator.vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { nanoid, customAlphabet } from 'nanoid';
+
+const route = useRoute();
+const authError = ref<string | null>(null);
+
+/**
+ * NanoId custom for nonce sso
+ *
+ */
+const nanoIdCustom = customAlphabet('1234567890', 6)
+
+function tryAgain() {
+  /**
+   * Used to prevent CSRF attacks by
+   * ensuring the response matches the initial request
+   *
+   */
+  const state = nanoid(12);
+
+  /**
+   * Used to prevent replay attacks by
+   * ensuring the authentication response is unique and fresh.
+   *
+   */
+  const nonce = nanoIdCustom(6);
+
+  /**
+   * Save one-time only state
+   *
+   */
+  sessionStorage.setItem('oauth_state', state);
+
+  /**
+   * Redirect to oauth login
+   *
+   */
+  window.location.href = `${import.meta.env.VITE_AUTH_AUTHORIZE_URL}?`
+    + `client_id=${import.meta.env.VITE_AUTH_CLIENT_ID}&`
+    + `redirect_uri=${import.meta.env.VITE_AUTH_REDIRECT_URL}&`
+    + `response_type=code&state=${state}&nonce=${nonce}`;
+}
+
+function isValidPath(uri: any) {
+  // Check if the URI is a relative path within your site
+  return typeof uri === "string" && uri.startsWith("/") && !uri.startsWith("//") && uri.length > 1;
+}
+
+onMounted(() => {
+  const { code, state } = route.query;
+
+  /**
+   * Validate nonce and state
+   *
+   */
+  const storedState = sessionStorage.getItem('oauth_state');
+  if (storedState !== state) {
+    authError.value = 'State failed, please try again.';
+    return;
+  }
+
+  /**
+   * Exchange token
+   *
+   */
+  api.post('/auth/exchange', { code }).then((r) => {
+    // Note: These localStorage keys should ideally come from config
+    // For now, using generic keys that can be configured
+    if (r.data.auth_token) localStorage.setItem('app.user.token', r.data.auth_token);
+    localStorage.setItem('app.user.name', r.data.user.name);
+    localStorage.setItem('app.user.default_app', r.data.user.defaultApp);
+    if (r.data.user.organization) localStorage.setItem('app.user.organization', r.data.user.organization.name);
+    const nextUri = r.data.user.defaultApp === 'app1' ? '/dashboard/profile-sentral' : '/apk2/overview';
+    let nextUriFromSession = sessionStorage.getItem('dasi.next');
+    window.location.href = nextUriFromSession && isValidPath(nextUriFromSession) ? nextUriFromSession : nextUri;
+  }).catch((err) => {
+    console.error(err);
+    authError.value = 'Session expired, please try again';
+  });
+})
+</script>
+
+<template>
+  <section>
+    <div class="flex flex-col items-center justify-center space-y-2" v-if="authError">
+      <h1 class="text-2xl font-semibold tracking-tight text-red-500">
+        Login Gagal
+      </h1>
+      <p class="text-sm text-muted-foreground text-red-500">
+        {{ authError }}
+      </p>
+      <BtnSecondary v-on:click="tryAgain">Coba Lagi</BtnSecondary>
+    </div>
+    <LoadingIndicator class="mx-auto scale-90" v-else/>
+  </section>
+</template>

package/src/views/dashboard/index.vue

@@ -0,0 +1,16 @@
+<script setup>
+</script>
+
+<template>
+  <div class="flex flex-col w-full">
+    <!-- header -->
+    <!-- <div class="flex flex-row items-center w-full bg-[#fff] dark:bg-black dark:border-b dark:border-b-gray-900">
+      <h1 class="text-2xl font-semibold text-[#4D5E80] dark:text-slate-200 px-[24px] py-[16px]">Dashboard</h1>
+    </div> -->
+    <!-- main content -->
+    <div className="p-5 pb-0">
+      <div className="grid grid-cols-12 gap-5 min-h-[calc(100vh-110px)] 2xl:min-h-[calc(100vh-136px)]">
+      </div>
+    </div>
+  </div>
+</template>