From e0acb6640ff593ade25898b8958cb602255ceea3 Mon Sep 17 00:00:00 2001
From: Haqeem Solehan <93633646+julap99@users.noreply.github.com>
Date: Wed, 4 Sep 2024 11:43:16 +0800
Subject: [PATCH] jlp

---
 navigation/index.js                           |  12 +-
 .../kemaskini/[noSiri]/index.vue              |   5 +-
 .../maklumat/[noSiri]/index.vue               | 176 ++++++++
 pages/kemaskini-daftar/senarai/index.vue      |  40 +-
 pages/permohonan-online/baru/index.vue        | 257 -----------
 pages/permohonan-temujanji/baru/index.vue     | 401 ++++++++++++++++++
 .../kemaskini/[noSiri]/index.vue              | 232 ++++++++--
 .../senarai/index.vue                         |  68 +--
 8 files changed, 840 insertions(+), 351 deletions(-)
 create mode 100644 pages/kemaskini-daftar/maklumat/[noSiri]/index.vue
 delete mode 100644 pages/permohonan-online/baru/index.vue
 create mode 100644 pages/permohonan-temujanji/baru/index.vue
 rename pages/{permohonan-online => permohonan-temujanji}/kemaskini/[noSiri]/index.vue (54%)
 rename pages/{permohonan-online => permohonan-temujanji}/senarai/index.vue (69%)

