update ระบบยืมคืน

Web-Manage/src/app/DPU/company-management/emp-borrow-return-status/emp-borrow-return-status.component.html

 <app-page-header
-  [title]="'อนุมัตการคืนอุปกรณ์'"
+  [title]="'อนุมัติการคืนอุปกรณ์'"
   [activeTitle]="'ผู้ดูแลระบบ'"
-  [title1]="'อนุมัตการคืนอุปกรณ์'"
+  [title1]="'อนุมัติการคืนอุปกรณ์'"
 ></app-page-header>
 
 <div class="grid grid-cols-12 gap-x-6">
@@ -12,7 +12,7 @@
           {{ "รายการทั้งหมด" | translate }}
           <span
             class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"
-            >{{ hisList.length }}</span
+            >{{ filteredList.length }}</span
           >
         </div>
         <!-- แท็บสถานะ -->
@@ -21,7 +21,7 @@
           <div>
             <button
               class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
-              (click)="filterByStatus('all')"
+              (click)="selectedStatus = '!requested,!rejected'; applyFilter()"
             >
               ทั้งหมด
             </button>
@@ -29,35 +29,35 @@
           <div>
             <button
               class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
-              (click)="filterByStatus('requested')"
+              (click)="selectedStatus = 'approved'; applyFilter()"
             >
-              รออนุมัติ
+              รอคืนอุปกรณื
             </button>
           </div>
-          <div>
+          <!-- <div>
             <button
               class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
               (click)="filterByStatus('approved')"
             >
               อนุมัติแล้ว
             </button>
-          </div>
+          </div> -->
           <div>
             <button
-              class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
-              (click)="filterByStatus('rejected')"
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-info/10 text-info border-info/20"
+              (click)="selectedStatus = 'returned'; applyFilter()"
             >
-              ไม่อนุมันติ
+              คืนแล้ว
             </button>
           </div>
-          <div>
+          <!-- <div>
             <button
-              class="px-4 py-2 rounded-full border text-sm font-medium bg-info/10 text-info border-info/20"
-              (click)="filterByStatus('returned')"
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
+              (click)="filterByStatus('rejected')"
             >
-              คืนแล้ว
+              ไม่อนุมัติ
             </button>
-          </div>
+          </div> -->
         </div>
         <div class="flex flex-wrap gap-2">
           <div>
@@ -67,6 +67,7 @@
               type="text"
               placeholder="{{ 'ค้นหารายการ...' | translate }}"
               aria-label=".form-control-sm example"
+              (input)="applyFilter()"
             />
           </div>
         </div>
@@ -76,6 +77,7 @@
           <table class="table whitespace-nowrap table-bordered min-w-full">
             <thead class="bg-light">
               <tr>
+                <th scope="col" class="text-start">โปรเจค</th>
                 <th scope="col" class="text-start">อุปกรณ์ที่ยืม</th>
                 <th scope="col" class="text-start">พนักงาน</th>
                 <th scope="col" class="text-start">จำนวน</th>
@@ -89,6 +91,8 @@
             <tbody>
               @for(product of filteredList; track product.peId){
               <tr class="product-list">
+                <td>{{ product.project_equipment?.project?.project_name }}
+                </td>
                 <td>
                   {{ product.project_equipment?.equipment?.equipmentName }}
                 </td>
@@ -110,14 +114,12 @@
                   <span
                     class="badge"
                     [ngClass]="{
-                      'bg-success/10 text-success':
-                        product.status === 'approved',
                       'bg-warning/10 text-warning':
-                        product.status === 'requested',
-                      'bg-danger/10 text-danger': product.status === 'rejected',
-                      'bg-info/10 text-info': product.status === 'returned',
-                      'bg-purple-100 text-purple-800':
-                        product.status === 'repairing'
+                        product.status === 'approved',
+                      'bg-danger/10 text-danger':
+                      product.status === 'rejected',
+                      'bg-info/10 text-info':
+                      product.status === 'returned',
                     }"
                   >
                     {{ getStatusText(product.status) }}
@@ -172,191 +174,199 @@
       </div>
     </div>
   </div>
