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,45 +1,69 @@
-<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 border border-white hover:shadow-md transition-all flex items-center justify-between">
-    <div class="flex items-center gap-4">
+<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 border border-white hover:shadow-md transition-all flex items-start justify-between">
+    <div class="flex items-start gap-4">
        <div class="w-14 h-14 rounded-2xl bg-purple-50 flex items-center justify-center text-purple-500 shrink-0">
            <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
        </div>
        <div class="flex flex-col">
-            <span class="text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-1">User nhận nhiều nhất</span>
-            @if($topReceivedUser)
-                <span class="text-[16px] font-extrabold text-[#1a2b49] leading-tight">{{ $topReceivedUser->name }}</span>
-                <span class="text-[12px] text-gray-500 font-semibold mt-0.5">MSNV: {{ $topReceivedUser->msnv }}</span>
+            <span class="text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-2">User nhận nhiều nhất</span>
+            @if(isset($topReceivedUsers) && $topReceivedUsers->isNotEmpty())
+                <div class="flex flex-col gap-3">
+                    @foreach($topReceivedUsers as $user)
+                        <div class="flex flex-col leading-tight">
+                            <span class="text-[16px] font-extrabold text-[#1a2b49]">{{ $user->name }}</span>
+                            <div class="text-[12px] text-gray-500 font-semibold mt-0.5 flex flex-wrap gap-x-2 gap-y-0.5">
+                                <span>MSNV: {{ $user->msnv }}</span>
+                                @if($user->mail)
+                                    <span class="text-gray-300">•</span>
+                                    <span>Email: {{ $user->mail }}</span>
+                                @endif
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
            @else
                <span class="text-[15px] font-semibold text-gray-400">Không có dữ liệu</span>
            @endif
        </div>
    </div>
-    <div class="text-right">
-        <span class="text-[36px] font-extrabold text-purple-600 leading-none">{{ $topReceivedUser?->total_received ?? 0 }}</span>
+    <div class="text-right shrink-0">
+        <span class="text-[36px] font-extrabold text-purple-600 leading-none">{{ isset($topReceivedUsers) && $topReceivedUsers->isNotEmpty() ? $topReceivedUsers->first()->total_received : 0 }}</span>
        <span class="block text-[11px] text-gray-400 font-bold uppercase mt-1">Thẻ Nhận</span>
    </div>
 </div>

-<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 border border-white hover:shadow-md transition-all flex items-center justify-between">
-    <div class="flex items-center gap-4">
+<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 border border-white hover:shadow-md transition-all flex items-start justify-between">
+    <div class="flex items-start gap-4">
        <div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 shrink-0">
            <svg class="w-7 h-7 transform -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
        </div>
        <div class="flex flex-col">
-            <span class="text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-1">User gửi nhiều nhất</span>
-            @if($topSentUser)
-                <span class="text-[16px] font-extrabold text-[#1a2b49] leading-tight">{{ $topSentUser->name }}</span>
-                <span class="text-[12px] text-gray-500 font-semibold mt-0.5">MSNV: {{ $topSentUser->msnv }}</span>
+            <span class="text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-2">User gửi nhiều nhất</span>
+            @if(isset($topSentUsers) && $topSentUsers->isNotEmpty())
+                <div class="flex flex-col gap-3">
+                    @foreach($topSentUsers as $user)
+                        <div class="flex flex-col leading-tight">
+                            <span class="text-[16px] font-extrabold text-[#1a2b49]">{{ $user->name }}</span>
+                            <div class="text-[12px] text-gray-500 font-semibold mt-0.5 flex flex-wrap gap-x-2 gap-y-0.5">
+                                <span>MSNV: {{ $user->msnv }}</span>
+                                @if($user->mail)
+                                    <span class="text-gray-300">•</span>
+                                    <span>Email: {{ $user->mail }}</span>
+                                @endif
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
            @else
                <span class="text-[15px] font-semibold text-gray-400">Không có dữ liệu</span>
            @endif
        </div>
    </div>
