Static Page

resources/views/agency.blade.php

@@ -0,0 +1,115 @@
+@extends('layouts.main')
+
+
+@php
+    $hasNotification = true;
+@endphp
+
+@section('content')
+    <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">
+
+        <div class="flex justify-between items-center">
+            <p class="flex items-center text-xs">
+                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
+                <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Senarai Agensi</span>
+            </p>
+            <div class="relative cursor-pointer">
+                @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>
+        </div>
+
+        <div class="flex" style="gap:10px">
+            <div class="relative w-fit">
+                <input type="text" placeholder="Carian"
+                    class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <div class="pointer-events-none absolute text-gray-500 text-xs" style="top: 50%; transform: translateY(-50%); right:10px">
+                    <i class="fas fa-search"></i>
+                </div>
+            </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="all" selected>Agensi</option>
+                    <option value="pknp">PKNP</option>
+                    <option value="pkpp">PKPP</option>
+                </select>
+            </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="all" selected>Status Prestasi</option>
+                    <option value="1">Lemah</option>
+                    <option value="2">Sederhana</option>
+                    <option value="3">Baik</option>
+                </select>
+            </div>
+
+        </div>
+
+        <div class="border rounded">
+            <h5 class="font-semibold m-5">Senarai Agensi</h5>
+            <div class="overflow-x-auto overflow-hidden rounded-[10px]">
+                <table class="w-full text-sm text-left text-gray-700 border-collapse">
+                    <thead>
+                        <tr>
+                            <th class="text-xs px-4 py-2">Bil</th>
+                            <th class="text-xs px-4 py-2">S-GLC to Agensi</th>
+                            <th class="text-xs px-4 py-2 text-center">Jumlah Peojek Aktif</th>
+                            <th class="text-xs px-4 py-2 text-center">Status Prestasi</th>
+                            <th class="text-xs px-4 py-2 text-center">Tindakan</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach ($agencys as $index => $agency)
+                            <tr>
+                                <td class="px-4 py-2">{{ $index + 1 }}</td>
+                                <td class="px-4 py-2">{{ $agency['name'] }}</td>
+                                <td class="px-4 py-2 text-center">{{ $agency['active_count'] }}
+                                </td>
+                                <td class="px-4 py-2 text-center">
+                                    @switch($agency['status'])
+                                        @case(1)
+                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
+                                                style="color:#CE4C4A; background-color:#FFF5F4; border-color:#ef4444;width:100%">
+                                                Lemah
+                                            </div>
+                                        @break
+
+                                        @case(2)
+                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
+                                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
+                                                Sederhana
+                                            </div>
+                                        @break
+
+                                        @case(3)
+                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
+                                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452; width:100%">
+                                                Baik
+                                            </div>
+                                        @break
+
+                                        @default
+                                    @endswitch
+                                </td>
+                                <td class="px-4 py-2 text-center">
+                                    <a href="#" class="text-blue-800 underline">Lihat Projek</a>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div>
+@endsection
+
+@section('scripts')
+@endsection

resources/views/agency_performance.blade.php

