done demo

resources/views/home.blade.php

@@ -35,7 +35,6 @@
                 @if ($hasNotification)
                     <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
                 @endif
-
                 <i class="fa-regular fa-bell text-md hover:text-[#BD8736]"></i>
             </div>
 

resources/views/project.blade.php

@@ -34,9 +34,10 @@
             </div>
 
             <div class="relative w-fit">
-                <select
-                    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">
-                    <option value="comited" selected>Komited</option>
+                <select id="selectProjectType"
+                    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="fetchAndRenderProjects()">
+                    <option value="commited" selected>Komited</option>
                     <option value="potential">Pontential</option>
                 </select>
             </div>
@@ -96,8 +97,8 @@
                             <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
                         </tr>
                     </thead>
-                    <tbody>
-                        @foreach ($comittedFDIProject as $index => $project)
+                    <tbody id="FDItableBody">
+                        @foreach ($commitedFDIProject as $index => $project)
                             <tr>
                                 <td class="px-4 py-2">{{ $index + 1 }}</td>
                                 <td class="px-4 py-2">{{ $project['company_name'] }}</td>
@@ -224,7 +225,8 @@
             <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
+            <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>
@@ -233,4 +235,65 @@
 @endsection
 
 @section('scripts')
+    <script>
+        async function fetchAndRenderProjects() {
+
+            const selectedType = document.getElementById('selectProjectType').value;
+
+            try {
+
+                const response = await fetch(`/api/project/${selectedType}`); // Adjust to your real endpoint
+                const data = await response.json();
+
+                if (!data.FDIProject || !data.DDIProject) return
+
+                renderFDITable(data.FDIProject)
+
+            } catch (error) {
+                console.error('Error fetching projects:', error);
+            }
+        }
+
+        function renderFDITable(data) {
+
+            const tbody = document.getElementById('FDItableBody');
+            tbody.innerHTML = ''; // Clear existing content
+
+            data.forEach((project, index) => {
+                const statusHTML = (() => {
+                    switch (project.status) {
+                        case 1:
+                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
+                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
+                                Perjanjian Muktamad</div>`;
+                        case 0:
+                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
+                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452;width:100%">
+                                Deraf Perjanjian</div>`;
+                        default:
+                            return `<div>-</div>`;
+                    }
+                })();
+
+                const row = `
+                    <tr>
+                        <td class="px-4 py-2">${index + 1}</td>
+                        <td class="px-4 py-2">${project.company_name}</td>
+                        <td class="px-4 py-2">${project.type}</td>
+                        <td class="px-4 py-2 text-center">${statusHTML}</td>
+                        <td class="px-4 py-2 text-xs">${project.note}</td>
+                        <td class="px-4 py-2 text-xs">${project.moa_date}</td>
+                        <td class="px-4 py-2 text-xs">${project.area}</td>
+                        <td class="px-4 py-2 text-xs">${Number(project.invesment_approx).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                        <td class="px-4 py-2 text-xs">${project.labour_approx}</td>
+                        <td class="px-4 py-2 text-xs">${project.land_area ? Number(project.land_area).toLocaleString() : '<span class="text-md font-bold">TBC</span>'}</td>
+                    </tr>
+                `;
+                tbody.insertAdjacentHTML('beforeend', row);
+            });
+
+        }
+
+        document.addEventListener('DOMContentLoaded', fetchAndRenderProjects);
+    </script>
 @endsection

routes/web.php

@@ -155,7 +155,7 @@ Route::get('/agency', function () {
 
 Route::get('/project', function () {
 
-    $comittedFDIProject = [
+    $commitedFDIProject = [
         [
             "id" => 1,
             "company_name" => "Fire Phoenix International",
@@ -233,10 +233,10 @@ Route::get('/project', function () {
         ]
     ];
 
-    return view('project', compact('comittedFDIProject', 'commitedDDIProject'));
+    return view('project', compact('commitedFDIProject', 'commitedDDIProject'));
 });
 
-Route::get('/agency_performance', function(){
+Route::get('/agency_performance', function () {
     $agencys = [
         [
             "id" => 1,
@@ -302,3 +302,136 @@ Route::get('/agency_performance', function(){
 
     return view('agency_performance', compact('agencys'));
 });
+
+/* For demo purpose only - please delete this when building the actual app */
+// To demo comited and potential project
+Route::prefix('api')->group(function () {
+    Route::get('project/{type}', function ($type) {
+
+        $comittedFDIProject = [
+            [
+                "id" => 1,
+                "company_name" => "Fire Phoenix International",
+                "type" => "Data Center",
+                "status" => 1,
+                "note" => "Dalam Proses Submit",
+                "moa_date" => "22-02-2025",
+                "area" => "Gambang",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 4757
+            ],
+            [
+                "id" => 2,
+                "company_name" => "Lestari Angkasa Sdn Bhd",
+                "type" => "International Space Port",
+                "status" => 0,
+                "note" => "Loi Ditandatangani pada 14-03-2025",
+                "moa_date" => "22-02-2025",
+                "area" => "Pekan",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => null
+            ]
+        ];
+
+        $commitedDDIProject = [
+            [
+                "id" => 1,
+                "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
+                "type" => "Kilang Memproses Kicap (Pembesaran)",
+                "status" => 0,
+                "note" => "Dalam Proses Submit",
+                "moa_date" => "",
+                "area" => "Kawasan Perindustrian Bentong",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 2
+            ],
+            [
+                "id" => 2,
+                "company_name" => "Advanced Achieve Property Management Sdn. Bhd",
+                "type" => "International Space Port",
+                "status" => 1,
+                "note" => "Dalam Proses Pindahan",
+                "moa_date" => "",
+                "area" => "KP Gebeng 1",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 1.74
+            ],
+            [
+                "id" => 3,
+                "company_name" => "BH Setia Sdn Bhd (Jualan IKS)",
+                "type" => "Data Center",
+                "status" => 1,
+                "note" => "Proses Dalam Pindahan",
+                "moa_date" => "22-02-2025",
+                "area" => "KP Gebeng 2",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 2.046
+            ],
+            [
+                "id" => 4,
+                "company_name" => "Gading Senggara Property (Pajakan)",
+                "type" => "International Space Port",
+                "status" => 0,
+                "note" => "Dalam Proses Memuktamadkan Perjanjian",
+                "moa_date" => "",
+                "area" => "KP Gebeng 3",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 152
+            ]
+        ];
+
+        $potentialFDIProject = [
+            [
+                "id" => 1,
+                "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
+                "type" => "Kilang Memproses Kicap (Pembesaran)",
+                "status" => null,
+                "note" => "Dalam Proses Submit",
+                "moa_date" => "",
+                "area" => "Kawasan Perindustrian Bentong",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 2
+            ]
+        ];
+
+        $potentialDDIProject = [
+            [
+                "id" => 1,
+                "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
+                "type" => "Kilang Memproses Kicap (Pembesaran)",
+                "status" => 0,
+                "note" => "Dalam Proses Submit",
+                "moa_date" => "",
+                "area" => "Kawasan Perindustrian Bentong",
+                "invesment_approx" => 100000000,
+                "labour_approx" => 50,
+                "land_area" => 2
+            ]
+        ];
+
+        if ($type == "commited") {
+            return array(
+                "FDIProject" => $comittedFDIProject,
+                "DDIProject" => $commitedDDIProject,
+            );
+        }
+
+        if ($type == "potential") {
+            return array(
+                "FDIProject" => $potentialFDIProject,
+                "DDIProject" => $potentialDDIProject,
+            );
+        }
+
+        return array(
+            []
+        );
+    });
+});