@dasidev/dasi-ui 1.0.0

package/src/components/helper/PinInputer.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { client } from "@passwordless-id/webauthn";
+import { LucideRectangleEllipsis, LucideCircleSlash } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+import { ref } from "vue";
+import { PinInput, PinInputGroup, PinInputInput } from "@/components/ui/pin-input";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.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 pin = ref<string[]>([]);
+const next: any = ref(null);
+const pinInitialized = ref(true);
+const initError = ref(false);
+const biometricEnabled = ref(false);
+
+function open(n: any) {
+  dialogOpen.value = true;
+  error.value = null;
+  pin.value = [];
+  next.value = n;
+  pinInitialized.value = false;
+  biometricEnabled.value = false;
+  loading.value = true;
+  initError.value = false;
+  initAuthentication();
+}
+
+function initAuthentication() {
+  loading.value = true;
+  initError.value = false;
+  api
+    .get("/auth/authenticationMethods")
+    .then(async r => {
+      pinInitialized.value = r.data.pinInitialized;
+      biometricEnabled.value = r.data.biometricEnabled;
+      if (biometricEnabled.value) {
+        /**
+         * Try authenticate with biometric
+         *
+         */
+        try {
+          const options = r.data.biometricOptions;
+          const authentication = await client.authenticate(
+            options.publicKey.allowCredentials.map((row: any) => row.id),
+            options.publicKey.challenge,
+            {
+              authenticatorType: "auto",
+              userVerification: "required",
+              timeout: 60000
+            }
+          );
+          const formData = {
+            id: authentication.credentialId,
+            rawId: authentication.credentialId,
+            response: {
+              authenticatorData: authentication.authenticatorData,
+              clientDataJSON: authentication.clientData,
+              signature: authentication.signature
+            },
+            type: "public-key",
+            clientExtensionResults: {},
+            authenticatorAttachment: "platform"
+          };
+          api
+            .post("/auth/verifyBiometric", formData)
+            .then(ar => {
+              /**
+               * Biometric authentication success
+               *
+               */
+              close(true);
+            })
+            .catch(err => {
+              /**
+               * Failed biometric,
+               * try with pin
+               *
+               */
+              loading.value = false;
+            });
+        } catch (err) {
+          /**
+           * Failed biometric,
+           * try with pin
+           *
+           */
+          console.error(err);
+          loading.value = false;
+        }
+        return;
+      }
+      loading.value = false;
+      if (pinInitialized.value) setFocus("first");
+    })
+    .catch(err => {
+      console.error(err);
+      loading.value = false;
+      initError.value = true;
+    });
+}
+
+function setFocus(type: string) {
+  setTimeout(() => {
+    const pinInputsEl: any = document.getElementsByClassName("relative text-center focus:outline-none w-full text-xl");
+    if (pinInputsEl.length > 0 && pinInputsEl[0]) {
+      if (type === "first") pinInputsEl[0].focus();
+      else pinInputsEl[pinInputsEl.length - 1].focus();
+    }
+  });
+}
+
+function verifyPin() {
+  const pinStr = pin.value.join("");
+  loading.value = true;
+  api
+    .post("/auth/verifyPin", {
+      pin: pinStr
+    })
+    .then(r => {
+      close(true);
+    })
+    .catch(err => {
+      error.value = "PIN yang Anda masukkan salah, silahkan coba lagi";
+      loading.value = false;
+      setFocus("last");
+    });
+}
+
+function pinChanged() {
+  error.value = null;
+}
+
+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-[425px]', props.class), { 'bg-red-100 text-red-500': initError }]">
+      <div class="flex items-center justify-center py-4" v-if="loading">
+        <LoadingIndicator class="scale-75" />
+      </div>
+      <div class="text-center" v-else-if="initError">
+        <div class="relative inline-block">
+          <LucideCircleSlash class="mb-2 mt-2" :size="38" :stroke-width="1.5" />
+        </div>
+        <h4 class="mb-1 font-semibold">Koneksi Gagal</h4>
+        <p class="mb-3 text-sm">Tidak dapat menghubungkan ke server, periksa kembali koneksi internet Anda.</p>
+        <button
+          class="inline-block rounded-md border-2 border-transparent bg-transparent px-6 py-2 font-medium text-primary_main shadow-none transition hover:border-primary_main hover:bg-blue-50"
+          v-on:click="initAuthentication">
+          Coba Lagi
+        </button>
+      </div>
+      <div class="text-center" v-else-if="!pinInitialized">
+        <div class="relative inline-block">
+          <LucideRectangleEllipsis class="mb-4 mt-1" :size="56" :stroke-width="1" />
+          <div class="absolute top-7 h-1 w-full -rotate-45 bg-white"></div>
+          <div class="absolute top-8 h-[2px] w-full -rotate-45 bg-text_main"></div>
+        </div>
+        <h4 class="mb-1 font-semibold">PIN Belum Ditetapkan</h4>
+        <p class="mb-3 text-sm text-gray-500">Silahkan tetapkan PIN pada menu pengaturan untuk melakukan transaksi data.</p>
+        <a
+          href="/settings/account"
+          target="_blank"
+          v-on:click="close(false)"
+          class="inline-block rounded-md border-2 border-transparent bg-transparent px-6 py-2 font-medium text-primary_main shadow-none transition hover:border-primary_main hover:bg-blue-50"
+          >Tetapkan Pin</a
+        >
+      </div>
+      <template v-else>
+        <DialogHeader>
+          <DialogTitle class="mb-0 text-xl leading-tight"> DASI PIN </DialogTitle>
+          <DialogDescription class="mt-0 text-[16px] leading-tight">
+            <slot name="description"> Masukkan PIN untuk melakukan aksi ini </slot>
+          </DialogDescription>
+        </DialogHeader>
+        <div class="flex h-[78px] items-center justify-center" v-if="loading">
+          <LoadingIndicator class="scale-75" />
+        </div>
+        <div class="-mx-6 px-6 py-3" v-else>
+          <PinInput id="otp-input" v-model="pin" placeholder="○" @complete="verifyPin" :mask="true" v-on:update:model-value="pinChanged">
+            <PinInputGroup class="gap-2">
+              <template v-for="(_, index) in 6" :key="id">
+                <PinInputInput class="w-full rounded-md border py-3 text-xl" :class="{ 'border-red-400 bg-red-50 text-red-500': error }" :index="index" />
+              </template>
+            </PinInputGroup>
+          </PinInput>
+          <div class="pt-2 text-sm text-red-500" v-if="error">
+            {{ error }}
+          </div>
+        </div>
+      </template>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/helper/PrivacyPolicy.vue