@@ -0,0 +1,107 @@
+@extends('layouts.main')
+
+
+@php
+    $hasNotification = true;
+@endphp
+
+@section('content')
+    <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">
+
+        <div class="flex justify-between items-center">
+            <p class="flex items-center text-xs">
+                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
+                <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Senarai Agensi</span>
+            </p>
+            <div class="relative cursor-pointer">
+                @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>
+        </div>
+
+        <div class="flex" style="gap:10px">
+            <div class="relative w-fit">
+                <input type="text" placeholder="Carian"
+                    class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <div class="pointer-events-none absolute text-gray-500 text-xs"
+                    style="top: 50%; transform: translateY(-50%); right:10px">
+                    <i class="fas fa-search"></i>
+                </div>
+            </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="all" selected>Agensi</option>
+                    <option value="pknp">PKNP</option>
+                    <option value="pkpp">PKPP</option>
+                </select>
+            </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="all" selected>Status Prestasi</option>
+                    <option value="1">Lemah</option>
+                    <option value="2">Sederhana</option>
+                    <option value="3">Baik</option>
+                </select>
+            </div>
+
+        </div>
+
+        <div class="border rounded">
+            <h5 class="font-semibold m-5">Senarai Agensi</h5>
+            <div class="overflow-x-auto overflow-hidden rounded-[10px]">
+                <table class="w-full text-sm text-left text-gray-700 border-collapse">
+                    <thead>
+                        <tr>
+                            <th class="text-xs px-4 py-2">Bil</th>
+                            <th class="text-xs px-4 py-2">S-GLC to Agensi</th>
+                            <th class="text-xs px-4 py-2 text-center">Nama Syarikat</th>
+                            <th class="text-xs px-4 py-2 text-center">Siap / Lambat (%)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach ($agencys as $index => $agency)
+                            <tr>
+                                <td class="px-4 py-2">{{ $index + 1 }}</td>
+                                <td class="px-4 py-2">{{ $agency['name'] }}</td>
+                                <td class="px-4 py-2 text-center">{{ $agency['company_name'] }}
+                                </td>
+                                <td class="px-4 py-2 text-center">
+                                    <div class="flex items-center gap-2">
+                                        <span class="font-bold text-xs">{{ $agency['percent'] }}</span>
+
+                                        @php
+                                            $percent = $agency['percent'];
+                                            $barColor = match (true) {
+                                                $percent < 30 => 'bg-[#CE4C4A]', // Red
+                                                $percent < 66 => 'bg-[#E5A20A]', // Yellow
+                                                default => 'bg-[#49B452]', // Green
+                                            };
+                                        @endphp
+
+                                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+                                            <div class="{{ $barColor }} h-full rounded-full transition-all duration-500"
+                                                style="width: {{ $percent }}%">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div>
+@endsection
+
+@section('scripts')
+@endsection

resources/views/components/table.blade.php

