58 lines
2.4 KiB
PHP
58 lines
2.4 KiB
PHP
<div class="box-form rounded-lg shadow p-6 bg-white space-y-6 mt-4">
|
|
<!-- Search Input -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div class="w-full sm:w-1/2 md:w-1/3">
|
|
<label class="sr-only" for="search">Tìm kiếm</label>
|
|
<div class="relative text-gray-600">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<i class="fas fa-search text-gray-400"></i>
|
|
</span>
|
|
<input
|
|
wire:model="search"
|
|
id="search"
|
|
type="text"
|
|
placeholder="Tìm kiếm giao dịch..."
|
|
class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[var(--color-primary-300)] focus:outline-none transition duration-150"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
|
<thead class="bg-[var(--color-primary-500)] text-white text-center">
|
|
<tr>
|
|
<th class="px-6 py-3 font-semibold">Mã giao dịch</th>
|
|
<th class="px-6 py-3 font-semibold">Số tiền</th>
|
|
<th class="px-6 py-3 font-semibold">Cập nhật lần cuối</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 bg-white">
|
|
@forelse ($transactions as $item)
|
|
<tr class="hover:bg-gray-50 transition">
|
|
<td class="px-6 py-4 text-center">{{ $item->trans }}</td>
|
|
<td class="px-6 py-4 text-center text-green-600 font-medium">
|
|
{{ number_format($item->amount, 0, ',', '.') }} đ
|
|
</td>
|
|
<td class="px-6 py-4 text-center text-gray-500">
|
|
{{ $item->updated_at }}
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="3" class="text-center py-4 text-gray-400 italic">
|
|
Không có giao dịch nào.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pt-4">
|
|
{{ $transactions->links() }}
|
|
</div>
|
|
</div>
|