-login guard

-caching
-budget

ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.html

@@ -1,9 +1,10 @@
-<div class="p-6">
+<div class="p-6 space-y-10">
 
   <!-- Header -->
-  <div class="flex justify-between items-center mb-4">
+  <div class="flex justify-between items-center mb-4 ">
     <h2 class="text-xl font-semibold">
-      รายการงบประมาณของโครงการ: {{ project?.name }}
+      รายการงบประมาณของโครงการ: ระบบจัดการน้ำดื่ม
+      <!-- {{ project?.name }} -->
     </h2>
 
     <div class="text-gray-600 text-sm">
@@ -13,20 +14,19 @@
 
 
   <!-- Add New Budget Item -->
-  <form [formGroup]="addItemForm" class="bg-gray-50 border rounded-xl p-4 mb-6">
+  <!-- <form [formGroup]="addItemForm" class="bg-gray-50 border rounded-xl p-4 mb-6">
 
     <h3 class="font-semibold mb-3 text-gray-700">เพิ่มรายการงบประมาณ</h3>
 
     <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 
-      <!-- หมวดงบ -->
+      หมวดงบ
       <div>
         <label class="text-sm text-gray-600">หมวดงบประมาณ</label>
         <select
           formControlName="category"
           class="w-full px-4 py-2 border rounded-xl bg-white mt-1
-                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
-        >
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300" >
           <option value="">-- เลือกหมวดงบ --</option>
 
           @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
@@ -34,7 +34,7 @@
           }
         </select>
 
-        <!-- error -->
+        error
         <div
           *ngIf="addItemForm.controls['category'].invalid && addItemForm.controls['category'].touched"
           class="text-red-500 text-xs mt-1"
@@ -43,9 +43,9 @@
         </div>
       </div>
 
-      <!-- รายการ -->
+      รายการ
       <div>
-        <!-- <label class="text-sm text-gray-600">ชื่อรายการ</label>
+        <label class="text-sm text-gray-600">ชื่อรายการ</label>
         <select
           formControlName="name"
           class="w-full px-4 py-2 border rounded-xl bg-white mt-1
@@ -56,7 +56,7 @@
           <option *ngFor="let it of masterItems" [value]="it.name">
             {{ it.name }}
           </option>
-        </select> -->
+        </select>
 
         <div
           *ngIf="addItemForm.controls['name'].invalid && addItemForm.controls['name'].touched"
@@ -66,7 +66,7 @@
         </div>
       </div>
 
-      <!-- จำนวน -->
+      จำนวน
       <div>
         <label class="text-sm text-gray-600">จำนวน</label>
         <input
@@ -84,15 +84,14 @@
         </div>
       </div>
 
-      <!-- ราคา -->
+      ราคา
       <div>
         <label class="text-sm text-gray-600">ราคา</label>
         <input
           type="number"
           formControlName="price"
           class="w-full px-4 py-2 border rounded-xl bg-white mt-1
-                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
-        />
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"/>
 
         <div
           *ngIf="addItemForm.controls['price'].invalid && addItemForm.controls['price'].touched"
@@ -104,7 +103,7 @@
 
     </div>
 
-    <!-- Add button -->
+    Add button
     <button
       type="button"
       (click)="addBudgetItem()"
@@ -113,12 +112,83 @@
       ➕ เพิ่มเข้าตาราง
     </button>
 
-  </form>
+  </form> -->
+
+  <div class="bg-white rounded-lg shadow-md border border-gray-200 ">
+    <div class="flex justify-between items-center p-4 border-b bg-gray-50 rounded-t-lg" (click)="toggleFormCollapse()">
+        <h3 class="text-base font-semibold text-gray-700">เพิ่มรายการงบประมาณสำหรับโครงการ</h3>
+        <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+            [ngClass]="{'rotate-180': !isFormExpanded}">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+
+        </button>
+    </div>
+  @if(!isFormExpanded){
+      <div class="p-4 space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                  <label for="borrower_id" class="block text-sm font-medium text-gray-700 mb-1">หมวดงบประมาณ</label>
+                  <select name="" id="" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm">
+                    <option value="">-- เลือกหมวดงบ --</option>
+                    @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
+                      <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
+                    }
+                  </select>
+              </div>
+
+              <div>
+                  <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน</label>
+                  <input type="text" id="first_name" name="first_name" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm" placeholder="">
+              </div>
+  <!--
+              <div>
+                  <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">นามสกุล</label>
+                  <input type="text" id="last_name" name="last_name" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm" placeholder="">
+              </div> -->
+          </div>
+
+          <div class="flex justify-end pt-4 space-x-2">
+
+              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-500 rounded-md shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                  </svg>
+                  รีเซ็ต
+              </button> -->
+
+              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                  ค้นหา
+              </button> -->
+
+              <!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
+                  </svg>
+                  ส่งออก Excel
+              </button> -->
+              <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
+                  </svg>
+                  เพิ่มเข้าสู่ตาราง
+              </button>
+          </div>
+      </div>
+    }
+</div>
+
 
 
 
   <!-- Table -->