@@ -0,0 +1,122 @@
+<script setup></script>
+
+<template>
+  <article>
+    <p>Effective Date: 27 Dec 2024</p>
+    <h3>1. Pendahuluan</h3>
+    <p>
+      Selamat datang di aplikasi BIOMASSA! Syarat dan Ketentuan ini ("Syarat") mengatur penggunaan aplikasi, situs web, dan layanan kami (secara kolektif disebut "Layanan"). Dengan mengakses atau menggunakan Layanan, Anda setuju untuk mematuhi Syarat ini. Jika Anda tidak setuju, harap jangan gunakan Layanan.
+    </p>
+    <h3>2. Penggunaan Layanan</h3>
+    <b>Kelayakan</b>
+    <p>
+      Anda harus berusia minimal 17 tahun untuk menggunakan Layanan. Dengan menggunakan Layanan, Anda menyatakan bahwa Anda memenuhi persyaratan ini.
+    </p>
+    <b>Tanggung Jawab Pengguna</b>
+    <ul>
+      <li>Memberikan informasi yang akurat dan terkini saat pendaftaran.</li>
+      <li>Menjaga kerahasiaan kredensial akun Anda.</li>
+      <li>Menggunakan Layanan hanya untuk tujuan yang sah dan sesuai dengan hukum yang berlaku.</li>
+    </ul>
+    <h3>
+      3. Konten yang Dihasilkan Pengguna
+    </h3>
+    <p>
+      Anda dapat mengunggah, mengirim, atau membagikan konten melalui Layanan ("Konten Pengguna"). Dengan melakukannya, Anda memberikan kami lisensi non-eksklusif, bebas royalti, dan berlaku di seluruh dunia untuk menggunakan, menampilkan, dan mendistribusikan Konten Pengguna Anda sebagaimana diperlukan untuk mengoperasikan Layanan. Anda bertanggung jawab penuh atas Konten Pengguna Anda dan kepatuhannya terhadap hukum.
+    </p>
+    <h3>4. Aktivitas yang Dilarang</h3>
+    <p>Anda setuju untuk tidak:</p>
+    <ul>
+      <li>Menggunakan Layanan untuk tujuan ilegal atau tidak sah.</li>
+      <li>Memposting atau membagikan konten yang bersifat kasar, fitnah, cabul, atau melanggar hak kekayaan intelektual.</li>
+      <li>Mengganggu atau merusak Layanan atau server.</li>
+    </ul>
+    <h3>5. KEBIJAKAN PRIVASI</h3>
+    <p>
+      Kami menghargai privasi Anda dan berkomitmen untuk melindungi data pribadi Anda. Kebijakan ini menjelaskan bagaimana kami mengumpulkan, menggunakan, menyimpan, dan melindungi informasi pribadi Anda sesuai dengan peraturan perundang-undangan yang berlaku.
+    </p>
+    <h4>1. Data Pribadi yang Dikumpulkan</h4>
+    <p>Kami dapat mengumpulkan informasi pribadi berikut:</p>
+    <ul>
+      <li><b>Nama Lengkap:</b> Untuk keperluan identifikasi.</li>
+      <li><b>Alamat:</b> Untuk pengiriman dokumen atau verifikasi lokasi.</li>
+      <li><b>Email:</b> Untuk komunikasi terkait layanan kami.</li>
+      <li><b>Nomor Telepon:</b> Untuk keperluan komunikasi cepat dan darurat.</li>
+      <li><b>NIK (Nomor Induk Kependudukan):</b> Untuk keperluan identifikasi unik sesuai regulasi.</li>
+      <li><b>NPWP (Nomor Pokok Wajib Pajak):</b> Untuk keperluan administratif dan perpajakan.</li>
+    </ul>
+    <h4>2. Tujuan Penggunaan Data</h4>
+    <p>Data pribadi Anda digunakan untuk:</p>
+    <ul>
+      <li>Memberikan akses ke layanan kami.</li>
+      <li>Memenuhi kewajiban hukum dan administratif.</li>
+      <li>Menghubungi Anda untuk keperluan penting terkait layanan.</li>
+      <li>Memproses transaksi atau pengajuan yang Anda ajukan.</li>
+    </ul>
+    <h4>3. Perlindungan Data</h4>
+    <p>
+      Kami mengambil langkah-langkah teknis, administratif, dan fisik untuk melindungi data pribadi Anda dari akses yang tidak sah, penggunaan yang tidak sah, atau pengungkapan yang tidak sah.
+    </p>
+    <h4>4. Penyimpanan Data</h4>
+    <p>
+      Data Anda akan disimpan selama diperlukan untuk memenuhi tujuan pengumpulan atau selama diwajibkan oleh hukum yang berlaku.
+    </p>
+    <h4>5. Hak Anda</h4>
+    <p>Anda memiliki hak berikut terkait data pribadi Anda:</p>
+    <ul>
+      <li>Mengakses data pribadi Anda.</li>
+      <li>Memperbarui atau memperbaiki data yang tidak akurat.</li>
+      <li>Meminta penghapusan data pribadi Anda (dengan syarat tertentu).</li>
+    </ul>
+    <h4>6. Pembagian Data</h4>
+    <p>
+      Kami tidak akan membagikan data pribadi Anda kepada pihak ketiga tanpa persetujuan Anda, kecuali diwajibkan oleh hukum atau untuk memenuhi kewajiban kontrak kami dengan Anda.
+    </p>
+    <h4>7. Perubahan Kebijakan Privasi</h4>
+    <p>
+      Kebijakan ini dapat diubah sewaktu-waktu. Perubahan akan diberitahukan melalui email atau pengumuman pada platform kami.
+    </p>
+    <h3>
+      6. Hukum yang Berlaku
+    </h3>
+    <p>
+      Syarat ini diatur dan ditafsirkan sesuai dengan hukum. Setiap perselisihan akan diselesaikan secara eksklusif di pengadilan.
+    </p>
+    <h3>7. Informasi Kontak</h3>
+    <p>Untuk pertanyaan atau kekhawatiran tentang Syarat ini, silakan hubungi kami melalui kontak yang tersedia di aplikasi.</p>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+h1{
+  font-size: 46px;
+  font-weight: 600;
+  margin: 0 0 20px;
+}
+h3{
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 20px;
+}
+h4{
+  font-size: 20px;
+  margin: 0 0 20px;
+}
+hr{
+  border-color: #999;
+  margin: 30px 0;
+}
+p{
+  font-size: 16px;
+  margin: 0 0 20px;
+}
+ul{
+  padding-left: 20px;
+  margin: 0 0 20px;
+  li{
+    list-style: disc;
+    padding: 4px 0;
+    padding-left: 8px;
+  }
+}
+</style>