diff --git a/navigation/index.js b/navigation/index.js
index 3c1f7b0..0deffcf 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -131,17 +131,23 @@ export default [
         icon: "ph:number-circle-one-fill",
         child: [
           {
-            title: "Permohonan Online",
-            path: "/permohonan-online/senarai",
+            title: "Permohonan Temujanji",
+            path: "/permohonan-temujanji/senarai",
             child: [],
             meta: {},
           },
           {
-            title: "Kemaskini Daftar",
+            title: "Kaunter Semakan ",
             path: "/kemaskini-daftar/senarai",
             child: [],
             meta: {},
           },
+          // {
+          //   title: "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
index 8eaaec0..7aaa051 100644
--- a/pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
+++ b/pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div>
     <div class="flex justify-between items-center">
@@ -104,14 +103,12 @@
           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">
@@ -353,4 +350,4 @@ button {
 button:hover {
   background-color: #0056b3;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/kemaskini-daftar/maklumat/[noSiri]/index.vue b/pages/kemaskini-daftar/maklumat/[noSiri]/index.vue
new file mode 100644
index 0000000..a997f89
--- /dev/null
+++ b/pages/kemaskini-daftar/maklumat/[noSiri]/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!-- CARD: Status Semakan & Status Penerimaan -->
+    <rs-card class="mt-4 p-4">
+      <div class="flex justify-between">
+        <h3>Status Semakan</h3>
+        <rs-badge
+          :variant="statusSemakan === 'Selesai' ? 'success' : 'warning'"
+        >
+          {{ statusSemakan }}
+        </rs-badge>
+      </div>
+      <div class="flex justify-between mt-2">
+        <h3>Status Penerimaan</h3>
+        <rs-badge
+          :variant="statusPenerimaan === 'Diterima' ? 'success' : 'danger'"
+        >
+          {{ statusPenerimaan }}
+        </rs-badge>
+      </div>
+    </rs-card>
+
+    <!-- LIST: Pegawai Forensic Yang Terlibat -->
+    <rs-card class="mt-4 p-4">
+      <div class="flex justify-between items-center">
+        <h3>Pegawai Forensik Yang Terlibat</h3>
+        <rs-button
+          v-if="isKetuaBahagian"
+          @click="addPegawai"
+          variant="primary"
+          size="sm"
+          >Tambah Pegawai</rs-button
+        >
+      </div>
+      <rs-table
+        :data="forensicOfficers"
+        :options="{ striped: true, borderless: true }"
+      >
+        <template v-slot:header>
+          <tr>
+            <th>Pangkat</th>
+            <th>Nama</th>
+            <th>No Pegawai</th>
+            <th v-if="isKetuaBahagian">Tindakan</th>
+          </tr>
+        </template>
+        <template v-slot:pangkat="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:nama="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:noPegawai="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:action="data" v-if="isKetuaBahagian">
+          <div class="flex gap-2">
+            <rs-button @click="editPegawai(data.value)" variant="info" size="sm"
+              >Edit</rs-button
+            >
+            <rs-button
+              @click="deletePegawai(data.value)"
+              variant="danger"
+              size="sm"
+              >Delete</rs-button
+            >
+          </div>
+        </template>
+      </rs-table>
+    </rs-card>
+
+    <!-- LIST: Bahan Bukti -->
+    <rs-card class="mt-4 p-4">
+      <h3>Bahan Bukti</h3>
+      <rs-table
+        :data="evidences"
+        :options="{ striped: true, borderless: true }"
+      >
+        <template v-slot:header>
+          <tr>
+            <th>No</th>
+            <th>Jenis Barang</th>
+            <th>Tag No.</th>
+            <th>Keadaan</th>
+            <th>Kuantiti</th>
+            <th v-if="!isKetuaJabatan">Tindakan</th>
+          </tr>
+        </template>
+        <template v-slot:no="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:jenisBarang="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:tagNo="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:keadaan="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:kuantiti="data">
+          {{ data.text }}
+        </template>
+        <template v-slot:action="data" v-if="!isKetuaJabatan">
+          <rs-button
+            @click="generateReport(data.value)"
+            variant="primary"
+            size="sm"
+            >Jana Laporan</rs-button
+          >
+        </template>
+      </rs-table>
+    </rs-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useNuxtApp } from "nuxt/app";
+
+// Status data
+const statusSemakan = ref("Selesai"); // Can be dynamic (e.g., "Dalam Proses", "Selesai")
+const statusPenerimaan = ref("Diterima"); // Can be dynamic (e.g., "Diterima", "Ditolak")
+
+// Forensic Officers Data (Pangkat, Nama, No Pegawai)
+const forensicOfficers = ref([
+  { pangkat: "Inspektor", nama: "Ali bin Abu", noPegawai: "PG12345" },
+  { pangkat: "Sarjan", nama: "Siti binti Ahmad", noPegawai: "PG54321" },
+]);
+
+// Evidence Data (No, Jenis Barang, Tag No, Keadaan, Kuantiti)
+const evidences = ref([
+  {
+    no: 1,
+    jenisBarang: "Dokumen",
+    tagNo: "TAG001",
+    keadaan: "Baik",
+    kuantiti: 3,
+  },
+  {
+    no: 2,
+    jenisBarang: "Peralatan Elektronik",
+    tagNo: "TAG002",
+    keadaan: "Rosak",
+    kuantiti: 5,
+  },
+]);
+
+// User Roles
+const isKetuaBahagian = ref(true); // Simulate role check
+const isKetuaJabatan = ref(false); // Simulate role check
+
+// Actions
+const addPegawai = () => {
+  console.log("Add Pegawai clicked");
+};
+
+const editPegawai = (pegawai) => {
+  console.log("Edit Pegawai:", pegawai);
+};
+
+const deletePegawai = (pegawai) => {
+  console.log("Delete Pegawai:", pegawai);
+  forensicOfficers.value = forensicOfficers.value.filter(
+    (officer) => officer.noPegawai !== pegawai.noPegawai
+  );
+};
+
+const generateReport = (bahanBukti) => {
+  console.log("Generate Report for:", bahanBukti);
+};
+</script>
+
+<style lang="scss" scoped>
+/* Style customizations for table or buttons */
+</style>
diff --git a/pages/kemaskini-daftar/senarai/index.vue b/pages/kemaskini-daftar/senarai/index.vue
index 094ae47..ff64aff 100644
--- a/pages/kemaskini-daftar/senarai/index.vue
+++ b/pages/kemaskini-daftar/senarai/index.vue
@@ -1,4 +1,3 @@
-@ -1,146 +0,0 @@
 <template>
   <div>
     <div class="flex justify-between items-center">
@@ -8,16 +7,16 @@
     <rs-card class="mt-4 py-2">
       <rs-table
         :data="tableData"
-        :options="{
-          variant: 'default',
+        :options='{
+          variant: "default",
           striped: true,
-          borderless: true,
-        }"
-        :options-advanced="{
+          borderless: true
+        }'
+        :options-advanced='{
           sortable: true,
           responsive: true,
-          filterable: false,
-        }"
+          filterable: false
+        }'
         advanced
       >
         <template v-slot:header>