+</div>
+<div
+  id="detail-container"
+  class="hs-overlay hidden ti-modal"
+  *ngIf="selectedBorrowItem as item"
+>
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+    <div class="ti-modal-content">
+      <div class="ti-modal-header">
+        <h6
+          class="modal-title text-[1rem] font-semibold text-defaulttextcolor"
+          id="mail-ComposeLabel"
+        >
+          รายละเอียดการยืม
+        </h6>
+        <button
+          type="button"
+          class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+          data-hs-overlay="#detail-container"
+        >
+          <span class="sr-only">Close</span>
+          <i class="ri-close-line"></i>
+        </button>
+      </div>
+      <div class="ti-modal-body px-4">
+        <div class="grid grid-cols-12 gap-4">
+          <div class="xl:col-span-12 col-span-12">
+            <label for="deal-name" class="form-label">ชื่ออุปกรณ์</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              id="deal-name"
+              placeholder="ชื่ออุปกรณ์"
+              [ngModel]="
+                selectedBorrowItem.project_equipment?.equipment?.equipmentName
+              "
+            />
+          </div>
 
-  <div
-    id="detail-container"
-    class="hs-overlay hidden ti-modal"
-    *ngIf="selectedBorrowItem as item"
-  >
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-      <div class="ti-modal-content">
-        <div class="ti-modal-header">
-          <h6
-            class="modal-title text-[1rem] font-semibold text-defaulttextcolor"
-            id="mail-ComposeLabel"
-          >
-            รายละเอียดการยืม
-          </h6>
+          <div class="xl:col-span-12 col-span-12">
+            <label for="deal-name" class="form-label">จำนวน</label>
+            <input
+              type="number"
+              class="form-control"
+              id="quantity"
+              placeholder="จำนวน"
+              [(ngModel)]="selectedBorrowItem.quantity_borrowed"
+            />
+          </div>
+        </div>
+        <div class="ti-modal-footer">
           <button
+            #closeModalStock
             type="button"
-            class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+            class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
             data-hs-overlay="#detail-container"
           >
-            <span class="sr-only">Close</span>
-            <i class="ri-close-line"></i>
+            ยกเลิก
           </button>
-        </div>
-        <div class="ti-modal-body px-4">
-          <div class="grid grid-cols-12 gap-4">
-            <div class="xl:col-span-12 col-span-12">
-              <label for="deal-name" class="form-label">ชื่ออุปกรณ์</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                id="deal-name"
-                placeholder="ชื่ออุปกรณ์"
-                [ngModel]="
-                  selectedBorrowItem.project_equipment?.equipment?.equipmentName
-                "
-              />
-            </div>
-
-            <div class="xl:col-span-12 col-span-12">
-              <label for="deal-name" class="form-label">จำนวน</label>
-              <input
-                type="number"
-                class="form-control"
-                id="quantity"
-                placeholder="จำนวน"
-                [(ngModel)]="selectedBorrowItem.quantity_borrowed"
-              />
-            </div>
-            <div class="xl:col-span-12 col-span-12">
-              <label for="deal-lead-score" class="form-label">หมายเหตุ</label>
-              <textarea
-                class="form-control"
-                id="job-description"
-                [(ngModel)]="selectStock.remark"
-                rows="4"
-              ></textarea>
-            </div>
-          </div>
-          <div class="ti-modal-footer">
-            <button
-              #closeModalStock
-              type="button"
-              class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
-              data-hs-overlay="#detail-container"
-            >
-              ยกเลิก
-            </button>
-            <button
-              type="button"
-              class="ti-btn bg-primary text-white !font-medium"
-              data-hs-overlay="#detail-container"
-              (click)="approve(item)"
-            >
-              บันทึก
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- ในส่วน template -->
-  <div id="detail-borrow" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-      <div class="ti-modal-content">
-        <div class="ti-modal-header">
-          <h6
-            class="modal-title text-[1rem] font-semibold text-defaulttextcolor"
-          >
-            รายละเอียดการยืม
-          </h6>
           <button
             type="button"
-            class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
-            data-hs-overlay="#detail-borrow"
+            class="ti-btn bg-primary text-white !font-medium"
+            data-hs-overlay="#detail-container"
+            (click)="approve(item)"
           >
-            <span class="sr-only">Close</span>
-            <i class="ri-close-line"></i>
+            บันทึก
           </button>
         </div>