package/src/components/layout/PageActivityHeader.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import BtnCircle from '@/components/button/BtnCircle.vue';
+import { LucideArrowLeft, LucidePlusCircle, LucideRotateCcw } from 'lucide-vue-next';
+import PageTab from '@/components/pages/PageTab.vue';
+import { computed } from 'vue';
+
+const router = useRouter();
+const emits = defineEmits(['reload', 'tabChanged', 'addData']);
+const tab = defineModel<string>('tab');
+const props = defineProps(['showDeletedTab', 'customTabs', 'showAddBtn', 'title']);
+
+const isShowAddBtn = computed(() => {
+  if (typeof props.showAddBtn === 'function') {
+    return props.showAddBtn();
+  }
+  return (props.showAddBtn !== false);
+})
+</script>
+
+<template>
+  <div class="flex bg-white dark:bg-dark_bg border-b dark:border-dark_border">
+    <div class="flex items-center flex-none gap-1.5 pl-4 pr-5">
+      <BtnCircle @click="router.go(-1)">
+        <LucideArrowLeft :size="20"/>
+      </BtnCircle>
+      <BtnCircle @click="emits('reload')">
+        <LucideRotateCcw :size="18"/>
+      </BtnCircle>
+    </div>
+    <div class="w-full">
+      <PageTab
+        v-model="tab"
+        :show-favorite="false"
+        :show-deleted="showDeletedTab"
+        :custom-tabs="customTabs || []"
+        v-on:change="emits('tabChanged')"
+      />
+    </div>
+    <div class="flex items-center pr-6" v-if="isShowAddBtn">
+      <button @click="emits('addData')"
+        class="pl-[3px] 2xl:pl-2 pr-3 2xl:pr-4 cursor-pointer rounded-full h-[28px] 2xl:h-[34px] ml-3 bg-blue-50 dark:bg-dark_bg5 dark:border-dark_bg5 dark:hover:bg-blue-500 dark:hover:border-blue-500 dark:hover:text-white dark:text-dark_text text-blue-500 text-xs 2xl:text-[13px] border-blue-300 border flex items-center whitespace-nowrap leading-none font-medium hover:bg-blue-100 transition hover:border-blue-500">
+        <LucidePlusCircle class="mr-1 2xl:mr-2 size-[23px] 2xl:-ml-[2px] 2xl:size-[25px]" :stroke-width="1.4"/>
+        Tambah {{title}}
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/layout/PageHeader.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import BtnPrimary from '@/components/button/BtnPrimary.vue'
+import { cn } from '@/lib/utils';
+import { boolean } from '@vueform/vueform';
+import { LucideArrowLeft } from 'lucide-vue-next';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const emits = defineEmits(['back']);
+const props = defineProps({
+  isBack: {
+    type: Boolean,
+    default: false
+  },
+  backUrl: {
+    type: String,
+    default: '/',
+  },
+  customBack: {
+    type: boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+})
+
+function onBack() {
+  if (props.customBack) {
+    emits('back');
+    return;
+  }
+  props.backUrl ? router.push(props.backUrl) : router.back()
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-row bg-white py-4 px-5 dark:bg-dark_bg', props.class)">
+    <div class="flex justify-between w-full items-center">
+      <div class="flex flex-col">
+        <div class="flex">
+          <div v-if="isBack" class="flex-none flex items-center">
+            <button class="mr-4 size-[42px] flex items-center justify-center -my-5 rounded-lg border-slate-300 hover:bg-slate-100 dark:bg-dark_bg3 dark:hover:bg-dark_bg4 dark:border-none transition ml-1 border"
+              v-on:click="onBack">
+              <slot name="back-icon">
+                <LucideArrowLeft/>
+              </slot>
+            </button>
+          </div>
+          <div class="flex flex-col my-auto">
+            <h4 class="font-medium text-lg">
+              <slot name="title"></slot>
+            </h4>
+            <p>
+              <slot name="description"></slot>
+            </p>
+          </div>
+        </div>
+        <slot name="prefix"></slot>
+      </div>
+      <div class="ml-auto flex items-center -my-6 gap-3">
+        <slot name="suffix"></slot>
+      </div>
+    </div>
+    <div>
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>

package/src/components/loadings/LoadingDialog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  AlertDialog,
+  AlertDialogContent,
+} from '@/components/ui/alert-dialog'
+import LoadingIndicator from '@/components/loadings/LoadingIndicator.vue'
+
+const dialogOpen = defineModel('show', { default: false });
+
+function open() {
+  dialogOpen.value = true;
+}
+
+function close() {
+  dialogOpen.value = false;
+}
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <AlertDialog v-model:open="dialogOpen">
+    <AlertDialogContent class="max-w-50 grid place-content-center bg-transparent border-none shadow-none !outline-none">
+      <LoadingIndicator class="scale-90"/>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+

package/src/components/loadings/LoadingDialogSpin.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
+import LoadingIndicator from '@/components/loadings/LoadingIndicator.vue'
+</script>
+
+<template>
+  <AlertDialog :default-open="true">
+    <AlertDialogContent
+      class="max-w-50 grid place-content-center bg-transparent border-transparent shadow-none focus:outline-none"
+    >
+      <AlertDialogHeader>
+        <AlertDialogTitle class="grid place-items-center"><LoadingIndicator /></AlertDialogTitle>
+        <AlertDialogDescription>
+          <span class="animate-pulse text-white font-bold text-md">Harap Tunggu . . .</span>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/src/components/loadings/LoadingIndicator.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useAppConfig } from '@/composables/useAppConfig'
+
+const { logo, primaryColor } = useAppConfig()
+</script>
+
+<template>
+  <div class="w-20 h-20 relative flex items-center justify-center">
+    <div 
+      class="h-12 w-12 bg-contain bg-center bg-no-repeat rounded-full border-2"
+      :style="{
+        backgroundImage: `url(${logo})`,
+        backgroundColor: primaryColor + '20',
+        borderColor: primaryColor
+      }"
+    ></div>
+    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="w-20 h-20 absolute top-0 left-0">
+      <circle 
+        cx="50" 
+        cy="50" 
+        fill="none" 
+        :stroke="primaryColor" 
+        stroke-width="3" 
+        r="35" 
+        stroke-dasharray="164.93361431346415 56.97787143782138"
+      >
+        <animateTransform 
+          attributeName="transform" 
+          type="rotate" 
+          repeatCount="indefinite" 
+          dur="1s" 
+          values="0 50 50;360 50 50" 
+          keyTimes="0;1"
+        ></animateTransform>
+      </circle>
+    </svg>
+  </div>
+</template>