-    <div class="text-right">
-        <span class="text-[36px] font-extrabold text-blue-600 leading-none">{{ $topSentUser?->total_sent ?? 0 }}</span>
+    <div class="text-right shrink-0">
+        <span class="text-[36px] font-extrabold text-blue-600 leading-none">{{ isset($topSentUsers) && $topSentUsers->isNotEmpty() ? $topSentUsers->first()->total_sent : 0 }}</span>
        <span class="block text-[11px] text-gray-400 font-bold uppercase mt-1">Thẻ Gửi</span>
    </div>
 </div>
@@ -11,19 +11,24 @@
    <table class="min-w-full divide-y divide-gray-100 text-sm">
        <thead class="bg-gray-50/50">
            <tr>
+                <th class="table-header-cell">Thao tác</th>
                <th class="table-header-cell">MSNV</th>
                <th class="table-header-cell">Nhân viên</th>
+                <th class="table-header-cell">Phòng ban</th>
                <th class="table-header-cell">Đã Nhận</th>
                <th class="table-header-cell">Đã Gửi</th>
                <th class="table-header-cell">Số dư thẻ</th>
                <th class="table-header-cell">Quyền gửi</th>
+                <th class="table-header-cell">Vai trò</th>
                <th class="table-header-cell">Trạng thái</th>
-                <th class="table-header-cell text-right">Thao tác</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-100">
            @forelse($users as $u)
            <tr class="hover:bg-slate-50/60 transition-colors">
+                <td class="table-body-cell font-medium space-x-3">
+                    <a href="{{ route('admin.users.edit', $u->msnv) }}" class="table-action-link !text-[#3462f7] hover:!text-blue-800">Chỉnh sửa</a>
+                </td>
                <td class="table-body-cell font-bold text-text-dark">{{ $u->msnv }}</td>
                <td class="table-body-cell">
                    <div class="flex flex-col">
@@ -31,6 +36,20 @@
                        <span class="text-xs text-gray-400 mt-0.5">{{ $u->mail }}</span>
                    </div>
                </td>
+                <td class="table-body-cell">
+                    @php
+                        $deptVal = $u->departments;
+                        if (is_numeric($deptVal)) {
+                            $idx = ((int)$deptVal) - 1;
+                            $deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
+                        } else {
+                            $deptName = $deptVal ?? 'Team';
+                        }
+                    @endphp
+                    <div class="max-w-[200px] truncate font-medium text-gray-600" title="{{ $deptName }}">
+                        {{ $deptName }}
+                    </div>
+                </td>
                <td class="table-body-cell font-extrabold text-green-600">+{{ $u->total_received }}</td>
                <td class="table-body-cell font-extrabold text-blue-600">{{ $u->total_sent }}</td>
                <td class="table-body-cell font-extrabold text-orange-500">{{ $u->card }}</td>
@@ -42,19 +61,23 @@
                    @endif
                </td>
                <td class="table-body-cell">
-                    @if($u->status == \App\Models\User::STATUS_ACTIVE)
+                    @if($u->role == config('constants.ROLE_ADMIN'))
+                        <span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">Admin</span>
+                    @else
+                        <span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold text-gray-500">Member</span>
+                    @endif
+                </td>
+                <td class="table-body-cell">
+                    @if($u->status == config('constants.STATUS_ACTIVE'))
                        <span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">Đang làm việc</span>
                    @else
                        <span class="px-2.5 py-1 inline-flex text-[10px] leading-5 font-bold rounded-full bg-red-50 text-red-700 border border-red-100">Đã nghỉ việc</span>
                    @endif
                </td>
-                <td class="table-body-cell text-right font-medium space-x-3">
-                    <a href="{{ route('admin.users.edit', $u->msnv) }}" class="table-action-link !text-[#3462f7] hover:!text-blue-800">Quản lý</a>
-                </td>
            </tr>
            @empty
            <tr>
