diff --git a/navigation/index.js b/navigation/index.js
index 101ebfa..d0d0468 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -10,182 +10,73 @@ export default [
         child: [],
         meta: {},
       },
-      {
-        title: "Carian",
-        path: "/carian",
-        icon: "ph:magnifying-glass",
-        child: [],
-        meta: {},
-      },
-      {
-        title: "Laporan",
-        path: "/laporan",
-        icon: "ph:chart-bar-fill",
-        child: [],
-        meta: {},
-      },
     ],
     meta: {},
   },
   {
-    header: "Fungsi",
-    description: "",
+    header: "Pentadbiran",
+    description: "Urus aplikasi anda",
     child: [
       {
-        title: "Komponen",
-        icon: "ph:gear-fine",
+        title: "Konfigurasi",
+        icon: "ic:outline-settings",
         child: [
           {
-            title: "Amaran",
-            path: "/komponen/amaran",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Butang",
-            path: "/komponen/butang",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Lencana",
-            path: "/komponen/lencana",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Collapse",
-            path: "/komponen/collapse",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Dropdown",
-            path: "/komponen/dropdown",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Modal",
-            path: "/komponen/modal",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Progress Bar",
-            path: "/komponen/progress-bar",
-            child: [],
-            meta: {},
-          },
-          {
-            title: "Tab",
-            path: "/komponen/tab",
-            child: [],
-            meta: {},
+            title: "Persekitaran",
+            path: "/devtool/config/environment",
           },
         ],
       },
       {
-        title: "Datatable",
-        path: "/datatable",
-        icon: "ph:table",
-        child: [],
-        meta: {},
-      },
-      {
-        title: "Borang",
-        path: "/borang",
-        icon: "ph:clipboard-text",
+        title: "Penyunting Menu",
+        icon: "ci:menu-alt-03",
+        path: "/devtool/menu-editor",
         child: [],
       },
       {
-        title: "Ikon",
-        path: "/ikon",
-        icon: "iconamoon:slightly-smiling-face",
-        child: [],
-        meta: {},
+        title: "Urus Pengguna",
+        path: "/devtool/user-management",
+        icon: "ph:user-circle-gear",
+        child: [
+          {
+            title: "Senarai Pengguna",
+            path: "/devtool/user-management/user",
+            icon: "",
+            child: [],
+          },
+          {
+            title: "Senarai Peranan",
+            path: "/devtool/user-management/role",
+            icon: "",
+            child: [],
+          },
+        ],
       },
       {
-        title: "Tipografi",
-        path: "/tipografi",
-        icon: "ph:text-aa",
-        child: [],
-        meta: {},
+        title: "Kandungan",
+        icon: "mdi:pencil-ruler",
+        child: [
+          {
+            title: "Penyunting",
+            path: "/devtool/content-editor",
+          },
+          {
+            title: "Templat",
+            path: "/devtool/content-editor/template",
+          },
+        ],
       },
       {
-        title: "Senarai Mesej",
-        path: "/senarai-mesej",
-        icon: "ic:outline-mail",
+        title: "Penyunting API",
+        path: "/devtool/api-editor",
+        icon: "material-symbols:api-rounded",
         child: [],
-        meta: {},
       },
     ],
-    meta: {},
+    meta: {
+      auth: {
+        role: ["Developer"],
+      },
+    },
   },
-  // {
-  //   header: "Pentadbiran",
-  //   description: "Urus aplikasi anda",
-  //   child: [
-  //     {
-  //       title: "Konfigurasi",
-  //       icon: "ic:outline-settings",
-  //       child: [
-  //         {
-  //           title: "Persekitaran",
-  //           path: "/devtool/config/environment",
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       title: "Penyunting Menu",
-  //       icon: "ci:menu-alt-03",
-  //       path: "/devtool/menu-editor",
-  //       child: [],
-  //     },
-  //     {
-  //       title: "Urus Pengguna",
-  //       path: "/devtool/user-management",
-  //       icon: "ph:user-circle-gear",
-  //       child: [
-  //         {
-  //           title: "Senarai Pengguna",
-  //           path: "/devtool/user-management/user",
-  //           icon: "",
-  //           child: [],
-  //         },
-  //         {
-  //           title: "Senarai Peranan",
-  //           path: "/devtool/user-management/role",
-  //           icon: "",
-  //           child: [],
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       title: "Kandungan",
-  //       icon: "mdi:pencil-ruler",
-  //       child: [
-  //         {
-  //           title: "Penyunting",
-  //           path: "/devtool/content-editor",
-  //         },
-  //         {
-  //           title: "Templat",
-  //           path: "/devtool/content-editor/template",
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       title: "Penyunting API",
-  //       path: "/devtool/api-editor",
-  //       icon: "material-symbols:api-rounded",
-  //       child: [],
-  //     },
-  //   ],
-  //   meta: {
-  //     auth: {
-  //       role: ["Developer"],
-  //     },
-  //   },
-  // },
 ];
