mirfalah-tech
/
pasca
Watch 10
Star 0
Fork 0

2 Commits
7f40504941 ... 70876f1b8c

Author SHA1 Message Date
  azri 70876f1b8c Merge branch 'master' of git.mirfalah.my:mirfalah-tech/pasca 17 hours ago
  azri 875f947f82 responsive UI 17 hours ago
6 changed files with 112 additions and 72 deletions
Split View Show Diff Stats
  1. 1
    1
      resources/views/agency.blade.php
  2. 1
    1
      resources/views/agency_performance.blade.php
  3. 7
    9
      resources/views/home.blade.php
  4. 38
    35
      resources/views/layouts/main.blade.php
  5. 64
    25
      resources/views/project.blade.php
  6. 1
    1
      routes/web.php

+ 1
- 1
resources/views/agency.blade.php View File 

@@ -13,7 +13,7 @@
13 13 
                 <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
14 14 
                 <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Senarai Agensi</span>
15 15 
             </p>
16 
-            <div class="relative cursor-pointer">
16 
+            <div class="relative cursor-pointer hidden md:block">
17 17 
                 @if ($hasNotification)
18 18 
                     <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
19 19 
                 @endif

+ 1
- 1
resources/views/agency_performance.blade.php View File 

@@ -13,7 +13,7 @@
13 13 
                 <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
14 14 
                 <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Senarai Agensi</span>
15 15 
             </p>
16 
-            <div class="relative cursor-pointer">
16 
+            <div class="relative cursor-pointer hidden md:block">
17 17 
                 @if ($hasNotification)
18 18 
                     <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
19 19 
                 @endif

+ 7
- 9
resources/views/home.blade.php View File 

@@ -31,7 +31,7 @@
31 31 
                 <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
32 32 
                 <span>Dashboard</span>
33 33 
             </p>
34 
-            <div class="relative cursor-pointer">
34 
+            <div class="relative cursor-pointer hidden md:block">
35 35 
                 @if ($hasNotification)
36 36 
                     <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
37 37 
                 @endif
 
@@ -40,7 +40,6 @@
40 40
41 41 
         </div>
42 42
43 
-
44 43 
         <div class="border rounded p-5">
45 44 
             <h6 class="font-semibold mb-4">Senarai Agensi Mengikut Status</h6>
46 45 
             <div class="mx-auto text-center" style="width:25%">
 
@@ -87,12 +86,6 @@
87 86 
             </div>
88 87 
         </div>
89 88
90 
-        <button
91 
-            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">
92 
-            <i class="fa-solid fa-download text-white text-xs"></i>
93 
-            <span>Simpan</span>
94 
-        </button>
95 
-
96 89 
         <div class="border rounded p-5">
97 90
98 91 
             <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
 
@@ -100,9 +93,14 @@
100 93 
                     class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span></p>
101 94 
             <p class="text-xs font-bold">15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang diisi
102 95 
                 oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.</p>
103 
-
104 96 
         </div>
105 97
98 
+        <button
99 
+            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">
100 
+            <i class="fa-solid fa-edit text-white text-xs"></i>
101 
+            <span>Kemaskini</span>
102 
+        </button>
103 
+
106 104
107 105 
     </div>
108 106 
 @endsection

+ 38
- 35
resources/views/layouts/main.blade.php View File 

@@ -16,31 +16,26 @@
16 16
17 17 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
18 18 
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
19 
-
20 19 
 </head>
21 20
22 21 
 <body class="antialiased bg-gray-100 text-gray-800">
23 22
24 
-    <div x-data="{ sidebarOpen: true }" class="min-h-screen flex p-6" style="gap:25px">
23 
+    <div x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false" class="flex flex-col md:flex-row p-0 md:p-6 gap-3"
24 
+        style="max-height: 100vh;">
25 25
26 26 
         <!-- Sidebar -->