-        <div class="ti-modal-body px-4" *ngIf="selectedBorrowItem">
-          <div class="grid grid-cols-12 gap-4">
-            <!-- ข้อมูลผู้ยืม -->
-            <div class="xl:col-span-12 col-span-12">
-              <label class="form-label">ชื่อผู้ยืม</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                [(ngModel)]="memberList.member.getFullname"
-              />
-            </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div
+  id="detail-borrow"
+  class="hs-overlay hidden ti-modal"
+  *ngIf="selectedBorrowItem"
+>
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+    <div class="ti-modal-content">
+      <div class="ti-modal-header">
+        <h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor">
+          รายละเอียดการยืม
+        </h6>
+        <button
+          type="button"
+          class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+          data-hs-overlay="#detail-borrow"
+        >
+          <span class="sr-only">Close</span>
+          <i class="ri-close-line"></i>
+        </button>
+      </div>
+      <div class="ti-modal-body px-4">
+        <div class="grid grid-cols-12 gap-4">
+          <!-- ข้อมูลผู้ยืม -->
+          <div class="xl:col-span-12 col-span-12">
+            <label class="form-label">ชื่อผู้ยืม</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="selectedBorrowItem.member?.getFullname() || '-'"
+            />
+          </div>
 
-            <div class="xl:col-span-12 col-span-12">
-              <label class="form-label">เบอร์โทรติดต่อ</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                [(ngModel)]="memberList.member.phoneNumber"
-              />
-            </div>
+          <div class="xl:col-span-12 col-span-12">
+            <label class="form-label">เบอร์โทรติดต่อ</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="selectedBorrowItem.member?.phoneNumber || '-'"
+            />
+          </div>
 
-            <!-- ข้อมูลอุปกรณ์ -->
-            <div class="xl:col-span-12 col-span-12">
-              <label class="form-label">ชื่ออุปกรณ์</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                [(ngModel)]="Projecteqlist.equipment.equipmentName"
-              />
-            </div>
+          <!-- ข้อมูลอุปกรณ์ -->
+          <div class="xl:col-span-12 col-span-12">
+            <label class="form-label">ชื่ออุปกรณ์</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="
+                selectedBorrowItem.project_equipment?.equipment
+                  ?.equipmentName || '-'
+              "
+            />
+          </div>
 
-            <!-- ข้อมูลโปรเจค -->
-            <div class="xl:col-span-12 col-span-12">
-              <label class="form-label">โครงการที่ยืม</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                [(ngModel)]="projectList.project_name"
-              />
-            </div>
+          <div class="xl:col-span-12 col-span-12">
+            <label class="form-label">ชื่อโปรเจค</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="
+                selectedBorrowItem.project_equipment.project.project_name
+              "
+            />
+          </div>
 
-            <!-- ข้อมูลการยืม -->
-            <div class="xl:col-span-6 col-span-12">
-              <label class="form-label">จำนวนที่ยืม</label>
-              <input
-                readonly
-                type="number"
-                class="form-control"
-                [(ngModel)]="selectedBorrowItem.quantity_borrowed"
-              />
-            </div>
+          <!-- จำนวน -->
+          <div class="xl:col-span-12 col-span-12">
+            <label class="form-label">จำนวน</label>
+            <input
+              readonly
+              type="number"
+              class="form-control"
+              [value]="selectedBorrowItem.quantity_borrowed || '0'"
+            />
+          </div>
 
-            <div class="xl:col-span-6 col-span-12">
-              <label class="form-label">วันที่ยืม</label>
-              <input
-                readonly
-                type="text"
-                class="form-control"
-                [(ngModel)]="selectedBorrowItem.created_at"
-              />
-            </div>
+          <!-- วันที่ยืม -->
+          <div class="xl:col-span-6 col-span-12">
+            <label class="form-label">วันที่ยืม</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="
+                selectedBorrowItem.created_at
+                  ? (selectedBorrowItem.created_at | date : 'dd/MM/yyyy HH:mm')
+                  : '-'
+              "
+            />
+          </div>
+
+          <!-- วันที่คืน -->
+          <div class="xl:col-span-6 col-span-12">
+            <label class="form-label">วันที่คืน</label>
+            <input
+              readonly
+              type="text"
+              class="form-control"
+              [value]="
+                selectedBorrowItem.returned_date
+                  ? (selectedBorrowItem.returned_date
+                    | date : 'dd/MM/yyyy HH:mm')
+                  : '-'
+              "
+            />
           </div>
         </div>
