203 lines
7.5 KiB
PHP
203 lines
7.5 KiB
PHP
<div class="card bg-base-100 shadow-xl h-full border border-base-200 overflow-hidden">
|
|
<div class="card-body p-0 h-full flex flex-col">
|
|
|
|
<!-- Header & Filters -->
|
|
<div class="p-4 border-b border-base-200 bg-base-50">
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-4">
|
|
<div class="flex-1">
|
|
<h2 class="text-2xl font-bold flex items-center gap-2 text-base-content">
|
|
<i class="fa fa-check-circle text-primary"></i> Pending Validation
|
|
</h2>
|
|
</div>
|
|
<div class="badge badge-lg badge-primary">
|
|
<span x-text="unvalidatedCount"></span> requests
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Filter -->
|
|
<div class="flex flex-col md:flex-row gap-3 items-end bg-base-100 p-3 rounded-lg border border-base-200 shadow-sm">
|
|
<div class="form-control">
|
|
<label class="label text-xs font-bold py-1 text-base-content/60">Date Range</label>
|
|
<div class="join">
|
|
<input type="date" class="input input-sm input-bordered join-item" x-model="filter.date1" />
|
|
<span class="join-item btn btn-sm btn-ghost no-animation bg-base-200 font-normal px-2">-</span>
|
|
<input type="date" class="input input-sm input-bordered join-item" x-model="filter.date2" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-sm btn-primary" @click="fetchUnvalidated()">
|
|
<i class="fa fa-search"></i> Search
|
|
</button>
|
|
<button class="btn btn-sm btn-neutral" @click="resetUnvalidated()">
|
|
<i class="fa fa-sync-alt"></i> Reset
|
|
</button>
|
|
</div>
|
|
|
|
<span class="flex-1"></span>
|
|
|
|
<div class="form-control w-full md:w-auto">
|
|
<label class="input input-sm input-bordered">
|
|
<i class="fa fa-filter"></i>
|
|
<input type="text" placeholder="Type to filter..." x-model="filterTable" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div class="flex-1 overflow-y-auto px-4 pb-4">
|
|
<template x-if="isLoading">
|
|
<table class="table table-xs table-zebra w-full">
|
|
<thead class="bg-base-100 sticky top-0 z-10">
|
|
<tr>
|
|
<th style="width: 12%;">
|
|
<div class="skeleton h-4 w-24"></div>
|
|
</th>
|
|
<th style="width: 18%;">
|
|
<div class="skeleton h-4 w-32"></div>
|
|
</th>
|
|
<th style="width: 10%;">
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</th>
|
|
<th style="width: 12%;">
|
|
<div class="skeleton h-4 w-24"></div>
|
|
</th>
|
|
<th style="width: 10%;">
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</th>
|
|
<th style="width: 10%;">
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</th>
|
|
<th style="width: 18%;">
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</th>
|
|
<th style="width: 10%;">
|
|
<div class="skeleton h-4 w-16"></div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="i in 5" :key="i">
|
|
<tr>
|
|
<td colspan="8">
|
|
<div class="skeleton h-4 w-full"></div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<template x-if="!isLoading && !unvalidatedList.length">
|
|
<div class="text-center py-10">
|
|
<i class="fa fa-check-circle text-4xl mb-2 opacity-50"></i>
|
|
<p>All requests have been validated!</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="!isLoading && unvalidatedList.length">
|
|
<table class="table table-xs table-zebra w-full">
|
|
<thead class="bg-base-100 sticky top-0 z-10">
|
|
<tr>
|
|
<th style="width: 12%;" @click="sort('REQDATE')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
Order Datetime
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'REQDATE' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 18%;" @click="sort('Name')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
Patient Name
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'Name' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 10%;" @click="sort('SP_ACCESSNUMBER')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
No Lab
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'SP_ACCESSNUMBER' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 12%;" @click="sort('HOSTORDERNUMBER')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
No Register
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'HOSTORDERNUMBER' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 10%;" @click="sort('REFF')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
Reff
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'REFF' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 10%;" @click="sort('DOC')"
|
|
class="cursor-pointer hover:bg-base-200 transition-colors select-none">
|
|
<div class="flex items-center gap-1">
|
|
Doctor
|
|
<i class="fa text-xs"
|
|
:class="sortCol === 'DOC' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
|
|
</div>
|
|
</th>
|
|
<th style="width: 18%;">Tests</th>
|
|
<th style="width: 10%;">ResTo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="req in unvalidatedPaginated" :key="req.SP_ACCESSNUMBER">
|
|
<tr class="hover:bg-base-300 cursor-pointer"
|
|
@click="openValDialog(req.SP_ACCESSNUMBER)"
|
|
tabindex="0"
|
|
@keydown.enter="openValDialog(req.SP_ACCESSNUMBER)"
|
|
@keydown.escape="closeValDialog()">
|
|
<td x-text="req.REQDATE"></td>
|
|
<td x-text="req.Name"></td>
|
|
<td x-text="req.SP_ACCESSNUMBER" class="font-bold"></td>
|
|
<td x-text="req.HOSTORDERNUMBER" class="font-bold"></td>
|
|
<td x-text="req.REFF"></td>
|
|
<td x-text="req.DOC"></td>
|
|
<td x-text="req.TESTNAMES || req.TESTS"></td>
|
|
<td x-text="req.ODR_CRESULT_TO"></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Pagination Control -->
|
|
<div class="p-2 border-t border-base-200 bg-base-50 flex justify-between items-center"
|
|
x-show="!isLoading && unvalidatedList.length > 0">
|
|
<div class="text-xs text-base-content/60">
|
|
Showing <span class="font-bold" x-text="((currentPage - 1) * pageSize) + 1"></span> to
|
|
<span class="font-bold" x-text="Math.min(currentPage * pageSize, unvalidatedFiltered.length)"></span> of
|
|
<span class="font-bold" x-text="unvalidatedFiltered.length"></span> entries
|
|
</div>
|
|
<div class="join">
|
|
<button class="join-item btn btn-sm" @click="prevPage()" :disabled="currentPage === 1">
|
|
<i class="fa fa-chevron-left"></i>
|
|
</button>
|
|
<button class="join-item btn btn-sm no-animation bg-base-100 cursor-default">
|
|
Page <span x-text="currentPage"></span> / <span x-text="unvalidatedTotalPages"></span>
|
|
</button>
|
|
<button class="join-item btn btn-sm" @click="nextPage()" :disabled="currentPage === unvalidatedTotalPages">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validate Dialog -->
|
|
<?= $this->include('shared/dialog_val'); ?>
|