27 
-        <div :class="sidebarOpen ? 'w-56' : 'w-16'"
28 
-            class="bg-white border-r border-gray-200 transition-all duration-300 flex flex-col rounded">
27 
+        <div :class="{
28 
+            'translate-x-0': sidebarOpen,
29 
+            '-translate-x-full': !sidebarOpen
30 
+        }"
31 
+            class="fixed z-40 inset-y-0 left-0 w-56 bg-white border-rtransform transition-transform duration-300 md:relative md:translate-x-0 md:flex md:flex-col md:w-56 md:z-auto md:rounded">
29 32 
             <div class="p-4 flex justify-between items-center">
30 
-                <span x-show="sidebarOpen" class="font-bold border-b-2 p-5">
33 
+                <span class="font-bold border-b-2 p-5">
31 34 
                     <img src="./assets/image/logoinvestpahang.png" />
32 35 
                 </span>
33 
-                {{-- <button @click="sidebarOpen = !sidebarOpen" class="text-gray-600 focus:outline-none">
34 
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
35 
-                        <path :class="sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round"
36 
-                            stroke-width="2" d="M6 18L18 6M6 6l12 12" />
37 
-                        <path :class="!sidebarOpen ? 'block' : 'hidden'" stroke-linecap="round" stroke-linejoin="round"
38 
-                            stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
39 
-                    </svg>
40 
-                </button> --}}
41 36 
             </div>
42 37
43 
-            <nav class="flex-1 px-2 space-y-2" x-show="sidebarOpen">
38 
+            <nav class="flex-1 px-2 space-y-2">
44 39
45 40 
                 <!-- Dashboard -->
46 41 
                 <a href="/" class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200">
 
@@ -63,35 +58,43 @@
63 58 
                     <span>Laporan Agensi</span>
64 59 
                 </a>
65 60
66 
-                <!-- Projects (with children) -->
67 
-                {{-- <div x-data="{ open: false }" class="space-y-1">
68 
-                    <button @click="open = !open"
69 
-                        class="w-full flex items-center justify-between px-4 py-2 rounded hover:bg-gray-200 text-left">
70 
-                        <div class="flex items-center gap-2">
71 
-                            <i class="fas fa-folder w-4 text-xs text-[#BD8736]"></i>
72 
-                            <span>Projects</span>
73 
-                        </div>
74 
-                        <svg :class="{ 'rotate-90': open }" class="w-4 h-4 transition-transform" fill="none"
75 
-                            stroke="currentColor" viewBox="0 0 24 24">
76 
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
77 
-                        </svg>
78 
-                    </button>
79 
-                    <div x-show="open" x-transition class="pl-10">
80 
-                        <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">All Projects</a>
81 
-                        <a href="#" class="block px-2 py-1 rounded hover:bg-gray-100">Create Project</a>
82 
-                    </div>
83 
-                </div> --}}
84 
-
85 61 
             </nav>
62 
+        </div>
86 63
64 
+        <!-- Mobile Overlay -->
65 
+        <div x-show="sidebarOpen" @click="sidebarOpen = false" x-transition.opacity
66 
+            class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"></div>
67 
+
68 
+
69 
+        <!-- Top Bar -->
70 
+        <div class="flex items-center gap-4 p-1 px-5 bg-white md:hidden">
71 
+            <!-- Mobile Toggle Button -->
72 
+            <button @click="sidebarOpen = true" class="md:hidden bg-white p-2">
73 
+                <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" stroke-width="2"
74 
+                    viewBox="0 0 24 24">
75 
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
76 
+                </svg>
77 
+            </button>
78 
+
79 
+            <span class="font-bold mx-auto">
80 
+                <img src="./assets/image/logoinvestpahang.png" width="95" />
81 
+            </span>
82 
+
83 
+            <div class="relative cursor-pointer">
84 
+                @if ($hasNotification)
85 
+                    <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
86 
+                @endif
87 
+                <i class="fa-regular fa-bell text-md hover:text-[#BD8736]"></i>
88 
+            </div>
87 89 
         </div>
88 90
91 
+
89 92 
         <!-- Content -->
