@dasidev/dasi-ui 1.0.0

package/src/components/forms/auth/PwdScore.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { cn } from '@/lib/utils';
+import { ref } from 'vue';
+import { watch } from 'vue';
+
+const props = defineProps(['class', 'password']);
+const pwdStrength = ref('Very Weak');
+const model = defineModel({ default: 0 });
+const score = ref(0)
+
+watch(() => props.password, (pwd) => {
+  score.value = 0;
+  // Check the length of the password
+  if (pwd.length >= 8) {
+    score.value += 1;
+    if (pwd.length >= 12) score.value += 1;
+    // Check for lowercase letters
+    if (/[a-z]/.test(pwd)) score.value += 1;
+    // Check for uppercase letters
+    if (/[A-Z]/.test(pwd)) score.value += 1;
+    // Check for numbers
+    if (/\d/.test(pwd)) score.value += 1;
+    // Check for special characters
+    if (/[\W_]/.test(pwd)) score.value += 1;
+  }
+
+  // Determine password strength
+  switch (score.value) {
+    case 0:
+    case 1:
+      pwdStrength.value = 'Very Weak';
+      break;
+    case 2:
+      pwdStrength.value = 'Weak';
+      break;
+    case 3:
+    case 4:
+      pwdStrength.value = 'Moderate';
+      break;
+    case 5:
+      pwdStrength.value = 'Strong';
+      break;
+    default:
+      pwdStrength.value = 'Very Strong';
+      break;
+  }
+  model.value = score.value;
+})
+</script>
+
+<template>
+  <main :class="cn('bg-gray-300 rounded-full overflow-hidden', props.class)">
+    <div class="h-1 bg-gray-400 transition-all rounded-full"
+      :class="{'bg-green-500': score > 4,
+      'bg-orange-400': score === 3 || score === 4,
+      'bg-red-500': score < 3}"
+      :style="{width: `${Math.ceil(score / 6 * 100) || 5}%`}"></div>
+  </main>
+  <div class="flex text-[12px] mt-1 leading-tight">
+    <div class="text-gray-500">
+      Password minimal 8 karakter
+    </div>
+    <div class="font-semibold text-gray-500 ml-auto text-[11px]"
+      :class="{'text-green-500': score > 4,
+      'text-orange-400': score === 3 || score === 4,
+      'text-red-500': score < 3}">{{ pwdStrength }}</div>
+  </div>
+</template>

