235 lines
13 KiB
PHP
235 lines
13 KiB
PHP
<div class="space-y-6" wire:key="user-management">
|
|
{{-- Header --}}
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:heading size="lg">User Management</flux:heading>
|
|
<flux:subheading>Manage system users and permissions</flux:subheading>
|
|
</div>
|
|
<flux:button wire:click="openCreateModal" variant="primary" size="sm">
|
|
<flux:icon.plus class="size-4 mr-1" />
|
|
Add User
|
|
</flux:button>
|
|
</div>
|
|
|
|
{{-- Flash Messages --}}
|
|
@if (session()->has('message'))
|
|
<div class="bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-200 px-4 py-3 rounded relative" role="alert">
|
|
<span class="block sm:inline">{{ session('message') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session()->has('error'))
|
|
<div class="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 px-4 py-3 rounded relative" role="alert">
|
|
<span class="block sm:inline">{{ session('error') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Filters --}}
|
|
<flux:card>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<flux:input wire:model.live="filters.search" placeholder="Search users..." icon="magnifying-glass" />
|
|
</div>
|
|
<div>
|
|
<flux:select wire:model.live="filters.status">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="suspended">Suspended</option>
|
|
</flux:select>
|
|
</div>
|
|
<div>
|
|
<flux:select wire:model.live="filters.role">
|
|
<option value="">All Roles</option>
|
|
@foreach($roles as $role)
|
|
<option value="{{ $role->name }}">{{ $role->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<div>
|
|
<flux:select wire:model.live="filters.subscription">
|
|
<option value="">All Subscriptions</option>
|
|
<option value="active">Active Subscription</option>
|
|
<option value="expired">Expired</option>
|
|
<option value="none">No Subscription</option>
|
|
</flux:select>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Users Table --}}
|
|
<flux:card>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
User
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Roles
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Subscription
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Last Login
|
|
</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
|
@forelse($users as $user)
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10">
|
|
<div class="h-10 w-10 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $user->name }}</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">{{ $user->email }}</div>
|
|
@if($user->company)
|
|
<div class="text-xs text-gray-400 dark:text-gray-500">{{ $user->company }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full
|
|
@if($user->status === 'active') bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200
|
|
@elseif($user->status === 'inactive') bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200
|
|
@else bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 @endif">
|
|
@if($user->status === 'suspended')
|
|
<flux:icon.exclamation-triangle class="size-3 mr-1" />
|
|
@endif
|
|
{{ ucfirst($user->status) }}
|
|
</span>
|
|
@if($user->status === 'suspended')
|
|
<div class="text-xs text-red-600 dark:text-red-400 mt-1">Cannot login</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
@foreach($user->roles as $role)
|
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 mr-1">
|
|
{{ $role->name }}
|
|
</span>
|
|
@endforeach
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
@if($user->activeSubscription)
|
|
<div class="text-sm font-medium text-green-600 dark:text-green-400">{{ $user->activeSubscription->plan }}</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">
|
|
Expires: {{ $user->activeSubscription->ends_at?->format('M j, Y') ?? 'Never' }}
|
|
</div>
|
|
@else
|
|
<span class="text-sm text-gray-400 dark:text-gray-500">No subscription</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
{{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
|
|
<flux:button wire:click="editUser({{ $user->id }})" variant="outline" size="sm">
|
|
<flux:icon.pencil class="size-4" />
|
|
</flux:button>
|
|
@if($user->status === 'active')
|
|
<flux:button wire:click="suspendUser({{ $user->id }})" variant="danger" size="xs">
|
|
Suspend
|
|
</flux:button>
|
|
@else
|
|
<flux:button wire:click="activateUser({{ $user->id }})" variant="primary" size="xs">
|
|
Activate
|
|
</flux:button>
|
|
@endif
|
|
@if($user->id !== auth()->id())
|
|
<flux:button
|
|
wire:click="deleteUser({{ $user->id }})"
|
|
wire:confirm="Are you sure you want to delete this user?"
|
|
variant="danger"
|
|
size="xs">
|
|
Delete
|
|
</flux:button>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
|
|
No users found matching your criteria.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
<div class="mt-4">
|
|
{{ $users->links() }}
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Create/Edit User Modal --}}
|
|
<flux:modal name="user-form" class="md:max-w-4xl md:w-full" wire:model.self="showModal">
|
|
<form wire:submit="{{ $editingUser ? 'updateUser' : 'createUser' }}">
|
|
<div class="space-y-6 w-full">
|
|
<div>
|
|
<flux:heading size="lg">{{ $editingUser ? 'Edit User' : 'Create User' }}</flux:heading>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<flux:input wire:model="form.name" label="Name" required />
|
|
<flux:input wire:model="form.email" label="Email" type="email" required />
|
|
|
|
@if(!$editingUser)
|
|
<flux:input wire:model="form.password" label="Password" type="password" required />
|
|
<flux:input wire:model="form.company" label="Company" />
|
|
@else
|
|
<flux:input wire:model="form.password" label="Password (leave blank to keep current)" type="password" />
|
|
<flux:input wire:model="form.company" label="Company" />
|
|
@endif
|
|
|
|
<flux:select wire:model="form.status" label="Status">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="suspended">Suspended</option>
|
|
</flux:select>
|
|
|
|
<div>
|
|
<flux:label>Roles</flux:label>
|
|
<div class="space-y-2">
|
|
@foreach($roles as $role)
|
|
<label class="flex items-center space-x-2">
|
|
<flux:checkbox wire:model="form.roles" value="{{ $role->name }}" />
|
|
<span>{{ $role->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-full">
|
|
<flux:textarea wire:model="form.notes" label="Notes" rows="3" />
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
<flux:button type="button" variant="ghost" wire:click="closeModal">Cancel</flux:button>
|
|
<flux:button type="submit" variant="primary">
|
|
{{ $editingUser ? 'Update' : 'Create' }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</flux:modal>
|
|
</div>
|