90 
-        <div class="flex-1 overflow-y-scroll overflow-x-hidden" style="max-height: 93vh">
93 
+        <div class="flex-1 overflow-y-scroll overflow-x-hidden" style="max-height: 97vh">
91 94 
             @yield('content')
92 95 
         </div>
93 
-        @yield('scripts')
94 96
97 
+        @yield('scripts')
95 98 
     </div>
96 99
97 100 
 </body>

+ 64
- 25
resources/views/project.blade.php View File 

@@ -14,7 +14,7 @@
14 14 
                 <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
15 15 
                 <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Lihat Projek</span>
16 16 
             </p>
17 
-            <div class="relative cursor-pointer">
17 
+            <div class="relative cursor-pointer hidden md:block">
18 18 
                 @if ($hasNotification)
19 19 
                     <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
20 20 
                 @endif
 
@@ -23,8 +23,8 @@
23 23 
             </div>
24 24 
         </div>
25 25
26 
-        <div class="flex" style="gap:10px">
27 
-            <div class="relative w-fit">
26 
+        <div class="flex flex-col lg:flex-row gap-2 w-full">
27 
+            <div class="relative w-full lg:w-fit">
28 28 
                 <input type="text" placeholder="Carian"
29 29 
                     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" />
30 30 
                 <div class="pointer-events-none absolute text-gray-500 text-xs"
 
@@ -33,7 +33,7 @@
33 33 
                 </div>
34 34 
             </div>
35 35
36 
-            <div class="relative w-fit">
36 
+            <div class="relative w-full lg:w-fit">
37 37 
                 <select id="selectProjectType"
38 38 
                     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"
39 39 
                     onchange="fetchAndRenderProjects()">
 
@@ -42,9 +42,8 @@
42 42 
                 </select>
43 43 
             </div>
44 44
45 
-            <div class="relative w-fit">
46 
-                <select
47 
-                    id="selectProjectStatus"
45 
+            <div class="relative w-full lg:w-fit">
46 
+                <select id="selectProjectStatus"
48 47 
                     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"
49 48 
                     onchange="renderFDITable()">
50 49 
                     <option value="all" selected>Status</option>
 
@@ -53,9 +52,8 @@
53 52 
                 </select>
54 53 
             </div>
55 54
56 
-            <div class="relative w-fit">
57 
-                <select
58 
-                    id="selectProjectArea"
55 
+            <div class="relative w-full lg:w-fit">
56 
+                <select id="selectProjectArea"
59 57 
                     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"
60 58 
                     onchange="renderFDITable()">
61 59 
                     <option value="all" selected>Daerah</option>
 
@@ -64,9 +62,8 @@
64 62 
                 </select>
65 63 
             </div>
66 64
67 
-            <div class="relative w-fit">
68 
-                <select
69 
-                    id="selectProjectYear"
65 
+            <div class="relative w-full lg:w-fit">
66 
+                <select id="selectProjectYear"
70 67 
                     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"
71 68 
                     onchange="renderFDITable()">
72 69 
                     <option value="all" selected>Tahun</option>
 
@@ -76,12 +73,12 @@
76 73 
             </div>
77 74
78 75 
             <button
79 
-                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">
76 
+                class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-full lg:w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
80 77 
                 <span><i class="fa-solid fa-file-excel text-white text-xs pe-3"></i> Eksport</span>
81 78 
             </button>
82 
-
83 79 
         </div>
84 80
81 
+
85 82 
         <div class="border rounded">
86 83 
             <h5 class="font-semibold m-5">Senarai Pelaburan Komited Perbadanan Kemajuan Negeri Pahang (PKNP) 2025</h5>
87 84 
             <div class="bg-[#012961] text-white p-5">
 
@@ -171,7 +168,7 @@
171 168 
                             <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
172 169 
                         </tr>
173 170 
                     </thead>
174 
-                    <tbody>
171 
+                    <tbody id="DDItableBody">
175 172 
                         @foreach ($commitedDDIProject as $index => $project)
176 173 
                             <tr>
177 174 
                                 <td class="px-4 py-2">{{ $index + 1 }}</td>
 
@@ -220,12 +217,6 @@
220 217 
             </div>