package/src/components/helper/ApiTester.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { LucideLoader2, LucideSend } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+import { ref } from "vue";
+import api from "@/api/api";
+
+const props = defineProps(["class", "secondaryBtnClass", "primaryBtnClass"]);
+const dialogOpen = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const error = ref<string | null>(null);
+const next: any = ref(null);
+const item: any = ref(null);
+const headerStr = ref("");
+const bodyStr = ref("");
+const sendBtnEL: any = ref(null);
+const response: any = ref(null);
+const method = ref("get");
+const respStatus = ref(200);
+
+function open(d: any, n: any) {
+  dialogOpen.value = true;
+  next.value = n;
+  loading.value = false;
+  response.value = null;
+  respStatus.value = 200;
+  error.value = null;
+  item.value = d;
+  method.value = d.method;
+  headerStr.value = d.headers && Object.keys(d.headers).length > 0 ? JSON.stringify(d.headers, null, 2) : "";
+  bodyStr.value = d.requestBodyExample && Object.keys(d.requestBodyExample).length > 0 ? JSON.stringify(d.requestBodyExample, null, 2) : "";
+  setTimeout(() => {
+    if (sendBtnEL.value) sendBtnEL.value.focus();
+  });
+  console.log(d);
+}
+
+function sendRequest() {
+  let apiReq = null;
+  switch (method.value) {
+    case "get":
+      apiReq = api.get(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, { headers: headerStr.value ? JSON.parse(headerStr.value) : {} });
+      break;
+    case "post":
+      apiReq = api.post(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
+        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
+      });
+      break;
+    case "put":
+      apiReq = api.put(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
+        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
+      });
+      break;
+    case "patch":
+      apiReq = api.patch(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
+        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
+      });
+      break;
+    case "delete":
+      apiReq = api.delete(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null);
+      break;
+    default:
+      break;
+  }
+  if (!apiReq) return;
+  loading.value = true;
+  apiReq
+    .then(r => {
+      respStatus.value = 200;
+      response.value = r.data;
+      error.value = null;
+    })
+    .catch(err => {
+      respStatus.value = err.response && err.response.status ? err.response.status : 500;
+      response.value = err.response && err.response.data ? err.response.data : null;
+      error.value = err.message;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function close(b: boolean) {
+  dialogOpen.value = false;
+  if (next.value) next.value(b);
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Dialog v-model:open="dialogOpen">
+    <DialogContent :class="cn('max-w-[640px]', props.class)">
+      <div class="-mx-6 px-6 pb-1.5">
+        <h4 class="m-0 font-semibold">
+          Try API Endpoint
+          <span class="mx-1.5">&bull;</span>
+          {{ item.summary }}
+          {{ item.endpoint.split("/")[1].replace(/-/g, " ") }}
+        </h4>
+      </div>
+      <div class="-mt-3 flex">
+        <select class="flex-none rounded-l-sm border-r-0 border-gray-300" v-model="method">
+          <option value="get">GET</option>
+          <option value="post">POST</option>
+          <option value="put">PUT</option>
+          <option value="patch">PATCH</option>
+          <option value="delete">DELETE</option>
+        </select>
+        <div class="w-full">
+          <input type="text" class="w-full border-gray-300" placeholder="https://..." v-model="item.endpointExample" />
+        </div>
+        <div class="flex-none">
+          <button
+            class="flex h-full items-center rounded-r-sm bg-primary_main px-4 font-medium text-white"
+            :class="{ '!bg-gray-300 !text-gray-400': loading }"
+            v-on:click="sendRequest"
+            ref="sendBtnEL">
+            <LucideLoader2 :size="22" class="-ml-1 mr-2 animate-spin" v-if="loading" />
+            <LucideSend :size="18" class="mr-2" v-else />
+            Send
+          </button>
+        </div>
+      </div>
+      <div class="-mx-6 -mb-4 max-h-[60vh] overflow-auto border-b border-t px-6 pb-5 pt-3">
+        <div class="mb-3">
+          <label class="mb-1 block text-sm font-medium text-gray-500">Header</label>
+          <textarea class="w-full rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" rows="4" placeholder="Header in JSON format..." v-model="headerStr"></textarea>
+        </div>
+
+        <div class="mb-3" v-if="method !== 'get' && method !== 'delete'">
+          <label class="mb-1 block text-sm font-medium text-gray-500">Request Body</label>
+          <textarea class="w-full rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" rows="8" placeholder="Request body in JSON format..." v-model="bodyStr"></textarea>
+        </div>
+
+        <div class="" v-if="response || error">
+          <div class="mb-1 flex items-center">
+            <span class="text-sm font-medium text-gray-500">Response</span>
+            <div class="ml-auto flex-none text-sm font-medium">
+              <span class="text-green-500" v-if="respStatus === 200">200 - OK</span>
+              <span class="text-red-500" v-else>
+                {{ respStatus }}
+                -
+                {{ error?.substring(0, 26) }}{{ String(error).length > 26 ? "..." : "" }}
+              </span>
+            </div>
+          </div>
+          <pre class="w-full overflow-auto rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" :class="{ '!bg-red-700': error }">{{ response }}</pre>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/helper/ChangePwd.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import FormInputerDialog from "@/components/dialog/FormInputerDialog.vue";
+import DialogTrigger from "@/components/ui/dialog/DialogTrigger.vue";
+import PinInputer from "@/components/helper/PinInputer.vue";
+import { Eye, EyeOff } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+import { ref, computed } from "vue";
+import api from "@/api/api";
+import { toast } from "vue-sonner";
+import PwdScore from "@/components/forms/auth/PwdScore.vue";
+
+// Use correct dialog imports (assume alias is @/components/ui/dialog)
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
+
+const props = defineProps<{ class?: string }>();
+const emits = defineEmits(["finish"]);
+
+const formError = ref<null | string>(null);
+const formLoading = ref(false);
+const dialogOpen = ref(false);
+
+// State for password visibility toggles
+const showPwd = ref(false);
+const showPwd1 = ref(false);
+const showPwd2 = ref(false);
+
+// State for password fields and score
+const pwdStr = ref("");
+const pwd1Str = ref("");
+const pwdScore = ref(0);
+const changePwdErr = ref<string | null>(null);
+
+// For loading spinner on submit
+const isLoadingChangePwd = computed(() => formLoading.value);
+
+// Handler for password input
+const pwd1Inputed = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  pwd1Str.value = target.value;
+  changePwdErr.value = null;
+};
+
+const pwdInputed = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  pwdStr.value = target.value;
+  changePwdErr.value = null;
+};
+
+function changePwd(_: FormData, form$: any) {
+  console.log(form$.data)
+  if (form$.data.password !== form$.data.password2) {
+    formError.value = "Ulangi password tidak sama";
+    return;
+  }
+  if (pwdScore.value < 4) {
+    formError.value = "Mohon gunakan password yang lebih sulit untuk ditebak";
+    return;
+  }
+  formError.value = null;
+  formLoading.value = true;
+  api
+    .post("/auth/changepassword", {
+      currentPassword: form$.data.currentPassword,
+      password: form$.data.password
+    })
+    .then(() => {
+      dialogOpen.value = false;
+      toast("Password sukses diubah");
+      emits("finish");
+    })
+    .catch((err: { message: string }) => {
+      formError.value = err.message;
+    })
+    .finally(() => {
+      formLoading.value = false;
+    });
+}
+</script>
+
+<template>
+  <FormInputerDialog @submit="changePwd" v-model:error="formError" v-model:saving="formLoading" v-model:show="dialogOpen">
+    <template #trigger>
+      <DialogTrigger :class="cn('', props.class)">
+        <slot></slot>
+      </DialogTrigger>
+    </template>
+    <template #body>
+      <Vueform :endpoint="changePwd">
+        <TextElement
+          name="currentPassword"
+          :input-type="showPwd ? 'text' : 'password'"
+          label="Kata Sandi saat ini"
+          placeholder="Masukkan kata sandi..."
+          :floating="false"
+          :rules="['required']"
+          @input="pwdInputed"
+          onpaste="return false;">
+          <template #addon-after>
+            <EyeOff :size="22" v-if="showPwd" class="cursor-pointer text-slate-400" @click="showPwd = false" />
+            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd = true" />
+          </template>
+        </TextElement>
+        <TextElement
+          name="password"
+          :input-type="showPwd1 ? 'text' : 'password'"
+          label="Kata Sandi Baru"
+          placeholder="Masukkan kata sandi..."
+          :floating="false"
+          :rules="['required']"
+          @input="pwd1Inputed"
+          onpaste="return false;">
+          <template #addon-after>
+            <EyeOff :size="22" v-if="showPwd1" class="cursor-pointer text-slate-400" @click="showPwd1 = false" />
+            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd1 = true" />
+          </template>
+        </TextElement>
+        <div class="col-span-12 -mt-2.5 mb-4 px-1">
+          <PwdScore v-model="pwdScore" :password="pwd1Str" />
+        </div>
+        <TextElement
+          name="password2"
+          :input-type="showPwd2 ? 'text' : 'password'"
+          label="Ulangi Kata Sandi"
+          placeholder="Masukkan kata sandi..."
+          :floating="false"
+          :rules="['required']"
+          @input="changePwdErr = null"
+          onpaste="return false;">
+          <template #addon-after>
+            <EyeOff :size="22" v-if="showPwd2" class="cursor-pointer text-slate-400" @click="showPwd2 = false" />
+            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd2 = true" />
+          </template>
+        </TextElement>
+        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-if="isLoadingChangePwd">
+          <div class="bottom-0 left-0 right-0 top-0 bg-gray-300">
+            <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+            </svg>
+          </div>
+        </div>
+        <ButtonElement size="lg" name="submit" button-class="mt-1 font-medium h-12 text-md" button-label="Tetapkan Kata Sandi" :submits="true" :full="true" v-else />
+      </Vueform>
+    </template>
+    <template #header>
+      <DialogTitle>Ganti Password</DialogTitle>
+      <DialogDescription class="text-sm">Masukkan password lama dan password baru Anda di bawah ini</DialogDescription>
+    </template>
+  </FormInputerDialog>
+</template>

package/src/components/helper/CheckboxElement.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { LucideCheck, LucideMinus } from 'lucide-vue-next';
+import { onMounted, watch } from 'vue';
+
+const model = defineModel();
+const emits = defineEmits(['change']);
+const props = defineProps(['checked', 'disabled', 'class', 'ignoreModel', 'indeterminate']);
+
+function toggleCheckbox() {
+  if (props.disabled) return;
+  if (!props.ignoreModel) model.value = !model.value;
+  emits('change', model.value);
+}
+
+watch(() => props.checked, (checked) => {
+  if (props.ignoreModel) return;
+  model.value = checked;
+})
+
+onMounted(() => {
+  if (props.checked && !props.ignoreModel) model.value = props.checked;
+})
+</script>
+
+<template>
+  <div class="size-8 hover:bg-blue-100 rounded-full flex items-center justify-center cursor-pointer -my-[5px] -mx-1.5 group"
+    :class="{'!cursor-default hover:bg-transparent': props.disabled}"
+    v-on:click="toggleCheckbox">
+    <div :class="[
+        cn('size-[18px] border-2 border-gray-400 rounded-sm flex items-center justify-center text-transparent group-hover:border-blue-500 transition', props.class),
+        {
+        '!border-blue-500 bg-blue-500 !text-white': (model || props.checked || props.indeterminate) && !props.disabled,
+        'bg-gray-100 !border-gray-100': props.disabled,
+        '!text-gray-300': (model || props.checked) && props.disabled,
+        '!text-transparent': !model && !props.checked && props.disabled,
+        },
+      ]">
+      <LucideCheck :stroke-width="3" v-if="model || props.checked"/>
+      <LucideMinus :stroke-width="3" v-else-if="props.indeterminate"/>
+    </div>
+  </div>
+</template>

