From 5303b07aa2308d0db7e9d7c8c49ea99895942aac Mon Sep 17 00:00:00 2001
From: Haqeem Solehan <93633646+julap99@users.noreply.github.com>
Date: Mon, 2 Sep 2024 18:11:48 +0800
Subject: [PATCH] jlp

---
 navigation/index.js                           |   8 +-
 .../kemaskini/[noSiri]/index.vue              | 356 ++++++++++++++++++
 .../kemaskini/batal/[noSiri]/index.vue        | 158 ++++++++
 .../kemaskini/sah/[noSiri]/index.vue          | 194 ++++++++++
 pages/kemaskini-daftar/senarai/index.vue      | 147 ++++++++
 pages/permohonan-online/baru/index.vue        | 257 +++++++++++++
 .../kemaskini/[noSiri]/index.vue              | 323 ++++++++++++++++
 pages/permohonan-online/senarai/index.vue     | 161 ++++++++
 8 files changed, 1601 insertions(+), 3 deletions(-)
 create mode 100644 pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
 create mode 100644 pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue
 create mode 100644 pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue
 create mode 100644 pages/kemaskini-daftar/senarai/index.vue
 create mode 100644 pages/permohonan-online/baru/index.vue
 create mode 100644 pages/permohonan-online/kemaskini/[noSiri]/index.vue
 create mode 100644 pages/permohonan-online/senarai/index.vue

diff --git a/navigation/index.js b/navigation/index.js
index b0493fb..3c1f7b0 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -131,14 +131,16 @@ export default [
         icon: "ph:number-circle-one-fill",
         child: [
           {
-            title: "Permohonan",
-            path: "/prototype/for-01/permohonan",
+            title: "Permohonan Online",
+            path: "/permohonan-online/senarai",
             child: [],
+            meta: {},
           },
           {
             title: "Kemaskini Daftar",
-            path: "/prototype/for-01/kemaskini-daftar",
+            path: "/kemaskini-daftar/senarai",
             child: [],
+            meta: {},
           },
         ],
       },