-  <div class="overflow-x-auto bg-white shadow rounded-xl border">
+  <!-- <div class="overflow-x-auto bg-white shadow rounded-xl border">
     <table class="min-w-full border-collapse text-sm">
 
       <thead class="bg-gray-100 border-b">
@@ -183,7 +253,83 @@
       </tbody>
 
     </table>
-  </div>
+  </div> -->
+    <div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
+    <table class="min-w-full text-left border-collapse">
+      <thead class="bg-gray-100 border-b border-gray-200 text-gray-700 text-sm">
+        <tr>
+          <th class="py-3 px-4 font-semibold">ลำดับ</th>
+          <th class="py-3 px-4 font-semibold">รหัสโครงการ</th>
+          <th class="py-3 px-4 font-semibold">ชื่อโครงการ</th>
+          <th class="py-3 px-4 font-semibold">ผู้รับผิดชอบ</th>
+          <th class="py-3 px-4 font-semibold">งบที่ขออนุมัติ</th>
+          <th class="py-3 px-4 font-semibold">หมวดงบ</th>
+          <th class="py-3 px-4 font-semibold">จำนวนที่อนุมัติ</th>
+          <th class="py-3 px-4 font-semibold text-center">สถานะ</th>
+          <th class="py-3 px-4 font-semibold text-center">ดำเนินการ</th>
+        </tr>
+      </thead>
+
+    <tbody>
+      <tr *ngFor="let p of projects; let i = index"
+      class="border-b border-gray-100 hover:bg-blue-50/20 transition">
+        <td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
+        <td class="py-4 px-4 font-medium text-gray-700"> {{ p.code }}</td>
+        <td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ p.name }}</td>
+        <td class="py-4 px-4 text-gray-700">{{ p.owner }}</td>
+        <td class="py-4 px-4 text-blue-700 font-bold whitespace-nowrap"> {{ p.budget | number:'1.0-0' }} บาท</td>
+
+        <td class="py-4 px-4 w-64">
+          <!-- <select class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white
+            focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300
+            text-sm transition">
+          <option value="">ไม่เลือก</option>
+            @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
+              <option [value]="item.dtlcod">
+                {{ item.dtlnam }}
+              </option>
+            }
+          </select> -->
+          {{ p.bdgnam }}
+        </td>
+
+        <td class="py-4 px-4 w-40">
+          <!-- <input type="number" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300 text-sm transition"/> -->
+           {{ p.acp }} บาท
+        </td>
+
+        <td class="py-4 px-4 text-center">
+          <span
+            class="px-3 py-1.5 rounded-full text-xs font-semibold inline-flex items-center gap-1
+                  shadow-sm border"
+            [ngClass]="{
+              'bg-yellow-50 text-yellow-700 border-yellow-200': p.status === 'WAIT',
+              'bg-green-50 text-green-700 border-green-200': p.status === 'APPROVED',
+              'bg-red-50 text-red-700 border-red-200': p.status === 'REJECTED'
+            }"
+          >
+            <ng-container *ngIf="p.status === 'APPROVED'">อนุมัติแล้ว</ng-container>
+            <ng-container *ngIf="p.status === 'WAIT'">รออนุมัติ</ng-container>
+            <ng-container *ngIf="p.status === 'REJECTED'">ไม่อนุมัติ</ng-container>
+          </span>
+        </td>
+
+        <td class="py-4 px-4 text-center space-x-2 whitespace-nowrap">
+
+          <button
+            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm
+                  shadow-sm font-medium transition"
+            >
+            จัดสรรงบประมาณ
+          </button>
+
+
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <!-- endtable -->
+</div>
 
 
   <!-- Summary -->