diff --git a/pages/borang/index.vue b/pages/borang/index.vue
deleted file mode 100644
index 4b4c5b0..0000000
--- a/pages/borang/index.vue
+++ /dev/null
@@ -1,952 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Borang",
-  breadcrumb: [
-    {
-      name: "Komponen",
-      type: "current",
-    },
-  ],
-});
-
-const showCode = reactive({});
-const tooltips = reactive({});
-
-const toggleCode = (section) => {
-  showCode[section] = !showCode[section];
-};
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips[codeId] = message;
-  setTimeout(() => {
-    tooltips[codeId] = null;
-  }, 2000);
-};
-
-const formData = reactive({
-  name: "",
-  email: "",
-  password: "",
-  date: "",
-  time: "",
-  number: 0,
-  textarea: "",
-  select: "",
-  checkbox: [],
-  radio: "",
-  range: 50,
-  file: null,
-  toggle: false,
-});
-
-const options = [
-  { label: "Option 1", value: "1" },
-  { label: "Option 2", value: "2" },
-  { label: "Option 3", value: "3" },
-];
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <!-- Text Input -->
-    <rs-card>
-      <template #header>Text Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>text</code> sebagai jenis input untuk teks biasa.
-        </p>
-        <FormKit
-          type="text"
-          name="name"
-          label="Nama"
-          placeholder="Masukkan nama anda"
-          v-model="formData.name"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('text')"
-          >
-            {{ showCode.text ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.text" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeText')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeText']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeText"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeText" class="language-html shadow-none">
-                  <code>
-                    &lt;FormKit
-                        type="text"
-                        name="name"
-                        label="Nama"
-                        placeholder="Masukkan nama anda"
-                        v-model="formData.name"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Email Input -->
-    <rs-card>
-      <template #header>Email Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>email</code> sebagai jenis input untuk alamat email.
-        </p>
-        <FormKit
-          type="email"
-          name="email"
-          label="Alamat Email"
-          placeholder="nama@contoh.com"
-          v-model="formData.email"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('email')"
-          >
-            {{ showCode.email ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.email" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeEmail')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeEmail']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeEmail"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeEmail" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="email"
-                        name="email"
-                        label="Alamat Email"
-                        placeholder="nama@contoh.com"
-                        v-model="formData.email"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Password Input -->
-    <rs-card>
-      <template #header>Password Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>password</code> sebagai jenis input untuk kata laluan.
-        </p>
-        <FormKit
-          type="password"
-          name="password"
-          label="Kata Laluan"
-          placeholder="Masukkan kata laluan"
-          v-model="formData.password"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('password')"
-          >
-            {{ showCode.password ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.password" class="relative" v-highlight>
-              <button
-                @click="copyCode('codePassword')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codePassword']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codePassword"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codePassword" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="password"
-                        name="password"
-                        label="Kata Laluan"
-                        placeholder="Masukkan kata laluan"
-                        v-model="formData.password"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Date Input -->
-    <rs-card>
-      <template #header>Date Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>date</code> sebagai jenis input untuk memilih tarikh.
-        </p>
-        <FormKit
-          type="date"
-          name="date"
-          label="Pilih Tarikh"
-          v-model="formData.date"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('date')"
-          >
-            {{ showCode.date ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.date" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeDate')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeDate']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeDate"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeDate" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="date"
-                        name="date"
-                        label="Pilih Tarikh"
-                        v-model="formData.date"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Time Input -->
-    <rs-card>
-      <template #header>Time Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>time</code> sebagai jenis input untuk memilih masa.
-        </p>
-        <FormKit
-          type="time"
-          name="time"
-          label="Pilih Masa"
-          v-model="formData.time"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('time')"
-          >
-            {{ showCode.time ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.time" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeTime')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeTime']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeTime"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeTime" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="time"
-                        name="time"
-                        label="Pilih Masa"
-                        v-model="formData.time"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Number Input -->
-    <rs-card>
-      <template #header>Number Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>number</code> sebagai jenis input untuk nombor.
-        </p>
-        <FormKit
-          type="number"
-          name="number"
-          label="Nombor"
-          v-model="formData.number"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('number')"
-          >
-            {{ showCode.number ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.number" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeNumber')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeNumber']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeNumber"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeNumber" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="number"
-                        name="number"
-                        label="Nombor"
-                        v-model="formData.number"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Textarea Input -->
-    <rs-card>
-      <template #header>Textarea Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>textarea</code> sebagai jenis input untuk teks panjang.
-        </p>
-        <FormKit
-          type="textarea"
-          name="textarea"
-          label="Textarea"
-          placeholder="Masukkan teks panjang di sini"
-          v-model="formData.textarea"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('textarea')"
-          >
-            {{ showCode.textarea ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.textarea" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeTextarea')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeTextarea']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeTextarea"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeTextarea" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                        type="textarea"
-                        name="textarea"
-                        label="Textarea"
-                        placeholder="Masukkan teks panjang di sini"
-                        v-model="formData.textarea"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Select Input -->
-    <rs-card>
-      <template #header>Select Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>select</code> sebagai jenis input untuk pilihan dari
-          senarai.
-        </p>
-        <FormKit
-          type="select"
-          name="select"
-          label="Pilih Satu"
-          placeholder="Pilih satu pilihan"
-          :options="options"
-          v-model="formData.select"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('select')"
-          >
-            {{ showCode.select ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.select" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeSelect')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeSelect']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeSelect"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeSelect" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="select"
-                      name="select"
-                      label="Pilih Satu"
-                      placeholder="Pilih satu pilihan"
-                      :options="options"
-                      v-model="formData.select"
-                      /&gt;
-
-                      // In script setup:
-                      const options = [
-                          { label: 'Option 1', value: '1' },
-                          { label: 'Option 2', value: '2' },
-                          { label: 'Option 3', value: '3' },
-                      ];
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Checkbox Input -->
-    <rs-card>
-      <template #header>Checkbox Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>checkbox</code> sebagai jenis input untuk pilihan
-          berbilang.
-        </p>
-        <FormKit
-          type="checkbox"
-          name="checkbox"
-          label="Pilihan"
-          :options="options"
-          v-model="formData.checkbox"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('checkbox')"
-          >
-            {{ showCode.checkbox ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.checkbox" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeCheckbox')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeCheckbox']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeCheckbox"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeCheckbox" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="checkbox"
-                      name="checkbox"
-                      label="Pilihan"
-                      :options="options"
-                      v-model="formData.checkbox"
-                      /&gt;
-
-                      // In script setup:
-                      const options = [
-                          { label: 'Option 1', value: '1' },
-                          { label: 'Option 2', value: '2' },
-                          { label: 'Option 3', value: '3' },
-                      ];
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Radio Input -->
-    <rs-card>
-      <template #header>Radio Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>radio</code> sebagai jenis input untuk pilihan tunggal.
-        </p>
-        <FormKit
-          type="radio"
-          name="radio"
-          label="Pilihan"
-          :options="options"
-          v-model="formData.radio"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('radio')"
-          >
-            {{ showCode.radio ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.radio" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeRadio')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeRadio']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeRadio"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeRadio" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="radio"
-                      name="radio"
-                      label="Pilihan"
-                      :options="options"
-                      v-model="formData.radio"
-                      /&gt;
-
-                      // In script setup:
-                      const options = [
-                          { label: 'Option 1', value: '1' },
-                          { label: 'Option 2', value: '2' },
-                          { label: 'Option 3', value: '3' },
-                      ];
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Range Input -->
-    <rs-card>
-      <template #header>Range Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>range</code> sebagai jenis input untuk memilih nilai
-          dalam julat tertentu.
-        </p>
-        <FormKit
-          type="range"
-          name="range"
-          label="Julat"
-          min="0"
-          max="100"
-          step="1"
-          v-model="formData.range"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('range')"
-          >
-            {{ showCode.range ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.range" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeRange')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeRange']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeRange"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeRange" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="range"
-                      name="range"
-                      label="Julat"
-                      min="0"
-                      max="100"
-                      step="1"
-                      v-model="formData.range"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- File Input -->
-    <rs-card>
-      <template #header>Fail Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>file</code> sebagai jenis input untuk memuat naik fail.
-        </p>
-        <FormKit
-          type="file"
-          name="file"
-          label="Muat Naik Fail"
-          accept="image/*"
-          v-model="formData.file"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('file')"
-          >
-            {{ showCode.file ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.file" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeFile')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeFile']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeFile"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeFile" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="file"
-                      name="file"
-                      label="Muat Naik Fail"
-                      accept="image/*"
-                      v-model="formData.file"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Toggle Input -->
-    <rs-card>
-      <template #header>Toggle Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>toggle</code> sebagai jenis input untuk suis on/off.
-        </p>
-        <FormKit
-          type="toggle"
-          name="toggle"
-          label="Toggle"
-          onLabel="Hidup"
-          offLabel="Mati"
-          v-model="formData.toggle"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('toggle')"
-          >
-            {{ showCode.toggle ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.toggle" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeToggle')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeToggle']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeToggle"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeToggle" class="language-html shadow-none">
-                  <code>
-                      &lt;FormKit
-                      type="toggle"
-                      name="toggle"
-                      label="Toggle"
-                      onLabel="Hidup"
-                      offLabel="Mati"
-                      v-model="formData.toggle"
-                      /&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Validation Input -->
-    <rs-card>
-      <template #header>Validasi Input</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>validation</code> untuk menambah validasi pada input.
-          Beberapa contoh validasi termasuk <code>required</code>,
-          <code>email</code>, <code>min</code>, <code>max</code>, dan banyak
-          lagi. Anda boleh lihat dengan lebih terperinci di
-          <a
-            href="https://formkit.com/essentials/validation"
-            class="text-info underline"
-            >input validasi</a
-          >
-        </p>
-        <FormKit
-          type="text"
-          name="name"
-          label="Nama"
-          placeholder="Masukkan nama anda"
-          v-model="formData.name"
-          validation="required|min:3|max:20"
-          :validation-messages="{
-            required: 'Nama diperlukan',
-            min: 'Nama terlalu pendek',
-            max: 'Nama terlalu panjang',
-          }"
-        />
-        <FormKit
-          type="email"
-          name="email"
-          label="Alamat Email"
-          placeholder="nama@contoh.com"
-          v-model="formData.email"
-          validation="required|email"
-          :validation-messages="{
-            required: 'Email diperlukan',
-            email: 'Format email tidak sah',
-          }"
-        />
-        <FormKit
-          type="number"
-          name="age"
-          label="Umur"
-          placeholder="Masukkan umur anda"
-          v-model="formData.age"
-          validation="required|min:18|max:60"
-          :validation-messages="{
-            required: 'Umur diperlukan',
-            min: 'Umur minimum adalah 18',
-            max: 'Umur maksimum adalah 60',
-          }"
-        />
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="toggleCode('validation')"
-          >
-            {{ showCode.validation ? "Sembunyi Kod" : "Tunjuk Kod" }}
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode.validation" class="relative" v-highlight>
-              <button
-                @click="copyCode('codeValidation')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <span
-                v-if="tooltips['codeValidation']"
-                class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
-              >
-                {{ tooltips["codeValidation"] }}
-              </span>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="codeValidation" class="language-html shadow-none">
-              <code>
-                  &lt;FormKit
-                    type="text"
-                    name="name"
-                    label="Nama"
-                    placeholder="Masukkan nama anda"
-                    v-model="formData.name"
-                    validation="required|min:3|max:20"
-                    :validation-messages="{ required: 'Nama diperlukan', min: 'Nama terlalu pendek', max: 'Nama terlalu panjang' }"
-                  /&gt;
-
-                  &lt;FormKit
-                    type="email"
-                    name="email"
-                    label="Alamat Email"
-                    placeholder="nama@contoh.com"
-                    v-model="formData.email"
-                    validation="required|email"
-                    :validation-messages="{ required: 'Email diperlukan', email: 'Format email tidak sah' }"
-                  /&gt;
-
-                  &lt;FormKit
-                    type="number"
-                    name="age"
-                    label="Umur"
-                    placeholder="Masukkan umur anda"
-                    v-model="formData.age"
-                    validation="required|min:18|max:60"
-                    :validation-messages="{ required: 'Umur diperlukan', min: 'Umur minimum adalah 18', max: 'Umur maksimum adalah 60' }"
-                  /&gt;
-              </code>
-            </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/pages/carian/index.vue b/pages/carian/index.vue
deleted file mode 100644
index 22160b4..0000000
--- a/pages/carian/index.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Carian",
-  breadcrumb: [
-    {
-      name: "Carian",
-      type: "current",
-    },
-  ],
-});
-
-const categories = ref([
-  "Semua Kategori",
-  "Kategori 1",
-  "Kategori 2",
-  "Kategori 3",
-]);
-const selectedCategory = ref("Semua Kategori");
-
-const criteria = ref([
-  { label: "Kriteria 1", options: ["Pilihan 1", "Pilihan 2", "Pilihan 3"] },
-  { label: "Kriteria 2", options: ["Pilihan A", "Pilihan B", "Pilihan C"] },
-  { label: "Kriteria 3", options: ["Pilihan X", "Pilihan Y", "Pilihan Z"] },
-  { label: "Kriteria 4", options: ["Pilihan 1", "Pilihan 2", "Pilihan 3"] },
-  {
-    label: "Kriteria 5",
-    options: ["Pilihan A", "Pilihan B", "Pilihan C"],
-  },
-]);
-
-const searchQuery = ref("");
-
-const performSearch = () => {
-  // Implement search logic here
-  console.log("Performing search with:", searchQuery.value);
-};
-</script>
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <rs-card>
-      <template #header> Carian laman </template>
-      <template #body>
-        <FormKit type="form" @submit="performSearch" submit-label="Search">
-          <div class="flex items-center space-x-2 mb-4">
-            <FormKit
-              v-model="searchQuery"
-              type="text"
-              name="search"
-              placeholder="Carian..."
-              :classes="{
-                outer: 'flex-grow',
-                input: 'w-full',
-              }"
-            >
-              <template #prefixIcon>
-                <Icon
-                  name="ph:magnifying-glass"
-                  class="!w-5 !h-5 ml-3 text-gray-500"
-                ></Icon>
-              </template>
-            </FormKit>
-            <FormKit
-              type="select"
-              v-model="selectedCategory"
-              :options="categories"
-              placeholder="Semua Kategori"
-              :classes="{
-                outer: 'w-48',
-              }"
-            />
-          </div>
-
-          <div class="text-lg font-medium text-gray-700 mb-4">
-           Carian Terperinci
-          </div>
-
-          <div class="grid grid-cols-2 gap-4 mb-4">
-            <FormKit
-              v-for="(item, index) in criteria.slice(0, 2)"
-              :key="index"
-              type="select"
-              :name="item.label.toLowerCase().replace(' ', '_')"
-              :label="item.label"
-              :options="item.options"
-              placeholder="Pilih pilihan"
-            >
-              <template #label>
-                <label
-                  class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
-                >
-                  {{ item.label }}
-                </label>
-              </template>
-            </FormKit>
-          </div>
-
-          <div class="grid grid-cols-3 gap-4">
-            <FormKit
-              v-for="(item, index) in criteria.slice(2)"
-              :key="index"
-              type="select"
-              :name="item.label.toLowerCase().replace(' ', '_')"
-              :label="item.label"
-              :options="item.options"
-              placeholder="Pilih pilihan"
-            >
-              <template #label>
-                <label
-                  class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
-                >
-                  {{ item.label }}
-                </label>
-              </template>
-            </FormKit>
-          </div>
-        </FormKit>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
deleted file mode 100644
index 4466577..0000000
--- a/pages/datatable/index.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<script setup>
-import data from "@/assets/json/data.json";
-definePageMeta({
-  title: "Data Table",
-  breadcrumb: [
-    {
-      name: "Data Table",
-      type: "current",
-    },
-  ],
-});
-
-const fields = ["ID", "Nama Penuh", "Umur", "Emel"];
-
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <!-- Basic Table Example -->
-    <rs-card>
-      <template #header> Datatable Asas </template>
-      <template #body>
-        <rs-table
-          :field="fields"
-          :data="data"
-          :options="{
-            variant: 'default',
-            striped: true,
-            borderless: true,
-            hover: true,
-            fixed: false,
-          }"
-          basic
-        >
-        </rs-table>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode1" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt;
-                      &lt;rs-table
-                      :field="fields"
-                      :data="data"
-                      :options="{
-                        variant: 'default',
-                        striped: true,
-                        borderless: true,
-                        hover: true,
-                        fixed: false,
-                      }"
-                      basic
-                      &gt;
-                      &lt;/rs-table&gt;
-                    &lt;/template&gt;
-                    
-                    &lt;script setup&gt;
-                      const data = [
-                        {
-                          "id": "#001",
-                          "namaPenuh": "John Doe",
-                          "umur": 34,
-                          "emel": "johndoe@example.com"
-                        },
-                        {
-                          "id": "#002",
-                          "namaPenuh": "Jane Smith",
-                          "umur": 28,
-                          "emel": "janesmith@example.com"
-                        },
-                        {
-                          "id": "#003",
-                          "namaPenuh": "Robert Brown",
-                          "umur": 45,
-                          "emel": "robertbrown@example.com"
-                        },
-                        {
-                          "id": "#004",
-                          "namaPenuh": "Emily White",
-                          "umur": 37,
-                          "emel": "emilywhite@example.com"
-                        }
-                      ];
-                      const fields = ["ID", "Nama Penuh", "Umur", "Emel"];
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Advanced Table Example -->
-    <rs-card>
-      <template #header> Datatable Maju</template>
-      <template #body>
-        <rs-table
-          :data="data"
-          :options="{
-            variant: 'default',
-            striped: true,
-            borderless: true,
-          }"
-          :options-advanced="{
-            sortable: true,
-            
-            filterable: false,
-          }"
-          advanced
-        >
-          <template v-slot:status="data">
-            <rs-badge
-              :variant="
-                data.text === 'Active'
-                  ? 'success'
-                  : data.text == 'Inactive'
-                  ? 'warning'
-                  : 'danger'
-              "
-            >
-              {{ data.text }}
-            </rs-badge>
-          </template>
-        </rs-table>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt;
-                      &lt;rs-table
-                        :data="data"
-                        :options="{
-                          variant: 'default',
-                          striped: true,
-                          borderless: true,
-                        }"
-                        :options-advanced="{
-                          sortable: true,
-                          
-                          filterable: false,
-                        }"
-                        advanced
-                      &gt;
-                        &lt;template v-slot:status="data"&gt;
-                          &lt;rs-badge
-                            :variant="
-                              data.text === 'Active'
-                                ? 'success'
-                                : data.text == 'Inactive'
-                                ? 'warning'
-                                : 'danger'
-                            "&gt;
-                            &#123;&#123; data.text &#125;&#125;
-                          &lt;/rs-badge&gt;
-                        &lt;/template&gt;
-                      &lt;/rs-table&gt;
-                    &lt;/template&gt;
-                      
-                    &lt;script setup&gt;
-                      const data = [
-                        {
-                          "id": "#001",
-                          "namaPenuh": "John Doe",
-                          "umur": 34,
-                          "emel": "johndoe@example.com",
-                          "status": "Active"
-                        },
-                        {
-                          "id": "#002",
-                          "namaPenuh": "Jane Smith",
-                          "umur": 28,
-                          "emel": "janesmith@example.com",
-                          "status": "Inactive"
-                        },
-                        {
-                          "id": "#003",
-                          "namaPenuh": "Robert Brown",
-                          "umur": 45,
-                          "emel": "robertbrown@example.com",
-                          "status": "Banned"
-                        },
-                        {
-                          "id": "#004",
-                          "namaPenuh": "Emily White",
-                          "umur": 37,
-                          "emel": "emilywhite@example.com",
-                          "status": "Active"
-                        }
-                      ];
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/ikon/index.vue b/pages/ikon/index.vue
deleted file mode 100644
index 400dbd6..0000000
--- a/pages/ikon/index.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup>
-import iconJson from "@/assets/json/iconamoon.json";
-
-definePageMeta({
-  title: "Set Ikons",
-  middleware: ["auth"],
-  requiresAuth: true,
-  breadcrumb: [
-    {
-      name: "Set Ikons",
-      type: "current",
-    },
-  ],
-});
-
-const copyToClipboard = (text) => {
-  let tagHtml = '<Icon name="' + text + '" />';
-  navigator.clipboard.writeText(tagHtml).then(() => {
-    showTooltip(text, "Kod disalin!");
-  });
-};
-
-const searchQuery = ref("");
-const displayedIcons = ref([]);
-const containerRef = ref(null);
-const tooltips = reactive({});
-const batchSize = 50;
-let currentIndex = 0;
-
-const filteredIcons = computed(() => {
-  if (!searchQuery.value) return iconJson;
-  return iconJson.filter((icon) =>
-    icon.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
-});
-
-const loadMoreIcons = () => {
-  const newIcons = filteredIcons.value.slice(
-    currentIndex,
-    currentIndex + batchSize
-  );
-  displayedIcons.value.push(...newIcons);
-  currentIndex += batchSize;
-};
-
-const resetIconDisplay = () => {
-  displayedIcons.value = [];
-  currentIndex = 0;
-  loadMoreIcons();
-};
-
-const showTooltip = (iconName, message) => {
-  tooltips[iconName] = message;
-  setTimeout(() => {
-    tooltips[iconName] = null;
-  }, 2000);
-};
-
-watch(searchQuery, () => {
-  resetIconDisplay();
-  nextTick(() => {
-    if (containerRef.value) {
-      containerRef.value.scrollTop = 0;
-    }
-  });
-});
-
-onMounted(() => {
-  resetIconDisplay();
-});
-
-const handleScroll = () => {
-  if (!containerRef.value) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = containerRef.value;
-  if (scrollHeight - scrollTop <= clientHeight + 1) {
-    loadMoreIcons();
-  }
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <rs-card>
-      <template #header>
-        Set Ikon Icomoon (Jumlah: {{ filteredIcons.length }})
-      </template>
-      <template #body>
-        <FormKit
-          type="text"
-          v-model="searchQuery"
-          placeholder="Search icons..."
-          class="mb-4"
-        />
-
-        <div
-          ref="containerRef"
-          class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 max-h-[70vh] overflow-y-auto"
-          @scroll="handleScroll"
-        >
-          <div
-            v-for="icon in displayedIcons"
-            :key="icon.name"
-            class="flex items-center relative"
-          >
-            <Icon :name="icon.name" class="!w-10 !h-10 mr-4"></Icon>
-            <div class="flex flex-col">
-              <div class="text-sm">{{ icon.name }}</div>
-              <div class="relative">
-                <rs-button
-                  @click="copyToClipboard(icon.name)"
-                  class="!text-xs !py-1 !px-2 !mt-1 relative"
-                >
-                  <Icon name="ph:copy" class="!w-4 !h-4 mr-1"></Icon>
-                  Salin Kod
-                </rs-button>
-                <transition name="fade">
-                  <span
-                    v-if="tooltips[icon.name]"
-                    class="absolute top-4 left-0 mt-4 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips[icon.name] }}
-                  </span>
-                </transition>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="displayedIcons.length === 0" class="text-center mt-4">
-          No icons found matching your search.
-        </div>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/komponen/amaran/index.vue b/pages/komponen/amaran/index.vue
deleted file mode 100644
index dc9bb1d..0000000
--- a/pages/komponen/amaran/index.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Amaran",
-});
-
-const showCode = ref(false);
-const showCode2 = ref(false);
-const autoDismiss = ref(false);
-const timer = ref(1000);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-
-const resetAlert = () => {
-  autoDismiss.value = true;
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header>
-        <h5>Amaran Biasa</h5>
-      </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan <code>rs-alert</code> untuk menunjukkan amaran.
-        </p>
-        <rs-alert
-          variant="primary"
-          icon="iconamoon:information-circle"
-          class="mb-4"
-        >
-          Hai, ini adalah amaran primary!
-        </rs-alert>
-        <rs-alert
-          variant="info"
-          icon="iconamoon:information-circle"
-          class="mb-4"
-        >
-          Hai, ini adalah amaran info!
-        </rs-alert>
-        <rs-alert
-          variant="success"
-          icon="iconamoon:information-circle"
-          class="mb-4"
-        >
-          Hai, ini adalah amaran success!
-        </rs-alert>
-        <rs-alert
-          variant="warning"
-          icon="iconamoon:information-circle"
-          class="mb-4"
-        >
-          Hai, ini adalah amaran warning!
-        </rs-alert>
-        <rs-alert
-          variant="danger"
-          icon="iconamoon:information-circle"
-          class="mb-4"
-        >
-          Hai, ini adalah amaran danger!
-        </rs-alert>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode ? (showCode = false) : (showCode = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-alert variant="primary" icon="iconamoon:information-circle"&gt;Hai, ini adalah amaran primary!&lt;/rs-alert&gt;
-                        &lt;rs-alert variant="info" icon="iconamoon:information-circle"&gt;Hai, ini adalah amaran info!&lt;/rs-alert&gt;
-                        &lt;rs-alert variant="success" icon="iconamoon:information-circle"&gt;Hai, ini adalah amaran success!&lt;/rs-alert&gt;
-                        &lt;rs-alert variant="warning" icon="iconamoon:information-circle"&gt;Hai, ini adalah amaran warning!&lt;/rs-alert&gt;
-                        &lt;rs-alert variant="danger" icon="iconamoon:information-circle"&gt;Hai, ini adalah amaran danger!&lt;/rs-alert&gt;
-                      &lt;/template&gt;
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header>
-        <h5>Pemberhentian Automatik</h5>
-      </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan prop <code>auto-dismiss</code> untuk memberhentikan amaran
-          secara automatik. Pemasa lalai adalah 1000ms. Anda boleh menukar
-          pemasa dengan memberikan nilai kepada prop <code>timer</code>.
-        </p>
-        <rs-alert v-if="!autoDismiss" variant="primary" class="mb-4"
-          >Hai, ini adalah amaran yang tidak diberhentikan secara
-          automatik!</rs-alert
-        >
-        <rs-alert
-          v-else
-          variant="primary"
-          class="mb-4"
-          auto-dismiss
-          :timer="timer"
-          >Hai, ini adalah amaran yang diberhentikan secara automatik!</rs-alert
-        >
-        <div class="flex items-center gap-x-2">
-          <FormKit
-            type="number"
-            name="timer"
-            value="1000"
-            step="100"
-            v-model="timer"
-            :classes="{
-              outer: 'mb-0',
-              inner: '!mb-0',
-            }"
-          />
-          <rs-button @click="resetAlert"> Tetapkan Pemasa</rs-button>
-        </div>
-
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-alert auto-dismiss :timer="1000"&gt;Hai, ini adalah amaran yang diberhentikan secara automatik!&lt;/rs-alert&gt;
-                      &lt;/template&gt;
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/komponen/butang/index.vue b/pages/komponen/butang/index.vue
deleted file mode 100644
index 650f6a9..0000000
--- a/pages/komponen/butang/index.vue
+++ /dev/null
@@ -1,372 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Butang",
-  breadcrumb: [
-    {
-      name: "Komponen",
-      type: "current",
-    },
-  ],
-});
-
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-const showCode3 = ref(false);
-const showCode4 = ref(false);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header> Default </template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>rs-button</code> untuk menunjukkan lencana.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button> Butang </rs-button>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode1" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-button&gt;Butang&lt;/rs-button&gt;
-                      &lt;/template&gt;
-                    
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Variasi </template>
-      <template #body>
-        <p class="mb-4">
-          Variasi butang menggunakan prop <code>variant</code> untuk menukar
-          warna butang. Terdapat 6 variasi: <code>primary</code>,
-          <code>info</code>, <code>success</code>, <code>warning</code> dan
-          <code>danger</code>.
-        </p>
-
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button variant="primary"> Primary </rs-button>
-          <rs-button variant="secondary"> Secondary </rs-button>
-          <rs-button variant="info"> Info </rs-button>
-          <rs-button variant="success"> Success </rs-button>
-          <rs-button variant="warning"> Warning </rs-button>
-          <rs-button variant="danger"> Danger </rs-button>
-        </div>
-
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-button variant="primary"&gt;Primary&lt;/rs-button&gt;
-                        &lt;rs-button variant="secondary"&gt;Secondary&lt;/rs-button&gt;
-                        &lt;rs-button variant="info"&gt;Info&lt;/rs-button&gt;
-                        &lt;rs-button variant="success"&gt;Success&lt;/rs-button&gt;
-                        &lt;rs-button variant="warning"&gt;Warning&lt;/rs-button&gt;
-                        &lt;rs-button variant="danger"&gt;Danger&lt;/rs-button&gt;
-                      &lt;/template&gt;
-                    
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Jenis Variasi </template>
-      <template #body>
-        <p class="mb-4">
-          Jenis variasi butang menggunakan prop <code>variant</code> untuk
-          menukar bentuk butang. Terdapat 3 jenis variasi: <code>fill</code>,
-          <code>outline</code> dan <code>text</code>. <code>fill</code> adalah
-          default. <code>outline</code> digunakan untuk membuat butang dengan
-          sempadan. <code>text</code> digunakan untuk membuat butang tanpa
-          sempadan dan latar belakang.
-        </p>
-
-        <!-- Fill Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Fill
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-button variant="primary"> Primary </rs-button>
-            <rs-button variant="secondary"> Secondary </rs-button>
-            <rs-button variant="info"> Info </rs-button>
-            <rs-button variant="success"> Success </rs-button>
-            <rs-button variant="warning"> Warning </rs-button>
-            <rs-button variant="danger"> Danger </rs-button>
-          </div>
-        </div>
-
-        <!-- Outline Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Outline
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-button variant="primary-outline"> Primary </rs-button>
-            <rs-button variant="secondary-outline"> Secondary </rs-button>
-            <rs-button variant="info-outline"> Info </rs-button>
-            <rs-button variant="success-outline"> Success </rs-button>
-            <rs-button variant="warning-outline"> Warning </rs-button>
-            <rs-button variant="danger-outline"> Danger </rs-button>
-          </div>
-        </div>
-
-        <!-- Text Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Text
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-button variant="primary-text"> Primary </rs-button>
-            <rs-button variant="secondary-text"> Secondary </rs-button>
-            <rs-button variant="info-text"> Info </rs-button>
-            <rs-button variant="success-text"> Success </rs-button>
-            <rs-button variant="warning-text"> Warning </rs-button>
-            <rs-button variant="danger-text"> Danger </rs-button>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
-            @click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode3" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code3')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code3']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code3"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code3" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;!-- Fill Button --&gt;
-                        &lt;rs-button variant="primary"&gt;Primary&lt;/rs-button&gt;
-                        &lt;rs-button variant="secondary"&gt;Secondary&lt;/rs-button&gt;
-                        &lt;rs-button variant="info"&gt;Info&lt;/rs-button&gt;
-                        &lt;rs-button variant="success"&gt;Success&lt;/rs-button&gt;
-                        &lt;rs-button variant="warning"&gt;Warning&lt;/rs-button&gt;
-                        &lt;rs-button variant="danger"&gt;Danger&lt;/rs-button&gt;
-                    
-                        &lt;!-- Outline Button --&gt;
-                        &lt;rs-button variant="primary-outline"&gt;Primary&lt;/rs-button&gt;
-                        &lt;rs-button variant="secondary-outline"&gt;Secondary&lt;/rs-button&gt;
-                        &lt;rs-button variant="info-outline"&gt;Info&lt;/rs-button&gt;
-                        &lt;rs-button variant="success-outline"&gt;Success&lt;/rs-button&gt;
-                        &lt;rs-button variant="warning-outline"&gt;Warning&lt;/rs-button&gt;
-                        &lt;rs-button variant="danger-outline"&gt;Danger&lt;/rs-button&gt;
-                    
-                        &lt;!-- Text Button --&gt;
-                        &lt;rs-button variant="primary-text"&gt;Primary&lt;/rs-button&gt;
-                        &lt;rs-button variant="secondary-text"&gt;Secondary&lt;/rs-button&gt;
-                        &lt;rs-button variant="info-text"&gt;Info&lt;/rs-button&gt;
-                        &lt;rs-button variant="success-text"&gt;Success&lt;/rs-button&gt;
-                        &lt;rs-button variant="warning-text"&gt;Warning&lt;/rs-button&gt;
-                        &lt;rs-button variant="danger-text"&gt;Danger&lt;/rs-button&gt;
-                      &lt;/template&gt;
-                    
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Saiz </template>
-      <template #body>
-        <p class="mb-4">
-          Saiz butang menggunakan prop <code>size</code> untuk menukar saiz
-          butang. Terdapat 3 saiz: <code>small</code>, <code>medium</code> dan
-          <code>large</code>.
-        </p>
-
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button size="sm"> Kecil </rs-button>
-          <rs-button size="md"> Sederhana </rs-button>
-          <rs-button size="lg"> Besar </rs-button>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
-            @click="showCode4 ? (showCode4 = false) : (showCode4 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode4" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code4')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code4']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code4"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code4" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-button size="sm"&gt;Kecil&lt;/rs-button&gt;
-                        &lt;rs-button size="md"&gt;Sederhana&lt;/rs-button&gt;
-                        &lt;rs-button size="lg"&gt;Besar&lt;/rs-button&gt;
-                      &lt;/template&gt;
-                    
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/komponen/collapse/index.vue b/pages/komponen/collapse/index.vue
deleted file mode 100644
index cb42a7c..0000000
--- a/pages/komponen/collapse/index.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Collapse",
-});
-
-const type = ref("default");
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-const showCode3 = ref(false);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <!-- Default Collapse Example -->
-    <rs-card>
-      <template #header> Default </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan <code>rs-collapse</code> untuk menunjukkan collapse.
-          <code>rs-collapse-item</code> digunakan untuk menunjukkan item
-          collapse.
-        </p>
-        <rs-collapse>
-          <rs-collapse-item title="Collapse Item 1">
-            <p class="text-justify">
-              Lorem Ipsum adalah teks rekaan semata-mata dalam industri
-              percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
-              rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
-              dikenali mengambil alih sebatang jenis dan mengocoknya untuk
-              membuat buku spesimen jenis.
-            </p>
-          </rs-collapse-item>
-          <rs-collapse-item title="Collapse Item 2">
-            <p>Kandungan Collapse Item 2</p>
-          </rs-collapse-item>
-        </rs-collapse>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode1" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-collapse&gt;
-                          &lt;rs-collapse-item title="Collapse Item 1"&gt;
-                            &lt;p class="text-justify"&gt;
-                              Lorem Ipsum adalah teks rekaan semata-mata dalam industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks rekaan piawai industri sejak 1500-an.
-                            &lt;/p&gt;
-                          &lt;/rs-collapse-item&gt;
-                          &lt;rs-collapse-item title="Collapse Item 2"&gt;
-                            &lt;p&gt;Kandungan Collapse Item 2&lt;/p&gt;
-                          &lt;/rs-collapse-item&gt;
-                        &lt;/rs-collapse&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Accordion Example -->
-    <rs-card>
-      <template #header> Accordion </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan prop <code>accordion</code> kepada
-          <code>rs-collapse</code> untuk menjadikannya sebagai accordion.
-        </p>
-        <rs-collapse accordion>
-          <rs-collapse-item title="Accordion Item 1">
-            <p class="text-justify">
-              Lorem Ipsum adalah teks rekaan semata-mata dalam industri
-              percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
-              rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
-              dikenali mengambil alih sebatang jenis dan mengocoknya untuk
-              membuat buku spesimen jenis.
-            </p>
-          </rs-collapse-item>
-          <rs-collapse-item title="Accordion Item 2">
-            <p>Kandungan Accordion Item 2</p>
-          </rs-collapse-item>
-        </rs-collapse>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-collapse accordion&gt;
-                          &lt;rs-collapse-item title="Accordion Item 1"&gt;
-                            &lt;p class="text-justify"&gt;
-                              Lorem Ipsum adalah teks rekaan semata-mata dalam industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks rekaan piawai industri sejak 1500-an.
-                            &lt;/p&gt;
-                          &lt;/rs-collapse-item&gt;
-                          &lt;rs-collapse-item title="Accordion Item 2"&gt;
-                            &lt;p&gt;Kandungan Accordion Item 2&lt;/p&gt;
-                          &lt;/rs-collapse-item&gt;
-                        &lt;/rs-collapse&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Type Example -->
-    <rs-card>
-      <template #header> Jenis </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan prop <code>type</code> kepada <code>rs-collapse</code> untuk
-          menetapkan jenisnya. Jenis boleh menjadi <code>default</code>,
-          <code>border</code>, dan <code>card</code>.
-        </p>
-        <FormKit
-          v-model="type"
-          type="radio"
-          label="Jenis"
-          :options="[
-            { label: 'Default', value: 'default' },
-            { label: 'Border', value: 'border' },
-            { label: 'Card', value: 'card' },
-          ]"
-        />
-        <rs-collapse :type="type">
-          <rs-collapse-item title="Collapse Item 1">
-            <p class="text-justify">
-              Lorem Ipsum adalah teks rekaan semata-mata dalam industri
-              percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
-              rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
-              dikenali mengambil alih sebatang jenis dan mengocoknya untuk
-              membuat buku spesimen jenis.
-            </p>
-          </rs-collapse-item>
-          <rs-collapse-item title="Collapse Item 2">
-            <p>Kandungan Collapse Item 2</p>
-          </rs-collapse-item>
-          <rs-collapse-item title="Collapse Item 3">
-            <p>Kandungan Collapse Item 3</p>
-          </rs-collapse-item>
-        </rs-collapse>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode3" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code3')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code3']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code3"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code3" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;!-- Default Styling('default') --&gt;
-                        &lt;rs-collapse&gt;
-                          &lt;rs-collapse-item title="Collapse Item 1"&gt;
-                            Kandungan Collapse Item 1
-                          &lt;/rs-collapse-item&gt;
-                          &lt;rs-collapse-item title="Collapse Item 2"&gt;
-                            Kandungan Collapse Item 2
-                          &lt;/rs-collapse-item&gt;
-                        &lt;/rs-collapse&gt;
-
-                        &lt;!-- Border Styling('border') --&gt;
-                        &lt;rs-collapse type="border"&gt;
-                          &lt;rs-collapse-item title="Collapse Item 1"&gt;
-                            Kandungan Collapse Item 1
-                          &lt;/rs-collapse-item&gt;
-                          &lt;rs-collapse-item title="Collapse Item 2"&gt;
-                            Kandungan Collapse Item 2
-                          &lt;/rs-collapse-item&gt;
-                        &lt;/rs-collapse&gt;
-
-                        &lt;!-- Card Styling('card') --&gt;
-                        &lt;rs-collapse type="card"&gt;
-                          &lt;rs-collapse-item title="Collapse Item 1"&gt;
-                            Kandungan Collapse Item 1
-                          &lt;/rs-collapse-item&gt;
-                          &lt;rs-collapse-item title="Collapse Item 2"&gt;
-                            Kandungan Collapse Item 2
-                          &lt;/rs-collapse-item&gt;
-                        &lt;/rs-collapse&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/komponen/dropdown/index.vue b/pages/komponen/dropdown/index.vue
deleted file mode 100644
index 95bde0e..0000000
--- a/pages/komponen/dropdown/index.vue
+++ /dev/null
@@ -1,657 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Dropdown",
-});
-
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-const showCode3 = ref(false);
-const showCode4 = ref(false);
-const showCode5 = ref(false);
-const tooltips = ref({});
-
-const dropdownItems = [
-  {
-    label: "Item 1 - Application",
-    route: { name: "dashboard" },
-  },
-  {
-    label: "Item 2 - Dashboard",
-    route: { name: "dashboard" },
-  },
-  {
-    label: "Item 3 - Items",
-    route: { name: "dashboard" },
-  },
-];
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch(() => {
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header> Dropdown Biasa </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan <code>rs-dropdown</code> untuk menunjukkan dropdown.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-dropdown title="Biasa" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-
-          <rs-dropdown title="Divider" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item divider> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-        </div>
-
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode1" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt;
-                        &lt;rs-dropdown title="Biasa"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Divider"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item divider&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Variasi </template>
-      <template #body>
-        <p class="mb-4">
-          Variasi dropdown menggunakan prop <code>variant</code> untuk menukar
-          warna butang.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-dropdown title="Primary" variant="primary" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Info" variant="info" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Success" variant="success" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Warning" variant="warning" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Danger" variant="danger" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt;
-                        &lt;rs-dropdown title="Primary" variant="primary"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Info" variant="info"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Success" variant="success"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Warning" variant="warning"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Danger" variant="danger"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Jenis Variasi </template>
-      <template #body>
-        <p class="mb-4">
-          Variasi dropdown menggunakan prop <code>variant</code> untuk menukar
-          warna butang.
-        </p>
-
-        <!-- Fill Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Fill
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-dropdown title="Primary" variant="primary" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Info" variant="info" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Success" variant="success" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Warning" variant="warning" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Danger" variant="danger" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-          </div>
-        </div>
-
-        <!-- Outline Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Outline
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-dropdown title="Primary" variant="primary-outline" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Info" variant="info-outline" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Success" variant="success-outline" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Warning" variant="warning-outline" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Danger" variant="danger-outline" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-          </div>
-        </div>
-
-        <!-- Text Button -->
-        <div class="my-6">
-          <div
-            class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
-          >
-            Text
-          </div>
-          <div class="flex flex-wrap items-center justify-start gap-x-6">
-            <rs-dropdown title="Primary" variant="primary-text" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Info" variant="info-text" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Success" variant="success-text" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Warning" variant="warning-text" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-            <rs-dropdown title="Danger" variant="danger-text" class="mb-2">
-              <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-              <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-            </rs-dropdown>
-          </div>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode3" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code3')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code3']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code3"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code3" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt;
-                        &lt;!-- Fill Dropdown --&gt;
-                        &lt;rs-dropdown title="Primary" variant="primary"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Info" variant="info"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Success" variant="success"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Warning" variant="warning"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Danger" variant="danger"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-
-                        &lt;!-- Outline Dropdown --&gt;
-                        &lt;rs-dropdown title="Primary" variant="primary-outline"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Info" variant="info-outline"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Success" variant="success-outline"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Warning" variant="warning-outline"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Danger" variant="danger-outline"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-
-                        &lt;!-- Text Dropdown --&gt;
-                        &lt;rs-dropdown title="Primary" variant="primary-text"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Info" variant="info-text"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Success" variant="success-text"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Warning" variant="warning-text"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Danger" variant="danger-text"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Kedudukan </template>
-      <template #body>
-        <p class="mb-4">
-          Kedudukan dropdown menggunakan prop <code>position</code> untuk
-          menukar kedudukan item dropdown.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-dropdown title="Bawah" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Atas" position="top" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Kiri" position="left" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Kanan" position="right" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode4 ? (showCode4 = false) : (showCode4 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode4" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code4')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code4']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code4"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code4" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt;
-                        &lt;rs-dropdown title="Bawah"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Atas" position="top"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Kiri" position="left"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Kanan" position="right"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Saiz </template>
-      <template #body>
-        <p class="mb-4">
-          Saiz dropdown menggunakan prop <code>size</code> untuk menukar saiz
-          butang dropdown.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-dropdown title="Kecil" size="sm" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Sederhana" size="md" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-          <rs-dropdown title="Besar" size="lg" class="mb-2">
-            <rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
-            <rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
-          </rs-dropdown>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode5 ? (showCode5 = false) : (showCode5 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="z-0" v-show="showCode5" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code5')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code5']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code5"] }}
-                  </span>
-                </transition>
-
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code5" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt;
-                        &lt;rs-dropdown title="Kecil" size="sm"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Sederhana" size="md"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                        &lt;rs-dropdown title="Besar" size="lg"&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 1 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 2 &lt;/rs-dropdown-item&gt;
-                          &lt;rs-dropdown-item&gt; Pilihan 3 &lt;/rs-dropdown-item&gt;
-                        &lt;/rs-dropdown&gt;
-                      &lt;/template&gt;
-
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/komponen/lencana/index.vue b/pages/komponen/lencana/index.vue
deleted file mode 100644
index 29929b6..0000000
--- a/pages/komponen/lencana/index.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Lencana",
-});
-
-const showCode = ref(false);
-const showCode2 = ref(false);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header>
-        <h5>Lencana Biasa</h5>
-      </template>
-      <template #body>
-        <p class="mb-2">
-          Gunakan <code>rs-badge</code> untuk menunjukkan lencana.
-        </p>
-        <div class="grid grid-cols-3 md:grid-cols-6 gap-4 gap-y-0">
-          <rs-badge variant="primary" class="mb-4"> Primary </rs-badge>
-          <rs-badge variant="info" class="mb-4"> Info </rs-badge>
-          <rs-badge variant="success" class="mb-4"> Success </rs-badge>
-          <rs-badge variant="warning" class="mb-4"> Warning </rs-badge>
-          <rs-badge variant="danger" class="mb-4"> Danger </rs-badge>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode ? (showCode = false) : (showCode = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code1" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-badge variant="primary"&gt;Primary&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="info"&gt;Info&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="success"&gt;Success&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="warning"&gt;Warning&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="danger"&gt;Danger&lt;/rs-badge&gt;
-                      &lt;/template&gt;
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Badges with Icon -->
-    <rs-card>
-      <template #header>
-        <h5>Lencana dengan Ikon</h5>
-      </template>
-      <template #body>
-        <p class="mb-2">
-          Sertakan props <code>icon</code> kepada <code>rs-badge</code> untuk
-          menunjukkan lencana dengan ikon.
-        </p>
-        <div class="grid grid-cols-3 md:grid-cols-6 gap-4 gap-y-0">
-          <rs-badge
-            variant="primary"
-            icon="material-symbols:star-outline-rounded"
-            class="mb-4"
-          >
-            Primary
-          </rs-badge>
-          <rs-badge
-            variant="info"
-            icon="material-symbols:star-outline-rounded"
-            class="mb-4"
-          >
-            Info
-          </rs-badge>
-          <rs-badge
-            variant="success"
-            icon="material-symbols:star-outline-rounded"
-            class="mb-4"
-          >
-            Success
-          </rs-badge>
-          <rs-badge
-            variant="warning"
-            icon="material-symbols:star-outline-rounded"
-            class="mb-4"
-          >
-            Warning
-          </rs-badge>
-          <rs-badge
-            variant="danger"
-            icon="material-symbols:star-outline-rounded"
-            class="mb-4"
-          >
-            Danger
-          </rs-badge>
-        </div>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-                <NuxtScrollbar style="max-height: 300px">
-                  <pre id="code2" class="language-html shadow-none">
-                    <code>
-                      &lt;template&gt; 
-                        &lt;rs-badge variant="primary" icon="material-symbols:star-outline-rounded"&gt;Primary&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="info" icon="material-symbols:star-outline-rounded"&gt;Info&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="success" icon="material-symbols:star-outline-rounded"&gt;Success&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="warning" icon="material-symbols:star-outline-rounded"&gt;Warning&lt;/rs-badge&gt;
-                        &lt;rs-badge variant="danger" icon="material-symbols:star-outline-rounded"&gt;Danger&lt;/rs-badge&gt;
-                      &lt;/template&gt;
-                      &lt;script setup&gt;&lt;/script&gt;
-                    </code>
-                  </pre>
-                </NuxtScrollbar>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>
diff --git a/pages/komponen/modal/index.vue b/pages/komponen/modal/index.vue
deleted file mode 100644
index 4566e22..0000000
--- a/pages/komponen/modal/index.vue
+++ /dev/null
@@ -1,549 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Modal",
-});
-
-const showModal = ref({
-  modal1: false,
-  modal2: false,
-  modal3: false,
-  modal4: false,
-  modal5: false,
-  modal6: false,
-  modal7: false,
-  modal8: false,
-  modal9: false,
-  modal10: false,
-  modal11: false,
-  modal12: false,
-  modal13: false,
-  modal14: false,
-});
-
-const showCode = ref({
-  code1: false,
-  code2: false,
-  code3: false,
-  code4: false,
-  code5: false,
-});
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-
-const clickOK = () => {
-  alert("Anda telah klik OK");
-};
-
-const clickCancel = () => {
-  alert("Anda telah klik Batal");
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <!-- Default Modal -->
-    <rs-card>
-      <template #header>Default</template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>rs-modal</code> untuk menunjukkan/menyembunyikan modal.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button @click="showModal.modal1 = true"
-            >Tunjukkan Modal</rs-button
-          >
-          <rs-button @click="showModal.modal9 = true"
-            >Sembunyikan Overlay</rs-button
-          >
-          <rs-button @click="showModal.modal14 = true">
-            Persistent Overlay
-          </rs-button>
-        </div>
-        <rs-modal title="Ini adalah modal" v-model="showModal.modal1">
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          v-model="showModal.modal9"
-          hide-overlay
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          v-model="showModal.modal14"
-          :overlayClose="false"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="
-              showCode.code1
-                ? (showCode.code1 = false)
-                : (showCode.code1 = true)
-            "
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode.code1" v-highlight>
-              <button
-                @click="copyCode('code1')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code1']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code1"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code1" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-button @click="showModal.modal1 = true"&gt;Tunjukkan Modal&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal1"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal2 = true"&gt;Sembunyikan Overlay&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal2" hide-overlay&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal3 = true"&gt;Persistent Overlay&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal3" :overlayClose="false"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;
-                    const showModal = ref({
-                      modal1: false,
-                      modal2: false,
-                      modal3: false,
-                    });
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Size Modal -->
-    <rs-card>
-      <template #header>Saiz</template>
-      <template #body>
-        <p class="mb-4">
-          Saiz modal menggunakan prop <code>size</code> untuk menukar saiz
-          modal. Terdapat 3 saiz: <code>sm</code>, <code>md</code>, dan
-          <code>lg</code>. Saiz lalai ialah <code>md</code>.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button @click="showModal.modal2 = true">Saiz Kecil</rs-button>
-          <rs-button @click="showModal.modal3 = true">Saiz Sederhana</rs-button>
-          <rs-button @click="showModal.modal4 = true">Saiz Besar</rs-button>
-        </div>
-        <rs-modal title="Ini adalah modal" size="sm" v-model="showModal.modal2">
-          Ini adalah kandungan modal kecil.
-        </rs-modal>
-        <rs-modal title="Ini adalah modal" size="md" v-model="showModal.modal3">
-          Ini adalah kandungan modal sederhana.
-        </rs-modal>
-        <rs-modal title="Ini adalah modal" size="lg" v-model="showModal.modal4">
-          Ini adalah kandungan modal besar.
-        </rs-modal>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="
-              showCode.code2
-                ? (showCode.code2 = false)
-                : (showCode.code2 = true)
-            "
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode.code2" v-highlight>
-              <button
-                @click="copyCode('code2')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code2']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code2"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code2" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-button @click="showModal.modal2 = true"&gt;Saiz Kecil&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" size="sm" v-model="showModal.modal2"&gt;
-                        Ini adalah kandungan modal kecil.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal3 = true"&gt;Saiz Sederhana&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" size="md" v-model="showModal.modal3"&gt;
-                        Ini adalah kandungan modal sederhana.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal4 = true"&gt;Saiz Besar&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" size="lg" v-model="showModal.modal4"&gt;
-                        Ini adalah kandungan modal besar.
-                      &lt;/rs-modal&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;
-                    const showModal = ref({
-                      modal2: false,
-                      modal3: false,
-                      modal4: false,
-                    });
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Position Modal -->
-    <rs-card>
-      <template #header>Kedudukan</template>
-      <template #body>
-        <p class="mb-4">
-          Kedudukan modal menggunakan prop <code>position</code> untuk menukar
-          kedudukan modal. Terdapat 3 kedudukan: <code>top</code>,
-          <code>center</code>, dan <code>bottom</code>.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button @click="showModal.modal5 = true">Atas</rs-button>
-          <rs-button @click="showModal.modal6 = true">Tengah</rs-button>
-          <rs-button @click="showModal.modal7 = true">Bawah</rs-button>
-        </div>
-        <rs-modal
-          title="Ini adalah modal"
-          position="top"
-          v-model="showModal.modal5"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          position="center"
-          v-model="showModal.modal6"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          position="bottom"
-          v-model="showModal.modal7"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="
-              showCode.code3
-                ? (showCode.code3 = false)
-                : (showCode.code3 = true)
-            "
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode.code3" v-highlight>
-              <button
-                @click="copyCode('code3')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code3']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code3"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code3" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-button @click="showModal.modal5 = true"&gt;Atas&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" position="top" v-model="showModal.modal5"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal6 = true"&gt;Tengah&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" position="center" v-model="showModal.modal6"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal7 = true"&gt;Bawah&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" position="bottom" v-model="showModal.modal7"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;
-                    const showModal = ref({
-                      modal5: false,
-                      modal6: false,
-                      modal7: false,
-                    });
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Customize Modal -->
-    <rs-card>
-      <template #header>Sesuaikan</template>
-      <template #body>
-        <p class="mb-4 text-justify">
-          Tajuk, badan dan footer modal boleh disesuaikan dengan menggunakan
-          slot templat. Slot tajuk dinamakan <code>header</code>, slot badan
-          dinamakan <code>body</code> dan slot footer dinamakan
-          <code>footer</code>. Tajuk OK boleh disesuaikan dengan menggunakan
-          prop <code>ok-title</code>. Tajuk lalai ialah <code>OK</code>. Tajuk
-          Batal boleh disesuaikan dengan menggunakan prop
-          <code>cancel-title</code>. Tajuk lalai ialah <code>Batal</code>.
-          Butang OK dan batal boleh disembunyikan dengan menggunakan prop
-          <code>ok-only</code> atau <code>cancel-only</code>. Nilai lalai ialah
-          <code>false</code> untuk kedua-duanya.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button @click="showModal.modal8 = true"
-            >Tunjukkan Modal</rs-button
-          >
-          <rs-button @click="showModal.modal10 = true"
-            >Butang Tersuai</rs-button
-          >
-          <rs-button @click="showModal.modal11 = true">OK Sahaja</rs-button>
-          <rs-button @click="showModal.modal12 = true">Batal Sahaja</rs-button>
-        </div>
-        <rs-modal title="Ini adalah modal" v-model="showModal.modal8">
-          <template #header> Tajuk Tersuai </template>
-          <template #body> Badan Tersuai </template>
-          <template #footer> Footer Tersuai </template>
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          v-model="showModal.modal10"
-          cancel-title="Tutup"
-          ok-title="Terima"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal title="Ini adalah modal" v-model="showModal.modal11" ok-only>
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <rs-modal
-          title="Ini adalah modal"
-          v-model="showModal.modal12"
-          cancel-only
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="
-              showCode.code4
-                ? (showCode.code4 = false)
-                : (showCode.code4 = true)
-            "
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode.code4" v-highlight>
-              <button
-                @click="copyCode('code4')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code4']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code4"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code4" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-button @click="showModal.modal8 = true"&gt;Tunjukkan Modal&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal8"&gt;
-                        &lt;template #header&gt; Tajuk Tersuai &lt;/template&gt;
-                        &lt;template #body&gt; Badan Tersuai &lt;/template&gt;
-                        &lt;template #footer&gt; Footer Tersuai &lt;/template&gt;
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal10 = true"&gt;Butang Tersuai&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal10" cancel-title="Tutup" ok-title="Terima"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal11 = true"&gt;OK Sahaja&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal11" ok-only&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                      &lt;rs-button @click="showModal.modal12 = true"&gt;Batal Sahaja&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal12" cancel-only&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;
-                    const showModal = ref({
-                      modal8: false,
-                      modal10: false,
-                      modal11: false,
-                      modal12: false,
-                    });
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Bind Function Modal -->
-    <rs-card>
-      <template #header>Bind Fungsi</template>
-      <template #body>
-        <p class="mb-4">
-          Anda boleh mengikat fungsi untuk butang OK dan batal dalam modal
-          dengan menggunakan prop <code>ok-callback</code> dan
-          <code>cancel-callback</code>.
-        </p>
-        <div class="flex flex-wrap items-center justify-start gap-x-6">
-          <rs-button @click="showModal.modal13 = true">Bind Fungsi</rs-button>
-        </div>
-        <rs-modal
-          title="Ini adalah modal"
-          v-model="showModal.modal13"
-          :ok-callback="clickOK"
-          :cancel-callback="clickCancel"
-        >
-          Ini adalah kandungan modal.
-        </rs-modal>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="
-              showCode.code5
-                ? (showCode.code5 = false)
-                : (showCode.code5 = true)
-            "
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode.code5" v-highlight>
-              <button
-                @click="copyCode('code5')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code5']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code5"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code5" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-button @click="showModal.modal13 = true"&gt;Bind Fungsi&lt;/rs-button&gt;
-                      &lt;rs-modal title="Ini adalah modal" v-model="showModal.modal13" :ok-callback="clickOK" :cancel-callback="clickCancel"&gt;
-                        Ini adalah kandungan modal.
-                      &lt;/rs-modal&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;
-                    const showModal = ref({
-                      modal13: false,
-                    });
-
-                    const clickOK = () => {
-                      alert("Anda telah klik OK");
-                    };
-
-                    const clickCancel = () => {
-                      alert("Anda telah klik Batal");
-                    };
-                    &lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/komponen/progress-bar/index.vue b/pages/komponen/progress-bar/index.vue
deleted file mode 100644
index ee992be..0000000
--- a/pages/komponen/progress-bar/index.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Progress Bar",
-});
-
-const showCode1 = ref(false);
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header> Default </template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan komponen <code>rs-progress-bar</code> untuk membuat bar
-          kemajuan. Terdapat prop untuk menukar warna, saiz, maksimum,
-          menunjukkan nilai, dan nilai.
-        </p>
-        <rs-progress-bar
-          label="Primary Progress"
-          :value="11"
-          :max="100"
-          variant="primary"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <rs-progress-bar
-          label="Secondary Progress"
-          :value="43"
-          :max="100"
-          variant="secondary"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <rs-progress-bar
-          label="Success Progress"
-          :value="45"
-          :max="100"
-          variant="success"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <rs-progress-bar
-          label="Danger Progress"
-          :value="90"
-          :max="100"
-          variant="danger"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <rs-progress-bar
-          label="Warning Progress"
-          :value="36"
-          :max="100"
-          variant="warning"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <rs-progress-bar
-          label="Info Progress"
-          :value="25"
-          :max="100"
-          variant="info"
-          size="md"
-          :show-value="true"
-        ></rs-progress-bar>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode1" v-highlight>
-              <button
-                @click="copyCode('code1')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code1']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code1"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code1" class="language-html shadow-none">
-                  <code>
-                    &lt;template&gt; 
-                      &lt;rs-progress-bar 
-                          label="Primary Progress"
-                          :value="11"
-                          :max="100"
-                          variant="primary|secondary|success|danger|warning|info"
-                          size="md|sm|lg"
-                          :show-value="true|false"
-                      &gt;&lt;/rs-progress-bar&gt;
-                    &lt;/template&gt;
-
-                    &lt;script setup&gt;&lt;/script&gt;
-                  </code>
-                </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/komponen/tab/index.vue b/pages/komponen/tab/index.vue
deleted file mode 100644
index 4524e94..0000000
--- a/pages/komponen/tab/index.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Tab",
-});
-
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-const showCode3 = ref(false);
-const vertical = ref(false);
-const type = ref("default");
-const variant = ref("primary");
-const fill = ref(false);
-const justify = ref("left");
-
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    navigator.clipboard
-      .writeText(codeElement.textContent)
-      .then(() => {
-        console.log("Kod disalin ke papan klip");
-        showTooltip(codeId, "Kod disalin!");
-      })
-      .catch((err) => {
-        console.error("Gagal menyalin kod: ", err);
-        showTooltip(codeId, "Gagal menyalin kod");
-      });
-  }
-};
-
-const showTooltip = (codeId, message) => {
-  tooltips.value[codeId] = message;
-  setTimeout(() => {
-    tooltips.value[codeId] = null;
-  }, 2000); // Hide tooltip after 2 seconds
-};
-
-const variantOptions = [
-  { label: "Primary", value: "primary" },
-  { label: "Secondary", value: "secondary" },
-  { label: "Success", value: "success" },
-  { label: "Danger", value: "danger" },
-  { label: "Warning", value: "warning" },
-  { label: "Info", value: "info" },
-];
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-    <rs-card>
-      <template #header> Default </template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan <code>rs-tab</code> untuk membuat antara muka berasaskan tab.
-          <code>rs-tab-item</code> digunakan untuk membuat setiap tab.
-        </p>
-        <rs-tab>
-          <rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
-          <rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
-          <rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
-        </rs-tab>
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode1" v-highlight>
-              <button
-                @click="copyCode('code1')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code1']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code1"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code1" class="language-html shadow-none">
-            <code>
-              &lt;template&gt; 
-                &lt;rs-tab&gt;
-                  &lt;rs-tab-item title="Tab 1"&gt; Tab 1 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 2"&gt; Tab 2 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 3"&gt; Tab 3 &lt;/rs-tab-item&gt;
-                &lt;/rs-tab&gt;
-              &lt;/template&gt;
-
-              &lt;script setup&gt;&lt;/script&gt;
-            </code>
-          </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Tab Menegak </template>
-      <template #body>
-        <p class="mb-4">
-          Gunakan props <code>vertical</code> untuk membuat antara muka tab
-          menegak.
-        </p>
-        <rs-tab vertical>
-          <rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
-          <rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
-          <rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
-        </rs-tab>
-
-        <div class="flex justify-end">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode2" v-highlight>
-              <button
-                @click="copyCode('code2')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code2']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code2"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code2" class="language-html shadow-none">
-            <code>
-              &lt;template&gt; 
-                &lt;rs-tab vertical&gt;
-                  &lt;rs-tab-item title="Tab 1"&gt; Tab 1 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 2"&gt; Tab 2 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 3"&gt; Tab 3 &lt;/rs-tab-item&gt;
-                &lt;/rs-tab&gt;
-              &lt;/template&gt;
-
-              &lt;script setup&gt;&lt;/script&gt;
-            </code>
-          </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <rs-card>
-      <template #header> Penggayaan </template>
-      <template #body>
-        <p class="mb-4">
-          Tab boleh digayakan menggunakan props <code>variant</code> dan
-          <code>type</code>. Prop <code>type</code> boleh digunakan untuk
-          membuat tab gaya kad dan sempadan. Prop <code>variant</code> boleh
-          digunakan untuk menukar warna tab.
-        </p>
-        <div class="flex flex-wrap gap-x-5">
-          <FormKit
-            label="Varian"
-            type="radio"
-            v-model="variant"
-            :options="variantOptions"
-            :classes="{
-              options: 'flex flex-wrap gap-4 pt-2',
-              fieldset: 'px-4 py-0 max-w-full',
-            }"
-          />
-
-          <FormKit
-            v-model="type"
-            type="radio"
-            label="Jenis"
-            :options="[
-              { label: 'Default', value: 'default' },
-              { label: 'Border', value: 'border' },
-              { label: 'Card', value: 'card' },
-            ]"
-            :classes="{
-              options: 'flex flex-wrap gap-4 pt-2',
-              fieldset: 'px-4 py-0 max-w-full',
-            }"
-          />
-          <FormKit
-            v-model="vertical"
-            type="radio"
-            label="Menegak"
-            :options="[
-              { label: 'False', value: false },
-              { label: 'True', value: true },
-            ]"
-            :classes="{
-              options: 'flex flex-wrap gap-4 pt-2',
-              fieldset: 'px-4 py-0 max-w-full',
-            }"
-          />
-          <FormKit
-            v-model="fill"
-            type="radio"
-            label="Isian"
-            :options="[
-              { label: 'False', value: false },
-              { label: 'True', value: true },
-            ]"
-            :classes="{
-              options: 'flex flex-wrap gap-4 pt-2',
-              fieldset: 'px-4 py-0 max-w-full',
-            }"
-          />
-          <FormKit
-            v-model="justify"
-            type="radio"
-            label="Justifikasi"
-            :options="[
-              { label: 'Kiri', value: 'left' },
-              { label: 'Tengah', value: 'center' },
-              { label: 'Kanan', value: 'right' },
-            ]"
-            :classes="{
-              options: 'flex flex-wrap gap-4 pt-2',
-              fieldset: 'px-4 py-0 max-w-full',
-            }"
-          />
-        </div>
-
-        <rs-tab
-          :variant="variant"
-          :type="type"
-          :fill="fill"
-          :justify="justify"
-          :vertical="vertical"
-        >
-          <rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
-          <rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
-          <rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
-        </rs-tab>
-        <div class="flex justify-end mt-4">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div class="relative" v-show="showCode3" v-highlight>
-              <button
-                @click="copyCode('code3')"
-                class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-              >
-                Salin Kod
-              </button>
-              <transition name="tooltip">
-                <span
-                  v-if="tooltips['code3']"
-                  class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                >
-                  {{ tooltips["code3"] }}
-                </span>
-              </transition>
-              <NuxtScrollbar style="max-height: 300px">
-                <pre id="code3" class="language-html shadow-none">
-            <code>
-              &lt;template&gt; 
-                &lt;rs-tab 
-                    variant="primary|secondary|info|success|warning|danger" 
-                    type="default|border|card"
-                    justify="left|center|right"
-                    fill
-                    vertical&gt;
-                  &lt;rs-tab-item title="Tab 1"&gt; Tab 1 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 2"&gt; Tab 2 &lt;/rs-tab-item&gt;
-                  &lt;rs-tab-item title="Tab 3"&gt; Tab 3 &lt;/rs-tab-item&gt;
-                &lt;/rs-tab&gt;
-              &lt;/template&gt;
-
-              &lt;script setup&gt;&lt;/script&gt;
-            </code>
-          </pre>
-              </NuxtScrollbar>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/laporan/index.vue b/pages/laporan/index.vue
deleted file mode 100644
index 47912df..0000000
--- a/pages/laporan/index.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Laporan Penerbangan",
-  breadcrumb: [
-    {
-      name: "Laporan Penerbangan",
-      type: "current",
-    },
-  ],
-});
-
-const data = ref([
-  {
-    namaDepan: "Ahmad",
-    namaBelakang: "Abdullah",
-    lapangan: "KLIA",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-15 08:30",
-    status: "Tiba",
-  },
-  {
-    namaDepan: "Siti",
-    namaBelakang: "Aminah",
-    lapangan: "Lapangan Terbang Antarabangsa Bayan Lepas",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-16 14:45",
-    status: "Masih dalam penerbangan",
-  },
-  {
-    namaDepan: "Mohd",
-    namaBelakang: "Razak",
-    lapangan: "Lapangan Terbang Sultan Abdul Aziz Shah",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-17 10:15",
-    status: "Terlepas",
-  },
-  {
-    namaDepan: "Nurul",
-    namaBelakang: "Huda",
-    lapangan: "Lapangan Terbang Antarabangsa Kota Kinabalu",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-18 16:20",
-    status: "Dibatalkan",
-  },
-  {
-    namaDepan: "Tan",
-    namaBelakang: "Wei Ling",
-    lapangan: "Lapangan Terbang Antarabangsa Kuching",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-19 09:00",
-    status: "Tiba",
-  },
-  {
-    namaDepan: "Amir",
-    namaBelakang: "Hassan",
-    lapangan: "KLIA",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-20 11:30",
-    status: "Masih dalam penerbangan",
-  },
-  {
-    namaDepan: "Farah",
-    namaBelakang: "Lim",
-    lapangan: "Lapangan Terbang Antarabangsa Penang",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-21 13:45",
-    status: "Tiba",
-  },
-  {
-    namaDepan: "Zain",
-    namaBelakang: "Ismail",
-    lapangan: "Lapangan Terbang Antarabangsa Langkawi",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-22 07:15",
-    status: "Terlepas",
-  },
-  {
-    namaDepan: "Lily",
-    namaBelakang: "Wong",
-    lapangan: "Lapangan Terbang Antarabangsa Senai",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-23 18:00",
-    status: "Tiba",
-  },
-  {
-    namaDepan: "Ravi",
-    namaBelakang: "Kumar",
-    lapangan: "KLIA",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-24 10:30",
-    status: "Dibatalkan",
-  },
-  {
-    namaDepan: "Aishah",
-    namaBelakang: "Yusof",
-    lapangan: "Lapangan Terbang Sultan Abdul Halim",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-25 12:45",
-    status: "Tiba",
-  },
-  {
-    namaDepan: "Chong",
-    namaBelakang: "Wei Ming",
-    lapangan: "Lapangan Terbang Antarabangsa Kota Kinabalu",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-26 15:20",
-    status: "Masih dalam penerbangan",
-  },
-  {
-    namaDepan: "Salmah",
-    namaBelakang: "Othman",
-    lapangan: "Lapangan Terbang Antarabangsa Kuching",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-27 09:10",
-    status: "Terlepas",
-  },
-  {
-    namaDepan: "Raj",
-    namaBelakang: "Muthu",
-    lapangan: "KLIA",
-    jenisPenerbangan: "Berlepas",
-    tarikhMasa: "2023-06-28 14:00",
-    status: "Masih dalam penerbangan",
-  },
-  {
-    namaDepan: "Noor",
-    namaBelakang: "Aziz",
-    lapangan: "Lapangan Terbang Antarabangsa Bayan Lepas",
-    jenisPenerbangan: "Ketibaan",
-    tarikhMasa: "2023-06-29 17:30",
-    status: "Tiba",
-  },
-]);
-
-const criteria = ref([
-  {
-    label: "Nama Depan",
-    options: ["Ahmad", "Siti", "Mohd", "Nurul", "Tan"],
-  },
-  {
-    label: "Nama Belakang",
-    options: ["Abdullah", "Aminah", "Razak", "Huda", "Wei Ling"],
-  },
-  {
-    label: "Lapangan Terbang",
-    options: [
-      "KLIA",
-      "Lapangan Terbang Antarabangsa Bayan Lepas",
-      "Lapangan Terbang Sultan Abdul Aziz Shah",
-      "Lapangan Terbang Antarabangsa Kota Kinabalu",
-      "Lapangan Terbang Antarabangsa Kuching",
-    ],
-  },
-  {
-    label: "Tarikh",
-    options: [
-      "2023-06-15",
-      "2023-06-16",
-      "2023-06-17",
-      "2023-06-18",
-      "2023-06-19",
-    ],
-  },
-  {
-    label: "Status",
-    options: ["Tiba", "Masih dalam penerbangan", "Terlepas", "Dibatalkan"],
-  },
-]);
-
-const selectedCriteria = ref({
-  kriteria1: "",
-  kriteria2: "",
-  kriteria3: "",
-  kriteria4: "",
-  kriteria5: "",
-});
-
-const filteredData = ref([...data.value]);
-
-const performSearch = () => {
-  filteredData.value = data.value.filter((item) => {
-    return (
-      (!selectedCriteria.value.kriteria1 ||
-        item.namaDepan.includes(selectedCriteria.value.kriteria1)) &&
-      (!selectedCriteria.value.kriteria2 ||
-        item.namaBelakang.includes(selectedCriteria.value.kriteria2)) &&
-      (!selectedCriteria.value.kriteria3 ||
-        item.lapangan.includes(selectedCriteria.value.kriteria3)) &&
-      (!selectedCriteria.value.kriteria4 ||
-        item.tarikhMasa.includes(selectedCriteria.value.kriteria4)) &&
-      (!selectedCriteria.value.kriteria5 ||
-        item.status.includes(selectedCriteria.value.kriteria5))
-    );
-  });
-};
-
-const resetFilter = () => {
-  selectedCriteria.value = {
-    kriteria1: "",
-    kriteria2: "",
-    kriteria3: "",
-    kriteria4: "",
-    kriteria5: "",
-  };
-  filteredData.value = [...data.value];
-};
-</script>
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <rs-card>
-      <template #header> Laporan Penerbangan</template>
-      <template #body>
-        <FormKit type="form" :actions="false">
-          <div class="grid grid-cols-2 gap-4 mb-4">
-            <FormKit
-              v-for="(item, index) in criteria.slice(0, 2)"
-              :key="index"
-              type="select"
-              :name="item.label.toLowerCase().replace(' ', '_')"
-              :label="item.label"
-              :options="item.options"
-              v-model="selectedCriteria[`kriteria${index + 1}`]"
-              placeholder="Pilih pilihan"
-            >
-              <template #label>
-                <label
-                  class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
-                >
-                  {{ item.label }}
-                </label>
-              </template>
-            </FormKit>
-          </div>
-
-          <div class="grid grid-cols-3 gap-4">
-            <FormKit
-              v-for="(item, index) in criteria.slice(2)"
-              :key="index"
-              type="select"
-              :name="item.label.toLowerCase().replace(' ', '_')"
-              :label="item.label"
-              :options="item.options"
-              v-model="selectedCriteria[`kriteria${index + 3}`]"
-              placeholder="Pilih pilihan"
-            >
-              <template #label>
-                <label
-                  class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
-                >
-                  {{ item.label }}
-                </label>
-              </template>
-            </FormKit>
-          </div>
-
-          <div class="flex justify-end items-center gap-2">
-            <rs-button @click="resetFilter" variant="primary-outline"
-              >Tetapkan Semula</rs-button
-            >
-            <rs-button type="submit" @click="performSearch">
-              Hantar Laporan
-            </rs-button>
-          </div>
-        </FormKit>
-
-        <rs-table
-          class="mt-8"
-          :key="filteredData"
-          :data="filteredData"
-          :pageSize="100"
-        >
-          <template v-slot:status="data">
-            <rs-badge
-              :variant="
-                data.text === 'Tiba'
-                  ? 'success'
-                  : data.text === 'Masih dalam penerbangan'
-                  ? 'warning'
-                  : data.text === 'Terlepas'
-                  ? 'danger'
-                  : data.text === 'Dibatalkan'
-                  ? 'disabled'
-                  : 'default'
-              "
-            >
-              {{ data.text }}
-            </rs-badge>
-          </template>
-        </rs-table>
-      </template>
-    </rs-card>
-  </div>
-</template>
diff --git a/pages/senarai-mesej/index.vue b/pages/senarai-mesej/index.vue
deleted file mode 100644
index 05b65e6..0000000
--- a/pages/senarai-mesej/index.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Senarai Mesej",
-  breadcrumb: [
-    {
-      name: "Senarai Mesej",
-      type: "current",
-    },
-  ],
-});
-
-const messages = ref([
-  {
-    id: 1,
-    sender: "Admin",
-    subject: "Selamat Datang",
-    preview: "Selamat datang ke sistem mesej kami...",
-    content:
-      "Selamat datang ke sistem mesej kami. Kami berharap anda akan menikmati pengalaman menggunakan sistem ini. Jika ada sebarang pertanyaan, sila hubungi kami.",
-    date: "1-50 daripada 528",
-    isRead: true,
-  },
-  {
-    id: 2,
-    sender: "Spotify",
-    subject: "Tawaran Istimewa untuk Anda",
-    preview: "Dapatkan langganan premium dengan harga istimewa...",
-    content:
-      "Dapatkan langganan premium dengan harga istimewa! Hanya untuk masa yang terhad, nikmati muzik tanpa had dengan harga yang sangat berpatutan.",
-    date: "11:59 malam",
-    isRead: false,
-  },
-  {
-    id: 3,
-    sender: "Ahmad Zulkifli",
-    subject: "Mesyuarat Projek Baru",
-    preview: "Sila hadir ke mesyuarat projek baru pada...",
-    content:
-      "Sila hadir ke mesyuarat projek baru pada hari Isnin, 10 Julai 2023, jam 10 pagi di Bilik Mesyuarat Utama. Kita akan membincangkan perancangan dan pembahagian tugas untuk projek baru ini.",
-    date: "10:21 malam",
-    isRead: false,
-  },
-  {
-    id: 4,
-    sender: "Syarikat ABC",
-    subject: "Tawaran Kerja",
-    preview: "Kami dengan sukacitanya menawarkan anda jawatan...",
-    content:
-      "Kami dengan sukacitanya menawarkan anda jawatan Pengaturcara Kanan di Syarikat ABC. Sila baca lampiran untuk maklumat lanjut tentang tawaran ini dan hubungi kami jika anda mempunyai sebarang pertanyaan.",
-    date: "8:37 malam",
-    isRead: false,
-  },
-  {
-    id: 5,
-    sender: "Puan Mariam",
-    subject: "Peringatan: Bayaran Bil",
-    preview: "Ini adalah peringatan untuk pembayaran bil anda...",
-    content:
-      "Ini adalah peringatan untuk pembayaran bil anda yang telah tamat tempoh. Sila jelaskan bayaran sebelum 30 Jun 2023 untuk mengelakkan sebarang caj lewat.",
-    date: "4:38 petang",
-    isRead: false,
-  },
-]);
-
-const selectedMessages = ref([]);
-const currentMessage = ref(null);
-
-const selectMessage = (messageId) => {
-  const index = selectedMessages.value.indexOf(messageId);
-  if (index === -1) {
-    selectedMessages.value.push(messageId);
-  } else {
-    selectedMessages.value.splice(index, 1);
-  }
-};
-
-const deleteSelectedMessages = () => {
-  messages.value = messages.value.filter(
-    (message) => !selectedMessages.value.includes(message.id)
-  );
-  selectedMessages.value = [];
-  currentMessage.value = null;
-};
-
-const readMessage = (message) => {
-  currentMessage.value = message;
-  if (!message.isRead) {
-    message.isRead = true;
-  }
-};
-
-const closeMessage = () => {
-  currentMessage.value = null;
-};
-
-const addNewMessage = () => {
-  const newId = messages.value.length + 1;
-  const newMessage = {
-    id: newId,
-    sender: "New Sender",
-    subject: "New Subject",
-    preview: "This is a new message...",
-    content:
-      "This is the full content of the new message. You can edit this to add more details.",
-    date: new Date().toLocaleString(),
-    isRead: false,
-  };
-  messages.value.unshift(newMessage);
-};
-</script>
-
-<template>
-  <div class="bg-gray-100 min-h-screen">
-    <LayoutsBreadcrumb />
-
-    <div class="container mx-auto">
-      <rs-card>
-        <div class="flex items-center justify-between p-5">
-          <h2 class="text-xl font-semibold text-gray-800">Senarai Mesej</h2>
-          <div class="flex space-x-2">
-            <rs-button @click="addNewMessage" variant="success">
-              Tambah Mesej
-            </rs-button>
-            <rs-button
-              @click="deleteSelectedMessages"
-              variant="danger"
-              :disabled="selectedMessages.length === 0"
-            >
-              Buang ({{ selectedMessages.length }})
-            </rs-button>
-          </div>
-        </div>
-        <div class="divide-y divide-gray-200">
-          <div
-            v-for="message in messages"
-            :key="message.id"
-            @click="readMessage(message)"
-            class="flex items-center p-4 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer"
-            :class="{ 'bg-blue-50': selectedMessages.includes(message.id) }"
-          >
-            <input
-              type="checkbox"
-              :checked="selectedMessages.includes(message.id)"
-              @click.stop="selectMessage(message.id)"
-              class="mr-4 h-5 w-5 text-blue-600"
-            />
-            <div class="flex-grow">
-              <div class="flex items-center justify-between">
-                <span
-                  class="font-medium text-gray-900"
-                  :class="{ 'font-bold': !message.isRead }"
-                >
-                  {{ message.sender }}
-                </span>
-                <span class="text-sm text-gray-500">{{ message.date }}</span>
-              </div>
-              <div class="mt-1">
-                <span
-                  class="text-sm font-medium text-gray-900"
-                  :class="{ 'font-bold': !message.isRead }"
-                >
-                  {{ message.subject }}
-                </span>
-                <span class="text-sm text-gray-600">
-                  - {{ message.preview }}</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </rs-card>
-
-      <!-- Message Content Modal -->
-      <rs-modal v-model="currentMessage" title="Message Details">
-        <template v-if="currentMessage">
-          <p class="text-sm text-gray-600 mb-2">
-            From: {{ currentMessage.sender }}
-          </p>
-          <p class="text-sm text-gray-600 mb-4">
-            Date: {{ currentMessage.date }}
-          </p>
-          <div class="border-t pt-4">
-            <p class="text-gray-800">{{ currentMessage.content }}</p>
-          </div>
-        </template>
-      </rs-modal>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Add any additional styles here */
-</style>
diff --git a/pages/tipografi/index.vue b/pages/tipografi/index.vue
deleted file mode 100644
index 68ab7aa..0000000
--- a/pages/tipografi/index.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<script setup>
-definePageMeta({
-  title: "Tipografi",
-  breadcrumb: [
-    {
-      name: "Tipografi",
-      type: "current",
-    },
-  ],
-});
-
-const showCode1 = ref(false);
-const showCode2 = ref(false);
-const showCode3 = ref(false);
-const showCode4 = ref(false);
-const tooltips = ref({});
-
-const copyCode = (codeId) => {
-  const codeElement = document.getElementById(codeId);
-  if (codeElement) {
-    const codeText = codeElement.textContent;
-    navigator.clipboard.writeText(codeText).then(() => {
-      tooltips.value[codeId] = "Kod disalin!";
-      setTimeout(() => {
-        tooltips.value[codeId] = "";
-      }, 2000);
-    });
-  }
-};
-</script>
-
-<template>
-  <div>
-    <LayoutsBreadcrumb />
-
-    <rs-card>
-      <template #header> Tipografi </template>
-      <template #body>
-        <p class="mb-4">
-          Dokumentasi tipografi untuk pembangun untuk melihat dan menggunakan.
-        </p>
-      </template>
-    </rs-card>
-
-    <!-- Tajuk -->
-    <rs-card>
-      <template #header> Tajuk </template>
-      <template #body>
-        <div class="space-y-2">
-          <h1 class="text-4xl font-bold">Tajuk 1</h1>
-          <h2 class="text-3xl font-bold">Tajuk 2</h2>
-          <h3 class="text-2xl font-bold">Tajuk 3</h3>
-          <h4 class="text-xl font-bold">Tajuk 4</h4>
-          <h5 class="text-lg font-bold">Tajuk 5</h5>
-          <h6 class="text-base font-bold">Tajuk 6</h6>
-        </div>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode1" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code1')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code1']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code1"] }}
-                  </span>
-                </transition>
-                <pre id="code1" class="language-html">
-                  <code>
-&lt;h1 class="text-4xl font-bold"&gt;Tajuk 1&lt;/h1&gt;
-&lt;h2 class="text-3xl font-bold"&gt;Tajuk 2&lt;/h2&gt;
-&lt;h3 class="text-2xl font-bold"&gt;Tajuk 3&lt;/h3&gt;
-&lt;h4 class="text-xl font-bold"&gt;Tajuk 4&lt;/h4&gt;
-&lt;h5 class="text-lg font-bold"&gt;Tajuk 5&lt;/h5&gt;
-&lt;h6 class="text-base font-bold"&gt;Tajuk 6&lt;/h6&gt;
-                  </code>
-                </pre>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Perenggan -->
-    <rs-card>
-      <template #header> Perenggan </template>
-      <template #body>
-        <p class="mb-2">
-          Ini adalah perenggan lalai. Ia menggunakan saiz fon asas dan
-          ketinggian baris.
-        </p>
-        <p class="text-sm mb-2">
-          Ini adalah perenggan kecil menggunakan kelas text-sm.
-        </p>
-        <p class="text-lg mb-2">
-          Ini adalah perenggan besar menggunakan kelas text-lg.
-        </p>
-        <p class="font-light mb-2">Ini adalah perenggan berat ringan.</p>
-        <p class="font-semibold mb-2">Ini adalah perenggan separa tebal.</p>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode2" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code2')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code2']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code2"] }}
-                  </span>
-                </transition>
-                <pre id="code2" class="language-html">
-                  <code>
-&lt;p&gt;Ini adalah perenggan lalai. Ia menggunakan saiz fon asas dan ketinggian baris.&lt;/p&gt;
-&lt;p class="text-sm"&gt;Ini adalah perenggan kecil menggunakan kelas text-sm.&lt;/p&gt;
-&lt;p class="text-lg"&gt;Ini adalah perenggan besar menggunakan kelas text-lg.&lt;/p&gt;
-&lt;p class="font-light"&gt;Ini adalah perenggan berat ringan.&lt;/p&gt;
-&lt;p class="font-semibold"&gt;Ini adalah perenggan separa tebal.&lt;/p&gt;
-                  </code>
-                </pre>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Warna Teks -->
-    <rs-card>
-      <template #header> Warna Teks </template>
-      <template #body>
-        <p class="text-primary mb-2">Ini adalah teks warna utama.</p>
-        <p class="text-secondary mb-2">Ini adalah teks warna sekunder.</p>
-        <p class="text-gray-500 mb-2">Ini adalah teks warna kelabu.</p>
-        <p class="text-red-500 mb-2">Ini adalah teks warna merah.</p>
-        <p class="text-green-500 mb-2">Ini adalah teks warna hijau.</p>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode3" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code3')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code3']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code3"] }}
-                  </span>
-                </transition>
-                <pre id="code3" class="language-html">
-                  <code>
-&lt;p class="text-primary"&gt;Ini adalah teks warna utama.&lt;/p&gt;
-&lt;p class="text-secondary"&gt;Ini adalah teks warna sekunder.&lt;/p&gt;
-&lt;p class="text-gray-500"&gt;Ini adalah teks warna kelabu.&lt;/p&gt;
-&lt;p class="text-red-500"&gt;Ini adalah teks warna merah.&lt;/p&gt;
-&lt;p class="text-green-500"&gt;Ini adalah teks warna hijau.&lt;/p&gt;
-                  </code>
-                </pre>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-
-    <!-- Gaya Fon -->
-    <rs-card>
-      <template #header> Gaya Fon </template>
-      <template #body>
-        <p class="italic mb-2">Ini adalah teks condong.</p>
-        <p class="font-bold mb-2">Ini adalah teks tebal.</p>
-        <p class="underline mb-2">Ini adalah teks bergaris.</p>
-        <p class="line-through mb-2">Ini adalah teks dicoret.</p>
-        <p class="uppercase mb-2">Ini adalah teks huruf besar.</p>
-        <p class="lowercase mb-2">Ini adalah teks huruf kecil.</p>
-        <p class="capitalize mb-2">Ini adalah teks huruf awal besar.</p>
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
-            @click="showCode4 ? (showCode4 = false) : (showCode4 = true)"
-          >
-            Tunjukkan Kod
-          </button>
-        </div>
-        <ClientOnly>
-          <transition name="fade">
-            <div v-show="showCode4" v-highlight>
-              <div class="relative">
-                <button
-                  @click="copyCode('code4')"
-                  class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
-                >
-                  Salin Kod
-                </button>
-                <transition name="tooltip">
-                  <span
-                    v-if="tooltips['code4']"
-                    class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
-                  >
-                    {{ tooltips["code4"] }}
-                  </span>
-                </transition>
-                <pre id="code4" class="language-html">
-                  <code>
-&lt;p class="italic"&gt;Ini adalah teks condong.&lt;/p&gt;
-&lt;p class="font-bold"&gt;Ini adalah teks tebal.&lt;/p&gt;
-&lt;p class="underline"&gt;Ini adalah teks bergaris.&lt;/p&gt;
-&lt;p class="line-through"&gt;Ini adalah teks dicoret.&lt;/p&gt;
-&lt;p class="uppercase"&gt;Ini adalah teks huruf besar.&lt;/p&gt;
-&lt;p class="lowercase"&gt;Ini adalah teks huruf kecil.&lt;/p&gt;
-&lt;p class="capitalize"&gt;Ini adalah teks huruf awal besar.&lt;/p&gt;
-                  </code>
-                </pre>
-              </div>
-            </div>
-          </transition>
-        </ClientOnly>
-      </template>
-    </rs-card>
-  </div>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: opacity 0.3s;
-}
-.tooltip-enter,
-.tooltip-leave-to {
-  opacity: 0;
-}
-</style>