enable note edit button

resources/views/home.blade.php

             </div>
         </div>
 
-        <div class="border rounded p-5">
+        <div x-data="{ editNote: false }">
+            <div x-show="!editNote" class="border rounded p-5 space-y-4 mb-3">
+                <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
+                <p class="text-xs font-bold">
+                    YB Dato’ Pengerusi memohon agar sasaran adalah melebihi sasaran tahun 2024:
+                    <span class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span>
+                </p>
+                <p class="text-xs font-bold">
+                    15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang diisi
+                    oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.
+                </p>
+            </div>
 
-            <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
-            <p class="text-xs font-bold">YB Dato’ Pengerusi memohon agar sasaran adalah melebihi sasaran tahun 2024: <span
-                    class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span></p>
-            <p class="text-xs font-bold">15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang diisi
-                oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.</p>
-        </div>
+            <!-- Edit mode -->
+            <div x-show="editNote" class="border rounded p-5 space-y-4 mb-3">
+                <label for="note" class="text-sm font-semibold text-gray-700 block">Kemaskini Nota:</label>
+                <textarea id="textNote" x-model="noteText" placeholder="Masukkan nota baru di sini..."
+                    class="w-full h-32 p-3 border border-gray-300 rounded-lg text-sm text-gray-800 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"></textarea>
+            </div>
 
-        <button
-            class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200 ml-auto">
-            <i class="fa-solid fa-edit text-white text-xs"></i>
-            <span>Kemaskini</span>
-        </button>
+            <!-- Buttons -->
+            <div class="flex justify-end gap-2">
+                <!-- Show when not editing -->
+                <button @click="editNote = true" x-show="!editNote"
+                    class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
+                    <i class="fa-solid fa-edit text-white text-xs"></i>
+                    <span>Kemaskini</span>
+                </button>
+
+                <!-- Show when editing -->
+                <button onclick="updateNote()" @click="editNote = false" x-show="editNote"
+                    class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
+                    <i class="fa-solid fa-save text-white text-xs"></i>
+                    <span>Simpan</span>
+                </button>
+            </div>
+
+            <script>
+                function updateNote(){
+                    console.log("update note")
+                }
+            </script>
 
+        </div>
 
     </div>
 @endsection

resources/views/project.blade.php

             <div class="relative w-full lg:w-fit">
                 <select id="selectProjectStatus"
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onchange="renderFDITable()">
+                    onchange="renderFDITable(); renderDDITable()">
                     <option value="all" selected>Status</option>
                     <option value="1">Perjanjian Muktamad</option>
                     <option value="0">Deraf Perjanjian</option>
             <div class="relative w-full lg:w-fit">
                 <select id="selectProjectArea"
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onchange="renderFDITable()">
+                    onchange="renderFDITable(); renderDDITable()">
                     <option value="all" selected>Daerah</option>
                     <option value="Gambang">Gambang</option>
                     <option value="Pekan">Pekan</option>
             <div class="relative w-full lg:w-fit">
                 <select id="selectProjectYear"
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onchange="renderFDITable()">
+                    onchange="renderFDITable(); renderDDITable()">
                     <option value="all" selected>Tahun</option>
                     <option value="2026">2026</option>
                     <option value="2025">2025</option>
             </div>
         </div>
 
-        <div class="border rounded p-5">
+        <div x-data="{ editNote: false }">
+            <div x-show="!editNote" class="border rounded p-5 space-y-4 mb-3">
+                <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
+                <p class="text-xs font-bold">
+                    YB Dato’ Pengerusi memohon agar sasaran adalah melebihi sasaran tahun 2024:
+                    <span class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span>
+                </p>
+                <p class="text-xs font-bold">
+                    15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang diisi
+                    oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.
+                </p>
+            </div>
 
-            <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
-            <p class="text-xs font-bold">YB Dato’ Pengerusi memohon agar sasaran adalah melebihi sasaran tahun 2024: <span
-                    class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span></p>
-            <p class="text-xs font-bold">15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang
-                diisi
-                oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.</p>
-        </div>
+            <!-- Edit mode -->
+            <div x-show="editNote" class="border rounded p-5 space-y-4 mb-3">
+                <label for="note" class="text-sm font-semibold text-gray-700 block">Kemaskini Nota:</label>
+                <textarea id="textNote" x-model="noteText" placeholder="Masukkan nota baru di sini..."
+                    class="w-full h-32 p-3 border border-gray-300 rounded-lg text-sm text-gray-800 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"></textarea>
+            </div>
 
-        <button
-            class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200 ml-auto">
-            <i class="fa-solid fa-edit text-white text-xs"></i>
-            <span>Kemaskini</span>
-        </button>
+            <!-- Buttons -->
+            <div class="flex justify-end gap-2">
+                <!-- Show when not editing -->
+                <button @click="editNote = true" x-show="!editNote"
+                    class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
+                    <i class="fa-solid fa-edit text-white text-xs"></i>
+                    <span>Kemaskini</span>
+                </button>
+
+                <!-- Show when editing -->
+                <button onclick="updateNote()" @click="editNote = false" x-show="editNote"
+                    class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
+                    <i class="fa-solid fa-save text-white text-xs"></i>
+                    <span>Simpan</span>
+                </button>
+            </div>
+
+            <script>
+                function updateNote() {
+                    console.log("update note")
+                }
+            </script>
+
+        </div>
 
     </div>
 @endsection

routes/web.php

                 "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
                 "type" => "Kilang Memproses Kicap (Pembesaran)",
                 "status" => 0,
+                "year" => "2025",
                 "note" => "Dalam Proses Submit",
                 "moa_date" => "",
                 "area" => "Kawasan Perindustrian Bentong",
                 "company_name" => "Advanced Achieve Property Management Sdn. Bhd",
                 "type" => "International Space Port",
                 "status" => 1,
+                "year" => "2026",
                 "note" => "Dalam Proses Pindahan",
                 "moa_date" => "",
                 "area" => "KP Gebeng 1",
                 "company_name" => "BH Setia Sdn Bhd (Jualan IKS)",
                 "type" => "Data Center",
                 "status" => 1,
+                "year" => "2025",
                 "note" => "Proses Dalam Pindahan",
                 "moa_date" => "22-02-2025",
                 "area" => "KP Gebeng 2",
                 "company_name" => "Gading Senggara Property (Pajakan)",
                 "type" => "International Space Port",
                 "status" => 0,
+                "year" => "2026",
                 "note" => "Dalam Proses Memuktamadkan Perjanjian",
                 "moa_date" => "",
                 "area" => "KP Gebeng 3",
                 "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
                 "type" => "Kilang Memproses Kicap (Pembesaran)",
                 "status" => null,
+                "year" => "2025",
                 "note" => "Dalam Proses Submit",
                 "moa_date" => "",
                 "area" => "Kawasan Perindustrian Bentong",
                 "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
                 "type" => "Kilang Memproses Kicap (Pembesaran)",
                 "status" => null,
+                "year" => "2026",
                 "note" => "Dalam Proses Submit",
                 "moa_date" => "",
                 "area" => "Kawasan Perindustrian Bentong",