micro-frontend/ng-ttc-frontend/src/app/component/main-manager/main-manager.component.html

<div class="w-full p-6">

  <!-- Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">

    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
      <div class="text-gray-500 text-sm">งบทั้งหมด</div>
      <div class="text-3xl font-bold text-gray-800 mt-1">
        {{ totalBudget | number:'1.0-2' }} บาท
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
      <div class="text-gray-500 text-sm">งบที่อนุมัติแล้ว</div>
      <div class="text-3xl font-bold text-green-600 mt-1">
        {{ approvedBudget | number:'1.0-2' }} บาท
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
      <div class="text-gray-500 text-sm">งบคงเหลือ</div>
      <div
        class="text-3xl font-bold mt-1"
        [ngClass]="remainingBudget >= 0 ? 'text-blue-600' : 'text-red-600'"
      >
        {{ remainingBudget | number:'1.0-2' }} บาท
      </div>
    </div>

  </div>

  <!-- Add Button -->
  <div class="mb-4">
    <button
      class="  rounded-3xl bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm flex items-center gap-2 transition"
    >
      ➕ เพิ่มโครงการใหม่
    </button>
  </div>

  <!-- Table -->
  <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>
    </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"
      />
    </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"
        (click)="openBudgetDetail(p)"
      >
       จัดการงบประมาณ
      </button>


    </td>
  </tr>
</tbody>


    </table>

  </div>

  <!-- Pagination
  <div class="flex justify-end items-center gap-3 mt-5">
    <button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
      1
    </button>
    <button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
      2
    </button>
  </div> -->

</div>