125 lines
6.1 KiB
HTML
125 lines
6.1 KiB
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>
|