-                <td colspan="8" class="px-6 py-10 text-center text-text-light font-medium">Chưa có user nào đang hoạt động.</td>
+                <td colspan="10" class="px-6 py-10 text-center text-text-light font-medium">Chưa có user nào đang hoạt động.</td>
            </tr>
            @endforelse
        </tbody>
@@ -1,9 +1,9 @@
@props(['rank', 'name', 'team', 'avatar', 'score', 'isCurrent' => false, 'unit' => 'điểm'])

 <div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0 hover:bg-gray-50 rounded-xl px-3 transition-colors {{ $isCurrent ? 'bg-[#F5F8FF]' : '' }}">
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 min-w-0 flex-1">
        <!-- Rank -->
-        <div class="w-6 flex justify-center items-center">
+        <div class="w-6 flex justify-center items-center flex-shrink-0">
            @if($rank == 1)
                <span class="text-xl">👑</span>
                <span class="absolute text-[10px] font-bold text-amber-500 translate-y-3">1</span>
@@ -17,17 +17,17 @@
        </div>
        
        <!-- Avatar & Info -->
-        <div class="flex items-center gap-3 ml-1">
-            <img src="{{ $avatar }}" alt="{{ $name }}" class="w-10 h-10 rounded-full object-cover shadow-sm border border-gray-100">
-            <div class="flex flex-col">
-                <span class="text-[14px] font-bold {{ $isCurrent ? 'text-[#1a2b49]' : 'text-gray-800' }} leading-tight mb-0.5">{{ $name }}</span>
-                <span class="text-[12px] text-gray-500 font-medium">{{ $team }}</span>
+        <div class="flex items-center gap-3 ml-1 min-w-0 flex-1">
+            <img src="{{ $avatar }}" alt="{{ $name }}" class="w-10 h-10 rounded-full object-cover shadow-sm border border-gray-100 flex-shrink-0">
+            <div class="flex flex-col min-w-0 flex-1">
+                <span class="text-[14px] font-bold {{ $isCurrent ? 'text-[#1a2b49]' : 'text-gray-800' }} leading-tight mb-0.5 truncate">{{ $name }}</span>
+                <span class="text-[12px] text-gray-500 font-medium truncate" title="{{ $team }}">{{ $team }}</span>
            </div>
        </div>
    </div>
    
    <!-- Score -->
-    <div class="text-[14px]">
+    <div class="text-[14px] flex-shrink-0 ml-3">
        <span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-800' }}">{{ number_format($score, 0, ',', '.') }}</span>
        <span class="text-gray-400 font-medium ml-1 text-[13px]">{{ $unit }}</span>
    </div>
@@ -32,7 +32,7 @@
        </x-sidebar-item>


-        @if(Auth::check() && Auth::user()->role == \App\Models\User::ROLE_ADMIN)
+        @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
            <x-sidebar-item href="{{ route('admin.users.index') }}" :active="request()->routeIs('admin.users.index')" icon="users">
                Quản lý User
            </x-sidebar-item>
@@ -63,7 +63,7 @@
            </div>
            <div class="flex flex-col">
                <span class="text-[14px] font-bold text-[#1e293b] leading-tight truncate max-w-[130px]">{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}</span>
-                <span class="text-[12px] text-gray-500 font-medium">{{ Auth::check() ? (Auth::user()->role == \App\Models\User::ROLE_ADMIN ? 'Administrator' : 'Product Team') : 'Product Team' }}</span>
+                <span class="text-[12px] text-gray-500 font-medium">{{ Auth::check() ? (Auth::user()->role == config('constants.ROLE_ADMIN') ? 'Administrator' : 'Product Team') : 'Product Team' }}</span>
            </div>
        </div>
        <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
@@ -38,11 +38,9 @@
    <!-- Department Filter -->
    <select name="department" id="departmentFilter" class="form-input !py-1.5 !text-sm !w-full md:!w-[170px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
        <option value="" {{ $department === '' ? 'selected' : '' }}>Tất cả phòng ban</option>
