<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header flex justify-between">
        <h2 class="text-lg font-semibold">ข้อมูลการคืน</h2>
      </div>
      <div class="box-body">
        <table class="ti-custom-table ti-custom-table-head w-full">
          <thead class="bg-gray-100">
            <tr>
              <th>Name</th>
              <th>Order ID</th>
              <th>Project</th>
              <th>Status</th>
              <th class="text-end">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of transactions">
              <td>{{ item.name }}</td>
              <td>{{ item.id }}</td>
              <td>{{ item.project }}</td>
              <td>
                <span class="badge px-3 py-1 rounded-md" [ngClass]="getStatusClass(item.status)">
                  {{ item.status }}
                </span>
              </td>
              <td class="text-end">
                <a routerLink="/page/ecommerce/borrow" class="text-primary hover:text-primary">Details</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
