127 lines
5.7 KiB
HTML
127 lines
5.7 KiB
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-red-900 border-b border-gray-200 text-white 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>
|
||
@for(idx of myPrjMst; track idx.prjseq; let i = $index){
|
||
<tr 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"> {{ idx.prjseq }}</td>
|
||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ idx.prjnam }}</td>
|
||
<td class="py-4 px-4 text-gray-700">{{ idx.prjusrnam }}</td>
|
||
<td class="py-4 px-4 text-blue-700 font-bold whitespace-nowrap"> {{ idx.prjwntbdg | number:'1.0-0' }} บาท</td>
|
||
|
||
@if(idx.prjbdgnam){
|
||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ idx.prjbdgnam }}</td>
|
||
}@else {
|
||
<td class="py-4 px-4 text-gray-400 font-semibold leading-tight italic">ไม่จัดสรร</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"/> -->
|
||
{{ idx.prjacpbdg }} บาท
|
||
</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': 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'
|
||
}"
|
||
>
|
||
<ng-container *ngIf="idx.prjcomstt === 'BAP'">อนุมัติแล้ว</ng-container>
|
||
<ng-container *ngIf="idx.prjcomstt === 'UAC'">รออนุมัติ</ng-container>
|
||
<ng-container *ngIf="idx.prjcomstt === 'CN'">ไม่อนุมัติ</ng-container>
|
||
</span>
|
||
</td>
|
||
|
||
<td class="py-4 px-4 text-center space-x-2 whitespace-nowrap">
|
||
|
||
<button
|
||
class="bg-red-900 hover:bg-red-950 text-white px-4 py-2 rounded-xl text-sm
|
||
shadow-sm font-medium transition"
|
||
(click)="openBudgetDetail(idx)">
|
||
จัดสรรงบประมาณ
|
||
</button>
|
||
|
||
|
||
</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
<!-- endtable -->
|
||
</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>
|