package/src/components/helper/ConfigSwitcher.vue

@@ -0,0 +1,54 @@
+<template>
+  <div v-if="isConfigLoaded" class="fixed bottom-4 right-4 z-50">
+    <div class="rounded-lg border bg-white p-4 shadow-lg dark:bg-gray-800">
+      <h3 class="mb-2 text-sm font-semibold">Configuration Test</h3>
+      <div class="space-y-2 text-xs">
+        <div><strong>App:</strong> {{ appName }}</div>
+        <div><strong>Company:</strong> {{ companyName }}</div>
+        <div>
+          <strong>Color:</strong>
+          <span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: primaryColor }"></span>
+          {{ primaryColor }}
+        </div>
+        <div><strong>API:</strong> {{ apiBaseUrl }}</div>
+        <div><strong>Token Key:</strong> {{ tokenKey }}</div>
+        <div><strong>Org Levels:</strong> {{ organizationLevels.join(", ") }}</div>
+      </div>
+      <div class="mt-3 space-x-2">
+        <button @click="switchToConfig('myApp')" class="rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600">My App</button>
+        <button @click="switchToConfig('generic')" class="rounded bg-purple-500 px-2 py-1 text-xs text-white hover:bg-purple-600">Generic</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppConfig } from "@/composables/useAppConfig";
+import { myAppConfig } from "@/config/my-app.config";
+import { genericConfig } from "@/config/examples/generic.config";
+
+const { appName, companyName, primaryColor, apiBaseUrl, tokenKey, organizationLevels, isConfigLoaded, initializeConfig } = useAppConfig();
+
+const switchToConfig = async (configName: string) => {
+  console.log(`🔄 Switching to ${configName} configuration...`);
+
+  let config;
+  switch (configName) {
+    case "myApp":
+      config = myAppConfig;
+      break;
+    case "generic":
+      config = genericConfig;
+      break;
+    default:
+      return;
+  }
+
+  try {
+    await initializeConfig(config);
+    console.log(`✅ Switched to ${configName} configuration`);
+  } catch (error) {
+    console.error(`❌ Failed to switch to ${configName} configuration:`, error);
+  }
+};
+</script>

