ttc/micro-frontend
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

.

Browse Source
This commit is contained in:
x2Skyz
2025-11-25 21:11:57 +07:00
parent 291485f7b7
commit 368f2ef5e6
19 changed files with 1014 additions and 811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.html
View File

@@ -1,307 +1,339 @@
<div class="p-6 space-y-10">
<!-- Header -->
<div class="flex justify-between items-center mb-4 ">
<h2 class="text-xl font-semibold">
รายการงบประมาณของโครงการ: ระบบจัดการน้ำดื่ม
<!-- {{ project?.name }} -->
</h2>
<div class="w-full p-6 space-y-8 bg-gray-50 min-h-screen font-sans text-gray-800">
<div class="text-gray-600 text-sm">
แสดงข้อมูล {{ budgetItems.length }} รายการ
<!-- 1. Header Section -->
<div class="flex flex-col md:flex-row md:justify-between md:items-end gap-4 border-b border-gray-200 pb-4">
<div>
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
<!-- <span class="bg-red-100 text-red-800 p-2 rounded-lg text-xl">💸</span> -->
<span>จัดสรรงบประมาณ</span>
</h2>
<p class="text-gray-500 mt-1 ml-1 text-sm">โครงการ: <span class="font-medium text-red-900">{{projectTitle}}</span></p>
</div>
<div class="text-sm text-gray-500 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100">
รายการทั้งหมด: <span class="font-bold text-red-800">{{ myTrnMst.length }}</span> รายการ
</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"
<!-- 2. Add/Edit Budget Form (Collapsible) -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-300">
<!-- Toggle Header -->
<div
class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer hover:bg-gray-100 transition select-none border-b border-gray-100"
(click)="toggleFormCollapse()"
>
➕ เพิ่มเข้าตาราง
</button>
</form> -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 ">
<!-- หัวพับได้ -->
<div class="flex justify-between items-center p-4 border-b bg-gray-50 rounded-t-lg" (click)="toggleFormCollapse()">
<h3 class="text-base font-semibold text-gray-700">เพิ่มรายการงบประมาณสำหรับโครงการ</h3>
<button class="text-gray-400 hover:text-gray-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
[ngClass]="{'rotate-180': !isFormExpanded}">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="flex items-center gap-2 font-bold text-gray-700">
<!-- <span class="bg-red-600 text-white w-6 h-6 flex items-center justify-center rounded-full text-xs shadow-sm">
{{ isEditMode ? '✎' : '✚' }}
</span> -->
{{ isEditMode ? 'แก้ไขรายการ' : 'เพิ่มรายการงบประมาณ' }}
</div>
<button class="text-gray-400 transition-transform duration-300" [ngClass]="{'rotate-180': isFormExpanded}">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<!-- เนื้อหาพับได้ -->
@if(!isFormExpanded){
<div class="p-4 space-y-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="borrower_id" class="block text-sm font-medium text-gray-700 mb-1">หมวดงบประมาณ</label>
<select name="" id="" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm">
<option value="">-- เลือกหมวดงบ --</option>
@for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
<option [value]="item.dtlcod">{{ item.dtlnam }}</option>
}
</select>
<!-- Form Content -->
@if(isFormExpanded){
<div class="p-6 bg-white animate-fade-in-down">
<form [formGroup]="budgetForm">
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
<!-- Dropdown หมวดงบ -->
<div class="md:col-span-5 space-y-1">
<label class="block text-xs font-bold text-gray-500 uppercase">
หมวดงบประมาณ <span class="text-red-500">*</span>
</label>
<select formControlName="bdgcod"
class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 transition cursor-pointer"
[class.border-red-500]="budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched">
<option value="">-- กรุณาเลือก --</option>
@for (item of myDropBdg; track item.bdgcod) {
<option [value]="item.bdgcod">{{ item.bdgnam }}</option>
}
</select>
<!-- Error Message -->
@if (budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched) {
<div class="text-red-500 text-xs flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
กรุณาเลือกหมวดงบ
</div>
}
</div>
<!-- Input จำนวนเงิน -->
<div class="md:col-span-5 space-y-1">
<label class="block text-xs font-bold text-gray-500 uppercase">
จำนวนเงิน <span class="text-red-500">*</span>
</label>
<div class="relative">
<input type="number" formControlName="amount" placeholder="0.00"
class="w-full p-3 pr-12 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 text-right font-mono text-gray-800 transition"
[class.border-red-500]="budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched">
<span class="absolute right-4 top-3 text-gray-400 text-sm font-medium pointer-events-none">THB</span>
</div>
<!-- Error Message -->
@if (budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched) {
<div class="text-red-500 text-xs flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
ระบุจำนวนเงินที่ถูกต้อง
</div>
}
</div>
<div>
<label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน</label>
<input type="text" id="first_name" name="first_name" type="number" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm" placeholder="">
</div>
</div>
<div class="flex justify-end pt-4 space-x-2">
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-500 rounded-md shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
รีเซ็ต
</button> -->
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
ค้นหา
</button> -->
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
</svg>
ส่งออก Excel
</button> -->
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
</svg>
เพิ่มเข้าสู่ตาราง
<!-- Action Buttons -->
<div class="md:col-span-2 flex gap-2 pt-6">
<button type="button" (click)="onSaveSubmit()"
class="flex-1 bg-red-800 hover:bg-red-900 text-white font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition active:scale-95 flex justify-center items-center gap-2">
<span>{{ isEditMode ? 'บันทึกแก้ไข' : 'เพิ่ม' }}</span>
</button>
@if(isEditMode) {
<button type="button" (click)="cancelEdit()"
class="bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold py-3 px-4 rounded-lg transition active:scale-95">
ยกเลิก
</button>
}
</div>
</div>
</form>
</div>
}
</div>
<!-- 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> -->
<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 text-center">จำนวนเงิน</th>
<th class="py-3 px-4 font-semibold text-right pr-11">ดำเนินการ</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-center">
<input type="number" class="w-40 px-3 py-2 border border-gray-300 rounded-lg text-center hover:shadow-2xl">
</td>
<td class="py-4 px-4 text-right space-x-2 whitespace-nowrap pr-8">
<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>
<!-- endtable -->
</div>
<!-- Summary -->
<div class="text-right mt-4 text-lg font-semibold">
ยอดรวมทั้งหมด:
<span class="text-blue-600">
{{ getTotalAmount() | number:'1.0-2' }} บาท
</span>
</div>
<!-- 3. Budget Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full text-left border-collapse">
<thead>
<tr class="bg-red-900 text-white text-sm uppercase tracking-wider">
<th class="py-4 px-6 font-semibold w-16 text-center">#</th>
<th class="py-4 px-6 font-semibold">รายการ / หมวดงบ</th>
<th class="py-4 px-6 font-semibold text-right w-48">จำนวนเงิน (บาท)</th>
<th class="py-4 px-6 font-semibold text-center w-32">จัดการ</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 text-sm">
@for (idx of myTrnMst; track idx.trnseq; let i = $index) {
<tr class="hover:bg-red-50/40 transition group">
<td class="py-4 px-6 text-center text-gray-500 font-mono">{{ i + 1 }}</td>
<td class="py-4 px-6">
<div class="font-bold text-gray-800">{{ idx.trnbdgnam }}</div>
<div class="text-xs text-gray-400 font-mono mt-0.5">{{ idx.trnbdgcod }}</div>
</td>
<td class="py-4 px-6 text-right font-mono font-medium text-gray-700">
{{ idx.trnexpbdg | number:'1.2-2' }}
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center gap-2">
<button (click)="editItem(i)" class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition" title="แก้ไข">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-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>
<button (click)="removeItem(i)" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition" title="ลบ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
} @empty {
<tr>
<td colspan="4" class="py-12 text-center text-gray-400 bg-gray-50/30">
<div class="text-4xl mb-2 opacity-50">📭</div>
<p>ยังไม่มีรายการงบประมาณ</p>
</td>
</tr>
}
</tbody>
<!-- Footer Total & Action Buttons -->
<tfoot class="bg-gray-50 border-t-2 border-red-200">
<tr>
<td colspan="2" class="py-4 px-6 text-right font-bold text-gray-600 uppercase text-xs tracking-wider">รวมยอดสุทธิ</td>
<td class="py-4 px-6 text-right">
<span class="text-xl font-extrabold text-red-900">{{ getTotalAmount() | number:'1.2-2' }}</span>
<span class="text-xs text-gray-500 ml-1 font-medium">THB</span>
</td>
<td class="py-4 px-6 text-center">
<div class="flex items-center justify-center gap-3">
<!-- 🟢 ปุ่มย้อนกลับ (Icon Arrow) -->
<button (click)="goBack()" class="p-2.5 bg-white border border-gray-200 rounded-lg text-gray-500 hover:text-red-700 hover:border-red-200 hover:bg-red-50 hover:shadow-sm transition active:scale-95 group" title="ย้อนกลับ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<!-- 🟢 ปุ่มยืนยันบันทึกทั้งหมด -->
<button (click)="openConfirmModal()"
class="bg-green-600 hover:bg-green-700 text-white text-xs font-bold py-2.5 px-5 rounded-lg shadow transition active:scale-95 flex items-center gap-2">
<span>✓</span> บันทึก
</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- 🟢 Modal Confirmation (Save / Cancel) -->
@if(showConfirmModal) {
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
<!-- 🟢 Dynamic Header Color -->
<div class="p-4 text-white flex justify-between items-center"
[ngClass]="myTrnMst.length === 0 ? 'bg-red-600' : 'bg-red-900'">
<h3 class="font-bold text-lg flex items-center gap-2">
<span>{{ myTrnMst.length === 0 ? '⚠️' : '💾' }}</span>
{{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยันการบันทึก' }}
</h3>
<button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
</div>
<div class="p-6 text-center space-y-4">
<!-- 🟢 Dynamic Icon -->
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2"
[ngClass]="myTrnMst.length === 0 ? 'bg-red-50 text-red-600' : 'bg-red-50 text-red-600'">
<span class="text-3xl">{{ myTrnMst.length === 0 ? '🗑️' : '📝' }}</span>
</div>
<!-- 🟢 Dynamic Message -->
<p class="text-gray-600">
@if(myTrnMst.length === 0) {
คุณต้องการ <b>ยกเลิกการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
} @else {
คุณต้องการ <b>บันทึกข้อมูลการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
}
</p>
<!-- Summary Info -->
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
<div class="flex justify-between mb-1">
<span class="text-gray-500">จำนวนรายการ:</span>
<span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">ยอดรวม:</span>
<span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
</div>
</div>
<!-- 🟢 List of Items (บอกรายการ) -->
<div class="text-xs text-gray-500 mt-2 text-left max-h-32 overflow-y-auto border-t border-gray-200 pt-2">
<div class="font-semibold mb-1">รายการ:</div>
@if(myTrnMst.length > 0) {
<ul class="list-disc pl-4 space-y-1">
@for(item of myTrnMst; track $index) {
<li>{{ item.trnbdgnam }} ({{ item.trnexpbdg | number }})</li>
}
</ul>
} @else {
<p class="text-red-500 italic">- ไม่พบรายการคงเหลือ (ลบทั้งหมด) -</p>
}
</div>
</div>
<!-- Modal Footer -->
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
<button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
ยกเลิก
</button>
<!-- 🟢 Dynamic Button Color -->
<button (click)="confirmSave()"
class="flex-1 py-2.5 px-4 text-white font-bold rounded-xl shadow-md hover:shadow-lg transition"
[ngClass]="myTrnMst.length === 0 ? 'bg-red-600 hover:bg-red-700' : 'bg-red-800 hover:bg-red-900'">
{{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยัน' }}
</button>
</div>
</div>
</div>
}
<!-- 🟢 Modal Confirmation
@if(showConfirmModal) {
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
Modal Header
<div class="bg-red-900 p-4 text-white flex justify-between items-center">
<h3 class="font-bold text-lg flex items-center gap-2">
<span>💾</span> ยืนยันการบันทึก
</h3>
<button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
</div>
Modal Body
<div class="p-6 text-center space-y-4">
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-3xl">📝</span>
</div>
<p class="text-gray-600">คุณต้องการบันทึกข้อมูลการจัดสรรงบประมาณใช่หรือไม่?</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
<div class="flex justify-between mb-1">
<span class="text-gray-500">จำนวนรายการ:</span>
<span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">ยอดรวม:</span>
<span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
</div>
</div>
</div>
Modal Footer
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
<button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
ยกเลิก
</button>
<button (click)="confirmSave()" class="flex-1 py-2.5 px-4 bg-red-800 text-white font-bold rounded-xl hover:bg-red-900 shadow-md hover:shadow-lg transition">
ยืนยัน
</button>
</div>
</div>
</div>
} -->
<!-- 🔴 Modal Confirmation (Delete) -->
@if(showDeleteModal) {
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
<div class="bg-red-600 p-4 text-white flex justify-between items-center">
<h3 class="font-bold text-lg flex items-center gap-2">
<span>🗑️</span> ยืนยันการลบ
</h3>
<button (click)="closeDeleteModal()" class="text-white/70 hover:text-white">✕</button>
</div>
<div class="p-6 text-center space-y-4">
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
<span class="text-3xl">⚠️</span>
</div>
<p class="text-gray-600">คุณต้องการลบรายการนี้ใช่หรือไม่?</p>
<p class="text-sm text-gray-500">การกระทำนี้ไม่สามารถย้อนกลับได้ (ในหน้าจอนี้)</p>
</div>
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
<button (click)="closeDeleteModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
ยกเลิก
</button>
<button (click)="confirmDelete()" class="flex-1 py-2.5 px-4 bg-red-600 text-white font-bold rounded-xl hover:bg-red-700 shadow-md hover:shadow-lg transition">
ลบรายการ
</button>
</div>
</div>
</div>
}
</div>