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

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

  <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
    <div>
      <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
      </h1>
      <p class="text-gray-500 mt-1 text-sm pl-4">จัดการงบประมาณและตรวจสอบสถานะโครงการ</p>
    </div>
  </div>

  <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">

    <div class="overflow-x-auto">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-red-900 text-white text-sm uppercase tracking-wider leading-normal">
            <th class="py-4 px-6 font-medium w-16 text-center">ลำดับ</th>
            <th class="py-4 px-6 font-medium min-w-[200px]">ชื่อโครงการ / รหัส</th>
            <th class="py-4 px-6 font-medium">ผู้รับผิดชอบ</th>
            <th class="py-4 px-6 font-medium text-right">งบที่ขอ (บาท)</th>
            <th class="py-4 px-6 font-medium text-right">อนุมัติ (บาท)</th>
            <th class="py-4 px-6 font-medium text-center">สถานะ</th>
            <th class="py-4 px-6 font-medium text-center">จัดการ</th>
          </tr>
        </thead>

        <tbody class="text-gray-600 text-sm">
          @for(idx of myPrjMst; track idx.prjseq; let i = $index) {
            <tr class="border-b border-gray-100 hover:bg-red-50/40 transition duration-200 group">

              <td class="py-4 px-6 text-center text-gray-400 font-mono">
                {{ i + 1 }}
              </td>

              <td class="py-4 px-6">
                <div class="flex flex-col">
                  <span class="font-bold text-gray-800 text-base group-hover:text-red-900 transition-colors">
                    {{ idx.prjnam }}
                  </span>
                  <span class="text-xs text-gray-400 mt-1 font-mono bg-gray-100 inline-block px-1.5 py-0.5 rounded w-fit">
                    #{{ idx.prjseq }}
                  </span>
                </div>
              </td>

              <td class="py-4 px-6">
                <div class="flex items-center gap-2">
                  <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-bold">
                      {{ idx.prjusrnam?.charAt(0) }}
                  </div>
                  <span class="font-medium">{{ idx.prjusrnam }}</span>
                </div>
              </td>

              <td class="py-4 px-6 text-right">
                <span class="font-mono text-gray-600">
                  {{ idx.prjwntbdg | number:'1.0-0' }}
                </span>
              </td>

              <td class="py-4 px-6 text-right">
                <span class="font-mono font-bold text-lg"
                  [ngClass]="{
                    'text-green-600': (idx.prjacpbdg ?? 0) > 0,
                    'text-gray-300': !idx.prjacpbdg || idx.prjacpbdg === 0
                  }">
                  {{ (idx.prjacpbdg ?? 0) | number:'1.0-0' }}
                </span>
              </td>

              <td class="py-4 px-6 text-center">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border"
                  [ngClass]="{
                    'bg-yellow-50 text-yellow-700 border-yellow-200': idx.prjcomstt === 'UAC',
                    'bg-green-50 text-green-700 border-green-200': idx.prjcomstt === 'BAP',
                    'bg-red-50 text-red-700 border-red-200': idx.prjcomstt === 'CN'
                  }">
                  <span class="w-1.5 h-1.5 rounded-full"
                    [ngClass]="{
                      'bg-yellow-500': idx.prjcomstt === 'UAC',
                      'bg-green-500': idx.prjcomstt === 'BAP',
                      'bg-red-500': idx.prjcomstt === 'CN'
                    }"></span>

                  @if(idx.prjcomstt === 'UAC'){ รออนุมัติ }
                  @else if(idx.prjcomstt === 'BAP'){ อนุมัติแล้ว }
                  @else if(idx.prjcomstt === 'CN'){ ไม่อนุมัติ }
                </span>
              </td>

              <td class="py-4 px-6 text-center">
                <button (click)="openBudgetDetail(idx)"
                  class="text-red-900 hover:text-white border border-red-900 hover:bg-red-900 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-4 py-2 text-center transition-all duration-200 shadow-sm flex items-center justify-center gap-1 mx-auto whitespace-nowrap">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                  จัดสรรงบ
                </button>
              </td>

            </tr>
          } @empty {
            <tr>
              <td colspan="7" class="py-12 text-center text-gray-400">
                <div class="flex flex-col items-center justify-center">
                  <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                  <span>ไม่พบข้อมูลโครงการในระบบ</span>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>

    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-between items-center text-xs text-gray-500">
       <div>แสดง {{ myPrjMst.length }} รายการ</div>
       </div>

  </div>
</div>