package/src/components/loadings/LoadingScreen.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useAppConfig } from '@/composables/useAppConfig'
+
+const { companyName, logo, logoAlt } = useAppConfig()
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 bg-white dark:bg-dark_bg flex items-center justify-center">
+    <div class="text-center">
+      <div class="mb-8">
+        <img :src="logo" :alt="logoAlt" class="w-24 h-24 mx-auto mb-4" />
+        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">{{ companyName }}</h2>
+      </div>
+      <div class="flex items-center justify-center">
+        <svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" 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"></path>
+        </svg>
+        <span class="text-lg text-gray-600 dark:text-gray-300">Loading...</span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/notif/Notif.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import NotifItem from "../notif/NotifItem.vue";
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import Skeleton from "@/components/ui/skeleton/Skeleton.vue";
+import { onMounted } from "vue";
+import api from "@/api/api";
+import { LucideBellOff } from "lucide-vue-next";
+import { useRouter, useRoute } from "vue-router";
+
+const allNotif = ref([]);
+const loading = ref(true);
+const router = useRouter();
+const route = useRoute();
+
+const emit = defineEmits(["close-dropdown"]);
+
+function itemClicked(item: any) {
+  item.isRead = true;
+  console.log(item);
+  if (item.url) {
+    // Parse potential query parameters from the notif URL
+    let url = item.url;
+    let queryParams: Record<string, string> = {};
+
+    // Check if there's an editId in the notification data
+    if (item.editId) {
+      // Add the edit parameter to query params
+      queryParams = { ...queryParams, edit: item.editId };
+    }
+
+    // If URL already has query parameters
+    if (url.includes("?")) {
+      const [baseUrl, queryString] = url.split("?");
+
+      // Parse existing query parameters
+      const existingParams = new URLSearchParams(queryString);
+      existingParams.forEach((value, key) => {
+        queryParams[key] = value;
+      });
+
+      // Create new URL with combined parameters
+      url = baseUrl;
+    }
+
+    // Navigate with query parameters
+    router.push({
+      path: url,
+      query: Object.keys(queryParams).length > 0 ? queryParams : undefined
+    });
+  }
+  emit("close-dropdown");
+}
+
+onMounted(() => {
+  const storedNotif = sessionStorage.getItem("all_notif");
+  if (storedNotif) {
+    try {
+      allNotif.value = JSON.parse(storedNotif);
+      if (allNotif.value.length > 0) loading.value = false;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  api
+    .get("/notif/my")
+    .then(r => {
+      allNotif.value = r.data.data;
+      const allNotifStr = JSON.stringify(allNotif.value);
+      sessionStorage.setItem("all_notif", allNotifStr);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+});
+</script>
+
+<template>
+  <main class="overflow-hidden rounded-lg bg-white shadow-md">
+    <div class="text-md bg-slate-100 px-4 py-3 font-semibold text-text_main">Notifikasi</div>
+    <ScrollArea class="h-[80vh] max-h-[480px] bg-white">
+      <div class="p-2">
+        <template v-if="loading">
+          <main class="relative mb-1 cursor-pointer rounded-sm py-3 pl-[4.2em] pr-4 transition" v-for="i in 3">
+            <div class="absolute left-3 top-2">
+              <Skeleton class="size-9 rounded-full"></Skeleton>
+            </div>
+            <Skeleton class="mb-2 h-3"></Skeleton>
+            <Skeleton class="h-2 w-[75%]"></Skeleton>
+          </main>
+        </template>
+        <div v-else-if="allNotif.length < 1" class="px-4 pt-8 text-center text-slate-500">
+          <LucideBellOff :size="64" :stroke-width="1" class="mx-auto mb-6" />
+          <h4 class="font-semibold">Belum Ada Notifikasi</h4>
+          <p class="text-sm">Semua notifikasi untuk Anda akan muncul disini.</p>
+        </div>
+        <template v-else>
+          <NotifItem v-for="(item, i) in allNotif" :key="i" :item="item" v-on:click="itemClicked(item)" />
+        </template>
+      </div>
+    </ScrollArea>
+  </main>
+</template>