@@ -1,3 +1,42 @@
-<div>
-    <!-- It is quality rather than quantity that matters. - Lucius Annaeus Seneca -->
-</div>
+@props([
+    'data' => [
+        [
+            'col1' => 1,
+            'col2' => 2,
+            'col3' => 3,
+        ],
+    ],
+    'showIndex' => false,
+])
+
+@php
+    // we derived the table heading based on each object key
+    $columns = count($data) > 0 ? array_keys($data[0]) : [];
+@endphp
+
+<table class="w-full text-sm text-left text-gray-700 border-collapse">
+    <thead class="bg-gray-100">
+        <tr>
+            @if ($showIndex)
+                <th class="px-4 py-2 border">Bil</th>
+            @endif
+
+            @foreach ($columns as $column)
+                <th class="px-4 py-2 border">{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
+            @endforeach
+        </tr>
+    </thead>
+    <tbody>
+        @foreach ($data as $index => $row)
+            <tr>
+                @if ($showIndex)
+                    <td class="px-4 py-2 border">{{ $index + 1 }}</td>
+                @endif
+
+                @foreach ($columns as $column)
+                    <td class="px-4 py-2 border">{{ $row[$column] }}</td>
+                @endforeach
+            </tr>
+        @endforeach
+    </tbody>
+</table>

resources/views/home.blade.php

@@ -1,53 +1,110 @@
 @extends('layouts.main')
 
+@php
+
+    $totalTargetAmount = 0;
+    $totalTargetAmountYB = 0;
+
+    $chartLabel = [];
+    $chartPercent = [];
+
+    $hasNotification = true;
+
+    foreach ($status as $data) {
+        $chartLabel[] = $data['name'];
+        $chartPercent[] = $data['percent'];
+    }
+
+    foreach ($rekodKPIPelaburan as $index => $data) {
+        $totalTargetAmount += $data['investment_target'];
+        $totalTargetAmountYB += $data['investment_target_setting'];
+    }
+
+@endphp
+
+
 @section('content')
     <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">
 
-        <!-- Pie Chart Card -->
-        <div class="rounded-md border border-[rgba(0,0,0,0.2)] p-4">
-            <h5 class="text-lg font-semibold mb-4">Senarai Agensi Mengikut Status</h5>
+        <div class="flex justify-between items-center">
+            <p class="flex items-center text-xs">
+                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
+                <span>Dashboard</span>
+            </p>
+            <div class="relative cursor-pointer">
+                @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>
+
+        </div>
+
+
+        <div class="border rounded p-5">
+            <h6 class="font-semibold mb-4">Senarai Agensi Mengikut Status</h6>
             <div class="mx-auto text-center" style="width:25%">
                 <canvas id="agencyPieChart"></canvas>
-                <h5 class="font-bold my-5">Status</h5>
+                <h5 class="font-bold my-2">Status</h5>
             </div>
         </div>
 
-        <!-- Table Card -->
-        <div class="rounded-md border border-[rgba(0,0,0,0.2)] p-4">
-            <h5 class="text-lg font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
-            <div class="overflow-x-auto">
+        <div class="border rounded">
+            <h5 class="font-semibold m-5">Rekod Penetapan KPI Pelaburan</h5>
+            <div class="overflow-x-auto overflow-hidden rounded-[10px]">
                 <table class="w-full text-sm text-left text-gray-700 border-collapse">
-                    <thead class="bg-gray-100">
+                    <thead>
                         <tr>
-                            <th class="px-4 py-2 border">Bil. </th>
-                            <th class="px-4 py-2 border">S-GLC</th>
-                            <th class="px-4 py-2 border">Sasaran Pelaburan 2025 (RM)</th>
-                            <th class="px-4 py-2 border">Penetapan Sasaran Pelaburan (RM) oleh YB Dato’ Pengerusi</th>
+                            <th class="text-xs px-4 py-2">Bil</th>
+                            <th class="text-xs px-4 py-2">S-GLC</th>
+                            <th class="text-xs px-4 py-2 text-right">Sasaran Pelaburan 2025 (RM)</th>
+                            <th class="text-xs px-4 py-2 text-right">Penetapan Sasaran Pelaburan (RM) oleh YB Dato’
+                                Pengerusi
+                            </th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr>
-                            <td class="px-4 py-2 border">1</td>
-                            <td class="px-4 py-2 border">Agensi A</td>
-                            <td class="px-4 py-2 border text-green-600 font-medium">Aktif</td>
-                            <td class="px-4 py-2 border">75%</td>
-                        </tr>
-                        <tr>
-                            <td class="px-4 py-2 border">2</td>
-                            <td class="px-4 py-2 border">Agensi B</td>
-                            <td class="px-4 py-2 border text-yellow-600 font-medium">Dalam Proses</td>
-                            <td class="px-4 py-2 border">50%</td>
-                        </tr>
-                        <tr>
-                            <td class="px-4 py-2 border">3</td>
-                            <td class="px-4 py-2 border">Agensi C</td>
-                            <td class="px-4 py-2 border text-red-600 font-medium">Tidak Aktif</td>
-                            <td class="px-4 py-2 border">30%</td>
+                        @foreach ($rekodKPIPelaburan as $index => $data)
+                            <tr>
+                                <td class="px-4 py-2 border">{{ $index + 1 }}</td>
+                                <td class="px-4 py-2 border ">
+                                    <a href="#" class="text-blue-800 underline">{{ $data['name'] }}</a>
+                                </td>
+                                <td class="px-4 py-2 border text-right">{{ number_format($data['investment_target'], 2) }}
+                                </td>
+                                <td class="px-4 py-2 border text-right">
+                                    {{ number_format($data['investment_target_setting'], 2) }}</td>
+                            </tr>
+                        @endforeach
+                        <tr class="bg-[#012961]">
+                            <td class="px-4 py-2 text-white" colspan="2">Jumlah</td>
+                            <td class="px-4 py-2 text-white text-right">{{ number_format($totalTargetAmount, 2) }}</td>
+                            <td class="px-4 py-2 text-white text-right">{{ number_format($totalTargetAmountYB, 2) }}</td>
                         </tr>
+
                     </tbody>
                 </table>
             </div>
         </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-download text-white text-xs"></i>
+            <span>Simpan</span>
+        </button>
+
+        <div class="border rounded p-5">
+
+            <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>
+
+
     </div>
 @endsection
 
@@ -56,21 +113,40 @@
     <script>
         const ctx = document.getElementById('agencyPieChart').getContext('2d');
 
+        const chartLabels = @json($chartLabel);
+        const chartData = @json($chartPercent);
+
         new Chart(ctx, {
             type: 'pie',
             data: {
-                labels: ['Aktif', 'Dalam Proses', 'Tidak Aktif'],
+                labels: chartLabels,
                 datasets: [{
-                    label: 'Status Agensi',
-                    data: [12, 8, 5],
-                    backgroundColor: ['#10B981', '#FBBF24', '#EF4444'],
+                    label: 'Status',
+                    data: chartData,
+                    backgroundColor: [
+                        '#F9DFF2 ',
+                        '#F9DFC0 ',
+                        '#E0C7FB',
+                        '#CDF6DE',
+                        '#FAEAB7',
+                        '#E0EEFE'
+                    ],
                     borderWidth: 1
                 }]
             },
             options: {
                 responsive: true,
                 plugins: {
-                    legend: false
+                    legend: false,
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                let label = context.label || '';
+                                let value = context.parsed;
+                                return `(${value}%)`;
+                            }
+                        }
+                    }
                 }
             }
         });

