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

<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>