-จัดการ flow ของ program ใหม่

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

@@ -0,0 +1,197 @@
+<div class="p-6">
+
+  <!-- Header -->
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-xl font-semibold">
+      รายการงบประมาณของโครงการ: {{ project?.name }}
+    </h2>
+
+    <div class="text-gray-600 text-sm">
+      แสดงข้อมูล {{ budgetItems.length }} รายการ
+    </div>
+  </div>
+
+
+  <!-- Add New Budget Item -->
+  <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"
+        >
+          <option value="">-- เลือกหมวดงบ --</option>
+
+          @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
+            <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
+          }
+        </select>
+
+        <!-- error -->
+        <div
+          *ngIf="addItemForm.controls['category'].invalid && addItemForm.controls['category'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          กรุณาเลือกหมวดงบ
+        </div>
+      </div>
+
+      <!-- รายการ -->
+      <div>
+        <!-- <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
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+        >
+          <option value="">-- เลือกรายการ --</option>
+
+          <option *ngFor="let it of masterItems" [value]="it.name">
+            {{ it.name }}
+          </option>
+        </select> -->
+
+        <div
+          *ngIf="addItemForm.controls['name'].invalid && addItemForm.controls['name'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          กรุณาเลือกรายการ
+        </div>
+      </div>
+
+      <!-- จำนวน -->
+      <div>
+        <label class="text-sm text-gray-600">จำนวน</label>
+        <input
+          type="number"
+          formControlName="qty"
+          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"
+        />
+
+        <div
+          *ngIf="addItemForm.controls['qty'].invalid && addItemForm.controls['qty'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          จำนวนต้องมากกว่า 0
+        </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"
+        />
+
+        <div
+          *ngIf="addItemForm.controls['price'].invalid && addItemForm.controls['price'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          ราคาต้องมากกว่า 0
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Add button -->
+    <button
+      type="button"
+      (click)="addBudgetItem()"
+      class="mt-4 bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow"
+    >
+      ➕ เพิ่มเข้าตาราง
+    </button>
+
+  </form>
+
+
+
+  <!-- Table -->
+  <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">
+        <tr class="text-gray-700">
+          <th class="py-3 px-4">ลำดับ</th>
+          <th class="py-3 px-4">สถานะ</th>
+          <th class="py-3 px-4">รหัส</th>
+          <th class="py-3 px-4">ชื่อรายการ</th>
+          <th class="py-3 px-4 text-center">จำนวน</th>
+          <th class="py-3 px-4 text-right">ราคา/หน่วย</th>
+          <th class="py-3 px-4 text-right">ยอดชำระ</th>
+          <th class="py-3 px-4 text-center">ดำเนินการ</th>
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr
+          *ngFor="let item of budgetItems; let i = index"
+          class="border-b hover:bg-gray-50 transition"
+        >
+          <td class="py-3 px-4">{{ i + 1 }}</td>
+
+          <td class="py-3 px-4 text-center">
+            <span class="text-green-500 text-xl">●</span>
+          </td>
+
+          <td class="py-3 px-4 font-medium">{{ item.code }}</td>
+
+          <td class="py-3 px-4 font-semibold">{{ item.name }}</td>
+
+          <td class="py-3 px-4 text-center">
+            <input
+              type="number"
+              class="w-20 px-3 py-2 border rounded-lg text-center"
+            />
+          </td>
+
+          <td class="py-3 px-4 text-right">
+            {{ item.price | number:'1.0-2' }}
+          </td>
+
+          <td class="py-3 px-4 text-right font-semibold">
+            {{ item.qty * item.price | number:'1.0-2' }}
+          </td>
+
+          <td class="py-3 px-4 text-center space-x-2">
+            <button
+              class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
+            >
+              🗑
+            </button>
+
+            <button
+              class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
+            >
+              👁
+            </button>
+          </td>
+        </tr>
+
+      </tbody>
+
+    </table>
+  </div>
+
+
+  <!-- Summary -->
+  <div class="text-right mt-4 text-lg font-semibold">
+    ยอดรวมทั้งหมด:
+    <span class="text-blue-600">
+      {{ getTotalAmount() | number:'1.0-2' }} บาท
+    </span>
+  </div>
+
+</div>