631 lines
17 KiB
PHP
631 lines
17 KiB
PHP
@extends('layouts.customer')
|
|
|
|
@section('title', 'User Management - Admin')
|
|
|
|
@section('content')
|
|
<div class="admin-container">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div>
|
|
<h1>User Management</h1>
|
|
<p class="subtitle">Manage all registered users and their roles</p>
|
|
</div>
|
|
<a href="{{ route('admin.users.create') }}" class="btn-create">
|
|
<svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Create New User
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filters -->
|
|
<div class="search-filters">
|
|
<form method="GET" action="{{ route('admin.users.index') }}" class="filter-form">
|
|
<!-- Search Bar -->
|
|
<div class="search-box">
|
|
<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
placeholder="Search by name, username or email..."
|
|
value="{{ request('search') }}"
|
|
class="search-input"
|
|
>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="filters">
|
|
<select name="role" class="filter-select" onchange="this.form.submit()">
|
|
<option value="all">All roles</option>
|
|
<option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
|
|
<option value="winemaker" {{ request('role') == 'winemaker' ? 'selected' : '' }}>Winemaker</option>
|
|
<option value="employee" {{ request('role') == 'employee' ? 'selected' : '' }}>Employee</option>
|
|
<option value="customer" {{ request('role') == 'customer' ? 'selected' : '' }}>Customer</option>
|
|
</select>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
<svg style="width: 18px; height: 18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
Search
|
|
</button>
|
|
|
|
@if(request('search') || request('role') != 'all')
|
|
<a href="{{ route('admin.users.index') }}" class="btn-secondary">
|
|
Clear filters
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages -->
|
|
@if(session('success'))
|
|
<div class="alert alert-success">
|
|
<svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-error">
|
|
<svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Users Table -->
|
|
@if($users->count() > 0)
|
|
<div class="table-container">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($users as $user)
|
|
<tr>
|
|
<td class="user-id">#{{ $user->id }}</td>
|
|
<td class="user-name">
|
|
<div class="name-cell">
|
|
<div class="avatar">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
<span>{{ $user->name }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="user-username">{{ $user->username }}</td>
|
|
<td class="user-email">{{ $user->email }}</td>
|
|
<td>
|
|
<span class="role-badge role-{{ $user->role->value }}">
|
|
{{ ucfirst($user->role->value) }}
|
|
</span>
|
|
</td>
|
|
<td class="user-date">{{ $user->created_at->format('d.m.Y') }}</td>
|
|
<td class="user-actions">
|
|
<a href="{{ route('admin.users.edit', $user) }}" class="btn-edit">
|
|
<svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
|
</svg>
|
|
</a>
|
|
@if($user->id !== auth()->id())
|
|
<form action="{{ route('admin.users.destroy', $user) }}" method="POST"
|
|
onsubmit="return confirm('Are you sure you want to delete this user?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn-delete">
|
|
<svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
@else
|
|
<span class="current-user-badge">You</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
@if($users->hasPages())
|
|
<div class="pagination-container">
|
|
{{ $users->links() }}
|
|
</div>
|
|
@endif
|
|
@else
|
|
<div class="empty-state">
|
|
<svg style="width: 64px; height: 64px; color: #cbd5e0;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
|
|
</svg>
|
|
<h3>No users found</h3>
|
|
<p>Try adjusting your search filters</p>
|
|
<a href="{{ route('admin.users.index') }}" class="btn-primary" style="margin-top: 1rem;">Show all users</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<style>
|
|
.admin-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.btn-create {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1.75rem;
|
|
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
|
color: white;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
|
|
}
|
|
|
|
.btn-create:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2.5rem;
|
|
color: #2d3748;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #718096;
|
|
}
|
|
|
|
/* Search and Filters */
|
|
.search-filters {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.filter-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #a0aec0;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem 0.75rem 3rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: #89b4d9;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-select {
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: #89b4d9;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
border: none;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: #1a365d;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #edf2f7;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert {
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #c6f6d5;
|
|
color: #22543d;
|
|
border-left: 4px solid #48bb78;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #fff5f5;
|
|
color: #742a2a;
|
|
border-left: 4px solid #fc8181;
|
|
}
|
|
|
|
/* Table */
|
|
.table-container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.users-table thead {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: #1a365d;
|
|
}
|
|
|
|
.users-table th {
|
|
padding: 1rem 1.5rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.users-table tbody tr {
|
|
border-bottom: 1px solid #e2e8f0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.users-table tbody tr:hover {
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 1rem 1.5rem;
|
|
color: #4a5568;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.user-id {
|
|
font-weight: 600;
|
|
color: #718096;
|
|
}
|
|
|
|
.name-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: #1a365d;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.user-email {
|
|
color: #718096;
|
|
}
|
|
|
|
.role-badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.role-admin {
|
|
background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
|
|
color: #7f1d1d;
|
|
}
|
|
|
|
.role-winemaker {
|
|
background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
|
|
color: #5b21b6;
|
|
}
|
|
|
|
.role-employee {
|
|
background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
|
|
color: #78350f;
|
|
}
|
|
|
|
.role-customer {
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
color: #065f46;
|
|
}
|
|
|
|
.user-date {
|
|
color: #718096;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.user-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-edit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 0.75rem;
|
|
background: #4299e1;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
background: #3182ce;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-delete {
|
|
background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
border: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-delete:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(252, 129, 129, 0.4);
|
|
}
|
|
|
|
.current-user-badge {
|
|
background: #f7fafc;
|
|
color: #718096;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.empty-state h3 {
|
|
font-size: 1.5rem;
|
|
color: #2d3748;
|
|
margin: 1rem 0 0.5rem;
|
|
}
|
|
|
|
.empty-state p {
|
|
color: #718096;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.pagination-container nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination-container p {
|
|
font-size: 1rem;
|
|
color: #4a5568;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pagination-container nav > div:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.pagination-container a,
|
|
.pagination-container span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.pagination-container span[aria-current="page"] {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: #1a365d;
|
|
border-color: #89b4d9;
|
|
}
|
|
|
|
.pagination-container a:hover {
|
|
background: #f7fafc;
|
|
border-color: #89b4d9;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.pagination-container span[aria-disabled="true"] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.btn-create {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.filters {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.users-table {
|
|
min-width: 800px;
|
|
}
|
|
|
|
.user-actions {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.btn-edit,
|
|
.btn-delete {
|
|
padding: 0.4rem 0.6rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|