feature: user list

2026-07-08 15:29:13 +07:00
parent 7d9ba527a3
commit e476c2768a
32 changed files with 1091 additions and 284 deletions
@@ -1,4 +1,4 @@
-@props(['mode', 'user' => null, 'administrations' => null, 'selectedMonth' => null])
+@props(['mode', 'user' => null, 'administrations' => null, 'selectedMonth' => null, 'addCards' => null, 'admins' => null])

@if($mode === 'self' && $user)
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
@@ -29,11 +29,114 @@
        @endif
    </div>

-    <!-- RIGHT PANEL: Transaction History -->
+    <!-- RIGHT PANEL: Transaction History & Add Card History -->
    @if(in_array($mode, ['edit', 'delete', 'self']) && $user && $administrations)
-        <div class="col-span-1 lg:col-span-2">
+        <div class="col-span-1 lg:col-span-2 flex flex-col gap-6">
            <x-transaction-history :mode="$mode" :user="$user" :administrations="$administrations" :selectedMonth="$selectedMonth" />
+            
+            @if($mode === 'edit' && isset($addCards))
+                <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden flex flex-col">
+                    <div class="px-6 py-5 border-b border-gray-100 bg-white">
+                        <h3 class="text-[17px] font-extrabold text-[#1a2b49] leading-tight">
+                            Lịch sử cấp phát thẻ
+                        </h3>
+                    </div>
+                    
+                    <div class="p-0 overflow-y-auto max-h-[600px]">
+                        <table class="min-w-full divide-y divide-gray-100 text-sm">
+                            <thead class="bg-gray-50/50 sticky top-0">
+                                <tr>
+                                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Ngày cấp</th>
+                                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Người cấp (Admin)</th>
+                                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Số lượng thẻ</th>
+                                    <th class="px-6 py-4 text-center text-xs font-bold text-text-light uppercase tracking-wider w-24">Hành động</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-100">
+                                @forelse($addCards as $addCard)
+                                    @php
+                                        $isCurrentMonth = Carbon\Carbon::parse($addCard->date)->format('Y-m') === Carbon\Carbon::now()->format('Y-m');
+                                    @endphp
+                                    <tr class="hover:bg-slate-50/60 transition-colors">
+                                        <td class="px-6 py-3.5 whitespace-nowrap text-text-medium font-medium">{{ Carbon\Carbon::parse($addCard->date)->format('d/m/Y') }}</td>
+                                        <td class="px-6 py-3.5 whitespace-nowrap font-bold text-[#1a2b49]">
+                                            @if($addCard->sellerUser)
+                                                {{ $addCard->sellerUser->name }} <span class="text-xs font-medium text-gray-500">(MSNV: {{ $addCard->seller }})</span>
+                                            @else
+                                                MSNV: {{ $addCard->seller }}
+                                            @endif
+                                        </td>
+                                        <td class="px-6 py-3.5 whitespace-nowrap font-extrabold text-base text-green-600">+{{ $addCard->num_card }}</td>
+                                        <td class="px-6 py-3.5 whitespace-nowrap text-center">
+                                            @if($isCurrentMonth)
+                                                <button type="button" onclick="openEditAddCardModal({{ json_encode($addCard) }})" class="text-blue-600 hover:text-blue-900 font-bold transition-colors">Sửa</button>
+                                            @else
+                                                <span class="text-gray-400 font-semibold text-xs cursor-not-allowed" title="Không thể chỉnh sửa giao dịch tháng trước">Tháng trước</span>
+                                            @endif
+                                        </td>
+                                    </tr>
+                                @empty
+                                    <tr>
+                                        <td colspan="4" class="px-6 py-12 text-center text-text-light font-medium text-base">
+                                            Chưa có lịch sử cấp phát thẻ nào.
+                                        </td>
+                                    </tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            @endif
        </div>
    @endif

 </div>
+
+@if($mode === 'edit' && isset($addCards) && isset($admins))
+    <x-modal id="editAddCardModal" title="Chỉnh sửa giao dịch cấp phát thẻ">
+        <form id="editAddCardForm" method="POST" action="">
+            @csrf
+            @method('PUT')
+            
+            <div class="mb-5">
+                <label for="modal_num_card" class="block text-sm font-bold text-gray-700 mb-2">Số lượng card</label>
+                <input type="number" id="modal_num_card" name="num_card" min="1" required class="w-full border border-gray-300 rounded-xl px-4 py-2.5 text-sm focus:border-blue-500 focus:ring focus:ring-blue-200 outline-none transition-all">
+            </div>
+            
+            <div class="mb-5">
+                <label for="modal_seller" class="block text-sm font-bold text-gray-700 mb-2">Người cấp (Admin)</label>
+                <select id="modal_seller" name="seller" required class="w-full border border-gray-300 rounded-xl px-4 py-2.5 text-sm focus:border-blue-500 focus:ring focus:ring-blue-200 outline-none transition-all">
+                    @foreach($admins as $admin)
+                        <option value="{{ $admin->msnv }}">{{ $admin->name }} (MSNV: {{ $admin->msnv }})</option>
+                    @endforeach
+                </select>
+            </div>
+            
+            <div class="mb-6">
+                <label for="modal_date" class="block text-sm font-bold text-gray-700 mb-2">Ngày cấp</label>
+                <input type="date" id="modal_date" name="date" required min="{{ Carbon\Carbon::now()->startOfMonth()->format('Y-m-d') }}" max="{{ Carbon\Carbon::now()->endOfMonth()->format('Y-m-d') }}" class="w-full border border-gray-300 rounded-xl px-4 py-2.5 text-sm focus:border-blue-500 focus:ring focus:ring-blue-200 outline-none transition-all">
+            </div>
+            
+            <div class="flex justify-end gap-3 pt-4 border-t border-gray-100">
+                <button type="button" onclick="closeModal('editAddCardModal')" class="btn-secondary !px-5">Hủy bỏ</button>
+                <button type="submit" class="btn-primary !px-5 bg-[#3462f7] hover:bg-blue-700">Lưu thay đổi</button>
+            </div>
+        </form>
+    </x-modal>
+
+    <script>
+        function openEditAddCardModal(record) {
+            const form = document.getElementById('editAddCardForm');
+            form.action = `/admin/add-cards/${record.id}`;
+            
+            document.getElementById('modal_num_card').value = record.num_card;
+            document.getElementById('modal_seller').value = record.seller;
+            
+            if (record.date) {
+                document.getElementById('modal_date').value = record.date.substring(0, 10);
+            }
+            
+            openModal('editAddCardModal');
+        }
+    </script>
+@endif