-        <option value="1" {{ $department === '1' ? 'selected' : '' }}>Phòng Phát Triển (Dev)</option>
-        <option value="2" {{ $department === '2' ? 'selected' : '' }}>Phòng Nhân Sự (HR)</option>
-        <option value="3" {{ $department === '3' ? 'selected' : '' }}>Phòng Kinh Doanh (Sale)</option>
-        <option value="4" {{ $department === '4' ? 'selected' : '' }}>Ban Giám Đốc (Board)</option>
-        <option value="5" {{ $department === '5' ? 'selected' : '' }}>Phòng Marketing</option>
+        @foreach(config('constants.DEPARTMENTS') as $dept)
+            <option value="{{ $dept }}" {{ $department === $dept ? 'selected' : '' }}>{{ $dept }}</option>
+        @endforeach
    </select>

    <!-- Flag Send Filter -->
@@ -43,7 +43,7 @@
                    <p class="text-xs text-gray-500 font-medium truncate mb-1">{{ $user->mail }}</p>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">
-                            {{ $user->role == \App\Models\User::ROLE_ADMIN ? 'Admin' : 'Member' }}
+                            {{ $user->role == config('constants.ROLE_ADMIN') ? 'Admin' : 'Member' }}
                        </span>
                        <span class="text-xs text-gray-300 font-semibold">•</span>
                        <span class="text-xs font-bold text-gray-600">Thẻ: <span class="text-orange-500 font-extrabold text-sm">{{ $user->card }}</span></span>
@@ -105,11 +105,10 @@
                <div class="relative">
                    <label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="departments">Phòng ban <span class="text-red-500">*</span></label>
                    <select name="departments" id="departments" class="form-input !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" required>
-                        <option value="1" {{ old('departments') == '1' ? 'selected' : '' }}>Phòng Phát Triển (Dev)</option>
-                        <option value="2" {{ old('departments') == '2' ? 'selected' : '' }}>Phòng Nhân Sự (HR)</option>
-                        <option value="3" {{ old('departments') == '3' ? 'selected' : '' }}>Phòng Kinh Doanh (Sale)</option>
-                        <option value="4" {{ old('departments') == '4' ? 'selected' : '' }}>Ban Giám Đốc (Board)</option>
-                        <option value="5" {{ old('departments') == '5' ? 'selected' : '' }}>Phòng Marketing</option>
+                        <option value="">-- Chọn phòng ban --</option>
+                        @foreach(config('constants.DEPARTMENTS') as $dept)
+                            <option value="{{ $dept }}" {{ old('departments') == $dept ? 'selected' : '' }}>{{ $dept }}</option>
+                        @endforeach
                    </select>
                    @error('departments')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
                </div>
@@ -131,8 +130,8 @@
                <div class="relative">
                    <label class="block text-[14px] font-bold text-[#1a2b49] mb-2" for="role">Quyền hạn <span class="text-red-500">*</span></label>
                    <select name="role" id="role" class="form-input !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20" required>
-                        <option value="{{ \App\Models\User::ROLE_MEMBER }}" {{ old('role') == \App\Models\User::ROLE_MEMBER ? 'selected' : '' }}>Nhân viên (Member)</option>
-                        <option value="{{ \App\Models\User::ROLE_ADMIN }}" {{ old('role') == \App\Models\User::ROLE_ADMIN ? 'selected' : '' }}>Quản trị viên (Admin)</option>
+                        <option value="{{ config('constants.ROLE_MEMBER') }}" {{ old('role') == config('constants.ROLE_MEMBER') ? 'selected' : '' }}>Nhân viên (Member)</option>
+                        <option value="{{ config('constants.ROLE_ADMIN') }}" {{ old('role') == config('constants.ROLE_ADMIN') ? 'selected' : '' }}>Quản trị viên (Admin)</option>
                    </select>
                    @error('role')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
                </div>
@@ -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
@@ -37,6 +37,16 @@
                    </div>
                @endif