221 218 
         </div>
222 219
223 
-        <button
224 
-            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">
225 
-            <i class="fa-solid fa-download text-white text-xs"></i>
226 
-            <span>Simpan</span>
227 
-        </button>
228 
-
229 220 
         <div class="border rounded p-5">
230 221
231 222 
             <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
 
@@ -234,15 +225,19 @@
234 225 
             <p class="text-xs font-bold">15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang
235 226 
                 diisi
236 227 
                 oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.</p>
237 
-
238 228 
         </div>
239 229
230 
+        <button
231 
+            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">
232 
+            <i class="fa-solid fa-edit text-white text-xs"></i>
233 
+            <span>Kemaskini</span>
234 
+        </button>
235 
+
240 236 
     </div>
241 237 
 @endsection
242 238
243 239 
 @section('scripts')
244 240 
     <script>
245 
-
246 241 
         var FDIProject = [];
247 242 
         var DDIProject = [];
248 243 
 
@@ -258,7 +253,9 @@
258 253 
                 if (!data.FDIProject || !data.DDIProject) return
259 254
260 255 
                 FDIProject = data.FDIProject
256 
+                DDIProject = data.DDIProject
261 257 
                 renderFDITable()
258 
+                renderDDITable()
262 259
263 260 
             } catch (error) {
264 261 
                 console.error('Error fetching projects:', error);
 
@@ -307,7 +304,49 @@
307 304
308 305 
         }
309 306
310 
-        function filterData(data){
307 
+        function renderDDITable() {
308 
+
309 
+            const tbody = document.getElementById('DDItableBody');
310 
+            tbody.innerHTML = ''; // Clear existing content
311 
+
312 
+            data = filterData(DDIProject)
313 
+
314 
+            data.forEach((project, index) => {
315 
+                const statusHTML = (() => {
316 
+                    switch (project.status) {
317 
+                        case 1:
318 
+                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
319 
+                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
320 
+                                Perjanjian Muktamad</div>`;
321 
+                        case 0:
322 
+                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
323 
+                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452;width:100%">
324 
+                                Deraf Perjanjian</div>`;
325 
+                        default:
326 
+                            return `<div>-</div>`;
327 
+                    }
328 
+                })();
329 
+
330 
+                const row = `
331 
+                    <tr>
332 
+                        <td class="px-4 py-2">${index + 1}</td>
333 
+                        <td class="px-4 py-2">${project.company_name}</td>
334 
+                        <td class="px-4 py-2">${project.type}</td>
335 
+                        <td class="px-4 py-2 text-center">${statusHTML}</td>
336 
+                        <td class="px-4 py-2 text-xs">${project.note}</td>
337 
+                        <td class="px-4 py-2 text-xs">${project.moa_date}</td>
338 
+                        <td class="px-4 py-2 text-xs">${project.area}</td>
339 
+                        <td class="px-4 py-2 text-xs">${Number(project.invesment_approx).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
340 
+                        <td class="px-4 py-2 text-xs">${project.labour_approx}</td>
341 
+                        <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>
342 
+                    </tr>
343 
+                `;
344 
+                tbody.insertAdjacentHTML('beforeend', row);
345 
+            });
346 
+
347 
+        }
348 
+
349 
+        function filterData(data) {
311 350
312 351 
             const status = document.getElementById("selectProjectStatus").value
313 352 
             const area = document.getElementById("selectProjectArea").value

+ 1
- 1
routes/web.php View File 

@@ -408,7 +408,7 @@ Route::prefix('api')->group(function () {
408 408 
                 "id" => 1,
409 409 
                 "company_name" => "Kicap Bentong Sdn. Bhd (Jualan)",
410 410 
                 "type" => "Kilang Memproses Kicap (Pembesaran)",
411 
-                "status" => 0,
411 
+                "status" => null,
412 412 
                 "note" => "Dalam Proses Submit",
413 413 
                 "moa_date" => "",
414 414 
                 "area" => "Kawasan Perindustrian Bentong",

Write Preview
Loading…
Cancel
Save