resources/views/layouts/main.blade.php

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,65 +9,91 @@
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
+    <!-- Font Awesome CDN -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
 </head>
+
 <body class="antialiased bg-gray-100 text-gray-800">
 
-<div x-data="{ sidebarOpen: true }" class="min-h-screen flex">
-
-    <!-- Sidebar -->
-    <div :class="sidebarOpen ? 'w-64' : 'w-16'" class="bg-white border-r border-gray-200 transition-all duration-300 flex flex-col">
-        <div class="p-4 flex justify-between items-center">
-            <span x-show="sidebarOpen" class="font-bold text-lg">Dashboard</span>
-            <button @click="sidebarOpen = !sidebarOpen" class="text-gray-600 focus:outline-none">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path :class="sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    <path :class="!sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                </svg>
-            </button>
-        </div>
+    <div x-data="{ sidebarOpen: true }" class="min-h-screen flex p-6" style="gap:25px">
 
-        <nav class="flex-1 px-2 space-y-2" x-show="sidebarOpen">
-
-            <!-- Dashboard -->
-            <a href="#" class="block px-4 py-2 rounded hover:bg-gray-200">
-                Dashboard
-            </a>
-
-            <!-- Projects (with children) -->
-            <div x-data="{ open: false }" class="space-y-1">
-                <button
-                    @click="open = !open"
-                    class="w-full flex justify-between items-center px-4 py-2 rounded hover:bg-gray-200 text-left"
-                >
-                    <span>Projects</span>
-                    <svg :class="{'rotate-90': open}" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        <!-- Sidebar -->
+        <div :class="sidebarOpen ? 'w-56' : 'w-16'"
+            class="bg-white border-r border-gray-200 transition-all duration-300 flex flex-col rounded">
+            <div class="p-4 flex justify-between items-center">
+                <span x-show="sidebarOpen" class="font-bold border-b-2 p-5">
+                    <img src="./assets/image/logoinvestpahang.png" />
+                </span>
+                {{-- <button @click="sidebarOpen = !sidebarOpen" class="text-gray-600 focus:outline-none">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path :class="sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        <path :class="!sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
-                </button>
-                <div x-show="open" x-transition class="pl-6">
-                    <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">All Projects</a>
-                    <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">Create Project</a>
-                </div>
+                </button> --}}
             </div>
 
-            <!-- Settings -->
-            <a href="#" class="block px-4 py-2 rounded hover:bg-gray-200">
-                Settings
-            </a>
+            <nav class="flex-1 px-2 space-y-2" x-show="sidebarOpen">
 
-        </nav>
-    </div>
+                <!-- Dashboard -->
+                <a href="/" class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200">
+                    <i class="fa-solid fa-table-columns w-4 text-xs text-[#BD8736]"></i>
+                    <span>Dashboard</span>
+                </a>
 
-    <!-- Content -->
-    <div class="flex-1 p-6">
-        @yield('content')
-    </div>
-    @yield('scripts')
+                <a href="/agency" class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200">
+                    <i class="fa-solid fa-paste w-4 text-xs text-[#BD8736]"></i>
+                    <span>Senarai Agensi</span>
+                </a>
+
+                <a href="/project" class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200">
+                    <i class="fa-solid fa-folder-open w-4 text-xs text-[#BD8736]"></i>
+                    <span>Senarai Projek</span>
+                </a>
+
+                <a href="/agency_performance" class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200">
+                    <i class="fa-solid fa-coins w-4 text-xs text-[#BD8736]"></i>
+                    <span>Laporan Agensi</span>
+                </a>
 
