antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: user list

Browse Source
This commit is contained in:
antv
2026-07-08 15:29:13 +07:00
parent 7d9ba527a3
commit e476c2768a
32 changed files with 1091 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ranking-item.blade.php
+8 -8
View File
@@ -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>
resources/views/components/sidebar.blade.php
+2 -2
View File
@@ -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>
resources/views/components/user-filter-form.blade.php
+3 -5
View File
@@ -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 -->
resources/views/components/user-form.blade.php
+7 -8
View File
@@ -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>
resources/views/components/user-page.blade.php
+106 -3
View File
@@ -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