-        <div class="ti-modal-footer">
-          <button
-            type="button"
-            class="ti-btn ti-btn-light align-middle"
-            data-hs-overlay="#detail-borrow"
-          >
-            ปิด
-          </button>
-          <!-- <button
-            type="button"
-            class="ti-btn bg-primary text-white !font-medium"
-            data-hs-overlay="#detail-borrow"
-            (click)="approve(item)"
-          >
-            บันทึก
-          </button> -->
-        </div>
+      </div>
+      <div class="ti-modal-footer">
+        <button
+          type="button"
+          class="ti-btn ti-btn-light align-middle"
+          data-hs-overlay="#detail-borrow"
+        >
+          ปิด
+        </button>
       </div>
     </div>
   </div>

Web-Manage/src/app/DPU/company-management/emp-borrow-return-status/emp-borrow-return-status.component.ts

@@ -17,8 +17,12 @@ import { EquipmentModel, EquipmentStockModel } from "../../models/equipments.mod
 import { ProjectEquipmentModel } from "../../models/project-equipments";
 import { ProjectMemberModel } from '../../models/project-members';
 import { HttpClient } from '@angular/common/http';
-import { FileUploader } from 'ng2-file-upload';
 import { ProjectModel } from '../../models/project.model';
+import { ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+
 
 @Component({
   selector: 'app-emp-borrow-return-status',
@@ -46,7 +50,6 @@ export class EmpBorrowReturnStatusComponent {
   projectList:ProjectModel;
   allSelected = false;
   someSelected = false;
-  uploaderProfile: FileUploader | undefined;
   uploadErrorMsg: string = "";
   itemsList: ProjectEquipmentModel[] = [];
   filterList: ProjectEquipmentModel[] = [];
@@ -76,9 +79,11 @@ export class EmpBorrowReturnStatusComponent {
   isEdit = false;
   empList: ProjectMemberModel[] = []
   hisList: BorrowTransactionsModel [] = [];
-  selectedStatus: string = 'all';
+  selectedStatus: string = '!requested,!rejected';
+  isProcessing = false;
   constructor(
     private http: HttpClient,
+    private cdr: ChangeDetectorRef,
     private eqService: EquipmentService,
     public translate: TranslateService,
     private tokenService: TokenService,
@@ -101,13 +106,28 @@ export class EmpBorrowReturnStatusComponent {
 
   }
   loadReturnList(): void {
-    this.borrowTransactionsService.getLists().subscribe(result => {
-      this.hisList = result;
-      // เรียงลำดับจากวันที่ล่าสุด
-      this.hisList.sort((a, b) =>
-        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-      );
-      this.applyFilter();
+    this.borrowTransactionsService.getLists().subscribe({
+      next: (result) => {
+        // เก็บข้อมูลทั้งหมด
+        this.hisList = result;
+
+        // เรียงลำดับจากวันที่ล่าสุด
+        this.hisList.sort((a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        );
+
+        // กรองเฉพาะรายการที่ต้องคืน (is_returnable === true)
+        this.hisList = this.hisList.filter(item =>
+          item.project_equipment?.equipment?.is_returnable === true
+        );
+
+        // ใช้ applyFilter เพื่อกรองตามเงื่อนไขอื่นๆ
+        this.applyFilter();
+      },
+      error: (err) => {
+        console.error('Error loading return list:', err);
+        // สามารถเพิ่มการแจ้งเตือนผู้ใช้ที่นี่
+      }
     });
   }
 
@@ -119,10 +139,30 @@ export class EmpBorrowReturnStatusComponent {
   applyFilter(): void {
     let filtered = [...this.hisList];
 
-    // กรองตามสถานะ
-    if (this.selectedStatus !== 'all') {
-      filtered = filtered.filter(item => item.status === this.selectedStatus);
-    }
+    // แยกค่าสถานะเป็น Array
+    const statusConditions = this.selectedStatus.split(',');
+
+    // กรองตามเงื่อนไขสถานะ
+    filtered = filtered.filter(item => {
+      if (!item.status) return false;
+
+      // ตรวจสอบแต่ละเงื่อนไข
+      for (const condition of statusConditions) {
+        if (condition.startsWith('!')) {
+          // กรณีเงื่อนไขแบบยกเว้น (!status)
+          const excludedStatus = condition.substring(1);
+          if (item.status === excludedStatus) {
+            return false;
+          }
+        } else {
+          // กรณีเงื่อนไขแบบบังคับ (status)
+          if (item.status !== condition) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
 
     // กรองตามคำค้นหา
     if (this.searchTerm) {
@@ -135,7 +175,6 @@ export class EmpBorrowReturnStatusComponent {
     }
 
     this.filteredList = filtered;
-
   }
 
 
@@ -180,7 +219,7 @@ export class EmpBorrowReturnStatusComponent {
   getStatusText(status: string): string {
     switch(status) {
       case 'requested': return 'รออนุมัติ';
-      case 'approved': return 'อนุมัติแล้ว';
+      case 'approved': return 'รอคืนอุปกรณ์';
       case 'rejected': return 'ไม่อนุมัติ';
       case 'returned': return 'คืนแล้ว';
       case 'repairing': return 'กำลังซ่อม';

Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.html

 <app-page-header
-  [title]="'อนุมัตการยืมอุปกรณ์'"
+  [title]="'อนุมัติการยืมอุปกรณ์'"
   [activeTitle]="'ผู้ดูแลระบบ'"
-  [title1]="'อนุมัตการยืมอุปกรณ์'"
+  [title1]="'อนุมัติการยืมอุปกรณ์'"
 ></app-page-header>
 
 <div class="grid grid-cols-12 gap-x-6">
@@ -12,47 +12,47 @@
           {{ "รายการทั้งหมด" | translate }}
           <span
             class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"
-            >{{ hisList.length }}</span
+            >{{ filteredList.length }}</span
           >
         </div>
-          <!-- แท็บสถานะ -->
-          <div class="flex flex-wrap gap-2">
-            <!-- สถานะทั้งหมด -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
-                (click)="filterByStatus('all')"
-              >
-                ทั้งหมด
-              </button>
-            </div>
-            <!-- สถานะรออนุมัติ -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
-                (click)="filterByStatus('requested')"
-              >
-                รออนุมัติ
-              </button>
-            </div>
-            <!-- สถานะอนุมัติแล้ว -->
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
-                (click)="filterByStatus('approved')"
-              >
-                อนุมัติแล้ว
-              </button>
-            </div>
-            <div>
-              <button
-                class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
-                (click)="filterByStatus('rejected')"
-              >
-              ไม่อนุมันติ
-              </button>
-            </div>
+        <!-- แท็บสถานะ -->
+        <div class="flex flex-wrap gap-2">
+          <!-- สถานะทั้งหมด -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
+              (click)="selectedStatus = '!returned'; applyFilter()"
+            >
+              ทั้งหมด
+            </button>
+          </div>
+          <!-- สถานะรออนุมัติ -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
+              (click)="selectedStatus = 'requested'; applyFilter()"
+            >
+              รออนุมัติ
+            </button>
+          </div>
+          <!-- สถานะอนุมัติแล้ว -->
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
+              (click)="selectedStatus = 'approved'; applyFilter()"
+            >
+              อนุมัติแล้ว
+            </button>
+          </div>
+          <div>
+            <button
+              class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
+              (click)="selectedStatus = 'rejected'; applyFilter()"
+            >
+              ไม่อนุมัติ
+            </button>
           </div>
+        </div>
         <div class="flex flex-wrap gap-2">
           <div>
             <input
@@ -61,6 +61,7 @@
               type="text"
               placeholder="{{ 'ค้นหารายการ...' | translate }}"
               aria-label=".form-control-sm example"
+              (input)="applyFilter()"
             />
           </div>
         </div>
@@ -71,11 +72,11 @@
           <table class="table whitespace-nowrap table-bordered min-w-full">
             <thead class="bg-light">
               <tr>
+                <th scope="col" class="text-start">โปรเจค</th>
                 <th scope="col" class="text-start">อุปกรณ์ที่ยืม</th>
                 <th scope="col" class="text-start">พนักงาน</th>
                 <th scope="col" class="text-start">จำนวน</th>
                 <th scope="col" class="text-start">วันที่ยืม</th>
-                <th scope="col" class="text-start">วันที่คืน</th>
                 <th scope="col" class="text-start">สถานะ</th>
                 <th scope="col" class="text-start">ผู้อนุมัติ</th>
                 <th scope="col" class="text-start">การดำเนินการ</th>
@@ -84,8 +85,9 @@
             <tbody>
               @for(product of filteredList;track product.peId){
               <tr class="product-list">
+                <td>{{ product.project_equipment?.project?.project_name }}</td>
                 <td>
-                  {{ product.project_equipment?.equipment?.equipmentName}}
+                  {{ product.project_equipment?.equipment?.equipmentName }}
                 </td>
                 <td>
                   <div class="flex items-center">
@@ -95,28 +97,34 @@
                   </div>
                 </td>
                 <td>{{ product.quantity_borrowed }}</td>
-                <td>{{ product.created_at | date:'dd/MM/yyyy HH:mm' }}</td>
-                <td>{{ product.returned_date | date:'dd/MM/yyyy HH:mm' }}</td>
+                <td>{{ product.created_at | date : "dd/MM/yyyy HH:mm" }}</td>
                 <td>
-                  <span class="badge" [ngClass]="{
-                    'bg-success/10 text-success': product.status === 'approved',
-                    'bg-warning/10 text-warning': product.status === 'requested',
-                    'bg-danger/10 text-danger': product.status === 'rejected',
-                    'bg-info/10 text-info': product.status === 'returned'
-                  }">
+                  <span
+                    class="badge"
+                    [ngClass]="{
+                      'bg-success/10 text-success':
+                        product.status === 'approved',
+                      'bg-warning/10 text-warning':
+                        product.status === 'requested',
+                      'bg-danger/10 text-danger': product.status === 'rejected',
+                      'bg-info/10 text-info': product.status === 'returned'
+                    }"
+                  >
                     {{ getStatusText(product.status) }}
                   </span>
                 </td>
-                <td>{{ product.approved_by_member?.getFullname() || '-' }}</td>
+                <td>{{ product.approved_by_member?.getFullname() || "-" }}</td>
                 <td>
-                  <button *ngIf="product.status === 'requested'"
+                  <button
+                    *ngIf="product.status === 'requested'"
                     aria-label="button"
                     (click)="approve(product)"
                     class="ti-btn ti-btn-sm ti-btn-success me-1"
                   >
                     <i class="ri-check-line"></i>
                   </button>
-                  <button *ngIf="product.status === 'requested'"
+                  <button
+                    *ngIf="product.status === 'requested'"
                     aria-label="button"
                     (click)="reject(product)"
                     class="ti-btn ti-btn-sm ti-btn-danger"

Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.ts

@@ -68,7 +68,7 @@ export class EmpBorrowStatusComponent {
   isEdit = false;
   empList: ProjectMemberModel[] = []
   hisList: BorrowTransactionsModel [] = [];
-  selectedStatus: string = 'all';
+  selectedStatus: string = '!returned';
   constructor(
     private http: HttpClient,
     private eqService: EquipmentService,
@@ -86,13 +86,23 @@ export class EmpBorrowStatusComponent {
   }
 
   loadBorrowHistory(): void {
-    this.borrowTransactionsService.getLists().subscribe(result => {
-      this.hisList = result;
-      // เรียงลำดับจากวันที่ล่าสุด
-      this.hisList.sort((a, b) =>
-        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-      );
-      this.applyFilter();
+    this.borrowTransactionsService.getLists().subscribe({
+      next: (result) => {
+        // เก็บข้อมูลทั้งหมด
+        this.hisList = result;
+
+        // เรียงลำดับจากวันที่ล่าสุด
+        this.hisList.sort((a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        );
+
+        // ใช้ applyFilter เพื่อกรองตามเงื่อนไขอื่นๆ
+        this.applyFilter();
+      },
+      error: (err) => {
+        console.error('Error loading return list:', err);
+        // สามารถเพิ่มการแจ้งเตือนผู้ใช้ที่นี่
+      }
     });
   }
 
@@ -194,10 +204,30 @@ export class EmpBorrowStatusComponent {
   applyFilter(): void {
     let filtered = [...this.hisList];
 
-    // กรองตามสถานะ
-    if (this.selectedStatus !== 'all') {
-      filtered = filtered.filter(item => item.status === this.selectedStatus);
-    }
+    // แยกค่าสถานะเป็น Array
+    const statusConditions = this.selectedStatus.split(',');
+
+    // กรองตามเงื่อนไขสถานะ
+    filtered = filtered.filter(item => {
+      if (!item.status) return false;
+
+      // ตรวจสอบแต่ละเงื่อนไข
+      for (const condition of statusConditions) {
+        if (condition.startsWith('!')) {
+          // กรณีเงื่อนไขแบบยกเว้น (!status)
+          const excludedStatus = condition.substring(1);
+          if (item.status === excludedStatus) {
+            return false;
+          }
+        } else {
+          // กรณีเงื่อนไขแบบบังคับ (status)
+          if (item.status !== condition) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
 
     // กรองตามคำค้นหา
     if (this.searchTerm) {
@@ -210,8 +240,6 @@ export class EmpBorrowStatusComponent {
     }
 
     this.filteredList = filtered;
-
   }
 
-
 }