-</div>
+                <!-- Projects (with children) -->
+                {{-- <div x-data="{ open: false }" class="space-y-1">
+                    <button @click="open = !open"
+                        class="w-full flex items-center justify-between px-4 py-2 rounded hover:bg-gray-200 text-left">
+                        <div class="flex items-center gap-2">
+                            <i class="fas fa-folder w-4 text-xs text-[#BD8736]"></i>
+                            <span>Projects</span>
+                        </div>
+                        <svg :class="{ 'rotate-90': open }" class="w-4 h-4 transition-transform" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-transition class="pl-10">
+                        <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">All Projects</a>
+                        <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">Create Project</a>
+                    </div>
+                </div> --}}
+
+            </nav>
+
+        </div>
+
+        <!-- Content -->
+        <div class="flex-1 overflow-y-scroll overflow-x-hidden" style="max-height: 93vh">
+            @yield('content')
+        </div>
+        @yield('scripts')
+
+    </div>
 
 </body>
+
 </html>

resources/views/project.blade.php

@@ -0,0 +1,236 @@
+@extends('layouts.main')
+
+
+@php
+    $hasNotification = true;
+    $FDI_amt = 100000000;
+@endphp
+
+@section('content')
+    <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">
+
+        <div class="flex justify-between items-center">
+            <p class="flex items-center text-xs">
+                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
+                <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Lihat Projek</span>
+            </p>
+            <div class="relative cursor-pointer">
+                @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>
+        </div>
+
+        <div class="flex" style="gap:10px">
+            <div class="relative w-fit">
+                <input type="text" placeholder="Carian"
+                    class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <div class="pointer-events-none absolute text-gray-500 text-xs"
+                    style="top: 50%; transform: translateY(-50%); right:10px">
+                    <i class="fas fa-search"></i>
+                </div>
+            </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>
+                    <option value="potential">Pontential</option>
+                </select>
+            </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="all" selected>Status</option>
+                    <option value="final">Perjanjian Muktamad</option>
+                    <option value="draft">Deraf Perjanjian</option>
+                </select>
+            </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="all" selected>Daerah</option>
+                    <option value="1">Gambang</option>
+                    <option value="2">Pekan</option>
+                </select>
+            </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="all" selected>Tahun</option>
+                    <option value="2026">2026</option>
+                    <option value="2025">2025</option>
+                </select>
+            </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">
+                <span><i class="fa-solid fa-file-excel text-white text-xs pe-3"></i> Eksport</span>
+            </button>
+
+        </div>
+
+        <div class="border rounded">
+            <h5 class="font-semibold m-5">Senarai Pelaburan Komited Perbadanan Kemajuan Negeri Pahang (PKNP) 2025</h5>
+            <div class="bg-[#012961] text-white p-5">
+                <h3 class="text-xs font-bold">FOREIGN DIRECT INVESTMENT (FDI)</h3>
+            </div>
+            <div class="overflow-x-scroll overflow-hidden rounded-[10px]">
+                <table class="min-w-[2000px] text-sm text-left text-gray-700 border-collapse">
+                    <thead>
+                        <tr>
+                            <th class="text-xs px-4 py-5">Bil</th>
+                            <th class="text-xs px-4 py-5">Nama Syarikat</th>
+                            <th class="text-xs px-4 py-5">Jenis Projek</th>
+                            <th class="text-xs px-4 py-5">Status</th>
+                            <th class="text-xs px-4 py-5">Catatan</th>
+                            <th class="text-xs px-4 py-5">Tarikh MOA Ditandatangani</th>
+                            <th class="text-xs px-4 py-5">Daerah</th>
+                            <th class="text-xs px-4 py-5">Anggaran Nilai Pelaburan (RM)</th>
+                            <th class="text-xs px-4 py-5">Anggaran Peluang Pekerjaan</th>
+                            <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach ($comittedFDIProject as $index => $project)
+                            <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">
+                                    @switch($project['status'])
+                                        @case(1)
+                                            <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>
+                                        @break
+
+                                        @case(0)
+                                            <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>
+                                        @break
+
+                                        <div></div>
+
+                                        @default
+                                    @endswitch
+                                </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_format($project['invesment_approx'], 2) }}</td>
+                                <td class="px-4 py-2 text-xs">{{ $project['labour_approx'] }}</td>
+                                @if ($project['land_area'])
+                                    <td class="px-4 py-2 text-xs">{{ number_format($project['land_area']) }}</td>
+                                @else
+                                    <td class="px-4 py-2 text-xs"><span class="text-md font-bold">TBC</span></td>
+                                @endif
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+            <div class="bg-[#F8F8F8] p-5">
+                <h3 class="text-xs font-bold">JUMLAH FDI: <span class="ms-4">{{ number_format($FDI_amt, 2) }}</span></h3>
+            </div>
+        </div>
+
+        <div class="border rounded overflow-hidden">
+            <div class="bg-[#012961] text-white p-5">
+                <h3 class="text-xs font-bold">Domestic Direct Investment (DDI)</h3>
+            </div>
+            <div class="overflow-x-scroll overflow-hidden rounded-[10px]">
+                <table class="min-w-[2000px] text-sm text-left text-gray-700 border-collapse">
+                    <thead>
+                        <tr>
+                            <th class="text-xs px-4 py-5">Bil</th>
+                            <th class="text-xs px-4 py-5">Nama Syarikat</th>
+                            <th class="text-xs px-4 py-5">Jenis Projek</th>
+                            <th class="text-xs px-4 py-5">Status</th>
+                            <th class="text-xs px-4 py-5">Catatan</th>
+                            <th class="text-xs px-4 py-5">Tarikh MOA Ditandatangani</th>
+                            <th class="text-xs px-4 py-5">Daerah</th>
+                            <th class="text-xs px-4 py-5">Anggaran Nilai Pelaburan (RM)</th>
+                            <th class="text-xs px-4 py-5">Anggaran Peluang Pekerjaan</th>
+                            <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach ($commitedDDIProject as $index => $project)
+                            <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">
+                                    @switch($project['status'])
+                                        @case(1)
+                                            <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>
+                                        @break
+
+                                        @case(0)
+                                            <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>
+                                        @break
+
+                                        <div></div>
+
+                                        @default
+                                    @endswitch
+                                </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_format($project['invesment_approx'], 2) }}</td>
+                                <td class="px-4 py-2 text-xs">{{ $project['labour_approx'] }}</td>
+                                @if ($project['land_area'])
+                                    <td class="px-4 py-2 text-xs">{{ number_format($project['land_area'], 2) }}</td>
+                                @else
+                                    <td class="px-4 py-2 text-xs"><span class="text-md font-bold">TBC</span></td>
+                                @endif
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+            <div class="bg-[#F8F8F8] p-5">
+                <h3 class="text-xs font-bold">JUMLAH DDI: <span class="ms-4">{{ number_format($FDI_amt, 2) }}</span>
+                </h3>
+            </div>
+        </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-download text-white text-xs"></i>
+            <span>Simpan</span>
+        </button>
+
+        <div class="border rounded p-5">
+
+            <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>
+
+    </div>
+@endsection
+
+@section('scripts')
+@endsection