@@ -45,6 +44,18 @@
         </template>
         <template v-slot:butiran="data">
           <div class="flex flex-wrap gap-2">
+            <!-- View Button -->
+            <rs-button
+              @click="lihat(data.value.noSiri)"
+              variant="info"
+              size="sm"
+              class="p-1"
+              title="Lihat"
+            >
+              <Icon name="ic:outline-visibility" size="1.2rem" />
+            </rs-button>
+
+            <!-- Edit Button -->
             <rs-button
               @click="kemaskini(data.value.noSiri)"
               variant="primary"
@@ -108,13 +119,18 @@ const tableData = ref([
 ]);
 
 const permohonanBaru = () => {
-  navigateTo("/permohonan-online/baru");
+  navigateTo("/permohonan-temujanji/baru");
 };
 
 const kemaskini = (item) => {
   navigateTo(`/kemaskini-daftar/kemaskini/${item}`);
 };
 
+const lihat = (item) => {
+  // Navigate to a detailed view page for the selected item
+  navigateTo(`/kemaskini-daftar/maklumat/${item}`);
+};
+
 const hapus = (item) => {
   $swal
     .fire({
@@ -131,7 +147,7 @@ const hapus = (item) => {
       if (result.isConfirmed) {
         // Perform deletion logic here
         console.log("Deleting item:", item);
-        // For now, let's just remove the item from the tableData
+        // Remove the item from the tableData
         const index = tableData.value.findIndex((row) => row.noSiri === item);
         if (index !== -1) {
           tableData.value.splice(index, 1);
@@ -141,7 +157,3 @@ const hapus = (item) => {
     });
 };
 </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
deleted file mode 100644
index 23cea79..0000000
--- a/pages/permohonan-online/baru/index.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<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-temujanji/baru/index.vue b/pages/permohonan-temujanji/baru/index.vue
new file mode 100644
index 0000000..977935a
--- /dev/null
+++ b/pages/permohonan-temujanji/baru/index.vue
@@ -0,0 +1,401 @@
+<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">
+        <!-- Nama Pemohon Input -->
+        <FormKit
+          type="text"
+          label="Nama Pemohon"
+          v-model="namaPemohon"
+          validation="required"
+        />
+
+        <!-- Pangkat Pemohon Input -->
+        <FormKit
+          type="text"
+          label="Pangkat Pemohon"
+          v-model="pangkatPemohon"
+          validation="required"
+        />
+
+        <!-- No Pegawai Pemohon Input -->
+        <FormKit
+          type="text"
+          label="No Pegawai Pemohon"
+          v-model="noPegawaiPemohon"
+          validation="required"
+        />
+
+        <!-- Checkbox: Apply Pemohon info to Penghantar -->
+        <FormKit
+          type="checkbox"
+          label="Penghantar Sama seperti Pemohon"
+          v-model="isPenghantarSameAsPemohon"
+        />
+
+        <!-- Conditionally render Nama Penghantar field if checkbox is not checked -->
+        <FormKit
+          v-if="!isPenghantarSameAsPemohon"
+          type="text"
+          label="Nama Penghantar"
+          v-model="namaPenghantar"
+          validation="required"
+        />
+
+        <!-- Conditionally render Pangkat Penghantar field if checkbox is not checked -->
+        <FormKit
+          v-if="!isPenghantarSameAsPemohon"
+          type="text"
+          label="Pangkat Penghantar"
+          v-model="pangkatPenghantar"
+          validation="required"
+        />
+
+        <!-- Conditionally render No Pegawai Penghantar field if checkbox is not checked -->
+        <FormKit
+          v-if="!isPenghantarSameAsPemohon"
+          type="text"
+          label="No Pegawai Penghantar"
+          v-model="noPegawaiPenghantar"
+          validation="required"
+        />
+
+        <!-- Ringkasan Kenyataan Kes Input -->
+        <FormKit
+          type="textarea"
+          label="Ringkasan Kenyataan Kes"
+          v-model="ringkasanKenyataanKes"
+          validation="required"
+        />
+
+        <!-- Bilangan Input -->
+        <FormKit
+          type="number"
+          label="Bilangan"
+          v-model="bilangan"
+          validation="required|number"
+        />
+
+        <!-- Jenis Barang Input -->
+        <FormKit
+          type="text"
+          label="Jenis Barang"
+          v-model="jenisBarang"
+          validation="required"
+        />
+
+        <!-- Tanda Barang Input -->
+        <FormKit
+          type="text"
+          label="Tanda Barang"
+          v-model="tandaBarang"
+          validation="required"
+        />
+
+        <!-- Keadaan Barang Input -->
+        <FormKit
+          type="text"
+          label="Keadaan Barang"
+          v-model="keadaanBarang"
+          validation="required"
+        />
+
+        <!-- Kuantiti Barang Input -->
+        <FormKit
+          type="number"
+          label="Kuantiti Barang"
+          v-model="kuantitiBarang"
+          validation="required|number"
+        />
+
+        <!-- Jenis Barang Detail Select Input -->
+        <FormKit
+          type="select"
+          label="Jenis Barang"
+          v-model="jenisBarangDetail"
+          :options="jenisBarangDetailOptions"
+          validation="required"
+        />
+
+        <!-- Jenis Barang Siber Select Input -->
+        <FormKit
+          type="select"
+          label="Jenis Barang Siber"
+          v-model="jenisBarangSiber"
+          :options="jenisBarangSiberOptions"
+          validation="required"
+        />
+
+        <!-- No Kertas Siasatan Input -->
+        <FormKit
+          type="text"
+          label="No Kertas Siasatan"
+          v-model="noKertasSiasatan"
+          validation="required"
+        />
+
+        <!-- No Laporan Polis Input -->
+        <FormKit
+          type="text"
+          label="No Laporan Polis"
+          v-model="noLaporanPolis"
+          validation="required"
+        />
+
+        <!-- Tarikh Temujanji Input -->
+        <FormKit
+          type="date"
+          label="Tarikh temujanji"
+          v-model="tarikhTemujanji"
+          validation="required|date|after:today"
+          :validation-messages="{
+            after: 'Tarikh temujanji harus selepas hari ini',
+          }"
+        />
+
+        <!-- Slot Masa Input -->
+        <FormKit
+          type="time"
+          label="Slot masa"
+          v-model="slotMasa"
+          validation="required"
+        />
+
+        <!-- Action Buttons -->
+        <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, watch } 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 noPegawaiPenghantar = 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 tarikhTemujanji = ref("");
+const slotMasa = ref("");
+
+// State for single checkbox
+const isPenghantarSameAsPemohon = ref(false);
+
+const jenisBarangDetailOptions = [
+  "PASPORT",
+  "MALPASS",
+  "CAP KESELAMATAN",
+  "CAP JARI",
+  "PEMERIKSAAN",
+  "I-KAD",
+  "LAIN-LAIN",
+];
+
+const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
+
+// Watcher to update Penghantar fields when the single checkbox is checked
+watch(isPenghantarSameAsPemohon, (newValue) => {
+  if (newValue) {
+    // Copy values from Pemohon fields to Penghantar fields
+    namaPenghantar.value = namaPemohon.value;
+    pangkatPenghantar.value = pangkatPemohon.value;
+    noPegawaiPenghantar.value = noPegawaiPemohon.value;
+  } else {
+    // Clear Penghantar fields when unchecked
+    namaPenghantar.value = "";
+    pangkatPenghantar.value = "";
+    noPegawaiPenghantar.value = "";
+  }
+});
+
+const navigateBack = () => {
+  router.back();
+};
+
+const isFormValid = () => {
+  const requiredFields = [
+    namaPemohon,
+    pangkatPemohon,
+    noPegawaiPemohon,
+    namaPenghantar,
+    pangkatPenghantar,
+    noPegawaiPenghantar,
+    ringkasanKenyataanKes,
+    bilangan,
+    jenisBarang,
+    tandaBarang,
+    keadaanBarang,
+    kuantitiBarang,
+    jenisBarangDetail,
+    jenisBarangSiber,
+    noKertasSiasatan,
+    noLaporanPolis,
+    tarikhTemujanji,
+    slotMasa,
+  ];
+
+  return requiredFields.every(
+    (field) => field.value !== "" && field.value !== 0
+  );
+};
+
+const simpan = () => {
+  $swal
+    .fire({
+      title: "Adakah anda pasti?",
+      text: "Borang boleh dikemaskini selepas di simpan.",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Hantar",
+      cancelButtonText: "Batal",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        // Handle form submission
+        console.log({
+          namaPemohon: namaPemohon.value,
+          pangkatPemohon: pangkatPemohon.value,
+          noPegawaiPemohon: noPegawaiPemohon.value,
+          namaPenghantar: namaPenghantar.value,
+          pangkatPenghantar: pangkatPenghantar.value,
+          noPegawaiPenghantar: noPegawaiPenghantar.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,
+          tarikhTemujanji: tarikhTemujanji.value,
+          slotMasa: slotMasa.value,
+        });
+
+        // Show success message
+        $swal.fire({
+          title: "Berjaya!",
+          text: "Borang telah berjaya disimpan.",
+          icon: "success",
+          confirmButtonText: "OK",
+        });
+      }
+    });
+};
+
+const submitForm = () => {
+  $swal
+    .fire({
+      title: "Adakah anda pasti?",
+      text: "Anda tidak boleh mengubah maklumat selepas borang dihantar.",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Hantar",
+      cancelButtonText: "Batal",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        if (isFormValid()) {
+          // Handle form submission
+          console.log({
+            namaPemohon: namaPemohon.value,
+            pangkatPemohon: pangkatPemohon.value,
+            noPegawaiPemohon: noPegawaiPemohon.value,
+            namaPenghantar: namaPenghantar.value,
+            pangkatPenghantar: pangkatPenghantar.value,
+            noPegawaiPenghantar: noPegawaiPenghantar.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,
+            tarikhTemujanji: tarikhTemujanji.value,
+            slotMasa: slotMasa.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>
diff --git a/pages/permohonan-online/kemaskini/[noSiri]/index.vue b/pages/permohonan-temujanji/kemaskini/[noSiri]/index.vue
similarity index 54%
rename from pages/permohonan-online/kemaskini/[noSiri]/index.vue
rename to pages/permohonan-temujanji/kemaskini/[noSiri]/index.vue
index d1f6a98..ce5370b 100644
--- a/pages/permohonan-online/kemaskini/[noSiri]/index.vue
+++ b/pages/permohonan-temujanji/kemaskini/[noSiri]/index.vue
@@ -6,72 +6,113 @@
 
     <rs-card class="mt-4 p-4">
       <FormKit type="form" :actions="false" @submit="submitForm">
+        <!-- Nama Pemohon Input -->
         <FormKit
           type="text"
           label="Nama Pemohon"
           v-model="namaPemohon"
           validation="required"
         />
+
+        <!-- Pangkat Pemohon Input -->
         <FormKit
           type="text"
           label="Pangkat Pemohon"
           v-model="pangkatPemohon"
           validation="required"
         />
+
+        <!-- No Pegawai Pemohon Input -->
         <FormKit
           type="text"
           label="No Pegawai Pemohon"
           v-model="noPegawaiPemohon"
           validation="required"
         />
+
+        <!-- Checkbox: Apply Pemohon info to Penghantar -->
         <FormKit
+          type="checkbox"
+          label="Sama seperti Pemohon"
+          v-model="isPenghantarSameAsPemohon"
+        />
+
+        <!-- Conditionally render Nama Penghantar field if checkbox is not checked -->
+        <FormKit
+          v-if="!isPenghantarSameAsPemohon"
           type="text"
           label="Nama Penghantar"
           v-model="namaPenghantar"
           validation="required"
         />
+
+        <!-- Conditionally render Pangkat Penghantar field if checkbox is not checked -->
         <FormKit
+          v-if="!isPenghantarSameAsPemohon"
           type="text"
           label="Pangkat Penghantar"
           v-model="pangkatPenghantar"
           validation="required"
         />
+
+        <!-- Conditionally render No Pegawai Penghantar field if checkbox is not checked -->
+        <FormKit
+          v-if="!isPenghantarSameAsPemohon"
+          type="text"
+          label="No Pegawai Penghantar"
+          v-model="noPegawaiPenghantar"
+          validation="required"
+        />
+
+        <!-- Ringkasan Kenyataan Kes Input -->
         <FormKit
           type="textarea"
           label="Ringkasan Kenyataan Kes"
           v-model="ringkasanKenyataanKes"
           validation="required"
         />
+
+        <!-- Bilangan Input -->
         <FormKit
           type="number"
           label="Bilangan"
           v-model="bilangan"
           validation="required|number"
         />
+
+        <!-- Jenis Barang Input -->
         <FormKit
           type="text"
           label="Jenis Barang"
           v-model="jenisBarang"
           validation="required"
         />
+
+        <!-- Tanda Barang Input -->
         <FormKit
           type="text"
           label="Tanda Barang"
           v-model="tandaBarang"
           validation="required"
         />
+
+        <!-- Keadaan Barang Input -->
         <FormKit
           type="text"
           label="Keadaan Barang"
           v-model="keadaanBarang"
           validation="required"
         />
+
+        <!-- Kuantiti Barang Input -->
         <FormKit
           type="number"
           label="Kuantiti Barang"
           v-model="kuantitiBarang"
           validation="required|number"
         />
+
+        <!-- Jenis Barang Detail Select Input -->
         <FormKit
           type="select"
           label="Jenis Barang"
@@ -79,6 +120,8 @@
           :options="jenisBarangDetailOptions"
           validation="required"
         />
+
+        <!-- Jenis Barang Siber Select Input -->
         <FormKit
           type="select"
           label="Jenis Barang Siber"
@@ -86,18 +129,38 @@
           :options="jenisBarangSiberOptions"
           validation="required"
         />
+
+        <!-- No Kertas Siasatan Input -->
         <FormKit
           type="text"
           label="No Kertas Siasatan"
           v-model="noKertasSiasatan"
           validation="required"
         />
+
+        <!-- No Laporan Polis Input -->
         <FormKit
           type="text"
           label="No Laporan Polis"
           v-model="noLaporanPolis"
           validation="required"
         />
+
+        <!-- Tarikh Temujanji Input -->
+        <FormKit
+          type="date"
+          label="Tarikh temujanji"
+          v-model="tarikhTemujanji"
+          validation="date|after:today"
+          :validation-messages="{
+            after: 'Tarikh temujanji mestilah selepas hari ini',
+          }"
+        />
+
+        <!-- Slot Masa Input -->
+        <FormKit type="time" label="Slot masa" v-model="slotMasa" />
+
+        <!-- Action Buttons -->
         <div class="flex justify-end gap-2 mt-4">
           <rs-button type="button" @click="navigateBack" variant="danger"
             >Kembali</rs-button
@@ -123,7 +186,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
@@ -131,11 +194,13 @@ const route = useRoute();
 
 const noSiri = ref(route.params.noSiri);
 
+// Form data
 const namaPemohon = ref("");
 const pangkatPemohon = ref("");
 const noPegawaiPemohon = ref("");
 const namaPenghantar = ref("");
 const pangkatPenghantar = ref("");
+const noPegawaiPenghantar = ref("");
 const ringkasanKenyataanKes = ref("");
 const bilangan = ref(0);
 const jenisBarang = ref("");
@@ -146,6 +211,11 @@ const jenisBarangDetail = ref("");
 const jenisBarangSiber = ref("");
 const noKertasSiasatan = ref("");
 const noLaporanPolis = ref("");
+const tarikhTemujanji = ref("");
+const slotMasa = ref("");
+
+// State for single checkbox
+const isPenghantarSameAsPemohon = ref(false);
 
 const jenisBarangDetailOptions = [
   "PASPORT",
@@ -159,10 +229,26 @@ const jenisBarangDetailOptions = [
 
 const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
 
+// Watcher to update Penghantar fields when the checkbox is checked
+watch(isPenghantarSameAsPemohon, (newValue) => {
+  if (newValue) {
+    // Copy values from Pemohon fields to Penghantar fields
+    namaPenghantar.value = namaPemohon.value;
+    pangkatPenghantar.value = pangkatPemohon.value;
+    noPegawaiPenghantar.value = noPegawaiPemohon.value;
+  } else {
+    // Clear Penghantar fields when unchecked
+    namaPenghantar.value = "";
+    pangkatPenghantar.value = "";
+    noPegawaiPenghantar.value = "";
+  }
+});
+
 const navigateBack = () => {
   router.back();
 };
 
+// Validate the form
 const isFormValid = () => {
   const requiredFields = [
     namaPemohon,
@@ -170,6 +256,7 @@ const isFormValid = () => {
     noPegawaiPemohon,
     namaPenghantar,
     pangkatPenghantar,
+    noPegawaiPenghantar,
     ringkasanKenyataanKes,
     bilangan,
     jenisBarang,
@@ -180,6 +267,8 @@ const isFormValid = () => {
     jenisBarangSiber,
     noKertasSiasatan,
     noLaporanPolis,
+    tarikhTemujanji,
+    slotMasa,
   ];
 
   return requiredFields.every(
@@ -188,53 +277,106 @@ const isFormValid = () => {
 };
 
 const simpan = () => {
-  if (isFormValid()) {
-    // Save form data logic
-    console.log("Form data saved");
-  } else {
-    console.error("Please fill in all required fields.");
-  }
+  $swal
+    .fire({
+      title: "Adakah anda pasti?",
+      text: "Borang boleh dikemas kini selepas di simpan.",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Hantar",
+      cancelButtonText: "Batal",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        // Handle form submission
+        console.log({
+          namaPemohon: namaPemohon.value,
+          pangkatPemohon: pangkatPemohon.value,
+          noPegawaiPemohon: noPegawaiPemohon.value,
+          namaPenghantar: namaPenghantar.value,
+          pangkatPenghantar: pangkatPenghantar.value,
+          noPegawaiPenghantar: noPegawaiPenghantar.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,
+          tarikhTemujanji: tarikhTemujanji.value,
+          slotMasa: slotMasa.value,
+        });
+
+        // Show success message
+        $swal.fire({
+          title: "Berjaya!",
+          text: "Borang telah berjaya disimpan.",
+          icon: "success",
+          confirmButtonText: "OK",
+        });
+      }
+    });
 };
 
 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,
-    });
+  $swal
+    .fire({
+      title: "Adakah anda pasti?",
+      text: "Borang boleh dikemaskini selepas di simpan.",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonText: "Ya, Hantar",
+      cancelButtonText: "Batal",
+    })
+    .then((result) => {
+      if (result.isConfirmed) {
+        if (isFormValid()) {
+          // Handle form submission
+          console.log({
+            namaPemohon: namaPemohon.value,
+            pangkatPemohon: pangkatPemohon.value,
+            noPegawaiPemohon: noPegawaiPemohon.value,
+            namaPenghantar: namaPenghantar.value,
+            pangkatPenghantar: pangkatPenghantar.value,
+            noPegawaiPenghantar: noPegawaiPenghantar.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,
+            tarikhTemujanji: tarikhTemujanji.value,
+            slotMasa: slotMasa.value,
+          });
 
-    // Show success message
-    $swal.fire({
-      title: "Berjaya!",
-      text: "Borang telah berjaya dihantar.",
-      icon: "success",
-      confirmButtonText: "OK",
+          // 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",
+          });
+        }
+      }
     });
-  } else {
-    // Show error message
-    $swal.fire({
-      title: "Ralat!",
-      text: "Sila isi semua medan yang diperlukan.",
-      icon: "error",
-      confirmButtonText: "OK",
-    });
-  }
 };
 
+// Function to generate sample data
 function generateSampleData(noSiri) {
   const randomNumber = (min, max) =>
     Math.floor(Math.random() * (max - min + 1) + min);
@@ -275,6 +417,10 @@ function generateSampleData(noSiri) {
     jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
     noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
     noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
+    tarikhTemujanji: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+      .toISOString()
+      .split("T")[0], // 7 days from now
+    slotMasa: `${randomNumber(9, 16)}:00`, // Random hour between 9 AM and 4 PM
   };
 }
 
@@ -296,6 +442,8 @@ onMounted(() => {
   jenisBarangSiber.value = sampleData.jenisBarangSiber;
   noKertasSiasatan.value = sampleData.noKertasSiasatan;
   noLaporanPolis.value = sampleData.noLaporanPolis;
+  tarikhTemujanji.value = sampleData.tarikhTemujanji;
+  slotMasa.value = sampleData.slotMasa;
 });
 
 const { $swal } = useNuxtApp();
@@ -320,4 +468,4 @@ button {
 button:hover {
   background-color: #0056b3;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/permohonan-online/senarai/index.vue b/pages/permohonan-temujanji/senarai/index.vue
similarity index 69%
rename from pages/permohonan-online/senarai/index.vue
rename to pages/permohonan-temujanji/senarai/index.vue
index b4ee844..19c1d3f 100644
--- a/pages/permohonan-online/senarai/index.vue
+++ b/pages/permohonan-temujanji/senarai/index.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div>
     <div class="flex justify-between items-center">
@@ -42,12 +41,18 @@
           {{ data.text || "N/A" }}
         </template>
         <template v-slot:status="data">
-          <rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
+          <rs-badge
+            :variant="
+              data.text === 'Aktif' || data.text === 'Sah'
+                ? 'success'
+                : 'danger'
+            "
+          >
             {{ data.text || "N/A" }}
           </rs-badge>
         </template>
         <template v-slot:butiran="data">
-          <div class="flex flex-wrap gap-2">
+          <div class="flex flex-wrap gap-2" v-if="data.value.status !== 'Sah'">
             <rs-button
               @click="kemaskini(data.value.noSiri)"
               variant="primary"
@@ -67,6 +72,9 @@
               <Icon name="ic:baseline-delete" size="1.2rem" />
             </rs-button>
           </div>
+          <div v-else>
+            <span>Permohonan telah disahkan</span>
+          </div>
         </template>
       </rs-table>
     </rs-card>
@@ -86,7 +94,7 @@ const tableData = ref([
     no: 1,
     noSiri: "1234567890",
     tarikhMasa: "2024-01-01 12:00:00",
-    status: "Aktif",
+    status: "Sah",
     butiran: 1,
   },
   {
@@ -120,42 +128,40 @@ const tableData = ref([
 ]);
 
 const permohonanBaru = () => {
-  navigateTo("/permohonan-online/baru");
+  navigateTo("/permohonan-temujanji/baru");
 };
 
 const kemaskini = (item) => {
-  navigateTo(`/permohonan-online/kemaskini/${item}`);
+  navigateTo(`/permohonan-temujanji/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({
+      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");
       }
-      $swal.fire(
-        'Dihapuskan!',
-        'Data telah dihapuskan.',
-        'success'
-      )
-    }
-  })
+    });
 };
 </script>
 
 <style lang="scss" scoped>
 /* Add any scoped styles here */
-</style>
\ No newline at end of file
+</style>