package/src/components/helper/Copyright.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useAppConfig } from '@/composables/useAppConfig'
+
+const { companyName, appVersion } = useAppConfig()
+</script>
+
+<template>
+    &copy; Copyright {{ new Date().getFullYear() }} {{ companyName }}
+    &bull; Version {{ appVersion }}
+</template>

package/src/components/helper/ErrorScreen.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  errorMessage: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  retry: [];
+}>();
+
+function handleRetry() {
+  emit('retry');
+}
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 bg-white dark:bg-dark_bg flex items-center justify-center">
+    <div class="text-center max-w-md mx-auto px-6">
+      <div class="mb-8">
+        <div class="w-16 h-16 mx-auto mb-4 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center">
+          <svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+          </svg>
+        </div>
+        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-2">Koneksi Gagal</h2>
+        <p class="text-gray-600 dark:text-gray-300 mb-6">{{ errorMessage }}</p>
+        <button
+          @click="handleRetry"
+          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors duration-200"
+        >
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          Muat Ulang
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/helper/LucideIcon.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { computed } from 'vue';
+import * as icons from "lucide-vue-next";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  size: Number,
+  color: String,
+  strokeWidth: Number,
+  defaultClass: String,
+})
+
+const icon = computed(() => icons[props.name]);
+</script>
+
+<template>
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth"
+    :default-class="defaultClass"
+  />
+</template>