diff --git a/pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue b/pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
new file mode 100644
index 0000000..8eaaec0
--- /dev/null
+++ b/pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
@@ -0,0 +1,356 @@
+
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Kemaskini Permohonan</h1>
+    </div>
+
+    <rs-card class="mt-4 p-4">
+      <FormKit type="form" :actions="false" @submit="submitForm">
+        <FormKit
+          type="text"
+          label="Nama Pemohon"
+          v-model="namaPemohon"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Pemohon"
+          v-model="pangkatPemohon"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="No Pegawai Pemohon"
+          v-model="noPegawaiPemohon"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Nama Penghantar"
+          v-model="namaPenghantar"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Penghantar"
+          v-model="pangkatPenghantar"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="textarea"
+          label="Ringkasan Kenyataan Kes"
+          v-model="ringkasanKenyataanKes"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="number"
+          label="Bilangan"
+          v-model="bilangan"
+          validation="required|number"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Jenis Barang"
+          v-model="jenisBarang"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Tanda Barang"
+          v-model="tandaBarang"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="Keadaan Barang"
+          v-model="keadaanBarang"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="number"
+          label="Kuantiti Barang"
+          v-model="kuantitiBarang"
+          validation="required|number"
+          disabled
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang"
+          v-model="jenisBarangDetail"
+          :options="jenisBarangDetailOptions"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang Siber"
+          v-model="jenisBarangSiber"
+          :options="jenisBarangSiberOptions"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="No Kertas Siasatan"
+          v-model="noKertasSiasatan"
+          validation="required"
+          disabled
+        />
+        <FormKit
+          type="text"
+          label="No Laporan Polis"
+          v-model="noLaporanPolis"
+          validation="required"
+          disabled
+        />
+        <div class="flex justify-end gap-2 mt-4">
+          <rs-button type="button" @click="navi" variant="danger"
+            >Kembali</rs-button
+          >
+          <rs-button type="button" @click="confirmBatal" variant="primary"
+            >Tolak</rs-button
+          >
+          <rs-button type="submit" @click="confirmSah" variant="success"
+            >Sah</rs-button
+          >
+        </div>
+      </FormKit>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const noSiri = ref(route.params.noSiri);
+
+const namaPemohon = ref("");
+const pangkatPemohon = ref("");
+const noPegawaiPemohon = ref("");
+const namaPenghantar = ref("");
+const pangkatPenghantar = ref("");
+const ringkasanKenyataanKes = ref("");
+const bilangan = ref(0);
+const jenisBarang = ref("");
+const tandaBarang = ref("");
+const keadaanBarang = ref("");
+const kuantitiBarang = ref(0);
+const jenisBarangDetail = ref("");
+const jenisBarangSiber = ref("");
+const noKertasSiasatan = ref("");
+const noLaporanPolis = ref("");
+
+const jenisBarangDetailOptions = [
+  "PASPORT",
+  "MALPASS",
+  "CAP KESELAMATAN",
+  "CAP JARI",
+  "PEMERIKSAAN",
+  "I-KAD",
+  "LAIN-LAIN",
+];
+
+const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [
+    namaPemohon,
+    pangkatPemohon,
+    noPegawaiPemohon,
+    namaPenghantar,
+    pangkatPenghantar,
+    ringkasanKenyataanKes,
+    bilangan,
+    jenisBarang,
+    tandaBarang,
+    keadaanBarang,
+    kuantitiBarang,
+    jenisBarangDetail,
+    jenisBarangSiber,
+    noKertasSiasatan,
+    noLaporanPolis,
+  ];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0
+  );
+};
+
+const simpan = () => {
+  if (isFormValid()) {
+    console.log("Form data saved");
+  } else {
+    console.error("Please fill in all required fields.");
+  }
+};
+
+const submitForm = () => {
+  if (isFormValid()) {
+    console.log({
+      namaPemohon: namaPemohon.value,
+      pangkatPemohon: pangkatPemohon.value,
+      noPegawaiPemohon: noPegawaiPemohon.value,
+      namaPenghantar: namaPenghantar.value,
+      pangkatPenghantar: pangkatPenghantar.value,
+      ringkasanKenyataanKes: ringkasanKenyataanKes.value,
+      bilangan: bilangan.value,
+      jenisBarang: jenisBarang.value,
+      tandaBarang: tandaBarang.value,
+      keadaanBarang: keadaanBarang.value,
+      kuantitiBarang: kuantitiBarang.value,
+      jenisBarangDetail: jenisBarangDetail.value,
+      jenisBarangSiber: jenisBarangSiber.value,
+      noKertasSiasatan: noKertasSiasatan.value,
+      noLaporanPolis: noLaporanPolis.value,
+    });
+
+    navigateTo(`/kemaskini-daftar/kemaskini/sah/${noSiri.value}`);
+  } else {
+    $swal.fire({
+      title: "Ralat!",
+      text: "Sila isi semua medan yang diperlukan.",
+      icon: "error",
+      confirmButtonText: "OK",
+    });
+  }
+};
+
+const confirmBatal = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin menolak?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, batalkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        navigateTo(`/kemaskini-daftar/kemaskini/batal/${noSiri.value}`);
+      }
+    });
+};
+
+const confirmSah = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin mengesahkan borang ini?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Sahkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        submitForm();
+      }
+    });
+};
+
+function generateSampleData(noSiri) {
+  const randomNumber = (min, max) =>
+    Math.floor(Math.random() * (max - min + 1) + min);
+  const randomChoice = (arr) => arr[Math.floor(Math.random() * arr.length)];
+
+  const namaPemohon = [
+    "Ali bin Abu",
+    "Siti binti Ahmad",
+    "Muthu a/l Rajan",
+    "Lim Wei Ling",
+  ];
+  const pangkat = ["Inspektor", "Sarjan", "Koperal", "Konstabel"];
+  const jenisBarangOptions = [
+    "Dokumen",
+    "Peralatan Elektronik",
+    "Senjata",
+    "Dadah",
+    "Barang Kemas",
+  ];
+  const keadaanBarangOptions = ["Baik", "Sederhana", "Rosak"];
+
+  return {
+    noSiri: noSiri,
+    namaPemohon: randomChoice(namaPemohon),
+    pangkatPemohon: randomChoice(pangkat),
+    noPegawaiPemohon: `PG${randomNumber(10000, 99999)}`,
+    namaPenghantar: randomChoice(namaPemohon),
+    pangkatPenghantar: randomChoice(pangkat),
+    ringkasanKenyataanKes: `Kes ${noSiri}: Penemuan barang bukti dalam serbuan di lokasi ${randomChoice(
+      ["A", "B", "C", "D"]
+    )}`,
+    bilangan: randomNumber(1, 10),
+    jenisBarang: randomChoice(jenisBarangOptions),
+    tandaBarang: `TB-${randomNumber(1000, 9999)}`,
+    keadaanBarang: randomChoice(keadaanBarangOptions),
+    kuantitiBarang: randomNumber(1, 100),
+    jenisBarangDetail: randomChoice(jenisBarangDetailOptions),
+    jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
+    noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
+    noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
+  };
+}
+
+onMounted(() => {
+  const sampleData = generateSampleData(noSiri.value);
+
+  namaPemohon.value = sampleData.namaPemohon;
+  pangkatPemohon.value = sampleData.pangkatPemohon;
+  noPegawaiPemohon.value = sampleData.noPegawaiPemohon;
+  namaPenghantar.value = sampleData.namaPenghantar;
+  pangkatPenghantar.value = sampleData.pangkatPenghantar;
+  ringkasanKenyataanKes.value = sampleData.ringkasanKenyataanKes;
+  bilangan.value = sampleData.bilangan;
+  jenisBarang.value = sampleData.jenisBarang;
+  tandaBarang.value = sampleData.tandaBarang;
+  keadaanBarang.value = sampleData.keadaanBarang;
+  kuantitiBarang.value = sampleData.kuantitiBarang;
+  jenisBarangDetail.value = sampleData.jenisBarangDetail;
+  jenisBarangSiber.value = sampleData.jenisBarangSiber;
+  noKertasSiasatan.value = sampleData.noKertasSiasatan;
+  noLaporanPolis.value = sampleData.noLaporanPolis;
+});
+
+const { $swal } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue b/pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue
new file mode 100644
index 0000000..c291c5d
--- /dev/null
+++ b/pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue
@@ -0,0 +1,158 @@
+@ -1,157 +0,0 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Borang Akuan Penolakan Barang Kes</h1>
+    </div>
+
+    <rs-card class="mt-4 p-4">
+      <FormKit type="form" :actions="false" @submit="submitForm">
+        <!-- New Form Fields -->
+        <FormKit
+          type="select"
+          label="Sebab penolakan permohonan"
+          v-model="sebabPenolakan"
+          :options="[
+            'Tiada permohonan dibuat',
+            'Bungkusan barang kes tidak ditanda',
+            'Barang kes yang dihantar tidak ditanda',
+            'Barang kes yang dihantar tidak sesuai',
+            'Lain-lain (Nyatakan)',
+          ]"
+          validation="required"
+        />
+        <FormKit
+          type="textarea"
+          label="Lain-lain sebab"
+          v-model="lainLainSebab"
+        />
+
+        <div class="flex justify-end gap-2 mt-4">
+          <rs-button type="button" @click="navigateBack()" variant="danger"
+            >Kembali</rs-button
+          >
+          <rs-button
+            type="submit"
+            @click="confirmSah"
+            btn-type="submit"
+            variant="success"
+            >Sah</rs-button
+          >
+        </div>
+      </FormKit>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const noSiri = ref(route.params.noSiri);
+
+// New reactive properties
+const sebabPenolakan = ref("");
+const lainLainSebab = ref("");
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [sebabPenolakan];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0 && field.value !== false
+  );
+};
+
+const submitForm = () => {
+  if (isFormValid()) {
+    console.log({
+      sebabPenolakan: sebabPenolakan.value,
+      lainLainSebab: lainLainSebab.value,
+    });
+
+    navigateTo(`/kemaskini-daftar/senarai`);
+
+    $swal.fire({
+      title: "Berjaya!",
+      text: "Borang telah berjaya dihantar.",
+      icon: "success",
+      confirmButtonText: "OK",
+    });
+  } else {
+    $swal.fire({
+      title: "Ralat!",
+      text: "Sila isi semua medan yang diperlukan.",
+      icon: "error",
+      confirmButtonText: "OK",
+    });
+  }
+};
+
+const confirmBatal = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin membatalkan?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, batalkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        navigateBack();
+      }
+    });
+};
+
+const confirmSah = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin mengesahkan borang ini?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Sahkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        submitForm();
+      }
+    });
+};
+
+onMounted(() => {
+  sebabPenolakan.value = "Tiada permohonan dibuat";
+  lainLainSebab.value = "";
+});
+
+const { $swal } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue b/pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue
new file mode 100644
index 0000000..4dfd35b
--- /dev/null
+++ b/pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue
@@ -0,0 +1,194 @@
+
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Borang Akuan Penerimaan Barang Kes</h1>
+    </div>
+
+    <rs-card class="mt-4 p-4">
+      <FormKit type="form" :actions="false" @submit="submitForm">
+        <!-- New Form Fields -->
+        <FormKit
+          type="checkbox"
+          label="Peralatan dalam keadaan baik"
+          v-model="peralatanBaik"
+          validation="required"
+        />
+        <FormKit
+          type="checkbox"
+          label="Pegawai berkelayakan"
+          v-model="pegawaiBerkelayakan"
+          validation="required"
+        />
+        <FormKit
+          type="checkbox"
+          label="Kaedah dapat dilakukan"
+          v-model="kaedahDilakukan"
+          validation="required"
+        />
+        <FormKit
+          type="checkbox"
+          label="Subkontrak diperlukan"
+          v-model="subkontrakDiperlukan"
+          validation="required"
+        />
+        <FormKit
+          type="select"
+          label="Tugasan diterima (Ya/Tidak)"
+          v-model="tugasanDiterima"
+          :options="['Ya', 'Tidak']"
+          validation="required"
+        />
+        <FormKit
+          type="textarea"
+          label="Ulasan pegawai kaunter"
+          v-model="ulasanPegawaiKaunter"
+        />
+
+        <div class="flex justify-end gap-2 mt-4">
+          <rs-button type="button" @click="navigateBack()" variant="danger"
+            >Kembali</rs-button
+          >
+          <rs-button
+            type="submit"
+            @click="confirmSah"
+            btn-type="submit"
+            variant="success"
+            >Sah</rs-button
+          >
+        </div>
+      </FormKit>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const noSiri = ref(route.params.noSiri);
+
+// New reactive properties
+const peralatanBaik = ref(false);
+const pegawaiBerkelayakan = ref(false);
+const kaedahDilakukan = ref(false);
+const subkontrakDiperlukan = ref(false);
+const tugasanDiterima = ref("");
+const ulasanPegawaiKaunter = ref("");
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [
+    peralatanBaik,
+    pegawaiBerkelayakan,
+    kaedahDilakukan,
+    subkontrakDiperlukan,
+    tugasanDiterima,
+  ];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0 && field.value !== false
+  );
+};
+
+const submitForm = () => {
+  if (isFormValid()) {
+    console.log({
+      peralatanBaik: peralatanBaik.value,
+      pegawaiBerkelayakan: pegawaiBerkelayakan.value,
+      kaedahDilakukan: kaedahDilakukan.value,
+      subkontrakDiperlukan: subkontrakDiperlukan.value,
+      tugasanDiterima: tugasanDiterima.value,
+      ulasanPegawaiKaunter: ulasanPegawaiKaunter.value,
+    });
+
+    navigateTo(`/kemaskini-daftar/senarai`);
+
+    $swal.fire({
+      title: "Berjaya!",
+      text: "Borang telah berjaya dihantar.",
+      icon: "success",
+      confirmButtonText: "OK",
+    });
+  } else {
+    $swal.fire({
+      title: "Ralat!",
+      text: "Sila isi semua medan yang diperlukan.",
+      icon: "error",
+      confirmButtonText: "OK",
+    });
+  }
+};
+
+const confirmBatal = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin membatalkan?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, batalkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        navigateBack();
+      }
+    });
+};
+
+const confirmSah = () => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Adakah anda pasti ingin mengesahkan borang ini?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Sahkan!",
+      cancelButtonText: "Tidak",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        submitForm();
+      }
+    });
+};
+
+onMounted(() => {
+  peralatanBaik.value = true;
+  pegawaiBerkelayakan.value = true;
+  kaedahDilakukan.value = true;
+  subkontrakDiperlukan.value = true;
+  tugasanDiterima.value = "Ya";
+  ulasanPegawaiKaunter.value = "Ulasan contoh";
+});
+
+const { $swal } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/pages/kemaskini-daftar/senarai/index.vue b/pages/kemaskini-daftar/senarai/index.vue
new file mode 100644
index 0000000..094ae47
--- /dev/null
+++ b/pages/kemaskini-daftar/senarai/index.vue
@@ -0,0 +1,147 @@
+@ -1,146 +0,0 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Senarai Permohonan</h1>
+    </div>
+
+    <rs-card class="mt-4 py-2">
+      <rs-table
+        :data="tableData"
+        :options="{
+          variant: 'default',
+          striped: true,
+          borderless: true,
+        }"
+        :options-advanced="{
+          sortable: true,
+          responsive: true,
+          filterable: false,
+        }"
+        advanced
+      >
+        <template v-slot:header>
+          <tr>
+            <th>No</th>
+            <th>No Siri</th>
+            <th>Tarikh & Masa</th>
+            <th>Status</th>
+            <th>Butiran</th>
+          </tr>
+        </template>
+        <template v-slot:no="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:noSiri="data">
+          {{ data.text || "N/A" }}
+        </template>
+        <template v-slot:tarikhMasa="data">
+          {{ data.text || "N/A" }}
+        </template>
+        <template v-slot:status="data">
+          <rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
+            {{ data.text || "N/A" }}
+          </rs-badge>
+        </template>
+        <template v-slot:butiran="data">
+          <div class="flex flex-wrap gap-2">
+            <rs-button
+              @click="kemaskini(data.value.noSiri)"
+              variant="primary"
+              size="sm"
+              class="p-1"
+              title="Kemaskini"
+            >
+              <Icon name="ic:baseline-edit" size="1.2rem" />
+            </rs-button>
+          </div>
+        </template>
+      </rs-table>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const { $swal } = useNuxtApp();
+
+definePageMeta({
+  title: "Senarai Permohonan",
+});
+
+const tableData = ref([
+  {
+    no: 1,
+    noSiri: "1234567890",
+    tarikhMasa: "2024-01-01 12:00:00",
+    status: "Aktif",
+    butiran: 1,
+  },
+  {
+    no: 2,
+    noSiri: "0987654321",
+    tarikhMasa: "2024-02-01 14:30:00",
+    status: "Aktif",
+    butiran: 2,
+  },
+  {
+    no: 3,
+    noSiri: "1122334455",
+    tarikhMasa: "2024-03-01 09:15:00",
+    status: "Aktif",
+    butiran: 3,
+  },
+  {
+    no: 4,
+    noSiri: "5566778899",
+    tarikhMasa: "2024-04-01 16:45:00",
+    status: "Aktif",
+    butiran: 4,
+  },
+  {
+    no: 5,
+    noSiri: "6677889900",
+    tarikhMasa: "2024-05-01 11:00:00",
+    status: "Aktif",
+    butiran: 5,
+  },
+]);
+
+const permohonanBaru = () => {
+  navigateTo("/permohonan-online/baru");
+};
+
+const kemaskini = (item) => {
+  navigateTo(`/kemaskini-daftar/kemaskini/${item}`);
+};
+
+const hapus = (item) => {
+  $swal
+    .fire({
+      title: "Anda pasti?",
+      text: "Anda tidak akan dapat memulihkan semula data ini!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Ya, hapuskan!",
+      cancelButtonText: "Batal",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        // Perform deletion logic here
+        console.log("Deleting item:", item);
+        // For now, let's just remove the item from the tableData
+        const index = tableData.value.findIndex((row) => row.noSiri === item);
+        if (index !== -1) {
+          tableData.value.splice(index, 1);
+        }
+        $swal.fire("Dihapuskan!", "Data telah dihapuskan.", "success");
+      }
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+/* Add any scoped styles here */
+</style>
\ No newline at end of file
diff --git a/pages/permohonan-online/baru/index.vue b/pages/permohonan-online/baru/index.vue
new file mode 100644
index 0000000..23cea79
--- /dev/null
+++ b/pages/permohonan-online/baru/index.vue
@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Permohonan Baru</h1>
+    </div>
+
+    <rs-card class="mt-4 p-4">
+      <FormKit type="form" :actions="false" @submit="submitForm">
+        <FormKit
+          type="text"
+          label="Nama Pemohon"
+          v-model="namaPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Pemohon"
+          v-model="pangkatPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Pegawai Pemohon"
+          v-model="noPegawaiPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Nama Penghantar"
+          v-model="namaPenghantar"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Penghantar"
+          v-model="pangkatPenghantar"
+          validation="required"
+        />
+        <FormKit
+          type="textarea"
+          label="Ringkasan Kenyataan Kes"
+          v-model="ringkasanKenyataanKes"
+          validation="required"
+        />
+        <FormKit
+          type="number"
+          label="Bilangan"
+          v-model="bilangan"
+          validation="required|number"
+        />
+        <FormKit
+          type="text"
+          label="Jenis Barang"
+          v-model="jenisBarang"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Tanda Barang"
+          v-model="tandaBarang"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Keadaan Barang"
+          v-model="keadaanBarang"
+          validation="required"
+        />
+        <FormKit
+          type="number"
+          label="Kuantiti Barang"
+          v-model="kuantitiBarang"
+          validation="required|number"
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang"
+          v-model="jenisBarangDetail"
+          :options="jenisBarangDetailOptions"
+          validation="required"
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang Siber"
+          v-model="jenisBarangSiber"
+          :options="jenisBarangSiberOptions"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Kertas Siasatan"
+          v-model="noKertasSiasatan"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Laporan Polis"
+          v-model="noLaporanPolis"
+          validation="required"
+        />
+        <div class="flex justify-end gap-2 mt-4">
+          <rs-button type="button" @click="navigateBack" variant="danger"
+            >Kembali</rs-button
+          >
+          <rs-button
+            type="button"
+            btn-type="submit"
+            @click="simpan"
+            variant="primary"
+            >Simpan</rs-button
+          >
+          <rs-button
+            type="submit"
+            @click="submitForm"
+            btn-type="submit"
+            variant="success"
+            >Hantar</rs-button
+          >
+        </div>
+      </FormKit>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const namaPemohon = ref("");
+const pangkatPemohon = ref("");
+const noPegawaiPemohon = ref("");
+const namaPenghantar = ref("");
+const pangkatPenghantar = ref("");
+const ringkasanKenyataanKes = ref("");
+const bilangan = ref(0);
+const jenisBarang = ref("");
+const tandaBarang = ref("");
+const keadaanBarang = ref("");
+const kuantitiBarang = ref(0);
+const jenisBarangDetail = ref("");
+const jenisBarangSiber = ref("");
+const noKertasSiasatan = ref("");
+const noLaporanPolis = ref("");
+
+const jenisBarangDetailOptions = [
+  "PASPORT",
+  "MALPASS",
+  "CAP KESELAMATAN",
+  "CAP JARI",
+  "PEMERIKSAAN",
+  "I-KAD",
+  "LAIN-LAIN",
+];
+
+const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [
+    namaPemohon,
+    pangkatPemohon,
+    noPegawaiPemohon,
+    namaPenghantar,
+    pangkatPenghantar,
+    ringkasanKenyataanKes,
+    bilangan,
+    jenisBarang,
+    tandaBarang,
+    keadaanBarang,
+    kuantitiBarang,
+    jenisBarangDetail,
+    jenisBarangSiber,
+    noKertasSiasatan,
+    noLaporanPolis,
+  ];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0
+  );
+};
+
+const simpan = () => {
+  if (isFormValid()) {
+    // Save form data logic
+    console.log("Form data saved");
+  } else {
+    console.error("Please fill in all required fields.");
+  }
+};
+
+const submitForm = () => {
+  if (isFormValid()) {
+    // Handle form submission
+    console.log({
+      namaPemohon: namaPemohon.value,
+      pangkatPemohon: pangkatPemohon.value,
+      noPegawaiPemohon: noPegawaiPemohon.value,
+      namaPenghantar: namaPenghantar.value,
+      pangkatPenghantar: pangkatPenghantar.value,
+      ringkasanKenyataanKes: ringkasanKenyataanKes.value,
+      bilangan: bilangan.value,
+      jenisBarang: jenisBarang.value,
+      tandaBarang: tandaBarang.value,
+      keadaanBarang: keadaanBarang.value,
+      kuantitiBarang: kuantitiBarang.value,
+      jenisBarangDetail: jenisBarangDetail.value,
+      jenisBarangSiber: jenisBarangSiber.value,
+      noKertasSiasatan: noKertasSiasatan.value,
+      noLaporanPolis: noLaporanPolis.value,
+    });
+
+    // Show success message
+    $swal.fire({
+      title: "Berjaya!",
+      text: "Borang telah berjaya dihantar.",
+      icon: "success",
+      confirmButtonText: "OK",
+    });
+  } else {
+    // Show error message
+    $swal.fire({
+      title: "Ralat!",
+      text: "Sila isi semua medan yang diperlukan.",
+      icon: "error",
+      confirmButtonText: "OK",
+    });
+  }
+};
+
+const { $swal } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/pages/permohonan-online/kemaskini/[noSiri]/index.vue b/pages/permohonan-online/kemaskini/[noSiri]/index.vue
new file mode 100644
index 0000000..d1f6a98
--- /dev/null
+++ b/pages/permohonan-online/kemaskini/[noSiri]/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Kemaskini Permohonan</h1>
+    </div>
+
+    <rs-card class="mt-4 p-4">
+      <FormKit type="form" :actions="false" @submit="submitForm">
+        <FormKit
+          type="text"
+          label="Nama Pemohon"
+          v-model="namaPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Pemohon"
+          v-model="pangkatPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Pegawai Pemohon"
+          v-model="noPegawaiPemohon"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Nama Penghantar"
+          v-model="namaPenghantar"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Pangkat Penghantar"
+          v-model="pangkatPenghantar"
+          validation="required"
+        />
+        <FormKit
+          type="textarea"
+          label="Ringkasan Kenyataan Kes"
+          v-model="ringkasanKenyataanKes"
+          validation="required"
+        />
+        <FormKit
+          type="number"
+          label="Bilangan"
+          v-model="bilangan"
+          validation="required|number"
+        />
+        <FormKit
+          type="text"
+          label="Jenis Barang"
+          v-model="jenisBarang"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Tanda Barang"
+          v-model="tandaBarang"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="Keadaan Barang"
+          v-model="keadaanBarang"
+          validation="required"
+        />
+        <FormKit
+          type="number"
+          label="Kuantiti Barang"
+          v-model="kuantitiBarang"
+          validation="required|number"
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang"
+          v-model="jenisBarangDetail"
+          :options="jenisBarangDetailOptions"
+          validation="required"
+        />
+        <FormKit
+          type="select"
+          label="Jenis Barang Siber"
+          v-model="jenisBarangSiber"
+          :options="jenisBarangSiberOptions"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Kertas Siasatan"
+          v-model="noKertasSiasatan"
+          validation="required"
+        />
+        <FormKit
+          type="text"
+          label="No Laporan Polis"
+          v-model="noLaporanPolis"
+          validation="required"
+        />
+        <div class="flex justify-end gap-2 mt-4">
+          <rs-button type="button" @click="navigateBack" variant="danger"
+            >Kembali</rs-button
+          >
+          <rs-button
+            type="button"
+            @click="simpan"
+            btn-type="submit"
+            variant="primary"
+            >Simpan</rs-button
+          >
+          <rs-button
+            type="submit"
+            @click="submitForm"
+            btn-type="submit"
+            variant="success"
+            >Hantar</rs-button
+          >
+        </div>
+      </FormKit>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const noSiri = ref(route.params.noSiri);
+
+const namaPemohon = ref("");
+const pangkatPemohon = ref("");
+const noPegawaiPemohon = ref("");
+const namaPenghantar = ref("");
+const pangkatPenghantar = ref("");
+const ringkasanKenyataanKes = ref("");
+const bilangan = ref(0);
+const jenisBarang = ref("");
+const tandaBarang = ref("");
+const keadaanBarang = ref("");
+const kuantitiBarang = ref(0);
+const jenisBarangDetail = ref("");
+const jenisBarangSiber = ref("");
+const noKertasSiasatan = ref("");
+const noLaporanPolis = ref("");
+
+const jenisBarangDetailOptions = [
+  "PASPORT",
+  "MALPASS",
+  "CAP KESELAMATAN",
+  "CAP JARI",
+  "PEMERIKSAAN",
+  "I-KAD",
+  "LAIN-LAIN",
+];
+
+const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [
+    namaPemohon,
+    pangkatPemohon,
+    noPegawaiPemohon,
+    namaPenghantar,
+    pangkatPenghantar,
+    ringkasanKenyataanKes,
+    bilangan,
+    jenisBarang,
+    tandaBarang,
+    keadaanBarang,
+    kuantitiBarang,
+    jenisBarangDetail,
+    jenisBarangSiber,
+    noKertasSiasatan,
+    noLaporanPolis,
+  ];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0
+  );
+};
+
+const simpan = () => {
+  if (isFormValid()) {
+    // Save form data logic
+    console.log("Form data saved");
+  } else {
+    console.error("Please fill in all required fields.");
+  }
+};
+
+const submitForm = () => {
+  if (isFormValid()) {
+    // Handle form submission
+    console.log({
+      namaPemohon: namaPemohon.value,
+      pangkatPemohon: pangkatPemohon.value,
+      noPegawaiPemohon: noPegawaiPemohon.value,
+      namaPenghantar: namaPenghantar.value,
+      pangkatPenghantar: pangkatPenghantar.value,
+      ringkasanKenyataanKes: ringkasanKenyataanKes.value,
+      bilangan: bilangan.value,
+      jenisBarang: jenisBarang.value,
+      tandaBarang: tandaBarang.value,
+      keadaanBarang: keadaanBarang.value,
+      kuantitiBarang: kuantitiBarang.value,
+      jenisBarangDetail: jenisBarangDetail.value,
+      jenisBarangSiber: jenisBarangSiber.value,
+      noKertasSiasatan: noKertasSiasatan.value,
+      noLaporanPolis: noLaporanPolis.value,
+    });
+
+    // Show success message
+    $swal.fire({
+      title: "Berjaya!",
+      text: "Borang telah berjaya dihantar.",
+      icon: "success",
+      confirmButtonText: "OK",
+    });
+  } else {
+    // Show error message
+    $swal.fire({
+      title: "Ralat!",
+      text: "Sila isi semua medan yang diperlukan.",
+      icon: "error",
+      confirmButtonText: "OK",
+    });
+  }
+};
+
+function generateSampleData(noSiri) {
+  const randomNumber = (min, max) =>
+    Math.floor(Math.random() * (max - min + 1) + min);
+  const randomChoice = (arr) => arr[Math.floor(Math.random() * arr.length)];
+
+  const namaPemohon = [
+    "Ali bin Abu",
+    "Siti binti Ahmad",
+    "Muthu a/l Rajan",
+    "Lim Wei Ling",
+  ];
+  const pangkat = ["Inspektor", "Sarjan", "Koperal", "Konstabel"];
+  const jenisBarangOptions = [
+    "Dokumen",
+    "Peralatan Elektronik",
+    "Senjata",
+    "Dadah",
+    "Barang Kemas",
+  ];
+  const keadaanBarangOptions = ["Baik", "Sederhana", "Rosak"];
+
+  return {
+    noSiri: noSiri,
+    namaPemohon: randomChoice(namaPemohon),
+    pangkatPemohon: randomChoice(pangkat),
+    noPegawaiPemohon: `PG${randomNumber(10000, 99999)}`,
+    namaPenghantar: randomChoice(namaPemohon),
+    pangkatPenghantar: randomChoice(pangkat),
+    ringkasanKenyataanKes: `Kes ${noSiri}: Penemuan barang bukti dalam serbuan di lokasi ${randomChoice(
+      ["A", "B", "C", "D"]
+    )}`,
+    bilangan: randomNumber(1, 10),
+    jenisBarang: randomChoice(jenisBarangOptions),
+    tandaBarang: `TB-${randomNumber(1000, 9999)}`,
+    keadaanBarang: randomChoice(keadaanBarangOptions),
+    kuantitiBarang: randomNumber(1, 100),
+    jenisBarangDetail: randomChoice(jenisBarangDetailOptions),
+    jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
+    noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
+    noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
+  };
+}
+
+onMounted(() => {
+  const sampleData = generateSampleData(noSiri.value);
+
+  namaPemohon.value = sampleData.namaPemohon;
+  pangkatPemohon.value = sampleData.pangkatPemohon;
+  noPegawaiPemohon.value = sampleData.noPegawaiPemohon;
+  namaPenghantar.value = sampleData.namaPenghantar;
+  pangkatPenghantar.value = sampleData.pangkatPenghantar;
+  ringkasanKenyataanKes.value = sampleData.ringkasanKenyataanKes;
+  bilangan.value = sampleData.bilangan;
+  jenisBarang.value = sampleData.jenisBarang;
+  tandaBarang.value = sampleData.tandaBarang;
+  keadaanBarang.value = sampleData.keadaanBarang;
+  kuantitiBarang.value = sampleData.kuantitiBarang;
+  jenisBarangDetail.value = sampleData.jenisBarangDetail;
+  jenisBarangSiber.value = sampleData.jenisBarangSiber;
+  noKertasSiasatan.value = sampleData.noKertasSiasatan;
+  noLaporanPolis.value = sampleData.noLaporanPolis;
+});
+
+const { $swal } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
\ No newline at end of file
diff --git a/pages/permohonan-online/senarai/index.vue b/pages/permohonan-online/senarai/index.vue
new file mode 100644
index 0000000..b4ee844
--- /dev/null
+++ b/pages/permohonan-online/senarai/index.vue
@@ -0,0 +1,161 @@
+
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h1>Senarai Permohonan</h1>
+      <rs-button @click="permohonanBaru()" variant="primary" class="mt-2">
+        Permohonan Baru
+      </rs-button>
+    </div>
+
+    <rs-card class="mt-4 py-2">
+      <rs-table
+        :data="tableData"
+        :options="{
+          variant: 'default',
+          striped: true,
+          borderless: true,
+        }"
+        :options-advanced="{
+          sortable: true,
+          responsive: true,
+          filterable: false,
+        }"
+        advanced
+      >
+        <template v-slot:header>
+          <tr>
+            <th>No</th>
+            <th>No Siri</th>
+            <th>Tarikh & Masa</th>
+            <th>Status</th>
+            <th>Butiran</th>
+          </tr>
+        </template>
+        <template v-slot:no="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:noSiri="data">
+          {{ data.text || "N/A" }}
+        </template>
+        <template v-slot:tarikhMasa="data">
+          {{ data.text || "N/A" }}
+        </template>
+        <template v-slot:status="data">
+          <rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
+            {{ data.text || "N/A" }}
+          </rs-badge>
+        </template>
+        <template v-slot:butiran="data">
+          <div class="flex flex-wrap gap-2">
+            <rs-button
+              @click="kemaskini(data.value.noSiri)"
+              variant="primary"
+              size="sm"
+              class="p-1"
+              title="Kemaskini"
+            >
+              <Icon name="ic:baseline-edit" size="1.2rem" />
+            </rs-button>
+            <rs-button
+              @click="hapus(data.value.noSiri)"
+              variant="danger"
+              size="sm"
+              class="p-1"
+              title="Hapus"
+            >
+              <Icon name="ic:baseline-delete" size="1.2rem" />
+            </rs-button>
+          </div>
+        </template>
+      </rs-table>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const { $swal } = useNuxtApp();
+
+definePageMeta({
+  title: "Senarai Permohonan",
+});
+
+const tableData = ref([
+  {
+    no: 1,
+    noSiri: "1234567890",
+    tarikhMasa: "2024-01-01 12:00:00",
+    status: "Aktif",
+    butiran: 1,
+  },
+  {
+    no: 2,
+    noSiri: "0987654321",
+    tarikhMasa: "2024-02-01 14:30:00",
+    status: "Tidak Aktif",
+    butiran: 2,
+  },
+  {
+    no: 3,
+    noSiri: "1122334455",
+    tarikhMasa: "2024-03-01 09:15:00",
+    status: "Aktif",
+    butiran: 3,
+  },
+  {
+    no: 4,
+    noSiri: "5566778899",
+    tarikhMasa: "2024-04-01 16:45:00",
+    status: "Tidak Aktif",
+    butiran: 4,
+  },
+  {
+    no: 5,
+    noSiri: "6677889900",
+    tarikhMasa: "2024-05-01 11:00:00",
+    status: "Aktif",
+    butiran: 5,
+  },
+]);
+
+const permohonanBaru = () => {
+  navigateTo("/permohonan-online/baru");
+};
+
+const kemaskini = (item) => {
+  navigateTo(`/permohonan-online/kemaskini/${item}`);
+};
+
+const hapus = (item) => {
+  $swal.fire({
+    title: 'Anda pasti?',
+    text: "Anda tidak akan dapat memulihkan semula data ini!",
+    icon: 'warning',
+    showCancelButton: true,
+    confirmButtonColor: '#3085d6',
+    cancelButtonColor: '#d33',
+    confirmButtonText: 'Ya, hapuskan!',
+    cancelButtonText: 'Batal'
+  }).then((result) => {
+    if (result.isConfirmed) {
+      // Perform deletion logic here
+      console.log("Deleting item:", item);
+      // For now, let's just remove the item from the tableData
+      const index = tableData.value.findIndex(row => row.noSiri === item);
+      if (index !== -1) {
+        tableData.value.splice(index, 1);
+      }
+      $swal.fire(
+        'Dihapuskan!',
+        'Data telah dihapuskan.',
+        'success'
+      )
+    }
+  })
+};
+</script>
+
+<style lang="scss" scoped>
+/* Add any scoped styles here */
+</style>
\ No newline at end of file