+                @if($errors->any())
+                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative">
+                        <ul class="list-disc pl-5">
+                            @foreach($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+
                @yield('content')
            </div>
        </main>
@@ -16,7 +16,7 @@
    <form action="{{ route('user.update_password') }}" method="POST">
        @csrf
        <div class="space-y-6">
-            @if(Auth::user()->first_login == \App\Models\User::FIRST_LOGIN_TRUE)
+            @if(Auth::user()->first_login == config('constants.FIRST_LOGIN_TRUE'))
                <div class="p-4 bg-amber-50/70 border border-amber-100 text-amber-800 rounded-2xl text-xs font-medium leading-relaxed flex items-start gap-2 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 text-amber-600">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@@ -63,7 +63,7 @@
            </div>

            <div class="flex items-center gap-3 pt-4">
-                @if(Auth::user()->first_login != \App\Models\User::FIRST_LOGIN_TRUE)
+                @if(Auth::user()->first_login != config('constants.FIRST_LOGIN_TRUE'))
                    <a href="{{ route('user.dashboard') }}" class="cursor-pointer flex-1 flex items-center justify-center h-[46px] rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-600 text-[14px] font-bold shadow-sm transition-all duration-200">Hủy bỏ</a>
                @endif
                <button type="submit" class="cursor-pointer flex-1 flex items-center justify-center h-[46px] rounded-xl bg-[#3462f7] hover:bg-[#254edb] text-white text-[14px] font-bold shadow-md shadow-blue-500/10 transition-all duration-200">Xác nhận đổi mật khẩu</button>
@@ -2,17 +2,19 @@
    @if(count($rankers) > 0)
        <div class="flex flex-col">
            @foreach($rankers as $item)
+                @php
+                    $deptVal = $item->departments;
+                    if (is_numeric($deptVal)) {
+                        $idx = ((int)$deptVal) - 1;
+                        $teamName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
+                    } else {
+                        $teamName = $deptVal ?? 'Team';
+                    }
+                @endphp
                <x-ranking-item 
                    rank="{{ $item->rank }}" 
                    name="{{ $item->name }}" 
-                    team="{{ match((int) $item->departments) {
-                        1 => 'Dev Team',
-                        2 => 'HR Team',
-                        3 => 'Sale Team',
-                        4 => 'Board Team',
-                        5 => 'Marketing Team',
-                        default => 'Team'
-                    } }}" 
+                    team="{{ $teamName }}" 
                    avatar="{{ $item->avatar ?? 'https://api.dicebear.com/7.x/notionists/svg?seed=' . urlencode($item->name) . '&backgroundColor=bfdbfe' }}" 
                    score="{{ $item->score }}" 
                    unit="thẻ" 
@@ -30,17 +32,19 @@
    @if($currentUserRankItem)
        <div class="mt-auto">
            <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
+            @php
+                $currDeptVal = $currentUserRankItem->departments;
+                if (is_numeric($currDeptVal)) {
+                    $idx = ((int)$currDeptVal) - 1;
+                    $currTeamName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
+                } else {
+                    $currTeamName = $currDeptVal ?? 'Team';
+                }
+            @endphp
            <x-ranking-item 
                rank="{{ $currentUserRankItem->rank > 0 ? $currentUserRankItem->rank : '-' }}" 
                name="{{ $currentUserRankItem->name }}" 
-                team="{{ match((int) $currentUserRankItem->departments) {
-                    1 => 'Dev Team',
-                    2 => 'HR Team',
-                    3 => 'Sale Team',
-                    4 => 'Board Team',
-                    5 => 'Marketing Team',
-                    default => 'Team'
-                } }}" 
+                team="{{ $currTeamName }}" 
                avatar="{{ $currentUserRankItem->avatar ?? 'https://api.dicebear.com/7.x/notionists/svg?seed=' . urlencode($currentUserRankItem->name) . '&backgroundColor=bfdbfe' }}" 
                score="{{ $currentUserRankItem->score }}" 
                unit="thẻ"