package/src/components/helper/PdfViewer.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import * as pdfjsLib from 'pdfjs-dist';
+import { nanoid } from 'nanoid';
+
+const props = defineProps(['url', 'index', 'scale', 'zoomType']);
+const pages = ref<any[]>([]);
+let pdfDoc: any;
+let canvas: any;
+
+async function renderPages() {
+  if (!pdfDoc) return;
+  console.log('render page with zoom', props.zoomType);
+  for (let i = 1; i <= pdfDoc.numPages; i++) {
+    pdfDoc.getPage(i).then(function(page: any) {
+      let scale = 1;
+      switch (props.zoomType) {
+        case 'page-width':
+          scale = getPageWidthScale();
+          break;
+        case 'page-fit':
+          scale = getPageFitScale();
+          break;
+        default:
+          scale = props.scale ? Number(props.scale) : 1;
+          break;
+      }
+
+      const viewport = page.getViewport({ scale });
+      const canvasElement = document.getElementById(`page-${props.index}-${i}`) as HTMLCanvasElement;
+      const context = canvasElement.getContext('2d');
+
+      // Set canvas dimensions based on the viewport and device pixel ratio
+      const devicePixelRatio = window.devicePixelRatio || 1;
+      canvasElement.width = viewport.width * devicePixelRatio;
+      canvasElement.height = viewport.height * devicePixelRatio;
+      canvasElement.style.width = `${viewport.width}px`;
+      canvasElement.style.height = `${viewport.height}px`;
+
+      // Scale the context to ensure correct drawing
+      context?.scale(devicePixelRatio, devicePixelRatio);
+
+      // Render PDF page into canvas context
+      var renderContext = {
+        canvasContext: context,
+        viewport: viewport
+      };
+      var renderTask = page.render(renderContext);
+      renderTask.promise.then(function () {
+        console.log('Page rendered');
+      });
+    });
+  }
+}
+
+// Function to calculate scale for page width
+function getPageWidthScale() {
+  let containerWidth = document.getElementById('pdf-viewer-container')?.clientWidth;
+  return containerWidth || 0 / canvas?.width || 0;
+}
+
+// Function to calculate scale for page fit
+function getPageFitScale() {
+  let containerWidth = document.getElementById('pdf-viewer-container')?.clientWidth;
+  let containerHeight = document.getElementById('pdf-viewer-container')?.clientHeight;
+  return Math.min(containerWidth || 0 / canvas.width, containerHeight || 0 / canvas.height);
+}
+
+watch(() => props.scale, () => {
+  renderPages();
+})
+
+watch(() => props.zoomType, () => {
+  renderPages();
+})
+
+
+onMounted(async () => {
+  // Set the worker path
+  pdfjsLib.GlobalWorkerOptions.workerSrc = '/scripts/pdf.worker.min.js';
+
+  // Load the PDF document
+  pdfjsLib.getDocument({
+    // url: `${props.url}?v=${nanoid()}`,
+    url: props.url,
+    withCredentials: true,
+  }).promise.then((pdf) => {
+    for (let i = 1; i <= pdf.numPages; i++) {
+      pages.value.push(i);
+    }
+    pdfDoc = pdf;
+    renderPages();
+  });
+})
+</script>
+
+<template>
+  <div class="space-y-4" :id="`pdf-${index}-container`">
+    <div class="rounded-md shadow-sm overflow-hidden" v-for="page in pages">
+      <canvas :key="page" :id="`page-${index}-${page}`"></canvas>
+    </div>
+  </div>
+</template>