routes/web.php

@@ -3,5 +3,302 @@
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
-    return view('home');
+
+    $rekodKPIPelaburan = [
+        [
+            'id' => 1,
+            'name' => 'Perbadanan Kemajuan Negeri Pahang (PKNP)',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 2,
+            'name' => 'Perbadanan Pertanian Negeri Pahang (PKPP)',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 3,
+            'name' => 'Perbadanan Setiausaha Kerajaan Pahang (PSK)',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 4,
+            'name' => 'Pahang Corporations Sdn. Bhd',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 5,
+            'name' => 'East Coast Development Region Council (ECERDC)',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 6,
+            'name' => 'Yayasan Pahang',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 7,
+            'name' => 'TGA Solutions',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ],
+        [
+            'id' => 8,
+            'name' => 'UNIPSAS',
+            'investment_target' => 2000897,
+            'investment_target_setting' => 2000897,
+        ]
+    ];
+
+    $status = [
+        [
+            'name' => 'Deraf Perjanjian',
+            'percent' => "38"
+        ],
+        [
+            'name' => 'Dalam Tindakan/Rundingan Kertas Kerja',
+            'percent' => "18"
+        ],
+        [
+            'name' => 'Penyediaan Kertas BOD',
+            'percent' => "9"
+        ],
+        [
+            'name' => 'Project Syarikat',
+            'percent' => "24"
+        ],
+        [
+            'name' => 'Penilaian JK Pelaburan',
+            'percent' => "21"
+        ],
+        [
+            'name' => 'Perjanjian Muktamad',
+            'percent' => "42"
+        ]
+    ];
+
+    return view('home', compact('rekodKPIPelaburan', 'status'));
+});
+
+Route::get('/agency', function () {
+
+    $agencys = [
+        [
+            "id" => 1,
+            "name" => "Perbadanan Kemajuan Negeri Pahang (PKNP)",
+            "active_count" => 23,
+            "status" => 2,
+        ],
+        [
+            "id" => 2,
+            "name" => "Perbadanan Pertanian Negeri Pahang (PKPP)",
+            "active_count" => 45,
+            "status" => 1,
+        ],
+        [
+            "id" => 3,
+            "name" => "Perbadanan Setiausaha Kerajaan Pahang (PSK)",
+            "active_count" => 21,
+            "status" => 3,
+        ],
+        [
+            "id" => 4,
+            "name" => "Pahang Corporations Sdn. Bhd",
+            "active_count" => 77,
+            "status" => 2,
+        ],
+        [
+            "id" => 5,
+            "name" => "Perbadanan Kemajuan Cameron Highlands (PKCH)",
+            "active_count" => 53,
+            "status" => 1,
+        ],
+        [
+            "id" => 6,
+            "name" => "Pahang Mining Corporations Sdn. Bhd",
+            "active_count" => 56,
+            "status" => 3,
+        ],
+        [
+            "id" => 7,
+            "name" => "East Coast Development Region Council (ECERDC)",
+            "active_count" => 32,
+            "status" => 2,
+        ],
+        [
+            "id" => 8,
+            "name" => "Yayasan Pahang",
+            "active_count" => 234,
+            "status" => 1,
+        ],
+        [
+            "id" => 9,
+            "name" => "TGA Solutions",
+            "active_count" => 90,
+            "status" => 3,
+        ],
+        [
+            "id" => 10,
+            "name" => "UNIPSAS",
+            "active_count" => 32,
+            "status" => 2,
+        ]
+    ];
+
+    return view('agency', compact('agencys'));
+});
+
+Route::get('/project', function () {
+
+    $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
+        ]
+    ];
+
+    return view('project', compact('comittedFDIProject', 'commitedDDIProject'));
+});
+
+Route::get('/agency_performance', function(){
+    $agencys = [
+        [
+            "id" => 1,
+            "name" => "Perbadanan Kemajuan Negeri Pahang (PKNP)",
+            "company_name" => "Fire Phoenix International",
+            "percent" => 45,
+        ],
+        [
+            "id" => 2,
+            "name" => "Perbadanan Pertanian Negeri Pahang (PKPP)",
+            "company_name" => "Lestari Angkasa Sdn. Bhd.",
+            "percent" => 66,
+        ],
+        [
+            "id" => 3,
+            "name" => "Perbadanan Setiausaha Kerajaan Pahang (PSK)",
+            "company_name" => "Fire Phoenix International",
+            "percent" => 15,
+        ],
+        [
+            "id" => 4,
+            "name" => "Pahang Corporations Sdn. Bhd",
+            "company_name" => "Lestari Angkasa Sdn. Bhd.",
+            "percent" => 45,
+        ],
+        [
+            "id" => 5,
+            "name" => "Perbadanan Kemajuan Cameron Highlands (PKCH)",
+            "company_name" => "Fire Phoenix International",
+            "percent" => 66,
+        ],
+        [
+            "id" => 6,
+            "name" => "Pahang Mining Corporations Sdn. Bhd",
+            "company_name" => "Lestari Angkasa Sdn. Bhd.",
+            "percent" => 15,
+        ],
+        [
+            "id" => 7,
+            "name" => "East Coast Development Region Council (ECERDC)",
+            "company_name" => "Fire Phoenix International",
+            "percent" => 45,
+        ],
+        [
+            "id" => 8,
+            "name" => "Yayasan Pahang",
+            "company_name" => "Lestari Angkasa Sdn. Bhd.",
+            "percent" => 66,
+        ],
+        [
+            "id" => 9,
+            "name" => "TGA Solutions",
+            "company_name" => "Fire Phoenix International",
+            "percent" => 15,
+        ],
+        [
+            "id" => 10,
+            "name" => "UNIPSAS",
+            "company_name" => "Lestari Angkasa Sdn. Bhd.",
+            "percent" => 45,
+        ]
+    ];
+
+    return view('agency_performance', compact('agencys'));
 });